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

Browse Source 
Build out apps/web with Tailwind CSS v4, BetterAuth client, and the Mosaic
design system. Populate @mosaic/design-tokens with actual color palette
(deep blue-grays, blue/purple/teal accents), font definitions (Outfit/Fira Code),
and spacing scale per AD-13.

- Tailwind v4 CSS-first config with @theme tokens in globals.css
- next/font for self-hosted Outfit + Fira Code (no Google CDN)
- App shell with sidebar nav, topbar, and content area
- Route groups: (dashboard) with AppShell, (auth) with centered card
- Placeholder pages: /chat, /login, /register
- BetterAuth React client (useSession, signIn, signUp, signOut)
- Gateway API fetch wrapper with credentials
- cn() utility with clsx + tailwind-merge
- Dark theme default, WCAG-friendly contrast

Refs #26

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jason Woltje
2026-03-13 08:17:22 -05:00
parent 5d936d58a0
commit 61130b869b
26 changed files with 1070 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>
);