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/sidebar/Sidebar.tsx

@@ -269,7 +269,7 @@ export function Sidebar({
 			)}
 
 			{/* Footer */}
-			<div className="mt-auto border-t">
+			<div className="mt-auto border-t border-border/60">
 				{/* Platform navigation */}
 				{navItems.length > 0 && (
 					<NavSection items={navItems} onItemClick={onNavItemClick} isCollapsed={isCollapsed} />
@@ -307,7 +307,7 @@ function SidebarUsageFooter({
 
 	if (isAnonymous) {
 		return (
-			<div className="px-3 py-3 border-t space-y-3">
+			<div className="px-3 py-3 border-t border-border/60 space-y-3">
 				{pageUsage && (
 					<div className="space-y-1.5">
 						<div className="flex justify-between items-center text-xs">
@@ -340,7 +340,7 @@ function SidebarUsageFooter({
 	}
 
 	return (
-		<div className="px-3 py-3 border-t space-y-3">
+		<div className="px-3 py-3 border-t border-border/60 space-y-3">
 			<PremiumTokenUsageDisplay />
 			{pageUsage && (
 				<PageUsageDisplay pagesUsed={pageUsage.pagesUsed} pagesLimit={pageUsage.pagesLimit} />

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

@@ -14,6 +14,8 @@ interface SidebarButtonProps {
 	badge?: React.ReactNode;
 	/** Overlay in the top-right corner of the collapsed icon (e.g. status badge) */
 	collapsedOverlay?: React.ReactNode;
+	/** Custom icon node for collapsed mode — overrides the default <Icon> rendering */
+	collapsedIconNode?: React.ReactNode;
 	/** Custom icon node for expanded mode — overrides the default <Icon> rendering */
 	expandedIconNode?: React.ReactNode;
 	/** Optional inline trailing content shown in expanded mode */
@@ -26,7 +28,7 @@ interface SidebarButtonProps {
 }
 
 const expandedClassName = cn(
-	"flex items-center gap-1.5 rounded-md mx-2 px-2 py-1 text-sm transition-colors text-left",
+	"flex items-center gap-2 rounded-md mx-2 px-2 py-1.5 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"
 );
@@ -45,6 +47,7 @@ export function SidebarButton({
 	isActive = false,
 	badge,
 	collapsedOverlay,
+	collapsedIconNode,
 	expandedIconNode,
 	trailingContent,
 	tooltipContent,
@@ -63,7 +66,7 @@ export function SidebarButton({
 						className={cn(collapsedClassName, isActive && activeClassName, className)}
 						{...buttonProps}
 					>
-			<Icon className="h-3.5 w-3.5" />
+						{collapsedIconNode ?? <Icon className="h-3.5 w-3.5" />}
 						{collapsedOverlay}
 						<span className="sr-only">{label}</span>
 					</button>

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

@@ -35,7 +35,7 @@ export function SidebarCollapseButton({
 	return (
 		<Tooltip>
 			<TooltipTrigger asChild>{button}</TooltipTrigger>
-			<TooltipContent side={isCollapsed ? "right" : "bottom"}>
+			<TooltipContent side="bottom" avoidCollisions={false}>
 				<span className="flex items-center">
 					{isCollapsed ? t("expand_sidebar") : t("collapse_sidebar")}
 					<ShortcutKbd keys={shortcutKeys("Mod", "\\")} />