wulf-pulse/app/layout.tsx
lorentz a0894fe946 feat(nav): global ⌘K command palette
Adds a global command launcher reachable from anywhere via ⌘K (Mac) /
Ctrl+K (Win), or "/" when no input is focused.  Three sections:

- **Navigation** — every primary route from the top-bar nav, plus the
  full Admin sub-menu, role-gated against the session.
- **Recent activity** — last 5 audits and last 5 device observations,
  lazy-loaded once on first open from /api/dashboard/overview.
- **Companies** — fuzzy search against the active customer list from
  /api/companies, kicks in once the user types 2+ characters.
  Selecting a company deep-links to /configuration-items?company=<id>.

Top-bar exposes a small "Search · ⌘K" pill on md+ for discoverability,
sized to fit between the Status indicator and the Theme toggle.

Implementation:
- shadcn `command` primitive (uses cmdk under the hood); declined the
  bundled dialog overwrite to keep our existing dialog.tsx.
- CommandPalette mounted once in app/layout.tsx so it lives outside the
  AppNavigation re-renders.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-03 10:11:08 -04:00

68 lines
2.3 KiB
TypeScript

import type { Metadata } from "next";
import { IBM_Plex_Sans, IBM_Plex_Mono } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "@/components/theme-provider";
import { AppNavigation } from "@/components/navigation/app-navigation";
import { CommandPalette } from "@/components/navigation/command-palette";
import { TaglineFooter } from "@/components/branding/tagline-footer";
import { Toaster } from "sonner";
import { AuthProvider } from "@/components/auth/auth-provider";
// IBM Plex Sans replaces the brand-mandated Helvetica/Arial. The 2013
// standards guide called for Helvetica Bold for headers and Helvetica
// Light for the tagline; Plex Sans honors the spirit (clean engineered
// sans) while loading reliably from Google Fonts. Weight 300 covers the
// "Light" usage in the tagline footer.
const plexSans = IBM_Plex_Sans({
subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
variable: "--font-plex-sans",
});
const plexMono = IBM_Plex_Mono({
subsets: ["latin"],
weight: ["400", "500", "600"],
variable: "--font-plex-mono",
});
export const metadata: Metadata = {
title: "Pulse · Operations console",
description: "Wulf Consulting operations console — tickets, RMM, IT Glue, backups, and analytics in one place.",
icons: {
icon: [
{ url: "/favicon.png", sizes: "any" },
{ url: "/wulff-logo.png", sizes: "32x32", type: "image/png" },
],
shortcut: "/favicon.png",
apple: "/wulff-logo.png",
},
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning className={`${plexSans.variable} ${plexMono.variable}`}>
<body className="font-sans antialiased">
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<AuthProvider>
<div className="min-h-screen bg-background flex flex-col">
<AppNavigation />
<main className="flex-1">{children}</main>
<TaglineFooter />
</div>
<CommandPalette />
</AuthProvider>
<Toaster position="top-right" richColors />
</ThemeProvider>
</body>
</html>
);
}