Added deeplinks, added qr code login, added settings, other stuff

apps/web/src/features/legal/screen.tsx

@@ -162,7 +162,7 @@ export default function Screen(props: { children: React.ReactNode }) {
 
   return (
     <CreateScreen>
-      <div className="h-full flex flex-col gap-15 p-10 md:p-40 w-full lg:w-2/3">
+      <div className="h-full flex flex-col gap-15 p-10 py-20 md:p-40 w-full lg:w-2/3">
         <h1 className="text-3xl md:text-4xl font-bold">
           Privacy Policy & ToS
           <p className="text-muted-foreground text-[20px] font-normal pt-3">

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

@@ -0,0 +1,35 @@
+import { Label } from "@tensamin/ui/cmp/label";
+import { Switch as UISwitch } from "@tensamin/ui/cmp/switch";
+import { useEffect, useState } from "react";
+
+import { settingsStorageDefaults } from "@tensamin/shared/settings";
+import { useStorage } from "@tensamin/storage/context";
+
+export function Switch({
+  label,
+  id,
+}: {
+  label: string;
+  id: keyof typeof settingsStorageDefaults;
+}) {
+  const { save, load } = useStorage();
+  const [value, setValue] = useState<boolean>(settingsStorageDefaults[id]);
+
+  useEffect(() => {
+    load(id).then((value) => setValue(value));
+  }, [id, load]);
+
+  return (
+    <div className="flex gap-1">
+      <UISwitch
+        id={id}
+        checked={value}
+        onCheckedChange={(value) => {
+          setValue(value);
+          save(id, value);
+        }}
+      />
+      <Label htmlFor={id}>{label}</Label>
+    </div>
+  );
+}

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

@@ -0,0 +1,64 @@
+import { Button } from "@tensamin/ui/cmp/button";
+
+import options from "@tensamin/shared/settings";
+import { cn, useIsMobile } from "@tensamin/ui/utils";
+import { Outlet, useNavigate } from "@tanstack/react-router";
+
+export default function Screen() {
+  const isMobile = useIsMobile();
+
+  return (
+    <div className="flex h-full w-full">
+      {!isMobile && <SettingsSidebar />}
+
+      {/* Page */}
+      <div className="bg-background w-full h-full p-3">
+        <Outlet />
+      </div>
+    </div>
+  );
+}
+
+export function SettingsSidebar() {
+  const settingsOptions = options as Record<
+    string,
+    Record<string, Record<string, unknown>>
+  >;
+
+  const isMobile = useIsMobile();
+  const navigate = useNavigate();
+
+  return (
+    <div
+      className={cn(
+        isMobile ? "w-full" : "rounded-tl-2xl border-r bg-input/15 w-50",
+        "flex flex-col gap-6 p-3",
+      )}
+    >
+      {/* Settings */}
+      {Object.keys(settingsOptions).map((category) => (
+        // Category
+        <div key={category} className="flex flex-col gap-1">
+          <h2 className="font-bold text-xs uppercase">{category}</h2>
+          {Object.keys(settingsOptions[category]).map((page) => (
+            // Page
+            <div key={page}>
+              <Button
+                className="w-full"
+                variant="outline"
+                onClick={() =>
+                  navigate({
+                    to: "/settings/" + page.toLowerCase(),
+                  })
+                }
+              >
+                {(page as string).charAt(0).toUpperCase() +
+                  (page as string).slice(1)}
+              </Button>
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}