feat(web): MS15 Phase 1 — Design System & App Shell (#451)
All checks were successful
ci/woodpecker/push/web Pipeline was successful
All checks were successful
ci/woodpecker/push/web Pipeline was successful
Co-authored-by: Jason Woltje <jason@diversecanvas.com> Co-committed-by: Jason Woltje <jason@diversecanvas.com>
This commit was merged in pull request #451.
This commit is contained in:
@@ -4,10 +4,79 @@ import { useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useAuth } from "@/lib/auth/auth-context";
|
||||
import { IS_MOCK_AUTH_MODE } from "@/lib/config";
|
||||
import { Navigation } from "@/components/layout/Navigation";
|
||||
import { AppHeader } from "@/components/layout/AppHeader";
|
||||
import { AppSidebar } from "@/components/layout/AppSidebar";
|
||||
import { SidebarProvider, useSidebar } from "@/components/layout/SidebarContext";
|
||||
import { ChatOverlay } from "@/components/chat";
|
||||
import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Constants
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const SIDEBAR_EXPANDED_WIDTH = "240px";
|
||||
const SIDEBAR_COLLAPSED_WIDTH = "60px";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Inner shell — must be a child of SidebarProvider to use useSidebar
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface AppShellProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
function AppShell({ children }: AppShellProps): React.JSX.Element {
|
||||
const { collapsed, isMobile } = useSidebar();
|
||||
|
||||
// On tablet (md–lg), hide sidebar from the grid when the sidebar is collapsed.
|
||||
// On mobile, the sidebar is fixed-position so the grid is always single-column.
|
||||
const sidebarHidden = !isMobile && collapsed;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="app-shell"
|
||||
data-sidebar-hidden={sidebarHidden ? "true" : undefined}
|
||||
style={
|
||||
{
|
||||
"--sidebar-w": collapsed ? SIDEBAR_COLLAPSED_WIDTH : SIDEBAR_EXPANDED_WIDTH,
|
||||
transition: "grid-template-columns 0.2s var(--ease, ease)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
{/* Full-width header — grid-column: 1 / -1 via .app-header CSS class */}
|
||||
<AppHeader />
|
||||
|
||||
{/* Sidebar — left column, row 2, via .app-sidebar CSS class */}
|
||||
<AppSidebar />
|
||||
|
||||
{/* Main content — right column, row 2, via .app-main CSS class */}
|
||||
<main className="app-main" id="main-content">
|
||||
{IS_MOCK_AUTH_MODE && (
|
||||
<div
|
||||
className="border-b px-4 py-2 text-xs font-medium flex-shrink-0"
|
||||
style={{
|
||||
borderColor: "var(--ms-amber-500)",
|
||||
background: "rgba(245, 158, 11, 0.08)",
|
||||
color: "var(--ms-amber-400)",
|
||||
}}
|
||||
data-testid="mock-auth-banner"
|
||||
>
|
||||
Mock Auth Mode (Local Only): Real authentication is bypassed for frontend development.
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 overflow-y-auto p-5">{children}</div>
|
||||
</main>
|
||||
|
||||
{!IS_MOCK_AUTH_MODE && <ChatOverlay />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Authenticated layout — handles auth guard + provides sidebar context
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export default function AuthenticatedLayout({
|
||||
children,
|
||||
}: {
|
||||
@@ -23,11 +92,7 @@ export default function AuthenticatedLayout({
|
||||
}, [isAuthenticated, isLoading, router]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900"></div>
|
||||
</div>
|
||||
);
|
||||
return <MosaicSpinner size={48} fullPage />;
|
||||
}
|
||||
|
||||
if (!isAuthenticated) {
|
||||
@@ -35,20 +100,8 @@ export default function AuthenticatedLayout({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<Navigation />
|
||||
<div className="pt-16">
|
||||
{IS_MOCK_AUTH_MODE && (
|
||||
<div
|
||||
className="border-b border-amber-300 bg-amber-50 px-4 py-2 text-sm text-amber-900"
|
||||
data-testid="mock-auth-banner"
|
||||
>
|
||||
Mock Auth Mode (Local Only): Real authentication is bypassed for frontend development.
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
{!IS_MOCK_AUTH_MODE && <ChatOverlay />}
|
||||
</div>
|
||||
<SidebarProvider>
|
||||
<AppShell>{children}</AppShell>
|
||||
</SidebarProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,147 +3,303 @@
|
||||
@tailwind utilities;
|
||||
|
||||
/* =============================================================================
|
||||
DESIGN C: PROFESSIONAL/ENTERPRISE DESIGN SYSTEM
|
||||
Philosophy: "Good design is as little design as possible." - Dieter Rams
|
||||
MOSAIC DESIGN SYSTEM — Reference token system from dashboard design
|
||||
============================================================================= */
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
CSS Custom Properties - Light Theme (Default)
|
||||
Primitive Tokens (Dark-first — dark is the default theme)
|
||||
----------------------------------------------------------------------------- */
|
||||
:root {
|
||||
/* Base colors - increased contrast from surfaces */
|
||||
--color-background: 245 247 250;
|
||||
--color-foreground: 15 23 42;
|
||||
/* Mosaic design tokens — dark palette (default) */
|
||||
--ms-bg-950: #080b12;
|
||||
--ms-bg-900: #0f141d;
|
||||
--ms-bg-850: #151b26;
|
||||
--ms-surface-800: #1b2331;
|
||||
--ms-surface-750: #232d3f;
|
||||
--ms-border-700: #2f3b52;
|
||||
--ms-text-100: #eef3ff;
|
||||
--ms-text-300: #c5d0e6;
|
||||
--ms-text-500: #8f9db7;
|
||||
--ms-blue-500: #2f80ff;
|
||||
--ms-blue-400: #56a0ff;
|
||||
--ms-red-500: #e5484d;
|
||||
--ms-red-400: #f06a6f;
|
||||
--ms-purple-500: #8b5cf6;
|
||||
--ms-purple-400: #a78bfa;
|
||||
--ms-teal-500: #14b8a6;
|
||||
--ms-teal-400: #2dd4bf;
|
||||
--ms-amber-500: #f59e0b;
|
||||
--ms-amber-400: #fbbf24;
|
||||
--ms-pink-500: #ec4899;
|
||||
--ms-emerald-500: #10b981;
|
||||
--ms-orange-500: #f97316;
|
||||
--ms-cyan-500: #06b6d4;
|
||||
--ms-indigo-500: #6366f1;
|
||||
|
||||
/* Surface hierarchy (elevation levels) - improved contrast */
|
||||
--surface-0: 255 255 255;
|
||||
--surface-1: 250 251 252;
|
||||
--surface-2: 241 245 249;
|
||||
--surface-3: 226 232 240;
|
||||
/* Semantic aliases — dark theme is default */
|
||||
--bg: var(--ms-bg-900);
|
||||
--bg-deep: var(--ms-bg-950);
|
||||
--bg-mid: var(--ms-bg-850);
|
||||
--surface: var(--ms-surface-800);
|
||||
--surface-2: var(--ms-surface-750);
|
||||
--border: var(--ms-border-700);
|
||||
--text: var(--ms-text-100);
|
||||
--text-2: var(--ms-text-300);
|
||||
--muted: var(--ms-text-500);
|
||||
--primary: var(--ms-blue-500);
|
||||
--primary-l: var(--ms-blue-400);
|
||||
--danger: var(--ms-red-500);
|
||||
--success: var(--ms-teal-500);
|
||||
--warn: var(--ms-amber-500);
|
||||
--purple: var(--ms-purple-500);
|
||||
|
||||
/* Text hierarchy */
|
||||
--text-primary: 15 23 42;
|
||||
--text-secondary: 51 65 85;
|
||||
--text-tertiary: 71 85 105;
|
||||
--text-muted: 100 116 139;
|
||||
/* Typography */
|
||||
--font: var(--font-outfit, 'Outfit'), system-ui, sans-serif;
|
||||
--mono: var(--font-fira-code, 'Fira Code'), 'Cascadia Code', monospace;
|
||||
|
||||
/* Border colors - stronger borders for light mode */
|
||||
--border-default: 203 213 225;
|
||||
--border-subtle: 226 232 240;
|
||||
--border-strong: 148 163 184;
|
||||
/* Radius scale */
|
||||
--r: 8px;
|
||||
--r-sm: 5px;
|
||||
--r-lg: 12px;
|
||||
--r-xl: 16px;
|
||||
|
||||
/* Brand accent - Indigo (professional, trustworthy) */
|
||||
--accent-primary: 79 70 229;
|
||||
--accent-primary-hover: 67 56 202;
|
||||
--accent-primary-light: 238 242 255;
|
||||
--accent-primary-muted: 199 210 254;
|
||||
/* Layout dimensions */
|
||||
--sidebar-w: 260px;
|
||||
--topbar-h: 56px;
|
||||
--terminal-h: 220px;
|
||||
|
||||
/* Semantic colors - Success (Emerald) */
|
||||
--semantic-success: 16 185 129;
|
||||
--semantic-success-light: 209 250 229;
|
||||
--semantic-success-dark: 6 95 70;
|
||||
/* Easing */
|
||||
--ease: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
|
||||
/* Semantic colors - Warning (Amber) */
|
||||
--semantic-warning: 245 158 11;
|
||||
--semantic-warning-light: 254 243 199;
|
||||
--semantic-warning-dark: 146 64 14;
|
||||
|
||||
/* Semantic colors - Error (Rose) */
|
||||
--semantic-error: 244 63 94;
|
||||
--semantic-error-light: 255 228 230;
|
||||
--semantic-error-dark: 159 18 57;
|
||||
|
||||
/* Semantic colors - Info (Sky) */
|
||||
--semantic-info: 14 165 233;
|
||||
--semantic-info-light: 224 242 254;
|
||||
--semantic-info-dark: 3 105 161;
|
||||
|
||||
/* Focus ring */
|
||||
--focus-ring: 99 102 241;
|
||||
--focus-ring-offset: 255 255 255;
|
||||
|
||||
/* Shadows - visible but subtle */
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.08);
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
CSS Custom Properties - Dark Theme
|
||||
----------------------------------------------------------------------------- */
|
||||
.dark {
|
||||
--color-background: 3 7 18;
|
||||
--color-foreground: 248 250 252;
|
||||
|
||||
/* Surface hierarchy (elevation levels) */
|
||||
--surface-0: 15 23 42;
|
||||
--surface-1: 30 41 59;
|
||||
--surface-2: 51 65 85;
|
||||
--surface-3: 71 85 105;
|
||||
|
||||
/* Text hierarchy */
|
||||
--text-primary: 248 250 252;
|
||||
--text-secondary: 203 213 225;
|
||||
--text-tertiary: 148 163 184;
|
||||
--text-muted: 100 116 139;
|
||||
|
||||
/* Border colors */
|
||||
--border-default: 51 65 85;
|
||||
--border-subtle: 30 41 59;
|
||||
--border-strong: 71 85 105;
|
||||
|
||||
/* Brand accent adjustments for dark mode */
|
||||
--accent-primary: 129 140 248;
|
||||
--accent-primary-hover: 165 180 252;
|
||||
--accent-primary-light: 30 27 75;
|
||||
--accent-primary-muted: 55 48 163;
|
||||
|
||||
/* Semantic colors adjustments */
|
||||
--semantic-success: 52 211 153;
|
||||
--semantic-success-light: 6 78 59;
|
||||
--semantic-success-dark: 167 243 208;
|
||||
|
||||
--semantic-warning: 251 191 36;
|
||||
--semantic-warning-light: 120 53 15;
|
||||
--semantic-warning-dark: 253 230 138;
|
||||
|
||||
--semantic-error: 251 113 133;
|
||||
--semantic-error-light: 136 19 55;
|
||||
--semantic-error-dark: 253 164 175;
|
||||
|
||||
--semantic-info: 56 189 248;
|
||||
--semantic-info-light: 12 74 110;
|
||||
--semantic-info-dark: 186 230 253;
|
||||
|
||||
/* Focus ring */
|
||||
--focus-ring: 129 140 248;
|
||||
--focus-ring-offset: 15 23 42;
|
||||
|
||||
/* Shadows - subtle glow in dark mode */
|
||||
/* Legacy shadow tokens (retained for component compat) */
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
Light Theme Override — applied via data-theme attribute on <html>
|
||||
----------------------------------------------------------------------------- */
|
||||
[data-theme="light"] {
|
||||
--ms-bg-950: #f8faff;
|
||||
--ms-bg-900: #f0f4fc;
|
||||
--ms-bg-850: #e8edf8;
|
||||
--ms-surface-800: #dde4f2;
|
||||
--ms-surface-750: #d0d9ec;
|
||||
--ms-border-700: #b8c4de;
|
||||
--ms-text-100: #0f141d;
|
||||
--ms-text-300: #2f3b52;
|
||||
--ms-text-500: #5a6a87;
|
||||
|
||||
/* Re-alias semantics for light — identical structure, primitive tokens differ */
|
||||
--bg: var(--ms-bg-900);
|
||||
--bg-deep: var(--ms-bg-950);
|
||||
--bg-mid: var(--ms-bg-850);
|
||||
--surface: var(--ms-surface-800);
|
||||
--surface-2: var(--ms-surface-750);
|
||||
--border: var(--ms-border-700);
|
||||
--text: var(--ms-text-100);
|
||||
--text-2: var(--ms-text-300);
|
||||
--muted: var(--ms-text-500);
|
||||
|
||||
/* Lighter shadows for light mode */
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.08);
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
Base Styles
|
||||
----------------------------------------------------------------------------- */
|
||||
* {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 15px;
|
||||
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--text-primary));
|
||||
background: rgb(var(--color-background));
|
||||
font-size: 14px;
|
||||
font-family: var(--font);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.5;
|
||||
transition: background-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Subtle grain/noise overlay for texture */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
|
||||
opacity: 0.025;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
Focus States - Accessible & Visible
|
||||
----------------------------------------------------------------------------- */
|
||||
@layer base {
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--ms-blue-400);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
Scrollbar Styling - Minimal & Professional
|
||||
----------------------------------------------------------------------------- */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--muted);
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border) transparent;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
App Shell Grid Layout
|
||||
----------------------------------------------------------------------------- */
|
||||
.app-shell {
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-w) 1fr;
|
||||
grid-template-rows: var(--topbar-h) 1fr;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1;
|
||||
background: var(--bg-deep);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
gap: 12px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
background: var(--bg-deep);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
background: var(--bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
Responsive App Shell — Mobile (< 768px): single-column, sidebar as overlay
|
||||
----------------------------------------------------------------------------- */
|
||||
@media (max-width: 767px) {
|
||||
.app-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: var(--topbar-h);
|
||||
bottom: 0;
|
||||
width: 240px;
|
||||
z-index: 150;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.app-sidebar[data-mobile-open="true"] {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.app-main {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
Responsive App Shell — Tablet (768px–1023px): sidebar toggleable, pushes content
|
||||
----------------------------------------------------------------------------- */
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.app-shell[data-sidebar-hidden="true"] {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.app-shell[data-sidebar-hidden="true"] .app-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-shell[data-sidebar-hidden="true"] .app-main {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.app-shell[data-sidebar-hidden="true"] .app-header {
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
@@ -182,102 +338,10 @@ body {
|
||||
}
|
||||
|
||||
.text-mono {
|
||||
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
/* Text color utilities */
|
||||
.text-primary {
|
||||
color: rgb(var(--text-primary));
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: rgb(var(--text-secondary));
|
||||
}
|
||||
|
||||
.text-tertiary {
|
||||
color: rgb(var(--text-tertiary));
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: rgb(var(--text-muted));
|
||||
}
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
Surface & Card Utilities
|
||||
----------------------------------------------------------------------------- */
|
||||
@layer utilities {
|
||||
.surface-0 {
|
||||
background-color: rgb(var(--surface-0));
|
||||
}
|
||||
|
||||
.surface-1 {
|
||||
background-color: rgb(var(--surface-1));
|
||||
}
|
||||
|
||||
.surface-2 {
|
||||
background-color: rgb(var(--surface-2));
|
||||
}
|
||||
|
||||
.surface-3 {
|
||||
background-color: rgb(var(--surface-3));
|
||||
}
|
||||
|
||||
.border-default {
|
||||
border-color: rgb(var(--border-default));
|
||||
}
|
||||
|
||||
.border-subtle {
|
||||
border-color: rgb(var(--border-subtle));
|
||||
}
|
||||
|
||||
.border-strong {
|
||||
border-color: rgb(var(--border-strong));
|
||||
}
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
Focus States - Accessible & Visible
|
||||
----------------------------------------------------------------------------- */
|
||||
@layer base {
|
||||
:focus-visible {
|
||||
outline: 2px solid rgb(var(--focus-ring));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Remove default focus for mouse users */
|
||||
:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
Scrollbar Styling - Minimal & Professional
|
||||
----------------------------------------------------------------------------- */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgb(var(--text-muted) / 0.4);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(var(--text-muted) / 0.6);
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgb(var(--text-muted) / 0.4) transparent;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
@@ -292,40 +356,46 @@ body {
|
||||
|
||||
.btn-primary {
|
||||
@apply btn px-4 py-2;
|
||||
background-color: rgb(var(--accent-primary));
|
||||
background: linear-gradient(135deg, var(--ms-blue-500), var(--ms-purple-500));
|
||||
color: white;
|
||||
border-radius: var(--r);
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background-color: rgb(var(--accent-primary-hover));
|
||||
box-shadow: 0 8px 28px rgba(47, 128, 255, 0.38);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply btn px-4 py-2;
|
||||
background-color: rgb(var(--surface-2));
|
||||
color: rgb(var(--text-primary));
|
||||
border: 1px solid rgb(var(--border-default));
|
||||
background-color: var(--surface);
|
||||
color: var(--text-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r);
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background-color: rgb(var(--surface-3));
|
||||
background-color: var(--surface-2);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
@apply btn px-3 py-2;
|
||||
background-color: transparent;
|
||||
color: rgb(var(--text-secondary));
|
||||
color: var(--muted);
|
||||
border-radius: var(--r);
|
||||
}
|
||||
|
||||
.btn-ghost:hover:not(:disabled) {
|
||||
background-color: rgb(var(--surface-2));
|
||||
color: rgb(var(--text-primary));
|
||||
background-color: var(--surface);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
@apply btn px-4 py-2;
|
||||
background-color: rgb(var(--semantic-error));
|
||||
background-color: var(--danger);
|
||||
color: white;
|
||||
border-radius: var(--r);
|
||||
}
|
||||
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
@@ -346,34 +416,36 @@ body {
|
||||
----------------------------------------------------------------------------- */
|
||||
@layer components {
|
||||
.input {
|
||||
@apply w-full rounded-md px-3 py-2 text-sm transition-all duration-150;
|
||||
@apply focus:outline-none focus:ring-2 focus:ring-offset-0;
|
||||
background-color: rgb(var(--surface-0));
|
||||
border: 1px solid rgb(var(--border-default));
|
||||
color: rgb(var(--text-primary));
|
||||
@apply w-full text-sm transition-all duration-150;
|
||||
@apply focus:outline-none;
|
||||
background-color: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r);
|
||||
color: var(--text);
|
||||
padding: 11px 14px;
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
color: rgb(var(--text-muted));
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border-color: rgb(var(--accent-primary));
|
||||
box-shadow: 0 0 0 3px rgb(var(--accent-primary) / 0.1);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(47, 128, 255, 0.12);
|
||||
}
|
||||
|
||||
.input:disabled {
|
||||
@apply opacity-50 cursor-not-allowed;
|
||||
background-color: rgb(var(--surface-1));
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
.input-error {
|
||||
border-color: rgb(var(--semantic-error));
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
.input-error:focus {
|
||||
border-color: rgb(var(--semantic-error));
|
||||
box-shadow: 0 0 0 3px rgb(var(--semantic-error) / 0.1);
|
||||
border-color: var(--danger);
|
||||
box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -383,8 +455,8 @@ body {
|
||||
@layer components {
|
||||
.card {
|
||||
@apply rounded-lg p-4;
|
||||
background-color: rgb(var(--surface-0));
|
||||
border: 1px solid rgb(var(--border-default));
|
||||
background-color: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
@@ -398,7 +470,7 @@ body {
|
||||
}
|
||||
|
||||
.card-interactive:hover {
|
||||
border-color: rgb(var(--border-strong));
|
||||
border-color: var(--muted);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
}
|
||||
@@ -412,33 +484,33 @@ body {
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background-color: rgb(var(--semantic-success-light));
|
||||
color: rgb(var(--semantic-success-dark));
|
||||
background-color: rgba(20, 184, 166, 0.15);
|
||||
color: var(--ms-teal-400);
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background-color: rgb(var(--semantic-warning-light));
|
||||
color: rgb(var(--semantic-warning-dark));
|
||||
background-color: rgba(245, 158, 11, 0.15);
|
||||
color: var(--ms-amber-400);
|
||||
}
|
||||
|
||||
.badge-error {
|
||||
background-color: rgb(var(--semantic-error-light));
|
||||
color: rgb(var(--semantic-error-dark));
|
||||
background-color: rgba(229, 72, 77, 0.15);
|
||||
color: var(--ms-red-400);
|
||||
}
|
||||
|
||||
.badge-info {
|
||||
background-color: rgb(var(--semantic-info-light));
|
||||
color: rgb(var(--semantic-info-dark));
|
||||
background-color: rgba(47, 128, 255, 0.15);
|
||||
color: var(--ms-blue-400);
|
||||
}
|
||||
|
||||
.badge-neutral {
|
||||
background-color: rgb(var(--surface-2));
|
||||
color: rgb(var(--text-secondary));
|
||||
background-color: var(--surface-2);
|
||||
color: var(--text-2);
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
background-color: rgb(var(--accent-primary-light));
|
||||
color: rgb(var(--accent-primary));
|
||||
background-color: rgba(47, 128, 255, 0.15);
|
||||
color: var(--primary-l);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -451,26 +523,29 @@ body {
|
||||
}
|
||||
|
||||
.status-dot-success {
|
||||
background-color: rgb(var(--semantic-success));
|
||||
background-color: var(--success);
|
||||
box-shadow: 0 0 5px var(--success);
|
||||
}
|
||||
|
||||
.status-dot-warning {
|
||||
background-color: rgb(var(--semantic-warning));
|
||||
background-color: var(--warn);
|
||||
box-shadow: 0 0 5px var(--warn);
|
||||
}
|
||||
|
||||
.status-dot-error {
|
||||
background-color: rgb(var(--semantic-error));
|
||||
background-color: var(--danger);
|
||||
box-shadow: 0 0 5px var(--danger);
|
||||
}
|
||||
|
||||
.status-dot-info {
|
||||
background-color: rgb(var(--semantic-info));
|
||||
background-color: var(--primary);
|
||||
box-shadow: 0 0 5px var(--primary);
|
||||
}
|
||||
|
||||
.status-dot-neutral {
|
||||
background-color: rgb(var(--text-muted));
|
||||
background-color: var(--muted);
|
||||
}
|
||||
|
||||
/* Pulsing indicator for live/active status */
|
||||
.status-dot-pulse {
|
||||
@apply relative;
|
||||
}
|
||||
@@ -489,12 +564,12 @@ body {
|
||||
@layer components {
|
||||
.kbd {
|
||||
@apply inline-flex items-center justify-center rounded px-1.5 py-0.5 text-xs font-medium;
|
||||
background-color: rgb(var(--surface-2));
|
||||
border: 1px solid rgb(var(--border-default));
|
||||
color: rgb(var(--text-tertiary));
|
||||
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
||||
background-color: var(--surface-2);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--muted);
|
||||
font-family: var(--mono);
|
||||
min-width: 1.5rem;
|
||||
box-shadow: 0 1px 0 rgb(var(--border-strong));
|
||||
box-shadow: 0 1px 0 var(--border);
|
||||
}
|
||||
|
||||
.kbd-group {
|
||||
@@ -512,13 +587,13 @@ body {
|
||||
|
||||
.table-pro thead {
|
||||
@apply sticky top-0;
|
||||
background-color: rgb(var(--surface-1));
|
||||
border-bottom: 1px solid rgb(var(--border-default));
|
||||
background-color: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.table-pro th {
|
||||
@apply px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider;
|
||||
color: rgb(var(--text-tertiary));
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.table-pro th.sortable {
|
||||
@@ -526,16 +601,16 @@ body {
|
||||
}
|
||||
|
||||
.table-pro th.sortable:hover {
|
||||
color: rgb(var(--text-primary));
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.table-pro tbody tr {
|
||||
border-bottom: 1px solid rgb(var(--border-subtle));
|
||||
border-bottom: 1px solid var(--border);
|
||||
transition: background-color 0.1s ease;
|
||||
}
|
||||
|
||||
.table-pro tbody tr:hover {
|
||||
background-color: rgb(var(--surface-1));
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
.table-pro td {
|
||||
@@ -555,9 +630,9 @@ body {
|
||||
@apply animate-pulse rounded;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgb(var(--surface-2)) 0%,
|
||||
rgb(var(--surface-1)) 50%,
|
||||
rgb(var(--surface-2)) 100%
|
||||
var(--surface) 0%,
|
||||
var(--surface-2) 50%,
|
||||
var(--surface) 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
}
|
||||
@@ -590,15 +665,16 @@ body {
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@apply relative max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-lg;
|
||||
background-color: rgb(var(--surface-0));
|
||||
border: 1px solid rgb(var(--border-default));
|
||||
@apply relative max-h-[90vh] w-full max-w-lg overflow-y-auto;
|
||||
background-color: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
@apply flex items-center justify-between p-4 border-b;
|
||||
border-color: rgb(var(--border-default));
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
@@ -607,7 +683,7 @@ body {
|
||||
|
||||
.modal-footer {
|
||||
@apply flex items-center justify-end gap-3 p-4 border-t;
|
||||
border-color: rgb(var(--border-default));
|
||||
border-color: var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -617,9 +693,10 @@ body {
|
||||
@layer components {
|
||||
.tooltip {
|
||||
@apply absolute z-50 rounded px-2 py-1 text-xs font-medium;
|
||||
background-color: rgb(var(--text-primary));
|
||||
color: rgb(var(--color-background));
|
||||
background-color: var(--text);
|
||||
color: var(--bg);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-radius: var(--r-sm);
|
||||
}
|
||||
|
||||
.tooltip::before {
|
||||
@@ -630,7 +707,7 @@ body {
|
||||
|
||||
.tooltip-top::before {
|
||||
@apply left-1/2 top-full -translate-x-1/2;
|
||||
border-top-color: rgb(var(--text-primary));
|
||||
border-top-color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -680,12 +757,10 @@ body {
|
||||
animation: scaleIn 0.15s ease-out;
|
||||
}
|
||||
|
||||
/* Message animation - subtle for chat */
|
||||
.message-animate {
|
||||
animation: slideIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
/* Menu dropdown animation */
|
||||
.animate-menu-enter {
|
||||
animation: scaleIn 0.1s ease-out;
|
||||
}
|
||||
@@ -710,13 +785,8 @@ body {
|
||||
----------------------------------------------------------------------------- */
|
||||
@media (prefers-contrast: high) {
|
||||
:root {
|
||||
--border-default: 100 116 139;
|
||||
--border-strong: 71 85 105;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--border-default: 148 163 184;
|
||||
--border-strong: 203 213 225;
|
||||
--border: #4a5a78;
|
||||
--muted: #a0b0cc;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import type { Metadata } from "next";
|
||||
import type { ReactNode } from "react";
|
||||
import { Outfit, Fira_Code } from "next/font/google";
|
||||
import { AuthProvider } from "@/lib/auth/auth-context";
|
||||
import { ErrorBoundary } from "@/components/error-boundary";
|
||||
import { ThemeProvider } from "@/providers/ThemeProvider";
|
||||
@@ -12,6 +13,18 @@ export const metadata: Metadata = {
|
||||
description: "Mosaic Stack Web Application",
|
||||
};
|
||||
|
||||
const outfit = Outfit({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-outfit",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const firaCode = Fira_Code({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-fira-code",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
/**
|
||||
* Runtime env vars injected as a synchronous script so client-side modules
|
||||
* can read them before React hydration. This allows Docker env vars to
|
||||
@@ -34,7 +47,7 @@ function runtimeEnvScript(): string {
|
||||
|
||||
export default function RootLayout({ children }: { children: ReactNode }): React.JSX.Element {
|
||||
return (
|
||||
<html lang="en">
|
||||
<html lang="en" className={`${outfit.variable} ${firaCode.variable}`}>
|
||||
<head>
|
||||
<script dangerouslySetInnerHTML={{ __html: runtimeEnvScript() }} />
|
||||
</head>
|
||||
|
||||
647
apps/web/src/components/layout/AppHeader.tsx
Normal file
647
apps/web/src/components/layout/AppHeader.tsx
Normal file
@@ -0,0 +1,647 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef, useCallback } from "react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useAuth } from "@/lib/auth/auth-context";
|
||||
import { ThemeToggle } from "./ThemeToggle";
|
||||
import { useSidebar } from "./SidebarContext";
|
||||
|
||||
/**
|
||||
* Full-width application header (topbar).
|
||||
* Logo/brand MUST live here — not in the sidebar — per MS15 design spec.
|
||||
* Spans grid-column 1 / -1 in the app shell grid layout.
|
||||
*
|
||||
* Layout (left → right):
|
||||
* [Logo/Brand] [Breadcrumb] [Search] [spacer]
|
||||
* [System Status] [Terminal Toggle] [Notifications] [Theme Toggle] [User Avatar+Dropdown]
|
||||
*/
|
||||
export function AppHeader(): React.JSX.Element {
|
||||
const { user, signOut } = useAuth();
|
||||
const { isMobile, mobileOpen, setMobileOpen, toggleCollapsed } = useSidebar();
|
||||
const pathname = usePathname();
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
const [searchFocused, setSearchFocused] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Close dropdown on outside click
|
||||
const handleOutsideClick = useCallback((event: MouseEvent) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
setDropdownOpen(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (dropdownOpen) {
|
||||
document.addEventListener("mousedown", handleOutsideClick);
|
||||
} else {
|
||||
document.removeEventListener("mousedown", handleOutsideClick);
|
||||
}
|
||||
return (): void => {
|
||||
document.removeEventListener("mousedown", handleOutsideClick);
|
||||
};
|
||||
}, [dropdownOpen, handleOutsideClick]);
|
||||
|
||||
// Derive breadcrumb segments from pathname
|
||||
const breadcrumbSegments = pathname
|
||||
.split("/")
|
||||
.filter(Boolean)
|
||||
.map((seg) => seg.charAt(0).toUpperCase() + seg.slice(1).replace(/-/g, " "));
|
||||
|
||||
// User initials for avatar fallback
|
||||
const initials = user?.name
|
||||
? user.name
|
||||
.split(" ")
|
||||
.slice(0, 2)
|
||||
.map((part) => part[0])
|
||||
.join("")
|
||||
.toUpperCase()
|
||||
: user?.email
|
||||
? (user.email[0] ?? "?").toUpperCase()
|
||||
: "?";
|
||||
|
||||
const handleHamburgerClick = useCallback((): void => {
|
||||
if (isMobile) {
|
||||
setMobileOpen(!mobileOpen);
|
||||
} else {
|
||||
toggleCollapsed();
|
||||
}
|
||||
}, [isMobile, mobileOpen, setMobileOpen, toggleCollapsed]);
|
||||
|
||||
return (
|
||||
<header className="app-header">
|
||||
{/* ── Hamburger — visible below lg ── */}
|
||||
<button
|
||||
type="button"
|
||||
className="lg:hidden"
|
||||
onClick={handleHamburgerClick}
|
||||
aria-label={mobileOpen ? "Close navigation menu" : "Open navigation menu"}
|
||||
aria-expanded={mobileOpen}
|
||||
aria-controls="app-sidebar"
|
||||
style={{
|
||||
width: 34,
|
||||
height: 34,
|
||||
borderRadius: 6,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
color: "var(--muted)",
|
||||
background: "none",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
(e.currentTarget as HTMLButtonElement).style.background = "var(--surface)";
|
||||
(e.currentTarget as HTMLButtonElement).style.color = "var(--text)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
(e.currentTarget as HTMLButtonElement).style.background = "none";
|
||||
(e.currentTarget as HTMLButtonElement).style.color = "var(--muted)";
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M2 4h12M2 8h12M2 12h12" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* ── Brand / Logo ── */}
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center gap-2 flex-shrink-0"
|
||||
aria-label="Mosaic Stack home"
|
||||
>
|
||||
{/* Mosaic logo mark: four colored squares + center dot */}
|
||||
<div
|
||||
className="relative flex-shrink-0"
|
||||
style={{ width: 28, height: 28 }}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span
|
||||
className="absolute rounded-sm"
|
||||
style={{ top: 0, left: 0, width: 11, height: 11, background: "var(--ms-blue-500)" }}
|
||||
/>
|
||||
<span
|
||||
className="absolute rounded-sm"
|
||||
style={{ top: 0, right: 0, width: 11, height: 11, background: "var(--ms-purple-500)" }}
|
||||
/>
|
||||
<span
|
||||
className="absolute rounded-sm"
|
||||
style={{
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
width: 11,
|
||||
height: 11,
|
||||
background: "var(--ms-teal-500)",
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
className="absolute rounded-sm"
|
||||
style={{
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
width: 11,
|
||||
height: 11,
|
||||
background: "var(--ms-amber-500)",
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
className="absolute rounded-full"
|
||||
style={{
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: 8,
|
||||
height: 8,
|
||||
background: "var(--ms-pink-500)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span
|
||||
className="text-sm font-bold"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, var(--ms-blue-400), var(--ms-purple-500))",
|
||||
backgroundClip: "text",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
letterSpacing: "-0.02em",
|
||||
}}
|
||||
>
|
||||
Mosaic Stack
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* ── Breadcrumb ── */}
|
||||
<nav
|
||||
aria-label="Breadcrumb"
|
||||
className="hidden sm:flex items-center"
|
||||
style={{ fontSize: "0.8rem", color: "var(--text-2)", marginLeft: 4 }}
|
||||
>
|
||||
{breadcrumbSegments.length === 0 ? (
|
||||
<span>Dashboard</span>
|
||||
) : (
|
||||
breadcrumbSegments.map((seg, idx) => (
|
||||
<span key={idx} className="flex items-center gap-1">
|
||||
{idx > 0 && <span style={{ color: "var(--muted)", margin: "0 2px" }}>/</span>}
|
||||
<span
|
||||
style={{
|
||||
color: idx === breadcrumbSegments.length - 1 ? "var(--text-2)" : "var(--muted)",
|
||||
}}
|
||||
>
|
||||
{seg}
|
||||
</span>
|
||||
</span>
|
||||
))
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* ── Search Bar ── */}
|
||||
<div
|
||||
className="hidden md:flex items-center"
|
||||
style={{
|
||||
flex: 1,
|
||||
maxWidth: 340,
|
||||
marginLeft: 16,
|
||||
gap: 8,
|
||||
background: "var(--surface)",
|
||||
border: `1px solid ${searchFocused ? "var(--primary)" : "var(--border)"}`,
|
||||
borderRadius: 6,
|
||||
padding: "7px 12px",
|
||||
transition: "border-color 0.15s",
|
||||
}}
|
||||
>
|
||||
{/* Search icon */}
|
||||
<svg
|
||||
width="13"
|
||||
height="13"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
style={{ color: "var(--muted)", flexShrink: 0 }}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="7" cy="7" r="5" />
|
||||
<path d="M11 11l3 3" />
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search projects, agents, tasks… (⌘K)"
|
||||
onFocus={() => {
|
||||
setSearchFocused(true);
|
||||
}}
|
||||
onBlur={() => {
|
||||
setSearchFocused(false);
|
||||
}}
|
||||
style={{
|
||||
flex: 1,
|
||||
background: "none",
|
||||
border: "none",
|
||||
outline: "none",
|
||||
color: "var(--text)",
|
||||
fontSize: "0.83rem",
|
||||
fontFamily: "inherit",
|
||||
}}
|
||||
aria-label="Search projects, agents, tasks"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* ── Spacer ── */}
|
||||
<div style={{ flex: 1 }} />
|
||||
|
||||
{/* ── Right side controls ── */}
|
||||
<div className="flex items-center" style={{ gap: 8 }}>
|
||||
{/* System Status */}
|
||||
<div
|
||||
className="hidden lg:flex items-center"
|
||||
style={{
|
||||
gap: 7,
|
||||
padding: "5px 10px",
|
||||
borderRadius: 6,
|
||||
background: "var(--surface)",
|
||||
border: "1px solid var(--border)",
|
||||
fontSize: "0.75rem",
|
||||
fontFamily: "var(--mono)",
|
||||
}}
|
||||
aria-label="System status: All Systems Operational"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: 6,
|
||||
height: 6,
|
||||
borderRadius: "50%",
|
||||
background: "var(--success)",
|
||||
boxShadow: "0 0 5px var(--success)",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span style={{ color: "var(--muted)" }}>All Systems</span>
|
||||
<span style={{ color: "var(--success)" }}>Operational</span>
|
||||
</div>
|
||||
|
||||
{/* Terminal Toggle */}
|
||||
<TerminalToggleButton />
|
||||
|
||||
{/* Notifications */}
|
||||
<button
|
||||
title="Notifications"
|
||||
aria-label="Notifications (1 unread)"
|
||||
style={{
|
||||
width: 34,
|
||||
height: 34,
|
||||
borderRadius: 6,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
color: "var(--muted)",
|
||||
position: "relative",
|
||||
background: "none",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
(e.currentTarget as HTMLButtonElement).style.background = "var(--surface)";
|
||||
(e.currentTarget as HTMLButtonElement).style.color = "var(--text)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
(e.currentTarget as HTMLButtonElement).style.background = "none";
|
||||
(e.currentTarget as HTMLButtonElement).style.color = "var(--muted)";
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M8 1a5 5 0 0 1 5 5v2l1 2H2l1-2V6a5 5 0 0 1 5-5z" />
|
||||
<path d="M6 13a2 2 0 0 0 4 0" />
|
||||
</svg>
|
||||
{/* Notification badge */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 4,
|
||||
right: 4,
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: "50%",
|
||||
background: "var(--danger)",
|
||||
border: "2px solid var(--bg-deep)",
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{/* Theme Toggle */}
|
||||
<ThemeToggle />
|
||||
|
||||
{/* User Avatar + Dropdown */}
|
||||
<div ref={dropdownRef} style={{ position: "relative", flexShrink: 0 }}>
|
||||
<button
|
||||
onClick={() => {
|
||||
setDropdownOpen((prev) => !prev);
|
||||
}}
|
||||
aria-label="Open user menu"
|
||||
aria-expanded={dropdownOpen}
|
||||
aria-haspopup="menu"
|
||||
style={{
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: "50%",
|
||||
background: user?.image
|
||||
? "none"
|
||||
: "linear-gradient(135deg, var(--ms-blue-500), var(--ms-purple-500))",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: 0,
|
||||
flexShrink: 0,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{user?.image ? (
|
||||
<img
|
||||
src={user.image}
|
||||
alt={user.name || user.email || "User avatar"}
|
||||
style={{ width: "100%", height: "100%", objectFit: "cover" }}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
style={{
|
||||
fontSize: "0.65rem",
|
||||
fontWeight: 700,
|
||||
color: "#fff",
|
||||
letterSpacing: "0.02em",
|
||||
lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
{initials}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
{dropdownOpen && (
|
||||
<div
|
||||
role="menu"
|
||||
aria-label="User menu"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "calc(100% + 8px)",
|
||||
right: 0,
|
||||
background: "var(--surface)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: 8,
|
||||
padding: 6,
|
||||
minWidth: 200,
|
||||
boxShadow: "0 8px 32px rgba(0,0,0,0.3)",
|
||||
zIndex: 200,
|
||||
}}
|
||||
>
|
||||
{/* User info header */}
|
||||
<div
|
||||
style={{
|
||||
padding: "8px 12px",
|
||||
borderRadius: 6,
|
||||
marginBottom: 2,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "0.83rem",
|
||||
fontWeight: 600,
|
||||
color: "var(--text)",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{user?.name ?? "User"}
|
||||
</div>
|
||||
{user?.email && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: "0.75rem",
|
||||
color: "var(--muted)",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
marginTop: 2,
|
||||
}}
|
||||
>
|
||||
{user.email}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style={{ height: 1, background: "var(--border)", margin: "4px 0" }}
|
||||
/>
|
||||
|
||||
{/* Profile link */}
|
||||
<DropdownItem
|
||||
href="/profile"
|
||||
onClick={() => {
|
||||
setDropdownOpen(false);
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="8" cy="5" r="3" />
|
||||
<path d="M2 14c0-3.3 2.7-6 6-6s6 2.7 6 6" />
|
||||
</svg>
|
||||
Profile
|
||||
</DropdownItem>
|
||||
|
||||
{/* Account Settings link */}
|
||||
<DropdownItem
|
||||
href="/settings"
|
||||
onClick={() => {
|
||||
setDropdownOpen(false);
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="8" cy="8" r="2.5" />
|
||||
<path d="M8 1v1.5M8 13.5V15M1 8h1.5M13.5 8H15M3.05 3.05l1.06 1.06M11.89 11.89l1.06 1.06M3.05 12.95l1.06-1.06M11.89 4.11l1.06-1.06" />
|
||||
</svg>
|
||||
Account Settings
|
||||
</DropdownItem>
|
||||
|
||||
{/* Divider */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style={{ height: 1, background: "var(--border)", margin: "4px 0" }}
|
||||
/>
|
||||
|
||||
{/* Sign Out */}
|
||||
<button
|
||||
role="menuitem"
|
||||
onClick={() => {
|
||||
setDropdownOpen(false);
|
||||
void signOut();
|
||||
}}
|
||||
style={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
padding: "8px 12px",
|
||||
borderRadius: 6,
|
||||
fontSize: "0.83rem",
|
||||
cursor: "pointer",
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: "var(--danger)",
|
||||
textAlign: "left",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
(e.currentTarget as HTMLButtonElement).style.background = "var(--surface-2)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
(e.currentTarget as HTMLButtonElement).style.background = "none";
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M6 2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3M10 11l4-4-4-4M14 8H6" />
|
||||
</svg>
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Sub-components
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Terminal toggle button — visual only; no panel wired yet. */
|
||||
function TerminalToggleButton(): React.JSX.Element {
|
||||
const [hovered, setHovered] = useState(false);
|
||||
|
||||
return (
|
||||
<button
|
||||
title="Toggle terminal"
|
||||
aria-label="Toggle terminal panel"
|
||||
className="hidden lg:flex items-center"
|
||||
style={{
|
||||
gap: 6,
|
||||
padding: "5px 10px",
|
||||
borderRadius: 6,
|
||||
background: "var(--surface)",
|
||||
border: `1px solid ${hovered ? "var(--success)" : "var(--border)"}`,
|
||||
fontSize: "0.75rem",
|
||||
fontFamily: "var(--mono)",
|
||||
color: hovered ? "var(--success)" : "var(--text-2)",
|
||||
cursor: "pointer",
|
||||
transition: "border-color 0.15s, color 0.15s",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
onMouseEnter={() => {
|
||||
setHovered(true);
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
setHovered(false);
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<rect x="1" y="2" width="14" height="12" rx="1.5" />
|
||||
<path d="M4 6l3 3-3 3M9 12h3" />
|
||||
</svg>
|
||||
Terminal
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
interface DropdownItemProps {
|
||||
href: string;
|
||||
onClick: () => void;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
/** A navigation link styled as a dropdown menu item. */
|
||||
function DropdownItem({ href, onClick, children }: DropdownItemProps): React.JSX.Element {
|
||||
const [hovered, setHovered] = useState(false);
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
role="menuitem"
|
||||
onClick={onClick}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
padding: "8px 12px",
|
||||
borderRadius: 6,
|
||||
fontSize: "0.83rem",
|
||||
cursor: "pointer",
|
||||
color: "var(--text-2)",
|
||||
textDecoration: "none",
|
||||
background: hovered ? "var(--surface-2)" : "none",
|
||||
transition: "background 0.1s",
|
||||
}}
|
||||
onMouseEnter={() => {
|
||||
setHovered(true);
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
setHovered(false);
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
731
apps/web/src/components/layout/AppSidebar.tsx
Normal file
731
apps/web/src/components/layout/AppSidebar.tsx
Normal file
@@ -0,0 +1,731 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import { useAuth } from "@/lib/auth/auth-context";
|
||||
import { useSidebar } from "./SidebarContext";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Types
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface NavBadge {
|
||||
label: string;
|
||||
pulse?: boolean;
|
||||
}
|
||||
|
||||
interface NavItemConfig {
|
||||
href: string;
|
||||
label: string;
|
||||
icon: React.JSX.Element;
|
||||
badge?: NavBadge;
|
||||
}
|
||||
|
||||
interface NavGroup {
|
||||
label: string;
|
||||
items: NavItemConfig[];
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// SVG Icons (16x16 viewBox, stroke="currentColor", strokeWidth="1.5")
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function IconDashboard(): React.JSX.Element {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<rect x="1" y="1" width="6" height="6" rx="1" />
|
||||
<rect x="9" y="1" width="6" height="6" rx="1" />
|
||||
<rect x="1" y="9" width="6" height="6" rx="1" />
|
||||
<rect x="9" y="9" width="6" height="6" rx="1" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function IconProjects(): React.JSX.Element {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<rect x="1" y="4" width="14" height="10" rx="1.5" />
|
||||
<path d="M1 7h14" />
|
||||
<path d="M5 4V2.5A.5.5 0 0 1 5.5 2h5a.5.5 0 0 1 .5.5V4" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function IconProjectWorkspace(): React.JSX.Element {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="8" cy="4" r="2" />
|
||||
<circle cx="3" cy="12" r="2" />
|
||||
<circle cx="13" cy="12" r="2" />
|
||||
<path d="M8 6v2M5 12h6M6 8l-2 2M10 8l2 2" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function IconKanban(): React.JSX.Element {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<rect x="1" y="2" width="4" height="12" rx="1" />
|
||||
<rect x="6" y="2" width="4" height="12" rx="1" />
|
||||
<rect x="11" y="2" width="4" height="12" rx="1" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function IconFileManager(): React.JSX.Element {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M2 3.5A1.5 1.5 0 0 1 3.5 2h4l2 2h3A1.5 1.5 0 0 1 14 5.5v7A1.5 1.5 0 0 1 12.5 14h-9A1.5 1.5 0 0 1 2 12.5v-9z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function IconLogs(): React.JSX.Element {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M2 4h12M2 8h8M2 12h10" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function IconTerminal(): React.JSX.Element {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<rect x="1" y="2" width="14" height="12" rx="1.5" />
|
||||
<path d="M4 6l3 3-3 3M9 12h3" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function IconSettings(): React.JSX.Element {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="8" cy="8" r="2.5" />
|
||||
<path d="M8 1v2M8 13v2M1 8h2M13 8h2M3.05 3.05l1.41 1.41M11.54 11.54l1.41 1.41M3.05 12.95l1.41-1.41M11.54 4.46l1.41-1.41" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function IconChevronLeft(): React.JSX.Element {
|
||||
return (
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.75"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M10 3L5 8l5 5" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function IconChevronRight(): React.JSX.Element {
|
||||
return (
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.75"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M6 3l5 5-5 5" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Nav groups definition
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const NAV_GROUPS: NavGroup[] = [
|
||||
{
|
||||
label: "Overview",
|
||||
items: [
|
||||
{
|
||||
href: "/",
|
||||
label: "Dashboard",
|
||||
icon: <IconDashboard />,
|
||||
badge: { label: "live", pulse: true },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Workspace",
|
||||
items: [
|
||||
{
|
||||
href: "/projects",
|
||||
label: "Projects",
|
||||
icon: <IconProjects />,
|
||||
},
|
||||
{
|
||||
href: "/workspace",
|
||||
label: "Project Workspace",
|
||||
icon: <IconProjectWorkspace />,
|
||||
},
|
||||
{
|
||||
href: "/kanban",
|
||||
label: "Kanban",
|
||||
icon: <IconKanban />,
|
||||
},
|
||||
{
|
||||
href: "/files",
|
||||
label: "File Manager",
|
||||
icon: <IconFileManager />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Operations",
|
||||
items: [
|
||||
{
|
||||
href: "/logs",
|
||||
label: "Logs & Telemetry",
|
||||
icon: <IconLogs />,
|
||||
badge: { label: "live", pulse: true },
|
||||
},
|
||||
{
|
||||
href: "#terminal",
|
||||
label: "Terminal",
|
||||
icon: <IconTerminal />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "System",
|
||||
items: [
|
||||
{
|
||||
href: "/settings",
|
||||
label: "Settings",
|
||||
icon: <IconSettings />,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helper: derive initials from display name
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function getInitials(name: string): string {
|
||||
const parts = name.trim().split(/\s+/);
|
||||
const first = parts[0] ?? "";
|
||||
if (parts.length === 1) {
|
||||
return first.slice(0, 2).toUpperCase();
|
||||
}
|
||||
const last = parts[parts.length - 1] ?? "";
|
||||
return ((first[0] ?? "") + (last[0] ?? "")).toUpperCase();
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// NavBadge component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface NavBadgeProps {
|
||||
badge: NavBadge;
|
||||
}
|
||||
|
||||
function NavBadgeChip({ badge }: NavBadgeProps): React.JSX.Element {
|
||||
const pulseStyle: React.CSSProperties = badge.pulse
|
||||
? {
|
||||
background: "rgba(47,128,255,0.15)",
|
||||
color: "var(--primary-l)",
|
||||
}
|
||||
: {
|
||||
background: "var(--surface-2)",
|
||||
color: "var(--muted)",
|
||||
};
|
||||
|
||||
return (
|
||||
<span
|
||||
style={{
|
||||
marginLeft: "auto",
|
||||
fontSize: "0.68rem",
|
||||
fontFamily: "var(--mono)",
|
||||
padding: "1px 6px",
|
||||
borderRadius: "10px",
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
gap: "4px",
|
||||
flexShrink: 0,
|
||||
...pulseStyle,
|
||||
}}
|
||||
aria-label={badge.pulse ? `${badge.label} indicator` : badge.label}
|
||||
>
|
||||
{badge.pulse && (
|
||||
<span
|
||||
style={{
|
||||
display: "inline-block",
|
||||
width: "5px",
|
||||
height: "5px",
|
||||
borderRadius: "50%",
|
||||
background: "var(--primary-l)",
|
||||
boxShadow: "0 0 4px var(--primary)",
|
||||
animation: "pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
|
||||
}}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
{badge.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// NavItem component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface NavItemProps {
|
||||
item: NavItemConfig;
|
||||
isActive: boolean;
|
||||
collapsed: boolean;
|
||||
}
|
||||
|
||||
function NavItem({ item, isActive, collapsed }: NavItemProps): React.JSX.Element {
|
||||
const baseStyle: React.CSSProperties = {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "11px",
|
||||
padding: "9px 10px",
|
||||
borderRadius: "6px",
|
||||
fontSize: "0.875rem",
|
||||
fontWeight: 500,
|
||||
color: isActive ? "var(--text)" : "var(--muted)",
|
||||
background: isActive ? "var(--surface)" : "transparent",
|
||||
position: "relative",
|
||||
transition: "background 0.12s ease, color 0.12s ease",
|
||||
textDecoration: "none",
|
||||
justifyContent: collapsed ? "center" : undefined,
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
};
|
||||
|
||||
const iconStyle: React.CSSProperties = {
|
||||
width: "16px",
|
||||
height: "16px",
|
||||
flexShrink: 0,
|
||||
opacity: isActive ? 1 : 0.7,
|
||||
transition: "opacity 0.12s ease",
|
||||
};
|
||||
|
||||
const content = (
|
||||
<>
|
||||
{/* Active left accent bar */}
|
||||
{isActive && (
|
||||
<span
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
top: "6px",
|
||||
bottom: "6px",
|
||||
width: "3px",
|
||||
background: "var(--primary)",
|
||||
borderRadius: "0 2px 2px 0",
|
||||
}}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Icon */}
|
||||
<span style={iconStyle}>{item.icon}</span>
|
||||
|
||||
{/* Label and badge — hidden when collapsed */}
|
||||
{!collapsed && (
|
||||
<>
|
||||
<span style={{ flex: 1, overflow: "hidden", textOverflow: "ellipsis" }}>
|
||||
{item.label}
|
||||
</span>
|
||||
{item.badge !== undefined && <NavBadgeChip badge={item.badge} />}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
const sharedProps = {
|
||||
style: baseStyle,
|
||||
"aria-current": isActive ? ("page" as const) : undefined,
|
||||
title: collapsed ? item.label : undefined,
|
||||
onMouseEnter: (e: React.MouseEvent<HTMLElement>): void => {
|
||||
if (!isActive) {
|
||||
(e.currentTarget as HTMLElement).style.background = "var(--surface)";
|
||||
(e.currentTarget as HTMLElement).style.color = "var(--text-2)";
|
||||
const iconEl = (e.currentTarget as HTMLElement).querySelector<HTMLElement>(
|
||||
"[data-nav-icon]"
|
||||
);
|
||||
if (iconEl) iconEl.style.opacity = "1";
|
||||
}
|
||||
},
|
||||
onMouseLeave: (e: React.MouseEvent<HTMLElement>): void => {
|
||||
if (!isActive) {
|
||||
(e.currentTarget as HTMLElement).style.background = "transparent";
|
||||
(e.currentTarget as HTMLElement).style.color = "var(--muted)";
|
||||
const iconEl = (e.currentTarget as HTMLElement).querySelector<HTMLElement>(
|
||||
"[data-nav-icon]"
|
||||
);
|
||||
if (iconEl) iconEl.style.opacity = "0.7";
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
if (item.href.startsWith("#")) {
|
||||
return (
|
||||
<a href={item.href} {...sharedProps}>
|
||||
{content}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link href={item.href} {...sharedProps}>
|
||||
{content}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// UserCard component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface UserCardProps {
|
||||
collapsed: boolean;
|
||||
}
|
||||
|
||||
function UserCard({ collapsed }: UserCardProps): React.JSX.Element {
|
||||
const { user } = useAuth();
|
||||
|
||||
const displayName = user?.name ?? "User";
|
||||
const initials = getInitials(displayName);
|
||||
const role = user?.workspaceRole ?? "Member";
|
||||
|
||||
return (
|
||||
<footer
|
||||
style={{
|
||||
padding: "12px 10px",
|
||||
borderTop: "1px solid var(--border)",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "10px",
|
||||
padding: "8px 10px",
|
||||
borderRadius: "6px",
|
||||
cursor: "pointer",
|
||||
transition: "background 0.12s ease",
|
||||
justifyContent: collapsed ? "center" : undefined,
|
||||
}}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
title={collapsed ? `${displayName} — ${role}` : undefined}
|
||||
onMouseEnter={(e): void => {
|
||||
(e.currentTarget as HTMLElement).style.background = "var(--surface)";
|
||||
}}
|
||||
onMouseLeave={(e): void => {
|
||||
(e.currentTarget as HTMLElement).style.background = "transparent";
|
||||
}}
|
||||
onKeyDown={(e): void => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
aria-label={`User: ${displayName}, Role: ${role}`}
|
||||
>
|
||||
{/* Avatar */}
|
||||
<div
|
||||
style={{
|
||||
width: "30px",
|
||||
height: "30px",
|
||||
borderRadius: "50%",
|
||||
background: "linear-gradient(135deg, var(--ms-blue-500), var(--ms-purple-500))",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontSize: "0.75rem",
|
||||
fontWeight: 700,
|
||||
color: "#fff",
|
||||
flexShrink: 0,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{user?.image ? (
|
||||
<Image
|
||||
src={user.image}
|
||||
alt={`${displayName} avatar`}
|
||||
width={30}
|
||||
height={30}
|
||||
style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: "50%" }}
|
||||
/>
|
||||
) : (
|
||||
<span aria-hidden="true">{initials}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Name and role — hidden when collapsed */}
|
||||
{!collapsed && (
|
||||
<>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "0.83rem",
|
||||
fontWeight: 600,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
color: "var(--text)",
|
||||
}}
|
||||
>
|
||||
{displayName}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "0.72rem",
|
||||
color: "var(--muted)",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{role}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Online status dot */}
|
||||
<div
|
||||
style={{
|
||||
marginLeft: "auto",
|
||||
width: "7px",
|
||||
height: "7px",
|
||||
borderRadius: "50%",
|
||||
background: "var(--success)",
|
||||
boxShadow: "0 0 6px var(--success)",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
aria-label="Online"
|
||||
role="img"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// CollapseToggle component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface CollapseToggleProps {
|
||||
collapsed: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
function CollapseToggle({ collapsed, onToggle }: CollapseToggleProps): React.JSX.Element {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: "4px 10px 8px",
|
||||
display: "flex",
|
||||
justifyContent: collapsed ? "center" : "flex-end",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggle}
|
||||
aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
|
||||
title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "26px",
|
||||
height: "26px",
|
||||
borderRadius: "6px",
|
||||
color: "var(--muted)",
|
||||
transition: "background 0.12s ease, color 0.12s ease",
|
||||
cursor: "pointer",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
onMouseEnter={(e): void => {
|
||||
(e.currentTarget as HTMLElement).style.background = "var(--surface)";
|
||||
(e.currentTarget as HTMLElement).style.color = "var(--text-2)";
|
||||
}}
|
||||
onMouseLeave={(e): void => {
|
||||
(e.currentTarget as HTMLElement).style.background = "transparent";
|
||||
(e.currentTarget as HTMLElement).style.color = "var(--muted)";
|
||||
}}
|
||||
>
|
||||
{collapsed ? <IconChevronRight /> : <IconChevronLeft />}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Main AppSidebar component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Application sidebar — navigation groups, collapse toggle, and user card.
|
||||
* Logo lives in AppHeader per MS15 design spec.
|
||||
*/
|
||||
export function AppSidebar(): React.JSX.Element {
|
||||
const pathname = usePathname();
|
||||
const { collapsed, toggleCollapsed, mobileOpen, setMobileOpen, isMobile } = useSidebar();
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile backdrop — rendered behind the sidebar when open on mobile */}
|
||||
{isMobile && mobileOpen && (
|
||||
<div
|
||||
aria-hidden="true"
|
||||
onClick={() => {
|
||||
setMobileOpen(false);
|
||||
}}
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
top: "var(--topbar-h)",
|
||||
background: "rgba(0,0,0,0.5)",
|
||||
zIndex: 140,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<aside
|
||||
id="app-sidebar"
|
||||
className="app-sidebar"
|
||||
data-collapsed={collapsed ? "true" : undefined}
|
||||
data-mobile-open={mobileOpen ? "true" : undefined}
|
||||
aria-label="Application navigation"
|
||||
>
|
||||
{/* Sidebar body — scrollable nav area */}
|
||||
<nav
|
||||
style={{
|
||||
flex: 1,
|
||||
overflowY: "auto",
|
||||
overflowX: "hidden",
|
||||
padding: "10px 10px",
|
||||
}}
|
||||
aria-label="Main navigation"
|
||||
>
|
||||
{NAV_GROUPS.map((group) => (
|
||||
<div key={group.label} style={{ marginBottom: "18px" }}>
|
||||
{/* Group label — hidden when collapsed */}
|
||||
{!collapsed && (
|
||||
<p
|
||||
style={{
|
||||
fontSize: "0.67rem",
|
||||
fontWeight: 600,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.09em",
|
||||
color: "var(--muted)",
|
||||
padding: "0 10px",
|
||||
marginBottom: "4px",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
{group.label}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Nav items */}
|
||||
<ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
|
||||
{group.items.map((item) => {
|
||||
const isActive =
|
||||
item.href === "/"
|
||||
? pathname === "/"
|
||||
: item.href.startsWith("#")
|
||||
? false
|
||||
: pathname === item.href || pathname.startsWith(item.href + "/");
|
||||
|
||||
return (
|
||||
<li key={item.href}>
|
||||
<NavItem item={item} isActive={isActive} collapsed={collapsed} />
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Collapse toggle — anchored at bottom of nav */}
|
||||
<CollapseToggle collapsed={collapsed} onToggle={toggleCollapsed} />
|
||||
</nav>
|
||||
|
||||
{/* User card footer */}
|
||||
<UserCard collapsed={collapsed} />
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
}
|
||||
65
apps/web/src/components/layout/SidebarContext.tsx
Normal file
65
apps/web/src/components/layout/SidebarContext.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
"use client";
|
||||
|
||||
import { createContext, useContext, useState, useCallback, useEffect, type ReactNode } from "react";
|
||||
|
||||
interface SidebarContextValue {
|
||||
collapsed: boolean;
|
||||
toggleCollapsed: () => void;
|
||||
mobileOpen: boolean;
|
||||
setMobileOpen: (open: boolean) => void;
|
||||
isMobile: boolean;
|
||||
}
|
||||
|
||||
const SidebarContext = createContext<SidebarContextValue | undefined>(undefined);
|
||||
|
||||
/** Breakpoint below which we treat the viewport as "mobile" (matches CSS max-width: 767px). */
|
||||
const MOBILE_MAX_WIDTH = 767;
|
||||
|
||||
export function SidebarProvider({ children }: { children: ReactNode }): React.JSX.Element {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
// Initialise and track mobile breakpoint using matchMedia
|
||||
useEffect((): (() => void) => {
|
||||
const mql = window.matchMedia(`(max-width: ${String(MOBILE_MAX_WIDTH)}px)`);
|
||||
|
||||
const handleChange = (e: MediaQueryListEvent): void => {
|
||||
setIsMobile(e.matches);
|
||||
// Close mobile sidebar when viewport grows out of mobile range
|
||||
if (!e.matches) {
|
||||
setMobileOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Set initial value synchronously
|
||||
setIsMobile(mql.matches);
|
||||
|
||||
mql.addEventListener("change", handleChange);
|
||||
return (): void => {
|
||||
mql.removeEventListener("change", handleChange);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const toggleCollapsed = useCallback((): void => {
|
||||
setCollapsed((prev) => !prev);
|
||||
}, []);
|
||||
|
||||
const value: SidebarContextValue = {
|
||||
collapsed,
|
||||
toggleCollapsed,
|
||||
mobileOpen,
|
||||
setMobileOpen,
|
||||
isMobile,
|
||||
};
|
||||
|
||||
return <SidebarContext.Provider value={value}>{children}</SidebarContext.Provider>;
|
||||
}
|
||||
|
||||
export function useSidebar(): SidebarContextValue {
|
||||
const context = useContext(SidebarContext);
|
||||
if (context === undefined) {
|
||||
throw new Error("useSidebar must be used within SidebarProvider");
|
||||
}
|
||||
return context;
|
||||
}
|
||||
@@ -20,7 +20,7 @@ export function ThemeToggle({ className = "" }: ThemeToggleProps): React.JSX.Ele
|
||||
// Sun icon for dark mode (click to switch to light)
|
||||
<svg
|
||||
className="h-5 w-5"
|
||||
style={{ color: "rgb(var(--semantic-warning))" }}
|
||||
style={{ color: "var(--warn)" }}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
@@ -33,7 +33,7 @@ export function ThemeToggle({ className = "" }: ThemeToggleProps): React.JSX.Ele
|
||||
// Moon icon for light mode (click to switch to dark)
|
||||
<svg
|
||||
className="h-5 w-5"
|
||||
style={{ color: "rgb(var(--text-secondary))" }}
|
||||
style={{ color: "var(--text-2)" }}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
|
||||
100
apps/web/src/components/ui/MosaicLogo.tsx
Normal file
100
apps/web/src/components/ui/MosaicLogo.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
"use client";
|
||||
|
||||
import type { CSSProperties } from "react";
|
||||
|
||||
export interface MosaicLogoProps {
|
||||
/** Width and height in pixels (default: 36) */
|
||||
size?: number;
|
||||
/** Whether to animate rotation (default: false) */
|
||||
spinning?: boolean;
|
||||
/** Seconds for one full rotation (default: 20) */
|
||||
spinDuration?: number;
|
||||
/** Additional CSS classes for the root element */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* MosaicLogo renders the 5-element Mosaic logo icon:
|
||||
* - 4 corner squares (blue, purple, teal, amber)
|
||||
* - 1 center circle (pink)
|
||||
*
|
||||
* Colors use CSS custom properties so they respond to theme changes.
|
||||
* When `spinning` is true the logo rotates continuously, making it
|
||||
* suitable for use as a loading indicator.
|
||||
*/
|
||||
export function MosaicLogo({
|
||||
size = 36,
|
||||
spinning = false,
|
||||
spinDuration = 20,
|
||||
className = "",
|
||||
}: MosaicLogoProps): React.JSX.Element {
|
||||
// Scale factor relative to the 36px reference design
|
||||
const scale = size / 36;
|
||||
|
||||
// Derived dimensions
|
||||
const squareSize = Math.round(14 * scale);
|
||||
const circleSize = Math.round(11 * scale);
|
||||
const borderRadius = Math.round(3 * scale);
|
||||
|
||||
const animationValue = spinning
|
||||
? `mosaicLogoSpin ${String(spinDuration)}s linear infinite`
|
||||
: undefined;
|
||||
|
||||
const containerStyle: CSSProperties = {
|
||||
width: size,
|
||||
height: size,
|
||||
position: "relative",
|
||||
flexShrink: 0,
|
||||
animation: animationValue,
|
||||
transformOrigin: "center",
|
||||
};
|
||||
|
||||
const baseSquareStyle: CSSProperties = {
|
||||
position: "absolute",
|
||||
width: squareSize,
|
||||
height: squareSize,
|
||||
borderRadius,
|
||||
};
|
||||
|
||||
const circleStyle: CSSProperties = {
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: circleSize,
|
||||
height: circleSize,
|
||||
borderRadius: "50%",
|
||||
background: "var(--ms-pink-500)",
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{spinning && (
|
||||
<style>{`
|
||||
@keyframes mosaicLogoSpin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
`}</style>
|
||||
)}
|
||||
<div style={containerStyle} className={className} role="img" aria-label="Mosaic logo">
|
||||
{/* Top-left: blue */}
|
||||
<div style={{ ...baseSquareStyle, top: 0, left: 0, background: "var(--ms-blue-500)" }} />
|
||||
{/* Top-right: purple */}
|
||||
<div style={{ ...baseSquareStyle, top: 0, right: 0, background: "var(--ms-purple-500)" }} />
|
||||
{/* Bottom-right: teal */}
|
||||
<div
|
||||
style={{ ...baseSquareStyle, bottom: 0, right: 0, background: "var(--ms-teal-500)" }}
|
||||
/>
|
||||
{/* Bottom-left: amber */}
|
||||
<div
|
||||
style={{ ...baseSquareStyle, bottom: 0, left: 0, background: "var(--ms-amber-500)" }}
|
||||
/>
|
||||
{/* Center: pink circle */}
|
||||
<div style={circleStyle} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default MosaicLogo;
|
||||
49
apps/web/src/components/ui/MosaicSpinner.tsx
Normal file
49
apps/web/src/components/ui/MosaicSpinner.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
"use client";
|
||||
|
||||
import { MosaicLogo } from "./MosaicLogo";
|
||||
import type { ReactElement } from "react";
|
||||
|
||||
export interface MosaicSpinnerProps {
|
||||
/** Width and height of the logo in pixels (default: 36) */
|
||||
size?: number;
|
||||
/** Seconds for one full rotation (default: 20) */
|
||||
spinDuration?: number;
|
||||
/** Optional text label displayed below the spinner */
|
||||
label?: string;
|
||||
/**
|
||||
* When true, wraps the spinner in a full-page centered overlay.
|
||||
* When false (default), renders inline.
|
||||
*/
|
||||
fullPage?: boolean;
|
||||
/** Additional CSS classes for the wrapper element */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* MosaicSpinner wraps MosaicLogo with spinning enabled.
|
||||
* It can be used as a full-page loading overlay or as an inline indicator.
|
||||
*/
|
||||
export function MosaicSpinner({
|
||||
size = 36,
|
||||
spinDuration = 20,
|
||||
label,
|
||||
fullPage = false,
|
||||
className = "",
|
||||
}: MosaicSpinnerProps): ReactElement {
|
||||
const inner = (
|
||||
<div className={`flex flex-col items-center gap-3 ${className}`}>
|
||||
<MosaicLogo size={size} spinning spinDuration={spinDuration} />
|
||||
{label !== undefined && label !== "" && (
|
||||
<span className="text-sm text-gray-500">{label}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
if (fullPage) {
|
||||
return <div className="flex min-h-screen items-center justify-center">{inner}</div>;
|
||||
}
|
||||
|
||||
return inner;
|
||||
}
|
||||
|
||||
export default MosaicSpinner;
|
||||
@@ -29,6 +29,21 @@ function getStoredTheme(): Theme {
|
||||
return "system";
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply the resolved theme to the <html> element via data-theme attribute.
|
||||
* The default (no attribute or data-theme="dark") renders dark — dark is default.
|
||||
* Light theme requires data-theme="light".
|
||||
*/
|
||||
function applyThemeAttribute(resolved: "light" | "dark"): void {
|
||||
const root = document.documentElement;
|
||||
if (resolved === "light") {
|
||||
root.setAttribute("data-theme", "light");
|
||||
} else {
|
||||
// Remove the attribute so the default (dark) CSS variables apply.
|
||||
root.removeAttribute("data-theme");
|
||||
}
|
||||
}
|
||||
|
||||
interface ThemeProviderProps {
|
||||
children: ReactNode;
|
||||
defaultTheme?: Theme;
|
||||
@@ -46,19 +61,18 @@ export function ThemeProvider({
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
const storedTheme = getStoredTheme();
|
||||
const resolved = storedTheme === "system" ? getSystemTheme() : storedTheme;
|
||||
setThemeState(storedTheme);
|
||||
setResolvedTheme(storedTheme === "system" ? getSystemTheme() : storedTheme);
|
||||
setResolvedTheme(resolved);
|
||||
applyThemeAttribute(resolved);
|
||||
}, []);
|
||||
|
||||
// Apply theme class to html element
|
||||
// Apply theme via data-theme attribute on html element
|
||||
useEffect(() => {
|
||||
if (!mounted) return;
|
||||
|
||||
const root = document.documentElement;
|
||||
const resolved = theme === "system" ? getSystemTheme() : theme;
|
||||
|
||||
root.classList.remove("light", "dark");
|
||||
root.classList.add(resolved);
|
||||
applyThemeAttribute(resolved);
|
||||
setResolvedTheme(resolved);
|
||||
}, [theme, mounted]);
|
||||
|
||||
@@ -68,9 +82,9 @@ export function ThemeProvider({
|
||||
|
||||
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
const handleChange = (e: MediaQueryListEvent): void => {
|
||||
setResolvedTheme(e.matches ? "dark" : "light");
|
||||
document.documentElement.classList.remove("light", "dark");
|
||||
document.documentElement.classList.add(e.matches ? "dark" : "light");
|
||||
const resolved = e.matches ? "dark" : "light";
|
||||
setResolvedTheme(resolved);
|
||||
applyThemeAttribute(resolved);
|
||||
};
|
||||
|
||||
mediaQuery.addEventListener("change", handleChange);
|
||||
|
||||
@@ -1,10 +1,34 @@
|
||||
import type { Config } from "tailwindcss";
|
||||
|
||||
const config: Config = {
|
||||
darkMode: "class",
|
||||
// Use data-theme attribute selector for dark mode instead of .dark class
|
||||
darkMode: ["selector", '[data-theme="dark"]'],
|
||||
content: ["./src/**/*.{js,ts,jsx,tsx,mdx}", "../../packages/ui/src/**/*.{js,ts,jsx,tsx,mdx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ["var(--font-outfit)", "system-ui", "sans-serif"],
|
||||
mono: ["var(--font-fira-code)", "Cascadia Code", "monospace"],
|
||||
},
|
||||
colors: {
|
||||
// Expose Mosaic semantic tokens as Tailwind colors
|
||||
bg: "var(--bg)",
|
||||
"bg-deep": "var(--bg-deep)",
|
||||
"bg-mid": "var(--bg-mid)",
|
||||
surface: "var(--surface)",
|
||||
"surface-2": "var(--surface-2)",
|
||||
border: "var(--border)",
|
||||
text: "var(--text)",
|
||||
"text-2": "var(--text-2)",
|
||||
muted: "var(--muted)",
|
||||
primary: "var(--primary)",
|
||||
"primary-l": "var(--primary-l)",
|
||||
danger: "var(--danger)",
|
||||
success: "var(--success)",
|
||||
warn: "var(--warn)",
|
||||
purple: "var(--purple)",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
233
docs/PRD.md
Normal file
233
docs/PRD.md
Normal file
@@ -0,0 +1,233 @@
|
||||
# PRD: Mosaic Stack Dashboard & Platform Implementation
|
||||
|
||||
## Metadata
|
||||
|
||||
- Owner: Jason Woltje
|
||||
- Date: 2026-02-22
|
||||
- Status: in-progress
|
||||
- Best-Guess Mode: true
|
||||
|
||||
## Problem Statement
|
||||
|
||||
The Mosaic Stack web UI has a basic navigation and simple widget-based dashboard that doesn't match the production-ready design vision. The reference design (dashboard.html) defines a comprehensive command center UI with sidebar navigation, topbar, terminal panel, and multiple page layouts. The current implementation uses mismatched design tokens (raw Tailwind colors vs CSS variables), has no collapsible sidebar, no global terminal, and lacks the polished design system from the reference.
|
||||
|
||||
## Objectives
|
||||
|
||||
1. Implement the dashboard.html reference design as the production UI foundation
|
||||
2. Establish a consistent CSS design token system that supports multiple themes
|
||||
3. Build a responsive, accessible app shell with collapsible sidebar and full-width header
|
||||
4. Create a theme system supporting installable theme packages
|
||||
5. Build all dashboard pages (Dashboard, Projects, Workspace, Kanban, Files, Logs, Settings, Profile)
|
||||
6. Implement real backend integration (no mock data)
|
||||
7. Support multi-tenant configuration with RBAC
|
||||
8. Implement federation (master-master and master-slave)
|
||||
9. Build global terminal, project chat, and master chat session
|
||||
10. Configure telemetry with opt-out support
|
||||
|
||||
## Scope
|
||||
|
||||
### In Scope (Milestone 0.0.15 — Dashboard Shell & Design System)
|
||||
|
||||
1. CSS design token system overhaul (colors, fonts, spacing, radii from dashboard.html)
|
||||
2. App shell layout: sidebar + full-width header + main content area
|
||||
3. Full-width header with logo, search, system status, terminal toggle, notifications, theme toggle, user avatar dropdown
|
||||
4. Collapsible sidebar with nav groups, icons, badges, active states, collapse/expand button
|
||||
5. Responsive layout with hamburger button at small breakpoints, sidebar hidden by default at mobile
|
||||
6. Light/dark theme matching the reference design
|
||||
7. Mosaic logo icon as global loading spinner
|
||||
8. Shared component updates in packages/ui (Card, Badge, Button, Dot, MetricsStrip, ProgressBar, FilterTabs, SectionHeader, Table, LogLine, Terminal panel)
|
||||
9. Dashboard page: metrics strip, active orchestrator sessions, quick actions, activity feed, token budget
|
||||
10. Grain overlay texture from reference design
|
||||
|
||||
### In Scope (Future Milestones — Documented for Planning)
|
||||
|
||||
11. Additional pages: Projects, Workspace, Kanban, File Manager, Logs & Telemetry, Settings, Profile
|
||||
12. Theme system with installable theme packages
|
||||
13. Widget system with installable widget packages, customizable sizes
|
||||
14. Global terminal (project/orchestrator level, smart)
|
||||
15. Project-level orchestrator chat
|
||||
16. Master chat session (collapsible sidebar/slideout, always available)
|
||||
17. Settings page for ALL environment variables, dynamically configurable via webUI
|
||||
18. Multi-tenant configuration with admin user management
|
||||
19. Team management with shared data spaces and chat rooms
|
||||
20. RBAC for file access, resources, models
|
||||
21. Federation: master-master and master-slave with key exchange
|
||||
22. Federation testing: 3 instances on Coolify (woltje.com domain)
|
||||
23. Agent task mapping configuration (system-level defaults, user-level overrides)
|
||||
24. Telemetry: opt-out, customizable endpoint, sanitized data
|
||||
25. File manager with WYSIWYG editing (system/user/project levels)
|
||||
26. User-level and project-level Kanban with filtering
|
||||
27. Break-glass authentication user
|
||||
28. Playwright E2E tests for all pages
|
||||
29. API documentation via Swagger
|
||||
30. Backend endpoints for all dashboard data
|
||||
|
||||
### Out of Scope
|
||||
|
||||
1. Mobile native app
|
||||
2. Third-party marketplace for themes/widgets (initial implementation is local package management only)
|
||||
3. Production deployment to non-Coolify targets
|
||||
4. Calendar system redesign (existing calendar implementation is retained)
|
||||
|
||||
## User/Stakeholder Requirements
|
||||
|
||||
1. The `jarvis` user must be able to log into mosaic.woltje.com via Authentik as administrator with access to all pages
|
||||
2. A standard `jarvis-user` must operate at a lower permission level
|
||||
3. A break-glass user must have access without Authentik authentication
|
||||
4. All pages must be navigable without errors
|
||||
5. Light and dark themes must work across all pages and components
|
||||
6. Sidebar must be collapsible with open/close button; hidden by default at small breakpoints
|
||||
7. Hamburger button visible at lower breakpoints for sidebar control
|
||||
8. The Mosaic Stack logo icon must be the site-wide loading spinner
|
||||
9. No mock data — all data pulled from backend APIs
|
||||
|
||||
## Functional Requirements
|
||||
|
||||
### FR-001: Design Token System
|
||||
|
||||
- CSS custom properties for all colors, spacing, typography, radii
|
||||
- Dark theme as default (`:root`), light theme via `[data-theme="light"]`
|
||||
- Fonts: Outfit (body), Fira Code (monospace)
|
||||
- All components must use design tokens, never hardcoded colors
|
||||
|
||||
### FR-002: App Shell Layout
|
||||
|
||||
- CSS Grid: sidebar column + header row + main content
|
||||
- Full-width header spanning above sidebar and content
|
||||
- ASSUMPTION: Header spans full width including above sidebar area. The logo is in the header, not the sidebar. Rationale: User explicitly stated "The logo will NOT be part of the sidebar."
|
||||
|
||||
### FR-003: Sidebar Navigation
|
||||
|
||||
- Nav groups: Overview (Dashboard), Workspace (Projects, Project Workspace, Kanban, File Manager), Operations (Logs & Telemetry, Terminal), System (Settings)
|
||||
- Collapsible: icon-only mode when collapsed
|
||||
- Active state indicator (left border accent)
|
||||
- User card in footer with avatar, name, role, online status
|
||||
- ASSUMPTION: Sidebar footer user card navigates to Profile page. Rationale: Matches reference design behavior.
|
||||
|
||||
### FR-004: Header/Topbar
|
||||
|
||||
- Logo + brand wordmark (left)
|
||||
- Search bar with keyboard shortcut hint
|
||||
- System status indicator
|
||||
- Terminal toggle button
|
||||
- Notification bell with badge
|
||||
- Theme toggle (sun/moon icon)
|
||||
- User avatar button with dropdown (Profile, Account Settings, Sign Out)
|
||||
|
||||
### FR-005: Responsive Design
|
||||
|
||||
- Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)
|
||||
- Below md: sidebar hidden, hamburger button in header
|
||||
- md-lg: sidebar can be toggled
|
||||
- lg+: sidebar visible by default
|
||||
|
||||
### FR-006: Dashboard Page
|
||||
|
||||
- 6-cell metrics strip with colored top borders and trend indicators
|
||||
- Active Orchestrator Sessions card with agent nodes
|
||||
- Quick Actions 2x2 grid
|
||||
- Activity Feed sidebar card
|
||||
- Token Budget sidebar card with progress bars
|
||||
|
||||
### FR-007: Loading Spinner
|
||||
|
||||
- Mosaic logo icon (4 corner squares + center circle) with CSS rotation animation
|
||||
- Used as global loading indicator across all pages
|
||||
- Available as a shared component
|
||||
|
||||
### FR-008: Theme System (Future Milestone)
|
||||
|
||||
- Support multiple themes beyond default dark/light
|
||||
- Themes are installable packages from Mosaic Stack repo
|
||||
- Theme installation and selection from Settings page
|
||||
- ASSUMPTION: Initial implementation supports dark/light from reference design. Multi-theme package system is a future milestone. Rationale: Foundation must be solid before extensibility.
|
||||
|
||||
### FR-009: Terminal Panel (Future Milestone)
|
||||
|
||||
- Bottom drawer panel, toggleable from header and sidebar
|
||||
- Multiple tabs (Orchestrator, Shell, Build)
|
||||
- Smart terminal operating at project/orchestrator level
|
||||
- Global terminal for system interaction
|
||||
|
||||
### FR-010: Settings Page (Future Milestone)
|
||||
|
||||
- All environment variables configurable via UI
|
||||
- Minimal launch env vars, rest configurable dynamically
|
||||
- Settings stored in DB with RLS
|
||||
- Theme selection, widget management, federation config, telemetry config
|
||||
|
||||
## Non-Functional Requirements
|
||||
|
||||
1. Security: All API endpoints require authentication. RBAC enforced. No PII in telemetry. Secrets never hardcoded.
|
||||
2. Performance: Dashboard loads in <2s. No layout shift during theme toggle. Sidebar toggle is instant (<100ms animation).
|
||||
3. Reliability: Break-glass auth ensures access when Authentik is down.
|
||||
4. Observability: Telemetry with opt-out support. Wide-event logging. Customizable telemetry endpoint.
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
### Milestone 0.0.15
|
||||
|
||||
1. Design tokens from dashboard.html are implemented in globals.css
|
||||
2. App shell shows full-width header with logo, collapsible sidebar, main content area
|
||||
3. Sidebar has all nav groups with icons, collapses to icon-only mode
|
||||
4. Hamburger button appears at mobile breakpoints, sidebar hidden by default
|
||||
5. Light/dark theme toggle works across all components
|
||||
6. Mosaic logo spinner is used as site-wide loading indicator
|
||||
7. Dashboard page shows metrics strip, orchestrator sessions, quick actions, activity feed, token budget
|
||||
8. All shared components in packages/ui use design tokens (no hardcoded colors)
|
||||
9. Lint, typecheck, and existing tests pass
|
||||
10. Grain overlay texture from reference is applied
|
||||
|
||||
### Full Project (All Milestones)
|
||||
|
||||
11. jarvis user logs in via Authentik, has admin access to all pages
|
||||
12. jarvis-user has standard access at lower permission level
|
||||
13. Break-glass user has access without Authentik
|
||||
14. Three Mosaic Stack instances on Coolify with federation testing
|
||||
15. Playwright tests confirm all pages, functions, theming work
|
||||
16. No errors during site navigation
|
||||
17. API documented via Swagger with proper auth gating
|
||||
18. Telemetry working locally with wide-event logging
|
||||
19. Mosaic Telemetry properly reporting to telemetry endpoint
|
||||
|
||||
## Constraints and Dependencies
|
||||
|
||||
1. Next.js 16 with App Router — all pages use server/client component patterns
|
||||
2. Tailwind CSS 3.4 — design tokens must integrate with Tailwind's utility class system
|
||||
3. BetterAuth for authentication — must maintain existing auth flow
|
||||
4. Authentik as IdP at auth.diversecanvas.com — must remain operational
|
||||
5. PostgreSQL 17 with Prisma — all settings stored in DB
|
||||
6. Coolify for deployment — 3 instances needed for federation testing
|
||||
7. packages/ui is shared across apps — changes affect all consumers
|
||||
|
||||
## Risks and Open Questions
|
||||
|
||||
1. **Risk**: Changing globals.css design tokens may break existing pages (login, knowledge, calendar). Mitigation: Thorough regression testing.
|
||||
2. **Risk**: packages/ui uses hardcoded Tailwind colors — migration to CSS variables needs care. Mitigation: Phase the migration, test each component.
|
||||
3. **Open**: Exact federation protocol details for master-master vs master-slave data sync.
|
||||
4. **Open**: Specific telemetry data points to collect.
|
||||
5. **Open**: Agent task mapping configuration schema (informed by OpenClaw research).
|
||||
|
||||
## Testing and Verification
|
||||
|
||||
1. Baseline: `pnpm lint && pnpm build` must pass
|
||||
2. Situational: Visual verification at sm/md/lg/xl breakpoints
|
||||
3. Situational: Theme toggle across all pages
|
||||
4. Situational: Sidebar collapse/expand at all breakpoints
|
||||
5. E2E: Playwright tests for all page navigation
|
||||
6. E2E: Auth flow with Authentik
|
||||
7. Federation: Master-master and master-slave data access tests
|
||||
|
||||
## Delivery/Milestone Intent
|
||||
|
||||
| Milestone | Version | Focus |
|
||||
| ----------------------- | ------- | ----------------------------------------------------------------- |
|
||||
| MS15-DashboardShell | 0.0.15 | Design system + app shell + dashboard page |
|
||||
| MS16-Pages | 0.0.16 | Projects, Workspace, Kanban, Settings, Profile, Files, Logs pages |
|
||||
| MS17-BackendIntegration | 0.0.17 | API endpoints, real data, Swagger docs |
|
||||
| MS18-ThemeWidgets | 0.0.18 | Theme package system, widget registry, dashboard customization |
|
||||
| MS19-ChatTerminal | 0.0.19 | Global terminal, project chat, master chat session |
|
||||
| MS20-MultiTenant | 0.0.20 | Multi-tenant, teams, RBAC, RLS enforcement, break-glass auth |
|
||||
| MS21-Federation | 0.0.21 | Federation (M-M, M-S), 3 instances, key exchange, data separation |
|
||||
| MS22-AgentTelemetry | 0.0.22 | Agent task mapping, telemetry, wide-event logging |
|
||||
| MS23-Testing | 0.0.23 | Playwright E2E, federation tests, documentation finalization |
|
||||
63
docs/scratchpads/ms15-dashboard-shell.md
Normal file
63
docs/scratchpads/ms15-dashboard-shell.md
Normal file
@@ -0,0 +1,63 @@
|
||||
# MS15 — Dashboard Shell & Design System
|
||||
|
||||
## Objective
|
||||
|
||||
Implement the dashboard.html reference design across the Mosaic Stack web app. Establish the design token system, app shell layout, shared components, and dashboard page.
|
||||
|
||||
## Design Reference
|
||||
|
||||
`/home/jwoltje/src/mosaic-stack-website/docs/designs/round-5/claude/01/dashboard.html`
|
||||
|
||||
## Key Architectural Decisions
|
||||
|
||||
1. **Theme approach**: CSS custom properties via `:root` + `[data-theme="light"]`. Tailwind configured to use these variables. ThemeProvider updated to set `data-theme` attribute on `<html>`.
|
||||
2. **Logo placement**: Logo in full-width header (topbar), NOT in sidebar. User spec overrides reference design.
|
||||
3. **Sidebar collapse**: Collapsible with icon-only mode. Hidden by default at mobile breakpoints. Hamburger button for small screens.
|
||||
4. **Fonts**: Outfit (body) + Fira Code (mono). Loaded via `next/font/google`.
|
||||
5. **Loading spinner**: Mosaic logo icon component with CSS rotation animation.
|
||||
6. **Grain overlay**: Subtle noise texture via CSS pseudo-element, same as reference.
|
||||
7. **Per-phase branches**: `feat/ms15-design-system`, `feat/ms15-shared-components`, `feat/ms15-dashboard-page`.
|
||||
|
||||
## Phases
|
||||
|
||||
### Phase 1: Foundation (Design System & App Shell)
|
||||
|
||||
- MS15-FE-001: Design token system overhaul
|
||||
- MS15-FE-002: App shell grid layout
|
||||
- MS15-FE-003: Sidebar component
|
||||
- MS15-FE-004: Topbar/Header component
|
||||
- MS15-FE-005: Responsive breakpoints
|
||||
- MS15-FE-006: Loading spinner (Mosaic logo)
|
||||
|
||||
### Phase 2: Shared Components
|
||||
|
||||
- MS15-UI-001: packages/ui token alignment
|
||||
- MS15-UI-002: Card, Badge, Button, Dot updates
|
||||
- MS15-UI-003: MetricsStrip, ProgressBar, FilterTabs
|
||||
- MS15-UI-004: SectionHeader, Table, LogLine
|
||||
- MS15-UI-005: Terminal panel component
|
||||
|
||||
### Phase 3: Dashboard Page
|
||||
|
||||
- MS15-DASH-001: Metrics strip
|
||||
- MS15-DASH-002: Active Orchestrator Sessions
|
||||
- MS15-DASH-003: Quick Actions
|
||||
- MS15-DASH-004: Activity Feed
|
||||
- MS15-DASH-005: Token Budget
|
||||
|
||||
### Phase 4: Quality
|
||||
|
||||
- MS15-QA-001: Baseline tests
|
||||
- MS15-QA-002: Situational tests
|
||||
- MS15-DOC-001: Documentation
|
||||
|
||||
## Progress Log
|
||||
|
||||
- Session started: 2026-02-22
|
||||
- Status: Bootstrap phase
|
||||
|
||||
## Risks
|
||||
|
||||
- Large surface area: globals.css change affects all existing pages
|
||||
- packages/ui color system mismatch requires careful migration
|
||||
- Existing pages (login, auth) may need adjustment after token changes
|
||||
45
docs/scratchpads/ms15-fe-006-mosaic-logo-spinner.md
Normal file
45
docs/scratchpads/ms15-fe-006-mosaic-logo-spinner.md
Normal file
@@ -0,0 +1,45 @@
|
||||
# MS15-FE-006: MosaicLogo and MosaicSpinner Components
|
||||
|
||||
## Task
|
||||
|
||||
Create Mosaic logo icon component and spinner wrapper for use as the site-wide loading indicator.
|
||||
|
||||
## Files to Create
|
||||
|
||||
1. `apps/web/src/components/ui/MosaicLogo.tsx` — 5-element logo icon
|
||||
2. `apps/web/src/components/ui/MosaicSpinner.tsx` — spinner wrapper
|
||||
|
||||
## Files to Modify
|
||||
|
||||
1. `apps/web/src/app/(authenticated)/layout.tsx` — replace loading spinner (isLoading block only)
|
||||
|
||||
## Design
|
||||
|
||||
- 4 corner squares: blue (TL), purple (TR), teal (BR), amber (BL)
|
||||
- 1 center circle: pink
|
||||
- CSS vars: --ms-blue-500, --ms-purple-500, --ms-teal-500, --ms-amber-500, --ms-pink-500
|
||||
- Animation: linear 360deg rotation
|
||||
|
||||
## Props
|
||||
|
||||
### MosaicLogo
|
||||
|
||||
- size?: number (default 36)
|
||||
- spinning?: boolean (default false)
|
||||
- spinDuration?: number (default 20) seconds
|
||||
- className?: string
|
||||
|
||||
### MosaicSpinner
|
||||
|
||||
- Wraps MosaicLogo with spinning=true
|
||||
- label?: string — optional text label below
|
||||
- fullPage?: boolean — center on screen
|
||||
|
||||
## Status
|
||||
|
||||
- [x] Scratchpad created
|
||||
- [ ] MosaicLogo.tsx created
|
||||
- [ ] MosaicSpinner.tsx created
|
||||
- [ ] layout.tsx updated
|
||||
- [ ] Lint clean
|
||||
- [ ] Committed and pushed
|
||||
@@ -1,5 +1,36 @@
|
||||
# Tasks
|
||||
|
||||
## MS15-DashboardShell (0.0.15) — Dashboard Shell & Design System
|
||||
|
||||
**Orchestrator:** Claude Code (Opus 4.6)
|
||||
**Started:** 2026-02-22
|
||||
**Branch:** feat/ms15-design-system (Phase 1), feat/ms15-shared-components (Phase 2), feat/ms15-dashboard-page (Phase 3)
|
||||
**Milestone:** MS15-DashboardShell (0.0.15)
|
||||
**PRD:** docs/PRD.md
|
||||
|
||||
| id | status | description | issue | repo | branch | depends_on | blocks | agent | started_at | completed_at | estimate | used | notes |
|
||||
| ------------- | ----------- | -------------------------------------------------------------------------------------------- | ----- | ---- | --------------------------- | ----------------------- | ----------------------------------------------- | ----- | ----------------- | ----------------- | -------- | ---- | --------------------------------------------------------------- |
|
||||
| MS15-FE-001 | done | Design token system overhaul (globals.css → dashboard.html tokens, dark/light, fonts) | #448 | web | feat/ms15-design-system | | MS15-FE-002,MS15-FE-003,MS15-FE-004,MS15-UI-001 | w-1 | 2026-02-22T14:30Z | 2026-02-22T15:00Z | 25K | 18K | Combined with FE-002. Commit e615fa8. Build passes. |
|
||||
| MS15-FE-002 | done | App shell grid layout (sidebar + full-width header + main content) | #448 | web | feat/ms15-design-system | MS15-FE-001 | MS15-FE-003,MS15-FE-004,MS15-FE-005 | w-1 | 2026-02-22T14:30Z | 2026-02-22T15:00Z | 20K | 0K | Combined with FE-001 (same commit). |
|
||||
| MS15-FE-003 | done | Sidebar component (collapsible, nav groups, icons, badges, user card footer) | #448 | web | feat/ms15-design-system | MS15-FE-002 | MS15-FE-005 | w-3 | 2026-02-22T15:30Z | 2026-02-22T16:00Z | 25K | 67K | 4 nav groups, SidebarContext, collapse toggle. Commit 04f9918. |
|
||||
| MS15-FE-004 | done | Topbar/Header component (logo, search, status, notifications, theme toggle, avatar dropdown) | #448 | web | feat/ms15-design-system | MS15-FE-002 | MS15-FE-005 | w-4 | 2026-02-22T15:30Z | 2026-02-22T16:00Z | 25K | 44K | Search, status, notifications, avatar dropdown. Commit 04f9918. |
|
||||
| MS15-FE-005 | done | Responsive layout (breakpoints, hamburger, sidebar auto-hide at mobile) | #448 | web | feat/ms15-design-system | MS15-FE-003,MS15-FE-004 | MS15-QA-001 | w-5 | 2026-02-22T16:00Z | 2026-02-22T16:30Z | 20K | 57K | Mobile overlay, hamburger, matchMedia. Commit 28620b2. |
|
||||
| MS15-FE-006 | done | Loading spinner (Mosaic logo icon with rotation animation, site-wide) | #448 | web | feat/ms15-design-system | MS15-FE-001 | | w-2 | 2026-02-22T14:30Z | 2026-02-22T15:00Z | 10K | 8K | MosaicLogo + MosaicSpinner components. Same commit e615fa8. |
|
||||
| MS15-UI-001 | not-started | Align packages/ui tokens with new CSS variable design system | #449 | ui | feat/ms15-shared-components | MS15-FE-001 | MS15-UI-002,MS15-UI-003,MS15-UI-004 | | | | 20K | | |
|
||||
| MS15-UI-002 | not-started | Update Card, Badge, Button, Dot component variants to match reference | #449 | ui | feat/ms15-shared-components | MS15-UI-001 | MS15-DASH-001 | | | | 25K | | |
|
||||
| MS15-UI-003 | not-started | Create MetricsStrip, ProgressBar, FilterTabs shared components | #449 | ui | feat/ms15-shared-components | MS15-UI-001 | MS15-DASH-001 | | | | 20K | | |
|
||||
| MS15-UI-004 | not-started | Create SectionHeader, Table, LogLine shared components | #449 | ui | feat/ms15-shared-components | MS15-UI-001 | MS15-DASH-002 | | | | 15K | | |
|
||||
| MS15-UI-005 | not-started | Create Terminal panel component (bottom drawer, tabs, output) | #449 | web | feat/ms15-shared-components | MS15-UI-001 | | | | | 20K | | |
|
||||
| MS15-DASH-001 | not-started | Dashboard metrics strip (6 cells, colored borders, values, trends) | #450 | web | feat/ms15-dashboard-page | MS15-UI-002,MS15-UI-003 | | | | | 15K | | |
|
||||
| MS15-DASH-002 | not-started | Active Orchestrator Sessions card with agent nodes | #450 | web | feat/ms15-dashboard-page | MS15-UI-004 | | | | | 20K | | |
|
||||
| MS15-DASH-003 | not-started | Quick Actions 2x2 grid | #450 | web | feat/ms15-dashboard-page | MS15-UI-002 | | | | | 10K | | |
|
||||
| MS15-DASH-004 | not-started | Activity Feed sidebar card | #450 | web | feat/ms15-dashboard-page | MS15-UI-002 | | | | | 15K | | |
|
||||
| MS15-DASH-005 | not-started | Token Budget sidebar card with progress bars | #450 | web | feat/ms15-dashboard-page | MS15-UI-003 | | | | | 10K | | |
|
||||
| MS15-QA-001 | done | Baseline tests (lint, typecheck, build) and situational tests (responsive, themes) | #448 | web | feat/ms15-design-system | MS15-FE-005 | | orch | 2026-02-22T16:30Z | 2026-02-22T16:35Z | 15K | 2K | lint 0 errors, typecheck clean, build passes. All caches hit. |
|
||||
| MS15-DOC-001 | not-started | Documentation: design system reference, component docs | #448 | docs | feat/ms15-design-system | MS15-QA-001 | | | | | 10K | | |
|
||||
|
||||
---
|
||||
|
||||
## M10-Telemetry (0.0.10) — Telemetry Integration
|
||||
|
||||
**Orchestrator:** Claude Code
|
||||
|
||||
Reference in New Issue
Block a user