Fix: message type did not change.

src/contents/App.tsx

@@ -1,11 +1,13 @@
 import cssText from "data-text:~style.content.css";
 import { sendToBackground } from "@plasmohq/messaging";
+import { Storage } from "@plasmohq/storage";
+import { useStorage } from "@plasmohq/storage/hook";
 import type { PlasmoCSConfig } from "plasmo";
 import React from "react";
 import AlertError from "~lib/components/AlertError";
 import LoadingCards from "~lib/components/LoadingCards";
 import Modal from "~lib/components/Modal";
-import { MESSAGE_NAMES } from "~lib/constants";
+import { MESSAGE_NAMES, STORAGE_KEYS } from "~lib/constants";
 import { useRetrieveBskyUsers } from "~lib/hooks/useRetrieveBskyUsers";
 
 export const config: PlasmoCSConfig = {
@@ -29,7 +31,6 @@ const App = () => {
     restart,
     isBottomReached,
     errorMessage,
-    listName,
   } = useRetrieveBskyUsers();
 
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -67,13 +68,25 @@ const App = () => {
     };
   }, [initialize]);
 
+  const [_, setKey] = useStorage<string>(
+    {
+      key: STORAGE_KEYS.RENDER_KEY,
+      instance: new Storage({
+        area: "local",
+      }),
+    },
+    (v) => (v === undefined ? "" : v),
+  );
+
   const openOptionPage = () => {
     sendToBackground({ name: "openOptionPage" });
+    // force re-render option page
+    setKey(Date.now().toString());
   };
 
   const stopAndShowDetectedUsers = () => {
-    stopRetrieveLoop();
     openOptionPage();
+    stopRetrieveLoop();
   };
 
   return (

src/lib/constants.ts

@@ -39,6 +39,7 @@ export const STORAGE_KEYS = {
   BSKY_MESSAGE_NAME: `${STORAGE_PREFIX}_bsky_message_name`,
   DETECTED_BSKY_USERS: `${STORAGE_PREFIX}_detected_bsky_users`,
   LIST_NAME: `${STORAGE_PREFIX}_list_name`,
+  RENDER_KEY: `${STORAGE_PREFIX}_render_key`,
 } as const;
 
 export const TARGET_URLS_REGEX = {

src/lib/hooks/useBskyUserManager.ts

@@ -202,6 +202,17 @@ export const useBskyUserManager = () => {
     return actionCount;
   }, [filteredUsers, actionMode, setUsers]);
 
+  const [key] = useStorage<string>(
+    {
+      key: STORAGE_KEYS.RENDER_KEY,
+      instance: new Storage({
+        area: "local",
+      }),
+    },
+    (v) => (v === undefined ? "" : v),
+  );
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: force re-render option page
   React.useEffect(() => {
     chrome.storage.local.get(
       [STORAGE_KEYS.BSKY_CLIENT_SESSION, STORAGE_KEYS.BSKY_MESSAGE_NAME],
@@ -215,7 +226,7 @@ export const useBskyUserManager = () => {
         );
       },
     );
-  }, []);
+  }, [key]);
 
   const matchTypeStats = React.useMemo(() => {
     return Object.keys(matchTypeFilter).reduce(

src/lib/services/xService.ts

@@ -44,7 +44,7 @@ export class XService extends AbstractService {
       ? (document.querySelector('div[data-viewportview="true"]') as HTMLElement)
       : document.documentElement;
 
-    const initialScrollHeight = scrollTarget.scrollHeight;
+    const initialScrollHeight = scrollTarget?.scrollHeight;
     scrollTarget.scrollTop += initialScrollHeight;
 
     await wait(3000);