feat: implement macOS-specific title bar adjustments and enhance RightPanel with toggle functionality

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

@@ -95,6 +95,7 @@ interface SidebarProps {
 	sidebarWidth?: number;
 	isResizing?: boolean;
 	renderUserProfile?: boolean;
+	renderCollapseButton?: boolean;
 }
 
 export function Sidebar({
@@ -132,6 +133,7 @@ export function Sidebar({
 	sidebarWidth = SIDEBAR_MIN_WIDTH,
 	isResizing = false,
 	renderUserProfile = true,
+	renderCollapseButton = true,
 }: SidebarProps) {
 	const t = useTranslations("sidebar");
 	const [openDropdownChatId, setOpenDropdownChatId] = useState<number | null>(null);
@@ -176,13 +178,15 @@ export function Sidebar({
 						onManageMembers={onManageMembers}
 					/>
 				</div>
-				<div className={cn("shrink-0", isCollapsed && "mx-auto")}>
-					<SidebarCollapseButton
-						isCollapsed={isCollapsed}
-						onToggle={onToggleCollapse ?? (() => {})}
-						disableTooltip={disableTooltips}
-					/>
-				</div>
+				{renderCollapseButton ? (
+					<div className={cn("shrink-0", isCollapsed && "mx-auto")}>
+						<SidebarCollapseButton
+							isCollapsed={isCollapsed}
+							onToggle={onToggleCollapse ?? (() => {})}
+							disableTooltip={disableTooltips}
+						/>
+					</div>
+				) : null}
 			</div>
 
 			<div className="flex flex-col gap-0.5 py-1.5">
@@ -383,10 +387,7 @@ function SidebarUsageFooter({
 
 	if (isCollapsed) return null;
 
-	const containerClass = cn(
-		"px-3 py-3 space-y-3",
-		hasNavSectionAbove && "border-t"
-	);
+	const containerClass = cn("px-3 py-3 space-y-3", hasNavSectionAbove && "border-t");
 
 	if (isAnonymous) {
 		return (

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

@@ -6,17 +6,22 @@ import { Button } from "@/components/ui/button";
 import { ShortcutKbd } from "@/components/ui/shortcut-kbd";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { usePlatformShortcut } from "@/hooks/use-platform-shortcut";
+import { cn } from "@/lib/utils";
 
 interface SidebarCollapseButtonProps {
 	isCollapsed: boolean;
 	onToggle: () => void;
 	disableTooltip?: boolean;
+	className?: string;
+	iconClassName?: string;
 }
 
 export function SidebarCollapseButton({
 	isCollapsed,
 	onToggle,
 	disableTooltip = false,
+	className,
+	iconClassName,
 }: SidebarCollapseButtonProps) {
 	const t = useTranslations("sidebar");
 	const { shortcutKeys } = usePlatformShortcut();
@@ -26,9 +31,12 @@ export function SidebarCollapseButton({
 			variant="ghost"
 			size="icon"
 			onClick={onToggle}
-			className="h-8 w-8 shrink-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+			className={cn(
+				"h-8 w-8 shrink-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+				className
+			)}
 		>
-			<PanelLeft className="h-4 w-4" />
+			<PanelLeft className={cn("h-4 w-4", iconClassName)} />
 			<span className="sr-only">{isCollapsed ? t("expand_sidebar") : t("collapse_sidebar")}</span>
 		</Button>
 	);