Dashboard Redesign — App Shell with Sidebar + Detail Panel

Date: 2026-03-09 Inspiration: Lemon Squeezy (playful, approachable), Linear (sidebar app shell), Vercel (micro-interactions) Approach: Sidebar app shell with selected-waitlist detail panel, dual light/dark themes

1. Overall Layout: App Shell

Transform the dashboard from a page into an app shell. Left sidebar lists all waitlists. Selecting one loads its detail panel on the right.

┌─────────────────────────────────────────────────────────────────┐
│  [Logo] MakeEmWait              [?Help] [⚙Settings] [👤Avatar] │
├──────────────┬──────────────────────────────────────────────────┤
│              │                                                  │
│  WAITLISTS   │  Main content panel                              │
│  ──────────  │  (changes based on selection)                    │
│  ● Beta      │                                                  │
│  ○ Launch    │                                                  │
│  ○ VIP       │                                                  │
│              │                                                  │
│  [+ Create]  │                                                  │
│              │                                                  │
│  ──────────  │                                                  │
│  Plan: Pro   │                                                  │
│  6d trial    │                                                  │
│              │                                                  │
├──────────────┤                                                  │
│  [Analytics] │                                                  │
│  [Templates] │                                                  │
│  [Domains]   │                                                  │
│  [Team]      │                                                  │
│  [Account]   │                                                  │
└──────────────┴──────────────────────────────────────────────────┘

2. Main Panel — Selected Waitlist View

When a waitlist is selected:

Header Row

KPI Row (3 cards)

Quick Actions Row

Activity Feed

3. Overview State (No Waitlist Selected)

Shown on first load when user has 1+ waitlists but none is selected:

4. Empty State (Zero Waitlists)

Full-width centered empty state:

5. Dual Theme System

Implementation

CSS custom properties scoped under [data-theme="dark"] and [data-theme="light"] on <html>.

Auto-detect on load:

var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
document.documentElement.setAttribute("data-theme", prefersDark ? "dark" : "light");

Listen for OS theme changes:

window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function(e) {
  document.documentElement.setAttribute("data-theme", e.matches ? "dark" : "light");
});

Dark Theme (refined from current)

Light Theme (new, Lemon Squeezy–inspired)

Shared (both themes)

6. Micro-interactions & Polish

Animated Counters

When stat card values load, animate them counting up from 0 using requestAnimationFrame. Duration: 600ms with ease-out. ~15 lines of vanilla JS.

Button Press Feedback

.btn:active { transform: scale(0.97); transition: transform 80ms ease; }

Activity Feed Entrance

Items stagger-fade in: opacity: 0 → 1 + translateY(8px) → 0 with 50ms delays.

Welcome Banner Dismiss

Animated: opacity → 0, transform: translateY(-8px), then remove after 300ms. Persists via localStorage.

prefers-reduced-motion

All animations disabled:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Typography

7. Responsive Behavior

Desktop (≥1024px)

Tablet (768px–1023px)

Mobile (< 768px)

8. Backend Changes

None. The activity feed uses the existing GET /waitlists/{id}/admin/signups?limit=10 endpoint. Overview KPIs use the existing GET /waitlists response data. No new endpoints needed.

9. Files Impacted

File Changes Scope
docs/assets/css/style.css Light theme vars, sidebar layout, detail panel, activity feed, responsive breakpoints High
docs/dashboard.html Full restructure to sidebar + main panel layout High
docs/assets/js/dashboard.js Sidebar selection state, activity feed, animated counters, overview/detail views High
docs/assets/js/app.js Theme detection/toggle, animated counter utility, theme listener Low

10. Design Principles

  1. App shell, not page — the sidebar persists, content changes. Feels like an app.
  2. Data near actions — KPIs and action buttons live next to each other for the selected waitlist
  3. Activity gives life — the feed makes the dashboard feel alive, not static
  4. Dual themes as a signal of quality — respecting OS preference feels premium
  5. Progressive disclosure — overview → select waitlist → detail → deep analytics
  6. Animated numbers tell stories — counting up creates a moment of delight
  7. Accessible by default — reduced motion, focus-visible, proper contrast ratios