(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>
+  );
+}

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

@@ -39,14 +39,16 @@ export function SettingsSidebar() {
   return (
     <div
       className={cn(
-        isMobile ? "w-full" : "rounded-tl-2xl border-r bg-input/15 w-50",
-        "flex flex-col gap-6 p-3",
+        isMobile
+          ? "w-full p-1"
+          : "p-3 rounded-tl-2xl border-r bg-input/15 w-50",
+        "flex flex-col gap-6",
       )}
     >
       {/* Settings */}
       {Object.keys(settingsOptions).map((category) => (
         // Category
-        <div key={category} className="flex flex-col gap-1">
+        <div key={category} className="flex flex-col gap-2">
           <h2 className="font-bold text-xs uppercase">{category}</h2>
           {Object.keys(settingsOptions[category]).map((page) => (
             // Page

apps/web/src/routes/settings/profile.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div></div>;
+}