Convert any `localStorage` usage to `useLocalStorage` — radicle-desktop

Changes also the value for one-column-layout-enabled from one-column and two-column to true or false which make more sense.

Rename one-column-layout-enabled localStorage key to camelCase

Add an exclude pattern for typescript bindings to npm run format

     "check-rs": "scripts/check-rs",
     "test:unit": "TZ='UTC' vitest run",
     "test:e2e": "TZ='UTC' playwright test",
     "format": "npx prettier '**/*.@(ts|js|svelte|json|css|html|yml)' --write",
     "format": "npx prettier '**/*.@(ts|js|svelte|json|css|html|yml)' '!crates/radicle-types/bindings/**' --write",
     "generate-types": "cargo test --manifest-path ./crates/radicle-types/Cargo.toml",
     "tauri": "npx tauri"
   },

   $effect(() =>
     document.documentElement.style.setProperty(
       "--font-size",
       `${fontSettings.size}px`,
       `${fontSettings.value.size}px`,
     ),
   );
   $effect(() => document.documentElement.setAttribute("data-theme", $theme));
   $effect(() =>
     document.documentElement.setAttribute("data-theme", theme.value),
   );
 </script>
 <svelte:document

 <script lang="ts" module>
   export const announce = writable<boolean>(loadAnnounce());
   import useLocalStorage from "@app/lib/useLocalStorage.svelte";
   import { boolean } from "zod";
   function loadAnnounce(): boolean {
     const storedAnnounce = localStorage
       ? localStorage.getItem("announce")
       : null;
     if (storedAnnounce === null) {
       return true;
     } else {
       return storedAnnounce === "true";
     }
   }
   export function storeAnnounce(newAnnounce: boolean): void {
     announce.set(newAnnounce);
     if (localStorage) {
       localStorage.setItem("announce", newAnnounce.toString());
     } else {
       console.warn(
         "localStorage isn't available, not able to persist the selected announce preference without it.",
       );
     }
   }
   export const announce = useLocalStorage(
     "announce",
     boolean(),
     true,
     !window.localStorage,
   );
 </script>
 <script lang="ts">
   import { writable } from "svelte/store";
   import Button from "./Button.svelte";
 </script>

   <Button
     flatRight
     variant="ghost"
     active={$announce}
     active={announce.value}
     onclick={() => {
       storeAnnounce(true);
       announce.value = true;
     }}>
     Right away
   </Button>

   <Button
     flatLeft
     variant="ghost"
     active={!$announce}
     active={!announce.value}
     onclick={() => {
       storeAnnounce(false);
       announce.value = false;
     }}>
     Periodically
   </Button>

           verdict,
           labels,
         },
         opts: { announce: $nodeRunning && $announce },
         opts: { announce: $nodeRunning && announce.value },
       });
     } catch (error) {
       console.error("Editing review failed: ", error);

       await invoke("create_patch_comment", {
         rid: rid,
         new: { id: patchId, body, embeds, replyTo, revision: revision.id },
         opts: { announce: $nodeRunning && $announce },
         opts: { announce: $nodeRunning && announce.value },
       });
     } catch (error) {
       console.error("Creating comment failed", error);

 <script lang="ts">
   import * as router from "@app/lib/router";
   import { storeLayout, getLayout } from "@app/views/repo/Layout.svelte";
   import { oneColumnLayout, storeLayout } from "@app/views/repo/Layout.svelte";
   import Icon from "@app/components/Icon.svelte";
   import Settings from "@app/components/Settings.svelte";

     styleHeight="2.5rem"
     variant="ghost"
     onclick={() => {
       if (getLayout()) {
       if (oneColumnLayout.value) {
         storeLayout("two-column");
       } else {
         storeLayout("one-column");
       }
     }}>
     {#if getLayout()}
     {#if oneColumnLayout.value}
       <Icon name="expand-panel" />
     {:else}
       <Icon name="collapse-panel" />

 <script lang="ts" module>
   type Theme = "dark" | "light";
   export const theme = writable<Theme>(loadTheme());
   function loadTheme(): Theme {
     const { matches } = window.matchMedia("(prefers-color-scheme: dark)");
     const storedTheme = localStorage ? localStorage.getItem("theme") : null;
     if (storedTheme === null) {
       return matches ? "dark" : "light";
     } else {
       return storedTheme as Theme;
     }
   }
   export function storeTheme(newTheme: Theme): void {
     theme.set(newTheme);
     if (localStorage) {
       localStorage.setItem("theme", newTheme);
     } else {
       console.warn(
         "localStorage isn't available, not able to persist the selected theme without it.",
       );
     }
   }
   import useLocalStorage from "@app/lib/useLocalStorage.svelte";
   import { literal, union } from "zod";
   export const theme = useLocalStorage(
     "theme",
     union([literal("dark"), literal("light")]),
     window.matchMedia("(prefers-color-scheme: dark)").matches
       ? "dark"
       : "light",
     !window.localStorage,
   );
 </script>
 <script lang="ts">
   import { writable } from "svelte/store";
   import Icon from "./Icon.svelte";
   import Button from "./Button.svelte";
 </script>

 <div class="container">
   <Button
     flatRight
     active={$theme === "dark"}
     active={theme.value === "dark"}
     variant="ghost"
     onclick={() => {
       storeTheme("dark");
       theme.value = "dark";
     }}>
     <Icon name="moon" />
     Dark

   <Button
     flatLeft
     variant="ghost"
     active={$theme === "light"}
     active={theme.value === "light"}
     onclick={() => {
       storeTheme("light");
       theme.value = "light";
     }}>
     <Icon name="sun" />
     Light

 export const fontSettings = $state({ size: loadFontSize() });
 import { number, object } from "zod";
 import useLocalStorage from "./useLocalStorage.svelte";
 export const fontSettings = useLocalStorage(
   "fontSettings",
   object({ size: number() }),
   { size: 16 },
   !window.localStorage,
 );
 const step = 2;
 const minFontSize = 14;
 const maxFontSize = 24;
 export function increaseFontSize() {
   if (fontSettings.size + step <= maxFontSize) {
     setFontSize(fontSettings.size + step);
   if (fontSettings.value.size + step <= maxFontSize) {
     fontSettings.value = { size: fontSettings.value.size + step };
   }
 }
 export function decreaseFontSize() {
   if (fontSettings.size - step >= minFontSize) {
     setFontSize(fontSettings.size - step);
   if (fontSettings.value.size - step >= minFontSize) {
     fontSettings.value = { size: fontSettings.value.size - step };
   }
 }
 export function resetFontSize() {
   setFontSize(16);
 }
 function loadFontSize(): number {
   const storedFontSize = localStorage ? localStorage.getItem("fontSize") : "16";
   if (storedFontSize === null) {
     return 16;
   } else {
     return parseInt(storedFontSize);
   }
 }
 function setFontSize(size: number) {
   fontSettings.size = size;
   localStorage.setItem("fontSize", size.toString());
   fontSettings.value = { size: 16 };
 }

       await invoke("create_issue_comment", {
         rid: repo.rid,
         new: { id: issue.id, body, embeds, replyTo },
         opts: { announce: $nodeRunning && $announce },
         opts: { announce: $nodeRunning && announce.value },
       });
       // Update second column issue comment count without reloading the whole
       // issue list.

           type: "lifecycle",
           state,
         },
         opts: { announce: $nodeRunning && $announce },
         opts: { announce: $nodeRunning && announce.value },
       });
       // Update second column issue icon without reloading the whole issue list.
       const issueIndex = issues.findIndex(i => i.id === issue.id);

 <script lang="ts" module>
   type LayoutState = "one-column" | "two-column";
   const LAYOUT_KEY = "one-column-layout-enabled";
   let oneColumnLayout = $state(
     localStorage ? localStorage.getItem(LAYOUT_KEY) === "one-column" : false,
   import { boolean } from "zod";
   import useLocalStorage from "@app/lib/useLocalStorage.svelte";
   export const oneColumnLayout = useLocalStorage(
     "oneColumnLayoutEnabled",
     boolean(),
     false,
     !window.localStorage,
   );
   export function getLayout() {
     return oneColumnLayout;
   }
   export function storeLayout(newValue: LayoutState): void {
     oneColumnLayout = newValue === "one-column";
     if (localStorage) {
       localStorage.setItem(LAYOUT_KEY, newValue);
     } else {
       console.warn(
         "localStorage isn't available, not able to persist the selected layout settings without it.",
       );
     }
     oneColumnLayout.value = newValue === "one-column";
   }
 </script>
 <script lang="ts">
   import type { Snippet } from "svelte";
   import type { Config } from "@bindings/config/Config";
   import { onMount } from "svelte";
   import Header from "@app/components/Header.svelte";
   import type { Config } from "@bindings/config/Config";
   interface Props {
     children: Snippet;

     class="secondColumn"
     style:padding-left={hideSidebar ? "1rem" : "0"}
     bind:this={secondColumnContainer}
     style:display={oneColumnLayout && !hideSidebar ? "none" : undefined}
     style:display={oneColumnLayout.value && !hideSidebar ? "none" : undefined}
     style:overflow={styleSecondColumnOverflow}>
     {@render secondColumn()}
   </div>