64 lines
3.5 KiB
Markdown
64 lines
3.5 KiB
Markdown
|
# 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.
|