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: [],
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user