Redesign document workspace layout and tighten frontend type config

doc/frontend-design-foundation.md

@@ -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.
 

frontend/src/App.tsx

@@ -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}

frontend/src/components/ActionModal.tsx

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

frontend/src/components/DocumentCard.tsx

@@ -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';

frontend/src/components/DocumentGrid.tsx

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

frontend/src/components/DocumentViewer.tsx

@@ -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,

frontend/src/components/PathInput.tsx

@@ -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.

frontend/src/components/ProcessingLogPanel.tsx

@@ -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';
 

frontend/src/components/SearchFiltersBar.tsx

@@ -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,6 +51,7 @@ export default function SearchFiltersBar({
 }: SearchFiltersBarProps): JSX.Element {
   return (
     <div className="search-filters-bar">
+      <div className="search-filters-primary-row">
         <input
           value={searchText}
           onChange={(event) => onSearchTextChange(event.target.value)}
@@ -60,6 +63,14 @@ export default function SearchFiltersBar({
             }
           }}
         />
+        <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) => (
@@ -96,12 +107,7 @@ export default function SearchFiltersBar({
           onChange={(event) => onProcessedToChange(event.target.value)}
           title="Processed to"
         />
-      <button type="button" onClick={onSearchSubmit} disabled={isLoading}>
+      </div>
-        Search
-      </button>
-      <button type="button" className="secondary-action" onClick={onReset} disabled={!hasActiveSearch || isLoading}>
-        Reset
-      </button>
     </div>
   );
 }

frontend/src/components/SettingsScreen.tsx

@@ -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';

frontend/src/components/TagInput.tsx

@@ -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.

frontend/src/components/UploadSurface.tsx

@@ -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.

frontend/src/design-foundation.css

@@ -24,10 +24,10 @@
   --color-danger: #d56a6a;
   --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-strong: 0 16px 34px rgba(0, 0, 0, 0.34);

frontend/src/styles.css

@@ -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);
+  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%);
   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-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 {
@@ -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 {
+  .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) {
-  .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;
   }

frontend/tsconfig.json

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