move to sidebar

frontend/src/sidebar/Sidebar.jsx

@@ -136,6 +136,18 @@ const Sidebar = ({
   correspondents = [],
   activeCorrespondentIds = [],
   onToggleCorrespondentFilter,
+  onManageTags,
+  onManageCorrespondents,
+  searchQuery = '',
+  onSearchChange,
+  onSearchSubmit,
+  onSearchClear,
+  isFilterActive,
+  appStatus,
+  loading,
+  previewActive,
+  onLogout,
+  status,
 }) => {
   const sortedCorrespondents = useMemo(
     () =>
@@ -150,6 +162,27 @@ const Sidebar = ({
   );
   const handleToggleTag = onToggleTagFilter || (() => {});
   const activeTagSet = new Set(activeTagIds);
+  const handleManageTags = onManageTags || (() => {});
+  const handleManageCorrespondents = onManageCorrespondents || (() => {});
+  const handleSearchInputChange = useCallback(
+    (event) => {
+      onSearchChange?.(event.target.value);
+    },
+    [onSearchChange],
+  );
+  const handleSearchFormSubmit = useCallback(
+    (event) => {
+      event.preventDefault();
+      onSearchSubmit?.();
+    },
+    [onSearchSubmit],
+  );
+  const handleSearchClear = useCallback(() => {
+    onSearchClear?.();
+  }, [onSearchClear]);
+  const handleLogoutClick = useCallback(() => {
+    onLogout?.();
+  }, [onLogout]);
 
   const renderNodes = useCallback(
     (ids, depth) =>
@@ -193,9 +226,39 @@ const Sidebar = ({
   );
 
   const rootNode = folderNodes.get('root');
+  const hintText = appStatus === 'bootstrapping' && loading
+    ? 'Loading your library…'
+    : previewActive
+    ? 'Viewing document preview. Press ← Back to return to the library.'
+    : 'Drag files here to upload.';
 
   return (
     <aside className="sidebar column">
+      <div className="sidebar__meta">
+        <h1 className="sidebar__title">Papercrate</h1>
+        <span className="sidebar__hint">{hintText}</span>
+        {onSearchChange && (
+          <form className="sidebar__search" onSubmit={handleSearchFormSubmit}>
+            <input
+              type="search"
+              value={searchQuery}
+              onChange={handleSearchInputChange}
+              placeholder="Search documents"
+              aria-label="Search documents"
+            />
+            {isFilterActive && (
+              <button type="button" onClick={handleSearchClear}>
+                Clear
+              </button>
+            )}
+          </form>
+        )}
+        {status && (
+          <div className="sidebar__status">
+            <div className={`status-banner ${status.variant}`}>{status.message}</div>
+          </div>
+        )}
+      </div>
       <div className="sidebar-section sidebar-section--folders">
         <div className="sidebar-section__header">
           <h3>Folders</h3>
@@ -206,8 +269,14 @@ const Sidebar = ({
       </div>
       <div className="sidebar-section">
         <div className="sidebar-section__header">
-          <h3>Tags</h3>
-          <span className="meta">{tags.length}</span>
+          <button
+            type="button"
+            className="sidebar-section__title"
+            onClick={handleManageTags}
+          >
+            <h3>Tags</h3>
+            <span className="meta">{tags.length}</span>
+          </button>
         </div>
         <div
           className={`sidebar-tag-cloud${
@@ -257,8 +326,14 @@ const Sidebar = ({
       </div>
       <div className="sidebar-section">
         <div className="sidebar-section__header">
-          <h3>Correspondents</h3>
-          <span className="meta">{correspondents.length}</span>
+          <button
+            type="button"
+            className="sidebar-section__title"
+            onClick={handleManageCorrespondents}
+          >
+            <h3>Correspondents</h3>
+            <span className="meta">{correspondents.length}</span>
+          </button>
         </div>
         <ul className="sidebar-correspondent-list">
           {sortedCorrespondents.length ? (
@@ -293,6 +368,11 @@ const Sidebar = ({
           )}
         </ul>
       </div>
+      <div className="sidebar__footer">
+        <button className="secondary" type="button" onClick={handleLogoutClick}>
+          Log out
+        </button>
+      </div>
     </aside>
   );
 };