refactor(ux): Update dashboard links and enhance settings page layout

- Changed document links to point to the researcher page in the dashboard. - Removed unused team and settings links from the dashboard layout. - Redesigned settings page with a sidebar for navigation and improved layout for better user experience. - Added delete confirmation dialog for model configurations in the settings manager. - Updated card components for better visual consistency and responsiveness.
2026-05-12 09:12:40 +02:00 · 2025-12-13 22:43:38 -08:00 · 2025-12-13 22:43:38 -08:00 · 3a3712ceac
commit 3a3712ceac
parent 71465398db
9 changed files with 720 additions and 297 deletions
--- a/surfsense_web/components/markdown-viewer.tsx
+++ b/surfsense_web/components/markdown-viewer.tsx
@ -28,7 +28,12 @@ export function MarkdownViewer({ content, className }: MarkdownViewerProps) {
 				</p>
 			),
 			a: ({ node, children, ...props }: any) => (
-				<a className="text-primary hover:underline" target="_blank" rel="noopener noreferrer" {...props}>
+				<a
+					className="text-primary hover:underline"
+					target="_blank"
+					rel="noopener noreferrer"
+					{...props}
+				>
 					{children}
 				</a>
 			),
--- a/surfsense_web/components/settings/llm-role-manager.tsx
+++ b/surfsense_web/components/settings/llm-role-manager.tsx
@ -255,93 +255,89 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {

 			{/* Stats Overview */}
 			{!isLoading && !hasError && (
-				<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-					<Card className="border-l-4 border-l-blue-500">
-						<CardContent className="p-6">
-							<div className="flex items-center justify-between space-x-4">
-								<div className="space-y-1">
-									<p className="text-3xl font-bold tracking-tight">{availableConfigs.length}</p>
-									<p className="text-sm font-medium text-muted-foreground">Available Models</p>
-									<div className="flex gap-2 text-xs text-muted-foreground">
-										<span>🌐 {globalConfigs.length} Global</span>
-										<span>• {llmConfigs.length} Custom</span>
+				<div className="grid gap-3 grid-cols-2 lg:grid-cols-4">
+					<Card className="overflow-hidden">
+						<div className="h-1 bg-blue-500" />
+						<CardContent className="p-4">
+							<div className="flex items-start justify-between gap-2">
+								<div className="space-y-1 min-w-0">
+									<p className="text-2xl font-bold tracking-tight">{availableConfigs.length}</p>
+									<p className="text-xs font-medium text-muted-foreground">Available Models</p>
+									<div className="flex flex-wrap gap-x-2 gap-y-0.5 text-[10px] text-muted-foreground">
+										<span>{globalConfigs.length} Global</span>
+										<span>{llmConfigs.length} Custom</span>
 									</div>
 								</div>
-								<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-500/10">
-									<Bot className="h-6 w-6 text-blue-600" />
+								<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-500/10">
+									<Bot className="h-4 w-4 text-blue-600" />
 								</div>
 							</div>
 						</CardContent>
 					</Card>

-					<Card className="border-l-4 border-l-purple-500">
-						<CardContent className="p-6">
-							<div className="flex items-center justify-between space-x-4">
-								<div className="space-y-1">
-									<p className="text-3xl font-bold tracking-tight">{assignedConfigIds.length}</p>
-									<p className="text-sm font-medium text-muted-foreground">Assigned Roles</p>
+					<Card className="overflow-hidden">
+						<div className="h-1 bg-purple-500" />
+						<CardContent className="p-4">
+							<div className="flex items-start justify-between gap-2">
+								<div className="space-y-1 min-w-0">
+									<p className="text-2xl font-bold tracking-tight">{assignedConfigIds.length}</p>
+									<p className="text-xs font-medium text-muted-foreground">Assigned Roles</p>
 								</div>
-								<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-purple-500/10">
-									<CheckCircle className="h-6 w-6 text-purple-600" />
+								<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-purple-500/10">
+									<CheckCircle className="h-4 w-4 text-purple-600" />
 								</div>
 							</div>
 						</CardContent>
 					</Card>

-					<Card
-						className={`border-l-4 ${
-							isAssignmentComplete ? "border-l-green-500" : "border-l-yellow-500"
-						}`}
-					>
-						<CardContent className="p-6">
-							<div className="flex items-center justify-between space-x-4">
-								<div className="space-y-1">
-									<p className="text-3xl font-bold tracking-tight">
+					<Card className="overflow-hidden">
+						<div className={`h-1 ${isAssignmentComplete ? "bg-green-500" : "bg-yellow-500"}`} />
+						<CardContent className="p-4">
+							<div className="flex items-start justify-between gap-2">
+								<div className="space-y-1 min-w-0">
+									<p className="text-2xl font-bold tracking-tight">
 										{Math.round((assignedConfigIds.length / 3) * 100)}%
 									</p>
-									<p className="text-sm font-medium text-muted-foreground">Completion</p>
+									<p className="text-xs font-medium text-muted-foreground">Completion</p>
 								</div>
 								<div
-									className={`flex h-12 w-12 items-center justify-center rounded-lg ${
+									className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${
 										isAssignmentComplete ? "bg-green-500/10" : "bg-yellow-500/10"
 									}`}
 								>
 									{isAssignmentComplete ? (
-										<CheckCircle className="h-6 w-6 text-green-600" />
+										<CheckCircle className="h-4 w-4 text-green-600" />
 									) : (
-										<AlertCircle className="h-6 w-6 text-yellow-600" />
+										<AlertCircle className="h-4 w-4 text-yellow-600" />
 									)}
 								</div>
 							</div>
 						</CardContent>
 					</Card>

-					<Card
-						className={`border-l-4 ${
-							isAssignmentComplete ? "border-l-emerald-500" : "border-l-orange-500"
-						}`}
-					>
-						<CardContent className="p-6">
-							<div className="flex items-center justify-between space-x-4">
-								<div className="space-y-1">
+					<Card className="overflow-hidden">
+						<div className={`h-1 ${isAssignmentComplete ? "bg-emerald-500" : "bg-orange-500"}`} />
+						<CardContent className="p-4">
+							<div className="flex items-start justify-between gap-2">
+								<div className="space-y-1 min-w-0">
 									<p
-										className={`text-3xl font-bold tracking-tight ${
+										className={`text-2xl font-bold tracking-tight ${
 											isAssignmentComplete ? "text-emerald-600" : "text-orange-600"
 										}`}
 									>
 										{isAssignmentComplete ? "Ready" : "Setup"}
 									</p>
-									<p className="text-sm font-medium text-muted-foreground">Status</p>
+									<p className="text-xs font-medium text-muted-foreground">Status</p>
 								</div>
 								<div
-									className={`flex h-12 w-12 items-center justify-center rounded-lg ${
+									className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${
 										isAssignmentComplete ? "bg-emerald-500/10" : "bg-orange-500/10"
 									}`}
 								>
 									{isAssignmentComplete ? (
-										<CheckCircle className="h-6 w-6 text-emerald-600" />
+										<CheckCircle className="h-4 w-4 text-emerald-600" />
 									) : (
-										<RefreshCw className="h-6 w-6 text-orange-600" />
+										<RefreshCw className="h-4 w-4 text-orange-600" />
 									)}
 								</div>
 							</div>
--- a/surfsense_web/components/settings/model-config-manager.tsx
+++ b/surfsense_web/components/settings/model-config-manager.tsx
@ -8,8 +8,6 @@ import {
 	ChevronsUpDown,
 	Clock,
 	Edit3,
-	Eye,
-	EyeOff,
 	Loader2,
 	Plus,
 	RefreshCw,
@ -20,6 +18,16 @@ import { AnimatePresence, motion } from "motion/react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { Alert, AlertDescription } from "@/components/ui/alert";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
@ -77,7 +85,6 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 	const { globalConfigs } = useGlobalLLMConfigs();
 	const [isAddingNew, setIsAddingNew] = useState(false);
 	const [editingConfig, setEditingConfig] = useState<LLMConfig | null>(null);
-	const [showApiKey, setShowApiKey] = useState<Record<number, boolean>>({});
 	const [formData, setFormData] = useState<CreateLLMConfig>({
 		name: "",
 		provider: "",
@ -91,6 +98,8 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 	});
 	const [isSubmitting, setIsSubmitting] = useState(false);
 	const [modelComboboxOpen, setModelComboboxOpen] = useState(false);
+	const [configToDelete, setConfigToDelete] = useState<LLMConfig | null>(null);
+	const [isDeleting, setIsDeleting] = useState(false);

 	// Populate form when editing
 	useEffect(() => {
@ -162,19 +171,22 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 		}
 	};

-	const handleDelete = async (id: number) => {
-		if (
-			confirm("Are you sure you want to delete this configuration? This action cannot be undone.")
-		) {
-			await deleteLLMConfig(id);
-		}
+	const handleDeleteClick = (config: LLMConfig) => {
+		setConfigToDelete(config);
 	};

-	const toggleApiKeyVisibility = (configId: number) => {
-		setShowApiKey((prev) => ({
-			...prev,
-			[configId]: !prev[configId],
-		}));
+	const handleConfirmDelete = async () => {
+		if (!configToDelete) return;
+		setIsDeleting(true);
+		try {
+			await deleteLLMConfig(configToDelete.id);
+			toast.success("Configuration deleted successfully");
+		} catch (error) {
+			toast.error("Failed to delete configuration");
+		} finally {
+			setIsDeleting(false);
+			setConfigToDelete(null);
+		}
 	};

 	const selectedProvider = LLM_PROVIDERS.find((p) => p.value === formData.provider);
@ -184,13 +196,6 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 		return LLM_PROVIDERS.find((p) => p.value === providerValue);
 	};

-	const maskApiKey = (apiKey: string) => {
-		if (apiKey.length <= 8) return "*".repeat(apiKey.length);
-		return (
-			apiKey.substring(0, 4) + "*".repeat(apiKey.length - 8) + apiKey.substring(apiKey.length - 4)
-		);
-	};
-
 	return (
 		<div className="space-y-6">
 			{/* Header */}
@ -258,46 +263,49 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {

 			{/* Stats Overview */}
 			{!loading && !error && (
-				<div className="grid gap-4 md:grid-cols-3">
-					<Card className="border-l-4 border-l-blue-500">
-						<CardContent className="p-6">
-							<div className="flex items-center justify-between space-x-4">
-								<div className="space-y-1">
-									<p className="text-3xl font-bold tracking-tight">{llmConfigs.length}</p>
-									<p className="text-sm font-medium text-muted-foreground">Total Configurations</p>
+				<div className="grid gap-3 grid-cols-3">
+					<Card className="overflow-hidden">
+						<div className="h-1 bg-blue-500" />
+						<CardContent className="p-4">
+							<div className="flex items-start justify-between gap-2">
+								<div className="space-y-1 min-w-0">
+									<p className="text-2xl font-bold tracking-tight">{llmConfigs.length}</p>
+									<p className="text-xs font-medium text-muted-foreground">Total Configs</p>
 								</div>
-								<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-500/10">
-									<Bot className="h-6 w-6 text-blue-600" />
+								<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-500/10">
+									<Bot className="h-4 w-4 text-blue-600" />
 								</div>
 							</div>
 						</CardContent>
 					</Card>

-					<Card className="border-l-4 border-l-green-500">
-						<CardContent className="p-6">
-							<div className="flex items-center justify-between space-x-4">
-								<div className="space-y-1">
-									<p className="text-3xl font-bold tracking-tight">
+					<Card className="overflow-hidden">
+						<div className="h-1 bg-green-500" />
+						<CardContent className="p-4">
+							<div className="flex items-start justify-between gap-2">
+								<div className="space-y-1 min-w-0">
+									<p className="text-2xl font-bold tracking-tight">
 										{new Set(llmConfigs.map((c) => c.provider)).size}
 									</p>
-									<p className="text-sm font-medium text-muted-foreground">Unique Providers</p>
+									<p className="text-xs font-medium text-muted-foreground">Providers</p>
 								</div>
-								<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-500/10">
-									<CheckCircle className="h-6 w-6 text-green-600" />
+								<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-green-500/10">
+									<CheckCircle className="h-4 w-4 text-green-600" />
 								</div>
 							</div>
 						</CardContent>
 					</Card>

-					<Card className="border-l-4 border-l-emerald-500">
-						<CardContent className="p-6">
-							<div className="flex items-center justify-between space-x-4">
-								<div className="space-y-1">
-									<p className="text-3xl font-bold tracking-tight text-emerald-600">Active</p>
-									<p className="text-sm font-medium text-muted-foreground">System Status</p>
+					<Card className="overflow-hidden">
+						<div className="h-1 bg-emerald-500" />
+						<CardContent className="p-4">
+							<div className="flex items-start justify-between gap-2">
+								<div className="space-y-1 min-w-0">
+									<p className="text-2xl font-bold tracking-tight text-emerald-600">Active</p>
+									<p className="text-xs font-medium text-muted-foreground">Status</p>
 								</div>
-								<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-emerald-500/10">
-									<CheckCircle className="h-6 w-6 text-emerald-600" />
+								<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-emerald-500/10">
+									<CheckCircle className="h-4 w-4 text-emerald-600" />
 								</div>
 							</div>
 						</CardContent>
@ -352,119 +360,91 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 											exit={{ opacity: 0, y: -10 }}
 											transition={{ duration: 0.2 }}
 										>
-											<Card className="group border-l-4 border-l-primary/50 hover:border-l-primary hover:shadow-md transition-all duration-200">
-												<CardContent className="p-6">
-													<div className="flex items-start justify-between">
-														<div className="flex-1 space-y-4">
-															{/* Header */}
-															<div className="flex items-start gap-4">
-																<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 group-hover:bg-primary/20 transition-colors">
-																	<Bot className="h-6 w-6 text-primary" />
-																</div>
-																<div className="flex-1 space-y-2">
-																	<div className="flex items-center gap-3">
-																		<h4 className="text-lg font-semibold tracking-tight">
-																			{config.name}
-																		</h4>
-																		<Badge variant="secondary" className="text-xs font-medium">
-																			{config.provider}
-																		</Badge>
+											<Card className="group overflow-hidden hover:shadow-md transition-all duration-200">
+												<CardContent className="p-0">
+													<div className="flex">
+														{/* Left accent bar */}
+														<div className="w-1 bg-primary/50 group-hover:bg-primary transition-colors" />
+
+														<div className="flex-1 p-5">
+															<div className="flex items-start justify-between gap-4">
+																{/* Main content */}
+																<div className="flex items-start gap-4 flex-1 min-w-0">
+																	<div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 group-hover:bg-primary/15 transition-colors">
+																		<Bot className="h-5 w-5 text-primary" />
 																	</div>
-																	<p className="text-sm text-muted-foreground font-mono">
-																		{config.model_name}
-																	</p>
-																	{config.language && (
-																		<div className="flex items-center gap-2">
-																			<Badge variant="outline" className="text-xs">
-																				{config.language}
-																			</Badge>
+																	<div className="flex-1 min-w-0 space-y-3">
+																		{/* Title row */}
+																		<div className="flex items-center gap-2 flex-wrap">
+																			<h4 className="text-base font-semibold tracking-tight truncate">
+																				{config.name}
+																			</h4>
+																			<div className="flex items-center gap-1.5">
+																				<Badge
+																					variant="secondary"
+																					className="text-[10px] font-medium px-1.5 py-0"
+																				>
+																					{config.provider}
+																				</Badge>
+																				{config.language && (
+																					<Badge
+																						variant="outline"
+																						className="text-[10px] px-1.5 py-0 text-muted-foreground"
+																					>
+																						{config.language}
+																					</Badge>
+																				)}
+																			</div>
 																		</div>
-																	)}
-																</div>
-															</div>

-															{/* Provider Description */}
-															{providerInfo && (
-																<p className="text-sm text-muted-foreground">
-																	{providerInfo.description}
-																</p>
-															)}
+																		{/* Model name */}
+																		<div className="flex items-center gap-2">
+																			<code className="text-xs font-mono text-muted-foreground bg-muted/50 px-2 py-0.5 rounded">
+																				{config.model_name}
+																			</code>
+																		</div>

-															{/* Configuration Details */}
-															<div className="grid gap-4 sm:grid-cols-2">
-																<div className="space-y-2">
-																	<Label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-																		API Key
-																	</Label>
-																	<div className="flex items-center space-x-2">
-																		<code className="flex-1 rounded-md bg-muted px-3 py-2 text-xs font-mono">
-																			{showApiKey[config.id]
-																				? config.api_key
-																				: maskApiKey(config.api_key)}
-																		</code>
-																		<Button
-																			variant="ghost"
-																			size="sm"
-																			onClick={() => toggleApiKeyVisibility(config.id)}
-																			className="h-8 w-8 p-0"
-																		>
-																			{showApiKey[config.id] ? (
-																				<EyeOff className="h-3 w-3" />
-																			) : (
-																				<Eye className="h-3 w-3" />
+																		{/* Footer row */}
+																		<div className="flex items-center gap-3 pt-2">
+																			{config.created_at && (
+																				<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+																					<Clock className="h-3 w-3" />
+																					<span>
+																						{new Date(config.created_at).toLocaleDateString()}
+																					</span>
+																				</div>
 																			)}
-																		</Button>
+																			<div className="flex items-center gap-1.5 text-xs">
+																				<div className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
+																				<span className="text-emerald-600 dark:text-emerald-400 font-medium">
+																					Active
+																				</span>
+																			</div>
+																		</div>
 																	</div>
 																</div>

-																{config.api_base && (
-																	<div className="space-y-2">
-																		<Label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-																			API Base URL
-																		</Label>
-																		<code className="block rounded-md bg-muted px-3 py-2 text-xs font-mono break-all">
-																			{config.api_base}
-																		</code>
-																	</div>
-																)}
-															</div>
-
-															{/* Metadata */}
-															<div className="flex flex-wrap items-center gap-4 pt-4 border-t border-border/50">
-																{config.created_at && (
-																	<div className="flex items-center gap-2 text-xs text-muted-foreground">
-																		<Clock className="h-3 w-3" />
-																		<span>
-																			Created {new Date(config.created_at).toLocaleDateString()}
-																		</span>
-																	</div>
-																)}
-																<div className="flex items-center gap-2 text-xs">
-																	<div className="h-2 w-2 rounded-full bg-green-500"></div>
-																	<span className="text-green-600 font-medium">Active</span>
+																{/* Actions */}
+																<div className="flex items-center gap-1 shrink-0">
+																	<Button
+																		variant="ghost"
+																		size="sm"
+																		onClick={() => setEditingConfig(config)}
+																		className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+																	>
+																		<Edit3 className="h-4 w-4" />
+																	</Button>
+																	<Button
+																		variant="ghost"
+																		size="sm"
+																		onClick={() => handleDeleteClick(config)}
+																		className="h-8 w-8 p-0 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+																	>
+																		<Trash2 className="h-4 w-4" />
+																	</Button>
 																</div>
 															</div>
 														</div>
-
-														{/* Actions */}
-														<div className="flex flex-col gap-2 ml-6">
-															<Button
-																variant="outline"
-																size="sm"
-																onClick={() => setEditingConfig(config)}
-																className="h-8 w-8 p-0"
-															>
-																<Edit3 className="h-4 w-4" />
-															</Button>
-															<Button
-																variant="outline"
-																size="sm"
-																onClick={() => handleDelete(config.id)}
-																className="h-8 w-8 p-0 border-destructive/20 text-destructive hover:bg-destructive hover:text-destructive-foreground"
-															>
-																<Trash2 className="h-4 w-4" />
-															</Button>
-														</div>
 													</div>
 												</CardContent>
 											</Card>
@ -803,6 +783,46 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 					</form>
 				</DialogContent>
 			</Dialog>
+
+			{/* Delete Confirmation Dialog */}
+			<AlertDialog
+				open={!!configToDelete}
+				onOpenChange={(open) => !open && setConfigToDelete(null)}
+			>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle className="flex items-center gap-2">
+							<Trash2 className="h-5 w-5 text-destructive" />
+							Delete Configuration
+						</AlertDialogTitle>
+						<AlertDialogDescription>
+							Are you sure you want to delete{" "}
+							<span className="font-semibold text-foreground">{configToDelete?.name}</span>? This
+							action cannot be undone and will permanently remove this model configuration.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={handleConfirmDelete}
+							disabled={isDeleting}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							{isDeleting ? (
+								<>
+									<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+									Deleting...
+								</>
+							) : (
+								<>
+									<Trash2 className="mr-2 h-4 w-4" />
+									Delete
+								</>
+							)}
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
 		</div>
 	);
 }
--- a/surfsense_web/components/sidebar/AppSidebarProvider.tsx
+++ b/surfsense_web/components/sidebar/AppSidebarProvider.tsx
@ -193,6 +193,7 @@ export function AppSidebarProvider({
 	if (!isClient) {
 		return (
 			<AppSidebar
+				searchSpaceId={searchSpaceId}
 				navSecondary={navSecondary}
 				navMain={navMain}
 				RecentChats={[]}
@ -204,6 +205,7 @@ export function AppSidebarProvider({
 	return (
 		<>
 			<AppSidebar
+				searchSpaceId={searchSpaceId}
 				navSecondary={updatedNavSecondary}
 				navMain={navMain}
 				RecentChats={displayChats}
--- a/surfsense_web/components/sidebar/app-sidebar.tsx
+++ b/surfsense_web/components/sidebar/app-sidebar.tsx
@ -4,26 +4,116 @@ import {
 	AlertCircle,
 	BookOpen,
 	Cable,
+	ChevronsUpDown,
 	Database,
 	ExternalLink,
 	FileStack,
 	FileText,
 	Info,
+	LogOut,
 	type LucideIcon,
 	MessageCircleMore,
+	MoonIcon,
 	Podcast,
 	Settings2,
 	SquareLibrary,
 	SquareTerminal,
+	SunIcon,
 	Trash2,
 	Undo2,
+	UserPlus,
 	Users,
 } from "lucide-react";
-import Image from "next/image";
 import Link from "next/link";
-import { memo, useMemo } from "react";
+import { useRouter } from "next/navigation";
+import { useTheme } from "next-themes";
+import { memo, useEffect, useMemo, useState } from "react";
+
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useUser } from "@/hooks/use-user";
+
+/**
+ * Generates a consistent color based on a string (email)
+ */
+function stringToColor(str: string): string {
+	let hash = 0;
+	for (let i = 0; i < str.length; i++) {
+		hash = str.charCodeAt(i) + ((hash << 5) - hash);
+	}
+	const colors = [
+		"#6366f1", // indigo
+		"#8b5cf6", // violet
+		"#a855f7", // purple
+		"#d946ef", // fuchsia
+		"#ec4899", // pink
+		"#f43f5e", // rose
+		"#ef4444", // red
+		"#f97316", // orange
+		"#eab308", // yellow
+		"#84cc16", // lime
+		"#22c55e", // green
+		"#14b8a6", // teal
+		"#06b6d4", // cyan
+		"#0ea5e9", // sky
+		"#3b82f6", // blue
+	];
+	return colors[Math.abs(hash) % colors.length];
+}
+
+/**
+ * Gets initials from an email address
+ */
+function getInitials(email: string): string {
+	const name = email.split("@")[0];
+	const parts = name.split(/[._-]/);
+	if (parts.length >= 2) {
+		return (parts[0][0] + parts[1][0]).toUpperCase();
+	}
+	return name.slice(0, 2).toUpperCase();
+}
+
+/**
+ * Dynamic avatar component that generates an SVG based on email
+ */
+function UserAvatar({ email, size = 32 }: { email: string; size?: number }) {
+	const bgColor = stringToColor(email);
+	const initials = getInitials(email);
+
+	return (
+		<svg
+			width={size}
+			height={size}
+			viewBox="0 0 32 32"
+			className="rounded-lg"
+			role="img"
+			aria-labelledby="sidebar-avatar-title"
+		>
+			<title id="sidebar-avatar-title">Avatar for {email}</title>
+			<rect width="32" height="32" rx="6" fill={bgColor} />
+			<text
+				x="50%"
+				y="50%"
+				dominantBaseline="central"
+				textAnchor="middle"
+				fill="white"
+				fontSize="12"
+				fontWeight="600"
+				fontFamily="system-ui, sans-serif"
+			>
+				{initials}
+			</text>
+		</svg>
+	);
+}

-import { Logo } from "@/components/Logo";
 import { NavMain } from "@/components/sidebar/nav-main";
 import { NavProjects } from "@/components/sidebar/nav-projects";
 import { NavSecondary } from "@/components/sidebar/nav-secondary";
@ -122,6 +212,7 @@ const defaultData = {
 };

 interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
+	searchSpaceId?: string;
 	navMain?: {
 		title: string;
 		url: string;
@ -162,12 +253,22 @@ interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {

 // Memoized AppSidebar component for better performance
 export const AppSidebar = memo(function AppSidebar({
+	searchSpaceId,
 	navMain = defaultData.navMain,
 	navSecondary = defaultData.navSecondary,
 	RecentChats = defaultData.RecentChats,
 	pageUsage,
 	...props
 }: AppSidebarProps) {
+	const router = useRouter();
+	const { theme, setTheme } = useTheme();
+	const { user, loading: isLoadingUser } = useUser();
+	const [isClient, setIsClient] = useState(false);
+
+	useEffect(() => {
+		setIsClient(true);
+	}, []);
+
 	// Process navMain to resolve icon names to components
 	const processedNavMain = useMemo(() => {
 		return navMain.map((item) => ({
@ -194,28 +295,111 @@ export const AppSidebar = memo(function AppSidebar({
 		);
 	}, [RecentChats]);

+	// Get user display name from email
+	const userDisplayName = user?.email ? user.email.split("@")[0] : "User";
+	const userEmail = user?.email || (isLoadingUser ? "Loading..." : "Unknown");
+
+	const handleLogout = () => {
+		try {
+			if (typeof window !== "undefined") {
+				localStorage.removeItem("surfsense_bearer_token");
+				router.push("/");
+			}
+		} catch (error) {
+			console.error("Error during logout:", error);
+			router.push("/");
+		}
+	};
+
 	return (
 		<Sidebar variant="inset" collapsible="icon" aria-label="Main navigation" {...props}>
 			<SidebarHeader>
 				<SidebarMenu>
 					<SidebarMenuItem>
-						<SidebarMenuButton asChild size="lg">
-							<Link href="/" className="flex items-center gap-2 w-full">
-								<div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-									<Image
-										src="/icon-128.png"
-										alt="SurfSense logo"
-										width={32}
-										height={32}
-										className="rounded-lg"
-									/>
-								</div>
-								<div className="grid flex-1 text-left text-sm leading-tight">
-									<span className="truncate font-medium">SurfSense</span>
-									<span className="truncate text-xs">beta v0.0.8</span>
-								</div>
-							</Link>
-						</SidebarMenuButton>
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<SidebarMenuButton
+									size="lg"
+									className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+								>
+									<div className="flex aspect-square size-8 items-center justify-center">
+										{user?.email ? (
+											<UserAvatar email={user.email} size={32} />
+										) : (
+											<div className="size-8 rounded-lg bg-sidebar-primary animate-pulse" />
+										)}
+									</div>
+									<div className="grid flex-1 text-left text-sm leading-tight">
+										<span className="truncate font-medium">{userDisplayName}</span>
+										<span className="truncate text-xs text-muted-foreground">{userEmail}</span>
+									</div>
+									<ChevronsUpDown className="ml-auto size-4" />
+								</SidebarMenuButton>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent
+								className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+								side="bottom"
+								align="start"
+								sideOffset={4}
+							>
+								<DropdownMenuLabel className="p-0 font-normal">
+									<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+										<div className="flex aspect-square size-8 items-center justify-center">
+											{user?.email ? (
+												<UserAvatar email={user.email} size={32} />
+											) : (
+												<div className="size-8 rounded-lg bg-sidebar-primary animate-pulse" />
+											)}
+										</div>
+										<div className="grid flex-1 text-left text-sm leading-tight">
+											<span className="truncate font-medium">{userDisplayName}</span>
+											<span className="truncate text-xs text-muted-foreground">{userEmail}</span>
+										</div>
+									</div>
+								</DropdownMenuLabel>
+								<DropdownMenuSeparator />
+								<DropdownMenuGroup>
+									{searchSpaceId && (
+										<>
+											<DropdownMenuItem
+												onClick={() => router.push(`/dashboard/${searchSpaceId}/settings`)}
+											>
+												<Settings2 className="mr-2 h-4 w-4" />
+												Settings
+											</DropdownMenuItem>
+											<DropdownMenuItem
+												onClick={() => router.push(`/dashboard/${searchSpaceId}/team`)}
+											>
+												<UserPlus className="mr-2 h-4 w-4" />
+												Invite members
+											</DropdownMenuItem>
+										</>
+									)}
+									<DropdownMenuItem onClick={() => router.push("/dashboard")}>
+										<SquareLibrary className="mr-2 h-4 w-4" />
+										Switch workspace
+									</DropdownMenuItem>
+								</DropdownMenuGroup>
+								<DropdownMenuSeparator />
+								<DropdownMenuGroup>
+									{isClient && (
+										<DropdownMenuItem onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
+											{theme === "dark" ? (
+												<SunIcon className="mr-2 h-4 w-4" />
+											) : (
+												<MoonIcon className="mr-2 h-4 w-4" />
+											)}
+											{theme === "dark" ? "Light mode" : "Dark mode"}
+										</DropdownMenuItem>
+									)}
+								</DropdownMenuGroup>
+								<DropdownMenuSeparator />
+								<DropdownMenuItem onClick={handleLogout}>
+									<LogOut className="mr-2 h-4 w-4" />
+									Logout
+								</DropdownMenuItem>
+							</DropdownMenuContent>
+						</DropdownMenu>
 					</SidebarMenuItem>
 				</SidebarMenu>
 			</SidebarHeader>