first commit

frontend/components/layout/topbar.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { Bell, Menu, Moon, Sun } from "lucide-react";
+import { SimulatorPanel } from "@/components/simulator/SimulatorPanel";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { UserButton } from "@clerk/nextjs";
+import { useTheme } from "next-themes";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { useAlarmCount } from "@/lib/alarm-context";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { Sidebar } from "./sidebar";
+
+const pageTitles: Record<string, string> = {
+  "/dashboard":     "Overview",
+  "/floor-map":     "Floor Map",
+  "/power":         "Power Management",
+  "/generator":     "Generator & Transfer",
+  "/cooling":       "Cooling & Optimisation",
+  "/environmental": "Environmental Monitoring",
+  "/leak":          "Leak Detection",
+  "/fire":          "Fire & Safety",
+  "/network":       "Network Infrastructure",
+  "/assets":        "Asset Management",
+  "/alarms":        "Alarms & Events",
+  "/capacity":      "Capacity Planning",
+  "/reports":       "Reports",
+  "/energy":        "Energy & Sustainability",
+  "/maintenance":   "Maintenance Windows",
+  "/settings":      "Settings",
+};
+
+export function Topbar() {
+  const pathname = usePathname();
+  const pageTitle = pageTitles[pathname] ?? "DemoBMS";
+  const { active: activeAlarms } = useAlarmCount();
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <header className="sticky top-0 z-30 flex items-center justify-between h-14 px-4 border-b border-border bg-background/80 backdrop-blur-sm shrink-0">
+      {/* Left: mobile menu + page title */}
+      <div className="flex items-center gap-3">
+        <Sheet>
+          <SheetTrigger asChild>
+            <Button variant="ghost" size="icon" className="md:hidden" aria-label="Open menu">
+              <Menu className="w-4 h-4" />
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left" className="p-0 w-60">
+            <Sidebar />
+          </SheetContent>
+        </Sheet>
+
+        <h1 className="text-sm font-semibold text-foreground">{pageTitle}</h1>
+      </div>
+
+      {/* Right: alarm bell + user */}
+      <div className="flex items-center gap-2">
+        {/* Alarm bell — single canonical alarm indicator */}
+        <Button variant="ghost" size="icon" className="relative h-8 w-8" asChild>
+          <Link href="/alarms" aria-label={`Alarms${activeAlarms > 0 ? ` — ${activeAlarms} active` : ""}`}>
+            <Bell className="w-4 h-4" />
+            {activeAlarms > 0 && (
+              <Badge
+                variant="destructive"
+                className="absolute -top-0.5 -right-0.5 h-4 min-w-4 px-1 text-[9px] leading-none"
+              >
+                {activeAlarms > 99 ? "99+" : activeAlarms}
+              </Badge>
+            )}
+          </Link>
+        </Button>
+
+        {/* Scenario simulator */}
+        <SimulatorPanel />
+
+        {/* Theme toggle */}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8"
+          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+          aria-label="Toggle theme"
+        >
+          {theme === "dark" ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+        </Button>
+
+        {/* Clerk user button */}
+        <UserButton
+          appearance={{
+            elements: {
+              avatarBox: "w-7 h-7",
+            },
+          }}
+        />
+      </div>
+    </header>
+  );
+}