fix toggle in front end

.gitignore

@@ -1,6 +1,6 @@
 node_modules
 dist
-clippy.sqlite
+*.sqlite
 yarn.lock
 package-lock.json
 pnpm-lock.yamlor.log
@@ -15,4 +15,5 @@ bun.lockb
 # will have compiled files and executables
 target/
 context.txt
-sea_orm_*.txt
+sea_orm_*.txt
+config.json

.prettierignore

@@ -1,6 +1,6 @@
 node_modules
 dist
-clippy.sqlite
+*.sqlite
 yarn.lock
 package-lock.json
 pnpm-lock.yaml

src-tauri/common/src/constants.rs

@@ -9,6 +9,9 @@ pub static GLOBAL_EVENTS: LazyLock<Vec<String>> = LazyLock::new(|| {
     ]
 });
 
+pub static DB_NAME: &str = "clippy.sqlite";
+pub static CONFIG_NAME: &str = "config.json";
+
 pub static MAIN_WINDOW_X: i32 = 375;
 pub static MAIN_WINDOW_Y: i32 = 600;
 

src-tauri/src/connection.rs

@@ -1,6 +1,6 @@
 use crate::prelude::*;
 use crate::service::settings::get_data_path;
-use common::types::types::Config;
+use common::{constants::DB_NAME, types::types::Config};
 use migration::{DbErr, Migrator, MigratorTrait};
 use std::sync::Once;
 
@@ -9,7 +9,7 @@ static INIT: Once = Once::new();
 
 pub async fn db() -> Result<DbConn, DbErr> {
     let database_url = if cfg!(debug_assertions) {
-        String::from("sqlite://../clippy.sqlite?mode=rwc")
+        format!("sqlite://../{}?mode=rwc", DB_NAME)
     } else {
         get_prod_database_url()
     };

src-tauri/src/service/settings.rs

@@ -4,6 +4,8 @@ use crate::connection;
 use crate::prelude::*;
 use crate::service::window::get_monitor_scale_factor;
 use crate::{commands::settings::get_settings, service::hotkey::with_hotkeys};
+use common::constants::CONFIG_NAME;
+use common::constants::DB_NAME;
 use common::language::get_system_language;
 use common::types::types::Config;
 use common::types::types::DataPath;
@@ -73,23 +75,34 @@ pub fn init_settings() {
 }
 
 pub fn get_data_path() -> DataPath {
-    let config_path = get_app()
-        .path()
-        .app_data_dir()
-        .expect("Failed to get app data dir")
-        .to_string_lossy()
-        .to_string();
+    let config_path = if cfg!(debug_assertions) {
+        // Get absolute project root directory
+        let current_dir = std::env::current_dir()
+            .expect("Failed to get current directory")
+            .parent()
+            .expect("Failed to get parent directory")
+            .to_path_buf();
+
+        current_dir.to_string_lossy().to_string()
+    } else {
+        // Use app data dir in production
+        get_app()
+            .path()
+            .app_data_dir()
+            .expect("Failed to get app data dir")
+            .to_string_lossy()
+            .to_string()
+    };
 
     fs::create_dir_all(&config_path).expect("Failed to create config directory");
 
-    // let config_file = Path::new(&config_dir).join("config.json");
-    let config_file_path = [&config_path, "config.json"]
+    let config_file_path = [&config_path, CONFIG_NAME]
         .iter()
         .collect::<PathBuf>()
         .to_string_lossy()
         .to_string();
 
-    let db_file_path = [&config_path, "clippy.sqlite"]
+    let db_file_path = [&config_path, DB_NAME]
         .iter()
         .collect::<PathBuf>()
         .to_string_lossy()
@@ -127,6 +140,10 @@ 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 +186,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.changeTab(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/clipboard/file-clipboard.tsx

@@ -1,11 +1,11 @@
+import dayjs from "dayjs";
 import { VsFileBinary } from "solid-icons/vs";
 import { Component } from "solid-js";
 import { ClipboardFileModel, ClipboardWithRelations } from "../../../../types";
 import { ClipboardType } from "../../../../types/enums";
 import { InvokeCommand } from "../../../../types/tauri-invoke";
 import { formatBytes } from "../../../../utils/helpers";
 import { invokeCommand } from "../../../../utils/tauri";
-import { ClipboardFooter } from "../../../utils/clipboard/clipboard-footer";
 import { ClipboardHeader } from "../../../utils/clipboard/clipboard-header";
 
 interface FileClipboardProps {
@@ -48,13 +48,10 @@ export const FileClipboard: Component<FileClipboardProps> = (props) => {
   const groupedFiles = getGroupedFiles();
 
   return (
-    <button
-      type="button"
-      onClick={handleClick}
-      class="group w-full cursor-pointer select-none hover:bg-zinc-200 dark:hover:bg-neutral-700"
-    >
-      <div class="mt-2 flex gap-2">
-        <ClipboardHeader {...props} Icon={VsFileBinary} />
+    <button type="button" onClick={handleClick} class="clipboard">
+      <ClipboardHeader {...props} Icon={VsFileBinary} />
+
+      <div class="min-w-0 flex-1">
         <div class="flex flex-wrap gap-2" title={getFileListTitle()}>
           {Object.entries(groupedFiles).map(([type, data]) => (
             <span class="flex items-center gap-1">
@@ -65,8 +62,13 @@ export const FileClipboard: Component<FileClipboardProps> = (props) => {
             </span>
           ))}
         </div>
+        <div
+          class="text-left text-xs font-thin text-zinc-700 dark:text-zinc-300"
+          title={dayjs.utc(props.data.clipboard.created_date).format()}
+        >
+          {dayjs.utc(props.data.clipboard.created_date).fromNow()}
+        </div>
       </div>
-      <ClipboardFooter {...props} />
     </button>
   );
 };

src/components/pages/app/clipboard/image-clipboard.tsx

@@ -1,11 +1,11 @@
+import dayjs from "dayjs";
 import { BsImages } from "solid-icons/bs";
 import { Component } from "solid-js";
 import { ClipboardWithRelations } from "../../../../types";
 import { ClipboardType } from "../../../../types/enums";
 import { InvokeCommand } from "../../../../types/tauri-invoke";
 import { formatBytes } from "../../../../utils/helpers";
 import { invokeCommand } from "../../../../utils/tauri";
-import { ClipboardFooter } from "../../../utils/clipboard/clipboard-footer";
 import { ClipboardHeader } from "../../../utils/clipboard/clipboard-header";
 
 interface ImageClipboardProps {
@@ -39,14 +39,10 @@ export const ImageClipboard: Component<ImageClipboardProps> = (props) => {
     `${props.data.image.width}x${props.data.image.height} ${formatBytes(Number(props.data.image.size || "0"))}`;
 
   return (
-    <button
-      type="button"
-      onClick={handleClick}
-      onDblClick={handleDoubleClick}
-      class="group w-full cursor-pointer select-none hover:bg-zinc-200 dark:hover:bg-neutral-700"
-    >
-      <div class="mt-2 flex gap-2">
-        <ClipboardHeader {...props} Icon={BsImages} />
+    <button type="button" onClick={handleClick} onDblClick={handleDoubleClick} class="clipboard">
+      <ClipboardHeader {...props} Icon={BsImages} />
+
+      <div class="min-w-0 flex-1">
         {props.data.image?.thumbnail && (
           <img
             src={`data:image/*;base64,${props.data.image.thumbnail}`}
@@ -55,8 +51,13 @@ export const ImageClipboard: Component<ImageClipboardProps> = (props) => {
             title={imageInfo}
           />
         )}
+        <div
+          class="text-left text-xs font-thin text-zinc-700 dark:text-zinc-300"
+          title={dayjs.utc(props.data.clipboard.created_date).format()}
+        >
+          {dayjs.utc(props.data.clipboard.created_date).fromNow()}
+        </div>
       </div>
-      <ClipboardFooter {...props} />
     </button>
   );
 };

src/components/pages/app/clipboard/text-clipboard.tsx

@@ -1,10 +1,10 @@
+import dayjs from "dayjs";
 import { IoText } from "solid-icons/io";
 import { Component } from "solid-js";
 import { ClipboardWithRelations } from "../../../../types";
 import { ClipboardType } from "../../../../types/enums";
 import { InvokeCommand } from "../../../../types/tauri-invoke";
 import { invokeCommand } from "../../../../utils/tauri";
-import { ClipboardFooter } from "../../../utils/clipboard/clipboard-footer";
 import { ClipboardHeader } from "../../../utils/clipboard/clipboard-header";
 
 interface TextClipboardProps {
@@ -34,19 +34,20 @@ export const TextClipboard: Component<TextClipboardProps> = (props) => {
   };
 
   return (
-    <button
-      type="button"
-      onClick={handleClick}
-      class="group w-full cursor-pointer select-none hover:bg-zinc-200 dark:hover:bg-neutral-700"
-    >
-      <div class="mt-2 flex gap-2">
-        <ClipboardHeader {...props} Icon={IoText} />
+    <button type="button" onClick={handleClick} class="clipboard">
+      <ClipboardHeader {...props} Icon={IoText} />
 
-        <p class="truncate text-sm" title={data}>
+      <div class="min-w-0 flex-1">
+        <p class="truncate text-left text-sm" title={data}>
           {data}
         </p>
+        <div
+          class="text-left text-xs font-thin text-zinc-700 dark:text-zinc-300"
+          title={dayjs.utc(props.data.clipboard.created_date).format()}
+        >
+          {dayjs.utc(props.data.clipboard.created_date).fromNow()}
+        </div>
       </div>
-      <ClipboardFooter {...props} />
     </button>
   );
 };