Files

Daniel Legt 9b8ef16474 feat: initialize warpbox.dev project structure and backend

Initialize the repository with the core Go backend architecture and a frontend mockup for warpbox.dev, a self-hosted file-sharing application.

- Set up Go backend modules for configuration, HTTP server, middleware, handlers, and templates.
- Add local development scripts, environment templates, and basic project configuration.
- Include a React-based frontend mockup under the docs directory.

2026-05-25 15:36:49 +03:00

3.5 KiB

Raw Blame History

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.

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

3.5 KiB Raw Blame History