dorfteich/apps/web/src/layout/AppLayout.tsx

import { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Outlet } from 'react-router-dom';

import { usePersistentState } from '../lib/use-persistent-state';
import { Footer } from './Footer';
import { PageActionsSlotContext } from './page-actions';
import { SidebarChromeContext } from './sidebar-chrome';
import { Sidebar } from './Sidebar';
import { clampSidebarWidth, SIDEBAR_DEFAULT_WIDTH_REM, SidebarResizer } from './SidebarResizer';
import { TopBar } from './TopBar';

export function AppLayout(): React.JSX.Element {
  const { t } = useTranslation();
  const [sidebarCollapsed, setSidebarCollapsed] = usePersistentState('ui.sidebar.collapsed', false);
  const [sidebarWidth, setSidebarWidth] = usePersistentState(
    'ui.sidebar.width',
    SIDEBAR_DEFAULT_WIDTH_REM,
  );
  const [forcedHidden, setForcedHidden] = useState(false);
  const collapsed = sidebarCollapsed || forcedHidden;
  // Clamp on read too — the persisted value may predate a bounds change.
  const widthRem = clampSidebarWidth(sidebarWidth);
  // The TopBar registers its page-scoped elements here; the active page
  // portals its icon actions (#101) and presence strip (#102) into them.
  const [actionsElement, setActionsElement] = useState<HTMLElement | null>(null);
  const [presenceElement, setPresenceElement] = useState<HTMLElement | null>(null);
  const [statusElement, setStatusElement] = useState<HTMLElement | null>(null);
  const actionsSlot = useMemo(
    () => ({
      element: actionsElement,
      setElement: setActionsElement,
      presenceElement,
      setPresenceElement,
      statusElement,
      setStatusElement,
    }),
    [actionsElement, presenceElement, statusElement],
  );

  // Ctrl/Cmd+\ toggles the sidebar (same shortcut as Notion), regardless of
  // which element has focus.
  useEffect(() => {
    function handleKeyDown(event: KeyboardEvent): void {
      if ((event.ctrlKey || event.metaKey) && event.key === '\\') {
        event.preventDefault();
        setSidebarCollapsed(!sidebarCollapsed);
      }
    }
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [sidebarCollapsed, setSidebarCollapsed]);

  return (
    <SidebarChromeContext.Provider value={setForcedHidden}>
      <PageActionsSlotContext.Provider value={actionsSlot}>
        <div className="app">
          {/* First tab stop: jump over topbar + sidebar (#166, WCAG 2.4.1). */}
          <a className="skip-link" href="#main">
            {t('layout.skipToContent')}
          </a>
          <TopBar
            sidebarCollapsed={collapsed}
            onToggleSidebar={() => setSidebarCollapsed(!sidebarCollapsed)}
          />
          <div
            className="app-body"
            style={{ '--sidebar-width': `${widthRem}rem` } as React.CSSProperties}
          >
            <Sidebar
              collapsed={collapsed}
              // Inside the nav landmark so no content sits outside landmarks
              // (#166); hidden with the sidebar as before.
              resizer={
                !collapsed && <SidebarResizer widthRem={widthRem} onResize={setSidebarWidth} />
              }
            />
            <div className="main-column">
              {/* tabIndex: the main area is the app's scroll container; on
                  pages without focusable content (e.g. legal texts) keyboard
                  users could otherwise not scroll it (#165, WCAG 2.1.1).
                  id: skip-link target (#166). */}
              <main className="main" id="main" tabIndex={0}>
                <Outlet />
              </main>
              {/* Outside the scroll container: always visible at the bottom
                  edge of the window (M10 follow-up 3). */}
              <Footer />
            </div>
          </div>
        </div>
      </PageActionsSlotContext.Provider>
    </SidebarChromeContext.Provider>
  );
}