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.
- 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.
- 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.
*/
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import type { JSX } from 'react';
import ActionModal from './components/ActionModal';
import DocumentGrid from './components/DocumentGrid';
@@ -701,23 +702,6 @@ export default function App(): JSX.Element {
}}
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-selection">
<span className="small">Select:</span>
@@ -747,6 +731,23 @@ export default function App(): JSX.Element {
</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
documents={documents}
selectedDocumentId={selectedDocumentId}

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

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

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

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

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

@@ -1,6 +1,8 @@
/**
* Grid renderer for document collections.
*/
import type { JSX } from 'react';
import type { DmsDocument } from '../types';
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.
*/
import { useEffect, useMemo, useState } from 'react';
import type { JSX } from 'react';
import {
contentMarkdownUrl,

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

@@ -2,6 +2,7 @@
* Path editor with suggestion dropdown for scalable logical-path selection.
*/
import { useMemo, useState } from 'react';
import type { JSX } from 'react';
/**
* 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.
*/
import { useEffect, useMemo, useRef, useState } from 'react';
import type { JSX } from 'react';
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.
*/
import type { JSX } from 'react';
interface SearchFiltersBarProps {
searchText: string;
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({
searchText,
@@ -49,59 +51,63 @@ export default function SearchFiltersBar({
}: SearchFiltersBarProps): JSX.Element {
return (
<div className="search-filters-bar">
<input
value={searchText}
onChange={(event) => onSearchTextChange(event.target.value)}
placeholder="Search across name, text, path, tags"
onKeyDown={(event) => {
if (event.key === 'Enter') {
event.preventDefault();
onSearchSubmit();
}
}}
/>
<select value={tagFilter} onChange={(event) => onTagFilterChange(event.target.value)}>
<option value="">All Tags</option>
{knownTags.map((tag) => (
<option key={tag} value={tag}>
{tag}
</option>
))}
</select>
<select value={typeFilter} onChange={(event) => onTypeFilterChange(event.target.value)}>
<option value="">All Types</option>
{knownTypes.map((typeValue) => (
<option key={typeValue} value={typeValue}>
{typeValue}
</option>
))}
</select>
<select value={pathFilter} onChange={(event) => onPathFilterChange(event.target.value)}>
<option value="">All Paths</option>
{knownPaths.map((path) => (
<option key={path} value={path}>
{path}
</option>
))}
</select>
<input
type="date"
value={processedFrom}
onChange={(event) => onProcessedFromChange(event.target.value)}
title="Processed from"
/>
<input
type="date"
value={processedTo}
onChange={(event) => onProcessedToChange(event.target.value)}
title="Processed to"
/>
<button type="button" onClick={onSearchSubmit} disabled={isLoading}>
Search
</button>
<button type="button" className="secondary-action" onClick={onReset} disabled={!hasActiveSearch || isLoading}>
Reset
</button>
<div className="search-filters-primary-row">
<input
value={searchText}
onChange={(event) => onSearchTextChange(event.target.value)}
placeholder="Search across name, text, path, tags"
onKeyDown={(event) => {
if (event.key === 'Enter') {
event.preventDefault();
onSearchSubmit();
}
}}
/>
<button type="button" onClick={onSearchSubmit} disabled={isLoading}>
Search
</button>
<button type="button" className="secondary-action" onClick={onReset} disabled={!hasActiveSearch || isLoading}>
Reset
</button>
</div>
<div className="search-filters-secondary-row">
<select value={tagFilter} onChange={(event) => onTagFilterChange(event.target.value)}>
<option value="">All Tags</option>
{knownTags.map((tag) => (
<option key={tag} value={tag}>
{tag}
</option>
))}
</select>
<select value={typeFilter} onChange={(event) => onTypeFilterChange(event.target.value)}>
<option value="">All Types</option>
{knownTypes.map((typeValue) => (
<option key={typeValue} value={typeValue}>
{typeValue}
</option>
))}
</select>
<select value={pathFilter} onChange={(event) => onPathFilterChange(event.target.value)}>
<option value="">All Paths</option>
{knownPaths.map((path) => (
<option key={path} value={path}>
{path}
</option>
))}
</select>
<input
type="date"
value={processedFrom}
onChange={(event) => onProcessedFromChange(event.target.value)}
title="Processed from"
/>
<input
type="date"
value={processedTo}
onChange={(event) => onProcessedToChange(event.target.value)}
title="Processed to"
/>
</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.
*/
import { useCallback, useEffect, useMemo, useState } from 'react';
import type { JSX } from 'react';
import PathInput from './PathInput';
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.
*/
import { useMemo, useState } from 'react';
import type { KeyboardEvent } from 'react';
import type { JSX, KeyboardEvent } from 'react';
/**
* 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.
*/
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.

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

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

119
frontend/src/styles.css
View File

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

2
frontend/tsconfig.json
View File

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