(fix): tauth blocking children

(feat): update ui components

apps/web/src/features/settings/components.tsx

@@ -1,16 +1,43 @@
 import { Label } from "@tensamin/ui";
-import { Switch as UISwitch } from "@tensamin/ui";
+import { Switch as UISwitch, Input as UIInput } from "@tensamin/ui";
 import { useEffect, useState } from "react";
 
+import type { Storage } from "@tensamin/shared/data";
 import { settingsStorageDefaults } from "@tensamin/shared/settings";
 import { useStorage } from "@tensamin/storage/context";
 
+type BooleanStorageKey = {
+  [K in keyof Storage]: Storage[K] extends boolean ? K : never;
+}[keyof Storage];
+
+type StringStorageKey = {
+  [K in keyof Storage]: Storage[K] extends string ? K : never;
+}[keyof Storage];
+
+type NumberStorageKey = {
+  [K in keyof Storage]: Storage[K] extends number ? K : never;
+}[keyof Storage];
+
+type InputProps =
+  | {
+      label: string;
+      id: StringStorageKey;
+      placeholder?: string;
+      type?: "text";
+    }
+  | {
+      label: string;
+      id: NumberStorageKey;
+      placeholder?: string;
+      type: "number";
+    };
+
 export function Switch({
   label,
   id,
 }: {
   label: string;
-  id: keyof typeof settingsStorageDefaults;
+  id: keyof typeof settingsStorageDefaults & BooleanStorageKey;
 }) {
   const { save, load } = useStorage();
   const [value, setValue] = useState<boolean>(settingsStorageDefaults[id]);
@@ -33,3 +60,49 @@ export function Switch({
     </div>
   );
 }
+
+export function Input({ label, id, placeholder, type }: InputProps) {
+  const { save, load } = useStorage();
+  const [value, setValue] = useState<string | number>(
+    type === "number" ? 0 : "",
+  );
+
+  useEffect(() => {
+    load(id).then((loadedValue) => {
+      if (type === "number") {
+        if (typeof loadedValue === "number") {
+          setValue(loadedValue);
+        }
+        return;
+      }
+
+      if (typeof loadedValue === "string") {
+        setValue(loadedValue);
+      }
+    });
+  }, [id, load, type]);
+
+  return (
+    <div className="flex flex-col gap-1">
+      <Label htmlFor={id}>{label}</Label>
+      <UIInput
+        id={id}
+        type={type || "text"}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => {
+          if (type === "number") {
+            const nextValue = Number(e.target.value);
+            setValue(nextValue);
+            save(id, nextValue);
+            return;
+          }
+
+          const nextValue = e.target.value;
+          setValue(nextValue);
+          save(id, nextValue);
+        }}
+      />
+    </div>
+  );
+}