From 4a6806ea30266629c1bf5fea0ddc4232c558bd8f Mon Sep 17 00:00:00 2001 From: Matthew Meszaros Date: Tue, 26 May 2026 05:19:59 +0000 Subject: [PATCH] =?UTF-8?q?site:=20DashboardMock=20now=20mirrors=20full=20?= =?UTF-8?q?/web=20shell=20=E2=80=94=20AppHeader=20(logo=20+=20crumb=20+=20?= =?UTF-8?q?PlanPill=20+=20Search),=20AppNav=20sidebar=20(LivePanel=20with?= =?UTF-8?q?=20sparkline=20+=20nav=20sections=20+=20Settings=20+=20UserNav)?= =?UTF-8?q?,=20rounded-tl-2xl=20white=20content=20panel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/src/components/DashboardMock.astro | 319 ++++++++++++++++-------- site/src/pages/index.astro | 11 +- 2 files changed, 222 insertions(+), 108 deletions(-) diff --git a/site/src/components/DashboardMock.astro b/site/src/components/DashboardMock.astro index c1898f9d..6194182e 100644 --- a/site/src/components/DashboardMock.astro +++ b/site/src/components/DashboardMock.astro @@ -1,15 +1,17 @@ --- /** - * Pixel-faithful mock of /app/emails in the Warmbly dashboard. + * Pixel-faithful mock of the Warmbly /app/emails screen. * - * Mirrors web/src/components/layout/Page.tsx primitives and the actual - * /app/emails table so visitors recognise it as the real app: - * - Sky-chrome sidebar (off-white #f5f6f8 with cloud blurs) - * - White content panel - * - PageTopbar h-12 with eyebrow + subtitle + sky CTA - * - StatStrip with 4 cells, light 26px values - * - SectionBar with search + filter - * - Account table with sky-100 avatar circles, status dots, font-mono numbers + * Maps 1:1 to the real shell: + * - web/src/components/layout/AppShell.tsx — the outer frame + * - web/src/components/layout/SkyChrome.tsx — the off-white #f5f6f8 chrome + * - web/src/components/layout/AppHeader.tsx — top breadcrumb bar (h-14) + * - web/src/components/layout/AppNav.tsx — the w-64 sidebar (LivePanel + sections) + * - web/src/app/app/emails/page.tsx — the content panel (PageTopbar/StatStrip/SectionBar/table) + * + * The white content panel meets the bottom + right edges of the frame + * and has only its inner top-left corner rounded (rounded-tl-2xl) plus + * a hairline border on the top + left edges. */ const rows = [ { email: 'founder@acme.co', sent: 37, warm: 22, status: 'healthy' }, @@ -25,108 +27,221 @@ const statusStyle = (s: string) => { if (s === 'warming') return { dot: 'bg-amber-500', text: 'text-amber-600' }; return { dot: 'bg-red-500', text: 'text-red-500' }; }; + +const navIcons: Record = { + Inbox: '', + Accounts: '', + Campaigns: '', + Contacts: '', + Analytics: '', + Pipelines: '', + Deals: '', + Tasks: '', + Templates: '', + 'API Keys': '', + 'Audit log': '', +}; + +const sidebarSections: { label: string; items: { title: string; active?: boolean; badge?: string }[] }[] = [ + { label: '', items: [ + { title: 'Inbox', badge: '12' }, + ]}, + { label: 'Email', items: [ + { title: 'Accounts', active: true }, + { title: 'Campaigns' }, + { title: 'Contacts' }, + { title: 'Analytics' }, + ]}, + { label: 'CRM', items: [ + { title: 'Pipelines' }, + { title: 'Deals' }, + { title: 'Tasks' }, + ]}, + { label: 'Resources', items: [ + { title: 'Templates' }, + { title: 'API Keys' }, + { title: 'Audit log' }, + ]}, +]; --- -
- - - -
- -
- Accounts -
- 128 mailboxes -
- -
-
- - -
- {[ - { label: 'Total', value: '128', sub: 'connected', accent: false, last: false }, - { label: 'Healthy', value: '122', sub: 'sending now', accent: true, last: false }, - { label: 'Warming', value: '6', sub: 'ramping up', accent: false, last: false }, - { label: 'Needs attention', value: '0', sub: 'paused / fail', accent: false, last: true }, - ].map((s) => ( -
-
- {s.label} - {s.accent && } + +
- ))} -
+ ))} + - -
- Mailboxes - 128 -
-
- - Search by email… + +
+
+ + Settings
-
-
+
+
+
+
Maya Okonkwo
+
Owner · Acme
+
+ +
+ - -
+ +
+ +
+ Accounts +
+ 128 mailboxes +
+ +
+
+ + +
+ {[ + { label: 'Total', value: '128', sub: 'connected', accent: false, last: false }, + { label: 'Healthy', value: '122', sub: 'sending now', accent: true, last: false }, + { label: 'Warming', value: '6', sub: 'ramping up', accent: false, last: false }, + { label: 'Needs attention', value: '0', sub: 'paused / fail', accent: false, last: true }, + ].map((s) => ( +
+
+ {s.label} + {s.accent && } +
+
{s.value}
+
{s.sub}
+
+ ))} +
+ + +
+ Mailboxes + 128 +
+
+ + Search by email… +
+ +
+
+ + @@ -142,7 +257,7 @@ const statusStyle = (s: string) => { {rows.map((r) => { const s = statusStyle(r.status); return ( - +
@@ -166,6 +281,6 @@ const statusStyle = (s: string) => { })}
-
-
+ +
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro index e494b3b3..7d11670f 100644 --- a/site/src/pages/index.astro +++ b/site/src/pages/index.astro @@ -56,15 +56,14 @@ const compare = [
-
+
-
- - - +
+