feat: integrate search space settings dialog across various components

- Added `searchSpaceSettingsDialogAtom` to manage the state of the settings dialog. - Updated multiple components (OnboardPage, TeamManagementPage, ConnectorIndicator, DocumentUploadPopupContent, etc.) to utilize the new dialog state for navigating to settings. - Removed unnecessary animations from ApiKeyContent and ProfileContent components for improved performance. - Enhanced button styles for better UI consistency across settings actions. - Refactored error handling in LLMRoleManager and ModelConfigManager to simplify the UI structure.
2026-05-04 21:32:39 +02:00 · 2026-03-16 21:10:46 +05:30 · 2026-03-16 21:10:46 +05:30 · b7d684ca8d
commit b7d684ca8d
parent 60d12b0a70
19 changed files with 646 additions and 483 deletions
--- a/surfsense_web/components/settings/settings-dialog.tsx
+++ b/surfsense_web/components/settings/settings-dialog.tsx
@ -0,0 +1,126 @@
+"use client";
+
+import type * as React from "react";
+import { useCallback, useRef, useState } from "react";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+interface NavItem {
+	value: string;
+	label: string;
+	icon: React.ReactNode;
+}
+
+interface SettingsDialogProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	title: string;
+	navItems: NavItem[];
+	activeItem: string;
+	onItemChange: (value: string) => void;
+	children: React.ReactNode;
+}
+
+export function SettingsDialog({
+	open,
+	onOpenChange,
+	title,
+	navItems,
+	activeItem,
+	onItemChange,
+	children,
+}: SettingsDialogProps) {
+	const activeRef = useRef<HTMLButtonElement>(null);
+	const [tabScrollPos, setTabScrollPos] = useState<"start" | "middle" | "end">("start");
+
+	const handleTabScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+		const el = e.currentTarget;
+		const atStart = el.scrollLeft <= 2;
+		const atEnd = el.scrollWidth - el.scrollLeft - el.clientWidth <= 2;
+		setTabScrollPos(atStart ? "start" : atEnd ? "end" : "middle");
+	}, []);
+
+	const handleItemChange = (value: string) => {
+		onItemChange(value);
+		activeRef.current?.scrollIntoView({ inline: "center", block: "nearest", behavior: "smooth" });
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="select-none max-w-[900px] w-[95vw] md:w-[90vw] h-[90vh] md:h-[80vh] max-h-[640px] flex flex-col md:flex-row p-0 gap-0 overflow-hidden [--card:var(--background)] dark:[--card:oklch(0.205_0_0)] dark:[--background:oklch(0.205_0_0)]">
+				<DialogTitle className="sr-only">{title}</DialogTitle>
+
+				{/* Desktop: Left sidebar */}
+				<nav className="hidden md:flex w-[220px] shrink-0 flex-col border-r border-border p-3 pt-6">
+					<div className="flex flex-col gap-0.5">
+						{navItems.map((item) => (
+							<button
+								key={item.value}
+								type="button"
+								onClick={() => onItemChange(item.value)}
+								className={cn(
+								"flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors text-left focus:outline-none focus-visible:outline-none",
+								activeItem === item.value
+									? "bg-accent text-accent-foreground"
+									: "text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+							)}
+							>
+								{item.icon}
+								{item.label}
+							</button>
+						))}
+					</div>
+				</nav>
+
+				{/* Mobile: Top header + horizontal tabs */}
+				<div className="flex md:hidden flex-col shrink-0">
+					<div className="px-4 pt-4 pb-2">
+						<h2 className="text-base font-semibold">{title}</h2>
+					</div>
+					<div
+						className="overflow-x-auto scrollbar-hide border-b border-border"
+						onScroll={handleTabScroll}
+						style={{
+							maskImage: `linear-gradient(to right, ${tabScrollPos === "start" ? "black" : "transparent"}, black 24px, black calc(100% - 24px), ${tabScrollPos === "end" ? "black" : "transparent"})`,
+							WebkitMaskImage: `linear-gradient(to right, ${tabScrollPos === "start" ? "black" : "transparent"}, black 24px, black calc(100% - 24px), ${tabScrollPos === "end" ? "black" : "transparent"})`,
+						}}
+					>
+						<div className="flex gap-1 px-4 pb-2">
+							{navItems.map((item) => (
+								<button
+									key={item.value}
+									ref={activeItem === item.value ? activeRef : undefined}
+									type="button"
+									onClick={() => handleItemChange(item.value)}
+									className={cn(
+									"flex items-center gap-2 whitespace-nowrap rounded-full px-3 py-1.5 text-xs font-medium transition-colors shrink-0 focus:outline-none focus-visible:outline-none",
+									activeItem === item.value
+										? "bg-accent text-accent-foreground"
+										: "text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+								)}
+								>
+									{item.icon}
+									{item.label}
+								</button>
+							))}
+						</div>
+					</div>
+				</div>
+
+				{/* Content area */}
+				<div className="flex flex-1 flex-col overflow-hidden min-w-0">
+					<div className="hidden md:block px-8 pt-6 pb-2">
+						<h2 className="text-lg font-semibold">
+							{navItems.find((i) => i.value === activeItem)?.label ?? title}
+						</h2>
+						<Separator className="mt-4" />
+					</div>
+					<div className="flex-1 overflow-y-auto overflow-x-hidden">
+						<div className="px-4 md:px-8 pb-6 pt-4 md:pt-0 min-w-0">{children}</div>
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+}