Bug fixes and performance improvements

hooks/useHostInfo.ts

@@ -1,78 +1,46 @@
-import { useState, useEffect } from 'react';
-import { browser } from 'wxt/browser';
-import { StorageService } from '@/utils/storage';
-import { IconService } from '@/services/icon';
-import type { HostInfo } from '@/utils/types';
-
 export function useHostInfo() {
-  const [info, setInfo] = useState<HostInfo | null>(null);
+  const [info, setInfo] = useState<TabState | null>(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    let unwatch: (() => void) | undefined;
+    let isMounted = true;
 
-    const init = async () => {
-      // Get Current Tab
-      const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
-      if (!tab?.id || !tab?.url) {
-        setLoading(false);
-        return;
+    const fetchInfo = async () => {
+      try {
+        const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
+        if (!tab?.id) return;
+
+        const data = await StorageService.getTabState(tab.id);
+        if (data) {
+          if (isMounted) {
+            setInfo(data);
+            setLoading(false);
+          }
+        } else {
+          if (tab.url) {
+            await browser.runtime.sendMessage({ type: 'INIT_TAB', tabId: tab.id, url: tab.url });
+          } else {
+            if (isMounted) setLoading(false);
+          }
+        }
+      } catch (e) {
+        if (isMounted) setLoading(false);
       }
-
-      // Handle System/Browser Pages immediately
-      const urlObj = new URL(tab.url);
-
-      const systemProtocols = [
-        'chrome:',
-        'about:',
-        'edge:',
-        'moz-extension:',
-        'chrome-extension:',
-        'edge-extension:',
-        'extension:',
-        'file:',
-        'view-source:',
-        'resource:',
-        'blob:',
-        'data:'
-      ];
-
-      const isSystemPage = systemProtocols.includes(urlObj.protocol);
-
-      if (isSystemPage) {
-        await IconService.update(tab.id, null, true);
-
-        setInfo({
-          url: tab.url,
-          domain: 'System Resource',
-          loading: false,
-          error: null,
-          network: null,
-          location: null,
-          isBrowserResource: true
-        });
-        setLoading(false);
-        return;
-      }
-
-      // Handle Network Pages via Storage
-      const key = StorageService.getKey(tab.id);
-
-      // Initial Load
-      const current = await StorageService.get(tab.id);
-      setInfo(current);
-      setLoading(false);
-
-      // Watch for changes
-      unwatch = storage.watch<HostInfo>(key, (newValue) => {
-        setInfo(newValue);
-      });
     };
 
-    init();
+    fetchInfo();
+
+    const listener = (changes: any, areaName: string) => {
+      if (areaName === 'session' || areaName === 'local') {
+        fetchInfo();
+      }
+    };
+
+    browser.storage.onChanged.addListener(listener);
 
     return () => {
-      if (unwatch) unwatch();
+      isMounted = false;
+      browser.storage.onChanged.removeListener(listener);
     };
   }, []);