add error message

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sky-follower-bridge",
   "displayName": "Sky Follower Bridge",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Instantly find and follow the same users from your Twitter follows on Bluesky.",
   "author": "kawamataryou",
   "scripts": {

src/contents/App.tsx

@@ -1,16 +1,10 @@
 import cssText from "data-text:~style.content.css";
-import type { AtpSessionData } from "@atproto/api";
 import { sendToBackground } from "@plasmohq/messaging";
-import { getPort } from "@plasmohq/messaging/port";
 import type { PlasmoCSConfig } from "plasmo";
 import React from "react";
 import AlertError from "~lib/components/AlertError";
-import AlertSuccess from "~lib/components/AlertSuccess";
 import LoadingCards from "~lib/components/LoadingCards";
-import MatchTypeFilter from "~lib/components/MatchTypeFilter";
 import Modal from "~lib/components/Modal";
-import UserCard from "~lib/components/UserCard";
-import UserCardSkeleton from "~lib/components/UserCardSkeleton";
 import { MESSAGE_NAMES } from "~lib/constants";
 import { useRetrieveBskyUsers } from "~lib/hooks/useRetrieveBskyUsers";
 
@@ -35,6 +29,7 @@ const App = () => {
     stopRetrieveLoop,
     restart,
     isBottomReached,
+    errorMessage,
   } = useRetrieveBskyUsers();
 
   React.useEffect(() => {
@@ -87,6 +82,7 @@ const App = () => {
           <p className="text-2xl font-bold">
             Detected <span className="text-4xl">{users.length}</span> users
           </p>
+          {errorMessage && <AlertError>{errorMessage}</AlertError>}
           {loading && (
             <>
               <button

src/lib/hooks/useBskyUserManager.ts

@@ -1,5 +1,5 @@
-import { useStorage } from "@plasmohq/storage/hook";
 import { Storage } from "@plasmohq/storage";
+import { useStorage } from "@plasmohq/storage/hook";
 import React from "react";
 import { BskyServiceWorkerClient } from "~lib/bskyServiceWorkerClient";
 import {
@@ -12,13 +12,14 @@ import { wait } from "~lib/utils";
 import type { BskyUser, MatchType } from "~types";
 
 export const useBskyUserManager = () => {
-  const [users, setUsers] = useStorage<BskyUser[]>({
-    key: STORAGE_KEYS.DETECTED_BSKY_USERS,
-    instance: new Storage({
-      area: "local",
-    }),
-  },
-    (v) => (v === undefined ? [] : v)
+  const [users, setUsers] = useStorage<BskyUser[]>(
+    {
+      key: STORAGE_KEYS.DETECTED_BSKY_USERS,
+      instance: new Storage({
+        area: "local",
+      }),
+    },
+    (v) => (v === undefined ? [] : v),
   );
   const bskyClient = React.useRef<BskyServiceWorkerClient | null>(null);
   const [actionMode, setActionMode] = React.useState<
@@ -179,7 +180,7 @@ export const useBskyUserManager = () => {
         bskyClient.current = new BskyServiceWorkerClient(session);
         setActionMode(
           MESSAGE_NAME_TO_ACTION_MODE_MAP[
-          result[STORAGE_KEYS.BSKY_MESSAGE_NAME]
+            result[STORAGE_KEYS.BSKY_MESSAGE_NAME]
           ],
         );
       },

src/lib/hooks/useRetrieveBskyUsers.ts

@@ -1,6 +1,6 @@
 import type { AtpSessionData } from "@atproto/api";
-import { useStorage } from "@plasmohq/storage/hook";
 import { Storage } from "@plasmohq/storage";
+import { useStorage } from "@plasmohq/storage/hook";
 import React from "react";
 import { BskyServiceWorkerClient } from "~lib/bskyServiceWorkerClient";
 import {
@@ -41,13 +41,14 @@ export const useRetrieveBskyUsers = () => {
   const [detectedXUsers, setDetectedXUsers] = React.useState<
     ReturnType<typeof detectXUsers>
   >([]);
-  const [users, setUsers] = useStorage<BskyUser[]>({
-    key: STORAGE_KEYS.DETECTED_BSKY_USERS,
-    instance: new Storage({
-      area: "local",
-    })
-  },
-    (v) => (v === undefined ? [] : v)
+  const [users, setUsers] = useStorage<BskyUser[]>(
+    {
+      key: STORAGE_KEYS.DETECTED_BSKY_USERS,
+      instance: new Storage({
+        area: "local",
+      }),
+    },
+    (v) => (v === undefined ? [] : v),
   );
   const [loading, setLoading] = React.useState(true);
   const [errorMessage, setErrorMessage] = React.useState("");
@@ -134,6 +135,7 @@ export const useRetrieveBskyUsers = () => {
           setLoading(false);
         }
 
+
         index++;
         if (process.env.NODE_ENV === "development" && index > 5) {
           setLoading(false);

src/popup.tsx

@@ -119,7 +119,7 @@ function IndexPopup() {
       const { session, error } = await sendToBackground({
         name: "login",
         body: {
-          identifier,
+          identifier: formattedIdentifier,
           password,
           ...(authFactorToken && { authFactorToken: authFactorToken }),
         },