# Warpbox.dev UI Mockup Plan

Build a **static, non-functional mockup** of all key Warpbox.dev pages using shadcn/ui (already installed) + Tailwind. No backend, no real uploads — just realistic UI with seeded dummy data so you can review look & feel.

## Shell & layout

- `src/components/layout/PublicHeader.tsx` — logo, About, Docs, Login, Register.
- `src/components/layout/AppSidebar.tsx` — authenticated sidebar (Dashboard, My files, Shared links, Settings, Admin).
- `src/components/layout/AdminSidebar.tsx` — admin sidebar (Overview, Files, Users, Storage, Settings, Logs).
- `src/components/layout/Footer.tsx` — version, ToS, Privacy.
- Shared `AppShell` wrapper used by authenticated / admin route groups (via TanStack layout routes `_app.tsx`, `_admin.tsx`).

## Routes (each its own file under `src/routes/`)

Public / anonymous:
- `index.tsx` — Stage 1 landing: large drop zone, upload limits panel, "Advanced options" (expiry / max downloads / password), simulated upload list with progress + copy-link rows, post-upload success card.
- `about.tsx` — short marketing/about page.
- `docs.tsx` — docs landing with curl/ShareX snippets.
- `login.tsx`, `register.tsx` — centered auth cards.
- `d.$id.tsx` — public download page (file preview, size, expiry, download button, password prompt variant).

Authenticated (`_app/` layout with sidebar):
- `_app/dashboard.tsx` — metric cards (storage used, files, recent activity) + recent uploads table.
- `_app/files.tsx` — folder tree (left), breadcrumbs, toolbar (New folder / Upload / Share), table+card view toggle, search.
- `_app/shared.tsx` — list of share links with expiry, downloads count, revoke.
- `_app/settings.tsx` — profile, password, API tokens, ShareX config download.

Admin (`_admin/` layout):
- `_admin/overview.tsx` — 4 metric cards, sparkline/bar chart (recharts), recent uploads + recent flags tables.
- `_admin/files.tsx` — filters panel (date / status / owner type / size), files table with bulk actions.
- `_admin/users.tsx` — users table (email, role, storage used, status, actions).
- `_admin/storage.tsx` — backend status (local/S3), usage gauges, cleanup controls.
- `_admin/logs.tsx` — log stream table with level filter.
- `_admin/settings.tsx` — instance branding, limits, retention, SMTP.

## Components

Built with shadcn primitives already present: `card`, `button`, `input`, `table`, `tabs`, `dialog`, `dropdown-menu`, `sidebar`, `progress`, `badge`, `separator`, `sonner`, `chart`.

Reusable mockup pieces:
- `UploadDropzone` (visual only, fake progress on click).
- `FileRow` (name, size, expiry badge, copy-link, delete).
- `MetricCard` (label, value, delta).
- `FolderTree` (static nested list).
- `EmptyState`.

## Data

Single `src/lib/mock-data.ts` with seeded files, users, logs, metrics. No network calls, no Cloud enablement.

## Design system

Keep existing oklch tokens in `src/styles.css`. Add subtle additions only if needed (e.g. `--success`, `--warning` already implied via chart tokens — extend if missing). Mobile-responsive: sidebar collapses to sheet, tables become card lists at `sm`.

## Out of scope (mockup only)

- No real file upload, auth, storage, or API.
- No Lovable Cloud / Supabase.
- No route guards — admin/auth pages are publicly viewable for review.
- No i18n, no theming switcher beyond existing light/dark tokens.

## Navigation aid

Add a small dev-only "Mockup pages" dropdown in the public header listing every route, so you can jump between screens during review.