From 0fecff45b9b08dc706bc43d7e62fe7b1d1cd689a Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 13 May 2026 17:21:10 +0530
Subject: [PATCH] refactor: update UI components to use 'bg-popover' for
 consistent styling

---
 .../assistant-ui/connector-popup.tsx          |  2 +-
 .../components/connector-dialog-header.tsx    |  2 +-
 .../views/connector-edit-view.tsx             |  6 ++---
 .../views/indexing-configuration-view.tsx     |  4 ++--
 .../views/connector-accounts-list-view.tsx    |  2 +-
 .../layout/ui/right-panel/RightPanel.tsx      | 18 ++++++++++++---
 .../layout/ui/sidebar/DocumentsSidebar.tsx    | 23 +++++--------------
 7 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/connector-popup.tsx b/surfsense_web/components/assistant-ui/connector-popup.tsx
index 52004159a..a44deeb1f 100644
--- a/surfsense_web/components/assistant-ui/connector-popup.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup.tsx
@@ -453,7 +453,7 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
 									</div>
 								</div>
 								{/* Bottom fade shadow */}
-								<div className="absolute bottom-0 left-0 right-0 h-7 bg-linear-to-t from-muted via-muted/80 to-transparent pointer-events-none z-10" />
+								<div className="absolute bottom-0 left-0 right-0 h-7 bg-linear-to-t from-popover via-popover/80 to-transparent pointer-events-none z-10" />
 							</div>
 						</Tabs>
 					)}
diff --git a/surfsense_web/components/assistant-ui/connector-popup/components/connector-dialog-header.tsx b/surfsense_web/components/assistant-ui/connector-popup/components/connector-dialog-header.tsx
index 819e11cd3..5c1d61c26 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/components/connector-dialog-header.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/components/connector-dialog-header.tsx
@@ -25,7 +25,7 @@ export const ConnectorDialogHeader: FC<ConnectorDialogHeaderProps> = ({
 		<div
 			className={cn(
 				"flex-shrink-0 px-4 sm:px-12 pt-5 sm:pt-10 transition-shadow duration-200 relative z-10",
-				isScrolled && "shadow-xl bg-muted/50 backdrop-blur-md"
+				isScrolled && "bg-popover shadow-xl"
 			)}
 		>
 			<DialogHeader>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx
index c104f140a..f8116d2fd 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx
@@ -368,16 +368,16 @@ export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
 				</div>
 				{/* Top fade shadow - appears when scrolled */}
 				{isScrolled && (
-					<div className="absolute top-0 left-0 right-0 h-6 bg-gradient-to-b from-muted/50 to-transparent pointer-events-none z-10" />
+					<div className="absolute top-0 left-0 right-0 h-6 bg-gradient-to-b from-popover to-transparent pointer-events-none z-10" />
 				)}
 				{/* Bottom fade shadow - appears when there's more content */}
 				{hasMoreContent && (
-					<div className="absolute bottom-0 left-0 right-0 h-3 bg-gradient-to-t from-muted/50 to-transparent pointer-events-none z-10" />
+					<div className="absolute bottom-0 left-0 right-0 h-3 bg-gradient-to-t from-popover to-transparent pointer-events-none z-10" />
 				)}
 			</div>
 
 			{/* Fixed Footer - Action buttons */}
-			<div className="flex-shrink-0 flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 sm:gap-0 px-6 sm:px-12 py-6 sm:py-6 bg-muted border-t border-border">
+			<div className="flex-shrink-0 flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 sm:gap-0 px-6 sm:px-12 py-6 sm:py-6 bg-popover">
 				{showDisconnectConfirm ? (
 					<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 flex-1 sm:flex-initial">
 						<span className="text-xs sm:text-sm text-muted-foreground sm:whitespace-nowrap">
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx
index 982b0be11..276cd24d3 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx
@@ -246,11 +246,11 @@ export const IndexingConfigurationView: FC<IndexingConfigurationViewProps> = ({
 				</div>
 				{/* Top fade shadow - appears when scrolled */}
 				{isScrolled && (
-					<div className="absolute top-0 left-0 right-0 h-6 bg-gradient-to-b from-muted/50 to-transparent pointer-events-none z-10" />
+					<div className="absolute top-0 left-0 right-0 h-6 bg-gradient-to-b from-popover to-transparent pointer-events-none z-10" />
 				)}
 				{/* Bottom fade shadow - appears when there's more content */}
 				{hasMoreContent && (
-					<div className="absolute bottom-0 left-0 right-0 h-3 bg-gradient-to-t from-muted/50 to-transparent pointer-events-none z-10" />
+					<div className="absolute bottom-0 left-0 right-0 h-3 bg-gradient-to-t from-popover to-transparent pointer-events-none z-10" />
 				)}
 			</div>
 
diff --git a/surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx
index 8aee7e005..1d0f20922 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx
@@ -108,7 +108,7 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 	return (
 		<div className="flex flex-col h-full">
 			{/* Header */}
-			<div className="px-6 sm:px-12 pt-8 sm:pt-10 pb-1 sm:pb-4 border-b border-border/50 bg-muted">
+			<div className="px-6 sm:px-12 pt-8 sm:pt-10 pb-1 sm:pb-4 bg-popover">
 				{/* Back button */}
 				<button
 					type="button"
diff --git a/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx b/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx
index 8bc15b4c5..8e2a5d1fe 100644
--- a/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx
+++ b/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx
@@ -3,7 +3,7 @@
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { PanelRight } from "lucide-react";
 import dynamic from "next/dynamic";
-import { startTransition, useEffect } from "react";
+import { startTransition, useEffect, type MouseEvent } from "react";
 import { closeReportPanelAtom, reportPanelAtom } from "@/atoms/chat/report-panel.atom";
 import { citationPanelAtom, closeCitationPanelAtom } from "@/atoms/citation/citation-panel.atom";
 import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms";
@@ -53,6 +53,10 @@ interface RightPanelProps {
 	};
 }
 
+function isKeyboardClick(event: MouseEvent) {
+	return event.detail === 0;
+}
+
 function CollapseButton({ onClick }: { onClick: () => void }) {
 	return (
 		<Tooltip>
@@ -60,7 +64,11 @@ function CollapseButton({ onClick }: { onClick: () => void }) {
 				<Button
 					variant="ghost"
 					size="icon"
-					onClick={onClick}
+					tabIndex={-1}
+					onClick={(event) => {
+						if (isKeyboardClick(event)) return;
+						onClick();
+					}}
 					className="h-8 w-8 shrink-0 text-muted-foreground hover:text-muted-foreground hover:bg-accent"
 				>
 					<PanelRight className="h-4 w-4" />
@@ -101,7 +109,11 @@ export function RightPanelExpandButton() {
 					<Button
 						variant="ghost"
 						size="icon"
-						onClick={() => startTransition(() => setCollapsed(false))}
+						tabIndex={-1}
+						onClick={(event) => {
+							if (isKeyboardClick(event)) return;
+							startTransition(() => setCollapsed(false));
+						}}
 						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" />
diff --git a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
index 0e6945fc1..17bf62967 100644
--- a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
@@ -38,7 +38,6 @@ import {
 	folderWatchDialogOpenAtom,
 	folderWatchInitialFolderAtom,
 } from "@/atoms/folder-sync/folder-sync.atoms";
-import { rightPanelCollapsedAtom } from "@/atoms/layout/right-panel.atom";
 import { searchSpacesAtom } from "@/atoms/search-spaces/search-space-query.atoms";
 import { CreateFolderDialog } from "@/components/documents/CreateFolderDialog";
 import type { DocumentNodeDoc } from "@/components/documents/DocumentNode";
@@ -199,7 +198,6 @@ function AuthenticatedDocumentsSidebarBase({
 	const electronAPI = desktopFeaturesEnabled ? platformElectronAPI : null;
 	const searchSpaceId = Number(params.search_space_id);
 	const setConnectorDialogOpen = useSetAtom(connectorDialogOpenAtom);
-	const setRightPanelCollapsed = useSetAtom(rightPanelCollapsedAtom);
 	const openEditorPanel = useSetAtom(openEditorPanelAtom);
 	const { data: agentFlags } = useAtomValue(agentFlagsAtom);
 	const { data: connectors } = useAtomValue(connectorsAtom);
@@ -1024,17 +1022,13 @@ function AuthenticatedDocumentsSidebarBase({
 
 	useEffect(() => {
 		const handleEscape = (e: KeyboardEvent) => {
-			if (e.key === "Escape" && open) {
-				if (isMobile) {
-					onOpenChange(false);
-				} else {
-					setRightPanelCollapsed(true);
-				}
+			if (e.key === "Escape" && open && isMobile) {
+				onOpenChange(false);
 			}
 		};
 		document.addEventListener("keydown", handleEscape);
 		return () => document.removeEventListener("keydown", handleEscape);
-	}, [open, onOpenChange, isMobile, setRightPanelCollapsed]);
+	}, [open, onOpenChange, isMobile]);
 
 	const showFilesystemTabs =
 		!isMobile && !!electronAPI && !!filesystemSettings && localFilesystemEnabled;
@@ -1585,7 +1579,6 @@ function AnonymousDocumentsSidebar({
 	const t = useTranslations("documents");
 	const tSidebar = useTranslations("sidebar");
 	const isMobile = !useMediaQuery("(min-width: 640px)");
-	const setRightPanelCollapsed = useSetAtom(rightPanelCollapsedAtom);
 	const anonMode = useAnonymousMode();
 	const { gate } = useLoginGate();
 
@@ -1697,17 +1690,13 @@ function AnonymousDocumentsSidebar({
 
 	useEffect(() => {
 		const handleEscape = (e: KeyboardEvent) => {
-			if (e.key === "Escape" && open) {
-				if (isMobile) {
-					onOpenChange(false);
-				} else {
-					setRightPanelCollapsed(true);
-				}
+			if (e.key === "Escape" && open && isMobile) {
+				onOpenChange(false);
 			}
 		};
 		document.addEventListener("keydown", handleEscape);
 		return () => document.removeEventListener("keydown", handleEscape);
-	}, [open, onOpenChange, isMobile, setRightPanelCollapsed]);
+	}, [open, onOpenChange, isMobile]);
 
 	const documentsContent = (
 		<>