Merge branch 'main' into enhance-list-features

.gitignore

@@ -46,3 +46,5 @@ publish_keys.json
 docs/.vitepress/cache
 
 project.zip
+
+*storybook.log

.storybook/main.ts

@@ -3,17 +3,29 @@ import type { StorybookConfig } from "@storybook/react-vite";
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
     "@storybook/addon-onboarding",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
     "@storybook/addon-interactions",
+    "storybook-dark-mode",
   ],
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
-  docs: {
-    autodocs: "tag",
+  viteFinal: (config) => {
+    config.define = {
+      ...config.define,
+      "process.env": process.env,
+      esbuild: {
+        jsx: "automatic",
+      },
+    };
+    return config;
+  },
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
   },
 };
+
 export default config;

.storybook/preview.ts

@@ -1,16 +1,17 @@
 import type { Preview } from "@storybook/react";
-import '../src/style.content.css';
+import "../src/style.content.css";
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
   },
+
+  tags: ["autodocs"],
 };
 
 export default preview;

README.md

@@ -47,7 +47,7 @@ https://github.com/kawamataryo/sky-follower-bridge/assets/11070996/67bdd228-dc67
 
 ## 🚨 Limitations
 
-- User search may fail due to late limit in Bluesky's API. In this case, please wait for 2 to 3 minutes and execute the search again.
+- User search may fail due to rate limit in Bluesky's API. In this case, please wait for 2 to 3 minutes and execute the search again.
 
 ## Development
 

docs/.vitepress/config.mts

@@ -26,7 +26,7 @@ export default defineConfig({
   description: "Sky Follower Bridge is a Chrome extension that allows you to follow users on Bluesky from your own account.",
   themeConfig: {
     logo: {
-      src: "/images/logo.png",
+      src: "/images/logo.webp",
       alt: "Sky Follower Bridge Logo",
     },
 
@@ -49,6 +49,10 @@ export default defineConfig({
         icon: "x",
         link: "https://x.com/KawamataRyo",
       },
+      {
+        icon: "kofi",
+        link: "https://ko-fi.com/kawamataryo",
+      },
     ],
 
     outline: {
@@ -138,6 +142,18 @@ export default defineConfig({
           { text: "Guia de Solução de Problemas", link: "/pt/troubleshooting" },
         ],
       }
+    },
+    es: {
+      label: "Español",
+      lang: "es",
+      link: "/es/",
+      themeConfig: {
+        nav: [
+          { text: "Inicio", link: "/" },
+          { text: "Comenzando", link: "/es/get-started" },
+          { text: "Guía de solución de problemas", link: "/es/troubleshooting" },
+        ],
+      }
     }
   }
 });

docs/.vitepress/theme/custom.css

@@ -11,8 +11,15 @@
 }
 
 .VPImage.image-src {
-  max-width: 180px;
-  max-height: 180px;
+  max-width: 130px;
+  max-height: 130px;
+}
+
+@media (min-width: 640px) {
+  .VPImage.image-src {
+    max-width: 170px;
+    max-height: 170px;
+  }
 }
 
 @media (min-width: 640px) {

docs/es/get-started.md

@@ -0,0 +1,87 @@
+# Comenzando
+
+Sky Follower Bridge te ayuda a encontrar y seguir tus conexiones de 𝕏 (Twitter) en Bluesky.
+
+<iframe width="100%" height="315" src="https://www.youtube.com/embed/dfMK07PJeL4?si=SDC7P8basmoOOdjw" title="Reproductor de video de YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+
+## Instalación
+
+Sky Follower Bridge está disponible en:
+
+- [Chrome Web Store](https://chrome.google.com/webstore/detail/sky-follower-bridge/behhbpbpmailcnfbjagknjngnfdojpko) (Recomendado)
+- [Complementos de Firefox](https://addons.mozilla.org/en-US/firefox/addon/sky-follower-bridge/)
+- [Complementos de Microsoft Edge](https://microsoftedge.microsoft.com/addons/detail/sky-follower-bridge/dpeolmdblhfolkhlhbhlofkkpaojnnbb)
+
+::: tip
+Recomendamos usar la versión de Chrome Web Store ya que siempre está actualizada. Las versiones de otras tiendas pueden retrasarse en las actualizaciones.
+:::
+
+::: warning
+Sky Follower Bridge solo está disponible para navegadores de escritorio. Los navegadores móviles no son compatibles.
+:::
+
+## Uso
+
+### 1. Navega a 𝕏 (Twitter)
+
+Visita cualquiera de estas páginas en X:
+- Tu página de Seguidos: [x.com/following](https://x.com/following)
+- Tu página de Usuarios bloqueados: [x.com/settings/blocked/all](https://x.com/settings/blocked/all)
+- La página de Miembros de una Lista pública: `x.com/i/lists/<list_id>/members`
+
+![following-page](/images/following-page.png)
+
+### 2. Inicia Sky Follower Bridge
+
+Presiona `Alt + B` o haz clic en el ícono de la extensión en la barra de herramientas de tu navegador.
+
+::: tip
+Para los usuarios de Firefox, presionar `Alt + B` puede no funcionar. En ese caso, haz clic en el ícono de la extensión en la barra de herramientas del navegador.
+
+https://support.mozilla.org/en-US/kb/extensions-button
+:::
+
+![Open Extension](/images/open-extension.png)
+
+### 3. Inicia sesión en Bluesky
+
+Ingresa tu identificador de Bluesky (o correo electrónico) y [Contraseña de la aplicación](https://bsky.app/settings/app-passwords).
+
+::: tip
+Si encuentras errores de inicio de sesión, consulta la [Guía de solución de problemas](/troubleshooting).
+:::
+
+![enter-credentials](/images/enter-credentials.png)
+
+### 4. Inicia la búsqueda
+
+Haz clic en "Buscar usuarios de Bluesky" para comenzar a escanear. La extensión buscará perfiles de Bluesky coincidentes verificando la API de Bluesky.
+
+![find-bluesky-users](/images/scan-users.png)
+
+### 5. Revisa los resultados
+
+Haz clic en "Ver resultados" para ver las posibles coincidencias encontradas en Bluesky.
+
+![view-results-button](/images/click-results.png)
+
+Esto abrirá la página de opciones mostrando todos los usuarios de Bluesky detectados.
+
+![options](/images/options.png)
+
+### 6. Sigue a los usuarios
+
+Haz clic en el botón "Seguir" junto a cualquier usuario con el que desees conectarte.
+
+![follow](/images/click-follow-btn.png)
+
+o usa el botón "Seguir a todos" para seguir a todos los usuarios detectados de una vez.
+
+![follow-all](/images/follow-all-btn.png)
+
+::: warning
+Ten en cuenta que el proceso de coincidencia no es perfecto y puede sugerir coincidencias incorrectas ocasionalmente. Siempre verifica el perfil antes de seguir.
+:::
+
+¡Eso es todo! Disfruta conectándote con tu comunidad en Bluesky 🎉 

docs/es/index.md

@@ -0,0 +1,32 @@
+---
+layout: home
+
+hero:
+  name: "Sky Follower Bridge"
+  text: "Conecta tus redes sociales"
+  tagline: Migra sin problemas tus conexiones sociales de 𝕏 a Bluesky
+  actions:
+    - theme: brand
+      text: Comenzar
+      link: /es/get-started
+    - theme: alt
+      text: Solución de problemas
+      link: /es/troubleshooting
+  image:
+    src: /images/logo.webp
+    alt: Imagen de portada de Sky Follower Bridge
+
+features:
+  - icon: 🔍
+    title: Detección automática de perfiles
+    details: Detecta automáticamente usuarios de Bluesky similares a tus seguidos en 𝕏.
+  - icon: 🚀
+    title: Función de seguimiento masivo
+    details: Ahorra tiempo siguiendo a múltiples usuarios a la vez con nuestro botón "Seguir a todos".
+  - icon: 📋
+    title: Soporte para múltiples listas
+    details: Funciona con listas de Seguidos, Seguidores, Usuarios bloqueados e incluso listas públicas de 𝕏.
+  - icon: 🌐
+    title: Soporte multiplataforma
+    details: Disponible en Chrome, Firefox y Microsoft Edge para tu conveniencia.
+--- 

docs/es/troubleshooting.md

@@ -0,0 +1,128 @@
+# Guía de solución de problemas
+
+## Errores de autenticación
+
+### Problemas de inicio de sesión
+
+**Mensaje de error:**  
+<span class="error-message">Error: Invalid identifier or password</span>
+
+**Lista de verificación:**
+1. Entrada de nombre de usuario y contraseña
+   - Verifica si hay espacios accidentales
+   - Si copias y pegas, asegúrate de que no se incluyan caracteres adicionales
+
+2. Formato del nombre de usuario
+   - Formato correcto: `tu-usuario.bsky.social`
+   - Error común: `tu-usuario` (falta .bsky.social)
+
+3. Información de la contraseña
+   - Recomendamos encarecidamente usar una [Contraseña de la aplicación](https://bsky.app/settings/app-passwords) en lugar de tu contraseña regular
+   - Formato de la contraseña de la aplicación: `xxxx-xxxx-xxxx-xxxx` (19 caracteres)
+
+::: tip Consejos útiles
+No confundas la Contraseña de la aplicación con el "nombre de la contraseña" que se muestra en la configuración.
+Cómo crear una nueva Contraseña de la aplicación:
+2. [Navega a la sección de Contraseñas de la aplicación](https://bsky.app/settings/app-passwords)
+3. Haz clic en "Agregar Contraseña de la aplicación"
+4. Haz clic en "Crear Contraseña de la aplicación"
+4. Copia la contraseña generada de 19 caracteres
+:::
+
+---
+
+### Se requiere autenticación de dos factores
+
+**Mensaje de error:**  
+<span class="error-message">Error: Two-factor authentication required</span>
+
+**Solución:**
+1. Revisa tu correo electrónico para obtener el código de autenticación
+2. Ingresa el código en el campo de entrada de 2FA
+3. Intenta iniciar sesión nuevamente
+
+## Errores de límite de tasa
+
+**Mensaje de error:**  
+<span class="error-message">Error: Rate limit error</span>
+
+**Solución:**
+1. La API de Bluesky tiene los siguientes límites ([documentación oficial](https://docs.bsky.app/docs/advanced-guides/rate-limits)):
+   - Hasta 5,000 puntos por hora (aproximadamente 1,666 acciones nuevas)
+   - Hasta 35,000 puntos por día
+   - Puntos por acción:
+     - Crear: 3 puntos
+     - Actualizar: 2 puntos
+     - Eliminar: 1 punto
+2. Si alcanzas el límite, espera hasta que se restablezca
+3. Haz clic en el botón "Reiniciar" para intentarlo de nuevo
+
+::: warning
+La versión publicada en Firefox frecuentemente encuentra errores de límite de tasa. Si encuentras un error, intenta en Chrome.
+:::
+
+::: tip
+La mayoría de los usuarios no alcanzarán estos límites durante el uso normal. Sin embargo, ten cuidado al realizar acciones masivas como seguir a muchos usuarios o dar me gusta a muchas publicaciones en un corto período.
+:::
+
+## Errores de página
+
+### Página inválida
+
+**Mensaje de error:**  
+<span class="error-message">Error: Invalid page. please open the 𝕏 following or blocking or list page.</span>
+
+**Solución:**
+Usa la extensión solo en estas páginas de 𝕏 (Twitter):
+- Página de seguidos ([x.com/following](https://x.com/following))
+- Página de bloqueados ([x.com/settings/blocked/all](https://x.com/settings/blocked/all))
+- Página de miembros de lista (`x.com/i/lists/<list_id>/members`)
+
+o verifica los permisos de tu extensión en la página de extensiones.
+Los permisos del sitio deben ser como se muestra a continuación:
+
+<img src="/images/site_permissions.png" alt="permisos del sitio" width="500"/>
+
+## Problemas de escaneo
+
+### El botón View Detected Users no funciona
+
+Por alguna razón, el botón View Detected Users puede no funcionar.
+
+**Solución:**
+1. Haz clic derecho en el ícono de la extensión y selecciona "Opciones"
+2. Se mostrará la página de resultados
+
+<img src="/images/click-option.png" alt="hacer clic en opción" width="500"/>
+
+### El escaneo se detiene temprano
+
+El escaneo se detiene antes de llegar al final de la página
+
+**Solución:**
+1. Haz clic en "Reanudar escaneo" para continuar
+2. El escaneo se detendrá automáticamente cuando llegue al final de la página
+3. Puedes hacer clic en "Detener escaneo y ver resultados" en cualquier momento
+
+### No se encontraron usuarios
+
+No se detectaron usuarios de Bluesky después del escaneo
+
+**Solución:**
+1. Asegúrate de haber iniciado sesión correctamente
+2. Intenta escanear de nuevo - algunos usuarios pueden no ser detectados en el primer intento
+3. Verifica si los usuarios de 𝕏 han vinculado sus cuentas de Bluesky en sus perfiles
+
+## Otros problemas
+
+Si encuentras errores inesperados:
+
+1. Recarga la página
+2. Intenta la operación nuevamente
+3. Si el problema persiste, puedes:
+   - [Crear un problema](https://github.com/kawamataryo/sky-follower-bridge/issues) con:
+     - El mensaje de error exacto
+     - Lo que estabas intentando hacer
+     - Tu tipo y versión de navegador
+     - Cualquier captura de pantalla relevante
+   - O mencionar a [@kawamataryo.bsky.social](https://bsky.app/profile/kawamataryo.bsky.social) en Bluesky 

docs/fr/get-started.md

@@ -4,7 +4,6 @@ Sky Follower Bridge vous aide à trouver et suivre vos connexions 𝕏 (Twitter)
 
 <iframe width="100%" height="315" src="https://www.youtube.com/embed/dfMK07PJeL4?si=SDC7P8basmoOOdjw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
-<p style="color: gray; font-size: 0.8em; line-height: 1.4;">Cette vidéo démontre la version Edge. La dernière version de Chrome et les versions récentes de Firefox peuvent se comporter différemment. Un tutoriel vidéo pour Chrome arrive bientôt.</p>
 
 ## Installation
 
@@ -18,6 +17,10 @@ Sky Follower Bridge est disponible sur :
 Nous recommandons d'utiliser la version du Chrome Web Store car elle est toujours à jour. Les versions des autres magasins peuvent être en retard dans les mises à jour.
 :::
 
+::: warning
+Sky Follower Bridge n'est disponible que pour les navigateurs de bureau. Les navigateurs mobiles ne sont pas supportés.
+:::
+
 ## Utilisation
 
 ### 1. Naviguez vers 𝕏 (Twitter)