refactored storage codes

.prettierrc

@@ -0,0 +1,3 @@
+{
+    "plugins": ["prettier-plugin-tailwindcss"]
+}

package.json

@@ -30,6 +30,8 @@
     "pino": "^9.0.0",
     "pino-pretty": "^11.0.0",
     "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "qs": "^6.12.1",
     "svelte": "^4.2.15",
     "svelte-check": "3.6.9",

src/background/helper.ts

@@ -1,4 +1,7 @@
 import { runtime } from "src/utils/communication";
+import { XPATH_URL } from "src/utils/constants";
+import { addDate } from "src/utils/helper";
+import { XPathModelSchema, type XPathModel } from "src/utils/xpaths";
 
 export async function readySignalSend() {
   // Ready signal
@@ -10,3 +13,19 @@ export async function readySignalSend() {
     },
   });
 }
+
+export async function fetchXPathUpdate(
+  signal?: AbortSignal,
+): Promise<XPathModel | undefined> {
+  try {
+    const resJson = await (await fetch(XPATH_URL, { signal })).json();
+
+    const xPathValueValidated = await XPathModelSchema.parseAsync(resJson);
+
+    const xpathValues = addDate(xPathValueValidated);
+
+    return xpathValues;
+  } catch (e) {
+    return undefined;
+  }
+}

src/components/Footer.svelte

@@ -1,19 +1,10 @@
 <script lang="ts">
   import CoffeeIcon from "./icons/Coffee_Icon.svelte";
-  import { isDarkThemeWritable } from "src/utils/storage";
-  import { onMount } from "svelte";
+  import { themeModeWritable } from "src/utils/storage";
   import GithubMark from "src/assets/icons/github-mark.png";
   import GithubMarkWhite from "src/assets/icons/github-mark-white.png";
   import { docs } from "src/utils/docs";
   import ExternalLink from "./External_Link.svelte";
-
-  let isLight = false;
-
-  onMount(() => {
-    isDarkThemeWritable.subscribe((modeValue) => {
-      isLight = modeValue === "light";
-    });
-  });
 </script>
 
 <div class="my-2 gap-2 flex justify-center items-center mb-3">
@@ -26,7 +17,7 @@
     >
       <img
         class="w-4 h-4"
-        src={isLight ? GithubMark : GithubMarkWhite}
+        src={$themeModeWritable === "light" ? GithubMark : GithubMarkWhite}
         alt="Github logo"
       />
       Learn more

src/components/Header.svelte

@@ -3,18 +3,8 @@
   import icon48 from "src/assets/icons/icon128.png";
   import ThemeSwitch from "./Theme_Switch.svelte";
 
-  import { modeWritable, type MODE } from "src/utils/storage";
-  import { onMount } from "svelte";
   import { blur } from "svelte/transition";
-  import { MODE_DEFAULT } from "src/utils/default";
-
-  let localMode: MODE = MODE_DEFAULT;
-
-  onMount(() => {
-    modeWritable.subscribe((mode) => {
-      localMode = mode;
-    });
-  });
+  import { workingModeWritable } from "src/utils/storage";
 </script>
 
 <div class="flex items-center gap-1 mb-3 tracking-wider font-extrabold text-xl">
@@ -24,12 +14,12 @@
       <abbr
         title={`Working mode. Learn more by pressing the "Learn more" button below.`}
       >
-        {#key localMode}
+        {#key $workingModeWritable}
           <div
             in:blur
             class="h-fit text-[8px]/[8px] text-center uppercase font-mono"
           >
-            {localMode}
+            {$workingModeWritable}
           </div>
         {/key}
       </abbr>

src/components/Main.svelte

@@ -4,19 +4,10 @@
   import About from "src/components/pages/About.svelte";
   import type { TabName } from "../utils/types";
   import { slide, blur } from "svelte/transition";
-  import { type MODE, modeWritable } from "src/utils/storage";
-  import { onMount } from "svelte";
   import Api from "./pages/API.svelte";
-  import { MODE_DEFAULT } from "src/utils/default";
+  import { workingModeWritable } from "src/utils/storage";
 
   let tabName: TabName = "Home";
-  let localMode: MODE = MODE_DEFAULT;
-
-  onMount(() => {
-    modeWritable.subscribe((mode) => {
-      localMode = mode;
-    });
-  });
 </script>
 
 <main>
@@ -41,7 +32,7 @@
   <div class="my-2 w-full">
     {#if tabName === "Home"}
       <div in:blur out:slide>
-        {#if localMode === "xpath"}
+        {#if $workingModeWritable === "xpath"}
           <Home />
         {:else}
           <Api />

src/components/Theme_Switch.svelte

@@ -1,25 +1,33 @@
 <script lang="ts">
-  import { THEME_MODE_DEFAULT } from "src/utils/default";
-  import { isDarkThemeWritable } from "src/utils/storage";
+  import { themeModeWritable } from "src/utils/storage";
   import { onMount } from "svelte";
   import { MoonIcon, SunIcon } from "lucide-svelte";
+  import { SETTINGS_DEFAULT } from "src/utils/default";
+  import log from "src/utils/logger";
 
   let isLight = false;
-  let themeMode = THEME_MODE_DEFAULT;
+  let themeMode = SETTINGS_DEFAULT.themeMode;
   const toggleThemeMode = (modeValue: string) =>
     modeValue === "dark" ? "light" : "dark";
 
   onMount(() => {
-    isDarkThemeWritable.subscribe((modeValue) => {
+    themeModeWritable.subscribe((modeValue) => {
       isLight = modeValue === "light";
       themeMode = modeValue;
+
+      try {
+        document.documentElement.setAttribute("data-theme", modeValue);
+      } catch (error) {
+        log.error(error);
+        return;
+      }
     });
   });
 </script>
 
 <abbr title={`Switch to ${toggleThemeMode(themeMode)} theme`}>
   <button
-    on:click={() => isDarkThemeWritable.update(toggleThemeMode)}
+    on:click={() => themeModeWritable.update(toggleThemeMode)}
     class={`${
       isLight ? "swap-active" : ""
     } swap-rotate btn btn-xs btn-ghost btn-circle swap`}

src/components/Update_XPath.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import { xPathValuesWritable, modeWritable } from "src/utils/storage";
   import { onMount } from "svelte";
   import { slide } from "svelte/transition";
-  import { get } from "svelte/store";
   import { fetchXPathUpdate } from "src/popup/helper";
+  import { workingModeWritable, xpathsWritable } from "src/utils/storage";
 
   let isXPathUpdating = false;
 
@@ -14,10 +13,7 @@
   }
 
   onMount(async () => {
-    const mode = get(modeWritable);
-    const storedXPathValues = get(xPathValuesWritable);
-
-    if (mode === "xpath" && !storedXPathValues.REMOTE_DISABLE) {
+    if ($workingModeWritable === "xpath" && !$xpathsWritable.REMOTE_DISABLE) {
       await xpathUpdateHandler();
     }
   });

src/components/api/Data.svelte

@@ -1,14 +1,7 @@
 <script lang="ts">
-  import type { SubscriptionsList } from "src/utils/schema";
-  import { subscriptionsWritable } from "src/utils/storage";
-  import { onMount } from "svelte";
+  import { subscriptionsListWritable } from "src/utils/storage";
   import { blur } from "svelte/transition";
   export let subscriptionCount: number;
-  let subscriptionsList: SubscriptionsList = [];
-
-  onMount(() => {
-    subscriptionsWritable.subscribe((value) => (subscriptionsList = value));
-  });
 </script>
 
 <div class="font-bold">Data</div>
@@ -36,7 +29,7 @@
             </tr>
           </thead>
           <tbody>
-            {#each subscriptionsList.slice(0, 5) as { title, channelId, id }}
+            {#each $subscriptionsListWritable.slice(0, 5) as { title, channelId, id }}
               <tr class="hover">
                 <td>{title}</td>
                 <td>{channelId}</td>

src/components/api/Item.svelte

@@ -1,14 +1,26 @@
 <script lang="ts">
   import type { User } from "src/utils/schema";
-  import type { PrimaryChannel } from "src/utils/types";
+  import {
+    firstOAuthKeyWritable,
+    firstUserWritable,
+    primaryChannelWritable,
+    secondOAuthKeyWritable,
+    secondUserWritable,
+  } from "src/utils/storage";
 
-  export let primaryChannel: PrimaryChannel;
-  export let user: User | null = null;
-  export let connectDisconnect: (btnNo: 0 | 1) => Promise<void>;
-  export let id: 0 | 1;
-  export let isConnect: boolean;
+  export let connectDisconnect: (btnNo: "0" | "1") => Promise<void>;
+  export let id: "0" | "1";
   export let isRunning: boolean;
+
+  let user: User | null = null;
+  let isConnect: boolean;
   let isLocalRunning: boolean;
+
+  $: {
+    user = id === "0" ? $firstUserWritable : $secondUserWritable;
+    let token = id === "0" ? $firstOAuthKeyWritable : $secondOAuthKeyWritable;
+    isConnect = !!token;
+  }
 </script>
 
 <tr>
@@ -17,7 +29,7 @@
       <input
         type="radio"
         class="radio radio-xs"
-        bind:group={primaryChannel}
+        bind:group={$primaryChannelWritable}
         name="radio-1"
         value={id}
         disabled={isRunning || !isConnect}
@@ -31,7 +43,7 @@
           <div
             class="avatar rounded-full w-8 placeholder flex justify-center items-center h-full"
           >
-            {#if user}
+            {#if user?.picture}
               <img src={user.picture} alt={user.name} />
             {:else}
               <div class="bg-base-content/10 w-full" />
@@ -40,7 +52,7 @@
         </div>
       </div>
       <div class="w-full">
-        {#if user}
+        {#if user?.given_name}
           <div class="font-bold">{user.given_name}</div>
         {:else}
           <div class="bg-base-content/10 h-4 rounded-md w-full" />