From ed6470525a5db427a27ee0fb2431cc7d3e1b350f Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 29 Dec 2025 00:24:49 +0530
Subject: [PATCH] feat: Enhance mobile navbar animations and responsiveness
 across various components

---
 .../components/DocumentsTableShell.tsx        |  10 +-
 .../components/ProcessingIndicator.tsx        |   4 +-
 .../documents/(manage)/page.tsx               |   9 +-
 .../editor/[documentId]/page.tsx              |  46 +++--
 .../[search_space_id]/sources/add/page.tsx    |   4 +-
 .../dashboard/[search_space_id]/team/page.tsx |  28 ++-
 surfsense_web/app/dashboard/page.tsx          |  13 +-
 surfsense_web/app/globals.css                 |   1 +
 surfsense_web/components/BlockNoteEditor.tsx  |  49 +++++-
 surfsense_web/components/UserDropdown.tsx     |   9 +-
 surfsense_web/components/homepage/navbar.tsx  | 165 +++++++++---------
 .../components/json-metadata-viewer.tsx       |   8 +-
 .../new-chat/document-mention-picker.tsx      |   2 +-
 .../components/new-chat/model-selector.tsx    |   5 +-
 .../components/shared/llm-config-form.tsx     |  14 +-
 .../components/sidebar/all-chats-sidebar.tsx  |   7 +-
 .../components/sources/DocumentUploadTab.tsx  |   4 +-
 17 files changed, 245 insertions(+), 133 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
index c437b6cee..11e862944 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
@@ -83,8 +83,14 @@ export function DocumentsTableShell({
 
 	const toggleAll = (checked: boolean) => {
 		const next = new Set(selectedIds);
-		if (checked) sorted.forEach((d) => { next.add(d.id); });
-		else sorted.forEach((d) => { next.delete(d.id); });
+		if (checked)
+			sorted.forEach((d) => {
+				next.add(d.id);
+			});
+		else
+			sorted.forEach((d) => {
+				next.delete(d.id);
+			});
 		setSelectedIds(next);
 	};
 
diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/ProcessingIndicator.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/ProcessingIndicator.tsx
index cf7692a41..4ee966e1e 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/ProcessingIndicator.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/ProcessingIndicator.tsx
@@ -9,9 +9,7 @@ interface ProcessingIndicatorProps {
 	documentProcessorTasksCount: number;
 }
 
-export function ProcessingIndicator({ 
-	documentProcessorTasksCount 
-}: ProcessingIndicatorProps) {
+export function ProcessingIndicator({ documentProcessorTasksCount }: ProcessingIndicatorProps) {
 	const t = useTranslations("documents");
 
 	// Only show when there are document_processor tasks (uploads), not connector_indexing_task (periodic reindexing)
diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx
index 457a81a6f..e0b566d3d 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx
@@ -136,14 +136,13 @@ export default function DocumentsTable() {
 
 	// Set up polling for active tasks
 	const { summary } = useLogsSummary(searchSpaceId, 24, { refetchInterval: 5000 });
-	
+
 	// Filter active tasks to only include document_processor tasks (uploads via "add sources")
 	// Exclude connector_indexing_task tasks (periodic reindexing)
-	const documentProcessorTasks = summary?.active_tasks.filter(
-		task => task.source === "document_processor"
-	) || [];
+	const documentProcessorTasks =
+		summary?.active_tasks.filter((task) => task.source === "document_processor") || [];
 	const documentProcessorTasksCount = documentProcessorTasks.length;
-	
+
 	const activeTasksCount = summary?.active_tasks.length || 0;
 	const prevActiveTasksCount = useRef(activeTasksCount);
 
diff --git a/surfsense_web/app/dashboard/[search_space_id]/editor/[documentId]/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/editor/[documentId]/page.tsx
index 1f51d9975..239fdc5c1 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/editor/[documentId]/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/editor/[documentId]/page.tsx
@@ -21,7 +21,6 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
 import { notesApiService } from "@/lib/apis/notes-api.service";
 import { authenticatedFetch, getBearerToken, redirectToLogin } from "@/lib/auth-utils";
 
@@ -130,7 +129,7 @@ export default function EditorPage() {
 		setError(null);
 		setHasUnsavedChanges(false);
 		setLoading(true);
-	}, [documentId]);
+	}, []);
 
 	// Fetch document content - DIRECT CALL TO FASTAPI
 	// Skip fetching if this is a new note
@@ -427,30 +426,43 @@ export default function EditorPage() {
 			className="flex flex-col min-h-screen w-full"
 		>
 			{/* Toolbar */}
-			<div className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-4 border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 px-6">
-				<div className="flex items-center gap-3 flex-1 min-w-0">
-					<FileText className="h-5 w-5 text-muted-foreground shrink-0" />
+			<div className="sticky top-0 z-40 flex h-14 md:h-16 shrink-0 items-center gap-2 md:gap-4 bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 px-3 md:px-6">
+				<div className="flex items-center gap-2 md:gap-3 flex-1 min-w-0">
+					<FileText className="h-4 w-4 md:h-5 md:w-5 text-muted-foreground shrink-0" />
 					<div className="flex flex-col min-w-0">
-						<h1 className="text-lg font-semibold truncate">{displayTitle}</h1>
-						{hasUnsavedChanges && <p className="text-xs text-muted-foreground">Unsaved changes</p>}
+						<h1 className="text-base md:text-lg font-semibold truncate">{displayTitle}</h1>
+						{hasUnsavedChanges && (
+							<p className="text-[10px] md:text-xs text-muted-foreground">Unsaved changes</p>
+						)}
 					</div>
 				</div>
-				<Separator orientation="vertical" className="h-6" />
+
 				<div className="flex items-center gap-2">
-					<Button variant="outline" onClick={handleBack} disabled={saving} className="gap-2">
-						<ArrowLeft className="h-4 w-4" />
-						Back
+					<Button
+						variant="outline"
+						onClick={handleBack}
+						disabled={saving}
+						className="gap-1 md:gap-2 px-2 md:px-4 h-8 md:h-10"
+					>
+						<ArrowLeft className="h-3.5 w-3.5 md:h-4 md:w-4" />
+						<span className="text-xs md:text-sm">Back</span>
 					</Button>
-					<Button onClick={handleSave} disabled={saving} className="gap-2">
+					<Button
+						onClick={handleSave}
+						disabled={saving}
+						className="gap-1 md:gap-2 px-2 md:px-4 h-8 md:h-10"
+					>
 						{saving ? (
 							<>
-								<Loader2 className="h-4 w-4 animate-spin" />
-								{isNewNote ? "Creating..." : "Saving..."}
+								<Loader2 className="h-3.5 w-3.5 md:h-4 md:w-4 animate-spin" />
+								<span className="text-xs md:text-sm">
+									{isNewNote ? "Creating..." : "Saving..."}
+								</span>
 							</>
 						) : (
 							<>
-								<Save className="h-4 w-4" />
-								Save
+								<Save className="h-3.5 w-3.5 md:h-4 md:w-4" />
+								<span className="text-xs md:text-sm">Save</span>
 							</>
 						)}
 					</Button>
@@ -459,7 +471,7 @@ export default function EditorPage() {
 
 			{/* Editor Container */}
 			<div className="flex-1 min-h-0 overflow-hidden relative">
-				<div className="h-full w-full overflow-auto p-6">
+				<div className="h-full w-full overflow-auto p-3 md:p-6">
 					{error && (
 						<motion.div
 							initial={{ opacity: 0, y: -10 }}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx
index 7c8e85fe7..12b3cec78 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx
@@ -55,7 +55,9 @@ export default function AddSourcesPage() {
 						<Database className="h-6 w-6 sm:h-8 sm:w-8" />
 						Add Sources
 					</h1>
-					<p className="text-muted-foreground text-sm sm:text-lg">Add your sources to your search space</p>
+					<p className="text-muted-foreground text-sm sm:text-lg">
+						Add your sources to your search space
+					</p>
 				</div>
 
 				{/* Tabs */}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
index 8e48c4c3a..80f477001 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
@@ -346,13 +346,17 @@ export default function TeamManagementPage() {
 								</div>
 							</div>
 							<div className="flex items-center gap-2">
-								<Button onClick={handleRefresh} variant="outline" size="sm" className="gap-2 w-full md:w-auto">
+								<Button
+									onClick={handleRefresh}
+									variant="outline"
+									size="sm"
+									className="gap-2 w-full md:w-auto"
+								>
 									<RefreshCw className="h-4 w-4" />
 									Refresh
 								</Button>
 							</div>
 						</div>
-
 					</div>
 
 					{/* Summary Cards */}
@@ -418,21 +422,30 @@ export default function TeamManagementPage() {
 						<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
 							<div className="overflow-x-auto pb-1 md:pb-0">
 								<TabsList className="bg-muted/50 p-1 w-full md:w-fit grid grid-cols-3 md:flex">
-									<TabsTrigger value="members" className="gap-1.5 md:gap-2 data-[state=active]:bg-background whitespace-nowrap w-full text-xs md:text-sm flex-1">
+									<TabsTrigger
+										value="members"
+										className="gap-1.5 md:gap-2 data-[state=active]:bg-background whitespace-nowrap w-full text-xs md:text-sm flex-1"
+									>
 										<Users className="h-4 w-4 hidden md:block" />
 										<span>Members</span>
 										<Badge variant="secondary" className="ml-1 text-xs">
 											{members.length}
 										</Badge>
 									</TabsTrigger>
-									<TabsTrigger value="roles" className="gap-1.5 md:gap-2 data-[state=active]:bg-background whitespace-nowrap w-full text-xs md:text-sm flex-1">
+									<TabsTrigger
+										value="roles"
+										className="gap-1.5 md:gap-2 data-[state=active]:bg-background whitespace-nowrap w-full text-xs md:text-sm flex-1"
+									>
 										<Shield className="h-4 w-4 hidden md:block" />
 										<span>Roles</span>
 										<Badge variant="secondary" className="ml-1 text-xs">
 											{roles.length}
 										</Badge>
 									</TabsTrigger>
-									<TabsTrigger value="invites" className="gap-1.5 md:gap-2 data-[state=active]:bg-background whitespace-nowrap w-full text-xs md:text-sm flex-1">
+									<TabsTrigger
+										value="invites"
+										className="gap-1.5 md:gap-2 data-[state=active]:bg-background whitespace-nowrap w-full text-xs md:text-sm flex-1"
+									>
 										<LinkIcon className="h-4 w-4 hidden md:block" />
 										<span>Invites</span>
 										<Badge variant="secondary" className="ml-1 text-xs">
@@ -637,7 +650,10 @@ function MembersTab({
 												</SelectContent>
 											</Select>
 										) : (
-											<Badge variant="secondary" className="gap-1 text-[10px] md:text-xs py-0 md:py-0.5">
+											<Badge
+												variant="secondary"
+												className="gap-1 text-[10px] md:text-xs py-0 md:py-0.5"
+											>
 												<Shield className="h-2.5 w-2.5 md:h-3 md:w-3" />
 												{member.role?.name || "No role"}
 											</Badge>
diff --git a/surfsense_web/app/dashboard/page.tsx b/surfsense_web/app/dashboard/page.tsx
index 77a74a7e7..e241428d1 100644
--- a/surfsense_web/app/dashboard/page.tsx
+++ b/surfsense_web/app/dashboard/page.tsx
@@ -295,7 +295,10 @@ const DashboardPage = () => {
 														<div className="flex items-center gap-2">
 															<h3 className="font-medium text-base md:text-lg">{space.name}</h3>
 															{!space.is_owner && (
-																<Badge variant="secondary" className="text-[10px] md:text-xs font-normal">
+																<Badge
+																	variant="secondary"
+																	className="text-[10px] md:text-xs font-normal"
+																>
 																	{t("shared")}
 																</Badge>
 															)}
@@ -333,7 +336,9 @@ const DashboardPage = () => {
 									<Search className="h-8 w-8 text-muted-foreground" />
 								</div>
 								<h3 className="text-base md:text-lg font-medium mb-2">{t("no_spaces_found")}</h3>
-								<p className="text-xs md:text-sm text-muted-foreground mb-6">{t("create_first_space")}</p>
+								<p className="text-xs md:text-sm text-muted-foreground mb-6">
+									{t("create_first_space")}
+								</p>
 								<Link href="/dashboard/searchspaces">
 									<Button>
 										<Plus className="mr-2 h-4 w-4" />
@@ -358,7 +363,9 @@ const DashboardPage = () => {
 									<Link href="/dashboard/searchspaces" className="flex h-full">
 										<div className="flex flex-col items-center justify-center h-full w-full rounded-xl border border-dashed bg-muted/10 hover:border-primary/50 transition-colors">
 											<Plus className="h-8 w-8 md:h-10 md:w-10 mb-2 md:mb-3 text-muted-foreground" />
-											<span className="text-xs md:text-sm font-medium">{t("add_new_search_space")}</span>
+											<span className="text-xs md:text-sm font-medium">
+												{t("add_new_search_space")}
+											</span>
 										</div>
 									</Link>
 								</Tilt>
diff --git a/surfsense_web/app/globals.css b/surfsense_web/app/globals.css
index 4f4ab6de1..c78c074fb 100644
--- a/surfsense_web/app/globals.css
+++ b/surfsense_web/app/globals.css
@@ -159,3 +159,4 @@ button {
 
 @source '../node_modules/@llamaindex/chat-ui/**/*.{ts,tsx}';
 @source '../node_modules/streamdown/dist/*.js';
+
diff --git a/surfsense_web/components/BlockNoteEditor.tsx b/surfsense_web/components/BlockNoteEditor.tsx
index dc033bc5a..440c63625 100644
--- a/surfsense_web/components/BlockNoteEditor.tsx
+++ b/surfsense_web/components/BlockNoteEditor.tsx
@@ -162,5 +162,52 @@ export default function BlockNoteEditor({
 	}, [resolvedTheme]);
 
 	// Renders the editor instance
-	return <BlockNoteView editor={editor} theme={blockNoteTheme} />;
+	return (
+		<div className="bn-container">
+			<style>{`
+				@media (max-width: 640px) {
+					.bn-container .bn-editor {
+						padding-inline: 12px !important;
+					}
+
+					/* Heading Level 1 (Title) */
+					.bn-container [data-content-type="heading"][data-level="1"] {
+						font-size: 1.75rem !important;
+						line-height: 1.2 !important;
+						margin-top: 1rem !important;
+						margin-bottom: 0.5rem !important;
+					}
+
+					/* Heading Level 2 */
+					.bn-container [data-content-type="heading"][data-level="2"] {
+						font-size: 1.5rem !important;
+						line-height: 1.2 !important;
+						margin-top: 0.875rem !important;
+						margin-bottom: 0.375rem !important;
+					}
+
+					/* Heading Level 3 */
+					.bn-container [data-content-type="heading"][data-level="3"] {
+						font-size: 1.25rem !important;
+						line-height: 1.2 !important;
+						margin-top: 0.75rem !important;
+						margin-bottom: 0.25rem !important;
+					}
+
+					/* Paragraphs and regular content */
+					.bn-container .bn-block-content {
+						font-size: 0.9375rem !important;
+						line-height: 1.5 !important;
+					}
+
+					/* Adjust lists */
+					.bn-container ul,
+					.bn-container ol {
+						padding-left: 1.25rem !important;
+					}
+				}
+			`}</style>
+			<BlockNoteView editor={editor} theme={blockNoteTheme} />
+		</div>
+	);
 }
diff --git a/surfsense_web/components/UserDropdown.tsx b/surfsense_web/components/UserDropdown.tsx
index baa939d8b..ffdb9a31b 100644
--- a/surfsense_web/components/UserDropdown.tsx
+++ b/surfsense_web/components/UserDropdown.tsx
@@ -55,12 +55,17 @@ export function UserDropdown({
 				<DropdownMenuLabel className="font-normal p-2 md:p-3">
 					<div className="flex flex-col space-y-1">
 						<p className="text-xs md:text-sm font-medium leading-none">{user.name}</p>
-						<p className="text-[10px] md:text-xs leading-none text-muted-foreground">{user.email}</p>
+						<p className="text-[10px] md:text-xs leading-none text-muted-foreground">
+							{user.email}
+						</p>
 					</div>
 				</DropdownMenuLabel>
 				<DropdownMenuSeparator />
 				<DropdownMenuGroup>
-					<DropdownMenuItem onClick={() => router.push(`/dashboard/api-key`)} className="text-xs md:text-sm">
+					<DropdownMenuItem
+						onClick={() => router.push(`/dashboard/api-key`)}
+						className="text-xs md:text-sm"
+					>
 						<BadgeCheck className="mr-2 h-3.5 w-3.5 md:h-4 md:w-4" />
 						API Key
 					</DropdownMenuItem>
diff --git a/surfsense_web/components/homepage/navbar.tsx b/surfsense_web/components/homepage/navbar.tsx
index 8d5b63f7b..0b060e548 100644
--- a/surfsense_web/components/homepage/navbar.tsx
+++ b/surfsense_web/components/homepage/navbar.tsx
@@ -2,7 +2,7 @@
 import { IconBrandDiscord, IconBrandGithub, IconMenu2, IconX } from "@tabler/icons-react";
 import { AnimatePresence, motion } from "motion/react";
 import Link from "next/link";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Logo } from "@/components/Logo";
 import { ThemeTogglerComponent } from "@/components/theme/theme-toggle";
 import { useGithubStars } from "@/hooks/use-github-stars";
@@ -118,89 +118,88 @@ const MobileNav = ({ navItems, isScrolled }: any) => {
 	const { compactFormat: githubStars, loading: loadingGithubStars } = useGithubStars();
 
 	return (
-		<>
-			<motion.div
-				animate={{ borderRadius: open ? "4px" : "2rem" }}
-				key={String(open)}
-				className={cn(
-					"mx-auto flex w-full max-w-[calc(100vw-2rem)] flex-col items-center justify-between px-4 py-2 lg:hidden transition-all duration-300",
-					isScrolled
-						? "bg-white/80 backdrop-blur-md border border-white/20 shadow-lg dark:bg-neutral-950/80 dark:border-neutral-800/50"
-						: "bg-transparent border border-transparent"
-				)}
-			>
-				<div className="flex w-full flex-row items-center justify-between">
-					<div className="flex flex-row items-center gap-2">
-						<Logo className="h-8 w-8 rounded-md" />
-						<span className="dark:text-white/90 text-gray-800 text-lg font-bold">SurfSense</span>
-					</div>
-					<button
-						type="button"
-						onClick={() => setOpen(!open)}
-						className="relative z-50 flex items-center justify-center p-2 -mr-2 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors touch-manipulation"
-						aria-label={open ? "Close menu" : "Open menu"}
-					>
-						{open ? (
-							<IconX className="h-6 w-6 text-black dark:text-white" />
-						) : (
-							<IconMenu2 className="h-6 w-6 text-black dark:text-white" />
-						)}
-					</button>
+		<motion.div
+			animate={{ borderRadius: open ? "4px" : "2rem" }}
+			key={String(open)}
+			className={cn(
+				"relative mx-auto flex w-full max-w-[calc(100vw-2rem)] flex-col items-center justify-between px-4 py-2 lg:hidden transition-all duration-300",
+				isScrolled
+					? "bg-white/80 backdrop-blur-md border border-white/20 shadow-lg dark:bg-neutral-950/80 dark:border-neutral-800/50"
+					: "bg-transparent border border-transparent"
+			)}
+		>
+			<div className="flex w-full flex-row items-center justify-between">
+				<div className="flex flex-row items-center gap-2">
+					<Logo className="h-8 w-8 rounded-md" />
+					<span className="dark:text-white/90 text-gray-800 text-lg font-bold">SurfSense</span>
 				</div>
-
-				<AnimatePresence>
-					{open && (
-						<motion.div
-							initial={{ opacity: 0 }}
-							animate={{ opacity: 1 }}
-							exit={{ opacity: 0 }}
-							className="absolute inset-x-0 top-16 z-20 flex w-full flex-col items-start justify-start gap-4 rounded-lg bg-white/80 backdrop-blur-md border border-white/20 shadow-lg px-4 py-8 dark:bg-neutral-950/80 dark:border-neutral-800/50"
-						>
-							{navItems.map((navItem: any, idx: number) => (
-								<Link
-									key={`link=${idx}`}
-									href={navItem.link}
-									className="relative text-neutral-600 dark:text-neutral-300"
-								>
-									<motion.span className="block">{navItem.name} </motion.span>
-								</Link>
-							))}
-							<div className="flex w-full items-center gap-2 pt-2">
-								<Link
-									href="https://discord.gg/ejRNvftDp9"
-									target="_blank"
-									rel="noopener noreferrer"
-									className="flex items-center justify-center rounded-lg p-2 hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors touch-manipulation"
-								>
-									<IconBrandDiscord className="h-5 w-5 text-neutral-600 dark:text-neutral-300" />
-								</Link>
-								<Link
-									href="https://github.com/MODSetter/SurfSense"
-									target="_blank"
-									rel="noopener noreferrer"
-									className="flex items-center gap-1.5 rounded-lg px-3 py-2 hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors touch-manipulation"
-								>
-									<IconBrandGithub className="h-5 w-5 text-neutral-600 dark:text-neutral-300" />
-									{loadingGithubStars ? (
-										<div className="w-6 h-5 dark:bg-neutral-800 animate-pulse"></div>
-									) : (
-										<span className="text-sm font-medium text-neutral-600 dark:text-neutral-300">
-											{githubStars}
-										</span>
-									)}
-								</Link>
-								<ThemeTogglerComponent />
-							</div>
-							<Link
-								href="/login"
-								className="w-full rounded-lg bg-black px-8 py-2 font-medium text-white shadow-[0px_-2px_0px_0px_rgba(255,255,255,0.4)_inset] dark:bg-white dark:text-black text-center touch-manipulation"
-							>
-								Sign In
-							</Link>
-						</motion.div>
+				<button
+					type="button"
+					onClick={() => setOpen(!open)}
+					className="relative z-50 flex items-center justify-center p-2 -mr-2 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors touch-manipulation"
+					aria-label={open ? "Close menu" : "Open menu"}
+				>
+					{open ? (
+						<IconX className="h-6 w-6 text-black dark:text-white" />
+					) : (
+						<IconMenu2 className="h-6 w-6 text-black dark:text-white" />
 					)}
-				</AnimatePresence>
-			</motion.div>
-		</>
+				</button>
+			</div>
+
+			<AnimatePresence>
+				{open && (
+					<motion.div
+						initial={{ opacity: 0, y: -10 }}
+						animate={{ opacity: 1, y: 0 }}
+						exit={{ opacity: 0, y: -10 }}
+						transition={{ duration: 0.2, ease: "easeOut" }}
+						className="absolute inset-x-0 top-full mt-1 z-20 flex w-full flex-col items-start justify-start gap-4 rounded-xl bg-white/90 backdrop-blur-xl border border-white/20 shadow-2xl px-4 py-6 dark:bg-neutral-950/90 dark:border-neutral-800/50"
+					>
+						{navItems.map((navItem: any, idx: number) => (
+							<Link
+								key={`link=${idx}`}
+								href={navItem.link}
+								className="relative text-neutral-600 dark:text-neutral-300"
+							>
+								<motion.span className="block">{navItem.name} </motion.span>
+							</Link>
+						))}
+						<div className="flex w-full items-center gap-2 pt-2">
+							<Link
+								href="https://discord.gg/ejRNvftDp9"
+								target="_blank"
+								rel="noopener noreferrer"
+								className="flex items-center justify-center rounded-lg p-2 hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors touch-manipulation"
+							>
+								<IconBrandDiscord className="h-5 w-5 text-neutral-600 dark:text-neutral-300" />
+							</Link>
+							<Link
+								href="https://github.com/MODSetter/SurfSense"
+								target="_blank"
+								rel="noopener noreferrer"
+								className="flex items-center gap-1.5 rounded-lg px-3 py-2 hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors touch-manipulation"
+							>
+								<IconBrandGithub className="h-5 w-5 text-neutral-600 dark:text-neutral-300" />
+								{loadingGithubStars ? (
+									<div className="w-6 h-5 dark:bg-neutral-800 animate-pulse"></div>
+								) : (
+									<span className="text-sm font-medium text-neutral-600 dark:text-neutral-300">
+										{githubStars}
+									</span>
+								)}
+							</Link>
+							<ThemeTogglerComponent />
+						</div>
+						<Link
+							href="/login"
+							className="w-full rounded-lg bg-black px-8 py-2 font-medium text-white shadow-[0px_-2px_0px_0px_rgba(255,255,255,0.4)_inset] dark:bg-white dark:text-black text-center touch-manipulation"
+						>
+							Sign In
+						</Link>
+					</motion.div>
+				)}
+			</AnimatePresence>
+		</motion.div>
 	);
 };
diff --git a/surfsense_web/components/json-metadata-viewer.tsx b/surfsense_web/components/json-metadata-viewer.tsx
index 338c0273b..982d16786 100644
--- a/surfsense_web/components/json-metadata-viewer.tsx
+++ b/surfsense_web/components/json-metadata-viewer.tsx
@@ -49,7 +49,9 @@ export function JsonMetadataViewer({
 			<Dialog open={open} onOpenChange={onOpenChange}>
 				<DialogContent className="sm:max-w-4xl max-w-[95vw] w-full max-h-[80vh] overflow-y-auto p-4 sm:p-6">
 					<DialogHeader>
-						<DialogTitle className="text-base sm:text-lg truncate pr-6">{title} - Metadata</DialogTitle>
+						<DialogTitle className="text-base sm:text-lg truncate pr-6">
+							{title} - Metadata
+						</DialogTitle>
 					</DialogHeader>
 					<div className="mt-2 sm:mt-4 p-2 sm:p-4 bg-muted/30 rounded-md text-xs sm:text-sm">
 						<JsonView data={jsonData} style={defaultStyles} />
@@ -72,7 +74,9 @@ export function JsonMetadataViewer({
 			</DialogTrigger>
 			<DialogContent className="sm:max-w-4xl max-w-[95vw] w-full max-h-[80vh] overflow-y-auto p-4 sm:p-6">
 				<DialogHeader>
-					<DialogTitle className="text-base sm:text-lg truncate pr-6">{title} - Metadata</DialogTitle>
+					<DialogTitle className="text-base sm:text-lg truncate pr-6">
+						{title} - Metadata
+					</DialogTitle>
 				</DialogHeader>
 				<div className="mt-2 sm:mt-4 p-2 sm:p-4 bg-muted/30 rounded-md text-xs sm:text-sm">
 					<JsonView data={jsonData} style={defaultStyles} />
diff --git a/surfsense_web/components/new-chat/document-mention-picker.tsx b/surfsense_web/components/new-chat/document-mention-picker.tsx
index f250025c4..2d5d46267 100644
--- a/surfsense_web/components/new-chat/document-mention-picker.tsx
+++ b/surfsense_web/components/new-chat/document-mention-picker.tsx
@@ -185,7 +185,7 @@ export const DocumentMentionPicker = forwardRef<
 			tabIndex={-1}
 		>
 			{/* Document List - Shows max 3 items on mobile, 5 items on desktop */}
-		<div className="max-h-[108px] sm:max-h-[180px] overflow-y-auto">
+			<div className="max-h-[108px] sm:max-h-[180px] overflow-y-auto">
 				{actualLoading ? (
 					<div className="flex items-center justify-center py-4">
 						<div className="animate-spin h-5 w-5 border-2 border-primary border-t-transparent rounded-full" />
diff --git a/surfsense_web/components/new-chat/model-selector.tsx b/surfsense_web/components/new-chat/model-selector.tsx
index f9ffe267c..1d223a411 100644
--- a/surfsense_web/components/new-chat/model-selector.tsx
+++ b/surfsense_web/components/new-chat/model-selector.tsx
@@ -192,7 +192,10 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
 						<>
 							{getProviderIcon(currentConfig.provider)}
 							<span className="max-w-[80px] md:max-w-[150px] truncate">{currentConfig.name}</span>
-							<Badge variant="secondary" className="ml-0.5 md:ml-1 text-[9px] md:text-[10px] px-1 md:px-1.5 py-0 h-3.5 md:h-4 bg-muted/80">
+							<Badge
+								variant="secondary"
+								className="ml-0.5 md:ml-1 text-[9px] md:text-[10px] px-1 md:px-1.5 py-0 h-3.5 md:h-4 bg-muted/80"
+							>
 								{currentConfig.model_name.split("/").pop()?.slice(0, 10) ||
 									currentConfig.model_name.slice(0, 10)}
 							</Badge>
diff --git a/surfsense_web/components/shared/llm-config-form.tsx b/surfsense_web/components/shared/llm-config-form.tsx
index 7d450bfc9..46acb80e6 100644
--- a/surfsense_web/components/shared/llm-config-form.tsx
+++ b/surfsense_web/components/shared/llm-config-form.tsx
@@ -542,11 +542,21 @@ export function LLMConfigForm({
 					)}
 				>
 					{onCancel && (
-						<Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting} className="text-xs sm:text-sm h-9 sm:h-10">
+						<Button
+							type="button"
+							variant="outline"
+							onClick={onCancel}
+							disabled={isSubmitting}
+							className="text-xs sm:text-sm h-9 sm:h-10"
+						>
 							Cancel
 						</Button>
 					)}
-					<Button type="submit" disabled={isSubmitting} className="gap-2 min-w-[140px] sm:min-w-[160px] text-xs sm:text-sm h-9 sm:h-10">
+					<Button
+						type="submit"
+						disabled={isSubmitting}
+						className="gap-2 min-w-[140px] sm:min-w-[160px] text-xs sm:text-sm h-9 sm:h-10"
+					>
 						{isSubmitting ? (
 							<>
 								<Loader2 className="h-3.5 w-3.5 sm:h-4 sm:w-4 animate-spin" />
diff --git a/surfsense_web/components/sidebar/all-chats-sidebar.tsx b/surfsense_web/components/sidebar/all-chats-sidebar.tsx
index bb1ae2f15..02459f2b9 100644
--- a/surfsense_web/components/sidebar/all-chats-sidebar.tsx
+++ b/surfsense_web/components/sidebar/all-chats-sidebar.tsx
@@ -45,7 +45,12 @@ interface AllChatsSidebarProps {
 	onCloseMobileSidebar?: () => void;
 }
 
-export function AllChatsSidebar({ open, onOpenChange, searchSpaceId, onCloseMobileSidebar }: AllChatsSidebarProps) {
+export function AllChatsSidebar({
+	open,
+	onOpenChange,
+	searchSpaceId,
+	onCloseMobileSidebar,
+}: AllChatsSidebarProps) {
 	const t = useTranslations("sidebar");
 	const router = useRouter();
 	const params = useParams();
diff --git a/surfsense_web/components/sources/DocumentUploadTab.tsx b/surfsense_web/components/sources/DocumentUploadTab.tsx
index afcc100e5..546bf66df 100644
--- a/surfsense_web/components/sources/DocumentUploadTab.tsx
+++ b/surfsense_web/components/sources/DocumentUploadTab.tsx
@@ -315,9 +315,7 @@ export function DocumentUploadTab({ searchSpaceId }: DocumentUploadTabProps) {
 												<div className="flex items-center gap-3 flex-1 min-w-0">
 													<FileType className="h-5 w-5 text-muted-foreground flex-shrink-0" />
 													<div className="flex-1 min-w-0">
-														<p className="text-sm sm:text-base font-medium truncate">
-															{file.name}
-														</p>
+														<p className="text-sm sm:text-base font-medium truncate">{file.name}</p>
 														<div className="flex items-center gap-2 mt-1">
 															<Badge variant="secondary" className="text-xs">
 																{formatFileSize(file.size)}