add more settings inf frontend

0-don · Dec 22, 2024 · 475c0a1 · 475c0a1
1 parent 0a77026
commit 475c0a1
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 32 deletions.
diff --git a/src-tauri/src/service/window.rs b/src-tauri/src/service/window.rs
@@ -56,6 +56,14 @@ pub fn toggle_main_window() {
             .expect("Failed to emit set global hotkey event");
     } else {
         position_window_near_cursor();
+        tokio::task::block_in_place(|| {
+            tokio::runtime::Handle::current().block_on(async {
+                let size = calculate_logical_size(MAIN_WINDOW_X, MAIN_WINDOW_Y).await;
+                get_main_window()
+                    .set_size(size)
+                    .expect("Failed to set window size");
+            })
+        });
         get_main_window()
             .emit(
                 ListenEvent::ChangeTab.to_string().as_str(),

diff --git a/src/components/elements/input.tsx b/src/components/elements/input.tsx
@@ -1,27 +1,42 @@
-import { Component } from "solid-js";
+import { Component, JSX, createSignal } from "solid-js";
 
-interface InputProps {
+type InputProps = JSX.InputHTMLAttributes<HTMLInputElement> & {
+  debounce?: number;
   className?: string;
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  type?: string;
-}
+};
+
+export const Input: Component<InputProps> = ({ className, debounce = 0, onInput, value: initialValue = "", ...props }) => {
+  let timeoutId: number;
+  const [value, setValue] = createSignal(initialValue as string);
+
+  const handleInput: JSX.EventHandler<HTMLInputElement, InputEvent> = (e) => {
+    const target = e.currentTarget;
+    setValue(target.value);
+
+    if (debounce > 0) {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        // @ts-ignore
+        onInput?.(e);
+      }, debounce);
+    } else {
+      // @ts-ignore
+      onInput?.(e);
+    }
+  };
 
-export const Input: Component<InputProps> = (props) => {
   return (
     <div
       class={`${
-        props.className ? props.className : ""
+        className ? className : ""
       } group flex items-center justify-between rounded-md border border-gray-300 p-1 px-1.5 text-sm focus-within:border-indigo-500 dark:border-dark-light dark:bg-dark-light`}
     >
       <input
-        type={props.type || "text"}
-        value={props.value}
-        onChange={(e) => props.onChange(e.currentTarget.value)}
-        placeholder={props.placeholder}
+        {...props}
+        onInput={handleInput}
+        value={value()}
         class="w-full appearance-none bg-transparent text-sm focus:outline-none focus:ring-0 dark:text-white"
       />
     </div>
   );
-};
+};
diff --git a/src/components/pages/settings/settings-general.tsx b/src/components/pages/settings/settings-general.tsx
@@ -4,10 +4,12 @@ import { HiSolidCog8Tooth } from "solid-icons/hi";
 import { IoLanguageOutline } from "solid-icons/io";
 import { RiDeviceKeyboardFill } from "solid-icons/ri";
 import { VsRocket } from "solid-icons/vs";
-import { Component, Show } from "solid-js";
+import { Component, createEffect, Show } from "solid-js";
 import { HotkeyStore } from "../../../store/hotkey-store";
 import { SettingsStore } from "../../../store/settings-store";
-import { HotkeyEvent, Language } from "../../../types/enums";
+import { HotkeyEvent, Language, WebWindow } from "../../../types/enums";
+import { InvokeCommand } from "../../../types/tauri-invoke";
+import { invokeCommand } from "../../../utils/tauri";
 import { Dropdown } from "../../elements/dropdown";
 import { Input } from "../../elements/input";
 import { TextBlock } from "../../elements/text-block";
@@ -18,6 +20,9 @@ import { Shortcut } from "../../utils/shortcut";
 interface SettingsGeneralProps {}
 
 export const SettingsGeneral: Component<SettingsGeneralProps> = ({}) => {
+  createEffect(() => {
+    console.log("settings", SettingsStore.settings());
+  }, []);
   return (
     <Show when={SettingsStore.settings()}>
       <TextBlock Icon={RiDeviceKeyboardFill} title="Keyboard shortcut">
@@ -44,14 +49,23 @@ export const SettingsGeneral: Component<SettingsGeneralProps> = ({}) => {
           </div>
         </div>
 
+        <div class="flex items-center justify-between space-x-2 px-5 pb-5">
+          <div class="flex items-center space-x-2 truncate">
+            <FiMoon class="dark:text-white" />
+            <h6 class="text-sm">Switch Theme</h6>
+          </div>
+          <div>
+            <DarkMode />
+          </div>
+        </div>
+
         <div class="flex items-center justify-between space-x-2 px-5 pb-5">
           <div class="flex items-center space-x-2 truncate">
             <IoLanguageOutline />
             <h6 class="text-sm">Change language</h6>
           </div>
 
           <Dropdown
-            className="w-16"
             items={Object.entries(Language).map(([key, value]) => ({ value: value, label: key }))}
             value={SettingsStore.settings()!.language}
             onChange={(language) => {
@@ -67,23 +81,21 @@ export const SettingsGeneral: Component<SettingsGeneralProps> = ({}) => {
           </div>
 
           <Input
-            className="w-16"
-            value={SettingsStore.settings()!.display_scale.toString()}
-            onChange={(display_scale) => {
-              SettingsStore.updateSettings({ ...SettingsStore.settings()!, display_scale: parseInt(display_scale) });
+            type="number"
+            step="0.01"
+            min={0.5}
+            max={2}
+            value={SettingsStore.settings()!.display_scale}
+            debounce={1000}
+            onInput={async (e) => {
+              SettingsStore.updateSettings({
+                ...SettingsStore.settings()!,
+                display_scale: Number(parseFloat(e.target.value).toFixed(2)),
+              });
+              await invokeCommand(InvokeCommand.OpenNewWindow, { windowName: WebWindow.Settings });
             }}
           />
         </div>
-
-        <div class="flex items-center justify-between space-x-2 px-5 pb-5">
-          <div class="flex items-center space-x-2 truncate">
-            <FiMoon class="dark:text-white" />
-            <h6 class="text-sm">Switch Theme.</h6>
-          </div>
-          <div>
-            <DarkMode />
-          </div>
-        </div>
       </TextBlock>
     </Show>
   );

diff --git a/src/store/clipboard-store.ts b/src/store/clipboard-store.ts
@@ -32,7 +32,7 @@ function createClipboardStore() {
     setWhere(initialWhere);
     const clipboards = await getClipboards();
     setClipboards(clipboards);
-    ClipboardStore.clipboardRef()!.scrollTo(0, 0);
+    ClipboardStore.clipboardRef()?.scrollTo(0, 0);
   };
 
   const resetClipboards = async () => {

diff --git a/src/store/settings-store.ts b/src/store/settings-store.ts
@@ -40,6 +40,7 @@ function createSettingsStore() {
   const initSettings = async () => {
     const settings = await invokeCommand(InvokeCommand.GetSettings);
     setSettings(settings);
+    console.log(settings);
   };
 
   const syncClipboard = async () => invokeCommand(InvokeCommand.SyncClipboardHistory);