enclave-chat/enclave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Settings UI

Browse Source
This commit is contained in:
selimaj-dev
2026-08-26 00:09:39 +02:00
parent 29baa1f486
commit 4a28cd25df
8 changed files with 156 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+3
View File
@@ -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
+2
View File
@@ -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
+14
View File
@@ -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
+14
View File
@@ -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
+14
View File
@@ -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
+74
View File
@@ -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
+25 -26
View File
@@ -1,24 +1,24 @@
import * as React from "react"
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
import * as React from "react";
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { XIcon } from "lucide-react"
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
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",
className
"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,
)}
{...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
+10 -1
View File
@@ -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>