frontend: separate views

frontend/src/index.jsx

@@ -17,6 +17,7 @@ import {
   Outlet,
   useLocation,
   useNavigate,
+  useMatch,
   matchPath,
 } from 'react-router-dom';
 import './styles.css';
@@ -397,6 +398,13 @@ const AppLayout = () => {
   const [searchQuery, setSearchQuery] = useState('');
   const [activeTagFilters, setActiveTagFilters] = useState([]);
   const [activeCorrespondentFilters, setActiveCorrespondentFilters] = useState([]);
+  const documentsRouteMatch = useMatch('/documents');
+  const documentsFolderRouteMatch = useMatch('/documents/folder/:folderId');
+  const tagsRouteMatch = useMatch('/tags');
+  const correspondentsRouteMatch = useMatch('/correspondents');
+  const isDocumentsRoute = Boolean(documentsRouteMatch || documentsFolderRouteMatch);
+  const isTagsRoute = Boolean(tagsRouteMatch);
+  const isCorrespondentsRoute = Boolean(correspondentsRouteMatch);
   const toggleTagFilter = useCallback((tagId) => {
     if (!tagId) return;
     setActiveTagFilters((previous) =>
@@ -4239,11 +4247,9 @@ const AppLayout = () => {
     onFolderDragStart: handleFolderDragStart,
     onFolderDragEnd: handleFolderDragEnd,
     draggedFolderId,
-    onShowTags: () => navigate('/tags'),
     tags,
     activeTagIds: activeTagFilters,
     onToggleTagFilter: toggleTagFilter,
-    onShowCorrespondents: () => navigate('/correspondents'),
     correspondents,
     activeCorrespondentIds: activeCorrespondentFilters,
     onToggleCorrespondentFilter: toggleCorrespondentFilter,
@@ -4489,6 +4495,31 @@ const AppLayout = () => {
               )}
             </div>
             <div className="app-bar__right">
+              <div className="app-bar__links">
+                <button
+                  type="button"
+                  className={`app-bar__link${isDocumentsRoute ? ' active' : ''}`}
+                  onClick={() => navigate('/documents')}
+                >
+                  Documents
+                </button>
+                <button
+                  type="button"
+                  className={`app-bar__link${isTagsRoute ? ' active' : ''}`}
+                  onClick={() => navigate('/tags')}
+                >
+                  Tags
+                  <span className="app-bar__link-count">{tags.length}</span>
+                </button>
+                <button
+                  type="button"
+                  className={`app-bar__link${isCorrespondentsRoute ? ' active' : ''}`}
+                  onClick={() => navigate('/correspondents')}
+                >
+                  Correspondents
+                  <span className="app-bar__link-count">{correspondents.length}</span>
+                </button>
+              </div>
               {status && (
                 <div className="app-bar__status">
                   <StatusBanner status={status} />