Refactor dashboard with smart redirect and AllSearchSpacesSheet

surfsense_web/app/dashboard/page.tsx

@@ -1,32 +1,14 @@
 "use client";
 
 import { useAtomValue } from "jotai";
-import { AlertCircle, Loader2, Plus, Search, Trash2, UserCheck, Users } from "lucide-react";
+import { AlertCircle, Loader2 } from "lucide-react";
-import { motion, type Variants } from "motion/react";
+import { motion } from "motion/react";
-import Image from "next/image";
-import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
-import { deleteSearchSpaceMutationAtom } from "@/atoms/search-spaces/search-space-mutation.atoms";
 import { searchSpacesAtom } from "@/atoms/search-spaces/search-space-query.atoms";
-import { currentUserAtom } from "@/atoms/user/user-query.atoms";
+import { CreateSearchSpaceDialog } from "@/components/layout";
-import { Logo } from "@/components/Logo";
-import { ThemeTogglerComponent } from "@/components/theme/theme-toggle";
-import { UserDropdown } from "@/components/UserDropdown";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -36,29 +18,11 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { Spotlight } from "@/components/ui/spotlight";
-import { Tilt } from "@/components/ui/tilt";
 
-/**
+function LoadingScreen() {
- * Formats a date string into a readable format
- * @param dateString - The date string to format
- * @returns Formatted date string (e.g., "Jan 1, 2023")
- */
-const formatDate = (dateString: string): string => {
-	return new Date(dateString).toLocaleDateString("en-US", {
-		year: "numeric",
-		month: "short",
-		day: "numeric",
-	});
-};
-
-/**
- * Loading screen component with animation
- */
-const LoadingScreen = () => {
 	const t = useTranslations("dashboard");
 	return (
-		<div className="flex flex-col items-center justify-center min-h-[60vh] space-y-4">
+		<div className="flex min-h-screen flex-col items-center justify-center gap-4">
 			<motion.div
 				initial={{ opacity: 0, scale: 0.8 }}
 				animate={{ opacity: 1, scale: 1 }}
@@ -72,7 +36,7 @@ const LoadingScreen = () => {
 					<CardContent className="flex justify-center py-6">
 						<motion.div
 							animate={{ rotate: 360 }}
-							transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
+							transition={{ duration: 1.5, repeat: Number.POSITIVE_INFINITY, ease: "linear" }}
 						>
 							<Loader2 className="h-12 w-12 text-primary" />
 						</motion.div>
@@ -84,23 +48,20 @@ const LoadingScreen = () => {
 			</motion.div>
 		</div>
 	);
-};
+}
 
-/**
+function ErrorScreen({ message }: { message: string }) {
- * Error screen component with animation
- */
-const ErrorScreen = ({ message }: { message: string }) => {
 	const t = useTranslations("dashboard");
 	const router = useRouter();
 
 	return (
-		<div className="flex flex-col items-center justify-center min-h-[60vh] space-y-4">
+		<div className="flex min-h-screen flex-col items-center justify-center gap-4">
 			<motion.div
 				initial={{ opacity: 0, y: 20 }}
 				animate={{ opacity: 1, y: 0 }}
 				transition={{ duration: 0.5 }}
 			>
-				<Card className="w-full max-w-[400px] bg-background/60 backdrop-blur-sm border-destructive/20">
+				<Card className="w-full max-w-[400px] border-destructive/20 bg-background/60 backdrop-blur-sm">
 					<CardHeader className="pb-2">
 						<div className="flex items-center gap-2">
 							<AlertCircle className="h-5 w-5 text-destructive" />
@@ -109,7 +70,7 @@ const ErrorScreen = ({ message }: { message: string }) => {
 						<CardDescription>{t("something_wrong")}</CardDescription>
 					</CardHeader>
 					<CardContent>
-						<Alert variant="destructive" className="bg-destructive/10 border-destructive/30">
+						<Alert variant="destructive" className="border-destructive/30 bg-destructive/10">
 							<AlertCircle className="h-4 w-4" />
 							<AlertTitle>{t("error_details")}</AlertTitle>
 							<AlertDescription className="mt-2">{message}</AlertDescription>
@@ -125,269 +86,42 @@ const ErrorScreen = ({ message }: { message: string }) => {
 			</motion.div>
 		</div>
 	);
-};
+}
 
-const DashboardPage = () => {
+export default function DashboardPage() {
-	const t = useTranslations("dashboard");
-	const tCommon = useTranslations("common");
 	const router = useRouter();
-
+	const [showCreateDialog, setShowCreateDialog] = useState(false);
-	// Animation variants
-	const containerVariants: Variants = {
-		hidden: { opacity: 0 },
-		visible: {
-			opacity: 1,
-			transition: {
-				staggerChildren: 0.1,
-			},
-		},
-	};
-
-	const itemVariants: Variants = {
-		hidden: { y: 20, opacity: 0 },
-		visible: {
-			y: 0,
-			opacity: 1,
-			transition: {
-				type: "spring",
-				stiffness: 300,
-				damping: 24,
-			},
-		},
-	};
 
 	const {
 		data: searchSpaces = [],
-		isLoading: loading,
+		isLoading,
 		error,
-		refetch: refreshSearchSpaces,
 	} = useAtomValue(searchSpacesAtom);
-	const { mutateAsync: deleteSearchSpace } = useAtomValue(deleteSearchSpaceMutationAtom);
 
-	const { data: user, isPending: isLoadingUser, error: userError } = useAtomValue(currentUserAtom);
-
-	// Auto-redirect to chat for users with exactly 1 search space
 	useEffect(() => {
-		if (loading) return;
+		if (isLoading) return;
 
-		if (searchSpaces.length === 1) {
+		if (searchSpaces.length === 0) {
+			setShowCreateDialog(true);
+		} else {
 			router.replace(`/dashboard/${searchSpaces[0].id}/new-chat`);
 		}
-	}, [loading, searchSpaces, router]);
+	}, [isLoading, searchSpaces, router]);
 
-	// Create user object for UserDropdown
+	const handleDialogChange = (open: boolean) => {
-	const customUser = {
+		setShowCreateDialog(open);
-		name: user?.email ? user.email.split("@")[0] : "User",
-		email:
-			user?.email ||
-			(isLoadingUser ? "Loading..." : userError ? "Error loading user" : "Unknown User"),
-		avatar: "/icon-128.svg", // Default avatar
 	};
 
-	// Show loading while loading or auto-redirecting (single search space)
+	if (isLoading) return <LoadingScreen />;
-	if (loading || (searchSpaces.length === 1 && !error)) return <LoadingScreen />;
 	if (error) return <ErrorScreen message={error?.message || "Failed to load search spaces"} />;
 
-	const handleDeleteSearchSpace = async (id: number) => {
+	if (searchSpaces.length > 0) {
-		await deleteSearchSpace({ id });
+		return <LoadingScreen />;
-		refreshSearchSpaces();
+	}
-	};
 
 	return (
-		<motion.div
+		<div className="flex min-h-screen flex-col items-center justify-center">
-			className="container mx-auto py-6 md:py-10 px-4"
+			<CreateSearchSpaceDialog open={showCreateDialog} onOpenChange={handleDialogChange} />
-			initial="hidden"
+		</div>
-			animate="visible"
-			variants={containerVariants}
-		>
-			<motion.div className="flex flex-col space-y-4 md:space-y-6" variants={itemVariants}>
-				<div className="flex flex-row items-center justify-between gap-2">
-					<div className="flex flex-row items-center md:space-x-4">
-						<Logo className="w-8 h-8 md:w-10 md:h-10 rounded-md shrink-0 hidden md:block" />
-						<div className="flex flex-col space-y-0.5 md:space-y-2">
-							<h1 className="text-xl md:text-4xl font-bold">{t("surfsense_dashboard")}</h1>
-							<p className="text-sm md:text-base text-muted-foreground">{t("welcome_message")}</p>
-						</div>
-					</div>
-					<div className="flex items-center space-x-2 md:space-x-3 shrink-0">
-						<UserDropdown user={customUser} />
-						<ThemeTogglerComponent />
-					</div>
-				</div>
-
-				<div className="flex flex-col space-y-6 mt-6">
-					<div className="flex justify-between items-center">
-						<h2 className="text-lg md:text-2xl font-semibold">{t("your_search_spaces")}</h2>
-						<motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
-							<Link href="/dashboard/searchspaces">
-								<Button className="h-8 md:h-10 text-[11px] md:text-sm px-3 md:px-4">
-									<Plus className="mr-1 md:mr-2 h-3 w-3 md:h-4 md:w-4" />
-									{t("create_search_space")}
-								</Button>
-							</Link>
-						</motion.div>
-					</div>
-
-					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
-						{searchSpaces &&
-							searchSpaces.length > 0 &&
-							searchSpaces.map((space) => (
-								<motion.div key={space.id} variants={itemVariants} className="aspect-4/3">
-									<Tilt
-										rotationFactor={6}
-										isRevese
-										springOptions={{
-											stiffness: 26.7,
-											damping: 4.1,
-											mass: 0.2,
-										}}
-										className="group relative rounded-lg h-full"
-									>
-										<Spotlight
-											className="z-10 from-blue-500/20 via-blue-300/10 to-blue-200/5 blur-2xl"
-											size={248}
-											springOptions={{
-												stiffness: 26.7,
-												damping: 4.1,
-												mass: 0.2,
-											}}
-										/>
-										<div className="flex flex-col h-full justify-between overflow-hidden rounded-xl border bg-muted/30 backdrop-blur-sm transition-all hover:border-primary/50">
-											<div className="relative h-32 w-full overflow-hidden">
-												<Link href={`/dashboard/${space.id}/new-chat`} key={space.id}>
-													<Image
-														src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
-														alt={space.name}
-														className="h-full w-full object-cover grayscale duration-700 group-hover:grayscale-0"
-														width={248}
-														height={248}
-													/>
-													<div className="absolute inset-0 bg-gradient-to-t from-background/80 to-transparent" />
-												</Link>
-												<div className="absolute top-2 right-2">
-													<div>
-														<AlertDialog>
-															<AlertDialogTrigger asChild>
-																<Button
-																	variant="ghost"
-																	size="icon"
-																	className="h-8 w-8 rounded-full bg-background/50 backdrop-blur-sm hover:bg-destructive/90 cursor-pointer"
-																>
-																	<Trash2 className="h-4 w-4" />
-																</Button>
-															</AlertDialogTrigger>
-															<AlertDialogContent>
-																<AlertDialogHeader>
-																	<AlertDialogTitle>{t("delete_search_space")}</AlertDialogTitle>
-																	<AlertDialogDescription>
-																		{t("delete_space_confirm", { name: space.name })}
-																	</AlertDialogDescription>
-																</AlertDialogHeader>
-																<AlertDialogFooter>
-																	<AlertDialogCancel>{tCommon("cancel")}</AlertDialogCancel>
-																	<AlertDialogAction
-																		onClick={() => handleDeleteSearchSpace(space.id)}
-																		className="bg-destructive hover:bg-destructive/90"
-																	>
-																		{tCommon("delete")}
-																	</AlertDialogAction>
-																</AlertDialogFooter>
-															</AlertDialogContent>
-														</AlertDialog>
-													</div>
-												</div>
-											</div>
-											<Link
-												className="flex flex-1 flex-col p-4 cursor-pointer"
-												href={`/dashboard/${space.id}/new-chat`}
-												key={space.id}
-											>
-												<div className="flex flex-1 flex-col justify-between p-1">
-													<div>
-														<div className="flex items-center gap-2">
-															<h3 className="font-medium text-base md:text-lg">{space.name}</h3>
-															{!space.is_owner && (
-																<Badge
-																	variant="secondary"
-																	className="text-[10px] md:text-xs font-normal"
-																>
-																	{t("shared")}
-																</Badge>
-															)}
-														</div>
-														<p className="mt-1 text-xs md:text-sm text-muted-foreground">
-															{space.description}
-														</p>
-													</div>
-													<div className="mt-4 flex items-center justify-between text-xs text-muted-foreground">
-														<span>
-															{t("created")} {formatDate(space.created_at)}
-														</span>
-														<div className="flex items-center gap-1">
-															{space.is_owner ? (
-																<UserCheck className="h-3.5 w-3.5" />
-															) : (
-																<Users className="h-3.5 w-3.5" />
-															)}
-															<span>{space.member_count}</span>
-														</div>
-													</div>
-												</div>
-											</Link>
-										</div>
-									</Tilt>
-								</motion.div>
-							))}
-
-						{searchSpaces.length === 0 && (
-							<motion.div
-								variants={itemVariants}
-								className="col-span-full flex flex-col items-center justify-center p-12 text-center"
-							>
-								<div className="rounded-full bg-muted/50 p-4 mb-4">
-									<Search className="h-8 w-8 text-muted-foreground" />
-								</div>
-								<h3 className="text-base md:text-lg font-medium mb-2">{t("no_spaces_found")}</h3>
-								<p className="text-xs md:text-sm text-muted-foreground mb-6">
-									{t("create_first_space")}
-								</p>
-								<Link href="/dashboard/searchspaces">
-									<Button>
-										<Plus className="mr-2 h-4 w-4" />
-										{t("create_search_space")}
-									</Button>
-								</Link>
-							</motion.div>
-						)}
-
-						{searchSpaces.length > 0 && (
-							<motion.div variants={itemVariants} className="aspect-[4/3]">
-								<Tilt
-									rotationFactor={6}
-									isRevese
-									springOptions={{
-										stiffness: 26.7,
-										damping: 4.1,
-										mass: 0.2,
-									}}
-									className="group relative rounded-lg h-full"
-								>
-									<Link href="/dashboard/searchspaces" className="flex h-full">
-										<div className="flex flex-col items-center justify-center h-full w-full rounded-xl border border-dashed bg-muted/10 hover:border-primary/50 transition-colors">
-											<Plus className="h-8 w-8 md:h-10 md:w-10 mb-2 md:mb-3 text-muted-foreground" />
-											<span className="text-xs md:text-sm font-medium">
-												{t("add_new_search_space")}
-											</span>
-										</div>
-									</Link>
-								</Tilt>
-							</motion.div>
-						)}
-					</div>
-				</div>
-			</motion.div>
-		</motion.div>
 	);
-};
+}
-
-export default DashboardPage;

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -8,6 +8,7 @@ import { useTranslations } from "next-intl";
 import { useTheme } from "next-themes";
 import { useCallback, useMemo, useState } from "react";
 import { hasUnsavedEditorChangesAtom, pendingEditorNavigationAtom } from "@/atoms/editor/ui.atoms";
+import { deleteSearchSpaceMutationAtom } from "@/atoms/search-spaces/search-space-mutation.atoms";
 import { searchSpacesAtom } from "@/atoms/search-spaces/search-space-query.atoms";
 import { currentUserAtom } from "@/atoms/user/user-query.atoms";
 import { Button } from "@/components/ui/button";
@@ -26,7 +27,9 @@ import { deleteThread, fetchThreads } from "@/lib/chat/thread-persistence";
 import { resetUser, trackLogout } from "@/lib/posthog/events";
 import { cacheKeys } from "@/lib/query-client/cache-keys";
 import type { ChatItem, NavItem, NoteItem, SearchSpace } from "../types/layout.types";
+import { CreateSearchSpaceDialog } from "../ui/dialogs";
 import { LayoutShell } from "../ui/shell";
+import { AllSearchSpacesSheet } from "../ui/sheets";
 import { AllChatsSidebar } from "../ui/sidebar/AllChatsSidebar";
 import { AllNotesSidebar } from "../ui/sidebar/AllNotesSidebar";
 
@@ -53,7 +56,8 @@ export function LayoutDataProvider({
 
 	// Atoms
 	const { data: user } = useAtomValue(currentUserAtom);
-	const { data: searchSpacesData } = useAtomValue(searchSpacesAtom);
+	const { data: searchSpacesData, refetch: refetchSearchSpaces } = useAtomValue(searchSpacesAtom);
+	const { mutateAsync: deleteSearchSpace } = useAtomValue(deleteSearchSpaceMutationAtom);
 	const hasUnsavedEditorChanges = useAtomValue(hasUnsavedEditorChangesAtom);
 	const setPendingNavigation = useSetAtom(pendingEditorNavigationAtom);
 
@@ -110,6 +114,10 @@ export function LayoutDataProvider({
 	const [isAllChatsSidebarOpen, setIsAllChatsSidebarOpen] = useState(false);
 	const [isAllNotesSidebarOpen, setIsAllNotesSidebarOpen] = useState(false);
 
+	// Search space sheet and dialog state
+	const [isAllSearchSpacesSheetOpen, setIsAllSearchSpacesSheetOpen] = useState(false);
+	const [isCreateSearchSpaceDialogOpen, setIsCreateSearchSpaceDialogOpen] = useState(false);
+
 	// Delete dialogs state
 	const [showDeleteChatDialog, setShowDeleteChatDialog] = useState(false);
 	const [chatToDelete, setChatToDelete] = useState<{ id: number; name: string } | null>(null);
@@ -123,7 +131,6 @@ export function LayoutDataProvider({
 	} | null>(null);
 	const [isDeletingNote, setIsDeletingNote] = useState(false);
 
-	// Transform search spaces (API returns array directly, not { items: [...] })
 	const searchSpaces: SearchSpace[] = useMemo(() => {
 		if (!searchSpacesData || !Array.isArray(searchSpacesData)) return [];
 		return searchSpacesData.map((space) => ({
@@ -132,6 +139,7 @@ export function LayoutDataProvider({
 			description: space.description,
 			isOwner: space.is_owner,
 			memberCount: space.member_count || 0,
+			createdAt: space.created_at,
 		}));
 	}, [searchSpacesData]);
 
@@ -204,12 +212,35 @@ export function LayoutDataProvider({
 	);
 
 	const handleAddSearchSpace = useCallback(() => {
-		router.push("/dashboard/searchspaces");
+		setIsCreateSearchSpaceDialogOpen(true);
-	}, [router]);
+	}, []);
 
 	const handleSeeAllSearchSpaces = useCallback(() => {
-		router.push("/dashboard");
+		setIsAllSearchSpacesSheetOpen(true);
-	}, [router]);
+	}, []);
+
+	const handleSearchSpaceSettings = useCallback(
+		(id: number) => {
+			router.push(`/dashboard/${id}/settings`);
+		},
+		[router]
+	);
+
+	const handleDeleteSearchSpace = useCallback(
+		async (id: number) => {
+			await deleteSearchSpace({ id });
+			refetchSearchSpaces();
+			if (Number(searchSpaceId) === id && searchSpaces.length > 1) {
+				const remaining = searchSpaces.filter((s) => s.id !== id);
+				if (remaining.length > 0) {
+					router.push(`/dashboard/${remaining[0].id}/new-chat`);
+				}
+			} else if (searchSpaces.length === 1) {
+				router.push("/dashboard");
+			}
+		},
+		[deleteSearchSpace, refetchSearchSpaces, searchSpaceId, searchSpaces, router]
+	);
 
 	const handleNavItemClick = useCallback(
 		(item: NavItem) => {
@@ -439,6 +470,26 @@ export function LayoutDataProvider({
 				onAddNote={handleAddNote}
 			/>
 
+			{/* All Search Spaces Sheet */}
+			<AllSearchSpacesSheet
+				open={isAllSearchSpacesSheetOpen}
+				onOpenChange={setIsAllSearchSpacesSheetOpen}
+				searchSpaces={searchSpaces}
+				onSearchSpaceSelect={handleSearchSpaceSelect}
+				onCreateNew={() => {
+					setIsAllSearchSpacesSheetOpen(false);
+					setIsCreateSearchSpaceDialogOpen(true);
+				}}
+				onSettings={handleSearchSpaceSettings}
+				onDelete={handleDeleteSearchSpace}
+			/>
+
+			{/* Create Search Space Dialog */}
+			<CreateSearchSpaceDialog
+				open={isCreateSearchSpaceDialogOpen}
+				onOpenChange={setIsCreateSearchSpaceDialogOpen}
+			/>
+
 			{/* Delete Note Dialog */}
 			<Dialog open={showDeleteNoteDialog} onOpenChange={setShowDeleteNoteDialog}>
 				<DialogContent className="sm:max-w-md">

surfsense_web/components/layout/types/layout.types.ts

@@ -6,6 +6,7 @@ export interface SearchSpace {
 	description?: string | null;
 	isOwner: boolean;
 	memberCount: number;
+	createdAt?: string;
 }
 
 export interface User {

surfsense_web/components/layout/ui/sheets/AllSearchSpacesSheet.tsx

@@ -1,9 +1,27 @@
 "use client";
 
-import { Crown, Search, Users } from "lucide-react";
+import { Calendar, MoreHorizontal, Search, Settings, Share2, Trash2, UserCheck, Users } from "lucide-react";
 import { useTranslations } from "next-intl";
+import { useState } from "react";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import {
 	Sheet,
 	SheetContent,
@@ -11,120 +29,208 @@ import {
 	SheetHeader,
 	SheetTitle,
 } from "@/components/ui/sheet";
-import { cn } from "@/lib/utils";
 import type { SearchSpace } from "../../types/layout.types";
 
+function formatDate(dateString: string): string {
+	return new Date(dateString).toLocaleDateString("en-US", {
+		year: "numeric",
+		month: "short",
+		day: "numeric",
+	});
+}
+
 interface AllSearchSpacesSheetProps {
 	open: boolean;
 	onOpenChange: (open: boolean) => void;
 	searchSpaces: SearchSpace[];
-	activeSearchSpaceId: number | null;
 	onSearchSpaceSelect: (id: number) => void;
 	onCreateNew?: () => void;
+	onSettings?: (id: number) => void;
+	onDelete?: (id: number) => void;
 }
 
 export function AllSearchSpacesSheet({
 	open,
 	onOpenChange,
 	searchSpaces,
-	activeSearchSpaceId,
 	onSearchSpaceSelect,
 	onCreateNew,
+	onSettings,
+	onDelete,
 }: AllSearchSpacesSheetProps) {
 	const t = useTranslations("searchSpace");
 	const tCommon = useTranslations("common");
 
+	const [spaceToDelete, setSpaceToDelete] = useState<SearchSpace | null>(null);
+
 	const handleSelect = (id: number) => {
 		onSearchSpaceSelect(id);
 		onOpenChange(false);
 	};
 
-	return (
+	const handleSettings = (e: React.MouseEvent, space: SearchSpace) => {
-		<Sheet open={open} onOpenChange={onOpenChange}>
+		e.stopPropagation();
-			<SheetContent side="right" className="w-full sm:max-w-md">
+		onOpenChange(false);
-				<SheetHeader>
+		onSettings?.(space.id);
-					<div className="flex items-center gap-3">
+	};
-						<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
-							<Search className="h-5 w-5 text-primary" />
-						</div>
-						<div className="flex flex-col gap-0.5">
-							<SheetTitle>{t("all_search_spaces")}</SheetTitle>
-							<SheetDescription>
-								{t("search_spaces_count", { count: searchSpaces.length })}
-							</SheetDescription>
-						</div>
-					</div>
-				</SheetHeader>
 
-				<div className="flex flex-1 flex-col gap-3 overflow-y-auto px-4 pb-4">
+	const handleDeleteClick = (e: React.MouseEvent, space: SearchSpace) => {
-					{searchSpaces.length === 0 ? (
+		e.stopPropagation();
-						<div className="flex flex-1 flex-col items-center justify-center gap-4 py-12 text-center">
+		setSpaceToDelete(space);
-							<div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+	};
-								<Search className="h-8 w-8 text-muted-foreground" />
+
+	const confirmDelete = () => {
+		if (spaceToDelete) {
+			onDelete?.(spaceToDelete.id);
+			setSpaceToDelete(null);
+		}
+	};
+
+	return (
+		<>
+			<Sheet open={open} onOpenChange={onOpenChange}>
+				<SheetContent side="right" className="w-full sm:max-w-md">
+					<SheetHeader>
+						<div className="flex items-center gap-3">
+							<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+								<Search className="h-5 w-5 text-primary" />
 							</div>
-							<div className="flex flex-col gap-1">
+							<div className="flex flex-col gap-0.5">
-								<p className="font-medium">{t("no_search_spaces")}</p>
+								<SheetTitle>{t("all_search_spaces")}</SheetTitle>
-								<p className="text-sm text-muted-foreground">
+								<SheetDescription>
-									{t("create_first_search_space")}
+									{t("search_spaces_count", { count: searchSpaces.length })}
-								</p>
+								</SheetDescription>
 							</div>
-							{onCreateNew && (
-								<Button onClick={onCreateNew} className="mt-2">
-									{t("create_button")}
-								</Button>
-							)}
 						</div>
-					) : (
+					</SheetHeader>
-						searchSpaces.map((space) => (
+
-							<button
+					<div className="flex flex-1 flex-col gap-3 overflow-y-auto px-4 pb-4">
-								key={space.id}
+						{searchSpaces.length === 0 ? (
-								type="button"
+							<div className="flex flex-1 flex-col items-center justify-center gap-4 py-12 text-center">
-								onClick={() => handleSelect(space.id)}
+								<div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted">
-								className={cn(
+									<Search className="h-8 w-8 text-muted-foreground" />
-									"flex w-full flex-col gap-2 rounded-lg border p-4 text-left transition-colors",
+								</div>
-									"hover:bg-accent hover:border-accent-foreground/20",
+								<div className="flex flex-col gap-1">
-									activeSearchSpaceId === space.id &&
+									<p className="font-medium">{t("no_search_spaces")}</p>
-										"border-primary bg-primary/5 hover:bg-primary/10"
+									<p className="text-sm text-muted-foreground">
+										{t("create_first_search_space")}
+									</p>
+								</div>
+								{onCreateNew && (
+									<Button onClick={onCreateNew} className="mt-2">
+										{t("create_button")}
+									</Button>
 								)}
-							>
+							</div>
-								<div className="flex items-start justify-between gap-2">
+						) : (
-									<div className="flex flex-col gap-1">
+							searchSpaces.map((space) => (
-										<span className="font-medium leading-tight">
+								<button
-											{space.name}
+									key={space.id}
+									type="button"
+									onClick={() => handleSelect(space.id)}
+									className="flex w-full flex-col gap-2 rounded-lg border p-4 text-left transition-colors hover:bg-accent hover:border-accent-foreground/20"
+								>
+									<div className="flex items-start justify-between gap-2">
+										<div className="flex flex-1 flex-col gap-1">
+											<span className="font-medium leading-tight">
+												{space.name}
+											</span>
+											{space.description && (
+												<span className="text-sm text-muted-foreground line-clamp-2">
+													{space.description}
+												</span>
+											)}
+										</div>
+
+										<div className="flex shrink-0 items-center gap-2">
+										{space.memberCount > 1 && (
+											<Badge variant="outline" className="shrink-0">
+												<Share2 className="mr-1 h-3 w-3" />
+												{tCommon("shared")}
+											</Badge>
+										)}
+
+										{space.isOwner && (
+											<DropdownMenu>
+												<DropdownMenuTrigger asChild>
+													<Button
+														variant="ghost"
+														size="icon"
+														className="h-6 w-6 shrink-0"
+														onClick={(e) => e.stopPropagation()}
+													>
+														<MoreHorizontal className="h-4 w-4" />
+													</Button>
+												</DropdownMenuTrigger>
+												<DropdownMenuContent align="end">
+													<DropdownMenuItem onClick={(e) => handleSettings(e, space)}>
+														<Settings className="mr-2 h-4 w-4" />
+														{tCommon("settings")}
+													</DropdownMenuItem>
+													<DropdownMenuSeparator />
+													<DropdownMenuItem
+														onClick={(e) => handleDeleteClick(e, space)}
+														className="text-destructive focus:text-destructive"
+													>
+														<Trash2 className="mr-2 h-4 w-4" />
+														{tCommon("delete")}
+													</DropdownMenuItem>
+												</DropdownMenuContent>
+											</DropdownMenu>
+										)}
+									</div>
+									</div>
+
+									<div className="flex items-center gap-4 text-xs text-muted-foreground">
+										<span className="flex items-center gap-1">
+											{space.isOwner ? (
+												<UserCheck className="h-3.5 w-3.5" />
+											) : (
+												<Users className="h-3.5 w-3.5" />
+											)}
+											{t("members_count", { count: space.memberCount })}
 										</span>
-										{space.description && (
+										{space.createdAt && (
-											<span className="text-sm text-muted-foreground line-clamp-2">
+											<span className="flex items-center gap-1">
-												{space.description}
+												<Calendar className="h-3.5 w-3.5" />
+												{formatDate(space.createdAt)}
 											</span>
 										)}
 									</div>
-									{space.isOwner && (
+								</button>
-										<Badge variant="secondary" className="shrink-0">
+							))
-											<Crown className="mr-1 h-3 w-3" />
+						)}
-											{tCommon("owner")}
-										</Badge>
-									)}
-								</div>
-								<div className="flex items-center gap-4 text-xs text-muted-foreground">
-									<span className="flex items-center gap-1">
-										<Users className="h-3.5 w-3.5" />
-										{t("members_count", { count: space.memberCount })}
-									</span>
-								</div>
-							</button>
-						))
-					)}
-				</div>
-
-				{searchSpaces.length > 0 && onCreateNew && (
-					<div className="border-t p-4">
-						<Button onClick={onCreateNew} variant="outline" className="w-full">
-							{t("create_new_search_space")}
-						</Button>
 					</div>
-				)}
+
-			</SheetContent>
+					{searchSpaces.length > 0 && onCreateNew && (
-		</Sheet>
+						<div className="border-t p-4">
+							<Button onClick={onCreateNew} variant="outline" className="w-full">
+								{t("create_new_search_space")}
+							</Button>
+						</div>
+					)}
+				</SheetContent>
+			</Sheet>
+
+			<AlertDialog open={!!spaceToDelete} onOpenChange={(open) => !open && setSpaceToDelete(null)}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>{t("delete_title")}</AlertDialogTitle>
+						<AlertDialogDescription>
+							{t("delete_confirm", { name: spaceToDelete?.name })}
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>{tCommon("cancel")}</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={confirmDelete}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							{tCommon("delete")}
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</>
 	);
 }
-

surfsense_web/messages/en.json

@@ -29,7 +29,9 @@
 		"required": "Required",
 		"optional": "Optional",
 		"retry": "Retry",
-		"owner": "Owner"
+		"owner": "Owner",
+		"shared": "Shared",
+		"settings": "Settings"
 	},
 	"auth": {
 		"login": "Login",
@@ -92,7 +94,9 @@
 		"no_search_spaces": "No search spaces yet",
 		"create_first_search_space": "Create your first search space to get started",
 		"members_count": "{count, plural, =1 {1 member} other {# members}}",
-		"create_new_search_space": "Create new search space"
+		"create_new_search_space": "Create new search space",
+		"delete_title": "Delete Search Space",
+		"delete_confirm": "Are you sure you want to delete \"{name}\"? This action cannot be undone and will permanently remove all data."
 	},
 	"dashboard": {
 		"title": "Dashboard",

surfsense_web/messages/zh.json

@@ -29,7 +29,9 @@
 		"required": "必填",
 		"optional": "可选",
 		"retry": "重试",
-		"owner": "所有者"
+		"owner": "所有者",
+		"shared": "共享",
+		"settings": "设置"
 	},
 	"auth": {
 		"login": "登录",
@@ -92,7 +94,9 @@
 		"no_search_spaces": "暂无搜索空间",
 		"create_first_search_space": "创建您的第一个搜索空间以开始使用",
 		"members_count": "{count, plural, other {# 位成员}}",
-		"create_new_search_space": "创建新的搜索空间"
+		"create_new_search_space": "创建新的搜索空间",
+		"delete_title": "删除搜索空间",
+		"delete_confirm": "您确定要删除「{name}」吗？此操作无法撤销，将永久删除所有数据。"
 	},
 	"dashboard": {
 		"title": "仪表盘",