frontend

frontend/src/sidebar/Sidebar.jsx

@@ -1,5 +1,13 @@
-import React, { useCallback, useMemo } from 'react';
-import { ChevronIcon, TrashIcon, EditIcon, FolderIcon, ChevronsLeftIcon } from '../ui/icons';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  ChevronIcon,
+  TrashIcon,
+  EditIcon,
+  FolderIcon,
+  ChevronsLeftIcon,
+  LogoutIcon,
+  ChevronDownIcon,
+} from '../ui/icons';
 
 import { getTagColorStyle } from '../utils/colors';
 
@@ -20,9 +28,9 @@ const FolderNode = ({
   draggingFolderId,
 }) => {
   const isRoot = node.id === 'root';
-  const hasChildren = node.children.length > 0;
+  const hasChildren = Boolean(node.hasChildren);
   const canToggle = !isRoot && (hasChildren || !node.loaded);
-  const showChevron = !isRoot && hasChildren;
+  const showChevron = !isRoot && (hasChildren || !node.loaded);
   const icon = showChevron ? <ChevronIcon className="toggle-icon" /> : null;
   const canDrag = !isRoot;
   const isDragging = draggingFolderId === node.id;
@@ -149,6 +157,10 @@ const Sidebar = ({
   onLogout,
   status,
   onCollapse,
+  tenantSlug,
+  tenants = [],
+  activeTenantId = null,
+  onSelectTenant,
 }) => {
   const sortedCorrespondents = useMemo(
     () =>
@@ -181,7 +193,59 @@ const Sidebar = ({
   const handleSearchClear = useCallback(() => {
     onSearchClear?.();
   }, [onSearchClear]);
-  const handleLogoutClick = useCallback(() => {
+  const tenantButtonRef = useRef(null);
+  const tenantMenuRef = useRef(null);
+  const [tenantMenuOpen, setTenantMenuOpen] = useState(false);
+
+  const toggleTenantMenu = useCallback(() => {
+    const next = !tenantMenuOpen;
+    setTenantMenuOpen(next);
+    if (next && tenants.length === 0 && onSelectTenant) {
+      onSelectTenant(null, { refreshOnly: true });
+    }
+  }, [tenantMenuOpen, tenants.length, onSelectTenant]);
+
+  useEffect(() => {
+    if (!tenantMenuOpen) {
+      return undefined;
+    }
+    const handlePointer = (event) => {
+      const menuNode = tenantMenuRef.current;
+      const buttonNode = tenantButtonRef.current;
+          if (!menuNode) return;
+          if (menuNode.contains(event.target)) return;
+          if (buttonNode && buttonNode.contains(event.target)) return;
+          setTenantMenuOpen(false);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        setTenantMenuOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handlePointer);
+    document.addEventListener('touchstart', handlePointer);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handlePointer);
+      document.removeEventListener('touchstart', handlePointer);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [tenantMenuOpen]);
+
+  const handleTenantSelect = useCallback(
+    (tenant) => {
+      const targetId = tenant?.tenant_id || tenant?.tenantId || tenant?.id || null;
+      if (!targetId) {
+        return;
+      }
+      setTenantMenuOpen(false);
+      onSelectTenant?.(tenant);
+    },
+    [onSelectTenant],
+  );
+
+  const handleLogoutFromMenu = useCallback(() => {
+    setTenantMenuOpen(false);
     onLogout?.();
   }, [onLogout]);
 
@@ -237,7 +301,61 @@ const Sidebar = ({
     <aside className="sidebar">
       <div className="panel-header sidebar__header">
         <div className="panel-actions">
-          <h1 className="sidebar__title">Papercrate</h1>
+          <button
+            type="button"
+            className={`sidebar__title-button${tenantMenuOpen ? ' is-open' : ''}`}
+            onClick={toggleTenantMenu}
+            aria-haspopup="true"
+            aria-expanded={tenantMenuOpen}
+            ref={tenantButtonRef}
+          >
+            <span className="sidebar__title">
+              Papercrate
+              {tenantSlug ? <span className="sidebar__tenant"> / {tenantSlug}</span> : null}
+            </span>
+            <ChevronDownIcon
+              className={`sidebar__title-chevron${tenantMenuOpen ? ' is-open' : ''}`}
+              size={16}
+            />
+          </button>
+          {tenantMenuOpen ? (
+            <div className="menu" ref={tenantMenuRef} role="menu">
+              <div className="menu__list">
+                {tenants.length === 0 ? (
+                  <span className="menu__empty">No tenants available.</span>
+                ) : (
+                  tenants.map((tenant) => {
+                    const tenantId = tenant?.tenant_id || tenant?.tenantId || tenant?.id || null;
+                    const isActive = tenantId === activeTenantId;
+                    return (
+                      <button
+                        key={tenantId || tenant?.slug || tenant?.name}
+                        type="button"
+                        className={`menu__item${isActive ? ' active' : ''}`}
+                        onClick={() => handleTenantSelect(tenant)}
+                        role="menuitem"
+                      >
+                        <span className="menu__label">
+                        {tenant?.slug || tenant?.name || tenantId || 'Tenant'}
+                        </span>
+                        {isActive ? <span className="menu__active-indicator">Active</span> : null}
+                      </button>
+                    );
+                  })
+                )}
+              </div>
+              <div className="menu__footer">
+                <button
+                  type="button"
+                  className="menu__logout"
+                  onClick={handleLogoutFromMenu}
+                >
+                  <LogoutIcon size={16} />
+                  Log out
+                </button>
+              </div>
+            </div>
+          ) : null}
           <div className="spacer" />
           {onCollapse ? (
             <button
@@ -376,11 +494,6 @@ const Sidebar = ({
             })}
           </ul>
         </div>
-        <div className="sidebar__footer">
-          <button className="secondary" type="button" onClick={handleLogoutClick}>
-            Log out
-          </button>
-        </div>
       </div>
     </aside>
   );