feat: Enhance mobile navbar animations and responsiveness across various components

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);
 	};
 

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)

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);
 

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 }}

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 */}

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>

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>