);
}
diff --git a/frontend/src/components/SettingsScreen.tsx b/frontend/src/components/SettingsScreen.tsx
index aef8337..bebd3ed 100644
--- a/frontend/src/components/SettingsScreen.tsx
+++ b/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';
diff --git a/frontend/src/components/TagInput.tsx b/frontend/src/components/TagInput.tsx
index 4f44b87..e18b0cd 100644
--- a/frontend/src/components/TagInput.tsx
+++ b/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.
diff --git a/frontend/src/components/UploadSurface.tsx b/frontend/src/components/UploadSurface.tsx
index e9ab842..a528886 100644
--- a/frontend/src/components/UploadSurface.tsx
+++ b/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.
diff --git a/frontend/src/design-foundation.css b/frontend/src/design-foundation.css
index 41f671e..3f018d5 100644
--- a/frontend/src/design-foundation.css
+++ b/frontend/src/design-foundation.css
@@ -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);
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 5a7f10f..908fb56 100644
--- a/frontend/src/styles.css
+++ b/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);
- 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;
}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index fa1bc17..bfb599e 100644
--- a/frontend/tsconfig.json
+++ b/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"]
}