Nautilus/ledgerdock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign document workspace layout and tighten frontend type config

Browse Source
This commit is contained in:
Beda Schmid
2026-02-21 10:00:35 -03:00
parent 5dfc2cbd85
commit 04cf830e21
16 changed files with 1373 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
doc/frontend-design-foundation.md
View File

@@ -23,6 +23,8 @@ Do not hardcode new palette or spacing values in component styles when a token a
- The top bar is sticky and should remain compact under all breakpoints. - The top bar is sticky and should remain compact under all breakpoints.
- Documents and viewer operate as a two-pane layout on desktop and collapse to one pane on narrower screens. - Documents and viewer operate as a two-pane layout on desktop and collapse to one pane on narrower screens.
- Search controls are split into two rows: primary full-text search with actions, then secondary metadata filters.
- Pagination is rendered as a dedicated compact strip directly above the document card grid.
- Toolbar rows should keep critical actions visible without forcing large vertical gaps. - Toolbar rows should keep critical actions visible without forcing large vertical gaps.
- Settings sections should preserve dense form grouping while remaining keyboard friendly. - Settings sections should preserve dense form grouping while remaining keyboard friendly.

1189
frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

35
frontend/src/App.tsx
View File

@@ -2,6 +2,7 @@
* Main application layout and orchestration for document and settings workspaces. * Main application layout and orchestration for document and settings workspaces.
*/ */
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import type { JSX } from 'react';
import ActionModal from './components/ActionModal'; import ActionModal from './components/ActionModal';
import DocumentGrid from './components/DocumentGrid'; import DocumentGrid from './components/DocumentGrid';
@@ -701,23 +702,6 @@ export default function App(): JSX.Element {
}} }}
isLoading={isLoading} isLoading={isLoading}
/> />
<div className="document-toolbar-row">
<div className="document-toolbar-pagination compact-pagination">
<button type="button" className="secondary-action" onClick={() => setCurrentPage(1)} disabled={isLoading || currentPage <= 1}>
First
</button>
<button type="button" className="secondary-action" onClick={() => setCurrentPage((current) => Math.max(1, current - 1))} disabled={isLoading || currentPage <= 1}>
Prev
</button>
<span className="small">Page {currentPage} / {totalPages}</span>
<button type="button" className="secondary-action" onClick={() => setCurrentPage((current) => Math.min(totalPages, current + 1))} disabled={isLoading || currentPage >= totalPages}>
Next
</button>
<button type="button" className="secondary-action" onClick={() => setCurrentPage(totalPages)} disabled={isLoading || currentPage >= totalPages}>
Last
</button>
</div>
</div>
<div className="document-toolbar-row"> <div className="document-toolbar-row">
<div className="document-toolbar-selection"> <div className="document-toolbar-selection">
<span className="small">Select:</span> <span className="small">Select:</span>
@@ -747,6 +731,23 @@ export default function App(): JSX.Element {
</div> </div>
</div> </div>
</div> </div>
<div className="document-pagination-strip">
<div className="document-toolbar-pagination compact-pagination">
<button type="button" className="secondary-action" onClick={() => setCurrentPage(1)} disabled={isLoading || currentPage <= 1}>
First
</button>
<button type="button" className="secondary-action" onClick={() => setCurrentPage((current) => Math.max(1, current - 1))} disabled={isLoading || currentPage <= 1}>
Prev
</button>
<span className="small">Page {currentPage} / {totalPages}</span>
<button type="button" className="secondary-action" onClick={() => setCurrentPage((current) => Math.min(totalPages, current + 1))} disabled={isLoading || currentPage >= totalPages}>
Next
</button>
<button type="button" className="secondary-action" onClick={() => setCurrentPage(totalPages)} disabled={isLoading || currentPage >= totalPages}>
Last
</button>
</div>
</div>
<DocumentGrid <DocumentGrid
documents={documents} documents={documents}
selectedDocumentId={selectedDocumentId} selectedDocumentId={selectedDocumentId}

2
frontend/src/components/ActionModal.tsx
View File

@@ -1,6 +1,8 @@
/** /**
* Reusable modal for confirmations and multi-action prompts. * Reusable modal for confirmations and multi-action prompts.
*/ */
import type { JSX } from 'react';
interface ActionModalOption { interface ActionModalOption {
key: string; key: string;
label: string; label: string;

1
frontend/src/components/DocumentCard.tsx
View File

@@ -2,6 +2,7 @@
* Card view for displaying document summary, preview, and metadata. * Card view for displaying document summary, preview, and metadata.
*/ */
import { useState } from 'react'; import { useState } from 'react';
import type { JSX } from 'react';
import { Download, FileText, Trash2 } from 'lucide-react'; import { Download, FileText, Trash2 } from 'lucide-react';
import type { DmsDocument } from '../types'; import type { DmsDocument } from '../types';

2
frontend/src/components/DocumentGrid.tsx
View File

@@ -1,6 +1,8 @@
/** /**
* Grid renderer for document collections. * Grid renderer for document collections.
*/ */
import type { JSX } from 'react';
import type { DmsDocument } from '../types'; import type { DmsDocument } from '../types';
import DocumentCard from './DocumentCard'; import DocumentCard from './DocumentCard';

1
frontend/src/components/DocumentViewer.tsx
View File

@@ -2,6 +2,7 @@
* Embedded document viewer panel for preview, metadata updates, and lifecycle actions. * Embedded document viewer panel for preview, metadata updates, and lifecycle actions.
*/ */
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import type { JSX } from 'react';
import { import {
contentMarkdownUrl, contentMarkdownUrl,

1
frontend/src/components/PathInput.tsx
View File

@@ -2,6 +2,7 @@
* Path editor with suggestion dropdown for scalable logical-path selection. * Path editor with suggestion dropdown for scalable logical-path selection.
*/ */
import { useMemo, useState } from 'react'; import { useMemo, useState } from 'react';
import type { JSX } from 'react';
/** /**
* Defines properties for the reusable path input component. * Defines properties for the reusable path input component.

1
frontend/src/components/ProcessingLogPanel.tsx
View File

@@ -2,6 +2,7 @@
* Processing log timeline panel for upload, OCR, summarization, routing, and indexing events. * Processing log timeline panel for upload, OCR, summarization, routing, and indexing events.
*/ */
import { useEffect, useMemo, useRef, useState } from 'react'; import { useEffect, useMemo, useRef, useState } from 'react';
import type { JSX } from 'react';
import type { ProcessingLogEntry } from '../types'; import type { ProcessingLogEntry } from '../types';

114
frontend/src/components/SearchFiltersBar.tsx
View File

@@ -1,6 +1,8 @@
/** /**
* Compact search and filter controls for document discovery. * Compact search and filter controls for document discovery.
*/ */
import type { JSX } from 'react';
interface SearchFiltersBarProps { interface SearchFiltersBarProps {
searchText: string; searchText: string;
onSearchTextChange: (value: string) => void; onSearchTextChange: (value: string) => void;
@@ -24,7 +26,7 @@ interface SearchFiltersBarProps {
} }
/** /**
* Renders dense search, filter, and quick reset controls. * Renders two-row document discovery controls with a dedicated search/action row.
*/ */
export default function SearchFiltersBar({ export default function SearchFiltersBar({
searchText, searchText,
@@ -49,59 +51,63 @@ export default function SearchFiltersBar({
}: SearchFiltersBarProps): JSX.Element { }: SearchFiltersBarProps): JSX.Element {
return ( return (
<div className="search-filters-bar"> <div className="search-filters-bar">
<input <div className="search-filters-primary-row">
value={searchText} <input
onChange={(event) => onSearchTextChange(event.target.value)} value={searchText}
placeholder="Search across name, text, path, tags" onChange={(event) => onSearchTextChange(event.target.value)}
onKeyDown={(event) => { placeholder="Search across name, text, path, tags"
if (event.key === 'Enter') { onKeyDown={(event) => {
event.preventDefault(); if (event.key === 'Enter') {
onSearchSubmit(); event.preventDefault();
} onSearchSubmit();
}} }
/> }}
<select value={tagFilter} onChange={(event) => onTagFilterChange(event.target.value)}> />
<option value="">All Tags</option> <button type="button" onClick={onSearchSubmit} disabled={isLoading}>
{knownTags.map((tag) => ( Search
<option key={tag} value={tag}> </button>
{tag} <button type="button" className="secondary-action" onClick={onReset} disabled={!hasActiveSearch || isLoading}>
</option> Reset
))} </button>
</select> </div>
<select value={typeFilter} onChange={(event) => onTypeFilterChange(event.target.value)}> <div className="search-filters-secondary-row">
<option value="">All Types</option> <select value={tagFilter} onChange={(event) => onTagFilterChange(event.target.value)}>
{knownTypes.map((typeValue) => ( <option value="">All Tags</option>
<option key={typeValue} value={typeValue}> {knownTags.map((tag) => (
{typeValue} <option key={tag} value={tag}>
</option> {tag}
))} </option>
</select> ))}
<select value={pathFilter} onChange={(event) => onPathFilterChange(event.target.value)}> </select>
<option value="">All Paths</option> <select value={typeFilter} onChange={(event) => onTypeFilterChange(event.target.value)}>
{knownPaths.map((path) => ( <option value="">All Types</option>
<option key={path} value={path}> {knownTypes.map((typeValue) => (
{path} <option key={typeValue} value={typeValue}>
</option> {typeValue}
))} </option>
</select> ))}
<input </select>
type="date" <select value={pathFilter} onChange={(event) => onPathFilterChange(event.target.value)}>
value={processedFrom} <option value="">All Paths</option>
onChange={(event) => onProcessedFromChange(event.target.value)} {knownPaths.map((path) => (
title="Processed from" <option key={path} value={path}>
/> {path}
<input </option>
type="date" ))}
value={processedTo} </select>
onChange={(event) => onProcessedToChange(event.target.value)} <input
title="Processed to" type="date"
/> value={processedFrom}
<button type="button" onClick={onSearchSubmit} disabled={isLoading}> onChange={(event) => onProcessedFromChange(event.target.value)}
Search title="Processed from"
</button> />
<button type="button" className="secondary-action" onClick={onReset} disabled={!hasActiveSearch || isLoading}> <input
Reset type="date"
</button> value={processedTo}
onChange={(event) => onProcessedToChange(event.target.value)}
title="Processed to"
/>
</div>
</div> </div>
); );
} }

1
frontend/src/components/SettingsScreen.tsx
View File

@@ -2,6 +2,7 @@
* Dedicated settings screen for providers, task model bindings, and catalog controls. * Dedicated settings screen for providers, task model bindings, and catalog controls.
*/ */
import { useCallback, useEffect, useMemo, useState } from 'react'; import { useCallback, useEffect, useMemo, useState } from 'react';
import type { JSX } from 'react';
import PathInput from './PathInput'; import PathInput from './PathInput';
import TagInput from './TagInput'; import TagInput from './TagInput';

2
frontend/src/components/TagInput.tsx
View File

@@ -2,7 +2,7 @@
* Tag editor with suggestion dropdown and keyboard-friendly chip interactions. * Tag editor with suggestion dropdown and keyboard-friendly chip interactions.
*/ */
import { useMemo, useState } from 'react'; import { useMemo, useState } from 'react';
import type { KeyboardEvent } from 'react'; import type { JSX, KeyboardEvent } from 'react';
/** /**
* Defines properties for the reusable tag input component. * Defines properties for the reusable tag input component.

2
frontend/src/components/UploadSurface.tsx
View File

@@ -2,7 +2,7 @@
* Upload surface that supports global drag-and-drop and file/folder picking. * Upload surface that supports global drag-and-drop and file/folder picking.
*/ */
import { useEffect, useMemo, useRef, useState } from 'react'; import { useEffect, useMemo, useRef, useState } from 'react';
import type { ChangeEvent } from 'react'; import type { JSX, ChangeEvent } from 'react';
/** /**
* Defines callback signature for queued file uploads. * Defines callback signature for queued file uploads.

8
frontend/src/design-foundation.css
View File

@@ -24,10 +24,10 @@
--color-danger: #d56a6a; --color-danger: #d56a6a;
--color-focus: #79adff; --color-focus: #79adff;
--radius-xs: 4px; --radius-xs: 2px;
--radius-sm: 6px; --radius-sm: 3px;
--radius-md: 8px; --radius-md: 4px;
--radius-lg: 10px; --radius-lg: 6px;
--shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.24); --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.24);
--shadow-strong: 0 16px 34px rgba(0, 0, 0, 0.34); --shadow-strong: 0 16px 34px rgba(0, 0, 0, 0.34);

119
frontend/src/styles.css
View File

@@ -79,7 +79,7 @@ select,
textarea { textarea {
width: 100%; width: 100%;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--radius-sm); border-radius: var(--radius-xs);
background: #111a2a; background: #111a2a;
color: var(--color-text); color: var(--color-text);
padding: 0.45rem 0.6rem; padding: 0.45rem 0.6rem;
@@ -120,13 +120,13 @@ textarea {
button { button {
border: 1px solid var(--color-border-strong); border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm); border-radius: var(--radius-xs);
min-height: 2.1rem; min-height: 1.95rem;
padding: 0 0.75rem; padding: 0 0.68rem;
background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-strong) 100%); background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-strong) 100%);
color: #eef4ff; color: #eef4ff;
font-family: var(--font-display); font-family: var(--font-display);
font-size: 0.76rem; font-size: 0.73rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.02em; letter-spacing: 0.02em;
cursor: pointer; cursor: pointer;
@@ -234,18 +234,40 @@ button:disabled {
.search-filters-bar { .search-filters-bar {
display: grid; display: grid;
grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(120px, 1fr)) repeat(2, minmax(136px, auto)) auto auto;
gap: var(--space-2); gap: var(--space-2);
} }
.search-filters-bar input, .search-filters-primary-row {
.search-filters-bar select, display: grid;
.search-filters-bar button { grid-template-columns: minmax(0, 1fr) auto auto;
min-height: 2.05rem; align-items: center;
gap: var(--space-2);
min-width: 0;
} }
.search-filters-bar input[type='date'] { .search-filters-primary-row input {
min-width: 128px; min-width: 0;
min-height: 2rem;
}
.search-filters-primary-row button {
min-height: 2rem;
white-space: nowrap;
}
.search-filters-secondary-row {
display: grid;
grid-template-columns: repeat(3, minmax(130px, 1fr)) repeat(2, minmax(138px, auto));
gap: var(--space-2);
}
.search-filters-secondary-row select,
.search-filters-secondary-row input {
min-height: 1.9rem;
}
.search-filters-secondary-row input[type='date'] {
min-width: 132px;
} }
.document-toolbar-row { .document-toolbar-row {
@@ -254,9 +276,9 @@ button:disabled {
justify-content: space-between; justify-content: space-between;
gap: var(--space-2); gap: var(--space-2);
flex-wrap: wrap; flex-wrap: wrap;
padding: var(--space-2); padding: 0.42rem 0.5rem;
border: 1px solid rgba(70, 89, 122, 0.6); border: 1px solid rgba(70, 89, 122, 0.6);
border-radius: var(--radius-sm); border-radius: var(--radius-xs);
background: rgba(18, 27, 41, 0.75); background: rgba(18, 27, 41, 0.75);
} }
@@ -269,8 +291,17 @@ button:disabled {
gap: var(--space-2); gap: var(--space-2);
} }
.document-pagination-strip {
margin-top: var(--space-2);
margin-bottom: var(--space-2);
padding: 0.25rem 0.4rem;
border: 1px solid rgba(70, 89, 122, 0.5);
border-radius: var(--radius-xs);
background: rgba(18, 27, 41, 0.6);
}
.document-toolbar-pagination .small { .document-toolbar-pagination .small {
min-width: 6.5rem; min-width: 5.7rem;
text-align: center; text-align: center;
} }
@@ -280,16 +311,31 @@ button:disabled {
.document-toolbar-export-path { .document-toolbar-export-path {
margin-left: auto; margin-left: auto;
min-width: min(460px, 100%); min-width: min(520px, 100%);
} }
.document-toolbar-export-path .path-input { .document-toolbar-export-path .path-input {
flex: 1; flex: 1;
min-width: 160px; min-width: 220px;
}
.compact-pagination {
gap: 0.35rem;
}
.compact-pagination button {
min-height: 1.6rem;
padding: 0 0.45rem;
font-size: 0.64rem;
}
.compact-pagination .small {
min-width: 5rem;
font-size: 0.72rem;
} }
.document-grid { .document-grid {
margin-top: var(--space-2); margin-top: 0;
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--space-3); gap: var(--space-3);
@@ -301,13 +347,14 @@ button:disabled {
grid-template-rows: auto auto 1fr auto; grid-template-rows: auto auto 1fr auto;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
border-radius: var(--radius-xs);
transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
} }
.document-card:hover { .document-card:hover {
transform: translateY(-2px); transform: translateY(-1px);
border-color: var(--color-border-strong); border-color: var(--color-border-strong);
box-shadow: var(--shadow-strong); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
} }
.document-card.selected { .document-card.selected {
@@ -362,14 +409,16 @@ button:disabled {
aspect-ratio: 4 / 3; aspect-ratio: 4 / 3;
overflow: hidden; overflow: hidden;
border-bottom: 1px solid rgba(70, 89, 122, 0.55); border-bottom: 1px solid rgba(70, 89, 122, 0.55);
background: linear-gradient(160deg, #111b2c 0%, #1b2a43 100%); background:
linear-gradient(180deg, #f8f4ea 0%, #efe8d8 100%),
repeating-linear-gradient(0deg, rgba(130, 117, 96, 0.06) 0, rgba(130, 117, 96, 0.06) 1px, transparent 1px, transparent 8px);
} }
.document-preview img { .document-preview img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
background: #0e1625; background: #faf7ef;
} }
.document-preview-fallback { .document-preview-fallback {
@@ -540,7 +589,7 @@ button:disabled {
.viewer-preview { .viewer-preview {
overflow: hidden; overflow: hidden;
border: 1px solid rgba(70, 89, 122, 0.7); border: 1px solid rgba(70, 89, 122, 0.7);
border-radius: var(--radius-sm); border-radius: var(--radius-xs);
background: #0f1726; background: #0f1726;
min-height: 280px; min-height: 280px;
} }
@@ -1118,12 +1167,8 @@ button:disabled {
} }
@media (max-width: 1480px) { @media (max-width: 1480px) {
.search-filters-bar { .search-filters-secondary-row {
grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(120px, 1fr)) repeat(2, minmax(136px, auto)); grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(2, minmax(126px, 1fr));
}
.search-filters-bar button {
grid-column: span 1;
} }
} }
@@ -1153,7 +1198,7 @@ button:disabled {
} }
@media (max-width: 1040px) { @media (max-width: 1040px) {
.search-filters-bar { .search-filters-secondary-row {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
@@ -1186,7 +1231,15 @@ button:disabled {
width: min(1820px, 100% - 1rem); width: min(1820px, 100% - 1rem);
} }
.search-filters-bar { .search-filters-primary-row {
grid-template-columns: 1fr 1fr;
}
.search-filters-primary-row input {
grid-column: 1 / -1;
}
.search-filters-secondary-row {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@@ -1201,6 +1254,10 @@ button:disabled {
width: 100%; width: 100%;
} }
.document-pagination-strip .document-toolbar-pagination {
width: auto;
}
.provider-list { .provider-list {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }

2
frontend/tsconfig.json
View File

@@ -13,7 +13,7 @@
"jsx": "react-jsx", "jsx": "react-jsx",
"strict": true, "strict": true,
"noFallthroughCasesInSwitch": true, "noFallthroughCasesInSwitch": true,
"types": ["vite/client"] "types": ["vite/client", "react", "react-dom"]
}, },
"include": ["src"] "include": ["src"]
} }