fix(documents): reset type filter on tab/folder switch + label chips

Switching tab or folder while a type filter was active left the
filter applied silently — the chip cloud regenerated from the new
result set so no chip lit up, but the documentType= query param
kept narrowing the list. Reset typeFilter to undefined whenever tab
or selected folder changes.

Also use TYPE_LABELS for chip text so the filter chips match the
human-readable labels already shown in the row's Type column.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-10 12:27:49 +02:00
parent 433ab3bf75
commit c8e6371793

View File

@@ -211,22 +211,27 @@ export function DocumentsHub({ portSlug, initialTab = 'all' }: DocumentsHubProps
); );
}; };
const handleFolderSelect = (id: string | null | undefined) => {
setSelectedFolderId(id);
setTypeFilter(undefined);
};
return ( return (
<div className="flex flex-col sm:flex-row h-full"> <div className="flex flex-col sm:flex-row h-full">
<FolderTreeSidebar <FolderTreeSidebar
selectedFolderId={selectedFolderId} selectedFolderId={selectedFolderId}
onSelect={setSelectedFolderId} onSelect={handleFolderSelect}
footer={ footer={
<PermissionGate resource="documents" action="manage_folders"> <PermissionGate resource="documents" action="manage_folders">
<FolderActionsMenu <FolderActionsMenu
selectedFolderId={selectedFolderId} selectedFolderId={selectedFolderId}
onAfterDelete={() => setSelectedFolderId(undefined)} onAfterDelete={() => handleFolderSelect(undefined)}
/> />
</PermissionGate> </PermissionGate>
} }
/> />
<div className="flex-1 min-w-0 p-4 space-y-4"> <div className="flex-1 min-w-0 p-4 space-y-4">
<FolderBreadcrumb selectedFolderId={selectedFolderId} onSelect={setSelectedFolderId} /> <FolderBreadcrumb selectedFolderId={selectedFolderId} onSelect={handleFolderSelect} />
<PageHeader <PageHeader
title="Documents" title="Documents"
@@ -262,7 +267,13 @@ export function DocumentsHub({ portSlug, initialTab = 'all' }: DocumentsHubProps
variant="gradient" variant="gradient"
/> />
<Tabs value={tab} onValueChange={(v) => setTab(v as DocumentsHubTab)}> <Tabs
value={tab}
onValueChange={(v) => {
setTab(v as DocumentsHubTab);
setTypeFilter(undefined);
}}
>
<TabsList> <TabsList>
{documentsHubTabs.map((t) => ( {documentsHubTabs.map((t) => (
<TabsTrigger key={t} value={t}> <TabsTrigger key={t} value={t}>
@@ -285,9 +296,7 @@ export function DocumentsHub({ portSlug, initialTab = 'all' }: DocumentsHubProps
className="max-w-xs h-9" className="max-w-xs h-9"
/> />
{(() => { {(() => {
const seenTypes = Array.from( const seenTypes = Array.from(new Set(documents.map((d) => d.documentType))).sort();
new Set(documents.map((d) => d.documentType)),
).sort();
if (seenTypes.length === 0) return null; if (seenTypes.length === 0) return null;
return ( return (
<div className="flex flex-wrap gap-1.5"> <div className="flex flex-wrap gap-1.5">
@@ -311,7 +320,7 @@ export function DocumentsHub({ portSlug, initialTab = 'all' }: DocumentsHubProps
)} )}
onClick={() => setTypeFilter(t)} onClick={() => setTypeFilter(t)}
> >
{t} {TYPE_LABELS[t] ?? t}
</button> </button>
))} ))}
</div> </div>