Refactor dashboard with smart redirect and AllSearchSpacesSheet

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");
-	}, [router]);
+		setIsCreateSearchSpaceDialogOpen(true);
+	}, []);
 
 	const handleSeeAllSearchSpaces = useCallback(() => {
-		router.push("/dashboard");
-	}, [router]);
+		setIsAllSearchSpacesSheetOpen(true);
+	}, []);
+
+	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 (
-		<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-0.5">
-							<SheetTitle>{t("all_search_spaces")}</SheetTitle>
-							<SheetDescription>
-								{t("search_spaces_count", { count: searchSpaces.length })}
-							</SheetDescription>
-						</div>
-					</div>
-				</SheetHeader>
+	const handleSettings = (e: React.MouseEvent, space: SearchSpace) => {
+		e.stopPropagation();
+		onOpenChange(false);
+		onSettings?.(space.id);
+	};
 
-				<div className="flex flex-1 flex-col gap-3 overflow-y-auto px-4 pb-4">
-					{searchSpaces.length === 0 ? (
-						<div className="flex flex-1 flex-col items-center justify-center gap-4 py-12 text-center">
-							<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 handleDeleteClick = (e: React.MouseEvent, space: SearchSpace) => {
+		e.stopPropagation();
+		setSpaceToDelete(space);
+	};
+
+	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">
-								<p className="font-medium">{t("no_search_spaces")}</p>
-								<p className="text-sm text-muted-foreground">
-									{t("create_first_search_space")}
-								</p>
+							<div className="flex flex-col gap-0.5">
+								<SheetTitle>{t("all_search_spaces")}</SheetTitle>
+								<SheetDescription>
+									{t("search_spaces_count", { count: searchSpaces.length })}
+								</SheetDescription>
 							</div>
-							{onCreateNew && (
-								<Button onClick={onCreateNew} className="mt-2">
-									{t("create_button")}
-								</Button>
-							)}
 						</div>
-					) : (
-						searchSpaces.map((space) => (
-							<button
-								key={space.id}
-								type="button"
-								onClick={() => handleSelect(space.id)}
-								className={cn(
-									"flex w-full flex-col gap-2 rounded-lg border p-4 text-left transition-colors",
-									"hover:bg-accent hover:border-accent-foreground/20",
-									activeSearchSpaceId === space.id &&
-										"border-primary bg-primary/5 hover:bg-primary/10"
+					</SheetHeader>
+
+					<div className="flex flex-1 flex-col gap-3 overflow-y-auto px-4 pb-4">
+						{searchSpaces.length === 0 ? (
+							<div className="flex flex-1 flex-col items-center justify-center gap-4 py-12 text-center">
+								<div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+									<Search className="h-8 w-8 text-muted-foreground" />
+								</div>
+								<div className="flex flex-col gap-1">
+									<p className="font-medium">{t("no_search_spaces")}</p>
+									<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 className="flex items-start justify-between gap-2">
-									<div className="flex flex-col gap-1">
-										<span className="font-medium leading-tight">
-											{space.name}
+							</div>
+						) : (
+							searchSpaces.map((space) => (
+								<button
+									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 && (
-											<span className="text-sm text-muted-foreground line-clamp-2">
-												{space.description}
+										{space.createdAt && (
+											<span className="flex items-center gap-1">
+												<Calendar className="h-3.5 w-3.5" />
+												{formatDate(space.createdAt)}
 											</span>
 										)}
 									</div>
-									{space.isOwner && (
-										<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>
+								</button>
+							))
+						)}
 					</div>
-				)}
-			</SheetContent>
-		</Sheet>
+
+					{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>
+			</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>
+		</>
 	);
 }
-