apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-07-22 23:31:12 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: enhance DocumentsTableShell to support search mode with updated UI for no matching documents

Browse source
This commit is contained in:
Anish Sarkar 2026-03-08 22:42:13 +05:30
parent ed6ff33933
commit 662c99c3f5
2 changed files with 55 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,7 +11,7 @@ import {
FileX, FileX,
Network, Network,
PenLine, PenLine,
Plus, SearchX,
Trash2, Trash2,
} from "lucide-react"; } from "lucide-react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
@ -327,6 +327,7 @@ export function DocumentsTableShell({
mentionedDocIds, mentionedDocIds,
onToggleChatMention, onToggleChatMention,
onEditNavigate, onEditNavigate,
isSearchMode = false,
}: { }: {
documents: Document[]; documents: Document[];
loading: boolean; loading: boolean;
@ -345,6 +346,8 @@ export function DocumentsTableShell({
onToggleChatMention?: (doc: Document, mentioned: boolean) => void; onToggleChatMention?: (doc: Document, mentioned: boolean) => void;
/** Called when user navigates to the editor via Edit — use to close containing sidebar/panel */ /** Called when user navigates to the editor via Edit — use to close containing sidebar/panel */
onEditNavigate?: () => void; onEditNavigate?: () => void;
/** Whether results are filtered by a search query or type filters */
isSearchMode?: boolean;
}) { }) {
const t = useTranslations("documents"); const t = useTranslations("documents");
const { openDialog } = useDocumentUploadDialog(); const { openDialog } = useDocumentUploadDialog();
@ -569,21 +572,34 @@ export function DocumentsTableShell({
</div> </div>
) : sorted.length === 0 ? ( ) : sorted.length === 0 ? (
<div className="flex flex-1 w-full items-center justify-center"> <div className="flex flex-1 w-full items-center justify-center">
<div className="flex flex-col items-center gap-4 max-w-md px-4 text-center"> {isSearchMode ? (
<div className="rounded-full bg-muted/50 p-4"> <div className="flex flex-col items-center gap-3 max-w-md px-4 text-center">
<FileX className="h-8 w-8 text-muted-foreground" /> <SearchX className="h-8 w-8 text-muted-foreground" />
<div className="space-y-1">
<h3 className="text-sm font-medium text-muted-foreground">
No matching documents
</h3>
<p className="text-xs text-muted-foreground/70">
Try a different search term or adjust your filters.
</p>
</div>
</div> </div>
<div className="space-y-1.5"> ) : (
<h3 className="text-lg font-semibold">{t("no_documents")}</h3> <div className="flex flex-col items-center gap-4 max-w-md px-4 text-center">
<p className="text-sm text-muted-foreground"> <div className="rounded-full bg-muted/50 p-4">
Get started by uploading your first document. <FileX className="h-8 w-8 text-muted-foreground" />
</p> </div>
<div className="space-y-1.5">
<h3 className="text-lg font-semibold">{t("no_documents")}</h3>
<p className="text-sm text-muted-foreground">
Get started by uploading your first document.
</p>
</div>
<Button onClick={openDialog} className="mt-2">
Upload Documents
</Button>
</div> </div>
<Button onClick={openDialog} className="mt-2"> )}
<Plus className="mr-2 h-4 w-4" />
Upload Documents
</Button>
</div>
</div> </div>
) : ( ) : (
<div ref={desktopScrollRef} className="flex-1 overflow-auto"> <div ref={desktopScrollRef} className="flex-1 overflow-auto">
@ -694,21 +710,32 @@ export function DocumentsTableShell({
</div> </div>
) : sorted.length === 0 ? ( ) : sorted.length === 0 ? (
<div className="md:hidden flex flex-1 w-full items-center justify-center"> <div className="md:hidden flex flex-1 w-full items-center justify-center">
<div className="flex flex-col items-center gap-4 max-w-md px-4 text-center"> {isSearchMode ? (
<div className="rounded-full bg-muted/50 p-4"> <div className="flex flex-col items-center gap-3 max-w-md px-4 text-center">
<FileX className="h-8 w-8 text-muted-foreground" /> <SearchX className="h-8 w-8 text-muted-foreground" />
<div className="space-y-1">
<h3 className="text-sm font-medium text-muted-foreground">No matching documents</h3>
<p className="text-xs text-muted-foreground/70">
Try a different search term or adjust your filters.
</p>
</div>
</div> </div>
<div className="space-y-1.5"> ) : (
<h3 className="text-lg font-semibold">{t("no_documents")}</h3> <div className="flex flex-col items-center gap-4 max-w-md px-4 text-center">
<p className="text-sm text-muted-foreground"> <div className="rounded-full bg-muted/50 p-4">
Get started by uploading your first document. <FileX className="h-8 w-8 text-muted-foreground" />
</p> </div>
<div className="space-y-1.5">
<h3 className="text-lg font-semibold">{t("no_documents")}</h3>
<p className="text-sm text-muted-foreground">
Get started by uploading your first document.
</p>
</div>
<Button onClick={openDialog} className="mt-2">
Upload Documents
</Button>
</div> </div>
<Button onClick={openDialog} className="mt-2"> )}
<Plus className="mr-2 h-4 w-4" />
Upload Documents
</Button>
</div>
</div> </div>
) : ( ) : (
<div <div

1
surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
View file

@ -193,6 +193,7 @@ export function DocumentsSidebar({ open, onOpenChange }: DocumentsSidebarProps)
mentionedDocIds={mentionedDocIds} mentionedDocIds={mentionedDocIds}
onToggleChatMention={handleToggleChatMention} onToggleChatMention={handleToggleChatMention}
onEditNavigate={() => onOpenChange(false)} onEditNavigate={() => onOpenChange(false)}
isSearchMode={isSearchMode || activeTypes.length > 0}
/> />
</div> </div>
</> </>