From 6231c08b8bdc6fb78f576854db755d4eecfcf1c3 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 28 Apr 2026 20:21:18 +0530
Subject: [PATCH] refactor(sidebar): standardize padding, font sizes, and icon
 dimensions across sidebar components for improved consistency

---
 .../announcements/AnnouncementsEmptyState.tsx |  10 +-
 .../ui/sidebar/AllPrivateChatsSidebar.tsx     | 183 ++++++++++--------
 .../ui/sidebar/AllSharedChatsSidebar.tsx      | 183 ++++++++++--------
 .../ui/sidebar/AnnouncementsSidebar.tsx       |   6 +-
 .../layout/ui/sidebar/ChatListItem.tsx        |   2 +-
 .../layout/ui/sidebar/InboxSidebar.tsx        |  38 ++--
 .../layout/ui/sidebar/NavSection.tsx          |   2 +-
 .../components/layout/ui/sidebar/Sidebar.tsx  |   6 +-
 .../layout/ui/sidebar/SidebarButton.tsx       |   6 +-
 .../layout/ui/sidebar/SidebarHeader.tsx       |   6 +-
 .../layout/ui/sidebar/SidebarSection.tsx      |   4 +-
 11 files changed, 234 insertions(+), 212 deletions(-)

diff --git a/surfsense_web/components/announcements/AnnouncementsEmptyState.tsx b/surfsense_web/components/announcements/AnnouncementsEmptyState.tsx
index 9ed1ea45d..329a284db 100644
--- a/surfsense_web/components/announcements/AnnouncementsEmptyState.tsx
+++ b/surfsense_web/components/announcements/AnnouncementsEmptyState.tsx
@@ -2,12 +2,12 @@ import { BellOff } from "lucide-react";
 
 export function AnnouncementsEmptyState() {
 	return (
-		<div className="flex flex-col items-center justify-center py-16 text-center">
-			<div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
-				<BellOff className="h-7 w-7 text-muted-foreground" />
+		<div className="flex flex-col items-center justify-center py-12 text-center">
+			<div className="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+				<BellOff className="h-5 w-5 text-muted-foreground" />
 			</div>
-			<h3 className="text-lg font-semibold">No announcements</h3>
-			<p className="mt-1 text-sm text-muted-foreground max-w-sm">
+			<h3 className="text-sm font-semibold">No announcements</h3>
+			<p className="mt-1 max-w-xs text-xs text-muted-foreground">
 				You're all caught up! New announcements will appear here.
 			</p>
 		</div>
diff --git a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
index ab5213db2..8630c5a9b 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
@@ -252,7 +252,7 @@ export function AllPrivateChatsSidebarContent({
 
 	return (
 		<>
-			<div className="shrink-0 p-4 pb-2 space-y-3">
+			<div className="shrink-0 p-3 pb-1.5 space-y-2">
 				<div className="flex items-center gap-2">
 					{isMobile && (
 						<Button
@@ -265,24 +265,24 @@ export function AllPrivateChatsSidebarContent({
 							<span className="sr-only">{t("close") || "Close"}</span>
 						</Button>
 					)}
-					<User className="h-5 w-5 text-primary" />
-					<h2 className="text-lg font-semibold">{t("chats") || "Private Chats"}</h2>
+					<User className="h-4 w-4 text-primary" />
+					<h2 className="text-md font-semibold">{t("chats") || "Private Chats"}</h2>
 				</div>
 
 				<div className="relative">
-					<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+					<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
 					<Input
 						type="text"
 						placeholder={t("search_chats") || "Search chats..."}
 						value={searchQuery}
 						onChange={(e) => setSearchQuery(e.target.value)}
-						className="pl-9 pr-8 h-9"
+						className="h-8 pl-8 pr-7 text-sm"
 					/>
 					{searchQuery && (
 						<Button
 							variant="ghost"
 							size="icon"
-							className="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6"
+							className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2"
 							onClick={handleClearSearch}
 						>
 							<X className="h-3.5 w-3.5" />
@@ -296,23 +296,23 @@ export function AllPrivateChatsSidebarContent({
 				<Tabs
 					value={showArchived ? "archived" : "active"}
 					onValueChange={(value) => setShowArchived(value === "archived")}
-					className="shrink-0 mx-4 mt-2"
+					className="shrink-0 mx-3 mt-1.5"
 				>
 					<TabsList stretch showBottomBorder size="sm">
 						<TabsTrigger value="active">
 							<span className="inline-flex items-center gap-1.5">
-								<MessageCircleMore className="h-4 w-4" />
+								<MessageCircleMore className="h-3.5 w-3.5" />
 								<span>Active</span>
-								<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium">
+								<span className="inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-full bg-primary/20 px-1 text-[10px] font-medium text-muted-foreground">
 									{activeCount}
 								</span>
 							</span>
 						</TabsTrigger>
 						<TabsTrigger value="archived">
 							<span className="inline-flex items-center gap-1.5">
-								<ArchiveIcon className="h-4 w-4" />
+								<ArchiveIcon className="h-3.5 w-3.5" />
 								<span>Archived</span>
-								<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium">
+								<span className="inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-full bg-primary/20 px-1 text-[10px] font-medium text-muted-foreground">
 									{archivedCount}
 								</span>
 							</span>
@@ -321,7 +321,7 @@ export function AllPrivateChatsSidebarContent({
 				</Tabs>
 			)}
 
-			<div className="flex-1 overflow-y-auto overflow-x-hidden p-2">
+			<div className="flex-1 overflow-y-auto overflow-x-hidden p-1.5">
 				{isLoading ? (
 					<div className="space-y-1">
 						{[75, 90, 55, 80, 65, 85].map((titleWidth) => (
@@ -347,16 +347,7 @@ export function AllPrivateChatsSidebarContent({
 							const isActive = currentChatId === thread.id;
 
 							return (
-								<div
-									key={thread.id}
-									className={cn(
-										"sidebar-item-lazy group flex items-center gap-2 rounded-md px-2 py-1.5 text-sm",
-										"hover:bg-accent hover:text-accent-foreground",
-										"transition-colors cursor-pointer",
-										isActive && "bg-accent text-accent-foreground",
-										isBusy && "opacity-50 pointer-events-none"
-									)}
-								>
+								<div key={thread.id} className="group/item relative w-full">
 									{isMobile ? (
 										<button
 											type="button"
@@ -371,7 +362,13 @@ export function AllPrivateChatsSidebarContent({
 											onTouchEnd={longPressHandlers.onTouchEnd}
 											onTouchMove={longPressHandlers.onTouchMove}
 											disabled={isBusy}
-											className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
+											className={cn(
+												"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-xs text-left",
+												"group-hover/item:bg-accent group-hover/item:text-accent-foreground",
+												"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+												isActive && "bg-accent text-accent-foreground",
+												isBusy && "opacity-50 pointer-events-none"
+											)}
 										>
 											<span className="truncate">{thread.title || "New Chat"}</span>
 										</button>
@@ -382,7 +379,13 @@ export function AllPrivateChatsSidebarContent({
 													type="button"
 													onClick={() => handleThreadClick(thread.id)}
 													disabled={isBusy}
-													className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
+													className={cn(
+														"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-xs text-left",
+														"group-hover/item:bg-accent group-hover/item:text-accent-foreground",
+														"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+														isActive && "bg-accent text-accent-foreground",
+														isBusy && "opacity-50 pointer-events-none"
+													)}
 												>
 													<span className="truncate">{thread.title || "New Chat"}</span>
 												</button>
@@ -396,89 +399,97 @@ export function AllPrivateChatsSidebarContent({
 										</Tooltip>
 									)}
 
-									<DropdownMenu
-										open={openDropdownId === thread.id}
-										onOpenChange={(isOpen) => setOpenDropdownId(isOpen ? thread.id : null)}
+									<div
+										className={cn(
+											"pointer-events-none absolute right-0 top-0 bottom-0 flex items-center rounded-r-md pl-6 pr-1",
+											isActive
+												? "bg-gradient-to-l from-accent from-60% to-transparent"
+												: "bg-gradient-to-l from-sidebar from-60% to-transparent group-hover/item:from-accent",
+											isMobile
+												? "opacity-0"
+												: openDropdownId === thread.id
+													? "opacity-100"
+													: "opacity-0 group-hover/item:opacity-100"
+										)}
 									>
-										<DropdownMenuTrigger asChild>
-											<Button
-												variant="ghost"
-												size="icon"
-												className={cn(
-													"h-6 w-6 shrink-0 hover:bg-transparent",
-													isMobile
-														? "opacity-0 pointer-events-none absolute"
-														: openDropdownId === thread.id
-															? "opacity-100"
-															: "md:opacity-0 md:group-hover:opacity-100 md:focus:opacity-100",
-													openDropdownId === thread.id && "bg-accent hover:bg-accent",
-													"transition-opacity"
-												)}
-												disabled={isBusy}
-											>
-												{isDeleting ? (
-													<Spinner size="xs" />
-												) : (
-													<MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />
-												)}
-												<span className="sr-only">{t("more_options") || "More options"}</span>
-											</Button>
-										</DropdownMenuTrigger>
-										<DropdownMenuContent align="end" className="w-40 z-80">
-											{!thread.archived && (
-												<DropdownMenuItem
-													onClick={() => handleStartRename(thread.id, thread.title || "New Chat")}
+										<DropdownMenu
+											open={openDropdownId === thread.id}
+											onOpenChange={(isOpen) => setOpenDropdownId(isOpen ? thread.id : null)}
+										>
+											<DropdownMenuTrigger asChild>
+												<Button
+													variant="ghost"
+													size="icon"
+													className={cn(
+														"pointer-events-auto h-6 w-6 hover:bg-transparent",
+														openDropdownId === thread.id && "bg-accent hover:bg-accent"
+													)}
+													disabled={isBusy}
 												>
-													<Pencil className="mr-2 h-4 w-4" />
-													<span>{t("rename") || "Rename"}</span>
-												</DropdownMenuItem>
-											)}
-											<DropdownMenuItem
-												onClick={() => handleToggleArchive(thread.id, thread.archived)}
-												disabled={isArchiving}
-											>
-												{thread.archived ? (
-													<>
-														<RotateCcwIcon className="mr-2 h-4 w-4" />
-														<span>{t("unarchive") || "Restore"}</span>
-													</>
-												) : (
-													<>
-														<ArchiveIcon className="mr-2 h-4 w-4" />
-														<span>{t("archive") || "Archive"}</span>
-													</>
+													{isDeleting ? (
+														<Spinner size="xs" />
+													) : (
+														<MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />
+													)}
+													<span className="sr-only">{t("more_options") || "More options"}</span>
+												</Button>
+											</DropdownMenuTrigger>
+											<DropdownMenuContent align="end" className="w-40 z-80">
+												{!thread.archived && (
+													<DropdownMenuItem
+														onClick={() => handleStartRename(thread.id, thread.title || "New Chat")}
+													>
+														<Pencil className="mr-2 h-4 w-4" />
+														<span>{t("rename") || "Rename"}</span>
+													</DropdownMenuItem>
 												)}
-											</DropdownMenuItem>
-											<DropdownMenuItem onClick={() => handleDeleteThread(thread.id)}>
-												<Trash2 className="mr-2 h-4 w-4" />
-												<span>{t("delete") || "Delete"}</span>
-											</DropdownMenuItem>
-										</DropdownMenuContent>
-									</DropdownMenu>
+												<DropdownMenuItem
+													onClick={() => handleToggleArchive(thread.id, thread.archived)}
+													disabled={isArchiving}
+												>
+													{thread.archived ? (
+														<>
+															<RotateCcwIcon className="mr-2 h-4 w-4" />
+															<span>{t("unarchive") || "Restore"}</span>
+														</>
+													) : (
+														<>
+															<ArchiveIcon className="mr-2 h-4 w-4" />
+															<span>{t("archive") || "Archive"}</span>
+														</>
+													)}
+												</DropdownMenuItem>
+												<DropdownMenuItem onClick={() => handleDeleteThread(thread.id)}>
+													<Trash2 className="mr-2 h-4 w-4" />
+													<span>{t("delete") || "Delete"}</span>
+												</DropdownMenuItem>
+											</DropdownMenuContent>
+										</DropdownMenu>
+									</div>
 								</div>
 							);
 						})}
 					</div>
 				) : isSearchMode ? (
 					<div className="text-center py-8">
-						<Search className="h-12 w-12 mx-auto text-muted-foreground mb-3" />
-						<p className="text-sm text-muted-foreground">
+						<Search className="mx-auto mb-2.5 h-10 w-10 text-muted-foreground" />
+						<p className="text-xs text-muted-foreground">
 							{t("no_chats_found") || "No chats found"}
 						</p>
-						<p className="text-xs text-muted-foreground/70 mt-1">
+						<p className="mt-1 text-[11px] text-muted-foreground/70">
 							{t("try_different_search") || "Try a different search term"}
 						</p>
 					</div>
 				) : (
 					<div className="text-center py-8">
-						<User className="h-12 w-12 mx-auto text-muted-foreground mb-3" />
-						<p className="text-sm text-muted-foreground">
+						<User className="mx-auto mb-2.5 h-10 w-10 text-muted-foreground" />
+						<p className="text-xs text-muted-foreground">
 							{showArchived
 								? t("no_archived_chats") || "No archived chats"
 								: t("no_chats") || "No private chats"}
 						</p>
 						{!showArchived && (
-							<p className="text-xs text-muted-foreground/70 mt-1">
+							<p className="mt-1 text-[11px] text-muted-foreground/70">
 								{t("start_new_chat_hint") || "Start a new chat from the chat page"}
 							</p>
 						)}
diff --git a/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
index ab1072459..26556b0bd 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
@@ -251,7 +251,7 @@ export function AllSharedChatsSidebarContent({
 
 	return (
 		<>
-			<div className="shrink-0 p-4 pb-2 space-y-3">
+			<div className="shrink-0 p-3 pb-1.5 space-y-2">
 				<div className="flex items-center gap-2">
 					{isMobile && (
 						<Button
@@ -264,24 +264,24 @@ export function AllSharedChatsSidebarContent({
 							<span className="sr-only">{t("close") || "Close"}</span>
 						</Button>
 					)}
-					<Users className="h-5 w-5 text-primary" />
-					<h2 className="text-lg font-semibold">{t("shared_chats") || "Shared Chats"}</h2>
+					<Users className="h-4 w-4 text-primary" />
+					<h2 className="text-md font-semibold">{t("shared_chats") || "Shared Chats"}</h2>
 				</div>
 
 				<div className="relative">
-					<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+					<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
 					<Input
 						type="text"
 						placeholder={t("search_chats") || "Search chats..."}
 						value={searchQuery}
 						onChange={(e) => setSearchQuery(e.target.value)}
-						className="pl-9 pr-8 h-9"
+						className="h-8 pl-8 pr-7 text-sm"
 					/>
 					{searchQuery && (
 						<Button
 							variant="ghost"
 							size="icon"
-							className="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6"
+							className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2"
 							onClick={handleClearSearch}
 						>
 							<X className="h-3.5 w-3.5" />
@@ -295,23 +295,23 @@ export function AllSharedChatsSidebarContent({
 				<Tabs
 					value={showArchived ? "archived" : "active"}
 					onValueChange={(value) => setShowArchived(value === "archived")}
-					className="shrink-0 mx-4 mt-2"
+					className="shrink-0 mx-3 mt-1.5"
 				>
 					<TabsList stretch showBottomBorder size="sm">
 						<TabsTrigger value="active">
 							<span className="inline-flex items-center gap-1.5">
-								<MessageCircleMore className="h-4 w-4" />
+								<MessageCircleMore className="h-3.5 w-3.5" />
 								<span>Active</span>
-								<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium">
+								<span className="inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-full bg-primary/20 px-1 text-[10px] font-medium text-muted-foreground">
 									{activeCount}
 								</span>
 							</span>
 						</TabsTrigger>
 						<TabsTrigger value="archived">
 							<span className="inline-flex items-center gap-1.5">
-								<ArchiveIcon className="h-4 w-4" />
+								<ArchiveIcon className="h-3.5 w-3.5" />
 								<span>Archived</span>
-								<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium">
+								<span className="inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-full bg-primary/20 px-1 text-[10px] font-medium text-muted-foreground">
 									{archivedCount}
 								</span>
 							</span>
@@ -320,7 +320,7 @@ export function AllSharedChatsSidebarContent({
 				</Tabs>
 			)}
 
-			<div className="flex-1 overflow-y-auto overflow-x-hidden p-2">
+			<div className="flex-1 overflow-y-auto overflow-x-hidden p-1.5">
 				{isLoading ? (
 					<div className="space-y-1">
 						{[75, 90, 55, 80, 65, 85].map((titleWidth) => (
@@ -346,16 +346,7 @@ export function AllSharedChatsSidebarContent({
 							const isActive = currentChatId === thread.id;
 
 							return (
-								<div
-									key={thread.id}
-									className={cn(
-										"sidebar-item-lazy group flex items-center gap-2 rounded-md px-2 py-1.5 text-sm",
-										"hover:bg-accent hover:text-accent-foreground",
-										"transition-colors cursor-pointer",
-										isActive && "bg-accent text-accent-foreground",
-										isBusy && "opacity-50 pointer-events-none"
-									)}
-								>
+								<div key={thread.id} className="group/item relative w-full">
 									{isMobile ? (
 										<button
 											type="button"
@@ -370,7 +361,13 @@ export function AllSharedChatsSidebarContent({
 											onTouchEnd={longPressHandlers.onTouchEnd}
 											onTouchMove={longPressHandlers.onTouchMove}
 											disabled={isBusy}
-											className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
+											className={cn(
+												"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-xs text-left",
+												"group-hover/item:bg-accent group-hover/item:text-accent-foreground",
+												"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+												isActive && "bg-accent text-accent-foreground",
+												isBusy && "opacity-50 pointer-events-none"
+											)}
 										>
 											<span className="truncate">{thread.title || "New Chat"}</span>
 										</button>
@@ -381,7 +378,13 @@ export function AllSharedChatsSidebarContent({
 													type="button"
 													onClick={() => handleThreadClick(thread.id)}
 													disabled={isBusy}
-													className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
+													className={cn(
+														"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-xs text-left",
+														"group-hover/item:bg-accent group-hover/item:text-accent-foreground",
+														"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+														isActive && "bg-accent text-accent-foreground",
+														isBusy && "opacity-50 pointer-events-none"
+													)}
 												>
 													<span className="truncate">{thread.title || "New Chat"}</span>
 												</button>
@@ -395,89 +398,97 @@ export function AllSharedChatsSidebarContent({
 										</Tooltip>
 									)}
 
-									<DropdownMenu
-										open={openDropdownId === thread.id}
-										onOpenChange={(isOpen) => setOpenDropdownId(isOpen ? thread.id : null)}
+									<div
+										className={cn(
+											"pointer-events-none absolute right-0 top-0 bottom-0 flex items-center rounded-r-md pl-6 pr-1",
+											isActive
+												? "bg-gradient-to-l from-accent from-60% to-transparent"
+												: "bg-gradient-to-l from-sidebar from-60% to-transparent group-hover/item:from-accent",
+											isMobile
+												? "opacity-0"
+												: openDropdownId === thread.id
+													? "opacity-100"
+													: "opacity-0 group-hover/item:opacity-100"
+										)}
 									>
-										<DropdownMenuTrigger asChild>
-											<Button
-												variant="ghost"
-												size="icon"
-												className={cn(
-													"h-6 w-6 shrink-0 hover:bg-transparent",
-													isMobile
-														? "opacity-0 pointer-events-none absolute"
-														: openDropdownId === thread.id
-															? "opacity-100"
-															: "md:opacity-0 md:group-hover:opacity-100 md:focus:opacity-100",
-													openDropdownId === thread.id && "bg-accent hover:bg-accent",
-													"transition-opacity"
-												)}
-												disabled={isBusy}
-											>
-												{isDeleting ? (
-													<Spinner size="xs" />
-												) : (
-													<MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />
-												)}
-												<span className="sr-only">{t("more_options") || "More options"}</span>
-											</Button>
-										</DropdownMenuTrigger>
-										<DropdownMenuContent align="end" className="w-40 z-80">
-											{!thread.archived && (
-												<DropdownMenuItem
-													onClick={() => handleStartRename(thread.id, thread.title || "New Chat")}
+										<DropdownMenu
+											open={openDropdownId === thread.id}
+											onOpenChange={(isOpen) => setOpenDropdownId(isOpen ? thread.id : null)}
+										>
+											<DropdownMenuTrigger asChild>
+												<Button
+													variant="ghost"
+													size="icon"
+													className={cn(
+														"pointer-events-auto h-6 w-6 hover:bg-transparent",
+														openDropdownId === thread.id && "bg-accent hover:bg-accent"
+													)}
+													disabled={isBusy}
 												>
-													<Pencil className="mr-2 h-4 w-4" />
-													<span>{t("rename") || "Rename"}</span>
-												</DropdownMenuItem>
-											)}
-											<DropdownMenuItem
-												onClick={() => handleToggleArchive(thread.id, thread.archived)}
-												disabled={isArchiving}
-											>
-												{thread.archived ? (
-													<>
-														<RotateCcwIcon className="mr-2 h-4 w-4" />
-														<span>{t("unarchive") || "Restore"}</span>
-													</>
-												) : (
-													<>
-														<ArchiveIcon className="mr-2 h-4 w-4" />
-														<span>{t("archive") || "Archive"}</span>
-													</>
+													{isDeleting ? (
+														<Spinner size="xs" />
+													) : (
+														<MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />
+													)}
+													<span className="sr-only">{t("more_options") || "More options"}</span>
+												</Button>
+											</DropdownMenuTrigger>
+											<DropdownMenuContent align="end" className="w-40 z-80">
+												{!thread.archived && (
+													<DropdownMenuItem
+														onClick={() => handleStartRename(thread.id, thread.title || "New Chat")}
+													>
+														<Pencil className="mr-2 h-4 w-4" />
+														<span>{t("rename") || "Rename"}</span>
+													</DropdownMenuItem>
 												)}
-											</DropdownMenuItem>
-											<DropdownMenuItem onClick={() => handleDeleteThread(thread.id)}>
-												<Trash2 className="mr-2 h-4 w-4" />
-												<span>{t("delete") || "Delete"}</span>
-											</DropdownMenuItem>
-										</DropdownMenuContent>
-									</DropdownMenu>
+												<DropdownMenuItem
+													onClick={() => handleToggleArchive(thread.id, thread.archived)}
+													disabled={isArchiving}
+												>
+													{thread.archived ? (
+														<>
+															<RotateCcwIcon className="mr-2 h-4 w-4" />
+															<span>{t("unarchive") || "Restore"}</span>
+														</>
+													) : (
+														<>
+															<ArchiveIcon className="mr-2 h-4 w-4" />
+															<span>{t("archive") || "Archive"}</span>
+														</>
+													)}
+												</DropdownMenuItem>
+												<DropdownMenuItem onClick={() => handleDeleteThread(thread.id)}>
+													<Trash2 className="mr-2 h-4 w-4" />
+													<span>{t("delete") || "Delete"}</span>
+												</DropdownMenuItem>
+											</DropdownMenuContent>
+										</DropdownMenu>
+									</div>
 								</div>
 							);
 						})}
 					</div>
 				) : isSearchMode ? (
 					<div className="text-center py-8">
-						<Search className="h-12 w-12 mx-auto text-muted-foreground mb-3" />
-						<p className="text-sm text-muted-foreground">
+						<Search className="mx-auto mb-2.5 h-10 w-10 text-muted-foreground" />
+						<p className="text-xs text-muted-foreground">
 							{t("no_chats_found") || "No chats found"}
 						</p>
-						<p className="text-xs text-muted-foreground/70 mt-1">
+						<p className="mt-1 text-[11px] text-muted-foreground/70">
 							{t("try_different_search") || "Try a different search term"}
 						</p>
 					</div>
 				) : (
 					<div className="text-center py-8">
-						<Users className="h-12 w-12 mx-auto text-muted-foreground mb-3" />
-						<p className="text-sm text-muted-foreground">
+						<Users className="mx-auto mb-2.5 h-10 w-10 text-muted-foreground" />
+						<p className="text-xs text-muted-foreground">
 							{showArchived
 								? t("no_archived_chats") || "No archived chats"
 								: t("no_shared_chats") || "No shared chats"}
 						</p>
 						{!showArchived && (
-							<p className="text-xs text-muted-foreground/70 mt-1">
+							<p className="mt-1 text-[11px] text-muted-foreground/70">
 								Share a chat to collaborate with your team
 							</p>
 						)}
diff --git a/surfsense_web/components/layout/ui/sidebar/AnnouncementsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AnnouncementsSidebar.tsx
index 6a1233537..d6729eec4 100644
--- a/surfsense_web/components/layout/ui/sidebar/AnnouncementsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AnnouncementsSidebar.tsx
@@ -31,7 +31,7 @@ export function AnnouncementsSidebarContent({
 
 	return (
 		<div className="h-full flex flex-col">
-			<div className="shrink-0 p-4 pb-2 space-y-3">
+			<div className="shrink-0 p-3 pb-1.5 space-y-2">
 				<div className="flex items-center justify-between">
 					<div className="flex items-center gap-2">
 						{isMobile && (
@@ -48,12 +48,12 @@ export function AnnouncementsSidebarContent({
 								<span className="sr-only">Close</span>
 							</Button>
 						)}
-						<h2 className="text-lg font-semibold">Announcements</h2>
+						<h2 className="text-md font-semibold">Announcements</h2>
 					</div>
 				</div>
 			</div>
 
-			<div className="flex-1 overflow-y-auto p-4">
+			<div className="flex-1 overflow-y-auto p-3">
 				{announcements.length === 0 ? (
 					<AnnouncementsEmptyState />
 				) : (
diff --git a/surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx b/surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx
index bfc930b25..d8fe5465f 100644
--- a/surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx
@@ -61,7 +61,7 @@ export function ChatListItem({
 				onClick={handleClick}
 				{...(isMobile ? longPressHandlers : {})}
 				className={cn(
-					"flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-sm text-left",
+					"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-xs text-left",
 					"group-hover/item:bg-accent group-hover/item:text-accent-foreground",
 					"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
 					isActive && "bg-accent text-accent-foreground"
diff --git a/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
index fa05559d7..76cb985b9 100644
--- a/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
@@ -178,7 +178,7 @@ export function InboxSidebarContent({
 	const [mounted, setMounted] = useState(false);
 	const [openDropdown, setOpenDropdown] = useState<"filter" | null>(null);
 	const [connectorScrollPos, setConnectorScrollPos] = useState<"top" | "middle" | "bottom">("top");
-	const connectorRafRef = useRef<number>();
+	const connectorRafRef = useRef<number | null>(null);
 	const handleConnectorScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
 		const el = e.currentTarget;
 		if (connectorRafRef.current) return;
@@ -186,7 +186,7 @@ export function InboxSidebarContent({
 			const atTop = el.scrollTop <= 2;
 			const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2;
 			setConnectorScrollPos(atTop ? "top" : atBottom ? "bottom" : "middle");
-			connectorRafRef.current = undefined;
+			connectorRafRef.current = null;
 		});
 	}, []);
 	useEffect(
@@ -528,7 +528,7 @@ export function InboxSidebarContent({
 
 	return (
 		<>
-			<div className="shrink-0 p-4 pb-2 space-y-3">
+			<div className="shrink-0 p-3 pb-1.5 space-y-2">
 				<div className="flex items-center justify-between">
 					<div className="flex items-center gap-2">
 						{isMobile && (
@@ -542,7 +542,7 @@ export function InboxSidebarContent({
 								<span className="sr-only">{t("close") || "Close"}</span>
 							</Button>
 						)}
-						<h2 className="text-lg font-semibold">{t("inbox") || "Inbox"}</h2>
+						<h2 className="text-md font-semibold">{t("inbox") || "Inbox"}</h2>
 					</div>
 					<div className="flex items-center gap-1">
 						{isMobile ? (
@@ -811,19 +811,19 @@ export function InboxSidebarContent({
 				</div>
 
 				<div className="relative">
-					<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+					<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
 					<Input
 						type="text"
 						placeholder={t("search_inbox") || "Search inbox"}
 						value={searchQuery}
 						onChange={(e) => setSearchQuery(e.target.value)}
-						className="pl-9 pr-8 h-9"
+						className="h-8 pl-8 pr-7 text-sm"
 					/>
 					{searchQuery && (
 						<Button
 							variant="ghost"
 							size="icon"
-							className="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6"
+							className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2"
 							onClick={handleClearSearch}
 						>
 							<X className="h-3.5 w-3.5" />
@@ -842,23 +842,23 @@ export function InboxSidebarContent({
 						setActiveFilter("all");
 					}
 				}}
-				className="shrink-0 mx-4 mt-2"
+				className="shrink-0 mx-3 mt-1.5"
 			>
 				<TabsList stretch showBottomBorder size="sm">
 					<TabsTrigger value="comments">
 						<span className="inline-flex items-center gap-1.5">
-							<MessageCircleReply className="h-4 w-4" />
+							<MessageCircleReply className="h-3.5 w-3.5" />
 							<span>{t("comments") || "Comments"}</span>
-							<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium">
+							<span className="inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-full bg-primary/20 px-1 text-[10px] font-medium text-muted-foreground">
 								{formatInboxCount(comments.unreadCount)}
 							</span>
 						</span>
 					</TabsTrigger>
 					<TabsTrigger value="status">
 						<span className="inline-flex items-center gap-1.5">
-							<History className="h-4 w-4" />
+							<History className="h-3.5 w-3.5" />
 							<span>{t("status") || "Status"}</span>
-							<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium">
+							<span className="inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-full bg-primary/20 px-1 text-[10px] font-medium text-muted-foreground">
 								{formatInboxCount(status.unreadCount)}
 							</span>
 						</span>
@@ -1021,23 +1021,23 @@ export function InboxSidebarContent({
 					</div>
 				) : isSearchMode ? (
 					<div className="text-center py-8">
-						<Search className="h-12 w-12 mx-auto text-muted-foreground mb-3" />
-						<p className="text-sm text-muted-foreground">
+						<Search className="mx-auto mb-2.5 h-10 w-10 text-muted-foreground" />
+						<p className="text-xs text-muted-foreground">
 							{t("no_results_found") || "No results found"}
 						</p>
-						<p className="text-xs text-muted-foreground/70 mt-1">
+						<p className="mt-1 text-[11px] text-muted-foreground/70">
 							{t("try_different_search") || "Try a different search term"}
 						</p>
 					</div>
 				) : (
 					<div className="text-center py-8">
 						{activeTab === "comments" ? (
-							<MessageCircleReply className="h-12 w-12 mx-auto text-muted-foreground mb-3" />
+							<MessageCircleReply className="mx-auto mb-2.5 h-10 w-10 text-muted-foreground" />
 						) : (
-							<History className="h-12 w-12 mx-auto text-muted-foreground mb-3" />
+							<History className="mx-auto mb-2.5 h-10 w-10 text-muted-foreground" />
 						)}
-						<p className="text-sm text-muted-foreground">{getEmptyStateMessage().title}</p>
-						<p className="text-xs text-muted-foreground/70 mt-1">{getEmptyStateMessage().hint}</p>
+						<p className="text-xs text-muted-foreground">{getEmptyStateMessage().title}</p>
+						<p className="mt-1 text-[11px] text-muted-foreground/70">{getEmptyStateMessage().hint}</p>
 					</div>
 				)}
 			</div>
diff --git a/surfsense_web/components/layout/ui/sidebar/NavSection.tsx b/surfsense_web/components/layout/ui/sidebar/NavSection.tsx
index 0781a66c2..658067f3f 100644
--- a/surfsense_web/components/layout/ui/sidebar/NavSection.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/NavSection.tsx
@@ -159,7 +159,7 @@ export function NavSection({ items, onItemClick, isCollapsed = false }: NavSecti
 							<StatusIcon
 								status={item.statusIndicator}
 								FallbackIcon={item.icon}
-								className="h-4 w-4"
+							className="h-3.5 w-3.5"
 							/>
 						}
 						trailingContent={<StatusPill status={item.statusIndicator} />}
diff --git a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
index f00fcee81..1064d2adc 100644
--- a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
@@ -113,7 +113,7 @@ export function Sidebar({
 		>
 			{/* Header - search space name or collapse button when collapsed */}
 			{isCollapsed ? (
-				<div className="flex h-14 shrink-0 items-center justify-center border-b">
+				<div className="flex h-12 shrink-0 items-center justify-center border-b">
 					<SidebarCollapseButton
 						isCollapsed={isCollapsed}
 						onToggle={onToggleCollapse ?? (() => {})}
@@ -121,7 +121,7 @@ export function Sidebar({
 					/>
 				</div>
 			) : (
-				<div className="flex h-14 shrink-0 items-center gap-0 px-1 border-b">
+				<div className="flex h-12 shrink-0 items-center gap-0 px-1 border-b">
 					<SidebarHeader
 						searchSpace={searchSpace}
 						isCollapsed={isCollapsed}
@@ -139,7 +139,7 @@ export function Sidebar({
 			)}
 
 			{/* New chat button */}
-			<div className={cn("flex flex-col gap-0.5 py-2", isCollapsed && "items-center")}>
+			<div className={cn("flex flex-col gap-0.5 py-1.5", isCollapsed && "items-center")}>
 				<SidebarButton
 					icon={SquarePen}
 					label={t("new_chat")}
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarButton.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarButton.tsx
index 4410edafa..9add894db 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarButton.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarButton.tsx
@@ -26,7 +26,7 @@ interface SidebarButtonProps {
 }
 
 const expandedClassName = cn(
-	"flex items-center gap-2 rounded-md mx-2 px-2 py-1.5 text-sm transition-colors text-left",
+	"flex items-center gap-1.5 rounded-md mx-2 px-2 py-1 text-sm transition-colors text-left",
 	"hover:bg-accent hover:text-accent-foreground",
 	"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
 );
@@ -63,7 +63,7 @@ export function SidebarButton({
 						className={cn(collapsedClassName, isActive && activeClassName, className)}
 						{...buttonProps}
 					>
-						<Icon className="h-4 w-4" />
+			<Icon className="h-3.5 w-3.5" />
 						{collapsedOverlay}
 						<span className="sr-only">{label}</span>
 					</button>
@@ -87,7 +87,7 @@ export function SidebarButton({
 			className={cn(expandedClassName, isActive && activeClassName, className)}
 			{...buttonProps}
 		>
-			{expandedIconNode ?? <Icon className="h-4 w-4 shrink-0" />}
+			{expandedIconNode ?? <Icon className="h-3.5 w-3.5 shrink-0" />}
 			<span className="flex-1 truncate">{label}</span>
 			{trailingContent}
 			{badge && typeof badge !== "string" ? badge : null}
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarHeader.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarHeader.tsx
index 2c8539dc8..2a5761d6f 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarHeader.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarHeader.tsx
@@ -36,14 +36,14 @@ export function SidebarHeader({
 					<Button
 						variant="ghost"
 						className={cn(
-							"flex h-auto w-full items-center justify-between gap-1 overflow-hidden py-1.5 font-semibold",
+							"flex h-8 w-full items-center justify-between gap-1 overflow-hidden px-2 py-0.5 font-semibold",
 							isCollapsed && "w-10"
 						)}
 					>
-						<span className="truncate text-base">
+						<span className="truncate text-sm">
 							{searchSpace?.name ?? t("select_search_space")}
 						</span>
-						<ChevronsUpDown className="h-4 w-4 shrink-0 text-muted-foreground" />
+						<ChevronsUpDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
 					</Button>
 				</DropdownMenuTrigger>
 				<DropdownMenuContent align="start" className="w-48">
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx
index b8ea5e1ee..5ef037fa0 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx
@@ -39,8 +39,8 @@ export function SidebarSection({
 				className
 			)}
 		>
-			<div className="flex items-center group/section shrink-0 px-2 py-1.5">
-				<CollapsibleTrigger className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors min-w-0">
+			<div className="flex items-center group/section shrink-0 px-2 py-1">
+				<CollapsibleTrigger className="flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-foreground transition-colors min-w-0">
 					<span className="truncate">{title}</span>
 					<ChevronRight
 						className={cn(