leistungsbilanz-ts/src/frontend/components/AppShell.tsx

"use client";

import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";
import { Sidebar } from "./Sidebar";

const PROJECT_AREA_PATTERN = /^\/projects(\/[^/]+)?$/;
const SIDEBAR_COLLAPSED_STORAGE_KEY = "leistungsbilanz:sidebar-collapsed";

export function AppShell({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const showSidebar = PROJECT_AREA_PATTERN.test(pathname ?? "");
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);

  useEffect(() => {
    setIsSidebarCollapsed(window.localStorage.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY) === "1");
  }, []);

  function toggleSidebarCollapsed() {
    setIsSidebarCollapsed((current) => {
      const next = !current;
      window.localStorage.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, next ? "1" : "0");
      return next;
    });
  }

  if (!showSidebar) {
    return <>{children}</>;
  }

  return (
    <div className={isSidebarCollapsed ? "app-shell app-shell-collapsed" : "app-shell"}>
      <Sidebar isCollapsed={isSidebarCollapsed} onToggleCollapsed={toggleSidebarCollapsed} />
      <div className="app-shell-content">{children}</div>
    </div>
  );
}