Skip to content

feat: dashboard phase 1 & 2 — shell layout, routing, and overview page - #29

Merged
NehanAhmed merged 1 commit into
mainfrom
feat/dashboard-overview-phase-2
Jul 15, 2026
Merged

feat: dashboard phase 1 & 2 — shell layout, routing, and overview page#29
NehanAhmed merged 1 commit into
mainfrom
feat/dashboard-overview-phase-2

Conversation

@NehanAhmed

@NehanAhmed NehanAhmed commented Jul 15, 2026

Copy link
Copy Markdown
Owner

Phase 1 — Dashboard Shell & Navigation:

  • UI primitives: Button, Card, Input, Badge, Skeleton, Avatar, DropdownMenu
  • Theme provider with next-themes + dark/light toggle
  • Responsive sidebar with nav items and mobile drawer
  • Topbar with breadcrumbs, theme toggle, user avatar dropdown
  • AppLayout, PageHeader, ProtectedRoute, ErrorBoundary
  • Full routing structure with 13 placeholder pages

Phase 2 — Dashboard Overview:

  • Stats cards (total links, visits, active links, plan usage)
  • Recent links table with copy-to-clipboard
  • Quick-create inline URL form with animated result
  • Plan status card with subscription details
  • Loading skeletons, error state with retry, empty state with CTA

Fixes:

  • Added missing @tailwindcss/vite plugin in vite.config.ts
  • Switched dark mode from @media query to .dark class for next-themes
  • Fixed avatar dropdown positioning (relative wrapper)
  • Replaced static title with dynamic breadcrumbs

Summary by CodeRabbit

  • New Features
    • Added a complete dashboard navigation experience with protected routes, sidebar navigation, breadcrumbs, responsive layout, and mobile support.
    • Added overview insights for usage, subscriptions, recent links, and quick URL creation with copy actions.
    • Added dashboard sections for URLs, collections, tags, API keys, billing, and plans.
    • Added light/dark theme switching and user account controls.
    • Added friendly error recovery and a 404 page for invalid routes.
    • Added reusable interface components, including buttons, cards, badges, inputs, menus, avatars, and loading placeholders.
  • Documentation
    • Added specifications for the dashboard’s second development phase.

Phase 1 — Dashboard Shell & Navigation:
- UI primitives: Button, Card, Input, Badge, Skeleton, Avatar, DropdownMenu
- Theme provider with next-themes + dark/light toggle
- Responsive sidebar with nav items and mobile drawer
- Topbar with breadcrumbs, theme toggle, user avatar dropdown
- AppLayout, PageHeader, ProtectedRoute, ErrorBoundary
- Full routing structure with 13 placeholder pages

Phase 2 — Dashboard Overview:
- Stats cards (total links, visits, active links, plan usage)
- Recent links table with copy-to-clipboard
- Quick-create inline URL form with animated result
- Plan status card with subscription details
- Loading skeletons, error state with retry, empty state with CTA

Fixes:
- Added missing @tailwindcss/vite plugin in vite.config.ts
- Switched dark mode from @media query to .dark class for next-themes
- Fixed avatar dropdown positioning (relative wrapper)
- Replaced static title with dynamic breadcrumbs
@NehanAhmed
NehanAhmed merged commit 19f043c into main Jul 15, 2026
1 check failed
@coderabbitai

coderabbitai Bot commented Jul 15, 2026

Copy link
Copy Markdown

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 857b1591-6f83-42d4-8847-e8ce84a8ddf8

📥 Commits

Reviewing files that changed from the base of the PR and between 578e8e6 and 17e9988.

📒 Files selected for processing (40)
  • apps/dashboard/src/App.tsx
  • apps/dashboard/src/components/app-layout.tsx
  • apps/dashboard/src/components/error-boundary.tsx
  • apps/dashboard/src/components/overview/plan-status-card.tsx
  • apps/dashboard/src/components/overview/quick-create-form.tsx
  • apps/dashboard/src/components/overview/recent-links-list.tsx
  • apps/dashboard/src/components/overview/stats-card.tsx
  • apps/dashboard/src/components/page-header.tsx
  • apps/dashboard/src/components/protected-route.tsx
  • apps/dashboard/src/components/sidebar.tsx
  • apps/dashboard/src/components/theme-provider.tsx
  • apps/dashboard/src/components/theme-toggle.tsx
  • apps/dashboard/src/components/topbar.tsx
  • apps/dashboard/src/components/ui/avatar.tsx
  • apps/dashboard/src/components/ui/badge.tsx
  • apps/dashboard/src/components/ui/breadcrumb.tsx
  • apps/dashboard/src/components/ui/button.tsx
  • apps/dashboard/src/components/ui/card.tsx
  • apps/dashboard/src/components/ui/dropdown-menu.tsx
  • apps/dashboard/src/components/ui/input.tsx
  • apps/dashboard/src/components/ui/skeleton.tsx
  • apps/dashboard/src/hooks/use-breadcrumbs.ts
  • apps/dashboard/src/hooks/use-mobile.ts
  • apps/dashboard/src/index.css
  • apps/dashboard/src/pages/ApiKeysPage.tsx
  • apps/dashboard/src/pages/BillingPage.tsx
  • apps/dashboard/src/pages/BulkCreatePage.tsx
  • apps/dashboard/src/pages/CollectionDetailPage.tsx
  • apps/dashboard/src/pages/CollectionsListPage.tsx
  • apps/dashboard/src/pages/CreateUrlPage.tsx
  • apps/dashboard/src/pages/NotFound.tsx
  • apps/dashboard/src/pages/Overview.tsx
  • apps/dashboard/src/pages/PlansPage.tsx
  • apps/dashboard/src/pages/TagDetailPage.tsx
  • apps/dashboard/src/pages/TagsListPage.tsx
  • apps/dashboard/src/pages/UrlDetailPage.tsx
  • apps/dashboard/src/pages/UrlSettingsPage.tsx
  • apps/dashboard/src/pages/UrlsListPage.tsx
  • apps/dashboard/vite.config.ts
  • specs/02-second-phase.md

📝 Walkthrough

Walkthrough

The dashboard expands from a minimal router into a protected application with shared layout, theme handling, error recovery, reusable UI primitives, overview data interactions, and initial pages for dashboard feature areas.

Changes

Dashboard application foundation

Layer / File(s) Summary
Routing and authenticated application shell
apps/dashboard/src/App.tsx, apps/dashboard/src/components/{app-layout,error-boundary,protected-route,sidebar,theme-provider,theme-toggle,topbar}.tsx, apps/dashboard/src/hooks/*
Nested routes, authentication gating, shared navigation, breadcrumbs, responsive sidebar behavior, theme switching, and error recovery are added.
Reusable dashboard UI primitives
apps/dashboard/src/components/ui/*
Typed avatar, badge, breadcrumb, button, card, dropdown, input, and skeleton components are introduced.
Overview data and interaction flow
apps/dashboard/src/pages/Overview.tsx, apps/dashboard/src/components/overview/*
Overview metrics, subscription status, recent links, URL creation, clipboard actions, loading states, and retry handling are implemented.
Dashboard page surfaces
apps/dashboard/src/components/page-header.tsx, apps/dashboard/src/pages/*
Initial page components and headers are added for URLs, collections, tags, API keys, billing, plans, and unmatched routes.
Theme and dashboard build configuration
apps/dashboard/src/index.css, apps/dashboard/vite.config.ts, specs/02-second-phase.md
Class-based theme variables, Tailwind Vite integration, and the second-phase dashboard specification are added.

Estimated code review effort: 4 (Complex) | ~60 minutes

Sequence Diagram(s)

sequenceDiagram
  participant OverviewPage
  participant DashboardAPI
  participant QuickCreateForm
  participant RecentLinksList
  OverviewPage->>DashboardAPI: Fetch usage, subscription, and recent URLs
  QuickCreateForm->>OverviewPage: Submit normalized URL
  OverviewPage->>DashboardAPI: Create short URL
  OverviewPage->>DashboardAPI: Refresh overview data
  OverviewPage->>RecentLinksList: Render refreshed URLs
Loading

Possibly related PRs

  • NehanAhmed/linkify#26: Introduces the dashboard foundation that this PR expands with the full protected route tree.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/dashboard-overview-phase-2

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant