From 2eda3e7a390706277ec98c3fbed4e00e9bc3a504 Mon Sep 17 00:00:00 2001
From: Dave <david.els1@outlook.com>
Date: Wed, 16 Sep 2026 10:01:45 +0200
Subject: [PATCH] feat(shell): floating panel layout with labelled icon rail

---
 src/components/shell/app-shell.tsx | 29 ++++++++++++
 src/components/shell/sidebar.tsx   | 75 ++++++++++++++++++++++++++++++
 src/components/shell/top-bar.tsx   | 46 ++++++++++++++++++
 3 files changed, 150 insertions(+)
 create mode 100644 src/components/shell/app-shell.tsx
 create mode 100644 src/components/shell/sidebar.tsx
 create mode 100644 src/components/shell/top-bar.tsx

diff --git a/src/components/shell/app-shell.tsx b/src/components/shell/app-shell.tsx
new file mode 100644
index 0000000..4330355
--- /dev/null
+++ b/src/components/shell/app-shell.tsx
@@ -0,0 +1,29 @@
+import { Sidebar } from "@/components/shell/sidebar";
+import type { Role } from "@/lib/pb/types";
+
+/**
+ * The page background with a raised panel floating on it.
+ *
+ * Borrowed from the design reference and the reason the product does not read
+ * as an admin panel. The panel owns the scroll; the page behind it never
+ * moves, so the elevation stays believable.
+ */
+export function AppShell({
+  role,
+  currentPath,
+  children,
+}: {
+  role: Role;
+  currentPath: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex h-screen overflow-hidden bg-page px-3 pb-3 pt-0">
+      <Sidebar role={role} currentPath={currentPath} />
+
+      <main className="flex min-w-0 flex-1 flex-col overflow-hidden rounded-[var(--radius-panel)] border border-border-subtle bg-panel shadow-[var(--shadow-panel)]">
+        {children}
+      </main>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/shell/sidebar.tsx b/src/components/shell/sidebar.tsx
new file mode 100644
index 0000000..1de5c90
--- /dev/null
+++ b/src/components/shell/sidebar.tsx
@@ -0,0 +1,75 @@
+import Link from "next/link";
+import { LayoutGrid, FolderKanban, Settings, Users } from "lucide-react";
+
+import { cn } from "@/lib/cn";
+import type { Role } from "@/lib/pb/types";
+
+interface NavItem {
+  href: string;
+  label: string;
+  icon: React.ComponentType<{ size?: number; strokeWidth?: number }>;
+  ownerOnly?: boolean;
+}
+
+const NAV: NavItem[] = [
+  { href: "/", label: "Projects", icon: LayoutGrid },
+  { href: "/admin/clients", label: "Clients", icon: Users, ownerOnly: true },
+  { href: "/admin/projects", label: "Manage", icon: FolderKanban, ownerOnly: true },
+  { href: "/admin/settings", label: "Settings", icon: Settings, ownerOnly: true },
+];
+
+/**
+ * The icon rail from the reference: an icon over a small label, not an icon
+ * alone. Icon-only rails force everyone to learn a private vocabulary, and a
+ * client manager visits this maybe twice a month.
+ *
+ * Owner-only links are filtered out here for tidiness. That is presentation,
+ * not security — the pages themselves re-check the role.
+ */
+export function Sidebar({
+  role,
+  currentPath,
+}: {
+  role: Role;
+  currentPath: string;
+}) {
+  const items = NAV.filter((item) => !item.ownerOnly || role === "owner");
+
+  return (
+    <nav
+      aria-label="Main"
+      className="flex w-[76px] shrink-0 flex-col items-center gap-1 py-5"
+    >
+      <div className="mb-5 grid h-9 w-9 place-items-center rounded-xl bg-brand text-brand-fg">
+        <span className="text-sm font-semibold">CB</span>
+      </div>
+
+      {items.map((item) => {
+        const Icon = item.icon;
+        const active =
+          item.href === "/"
+            ? currentPath === "/"
+            : currentPath.startsWith(item.href);
+
+        return (
+          <Link
+            key={item.href}
+            href={item.href}
+            aria-current={active ? "page" : undefined}
+            className={cn(
+              "flex w-[60px] flex-col items-center gap-1 rounded-xl px-1 py-2.5 transition-colors",
+              active
+                ? "bg-panel text-text-primary shadow-[var(--shadow-tile)]"
+                : "text-text-muted hover:text-text-secondary"
+            )}
+          >
+            <Icon size={18} strokeWidth={1.75} />
+            <span className="text-[10px] font-medium leading-none">
+              {item.label}
+            </span>
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}
\ No newline at end of file
diff --git a/src/components/shell/top-bar.tsx b/src/components/shell/top-bar.tsx
new file mode 100644
index 0000000..eba9fac
--- /dev/null
+++ b/src/components/shell/top-bar.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { LogOut } from "lucide-react";
+
+import { ThemeToggle } from "@/components/theme/theme-toggle";
+import { IconButton } from "@/components/ui/icon-button";
+
+export function TopBar({
+  title,
+  subtitle,
+  children,
+}: {
+  title: string;
+  subtitle?: string;
+  children?: React.ReactNode;
+}) {
+  const router = useRouter();
+
+  async function signOut() {
+    await fetch("/api/auth/logout", { method: "POST" });
+    router.push("/login");
+    router.refresh();
+  }
+
+  return (
+    <header className="flex items-center gap-4 border-b border-border-subtle px-6 py-4">
+      <div className="min-w-0">
+        <h1 className="truncate text-lg font-semibold tracking-tight">
+          {title}
+        </h1>
+        {subtitle && (
+          <p className="truncate text-xs text-text-muted">{subtitle}</p>
+        )}
+      </div>
+
+      <div className="ml-auto flex items-center gap-3">
+        {children}
+        <ThemeToggle />
+        <IconButton label="Sign out" onClick={signOut}>
+          <LogOut size={16} strokeWidth={1.75} />
+        </IconButton>
+      </div>
+    </header>
+  );
+}
\ No newline at end of file