Merge pull request #589 from AnishSarkar22/feature/note-management

Feature: Note Management system

surfsense_web/components/sidebar/AppSidebarProvider.tsx

@@ -2,6 +2,7 @@
 
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { Trash2 } from "lucide-react";
+import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { deleteChatMutationAtom } from "@/atoms/chats/chat-mutation.atoms";
@@ -18,6 +19,7 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog";
 import { useQuery } from "@tanstack/react-query";
+import { notesApiService } from "@/lib/apis/notes-api.service";
 import { searchSpacesApiService } from "@/lib/apis/search-spaces-api.service";
 import { cacheKeys } from "@/lib/query-client/cache-keys";
 import { currentUserAtom } from "@/atoms/user/user-query.atoms";
@@ -48,6 +50,7 @@ export function AppSidebarProvider({
 }: AppSidebarProviderProps) {
 	const t = useTranslations("dashboard");
 	const tCommon = useTranslations("common");
+	const router = useRouter();
 	const setChatsQueryParams = useSetAtom(globalChatsQueryParamsAtom);
 	const { data: chats, error: chatError, isLoading: isLoadingChats } = useAtomValue(chatsAtom);
 	const [{ isPending: isDeletingChat, mutateAsync: deleteChat, error: deleteError }] =
@@ -70,6 +73,22 @@ export function AppSidebarProvider({
 
 	const { data: user } = useAtomValue(currentUserAtom);
 
+	// Fetch notes
+	const {
+		data: notesData,
+		error: notesError,
+		isLoading: isLoadingNotes,
+		refetch: refetchNotes,
+	} = useQuery({
+		queryKey: ["notes", searchSpaceId],
+		queryFn: () =>
+			notesApiService.getNotes({
+				search_space_id: Number(searchSpaceId),
+				page_size: 5, // Get 5 notes (changed from 10)
+			}),
+		enabled: !!searchSpaceId,
+	});
+
 	const [showDeleteDialog, setShowDeleteDialog] = useState(false);
 	const [chatToDelete, setChatToDelete] = useState<{ id: number; name: string } | null>(null);
 	const [isClient, setIsClient] = useState(false);
@@ -162,6 +181,53 @@ export function AppSidebarProvider({
 	// Use fallback chats if there's an error or no chats
 	const displayChats = recentChats.length > 0 ? recentChats : fallbackChats;
 
+	// Transform notes to the format expected by NavNotes
+	const recentNotes = useMemo(() => {
+		if (!notesData?.items) return [];
+
+		// Sort notes by updated_at (most recent first), fallback to created_at if updated_at is null
+		const sortedNotes = [...notesData.items].sort((a, b) => {
+			const dateA = a.updated_at
+				? new Date(a.updated_at).getTime()
+				: new Date(a.created_at).getTime();
+			const dateB = b.updated_at
+				? new Date(b.updated_at).getTime()
+				: new Date(b.created_at).getTime();
+			return dateB - dateA; // Descending order (most recent first)
+		});
+
+		// Limit to 5 notes
+		return sortedNotes.slice(0, 5).map((note) => ({
+			name: note.title,
+			url: `/dashboard/${note.search_space_id}/editor/${note.id}`,
+			icon: "FileText",
+			id: note.id,
+			search_space_id: note.search_space_id,
+			actions: [
+				{
+					name: "Delete",
+					icon: "Trash2",
+					onClick: async () => {
+						try {
+							await notesApiService.deleteNote({
+								search_space_id: note.search_space_id,
+								note_id: note.id,
+							});
+							refetchNotes();
+						} catch (error) {
+							console.error("Error deleting note:", error);
+						}
+					},
+				},
+			],
+		}));
+	}, [notesData, refetchNotes]);
+
+	// Handle add note
+	const handleAddNote = useCallback(() => {
+		router.push(`/dashboard/${searchSpaceId}/editor/new`);
+	}, [router, searchSpaceId]);
+
 	// Memoized updated navSecondary
 	const updatedNavSecondary = useMemo(() => {
 		const updated = [...navSecondary];
@@ -204,6 +270,7 @@ export function AppSidebarProvider({
 				navSecondary={navSecondary}
 				navMain={navMain}
 				RecentChats={[]}
+				RecentNotes={[]}
 				pageUsage={pageUsage}
 			/>
 		);
@@ -216,6 +283,8 @@ export function AppSidebarProvider({
 				navSecondary={updatedNavSecondary}
 				navMain={navMain}
 				RecentChats={displayChats}
+				RecentNotes={recentNotes}
+				onAddNote={handleAddNote}
 				pageUsage={pageUsage}
 			/>
 

surfsense_web/components/sidebar/all-notes-sidebar.tsx

@@ -0,0 +1,397 @@
+"use client";
+
+import { FileText, type LucideIcon, MoreHorizontal, Plus, RefreshCw, Trash2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useCallback, useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { notesApiService } from "@/lib/apis/notes-api.service";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarMenu,
+	SidebarMenuAction,
+	SidebarMenuButton,
+	SidebarMenuItem,
+} from "@/components/ui/sidebar";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+
+// Map of icon names to their components
+const actionIconMap: Record<string, LucideIcon> = {
+	FileText,
+	Trash2,
+	MoreHorizontal,
+	RefreshCw,
+};
+
+interface NoteAction {
+	name: string;
+	icon: string;
+	onClick: () => void;
+}
+
+interface NoteItem {
+	name: string;
+	url: string;
+	icon: LucideIcon;
+	id?: number;
+	search_space_id?: number;
+	actions?: NoteAction[];
+}
+
+interface AllNotesSidebarProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	searchSpaceId: string;
+	onAddNote?: () => void;
+	hoverTimeoutRef?: React.MutableRefObject<NodeJS.Timeout | null>;
+}
+
+export function AllNotesSidebar({
+	open,
+	onOpenChange,
+	searchSpaceId,
+	onAddNote,
+	hoverTimeoutRef,
+}: AllNotesSidebarProps) {
+	const t = useTranslations("sidebar");
+	const router = useRouter();
+	const [isDeleting, setIsDeleting] = useState<number | null>(null);
+	const sidebarRef = useRef<HTMLElement>(null);
+	const [sidebarLeft, setSidebarLeft] = useState(0); // Position from left edge of viewport
+
+	// Calculate the sidebar's right edge position
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+
+		const updatePosition = () => {
+			// Find the actual sidebar element (the fixed positioned one)
+			const sidebarElement = document.querySelector(
+				'[data-slot="sidebar"][data-sidebar="sidebar"]'
+			) as HTMLElement;
+
+			if (sidebarElement) {
+				const rect = sidebarElement.getBoundingClientRect();
+				// Set the left position to be the right edge of the sidebar
+				setSidebarLeft(rect.right);
+			} else {
+				// Fallback: try to find any sidebar element
+				const fallbackSidebar = document.querySelector('[data-slot="sidebar"]') as HTMLElement;
+				if (fallbackSidebar) {
+					const rect = fallbackSidebar.getBoundingClientRect();
+					setSidebarLeft(rect.right);
+				} else {
+					// Final fallback: use CSS variable
+					const sidebarWidth = getComputedStyle(document.documentElement)
+						.getPropertyValue("--sidebar-width")
+						.trim();
+					if (sidebarWidth) {
+						const remValue = parseFloat(sidebarWidth);
+						setSidebarLeft(remValue * 16); // Convert rem to px
+					} else {
+						setSidebarLeft(256); // Default 16rem
+					}
+				}
+			}
+		};
+
+		updatePosition();
+		// Update on window resize and scroll
+		window.addEventListener("resize", updatePosition);
+		window.addEventListener("scroll", updatePosition, true);
+
+		// Use MutationObserver to watch for sidebar state changes
+		const observer = new MutationObserver(updatePosition);
+		const sidebarWrapper = document.querySelector('[data-slot="sidebar-wrapper"]');
+		if (sidebarWrapper) {
+			observer.observe(sidebarWrapper, {
+				attributes: true,
+				attributeFilter: ["data-state", "class"],
+				childList: true,
+				subtree: true,
+			});
+		}
+
+		// Also observe the sidebar element directly if it exists
+		const sidebarElement = document.querySelector('[data-slot="sidebar"]');
+		if (sidebarElement) {
+			observer.observe(sidebarElement, {
+				attributes: true,
+				attributeFilter: ["data-state", "class"],
+				childList: false,
+				subtree: false,
+			});
+		}
+
+		return () => {
+			window.removeEventListener("resize", updatePosition);
+			window.removeEventListener("scroll", updatePosition, true);
+			observer.disconnect();
+		};
+	}, []);
+
+	// Handle Escape key to close sidebar
+	useEffect(() => {
+		if (!open) return;
+
+		const handleEscape = (e: KeyboardEvent) => {
+			if (e.key === "Escape") {
+				onOpenChange(false);
+			}
+		};
+
+		window.addEventListener("keydown", handleEscape);
+		return () => window.removeEventListener("keydown", handleEscape);
+	}, [open, onOpenChange]);
+
+	// Fetch all notes
+	const {
+		data: notesData,
+		error: notesError,
+		isLoading: isLoadingNotes,
+		refetch: refetchNotes,
+	} = useQuery({
+		queryKey: ["all-notes", searchSpaceId],
+		queryFn: () =>
+			notesApiService.getNotes({
+				search_space_id: Number(searchSpaceId),
+				page_size: 1000, // Get all notes
+			}),
+		enabled: !!searchSpaceId && open, // Only fetch when sidebar is open
+	});
+
+	// Handle note deletion with loading state
+	const handleDeleteNote = useCallback(
+		async (noteId: number, deleteAction: () => void) => {
+			setIsDeleting(noteId);
+			try {
+				await deleteAction();
+				refetchNotes();
+			} finally {
+				setIsDeleting(null);
+			}
+		},
+		[refetchNotes]
+	);
+
+	// Transform notes to the format expected by the component
+	const allNotes = useMemo(() => {
+		return notesData?.items
+			? notesData.items.map((note) => ({
+					name: note.title,
+					url: `/dashboard/${note.search_space_id}/editor/${note.id}`,
+					icon: FileText as LucideIcon,
+					id: note.id,
+					search_space_id: note.search_space_id,
+					actions: [
+						{
+							name: "Delete",
+							icon: "Trash2",
+							onClick: async () => {
+								try {
+									await notesApiService.deleteNote({
+										search_space_id: note.search_space_id,
+										note_id: note.id,
+									});
+								} catch (error) {
+									console.error("Error deleting note:", error);
+								}
+							},
+						},
+					],
+				}))
+			: [];
+	}, [notesData]);
+
+	// Enhanced note item component
+	const NoteItemComponent = useCallback(
+		({ note }: { note: NoteItem }) => {
+			const isDeletingNote = isDeleting === note.id;
+
+			return (
+				<SidebarMenuItem key={note.id ? `note-${note.id}` : `note-${note.name}`}>
+					<SidebarMenuButton
+						onClick={() => {
+							router.push(note.url);
+							onOpenChange(false); // Close sidebar when navigating
+						}}
+						disabled={isDeletingNote}
+						className={cn("group/item relative", isDeletingNote && "opacity-50")}
+					>
+						<note.icon className="h-4 w-4 shrink-0" />
+						<span className={cn("truncate", isDeletingNote && "opacity-50")}>{note.name}</span>
+					</SidebarMenuButton>
+
+					{note.actions && note.actions.length > 0 && (
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<SidebarMenuAction
+									showOnHover
+									className="opacity-0 group-hover/item:opacity-100 transition-opacity"
+								>
+									<MoreHorizontal className="h-4 w-4" />
+									<span className="sr-only">More</span>
+								</SidebarMenuAction>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent className="w-48" side="left" align="start">
+								{note.actions.map((action, actionIndex) => {
+									const ActionIcon = actionIconMap[action.icon] || FileText;
+									const isDeleteAction = action.name.toLowerCase().includes("delete");
+
+									return (
+										<DropdownMenuItem
+											key={`${action.name}-${actionIndex}`}
+											onClick={() => {
+												if (isDeleteAction) {
+													handleDeleteNote(note.id || 0, action.onClick);
+												} else {
+													action.onClick();
+												}
+											}}
+											disabled={isDeletingNote}
+											className={isDeleteAction ? "text-destructive" : ""}
+										>
+											<ActionIcon className="mr-2 h-4 w-4" />
+											<span>{isDeletingNote && isDeleteAction ? "Deleting..." : action.name}</span>
+										</DropdownMenuItem>
+									);
+								})}
+							</DropdownMenuContent>
+						</DropdownMenu>
+					)}
+				</SidebarMenuItem>
+			);
+		},
+		[isDeleting, router, onOpenChange, handleDeleteNote]
+	);
+
+	const sidebarContent = (
+		<section
+			ref={sidebarRef}
+			aria-label="All notes sidebar"
+			className={cn(
+				"fixed top-0 bottom-0 z-[100] w-80 bg-sidebar text-sidebar-foreground shadow-xl",
+				"transition-all duration-300 ease-out",
+				!open && "pointer-events-none"
+			)}
+			style={{
+				// Position it to slide from the right edge of the main sidebar
+				left: `${sidebarLeft}px`,
+				transform: open ? `scaleX(1)` : `scaleX(0)`,
+				transformOrigin: "left",
+				opacity: open ? 1 : 0,
+			}}
+			onMouseEnter={() => {
+				// Clear any pending close timeout when hovering over sidebar
+				if (hoverTimeoutRef?.current) {
+					clearTimeout(hoverTimeoutRef.current);
+					hoverTimeoutRef.current = null;
+				}
+			}}
+			onMouseLeave={() => {
+				// Close sidebar when mouse leaves
+				if (hoverTimeoutRef) {
+					hoverTimeoutRef.current = setTimeout(() => {
+						onOpenChange(false);
+					}, 200);
+				} else {
+					onOpenChange(false);
+				}
+			}}
+		>
+			<div className="flex h-full flex-col">
+				{/* Header */}
+				<div className="flex h-16 shrink-0 items-center justify-between px-4 border-b border-sidebar">
+					<h2 className="text-sm font-semibold">{t("all_notes") || "All Notes"}</h2>
+				</div>
+
+				{/* Content */}
+				<ScrollArea className="flex-1">
+					<div className="p-2">
+						<SidebarGroup>
+							<SidebarGroupContent>
+								{isLoadingNotes ? (
+									<SidebarMenuItem>
+										<SidebarMenuButton disabled>
+											<span className="text-xs text-muted-foreground">
+												{t("loading") || "Loading..."}
+											</span>
+										</SidebarMenuButton>
+									</SidebarMenuItem>
+								) : notesError ? (
+									<SidebarMenuItem>
+										<SidebarMenuButton disabled>
+											<span className="text-xs text-destructive">
+												{t("error_loading_notes") || "Error loading notes"}
+											</span>
+										</SidebarMenuButton>
+									</SidebarMenuItem>
+								) : allNotes.length > 0 ? (
+									<SidebarMenu className="list-none">
+										{allNotes.map((note) => (
+											<NoteItemComponent key={note.id || note.name} note={note} />
+										))}
+									</SidebarMenu>
+								) : (
+									<SidebarMenuItem className="list-none">
+										{onAddNote ? (
+											<SidebarMenuButton
+												onClick={() => {
+													onAddNote();
+													onOpenChange(false);
+												}}
+												className="text-muted-foreground hover:text-sidebar-foreground text-xs"
+											>
+												<Plus className="h-4 w-4" />
+												<span>{t("create_new_note") || "Create a new note"}</span>
+											</SidebarMenuButton>
+										) : (
+											<SidebarMenuButton disabled className="text-muted-foreground text-xs">
+												<FileText className="h-4 w-4" />
+												<span>{t("no_notes") || "No notes yet"}</span>
+											</SidebarMenuButton>
+										)}
+									</SidebarMenuItem>
+								)}
+							</SidebarGroupContent>
+						</SidebarGroup>
+					</div>
+				</ScrollArea>
+
+				{/* Footer with Add Note button */}
+				{onAddNote && (
+					<div className="p-2">
+						<Button
+							onClick={() => {
+								onAddNote();
+								onOpenChange(false);
+							}}
+							className="w-full"
+							size="sm"
+						>
+							<Plus className="mr-2 h-4 w-4" />
+							{t("create_new_note") || "Create a new note"}
+						</Button>
+					</div>
+				)}
+			</div>
+		</section>
+	);
+
+	// Render sidebar via portal to avoid stacking context issues
+	if (typeof window === "undefined") {
+		return null;
+	}
+
+	return createPortal(sidebarContent, document.body);
+}

surfsense_web/components/sidebar/app-sidebar.tsx

@@ -24,7 +24,6 @@ import {
 	UserPlus,
 	Users,
 } from "lucide-react";
-import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useTheme } from "next-themes";
 import { memo, useEffect, useMemo, useState } from "react";
@@ -116,6 +115,7 @@ function UserAvatar({ email, size = 32 }: { email: string; size?: number }) {
 }
 
 import { NavMain } from "@/components/sidebar/nav-main";
+import { NavNotes } from "@/components/sidebar/nav-notes";
 import { NavProjects } from "@/components/sidebar/nav-projects";
 import { NavSecondary } from "@/components/sidebar/nav-secondary";
 import { PageUsageDisplay } from "@/components/sidebar/page-usage-display";
@@ -139,13 +139,13 @@ export const iconMap: Record<string, LucideIcon> = {
 	MessageCircleMore,
 	Settings2,
 	SquareLibrary,
+	FileText,
 	SquareTerminal,
 	AlertCircle,
 	Info,
 	ExternalLink,
 	Trash2,
 	Podcast,
-	FileText,
 	Users,
 };
 
@@ -210,6 +210,20 @@ const defaultData = {
 			id: 1003,
 		},
 	],
+	RecentNotes: [
+		{
+			name: "Meeting Notes",
+			url: "#",
+			icon: "FileText",
+			id: 2001,
+		},
+		{
+			name: "Project Ideas",
+			url: "#",
+			icon: "FileText",
+			id: 2002,
+		},
+	],
 };
 
 interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
@@ -241,6 +255,18 @@ interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
 			onClick: () => void;
 		}[];
 	}[];
+	RecentNotes?: {
+		name: string;
+		url: string;
+		icon: string;
+		id?: number;
+		search_space_id?: number;
+		actions?: {
+			name: string;
+			icon: string;
+			onClick: () => void;
+		}[];
+	}[];
 	user?: {
 		name: string;
 		email: string;
@@ -250,6 +276,7 @@ interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
 		pagesUsed: number;
 		pagesLimit: number;
 	};
+	onAddNote?: () => void;
 }
 
 // Memoized AppSidebar component for better performance
@@ -258,7 +285,9 @@ export const AppSidebar = memo(function AppSidebar({
 	navMain = defaultData.navMain,
 	navSecondary = defaultData.navSecondary,
 	RecentChats = defaultData.RecentChats,
+	RecentNotes = defaultData.RecentNotes,
 	pageUsage,
+	onAddNote,
 	...props
 }: AppSidebarProps) {
 	const router = useRouter();
@@ -296,6 +325,16 @@ export const AppSidebar = memo(function AppSidebar({
 		);
 	}, [RecentChats]);
 
+	// Process RecentNotes to resolve icon names to components
+	const processedRecentNotes = useMemo(() => {
+		return (
+			RecentNotes?.map((item) => ({
+				...item,
+				icon: iconMap[item.icon] || FileText,
+			})) || []
+		);
+	}, [RecentNotes]);
+
 	// Get user display name from email
 	const userDisplayName = user?.email ? user.email.split("@")[0] : "User";
 	const userEmail = user?.email || (isLoadingUser ? "Loading..." : "Unknown");
@@ -413,6 +452,10 @@ export const AppSidebar = memo(function AppSidebar({
 						<NavProjects chats={processedRecentChats} />
 					</div>
 				)}
+
+				<div className="space-y-2">
+					<NavNotes notes={processedRecentNotes} onAddNote={onAddNote} searchSpaceId={searchSpaceId} />
+				</div>
 			</SidebarContent>
 			<SidebarFooter>
 				{pageUsage && (

surfsense_web/components/sidebar/nav-notes.tsx

@@ -0,0 +1,246 @@
+"use client";
+
+import {
+	ChevronRight,
+	ExternalLink,
+	Eye,
+	FileText,
+	type LucideIcon,
+	MoreHorizontal,
+	Plus,
+	RefreshCw,
+	Share,
+	Trash2,
+} from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useCallback, useState, useRef } from "react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarMenu,
+	SidebarMenuAction,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	useSidebar,
+} from "@/components/ui/sidebar";
+import { AllNotesSidebar } from "./all-notes-sidebar";
+
+// Map of icon names to their components
+const actionIconMap: Record<string, LucideIcon> = {
+	ExternalLink,
+	FileText,
+	Share,
+	Trash2,
+	MoreHorizontal,
+	RefreshCw,
+};
+
+interface NoteAction {
+	name: string;
+	icon: string;
+	onClick: () => void;
+}
+
+interface NoteItem {
+	name: string;
+	url: string;
+	icon: LucideIcon;
+	id?: number;
+	search_space_id?: number;
+	actions?: NoteAction[];
+}
+
+interface NavNotesProps {
+	notes: NoteItem[];
+	onAddNote?: () => void;
+	defaultOpen?: boolean;
+	searchSpaceId?: string;
+}
+
+export function NavNotes({ notes, onAddNote, defaultOpen = true, searchSpaceId }: NavNotesProps) {
+	const t = useTranslations("sidebar");
+	const { isMobile } = useSidebar();
+	const router = useRouter();
+	const [isDeleting, setIsDeleting] = useState<number | null>(null);
+	const [isOpen, setIsOpen] = useState(defaultOpen);
+	const [isAllNotesSidebarOpen, setIsAllNotesSidebarOpen] = useState(false);
+	const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+	// Handle note deletion with loading state
+	const handleDeleteNote = useCallback(async (noteId: number, deleteAction: () => void) => {
+		setIsDeleting(noteId);
+		try {
+			await deleteAction();
+		} finally {
+			setIsDeleting(null);
+		}
+	}, []);
+
+	// Enhanced note item component
+	const NoteItemComponent = useCallback(
+		({ note }: { note: NoteItem }) => {
+			const isDeletingNote = isDeleting === note.id;
+
+			return (
+				<SidebarMenuItem key={note.id ? `note-${note.id}` : `note-${note.name}`}>
+					<SidebarMenuButton
+						onClick={() => router.push(note.url)}
+						disabled={isDeletingNote}
+						className={`group/item relative ${isDeletingNote ? "opacity-50" : ""}`}
+					>
+						<note.icon className="h-4 w-4 shrink-0" />
+						<span className={`truncate ${isDeletingNote ? "opacity-50" : ""}`}>{note.name}</span>
+					</SidebarMenuButton>
+
+					{note.actions && note.actions.length > 0 && (
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<SidebarMenuAction
+									showOnHover
+									className="opacity-0 group-hover/item:opacity-100 transition-opacity"
+								>
+									<MoreHorizontal className="h-4 w-4" />
+									<span className="sr-only">More</span>
+								</SidebarMenuAction>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent
+								className="w-48"
+								side={isMobile ? "bottom" : "right"}
+								align={isMobile ? "end" : "start"}
+							>
+								{note.actions.map((action, actionIndex) => {
+									const ActionIcon = actionIconMap[action.icon] || FileText;
+									const isDeleteAction = action.name.toLowerCase().includes("delete");
+
+									return (
+										<DropdownMenuItem
+											key={`${action.name}-${actionIndex}`}
+											onClick={() => {
+												if (isDeleteAction) {
+													handleDeleteNote(note.id || 0, action.onClick);
+												} else {
+													action.onClick();
+												}
+											}}
+											disabled={isDeletingNote}
+											className={isDeleteAction ? "text-destructive" : ""}
+										>
+											<ActionIcon className="mr-2 h-4 w-4" />
+											<span>{isDeletingNote && isDeleteAction ? "Deleting..." : action.name}</span>
+										</DropdownMenuItem>
+									);
+								})}
+							</DropdownMenuContent>
+						</DropdownMenu>
+					)}
+				</SidebarMenuItem>
+			);
+		},
+		[isDeleting, router, isMobile, handleDeleteNote]
+	);
+
+	return (
+		<SidebarGroup className="group-data-[collapsible=icon]:hidden relative">
+			<Collapsible open={isOpen} onOpenChange={setIsOpen}>
+				<div className="flex items-center group/header relative">
+					<CollapsibleTrigger asChild>
+						<SidebarGroupLabel className="cursor-pointer rounded-md px-2 py-1.5 -mx-2 transition-colors flex items-center gap-1.5">
+							<ChevronRight
+								className={`h-3.5 w-3.5 text-muted-foreground transition-all duration-200 shrink-0 hover:text-sidebar-foreground ${
+									isOpen ? "rotate-90" : ""
+								}`}
+							/>
+							<span>{t("notes") || "Notes"}</span>
+						</SidebarGroupLabel>
+					</CollapsibleTrigger>
+					<div className="absolute top-1.5 right-1 flex items-center gap-0.5 opacity-0 group-hover/header:opacity-100 transition-opacity">
+						{searchSpaceId && notes.length > 0 && (
+							<button
+								type="button"
+								onMouseEnter={(e) => {
+									e.stopPropagation();
+									// Clear any pending close timeout
+									if (hoverTimeoutRef.current) {
+										clearTimeout(hoverTimeoutRef.current);
+										hoverTimeoutRef.current = null;
+									}
+									setIsAllNotesSidebarOpen(true);
+								}}
+								onMouseLeave={(e) => {
+									e.stopPropagation();
+									// Add a small delay before closing to allow moving to the sidebar
+									hoverTimeoutRef.current = setTimeout(() => {
+										setIsAllNotesSidebarOpen(false);
+									}, 200);
+								}}
+								aria-label="View all notes"
+								className="text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden relative"
+							>
+								<Eye className="h-4 w-4" />
+							</button>
+						)}
+						{onAddNote && (
+							<button
+								type="button"
+								onClick={(e) => {
+									e.stopPropagation();
+									onAddNote();
+								}}
+								aria-label="Add note"
+								className="text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden relative"
+							>
+								<Plus className="h-4 w-4" />
+							</button>
+						)}
+					</div>
+				</div>
+				<CollapsibleContent>
+					<SidebarGroupContent>
+						<SidebarMenu>
+							{/* Note Items */}
+							{notes.length > 0 ? (
+								notes.map((note) => <NoteItemComponent key={note.id || note.name} note={note} />)
+							) : (
+								/* Empty state with create button */
+								<SidebarMenuItem>
+									{onAddNote ? (
+										<SidebarMenuButton
+											onClick={onAddNote}
+											className="text-muted-foreground hover:text-sidebar-foreground text-xs"
+										>
+											<Plus className="h-4 w-4" />
+											<span>{t("create_new_note") || "Create a new note"}</span>
+										</SidebarMenuButton>
+									) : (
+										<SidebarMenuButton disabled className="text-muted-foreground text-xs">
+											<FileText className="h-4 w-4" />
+											<span>{t("no_notes") || "No notes yet"}</span>
+										</SidebarMenuButton>
+									)}
+								</SidebarMenuItem>
+							)}
+						</SidebarMenu>
+					</SidebarGroupContent>
+				</CollapsibleContent>
+			</Collapsible>
+			{searchSpaceId && (
+				<AllNotesSidebar
+					open={isAllNotesSidebarOpen}
+					onOpenChange={setIsAllNotesSidebarOpen}
+					searchSpaceId={searchSpaceId}
+					onAddNote={onAddNote}
+					hoverTimeoutRef={hoverTimeoutRef}
+				/>
+			)}
+		</SidebarGroup>
+	);
+}

surfsense_web/components/sidebar/nav-projects.tsx

@@ -148,19 +148,6 @@ export function NavProjects({ chats }: { chats: ChatItem[] }) {
 	return (
 		<SidebarGroup className="group-data-[collapsible=icon]:hidden">
 			<SidebarGroupLabel>{t("recent_chats")}</SidebarGroupLabel>
-
-			{/* Search Input */}
-			{showSearch && (
-				<div className="px-2 pb-2">
-					<SidebarInput
-						placeholder={t("search_chats")}
-						value={searchQuery}
-						onChange={(e) => setSearchQuery(e.target.value)}
-						className="h-8"
-					/>
-				</div>
-			)}
-
 			<SidebarMenu>
 				{/* Chat Items */}
 				{filteredChats.length > 0 ? (

surfsense_web/components/sidebar/page-usage-display.tsx

@@ -60,4 +60,4 @@ export function PageUsageDisplay({ pagesUsed, pagesLimit }: PageUsageDisplayProp
 			</SidebarGroupContent>
 		</SidebarGroup>
 	);
-}
+}