feat(icon-rail, layout): enhance IconRail with new chat functionality and navigation items; update LayoutShell to support collapsible sidebar and integrate new actions

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

@@ -1,11 +1,11 @@
 "use client";
 
-import { Plus } from "lucide-react";
+import { Plus, SquarePen } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import type { SearchSpace } from "../../types/layout.types";
+import type { NavItem, SearchSpace } from "../../types/layout.types";
 import type { User } from "../../types/layout.types";
 import { SidebarUserProfile } from "../sidebar/SidebarUserProfile";
 import { SearchSpaceAvatar } from "./SearchSpaceAvatar";
@@ -17,6 +17,10 @@ interface IconRailProps {
 	onSearchSpaceDelete?: (searchSpace: SearchSpace) => void;
 	onSearchSpaceSettings?: (searchSpace: SearchSpace) => void;
 	onAddSearchSpace: () => void;
+	isSingleRailMode?: boolean;
+	onNewChat?: () => void;
+	navItems?: NavItem[];
+	onNavItemClick?: (item: NavItem) => void;
 	user: User;
 	onUserSettings?: () => void;
 	onLogout?: () => void;
@@ -32,6 +36,10 @@ export function IconRail({
 	onSearchSpaceDelete,
 	onSearchSpaceSettings,
 	onAddSearchSpace,
+	isSingleRailMode = false,
+	onNewChat,
+	navItems = [],
+	onNavItemClick,
 	user,
 	onUserSettings,
 	onLogout,
@@ -39,6 +47,29 @@ export function IconRail({
 	setTheme,
 	className,
 }: IconRailProps) {
+	const actionItems = isSingleRailMode
+		? [
+				...(onNewChat
+					? [
+							{
+								key: "new-chat",
+								label: "New chat",
+								onClick: onNewChat,
+								icon: SquarePen,
+								isActive: false,
+							},
+						]
+					: []),
+				...navItems.map((item) => ({
+					key: item.url,
+					label: item.title,
+					onClick: () => onNavItemClick?.(item),
+					icon: item.icon,
+					isActive: !!item.isActive,
+				})),
+			]
+		: [];
+
 	return (
 		<div className={cn("flex h-full w-14 min-h-0 flex-col items-center", className)}>
 			<ScrollArea className="w-full min-h-0 flex-1">
@@ -75,6 +106,33 @@ export function IconRail({
 							Add search space
 						</TooltipContent>
 					</Tooltip>
+
+					{actionItems.length > 0 && (
+						<>
+							<div className="my-1 h-px w-8 bg-border/60" />
+							{actionItems.map(({ key, label, onClick, icon: Icon, isActive }) => (
+								<Tooltip key={key}>
+									<TooltipTrigger asChild>
+										<Button
+											variant="ghost"
+											size="icon"
+											onClick={onClick}
+											className={cn(
+												"h-10 w-10 rounded-lg",
+												isActive && "bg-accent text-accent-foreground"
+											)}
+										>
+											<Icon className="h-4 w-4" />
+											<span className="sr-only">{label}</span>
+										</Button>
+									</TooltipTrigger>
+									<TooltipContent side="right" sideOffset={8}>
+										{label}
+									</TooltipContent>
+								</Tooltip>
+							))}
+						</>
+					)}
 				</div>
 			</ScrollArea>
 			<SidebarUserProfile