(wip): add onboarding

(fix): login page reloading

packages/settings/src/components.tsx

@@ -1,14 +1,4 @@
-import {
-  Button,
-  Checkbox,
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
-  Input,
-  Label,
-  Switch as UISwitch,
-} from "@tensamin/ui";
+import { EditableList, LabeledSwitch } from "@tensamin/ui";
 import { useEffect, useState } from "react";
 
 import { storageDefaults, type Storage } from "@tensamin/shared/data";
@@ -24,9 +14,12 @@ type ListStorageKey = {
 }[keyof Storage];
 
 type ListStorageItem<K extends ListStorageKey> =
-  Storage[K] extends Array<infer Item> ? Item : never;
+  Storage[K] extends Array<infer Item> ? Item & (string | number) : never;
 
-export function Switch({ label, id }: {
+export function Switch({
+  label,
+  id,
+}: {
   label: React.ReactNode;
   id: keyof typeof settingsStorageDefaults & BooleanStorageKey;
 }) {
@@ -38,91 +31,55 @@ export function Switch({ label, id }: {
   }, [id, load]);
 
   return (
-    <div className="flex gap-1">
-      <UISwitch id={id} checked={value} onCheckedChange={(nextValue) => {
+    <LabeledSwitch
+      id={id}
+      label={label}
+      checked={value}
+      onCheckedChange={(nextValue) => {
         setValue(nextValue);
         save(id, nextValue);
-      }} />
-      <Label htmlFor={id}>{label}</Label>
-    </div>
+      }}
+    />
   );
 }
 
-export function List<K extends ListStorageKey>({ label, id }: {
+export function List<K extends ListStorageKey>({
+  label,
+  id,
+}: {
   label: React.ReactNode;
   id: K;
 }) {
   const { save, load } = useStorage();
   const [items, setItems] = useState<Storage[K]>(storageDefaults[id]);
-  const [inputValue, setInputValue] = useState("");
-  const [selectedItems, setSelectedItems] = useState<Set<number>>(new Set());
 
   useEffect(() => {
     load(id).then((value) => setItems(value));
   }, [id, load]);
 
-  const persistItems = (nextItems: Storage[K]) => {
-    setItems(nextItems);
-    save(id, nextItems);
+  const persistItems = (nextItems: ListStorageItem<K>[]) => {
+    setItems(nextItems as Storage[K]);
+    save(id, nextItems as Storage[K]);
   };
 
   const toStorageItem = (value: string): ListStorageItem<K> => {
     const referenceItem = items[0] ?? storageDefaults[id][0];
-    return (typeof referenceItem === "number" ? Number(value) : value) as ListStorageItem<K>;
-  };
-
-  const addItem = () => {
-    const trimmedValue = inputValue.trim();
-    if (!trimmedValue) return;
-    const nextItem = toStorageItem(trimmedValue);
-    if (typeof nextItem === "number" && Number.isNaN(nextItem)) return;
-    persistItems([...items, nextItem] as Storage[K]);
-    setInputValue("");
-  };
-
-  const deleteItems = (indexes: Set<number>) => {
-    const nextItems = items.filter((_, index) => !indexes.has(index)) as Storage[K];
-    setItems(nextItems);
-    setSelectedItems(new Set());
-    save(id, nextItems);
+    return (
+      typeof referenceItem === "number" ? Number(value) : value
+    ) as ListStorageItem<K>;
   };
 
   return (
-    <div className="flex flex-col gap-2 pt-4">
-      <Label>{label}</Label>
-      <div className="flex flex-col gap-0 overflow-hidden p-1 border-2 rounded-xl">
-        <div className="flex gap-1">
-          <Input value={inputValue} onChange={(event) => setInputValue(event.target.value)} onKeyDown={(event) => {
-            if (event.key === "Enter") addItem();
-          }} />
-          <Button onClick={addItem}>Add item</Button>
-        </div>
-        <div className="flex flex-col gap-0">
-          {items.map((item, index) => {
-            const labelId = `${String(id)}-${index}`;
-            const selected = selectedItems.has(index);
-            const deletingSelectedItems = selectedItems.size > 1;
-            return (
-              <ContextMenu key={`${String(item)}-${index}`}>
-                <ContextMenuTrigger render={<div className="grid grid-cols-[auto_auto_1fr] items-center gap-2 border-b px-1 py-2 last:border-b-0">
-                  <Checkbox id={labelId} checked={selected} onCheckedChange={(checked) => setSelectedItems((previous) => {
-                    const nextSelected = new Set(previous);
-                    if (checked) nextSelected.add(index);
-                    else nextSelected.delete(index);
-                    return nextSelected;
-                  })} />
-                  <Label htmlFor={labelId}>{String(item)}</Label><div />
-                </div>} />
-                <ContextMenuContent>
-                  <ContextMenuItem variant="destructive" onClick={() => deleteItems(deletingSelectedItems ? selectedItems : new Set([index]))}>
-                    {deletingSelectedItems ? "Delete Selected" : "Delete"}
-                  </ContextMenuItem>
-                </ContextMenuContent>
-              </ContextMenu>
-            );
-          })}
-        </div>
-      </div>
-    </div>
+    <EditableList<ListStorageItem<K>>
+      label={label}
+      items={items as ListStorageItem<K>[]}
+      parseItem={(value) => {
+        const item = toStorageItem(value);
+        return typeof item === "number" && Number.isNaN(item)
+          ? undefined
+          : item;
+      }}
+      onItemsChange={persistItems}
+    />
   );
 }