Settings UI

src/App.tsx

@@ -10,6 +10,7 @@ import {
 import Sidebar from "./components/view/Sidebar";
 import { ThemeProvider } from "next-themes";
 import Page from "./components/page/PageView";
+import { SettingsDialog } from "./components/settings/SettingsDialog";
 
 export default function App() {
   const appRef = useRef<Enclave | null>(null);
@@ -54,6 +55,8 @@ export default function App() {
                 <Page appRef={appRef} />
               </ResizablePanel>
             </ResizablePanelGroup>
+
+            <SettingsDialog appRef={appRef} />
           </>
         )}
       </main>

src/app/app.ts

@@ -28,12 +28,14 @@ export default class Enclave<P = Page> {
   public accounts?: AccountsFile;
   public server?: EnclaveServer;
   public serverList: ServerList;
+  public isSettingsOpen: boolean;
   public forceRender: () => void;
   public page?: P;
 
   public constructor() {
     this.serverList = {};
     this.forceRender = () => {};
+    this.isSettingsOpen = false;
   }
 
   public async init() {

src/components/settings/AppearanceSettings.tsx

@@ -0,0 +1,14 @@
+import { Palette } from "lucide-react";
+
+export function AppearanceSettings() {
+  return (
+    <div className="space-y-5 w-full">
+      <h2 className="text-lg font-semibold flex items-center gap-2">
+        <Palette /> Appearance
+      </h2>
+      <p className="text-sm text-muted-foreground">
+        Theme and display settings go here.
+      </p>
+    </div>
+  );
+}

src/components/settings/AudioVideoSettings.tsx

@@ -0,0 +1,14 @@
+import { Volume2 } from "lucide-react";
+
+export function AudioVideoSettings() {
+  return (
+    <div className="space-y-5 w-full">
+      <h2 className="text-lg font-semibold flex items-center gap-2">
+        <Volume2 /> Audio & Video
+      </h2>
+      <p className="text-sm text-muted-foreground">
+        Microphone/camera device selection goes here.
+      </p>
+    </div>
+  );
+}

src/components/settings/ProfileSettings.tsx

@@ -0,0 +1,14 @@
+import { User } from "lucide-react";
+
+export function ProfileSettings() {
+  return (
+    <div className="space-y-5 w-full">
+      <h2 className="text-lg font-semibold flex items-center gap-2">
+        <User /> Profile
+      </h2>
+      <p className="text-sm text-muted-foreground">
+        Display name and avatar settings go here.
+      </p>
+    </div>
+  );
+}

src/components/settings/SettingsDialog.tsx

@@ -0,0 +1,74 @@
+import { useState } from "react";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import { User, Palette, Mic, Volume2 } from "lucide-react";
+import { ProfileSettings } from "./ProfileSettings";
+import { AppearanceSettings } from "./AppearanceSettings";
+import { AudioVideoSettings } from "./AudioVideoSettings";
+import Enclave from "@/app/app";
+
+type SettingsCategory = "profile" | "appearance" | "audio-video";
+
+const CATEGORIES: {
+  id: SettingsCategory;
+  label: string;
+  icon: React.ElementType;
+}[] = [
+  { id: "profile", label: "Profile", icon: User },
+  { id: "appearance", label: "Appearance", icon: Palette },
+  { id: "audio-video", label: "Audio & Video", icon: Volume2 },
+];
+
+export function SettingsDialog({
+  appRef,
+}: {
+  appRef: React.RefObject<Enclave | null>;
+}) {
+  const [category, setCategory] = useState<SettingsCategory>("profile");
+
+  return (
+    <Dialog
+      open={appRef.current?.isSettingsOpen}
+      onOpenChange={(open) => {
+        if (!appRef.current) return;
+
+        appRef.current.isSettingsOpen = open;
+        appRef.current.forceRender();
+      }}
+    >
+      <DialogContent
+        className="flex h-[85vh] w-[90vw] max-w-5xl gap-0 overflow-hidden p-0 sm:max-w-5xl"
+        showCloseButton
+      >
+        <div className="flex w-56 shrink-0 flex-col border-r bg-muted/30 p-3">
+          <span className="mb-2 px-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            Settings
+          </span>
+          <nav className="flex flex-col gap-0.5">
+            {CATEGORIES.map(({ id, label, icon: Icon }) => (
+              <button
+                key={id}
+                onClick={() => setCategory(id)}
+                className={cn(
+                  "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
+                  category === id
+                    ? "bg-accent text-accent-foreground"
+                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+                )}
+              >
+                <Icon className="h-4 w-4" />
+                {label}
+              </button>
+            ))}
+          </nav>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-6">
+          {category === "profile" && <ProfileSettings />}
+          {category === "appearance" && <AppearanceSettings />}
+          {category === "audio-video" && <AudioVideoSettings />}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/ui/dialog.tsx

@@ -1,24 +1,24 @@
-import * as React from "react"
+import * as React from "react";
-import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
-import { XIcon } from "lucide-react"
+import { XIcon } from "lucide-react";
 
 function Dialog({ ...props }: DialogPrimitive.Root.Props) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
 function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
 function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 function DialogOverlay({
@@ -29,12 +29,12 @@ function DialogOverlay({
     <DialogPrimitive.Backdrop
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 isolate z-50 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 backdrop-blur-sm",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogContent({
@@ -43,7 +43,7 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }: DialogPrimitive.Popup.Props & {
-  showCloseButton?: boolean
+  showCloseButton?: boolean;
 }) {
   return (
     <DialogPortal>
@@ -52,7 +52,7 @@ function DialogContent({
         data-slot="dialog-content"
         className={cn(
           "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          className
+          className,
         )}
         {...props}
       >
@@ -68,14 +68,13 @@ function DialogContent({
               />
             }
           >
-            <XIcon
+            <XIcon />
-            />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
         )}
       </DialogPrimitive.Popup>
     </DialogPortal>
-  )
+  );
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -85,7 +84,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-2", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DialogFooter({
@@ -94,14 +93,14 @@ function DialogFooter({
   children,
   ...props
 }: React.ComponentProps<"div"> & {
-  showCloseButton?: boolean
+  showCloseButton?: boolean;
 }) {
   return (
     <div
       data-slot="dialog-footer"
       className={cn(
         "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
-        className
+        className,
       )}
       {...props}
     >
@@ -112,7 +111,7 @@ function DialogFooter({
         </DialogPrimitive.Close>
       )}
     </div>
-  )
+  );
 }
 
 function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
@@ -121,11 +120,11 @@ function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
       data-slot="dialog-title"
       className={cn(
         "font-heading text-base leading-none font-medium",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogDescription({
@@ -137,11 +136,11 @@ function DialogDescription({
       data-slot="dialog-description"
       className={cn(
         "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -155,4 +154,4 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-}
+};

src/components/view/AccountCard.tsx

@@ -41,7 +41,16 @@ export default function AccountCard({
           </div>
         </div>
         <div className="flex items-center text-muted-foreground">
-          <Button variant="ghost" className="size-10">
+          <Button
+            variant="ghost"
+            className="size-10"
+            onClick={() => {
+              if (!appRef.current) return;
+
+              appRef.current.isSettingsOpen = !appRef.current?.isSettingsOpen;
+              appRef.current.forceRender();
+            }}
+          >
             <Settings2Icon className="size-5.5" />
           </Button>
         </div>