diff --git a/src/components/elements/input.tsx b/src/components/elements/input.tsx index 110492d1..9fd18f3c 100644 --- a/src/components/elements/input.tsx +++ b/src/components/elements/input.tsx @@ -5,7 +5,13 @@ type InputProps = JSX.InputHTMLAttributes & { className?: string; }; -export const Input: Component = ({ className, debounce = 0, onInput, value: initialValue = "", ...props }) => { +export const Input: Component = ({ + className, + debounce = 0, + onInput, + value: initialValue = "", + ...props +}) => { let timeoutId: number; const [value, setValue] = createSignal(initialValue as string); @@ -35,8 +41,8 @@ export const Input: Component = ({ className, debounce = 0, onInput, {...props} onInput={handleInput} value={value()} - class="w-full appearance-none bg-transparent text-sm focus:outline-none focus:ring-0 dark:text-white" + class={`w-full appearance-none bg-transparent text-sm focus:outline-none focus:ring-0 dark:text-white ${props.class}`} /> ); -}; \ No newline at end of file +}; diff --git a/src/components/pages/settings/settings-limits.tsx b/src/components/pages/settings/settings-limits.tsx new file mode 100644 index 00000000..046abd35 --- /dev/null +++ b/src/components/pages/settings/settings-limits.tsx @@ -0,0 +1,40 @@ +import { CgDisplayFlex } from "solid-icons/cg"; +import { HiSolidCog8Tooth } from "solid-icons/hi"; +import { Component, Show } from "solid-js"; +import { SettingsStore } from "../../../store/settings-store"; +import { formatBytes } from "../../../utils/helpers"; +import { Input } from "../../elements/input"; +import { TextBlock } from "../../elements/text-block"; + +interface SettingsLimitsProps {} + +export const SettingsLimits: Component = ({}) => { + return ( + + +
+
+ +
Max text size ({formatBytes(SettingsStore.settings()?.max_text_size)})
+
+ + { + SettingsStore.updateSettings({ + ...SettingsStore.settings()!, + max_text_size: Number(e.target.value), + }); + }} + /> +
+
+
+ ); +}; diff --git a/src/settings.tsx b/src/settings.tsx index 9346b38d..3528b189 100644 --- a/src/settings.tsx +++ b/src/settings.tsx @@ -10,6 +10,7 @@ import { SettingsStore } from "./store/settings-store"; import "./styles.css"; import { ListenEvent } from "./types/tauri-listen"; import { listenEvent } from "./utils/tauri"; +import { SettingsLimits } from "./components/pages/settings/settings-limits"; const Settings = () => { createResource(AppStore.init); @@ -35,6 +36,10 @@ const Settings = () => { + + + + ); diff --git a/src/store/settings-store.ts b/src/store/settings-store.ts index 85b69fe5..f7e4d123 100644 --- a/src/store/settings-store.ts +++ b/src/store/settings-store.ts @@ -8,6 +8,7 @@ import { WebWindow } from "../types/enums"; import { InvokeCommand } from "../types/tauri-invoke"; import { SETTINGS_TAB, SettingsTabName } from "../utils/constants"; import { invokeCommand } from "../utils/tauri"; +import { TbResize } from "solid-icons/tb"; function createSettingsStore() { const [tabs, setTabs] = createSignal([ @@ -23,6 +24,11 @@ function createSettingsStore() { Icon: RiDeviceKeyboardFill, current: false, }, + { + name: SETTINGS_TAB[4], + Icon: TbResize, + current: false, + }, ]); const [settings, setSettings] = createSignal(); diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 0e739592..fcc268bd 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -1,6 +1,6 @@ import { HotkeyEvent } from "../types/enums"; -export const SETTINGS_TAB = ["General", "Backup", "History", "Hotkeys"] as const; +export const SETTINGS_TAB = ["General", "Backup", "History", "Hotkeys", "Limits"] as const; export const VIEW_MORE_NAMES = ["Sync Clipboard History", "Settings", "About", "Exit"] as const; export const TAB_NAMES = ["Recent Clipboards", "Starred Clipboards", "History", "View more"] as const; export const TABS = [