fix toggle in front end

src-tauri/src/service/settings.rs

@@ -127,6 +127,7 @@ pub async fn sync_clipboard_history_enable() {
         // check if backup file exists
         if !Path::new(&dir_file).exists() {
             // copy current database to backup location
+            println!("copying database to backup location {} {}", &config.db, &dir_file);
             fs::copy(&config.db, &dir_file).expect("Failed to copy database");
         }
 
@@ -169,6 +170,7 @@ pub async fn sync_clipboard_history_disable() {
 pub async fn sync_clipboard_history_toggle() {
     let settings = get_settings().await.expect("Failed to get settings");
 
+    printlog!("synchronize: {}", settings.synchronize);
     with_hotkeys(false, async move {
         if settings.synchronize {
             sync_clipboard_history_disable().await;

src/components/elements/toggle.tsx

@@ -1,28 +1,41 @@
 import { FiCheck } from "solid-icons/fi";
 import { VsClose } from "solid-icons/vs";
-import { Component, Setter } from "solid-js";
+import { Component, Setter, createEffect, createSignal } from "solid-js";
 
 type SwitchProps = {
   checked?: boolean;
   onChange: (val: boolean) => Promise<void> | Setter<boolean> | undefined;
 };
 
 export const Toggle: Component<SwitchProps> = (props) => {
+  let inputRef: HTMLInputElement | undefined;
+  const [internalChecked, setInternalChecked] = createSignal(props.checked || false);
+
+  createEffect(() => {
+    if (props.checked !== undefined) {
+      setInternalChecked(props.checked);
+      if (inputRef) {
+        inputRef.checked = props.checked;
+      }
+    }
+  });
+
+  const handleChange = () => {
+    const newValue = !internalChecked();
+    setInternalChecked(newValue);
+    props.onChange(newValue);
+  };
+
   return (
     <label class="relative inline-flex cursor-pointer items-center">
-      <input
-        type="checkbox"
-        checked={props.checked}
-        onChange={() => props.onChange(!props.checked)}
-        class="peer sr-only"
-      />
+      <input ref={inputRef} type="checkbox" checked={internalChecked()} onChange={handleChange} class="peer sr-only" />
       <div
         class={`peer relative h-4 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-0 after:h-4 after:w-4 after:rounded-full after:border after:border-transparent after:bg-white after:transition-all after:content-[''] peer-checked:bg-indigo-600 peer-checked:after:translate-x-[150%] peer-checked:after:border-transparent peer-focus:outline-none dark:border-gray-600 rtl:peer-checked:after:-translate-x-full ${
-          props.checked ? "dark:bg-gray-700" : "dark:bg-red-600"
+          internalChecked() ? "dark:bg-gray-700" : "dark:bg-red-600"
         } after:z-[40] dark:bg-opacity-20 after:dark:bg-zinc-700`}
       >
         <div class="absolute inset-0 z-[50] flex items-center justify-between px-1">
-          {props.checked ? <FiCheck class="ml-auto text-sm text-white" /> : <VsClose class="text-white" />}
+          {internalChecked() ? <FiCheck class="ml-auto text-sm text-white" /> : <VsClose class="text-white" />}
         </div>
       </div>
     </label>

src/components/navigation/app-sidebar.tsx

@@ -5,25 +5,26 @@ import { HotkeyStore } from "../../store/hotkey-store";
 interface AppSidebarProps {}
 
 export const AppSidebar: Component<AppSidebarProps> = ({}) => {
-  const { hotkeys, globalHotkeyEvent, getHotkey } = HotkeyStore;
-  const { setCurrentTab, tabs } = AppStore;
-
   return (
-    <Show when={hotkeys().length}>
-      <For each={tabs()}>
+    <Show when={HotkeyStore.hotkeys().length}>
+      <For each={AppStore.tabs()}>
         {({ current, Icon, name, id }) => {
-          const currentHotkey = hotkeys()?.find((key) => key?.name === name);
+          const currentHotkey = HotkeyStore.hotkeys()?.find((key) => key?.name === name);
 
           return (
             <div
               class={`${
                 current ? "text-black dark:text-white" : "text-zinc-600 dark:text-gray-dark"
               } relative flex h-6 w-full cursor-pointer select-none items-center justify-center py-5 text-xl hover:text-black dark:hover:text-white`}
               title={currentHotkey?.name}
-              onClick={() => setCurrentTab(id)}
+              onClick={() => AppStore.setCurrentTab(id)}
             >
               <Icon title={name} />
-              <Show when={currentHotkey?.event && getHotkey(currentHotkey?.event) && globalHotkeyEvent()}>
+              <Show
+                when={
+                  currentHotkey?.event && HotkeyStore.getHotkey(currentHotkey?.event) && HotkeyStore.globalHotkeyEvent()
+                }
+              >
                 <div class="absolute -top-0.5 left-1 rounded-sm bg-zinc-800 px-1 py-1 text-xs font-semibold text-white dark:bg-zinc-600">
                   {currentHotkey!.key}
                 </div>

src/components/pages/app/app.tsx

@@ -10,9 +10,6 @@ import { StarredClipboards } from "./starred-clipboards";
 import { ViewMore } from "./view-more";
 
 function App() {
-  const { settings } = SettingsStore;
-  const { getCurrentTab } = AppStore;
-
   return (
     <div class="flex h-full w-full overflow-hidden bg-white text-black dark:bg-dark dark:text-white">
       <div class="flex w-12 flex-col items-center space-y-3 bg-gray-200 pt-2 dark:bg-dark-light">
@@ -21,26 +18,26 @@ function App() {
       <div class="flex h-screen min-w-0 flex-1 flex-col">
         <div class="z-10 flex w-full justify-between overflow-visible px-2 py-1">
           <p class="select-none bg-gray-50 text-xs font-semibold text-gray-500 dark:bg-dark-dark dark:text-white">
-            {getCurrentTab()?.name?.toUpperCase()}
+            {AppStore.getCurrentTab()?.name?.toUpperCase()}
           </p>
-          <Show when={settings()?.synchronize} fallback={<BsHddFill title="offline" />}>
+          <Show when={SettingsStore.settings()?.synchronize} fallback={<BsHddFill title="offline" />}>
             <FiGlobe title="online" />
           </Show>
         </div>
 
-        <Show when={getCurrentTab()?.name === "Recent Clipboards"}>
+        <Show when={AppStore.getCurrentTab()?.name === "Recent Clipboards"}>
           <RecentClipboards />
         </Show>
 
-        <Show when={getCurrentTab()?.name === "Starred Clipboards"}>
+        <Show when={AppStore.getCurrentTab()?.name === "Starred Clipboards"}>
           <StarredClipboards />
         </Show>
 
-        <Show when={getCurrentTab()?.name === "History"}>
+        <Show when={AppStore.getCurrentTab()?.name === "History"}>
           <ClipboardHistory />
         </Show>
 
-        <Show when={getCurrentTab()?.name === "View more"}>
+        <Show when={AppStore.getCurrentTab()?.name === "View more"}>
           <ViewMore />
         </Show>
       </div>

src/components/pages/app/recent-clipboards.tsx

@@ -1,16 +1,11 @@
-import { Component, onMount } from "solid-js";
-import { Clipboards } from "./clipboard/clipboards";
+import { Component } from "solid-js";
 import { ClipboardStore } from "../../../store/clipboard-store";
+import { Clipboards } from "./clipboard/clipboards";
 
 interface RecentClipboardsProps {}
 
 export const RecentClipboards: Component<RecentClipboardsProps> = ({}) => {
   const { setClipboards, getClipboards, resetWhere } = ClipboardStore;
 
-  onMount(async () => {
-    resetWhere();
-    setClipboards(await getClipboards());
-  });
-
   return <Clipboards />;
 };

src/components/pages/app/view-more.tsx

@@ -1,39 +1,42 @@
 import { Component, Show } from "solid-js";
+import { HotkeyStore } from "../../../store/hotkey-store";
+import { SettingsStore } from "../../../store/settings-store";
 import { Hotkey } from "../../../types";
 import { WebWindow } from "../../../types/enums";
 import { ViewMoreName } from "../../../utils/constants";
 import { Toggle } from "../../elements/toggle";
-import { HotkeyStore } from "../../../store/hotkey-store";
-import { SettingsStore } from "../../../store/settings-store";
 
 interface ViewMoreProps {}
 
 export const ViewMore: Component<ViewMoreProps> = ({}) => {
-  const { settings, syncClipboard, openWindow, exitApp } = SettingsStore;
-  const { hotkeys, globalHotkeyEvent } = HotkeyStore;
-
-  const createButton = (name: ViewMoreName, onClick: () => void) => {
-    const hotkey = hotkeys().find((key) => key.name === name) as Hotkey;
+  const createButton = (name: ViewMoreName, callback: () => void) => {
+    const hotkey = HotkeyStore.hotkeys().find((key) => key.name === name) as Hotkey;
 
     return (
       <button
         type="button"
         class="w-full cursor-pointer select-none px-3 hover:bg-zinc-200 dark:hover:bg-neutral-700"
-        onClick={onClick}
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          callback();
+        }}
       >
         <div class="flex items-center justify-between py-4">
           <div class="flex items-center">
             <div class="relative">
               <div innerHTML={JSON.parse(hotkey.icon)} class="text-2xl" />
-              <Show when={globalHotkeyEvent() && hotkey.status}>
+              <Show when={HotkeyStore.globalHotkeyEvent() && hotkey.status}>
                 <div class="absolute left-0 top-0 -ml-2 -mt-3 rounded-sm bg-zinc-800 px-1 text-[12px] font-semibold text-white dark:bg-zinc-600">
                   {hotkey.key}
                 </div>
               </Show>
             </div>
             <p class="px-4 text-base font-semibold">{name}</p>
           </div>
-          {name === "Sync Clipboard History" && <Toggle checked={settings()?.synchronize} onChange={async () => {}} />}
+          {name === "Sync Clipboard History" && (
+            <Toggle checked={SettingsStore.settings()?.synchronize} onChange={async () => {}} />
+          )}
         </div>
         <hr class="border-zinc-700" />
       </button>
@@ -43,13 +46,13 @@ export const ViewMore: Component<ViewMoreProps> = ({}) => {
   return (
     <>
       {/* Sync Clipboard History  */}
-      {createButton("Sync Clipboard History", syncClipboard)}
+      {createButton("Sync Clipboard History", SettingsStore.syncClipboard)}
       {/* Settings */}
-      {createButton("Settings", async () => openWindow(WebWindow.Settings))}
+      {createButton("Settings", () => SettingsStore.openWindow(WebWindow.Settings))}
       {/* About */}
-      {createButton("About", async () => openWindow(WebWindow.About))}
+      {createButton("About", () => SettingsStore.openWindow(WebWindow.About))}
       {/* Exit */}
-      {createButton("Exit", exitApp)}
+      {createButton("Exit", SettingsStore.exitApp)}
     </>
   );
 };

src/components/pages/settings/settings-backup.tsx

@@ -14,11 +14,10 @@ interface SettingsBackupProps {}
 
 export const SettingsBackup: Component<SettingsBackupProps> = ({}) => {
   const [url, setUrl] = createSignal<string>();
-  const { settings, syncClipboard } = SettingsStore;
 
   createEffect(
     on(
-      () => settings()?.synchronize,
+      () => SettingsStore.settings()?.synchronize,
       () => setTimeout(async () => setUrl(await invokeCommand(InvokeCommand.GetDbPath)), 100)
     )
   );
@@ -31,9 +30,11 @@ export const SettingsBackup: Component<SettingsBackupProps> = ({}) => {
             <RiDeviceSave3Fill />
             <h6 class="text-sm">Synchronize clipboard history</h6>
           </div>
-          <div>
-            <Toggle checked={settings()?.synchronize || false} onChange={() => void syncClipboard()} />
-          </div>
+
+          <Toggle
+            checked={!!SettingsStore.settings()?.synchronize}
+            onChange={() => void SettingsStore.syncClipboard()}
+          />
         </div>
       </TextBlock>
 
@@ -50,7 +51,7 @@ export const SettingsBackup: Component<SettingsBackupProps> = ({}) => {
               </div>
               <button
                 type="button"
-                onClick={syncClipboard}
+                onClick={SettingsStore.syncClipboard}
                 class="group absolute inset-y-0 right-1 my-1 flex items-center space-x-1 rounded bg-gray-600 px-2 text-xs text-white group-hover:bg-gray-400"
               >
                 <FiUpload class="dark:text-white" />

src/store/app-store.ts

@@ -38,12 +38,11 @@ function createAppStore() {
     },
   ]);
 
-  const setCurrentTab = (id: Tab) => {
-    setTabs((prev) => prev.map((s) => ({ ...s, current: s.id === id })));
-  };
+  const setCurrentTab = (id: Tab) => setTabs((prev) => prev.map((s) => ({ ...s, current: s.id === id })));
   const getCurrentTab = () => tabs().find((s) => s.current);
 
   const init = async () => {
+    console.log("init");
     HotkeyStore.initHotkeys();
     ClipboardStore.initClipboards();
     await SettingsStore.initSettings();

src/store/settings-store.ts

@@ -42,7 +42,7 @@ function createSettingsStore() {
     setSettings(settings);
   };
 
-  const syncClipboard = async () => invokeCommand(InvokeCommand.GetSettings);
+  const syncClipboard = async () => invokeCommand(InvokeCommand.SyncClipboardHistory);
 
   const openWindow = async (windowName: WebWindow) => invokeCommand(InvokeCommand.OpenNewWindow, { windowName });