mosaicstack/stack
1
0
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects Releases 11 Wiki Activity

feat(web): scaffold Next.js 16 dashboard with design system and auth client (#82)

Browse Source 
Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>
This commit was merged in pull request #82.
This commit is contained in:
Jason Woltje
2026-03-13 13:18:09 +00:00
committed by jason.woltje
parent 5d936d58a0
commit 780f85e0d6
26 changed files with 1070 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/next-env.d.ts vendored
View File

@@ -1,6 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
import './.next/types/routes.d.ts';
import "./.next/types/routes.d.ts";
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

1
apps/web/next.config.ts
View File

@@ -2,6 +2,7 @@ import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
output: 'standalone',
transpilePackages: ['@mosaic/design-tokens'],
};
export default nextConfig;

7
apps/web/package.json
View File

@@ -11,11 +11,16 @@
"start": "next start"
},
"dependencies": {
"@mosaic/design-tokens": "workspace:^",
"better-auth": "^1.5.5",
"clsx": "^2.1.0",
"next": "^16.0.0",
"react": "^19.0.0",
"react-dom": "^19.0.0"
"react-dom": "^19.0.0",
"tailwind-merge": "^3.5.0"
},
"devDependencies": {
"@tailwindcss/postcss": "^4.0.0",
"@types/node": "^22.0.0",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",

8
apps/web/postcss.config.mjs Normal file
View File

@@ -0,0 +1,8 @@
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
'@tailwindcss/postcss': {},
},
};
export default config;

11
apps/web/src/app/(auth)/layout.tsx Normal file
View File

@@ -0,0 +1,11 @@
import type { ReactNode } from 'react';
export default function AuthLayout({ children }: { children: ReactNode }): React.ReactElement {
return (
<div className="flex min-h-screen items-center justify-center bg-surface-bg">
<div className="w-full max-w-md rounded-xl border border-surface-border bg-surface-card p-8 shadow-lg">
{children}
</div>
</div>
);
}

58
apps/web/src/app/(auth)/login/page.tsx Normal file
View File

@@ -0,0 +1,58 @@
'use client';
import Link from 'next/link';
export default function LoginPage(): React.ReactElement {
return (
<div>
<h1 className="text-2xl font-semibold">Sign in</h1>
<p className="mt-1 text-sm text-text-secondary">Sign in to your Mosaic account</p>
<form className="mt-6 space-y-4" onSubmit={(e) => e.preventDefault()}>
<div>
<label htmlFor="email" className="block text-sm font-medium text-text-secondary">
Email
</label>
<input
id="email"
name="email"
type="email"
autoComplete="email"
required
className="mt-1 block w-full rounded-lg border border-surface-border bg-surface-elevated px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
placeholder="you@example.com"
/>
</div>
<div>
<label htmlFor="password" className="block text-sm font-medium text-text-secondary">
Password
</label>
<input
id="password"
name="password"
type="password"
autoComplete="current-password"
required
className="mt-1 block w-full rounded-lg border border-surface-border bg-surface-elevated px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
placeholder="••••••••"
/>
</div>
<button
type="submit"
className="w-full rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-surface-card"
>
Sign in
</button>
</form>
<p className="mt-4 text-center text-sm text-text-muted">
Don&apos;t have an account?{' '}
<Link href="/register" className="text-blue-400 hover:text-blue-300">
Sign up
</Link>
</p>
</div>
);
}

73
apps/web/src/app/(auth)/register/page.tsx Normal file
View File

@@ -0,0 +1,73 @@
'use client';
import Link from 'next/link';
export default function RegisterPage(): React.ReactElement {
return (
<div>
<h1 className="text-2xl font-semibold">Create account</h1>
<p className="mt-1 text-sm text-text-secondary">Get started with Mosaic</p>
<form className="mt-6 space-y-4" onSubmit={(e) => e.preventDefault()}>
<div>
<label htmlFor="name" className="block text-sm font-medium text-text-secondary">
Name
</label>
<input
id="name"
name="name"
type="text"
autoComplete="name"
required
className="mt-1 block w-full rounded-lg border border-surface-border bg-surface-elevated px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
placeholder="Your name"
/>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-text-secondary">
Email
</label>
<input
id="email"
name="email"
type="email"
autoComplete="email"
required
className="mt-1 block w-full rounded-lg border border-surface-border bg-surface-elevated px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
placeholder="you@example.com"
/>
</div>
<div>
<label htmlFor="password" className="block text-sm font-medium text-text-secondary">
Password
</label>
<input
id="password"
name="password"
type="password"
autoComplete="new-password"
required
className="mt-1 block w-full rounded-lg border border-surface-border bg-surface-elevated px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
placeholder="••••••••"
/>
</div>
<button
type="submit"
className="w-full rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-surface-card"
>
Create account
</button>
</form>
<p className="mt-4 text-center text-sm text-text-muted">
Already have an account?{' '}
<Link href="/login" className="text-blue-400 hover:text-blue-300">
Sign in
</Link>
</p>
</div>
);
}

8
apps/web/src/app/(dashboard)/chat/page.tsx Normal file
View File

@@ -0,0 +1,8 @@
export default function ChatPage(): React.ReactElement {
return (
<div>
<h1 className="text-2xl font-semibold">Chat</h1>
<p className="mt-2 text-text-secondary">Conversations will appear here.</p>
</div>
);
}

6
apps/web/src/app/(dashboard)/layout.tsx Normal file
View File

@@ -0,0 +1,6 @@
import type { ReactNode } from 'react';
import { AppShell } from '@/components/layout/app-shell';
export default function DashboardLayout({ children }: { children: ReactNode }): React.ReactElement {
return <AppShell>{children}</AppShell>;
}

115
apps/web/src/app/globals.css Normal file
View File

@@ -0,0 +1,115 @@
@import 'tailwindcss';
/*
* Mosaic Stack design tokens mapped to Tailwind v4 theme.
* Source: @mosaic/design-tokens (AD-13)
* Fonts: Outfit (sans), Fira Code (mono)
* Palette: deep blue-grays + blue/purple/teal accents
* Default: dark theme
*/
@theme {
/* ─── Fonts ─── */
--font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
--font-mono: 'Fira Code', ui-monospace, Menlo, monospace;
/* ─── Neutral blue-gray scale ─── */
--color-gray-50: #f0f2f5;
--color-gray-100: #dce0e8;
--color-gray-200: #b8c0cc;
--color-gray-300: #8e99a9;
--color-gray-400: #6b7a8d;
--color-gray-500: #4e5d70;
--color-gray-600: #3b4859;
--color-gray-700: #2a3544;
--color-gray-800: #1c2433;
--color-gray-900: #111827;
--color-gray-950: #0a0f1a;
/* ─── Primary — blue ─── */
--color-blue-50: #eff4ff;
--color-blue-100: #dae5ff;
--color-blue-200: #bdd1ff;
--color-blue-300: #8fb4ff;
--color-blue-400: #5b8bff;
--color-blue-500: #3b6cf7;
--color-blue-600: #2551e0;
--color-blue-700: #1d40c0;
--color-blue-800: #1e369c;
--color-blue-900: #1e317b;
--color-blue-950: #162050;
/* ─── Accent — purple ─── */
--color-purple-50: #f3f0ff;
--color-purple-100: #e7dfff;
--color-purple-200: #d2c3ff;
--color-purple-300: #b49aff;
--color-purple-400: #9466ff;
--color-purple-500: #7c3aed;
--color-purple-600: #6d28d9;
--color-purple-700: #5b21b6;
--color-purple-800: #4c1d95;
--color-purple-900: #3b1578;
--color-purple-950: #230d4d;
/* ─── Accent — teal ─── */
--color-teal-50: #effcf9;
--color-teal-100: #d0f7ef;
--color-teal-200: #a4eddf;
--color-teal-300: #6fddcb;
--color-teal-400: #3ec5b2;
--color-teal-500: #25aa99;
--color-teal-600: #1c897e;
--color-teal-700: #1b6e66;
--color-teal-800: #1a5853;
--color-teal-900: #194945;
--color-teal-950: #082d2b;
/* ─── Semantic surface tokens ─── */
--color-surface-bg: #0a0f1a;
--color-surface-card: #111827;
--color-surface-elevated: #1c2433;
--color-surface-border: #2a3544;
/* ─── Semantic text tokens ─── */
--color-text-primary: #f0f2f5;
--color-text-secondary: #8e99a9;
--color-text-muted: #6b7a8d;
/* ─── Status colors ─── */
--color-success: #22c55e;
--color-warning: #f59e0b;
--color-error: #ef4444;
--color-info: #3b82f6;
/* ─── Sidebar width ─── */
--spacing-sidebar: 16rem;
}
/* ─── Base styles ─── */
body {
background-color: var(--color-surface-bg);
color: var(--color-text-primary);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ─── Scrollbar styling ─── */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--color-gray-600);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-gray-500);
}

20
apps/web/src/app/layout.tsx
View File

@@ -1,13 +1,29 @@
import type { ReactNode } from 'react';
import { Outfit, Fira_Code } from 'next/font/google';
import './globals.css';
const outfit = Outfit({
subsets: ['latin'],
variable: '--font-sans',
display: 'swap',
weight: ['300', '400', '500', '600', '700'],
});
const firaCode = Fira_Code({
subsets: ['latin'],
variable: '--font-mono',
display: 'swap',
weight: ['400', '500', '700'],
});
export const metadata = {
title: 'Mosaic',
description: 'Mosaic Stack Dashboard',
};
export default function RootLayout({ children }: { children: ReactNode }): ReactNode {
export default function RootLayout({ children }: { children: ReactNode }): React.ReactElement {
return (
<html lang="en">
<html lang="en" className={`dark ${outfit.variable} ${firaCode.variable}`}>
<body>{children}</body>
</html>
);

10
apps/web/src/app/page.tsx
View File

@@ -1,7 +1,5 @@
export default function HomePage(): React.ReactElement {
return (
<main>
<h1>Mosaic Stack</h1>
</main>
);
import { redirect } from 'next/navigation';
export default function HomePage(): never {
redirect('/chat');
}

19
apps/web/src/components/layout/app-shell.tsx Normal file
View File

@@ -0,0 +1,19 @@
import type { ReactNode } from 'react';
import { Sidebar } from './sidebar';
import { Topbar } from './topbar';
interface AppShellProps {
children: ReactNode;
}
export function AppShell({ children }: AppShellProps): React.ReactElement {
return (
<div className="min-h-screen">
<Sidebar />
<div className="pl-sidebar">
<Topbar />
<main className="p-6">{children}</main>
</div>
</div>
);
}

59
apps/web/src/components/layout/sidebar.tsx Normal file
View File

@@ -0,0 +1,59 @@
'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/cn';
interface NavItem {
label: string;
href: string;
icon: string;
}
const navItems: NavItem[] = [
{ label: 'Chat', href: '/chat', icon: '💬' },
{ label: 'Tasks', href: '/tasks', icon: '📋' },
{ label: 'Projects', href: '/projects', icon: '📁' },
{ label: 'Settings', href: '/settings', icon: '⚙️' },
];
export function Sidebar(): React.ReactElement {
const pathname = usePathname();
return (
<aside className="fixed left-0 top-0 z-30 flex h-screen w-sidebar flex-col border-r border-surface-border bg-surface-card">
<div className="flex h-14 items-center px-4">
<Link href="/" className="text-lg font-semibold text-text-primary">
Mosaic
</Link>
</div>
<nav className="flex-1 space-y-1 px-2 py-2">
{navItems.map((item) => {
const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`);
return (
<Link
key={item.href}
href={item.href}
className={cn(
'flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors',
isActive
? 'bg-blue-600/20 text-blue-400'
: 'text-text-secondary hover:bg-surface-elevated hover:text-text-primary',
)}
>
<span className="text-base" aria-hidden="true">
{item.icon}
</span>
{item.label}
</Link>
);
})}
</nav>
<div className="border-t border-surface-border p-4">
<p className="text-xs text-text-muted">Mosaic Stack v0.0.4</p>
</div>
</aside>
);
}

32
apps/web/src/components/layout/topbar.tsx Normal file
View File

@@ -0,0 +1,32 @@
'use client';
import { useSession, signOut } from '@/lib/auth-client';
export function Topbar(): React.ReactElement {
const { data: session } = useSession();
return (
<header className="sticky top-0 z-20 flex h-14 items-center justify-between border-b border-surface-border bg-surface-card/80 px-6 backdrop-blur-sm">
<div />
<div className="flex items-center gap-4">
{session?.user ? (
<>
<span className="text-sm text-text-secondary">
{session.user.name ?? session.user.email}
</span>
<button
type="button"
onClick={() => signOut()}
className="rounded-md px-3 py-1.5 text-sm text-text-muted transition-colors hover:bg-surface-elevated hover:text-text-primary"
>
Sign out
</button>
</>
) : (
<span className="text-sm text-text-muted">Not signed in</span>
)}
</div>
</header>
);
}

47
apps/web/src/lib/api.ts Normal file
View File

@@ -0,0 +1,47 @@
const GATEWAY_URL = process.env['NEXT_PUBLIC_GATEWAY_URL'] ?? 'http://localhost:4000';
export interface ApiRequestInit extends Omit<RequestInit, 'body'> {
body?: unknown;
}
export interface ApiError {
statusCode: number;
message: string;
}
/**
* Fetch wrapper for the Mosaic gateway API.
* Sends credentials (cookies) and JSON body automatically.
*/
export async function api<T>(path: string, init?: ApiRequestInit): Promise<T> {
const { body, headers: customHeaders, ...rest } = init ?? {};
const headers: Record<string, string> = {
Accept: 'application/json',
...(customHeaders as Record<string, string>),
};
if (body !== undefined) {
headers['Content-Type'] = 'application/json';
}
const res = await fetch(`${GATEWAY_URL}${path}`, {
credentials: 'include',
...rest,
headers,
body: body !== undefined ? JSON.stringify(body) : undefined,
});
if (!res.ok) {
const errorBody = (await res.json().catch(() => ({
statusCode: res.status,
message: res.statusText,
}))) as ApiError;
throw Object.assign(new Error(errorBody.message), {
statusCode: errorBody.statusCode,
});
}
if (res.status === 204) return undefined as T;
return (await res.json()) as T;
}

7
apps/web/src/lib/auth-client.ts Normal file
View File

@@ -0,0 +1,7 @@
import { createAuthClient } from 'better-auth/react';
export const authClient: ReturnType<typeof createAuthClient> = createAuthClient({
baseURL: process.env['NEXT_PUBLIC_GATEWAY_URL'] ?? 'http://localhost:4000',
});
export const { useSession, signIn, signUp, signOut } = authClient;

7
apps/web/src/lib/cn.ts Normal file
View File

@@ -0,0 +1,7 @@
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
/** Merge and deduplicate Tailwind class names. */
export function cn(...inputs: ClassValue[]): string {
return twMerge(clsx(inputs));
}

11
apps/web/tailwind.config.ts
View File

@@ -1,11 +0,0 @@
import type { Config } from 'tailwindcss';
const config: Config = {
content: ['./src/**/*.{ts,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
export default config;