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:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user