refactor(styles): unify panel and sidebar colors for consistent theming; update hover effects for buttons in the right panel and sidebar

surfsense_web/app/globals.css

@@ -39,7 +39,11 @@
 	--chart-4: oklch(0.828 0.189 84.429);
 	--chart-5: oklch(0.769 0.188 70.08);
 	--radius: 0.625rem;
-	--sidebar: oklch(0.985 0 0);
+	/* Unified surface used by the left sidebar, main panel, and right panel. */
+	--panel: oklch(0.96 0 0);
+	/* Distinct (lighter) surface used by the leftmost icon rail. */
+	--rail: oklch(0.985 0 0);
+	--sidebar: var(--panel);
 	--sidebar-foreground: oklch(0.145 0 0);
 	--sidebar-primary: oklch(0.205 0 0);
 	--sidebar-primary-foreground: oklch(0.985 0 0);
@@ -47,7 +51,7 @@
 	--sidebar-accent-foreground: oklch(0.205 0 0);
 	--sidebar-border: oklch(0.922 0 0);
 	--sidebar-ring: oklch(0.708 0 0);
-	--main-panel: oklch(1 0 0);
+	--main-panel: var(--panel);
 	--syntax-bg: #f5f5f5;
 	--brand: oklch(0.623 0.214 259.815);
 	--highlight: oklch(0.852 0.199 91.936);
@@ -70,23 +74,27 @@
 	--accent-foreground: oklch(0.985 0 0);
 	--destructive: oklch(0.577 0.245 27.325);
 	--destructive-foreground: oklch(0.985 0 0);
-	--border: oklch(0.269 0 0);
+	--border: oklch(0.32 0 0);
-	--input: oklch(0.269 0 0);
+	--input: oklch(0.32 0 0);
 	--ring: oklch(0.439 0 0);
 	--chart-1: oklch(0.488 0.243 264.376);
 	--chart-2: oklch(0.696 0.17 162.48);
 	--chart-3: oklch(0.769 0.188 70.08);
 	--chart-4: oklch(0.627 0.265 303.9);
 	--chart-5: oklch(0.645 0.246 16.439);
-	--sidebar: oklch(0.205 0 0);
+	/* Unified surface used by the left sidebar, main panel, and right panel. */
+	--panel: oklch(0.24 0 0);
+	/* Distinct (slightly darker) surface used by the leftmost icon rail. */
+	--rail: oklch(0.205 0 0);
+	--sidebar: var(--panel);
 	--sidebar-foreground: oklch(0.985 0 0);
 	--sidebar-primary: oklch(0.488 0.243 264.376);
 	--sidebar-primary-foreground: oklch(0.985 0 0);
 	--sidebar-accent: oklch(0.269 0 0);
 	--sidebar-accent-foreground: oklch(0.985 0 0);
-	--sidebar-border: oklch(0.269 0 0);
+	--sidebar-border: oklch(0.32 0 0);
 	--sidebar-ring: oklch(0.439 0 0);
-	--main-panel: oklch(0.18 0 0);
+	--main-panel: var(--panel);
 	--syntax-bg: #1e1e1e;
 	--brand: oklch(0.707 0.165 254.624);
 	--highlight: oklch(0.852 0.199 91.936);
@@ -118,6 +126,8 @@
 	--color-chart-4: var(--chart-4);
 	--color-chart-5: var(--chart-5);
 	--color-main-panel: var(--main-panel);
+	--color-panel: var(--panel);
+	--color-rail: var(--rail);
 	--radius-sm: calc(var(--radius) - 4px);
 	--radius-md: calc(var(--radius) - 2px);
 	--radius-lg: var(--radius);

surfsense_web/components/assistant-ui/user-message.tsx

@@ -102,7 +102,7 @@ export const UserMessage: FC = () => {
 			<div className="col-start-2 min-w-0">
 				<div className="aui-user-message-content-wrapper flex items-end gap-2">
 					<div className="relative flex-1 min-w-0">
-						<div className="aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground">
+						<div className="aui-user-message-content wrap-break-word rounded-xl bg-muted px-4 py-2.5 text-foreground">
 							<MessagePrimitive.Parts components={userMessageParts} />
 						</div>
 						<div className="absolute right-0 top-full mt-1 z-10 opacity-100 pointer-events-auto md:opacity-0 md:pointer-events-none md:transition-opacity md:duration-200 md:delay-300 md:group-hover/user-msg:opacity-100 md:group-hover/user-msg:delay-0 md:group-hover/user-msg:pointer-events-auto">

surfsense_web/components/layout/ui/right-panel/RightPanel.tsx

@@ -61,7 +61,7 @@ function CollapseButton({ onClick }: { onClick: () => void }) {
 					variant="ghost"
 					size="icon"
 					onClick={onClick}
-					className="h-8 w-8 shrink-0 text-muted-foreground hover:text-muted-foreground hover:bg-muted/40"
+					className="h-8 w-8 shrink-0 text-muted-foreground hover:text-muted-foreground hover:bg-accent"
 				>
 					<PanelRight className="h-4 w-4" />
 					<span className="sr-only">Collapse panel</span>
@@ -102,7 +102,7 @@ export function RightPanelExpandButton() {
 						variant="ghost"
 						size="icon"
 						onClick={() => startTransition(() => setCollapsed(false))}
-						className="h-8 w-8 shrink-0 -m-0.5 text-muted-foreground hover:text-muted-foreground hover:bg-muted/40"
+						className="h-8 w-8 shrink-0 -m-0.5 text-muted-foreground hover:text-muted-foreground hover:bg-accent"
 					>
 						<PanelRight className="h-4 w-4" />
 						<span className="sr-only">Expand panel</span>
@@ -203,7 +203,7 @@ export function RightPanel({ documentsPanel }: RightPanelProps) {
 	return (
 		<aside
 			style={{ width: targetWidth }}
-			className="flex h-full shrink-0 flex-col border-l border-b bg-sidebar text-sidebar-foreground overflow-hidden transition-[width] duration-200 ease-out"
+			className="flex h-full shrink-0 flex-col border-l border-b bg-panel text-sidebar-foreground overflow-hidden transition-[width] duration-200 ease-out"
 		>
 			<div className="relative flex-1 min-h-0 overflow-hidden">
 				{effectiveTab === "sources" && documentsOpen && documentsPanel && (

surfsense_web/components/layout/ui/shell/LayoutShell.tsx

@@ -144,7 +144,7 @@ function MainContentPanel({
 				rightActions={<RightPanelExpandButton />}
 				className="min-w-0"
 			/>
-			<div className="relative flex flex-1 flex-col border border-l-0 border-r-0 border-t-0 bg-main-panel overflow-hidden min-w-0">
+			<div className="relative flex flex-1 flex-col border border-l-0 border-r-0 border-t-0 bg-panel overflow-hidden min-w-0">
 				<Header />
 
 				{isDocumentTab && activeTab.documentId && activeTab.searchSpaceId ? (
@@ -247,7 +247,7 @@ export function LayoutShell({
 		return (
 			<SidebarProvider value={sidebarContextValue}>
 				<TooltipProvider delayDuration={0}>
-					<div className={cn("flex h-screen w-full flex-col bg-main-panel", className)}>
+					<div className={cn("flex h-screen w-full flex-col bg-panel", className)}>
 						<Header
 							mobileMenuTrigger={<MobileSidebarTrigger onClick={() => setMobileMenuOpen(true)} />}
 						/>
@@ -369,9 +369,12 @@ export function LayoutShell({
 		<SidebarProvider value={sidebarContextValue}>
 			<TooltipProvider delayDuration={0}>
 				<div
-					className={cn("flex h-screen w-full gap-2 px-2 py-0 overflow-hidden bg-muted/40", className)}
+					className={cn(
+						"flex h-screen w-full gap-2 px-2 py-0 overflow-hidden bg-rail",
+						className
+					)}
 				>
-					<div className="hidden md:flex overflow-hidden border-r border-border/60 -mr-2 pr-2">
+					<div className="hidden md:flex overflow-hidden border-r -mr-2 pr-2 bg-rail">
 						<IconRail
 							searchSpaces={searchSpaces}
 							activeSearchSpaceId={activeSearchSpaceId}
@@ -396,8 +399,8 @@ export function LayoutShell({
 					{/* Sidebar + slide-out panels share one container; overflow visible so panels can overlay main content. Negative right margin closes the flex gap so the sidebar sits flush against the main panel, separated only by a border. */}
 					<div
 						className={cn(
-							"relative hidden md:flex shrink-0 z-20 -mr-2 border-r border-border/60",
+							"relative hidden md:flex shrink-0 z-20 -mr-2 border-r",
-							!isCollapsed && "bg-sidebar"
+							!isCollapsed && "bg-panel"
 						)}
 					>
 						{!isCollapsed && (
@@ -437,13 +440,18 @@ export function LayoutShell({
 							/>
 						)}
 
-						{/* Invisible drag hit-area straddling the right border — provides resize affordance without any visible UI */}
+						{/* Drag hit-area straddling the right border — wider for a forgiving grab,
+						    z-50 + pointer-events-auto to beat any neighboring stacking context. */}
 						{!isCollapsed && (
 							<button
 								type="button"
 								aria-label="Resize sidebar"
 								onMouseDown={onResizeMouseDown}
-								className="absolute top-0 right-0 h-full w-2 translate-x-1/2 cursor-col-resize z-30 bg-transparent border-0 p-0 focus:outline-none"
+								className={cn(
+									"absolute top-0 right-0 h-full w-4 translate-x-1/2 cursor-col-resize z-50 pointer-events-auto select-none bg-transparent border-0 p-0 focus:outline-none",
+									"after:content-[''] after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-transparent hover:after:bg-border/80 after:transition-colors",
+									isResizing && "after:bg-border"
+								)}
 							/>
 						)}
 

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

@@ -116,7 +116,7 @@ export function Sidebar({
 	return (
 		<div
 			className={cn(
-				"relative flex h-full flex-col bg-sidebar text-sidebar-foreground overflow-hidden select-none",
+				"relative flex h-full flex-col bg-panel text-sidebar-foreground overflow-hidden select-none",
 				isCollapsed ? "w-[60px] transition-[width] duration-200" : "",
 				!isCollapsed && !isResizing ? "transition-[width] duration-200" : "",
 				className
@@ -296,7 +296,7 @@ export function Sidebar({
 			)}
 
 			{/* Footer */}
-			<div className="mt-auto border-t border-border/60">
+			<div className="mt-auto border-t">
 				{/* Platform navigation */}
 				{footerNavItems.length > 0 && (
 					<NavSection
@@ -346,7 +346,7 @@ function SidebarUsageFooter({
 
 	const containerClass = cn(
 		"px-3 py-3 space-y-3",
-		hasNavSectionAbove && "border-t border-border/60"
+		hasNavSectionAbove && "border-t"
 	);
 
 	if (isAnonymous) {

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

@@ -26,7 +26,7 @@ export function SidebarCollapseButton({
 			variant="ghost"
 			size="icon"
 			onClick={onToggle}
-			className="h-8 w-8 shrink-0 text-muted-foreground hover:text-muted-foreground hover:bg-muted/40"
+			className="h-8 w-8 shrink-0 text-muted-foreground hover:text-muted-foreground hover:bg-accent"
 		>
 			<PanelLeft className="h-4 w-4" />
 			<span className="sr-only">{isCollapsed ? t("expand_sidebar") : t("collapse_sidebar")}</span>

surfsense_web/components/layout/ui/tabs/TabBar.tsx

@@ -139,7 +139,7 @@ export function TabBar({
 	return (
 		<div
 			className={cn(
-				"mb-0 flex h-12 items-center shrink-0 px-1 gap-0.5 select-none border-b border-border/60",
+				"mb-0 flex h-12 items-center shrink-0 px-1 gap-0.5 select-none border-b bg-panel",
 				className
 			)}
 		>
@@ -195,9 +195,9 @@ export function TabBar({
 						className={cn(
 							// Solid bg + soft left-fade so tabs scrolling underneath the
 							// + button get visually masked into the bar's background.
-							"sticky right-0 z-10 flex h-full shrink-0 items-center bg-main-panel pl-3 pr-1",
+							"sticky right-0 z-10 flex h-full shrink-0 items-center bg-panel pl-3 pr-1",
 							"before:content-[''] before:absolute before:inset-y-0 before:-left-4 before:w-4 before:pointer-events-none",
-							"before:bg-gradient-to-r before:from-transparent before:to-main-panel"
+							"before:bg-gradient-to-r before:from-transparent before:to-panel"
 						)}
 					>
 						<button