search

frontend/src/index.jsx

@@ -310,8 +310,8 @@ const PreviewWorkspace = ({
   );
 };
 
-const MainLayout = ({ sidebarProps, children, className = 'app-main' }) => (
-  <main className={className}>
+const DocumentsLayout = ({ sidebarProps, children }) => (
+  <main className="documents-main">
     <Sidebar {...sidebarProps} />
     {children}
   </main>
@@ -400,9 +400,12 @@ const AppLayout = () => {
   const [activeCorrespondentFilters, setActiveCorrespondentFilters] = useState([]);
   const documentsRouteMatch = useMatch('/documents');
   const documentsFolderRouteMatch = useMatch('/documents/folder/:folderId');
+  const documentsDetailRouteMatch = useMatch('/documents/:documentId');
   const tagsRouteMatch = useMatch('/tags');
   const correspondentsRouteMatch = useMatch('/correspondents');
-  const isDocumentsRoute = Boolean(documentsRouteMatch || documentsFolderRouteMatch);
+  const isDocumentsRoute = Boolean(
+    documentsRouteMatch || documentsFolderRouteMatch || documentsDetailRouteMatch,
+  );
   const isTagsRoute = Boolean(tagsRouteMatch);
   const isCorrespondentsRoute = Boolean(correspondentsRouteMatch);
   const toggleTagFilter = useCallback((tagId) => {
@@ -428,6 +431,15 @@ const AppLayout = () => {
     setActiveTagFilters([]);
     setActiveCorrespondentFilters([]);
   }, []);
+
+  const handleSearchSubmit = useCallback(() => {
+    if (!navigate) return;
+    const targetFolder = selectedFolder && selectedFolder !== 'root' ? selectedFolder : 'root';
+    const targetPath = targetFolder === 'root' ? '/documents' : `/documents/folder/${targetFolder}`;
+    if (!isDocumentsRoute || location.pathname !== targetPath) {
+      navigate(targetPath, { replace: false });
+    }
+  }, [navigate, selectedFolder, isDocumentsRoute, location.pathname]);
   const [draggedDocumentIds, setDraggedDocumentIds] = useState([]);
   const [draggedFolderId, setDraggedFolderId] = useState(null);
   const [dropOverlayState, setDropOverlayState] = useState({
@@ -3653,10 +3665,11 @@ const AppLayout = () => {
         if (activeCorrespondentFilters.length) {
           params.correspondents = activeCorrespondentFilters.join(',');
         }
-        const folderIdentifier = selectedFolder === 'root' ? 'root' : selectedFolder;
-        const { data } = await api.get(`/folders/${folderIdentifier}/documents`, {
-          params,
-        });
+        const folderIdentifier = selectedFolder === 'root' ? null : selectedFolder;
+        if (folderIdentifier) {
+          params.folder_id = folderIdentifier;
+        }
+        const { data } = await api.get('/documents', { params });
         if (cancelled) return;
 
         const results = assetManager.hydrateDocuments(data || []);
@@ -4483,6 +4496,12 @@ const AppLayout = () => {
                 onChange={(event) => setSearchQuery(event.target.value)}
                 placeholder="Search documents"
                 aria-label="Search documents"
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') {
+                    event.preventDefault();
+                    handleSearchSubmit();
+                  }
+                }}
               />
               {isFilterActive && (
                 <button
@@ -4638,10 +4657,10 @@ const DocumentsRoute = () => {
   }
 
   return (
-    <MainLayout sidebarProps={sidebarProps}>
+    <DocumentsLayout sidebarProps={sidebarProps}>
       <DocumentsTable {...documentsTableProps} />
       <DetailPanel {...detailPanelProps} />
-    </MainLayout>
+    </DocumentsLayout>
   );
 };
 
@@ -4716,7 +4735,6 @@ const LoginRoute = () => {
 
 function TagsRoute() {
   const {
-    sidebarProps,
     tags,
     refreshTags,
     handleTagUpdate,
@@ -4724,7 +4742,7 @@ function TagsRoute() {
     setStatusMessage,
   } = useAppShell();
   return (
-    <MainLayout sidebarProps={sidebarProps} className="tags-main">
+    <main className="panels-main">
       <TagsPanel
         tags={tags}
         onRefresh={refreshTags}
@@ -4732,13 +4750,12 @@ function TagsRoute() {
         onDeleteTag={handleTagDelete}
         onNotify={setStatusMessage}
       />
-    </MainLayout>
+    </main>
   );
 }
 
 function CorrespondentsRoute() {
   const {
-    sidebarProps,
     correspondents,
     refreshCorrespondents,
     handleCorrespondentCreate,
@@ -4748,7 +4765,7 @@ function CorrespondentsRoute() {
   } = useAppShell();
 
   return (
-    <MainLayout sidebarProps={sidebarProps} className="tags-main">
+    <main className="panels-main">
       <CorrespondentsPanel
         correspondents={correspondents}
         onRefresh={refreshCorrespondents}
@@ -4757,7 +4774,7 @@ function CorrespondentsRoute() {
         onDelete={handleCorrespondentDelete}
         onNotify={setStatusMessage}
       />
-    </MainLayout>
+    </main>
   );
 }
 

frontend/src/styles.css

@@ -347,21 +347,24 @@ button.icon-button.ghost:hover:not([disabled]) {
   color: var(--muted);
 }
 
-.app-main {
+.documents-main {
   flex: 1;
   display: grid;
-  grid-template-columns: 220px minmax(0, 1fr) 320px;
+  grid-template-columns: 20rem minmax(0, 1fr) 20rem;
   min-height: 0;
   overflow: hidden;
 }
 
-.tags-main {
+.panels-main {
   flex: 1;
-  display: grid;
-  grid-template-columns: 220px minmax(0, 1fr);
-  gap: 1.5rem;
-  min-height: 0;
-  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  padding: 1.5rem;
+  overflow: auto;
+}
+
+.panels-main > * {
+  flex: 0 1 720px;
 }
 
 .preview-main {
@@ -795,8 +798,8 @@ button.icon-button.ghost:hover:not([disabled]) {
   display: flex;
   align-items: center;
   gap: 0.22rem;
-  padding: 0.16rem 0.26rem;
-  border-radius: 2px;
+  padding: 0.32rem 0.48rem;
+  border-radius: 8px;
   cursor: pointer;
   color: inherit;
   transition: background 0.12s ease, color 0.12s ease;
@@ -1098,7 +1101,7 @@ button.icon-button.ghost:hover:not([disabled]) {
 }
 
 .documents-panel table {
-  width: 100%;
+  max-width: 100%;
   border-collapse: collapse;
   font-size: 0.88rem;
   margin-top: 0.4rem;
@@ -1653,17 +1656,6 @@ form.inline {
   gap: 0.6rem;
 }
 
-@media (max-width: 1080px) {
-  .app-main {
-    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
-    grid-template-rows: auto auto;
-  }
-  .detail-panel {
-    grid-column: 1 / -1;
-    padding: 1.25rem;
-  }
-}
-
 @media (max-width: 768px) {
   .app-bar {
     flex-direction: column;