Function AppShell

client/src/App.tsx:56–107

()

}

function AppShell() {
  const [, navigate] = useLocation();
  const { showHelp, closeHelp } = useKeyboardShortcuts(navigate);

  const style = {
    "--sidebar-width": "16rem",
    "--sidebar-width-icon": "3rem",
  };

  return (
    <SidebarProvider style={style as React.CSSProperties}>
      <div className="flex h-screen w-full">
        <AppSidebar />
        <div className="flex flex-col flex-1 min-w-0">
          <header className="flex items-center justify-between gap-2 p-2 border-b sticky top-0 z-50 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
            <div className="flex items-center gap-3">
              <SidebarTrigger data-testid="button-sidebar-toggle" />
              <AppBreadcrumbs />
            </div>
            <div className="flex items-center">
              <LiveCounter />
              <NavActions />
              <ThemeToggle />
            </div>
          </header>
          <main className="flex-1 overflow-auto">
            <Router />
          </main>
        </div>
      </div>

      <Dialog open={showHelp} onOpenChange={(open) => !open && closeHelp()}>
        <DialogContent className="sm:max-w-md" data-testid="dialog-keyboard-shortcuts">
          <DialogHeader>
            <DialogTitle>Keyboard Shortcuts</DialogTitle>
            <DialogDescription>
              Navigate quickly using these keyboard shortcuts.
            </DialogDescription>
          </DialogHeader>
          <div className="flex flex-col gap-1 mt-2">
            {shortcutsList.map((s) => (
              <div key={s.keys} className="flex items-center justify-between py-1.5 px-1">
                <span className="text-sm text-muted-foreground">{s.label}</span>
                <Kbd keys={s.keys} />
              </div>
            ))}
          </div>
        </DialogContent>
      </Dialog>
    </SidebarProvider>
  );
}

function App() {
  return (