Document Browsing and Search
The "Documents" area should feel like a smarter file manager, not just a tree. Open-source React file manager components and explorers can act as references.
Primary List View
Table Features
-
Virtualized table with columns:
- Name
- Type
- Owner
- Modified
- Status
- Tags
- Version
- Retention
-
Multi-select with bulk operations:
- Move
- Tag
- Change state
- Share
-
Toggleable views:
- Table (default)
- Card grid
- Hierarchy/tree
Faceted Search Sidebar
Filter Categories
| Filter | Description |
|---|---|
| Type | Document type (policy, procedure, record) |
| Owner | Document owner |
| Date | Created/modified ranges |
| Lifecycle State | Draft, review, approved, etc. |
| Classification | Security classification |
| Tags | User-defined tags |
| Workspace | Project/space |
| Retention Policy | Retention category |
Smart Folders
- Save filter sets as user-defined "smart folders"
- Examples:
- "Needs my review"
- "Recently viewed"
- "Expiring this quarter"
Search UX
Global Search Bar
- Typeahead with quick filters
- Support for query building:
owner:me AND status:pending AND tag:contract
Advanced Search Modal
- Full query builder interface
- Date range pickers
- Classification filters
- Regulation-specific filters
Search History
- Recent searches
- Pinned searches
- Saved search alerts
Component Architecture
// DocumentBrowser.tsx
interface DocumentBrowserProps {
viewMode: 'table' | 'grid' | 'tree';
filters: FilterState;
onFilterChange: (filters: FilterState) => void;
}
// FacetFilterPanel.tsx
interface FacetFilterPanelProps {
facets: Facet[];
selectedFilters: Record<string, string[]>;
onFilterToggle: (facet: string, value: string) => void;
}
// GlobalSearchBar.tsx
interface GlobalSearchBarProps {
query: string;
onQueryChange: (query: string) => void;
suggestions: Suggestion[];
quickFilters: QuickFilter[];
}