feat: implement responsive row action dropdowns and enhance mobile sidebar navigation

surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters.tsx

@@ -75,14 +75,14 @@ export function DocumentsFilters({
 
 	return (
 		<motion.div
-			className="flex flex-wrap items-center justify-between gap-3"
+			className="flex flex-wrap items-center justify-start gap-3 w-full"
 			initial={{ opacity: 0, y: 10 }}
 			animate={{ opacity: 1, y: 0 }}
 			transition={{ type: "spring", stiffness: 300, damping: 30, delay: 0.1 }}
 		>
-			<div className="flex items-center gap-3">
+			<div className="flex items-center gap-3 flex-wrap w-full sm:w-auto">
 				<motion.div
-					className="relative"
+					className="relative w-full sm:w-auto"
 					initial={{ opacity: 0, y: -10 }}
 					animate={{ opacity: 1, y: 0 }}
 					transition={{ type: "spring", stiffness: 300, damping: 30 }}
@@ -90,7 +90,7 @@ export function DocumentsFilters({
 					<Input
 						id={`${id}-input`}
 						ref={inputRef}
-						className="peer min-w-60 ps-9"
+						className="peer w-full sm:min-w-60 ps-9"
 						value={searchValue}
 						onChange={(e) => onSearch(e.target.value)}
 						placeholder={t("filter_placeholder")}
@@ -231,11 +231,11 @@ export function DocumentsFilters({
 				</DropdownMenu>
 			</div>
 
-			<div className="flex items-center gap-3">
+			<div className="flex items-center gap-3 w-full sm:w-auto sm:ml-auto">
 				{selectedIds.size > 0 && (
 					<AlertDialog>
 						<AlertDialogTrigger asChild>
-							<Button className="ml-auto" variant="outline">
+							<Button className="w-full sm:w-auto" variant="outline">
 								<Trash
 									className="-ms-1 me-2 opacity-60"
 									size={16}

surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx

@@ -83,8 +83,8 @@ export function DocumentsTableShell({
 
 	const toggleAll = (checked: boolean) => {
 		const next = new Set(selectedIds);
-		if (checked) sorted.forEach((d) => next.add(d.id));
-		else sorted.forEach((d) => next.delete(d.id));
+		if (checked) sorted.forEach((d) => { next.add(d.id); });
+		else sorted.forEach((d) => { next.delete(d.id); });
 		setSelectedIds(next);
 	};
 
@@ -323,26 +323,16 @@ export function DocumentsTableShell({
 							const icon = getDocumentTypeIcon(doc.document_type);
 							return (
 								<div key={doc.id} className="p-3">
-									<div className="flex items-start gap-3">
+									<div className="flex items-center gap-3">
 										<Checkbox
 											checked={selectedIds.has(doc.id)}
 											onCheckedChange={(v) => toggleOne(doc.id, !!v)}
 											aria-label="Select row"
 										/>
 										<div className="flex-1 min-w-0">
-											<div className="flex items-center justify-between gap-2">
-												<div className="flex items-center gap-2 min-w-0">
-													<span className="text-muted-foreground shrink-0">{icon}</span>
-													<div className="font-medium truncate">{doc.title}</div>
-												</div>
-												<RowActions
-													document={doc}
-													deleteDocument={deleteDocument}
-													refreshDocuments={async () => {
-														await onRefresh();
-													}}
-													searchSpaceId={searchSpaceId as string}
-												/>
+											<div className="flex items-center gap-2 min-w-0">
+												<span className="text-muted-foreground shrink-0">{icon}</span>
+												<div className="font-medium truncate">{doc.title}</div>
 											</div>
 											<div className="mt-1 flex flex-wrap items-center gap-2">
 												<DocumentTypeChip type={doc.document_type} />
@@ -371,6 +361,14 @@ export function DocumentsTableShell({
 												</div>
 											)}
 										</div>
+										<RowActions
+											document={doc}
+											deleteDocument={deleteDocument}
+											refreshDocuments={async () => {
+												await onRefresh();
+											}}
+											searchSpaceId={searchSpaceId as string}
+										/>
 									</div>
 								</div>
 							);

surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/RowActions.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FileText, Pencil, Trash2 } from "lucide-react";
+import { FileText, MoreHorizontal, Pencil, Trash2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -16,6 +16,12 @@ import {
 	AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import type { Document } from "./types";
 
@@ -57,53 +63,108 @@ export function RowActions({
 
 	return (
 		<div className="flex items-center justify-end gap-1">
-			{/* Edit Button */}
-			<Tooltip>
-				<TooltipTrigger asChild>
-					<motion.div
-						whileHover={{ scale: 1.1 }}
-						whileTap={{ scale: 0.95 }}
-						transition={{ type: "spring", stiffness: 400, damping: 17 }}
-					>
-						<Button
-							variant="ghost"
-							size="icon"
-							className="h-8 w-8 text-muted-foreground hover:text-foreground hover:bg-muted/80"
-							onClick={handleEdit}
+			{/* Desktop Actions */}
+			<div className="hidden md:flex items-center gap-1">
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<motion.div
+							whileHover={{ scale: 1.1 }}
+							whileTap={{ scale: 0.95 }}
+							transition={{ type: "spring", stiffness: 400, damping: 17 }}
 						>
-							<Pencil className="h-4 w-4" />
-							<span className="sr-only">Edit Document</span>
-						</Button>
-					</motion.div>
-				</TooltipTrigger>
-				<TooltipContent side="top">
-					<p>Edit Document</p>
-				</TooltipContent>
-			</Tooltip>
+							<Button
+								variant="ghost"
+								size="icon"
+								className="h-8 w-8 text-muted-foreground hover:text-foreground hover:bg-muted/80"
+								onClick={handleEdit}
+							>
+								<Pencil className="h-4 w-4" />
+								<span className="sr-only">Edit Document</span>
+							</Button>
+						</motion.div>
+					</TooltipTrigger>
+					<TooltipContent side="top">
+						<p>Edit Document</p>
+					</TooltipContent>
+				</Tooltip>
 
-			{/* View Metadata Button */}
-			<Tooltip>
-				<TooltipTrigger asChild>
-					<motion.div
-						whileHover={{ scale: 1.1 }}
-						whileTap={{ scale: 0.95 }}
-						transition={{ type: "spring", stiffness: 400, damping: 17 }}
-					>
-						<Button
-							variant="ghost"
-							size="icon"
-							className="h-8 w-8 text-muted-foreground hover:text-foreground hover:bg-muted/80"
-							onClick={() => setIsMetadataOpen(true)}
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<motion.div
+							whileHover={{ scale: 1.1 }}
+							whileTap={{ scale: 0.95 }}
+							transition={{ type: "spring", stiffness: 400, damping: 17 }}
 						>
-							<FileText className="h-4 w-4" />
-							<span className="sr-only">View Metadata</span>
+							<Button
+								variant="ghost"
+								size="icon"
+								className="h-8 w-8 text-muted-foreground hover:text-foreground hover:bg-muted/80"
+								onClick={() => setIsMetadataOpen(true)}
+							>
+								<FileText className="h-4 w-4" />
+								<span className="sr-only">View Metadata</span>
+							</Button>
+						</motion.div>
+					</TooltipTrigger>
+					<TooltipContent side="top">
+						<p>View Metadata</p>
+					</TooltipContent>
+				</Tooltip>
+
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<motion.div
+							whileHover={{ scale: 1.1 }}
+							whileTap={{ scale: 0.95 }}
+							transition={{ type: "spring", stiffness: 400, damping: 17 }}
+						>
+							<Button
+								variant="ghost"
+								size="icon"
+								className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+								onClick={() => setIsDeleteOpen(true)}
+								disabled={isDeleting}
+							>
+								<Trash2 className="h-4 w-4" />
+								<span className="sr-only">Delete</span>
+							</Button>
+						</motion.div>
+					</TooltipTrigger>
+					<TooltipContent side="top">
+						<p>Delete</p>
+					</TooltipContent>
+				</Tooltip>
+			</div>
+
+			{/* Mobile Actions Dropdown */}
+			<div className="flex md:hidden">
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground">
+							<MoreHorizontal className="h-4 w-4" />
+							<span className="sr-only">Open menu</span>
 						</Button>
-					</motion.div>
-				</TooltipTrigger>
-				<TooltipContent side="top">
-					<p>View Metadata</p>
-				</TooltipContent>
-			</Tooltip>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end" className="w-40">
+						<DropdownMenuItem onClick={handleEdit}>
+							<Pencil className="mr-2 h-4 w-4" />
+							<span>Edit</span>
+						</DropdownMenuItem>
+						<DropdownMenuItem onClick={() => setIsMetadataOpen(true)}>
+							<FileText className="mr-2 h-4 w-4" />
+							<span>Metadata</span>
+						</DropdownMenuItem>
+						<DropdownMenuItem
+							onClick={() => setIsDeleteOpen(true)}
+							className="text-destructive focus:text-destructive"
+						>
+							<Trash2 className="mr-2 h-4 w-4" />
+							<span>Delete</span>
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</div>
+
 			<JsonMetadataViewer
 				title={document.title}
 				metadata={document.document_metadata}
@@ -111,30 +172,6 @@ export function RowActions({
 				onOpenChange={setIsMetadataOpen}
 			/>
 
-			{/* Delete Button */}
-			<Tooltip>
-				<TooltipTrigger asChild>
-					<motion.div
-						whileHover={{ scale: 1.1 }}
-						whileTap={{ scale: 0.95 }}
-						transition={{ type: "spring", stiffness: 400, damping: 17 }}
-					>
-						<Button
-							variant="ghost"
-							size="icon"
-							className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
-							onClick={() => setIsDeleteOpen(true)}
-							disabled={isDeleting}
-						>
-							<Trash2 className="h-4 w-4" />
-							<span className="sr-only">Delete</span>
-						</Button>
-					</motion.div>
-				</TooltipTrigger>
-				<TooltipContent side="top">
-					<p>Delete</p>
-				</TooltipContent>
-			</Tooltip>
 			<AlertDialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
 				<AlertDialogContent>
 					<AlertDialogHeader>

surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx

@@ -225,8 +225,8 @@ export default function DocumentsTable() {
 				transition={{ delay: 0.1 }}
 			>
 				<div>
-					<h2 className="text-2xl font-bold tracking-tight">{t("title")}</h2>
-					<p className="text-muted-foreground">{t("subtitle")}</p>
+					<h2 className="text-xl md:text-2xl font-bold tracking-tight">{t("title")}</h2>
+					<p className="text-xs md:text-sm text-muted-foreground">{t("subtitle")}</p>
 				</div>
 				<Button onClick={refreshCurrentView} variant="outline" size="sm">
 					<RefreshCw className="w-4 h-4 mr-2" />