add clipboard size limits

src/components/elements/input.tsx

@@ -5,7 +5,13 @@ type InputProps = JSX.InputHTMLAttributes<HTMLInputElement> & {
   className?: string;
 };
 
-export const Input: Component<InputProps> = ({ className, debounce = 0, onInput, value: initialValue = "", ...props }) => {
+export const Input: Component<InputProps> = ({
+  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<InputProps> = ({ 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}`}
       />
     </div>
   );
-};
+};

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<SettingsLimitsProps> = ({}) => {
+  return (
+    <Show when={SettingsStore.settings()}>
+      <TextBlock Icon={HiSolidCog8Tooth} title="Clipboard Limits">
+        <div class="flex items-center justify-between space-x-2 px-5 pb-5">
+          <div class="flex items-center space-x-2 truncate">
+            <CgDisplayFlex />
+            <h6 class="text-sm">Max text size ({formatBytes(SettingsStore.settings()?.max_text_size)})</h6>
+          </div>
+
+          <Input
+            type="number"
+            step="1"
+            min={0}
+            max={104_857_600}
+            className="w-36"
+            value={SettingsStore.settings()?.max_text_size || 10_485_760}
+            debounce={1000}
+            onInput={async (e) => {
+              SettingsStore.updateSettings({
+                ...SettingsStore.settings()!,
+                max_text_size: Number(e.target.value),
+              });
+            }}
+          />
+        </div>
+      </TextBlock>
+    </Show>
+  );
+};

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 = () => {
         <Show when={SettingsStore.getCurrentTab()?.name === "Hotkeys"}>
           <SettingsHotkeys />
         </Show>
+
+        <Show when={SettingsStore.getCurrentTab()?.name === "Limits"}>
+          <SettingsLimits />
+        </Show>
       </div>
     </div>
   );

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<SettingsTab[]>([
@@ -23,6 +24,11 @@ function createSettingsStore() {
       Icon: RiDeviceKeyboardFill,
       current: false,
     },
+    {
+      name: SETTINGS_TAB[4],
+      Icon: TbResize,
+      current: false,
+    },
   ]);
   const [settings, setSettings] = createSignal<Settings>();
 

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 = [