feat: Implement centralized artificial state management for UI feedback

- Added `createArtificialStateManager` to manage loading and error states.
- Updated `useUIState` hook to utilize the artificial state manager for immediate UI feedback.
- Enhanced `injected.ts` to handle cleanup of subscriptions and manage state updates.
- Refactored `PopupApp` to integrate new `usePopupData` hook and pass tab ID to `useUIState`.
- Removed obsolete `state-sync.ts` and `storage-manager.ts` files.
- Introduced new storage management system with tab-scoped storage for isolation.
- Implemented action queue for storage operations to handle asynchronous updates.
- Added cleanup mechanisms for inactive tabs and improved subscription management.
- Updated message types to include icon updates for better communication between scripts.

Author: dborysov

package.json

@@ -17,7 +17,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build --mode main && vite build --mode content",
     "lint": "eslint .",
     "preview": "vite preview",
     "prettier:format": "prettier --write .",

public/manifest.json

@@ -26,7 +26,7 @@
   },
   "web_accessible_resources": [
     {
-      "resources": ["injected.js", "assets/serialization.js"],
+      "resources": ["injected.js"],
       "matches": ["<all_urls>"]
     }
   ],

src/App.tsx

@@ -8,7 +8,7 @@ import { QueryDetails } from "./components/query/QueryDetails";
 import { MutationDetails } from "./components/mutation/MutationDetails";
 
 // Import our custom hooks
-import { useConnection } from "./hooks/useConnection";
+import { useDevToolsData } from "./hooks/useDevToolsData";
 import { useUIState } from "./hooks/useUIState";
 import { useViewState } from "./hooks/useViewState";
 
@@ -20,8 +20,11 @@ function App() {
     mutations,
     artificialStates,
     sendMessage,
-  } = useConnection();
-  const { handleQueryAction } = useUIState(sendMessage);
+  } = useDevToolsData();
+  const { handleQueryAction } = useUIState(
+    sendMessage,
+    chrome.devtools.inspectedWindow.tabId,
+  );
 
   // Handler for removing all queries
   const handleRemoveAllQueries = () => {
@@ -91,6 +94,7 @@ function App() {
                   onSelectQuery={setSelectedQueryIndex}
                   onSelectMutation={setSelectedMutationIndex}
                   onRemoveAllQueries={handleRemoveAllQueries}
+                  artificialStates={artificialStates}
                   queryKeyboardNavigation={queryKeyboardNavigation}
                   mutationKeyboardNavigation={mutationKeyboardNavigation}
                 />