refactor: update icons and improve sidebar styling for enhanced user experience

surfsense_web/components/layout/providers/FreeLayoutDataProvider.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Inbox, SquareLibrary } from "lucide-react";
+import { Inbox, LibraryBig } from "lucide-react";
 import { useRouter } from "next/navigation";
 import type { ReactNode } from "react";
 import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
@@ -69,7 +69,7 @@ export function FreeLayoutDataProvider({ children }: FreeLayoutDataProviderProps
 						? {
 								title: "Documents",
 								url: "#documents",
-								icon: SquareLibrary,
+								icon: LibraryBig,
 								isActive: false,
 							}
 						: null,

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -2,7 +2,7 @@
 
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { AlertTriangle, Inbox, SquareLibrary } from "lucide-react";
+import { AlertTriangle, Inbox, LibraryBig } from "lucide-react";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useTheme } from "next-themes";
@@ -361,7 +361,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 						? {
 								title: "Documents",
 								url: "#documents",
-								icon: SquareLibrary,
+								icon: LibraryBig,
 								isActive: isDocumentsSidebarOpen,
 							}
 						: null,

surfsense_web/components/layout/ui/icon-rail/SearchSpaceAvatar.tsx

@@ -128,9 +128,9 @@ export function SearchSpaceAvatar({
 			onClick={onClick}
 			className={cn(
 				"relative rounded-lg font-semibold text-white transition-all select-none",
-				"hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+				"hover:text-white hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
 				sizeClasses,
-				isActive && "ring-2 ring-primary ring-offset-1 ring-offset-background"
+				isActive && "ring-2 ring-primary ring-offset-1 ring-offset-rail"
 			)}
 			style={{ backgroundColor: bgColor }}
 		>
@@ -139,12 +139,12 @@ export function SearchSpaceAvatar({
 			{isShared && (
 				<span
 					className={cn(
-						"absolute -top-1 -right-1 flex items-center justify-center rounded-full bg-blue-500 text-white shadow-sm",
+						"absolute -top-1 -right-1 flex items-center justify-center rounded-full bg-gray-800 text-white shadow-sm",
 						size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4"
 					)}
 					title={tCommon("shared")}
 				>
-					<Users className={cn(size === "sm" ? "h-2 w-2" : "h-2.5 w-2.5")} />
+					<Users className={cn(size === "sm" ? "size-2" : "size-2.5")} />
 				</span>
 			)}
 		</Button>

surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx

@@ -561,7 +561,10 @@ export function InboxSidebarContent({
 									onOpenChange={setFilterDrawerOpen}
 									shouldScaleBackground={false}
 								>
-									<DrawerContent className="max-h-[70vh] z-80" overlayClassName="z-80">
+									<DrawerContent
+										className="max-h-[70vh] z-80 bg-popover text-popover-foreground"
+										overlayClassName="z-80"
+									>
 										<DrawerHandle />
 										<DrawerHeader className="px-4 pb-3 pt-2">
 											<DrawerTitle className="flex items-center gap-2 text-base font-semibold">

surfsense_web/components/layout/ui/sidebar/MobileSidebar.tsx

@@ -108,11 +108,11 @@ export function MobileSidebar({
 
 	return (
 		<Sheet open={isOpen} onOpenChange={onOpenChange}>
-			<SheetContent side="left" className="w-[340px] p-0 flex flex-row gap-0 [&>button]:hidden">
+			<SheetContent side="left" className="w-[340px] p-0 flex flex-row gap-0 bg-panel [&>button]:hidden">
 				<SheetTitle className="sr-only">Navigation</SheetTitle>
 
 				{/* Vertical Search Spaces Rail - left side */}
-				<div className="flex h-full w-14 shrink-0 flex-col items-center bg-muted/40 border-r">
+				<div className="flex h-full w-14 shrink-0 flex-col items-center border-r bg-rail">
 					<ScrollArea className="w-full flex-1">
 						<div className="flex flex-col items-center gap-2 px-1.5 py-3">
 							{searchSpaces.map((space) => (

surfsense_web/components/layout/ui/sidebar/Sidebar.tsx

@@ -134,11 +134,16 @@ export function Sidebar({
 	const t = useTranslations("sidebar");
 	const [openDropdownChatId, setOpenDropdownChatId] = useState<number | null>(null);
 
-	// Inbox is rendered explicitly right below New Chat. Pull it out of the
+	// Inbox and Documents are rendered explicitly right below New Chat. Pull
-	// nav items list so it doesn't also appear in the bottom NavSection.
+	// them out of the nav items list so they don't also appear in the bottom
+	// NavSection. Documents is only present in navItems on mobile.
 	const inboxItem = useMemo(() => navItems.find((item) => item.url === "#inbox"), [navItems]);
+	const documentsItem = useMemo(
+		() => navItems.find((item) => item.url === "#documents"),
+		[navItems]
+	);
 	const footerNavItems = useMemo(
-		() => navItems.filter((item) => item.url !== "#inbox"),
+		() => navItems.filter((item) => item.url !== "#inbox" && item.url !== "#documents"),
 		[navItems]
 	);
 
@@ -202,6 +207,16 @@ export function Sidebar({
 						}
 					/>
 				)}
+				{documentsItem && (
+					<SidebarButton
+						icon={documentsItem.icon}
+						label={documentsItem.title}
+						onClick={() => onNavItemClick?.(documentsItem)}
+						isCollapsed={isCollapsed}
+						isActive={documentsItem.isActive}
+						tooltipContent={isCollapsed ? documentsItem.title : undefined}
+					/>
+				)}
 			</div>
 
 			{/* Chat sections - fills available space */}