feat: Workspace UI overhaul — generate layout, dashboard stats, templates, auth

[LucasSantana-Dev]

Summary

• Generate page: Restructured from 3-column grid to 2-column workspace (config panel + tabbed output) with collapsible config, empty state, and IDE-like layout
• Dashboard: Added real generation/project stats from useSubscription, plan badge, usage progress bars with color thresholds, upgrade CTA for free users
• Template gallery: Redesigned cards with gradient preview area, framework-colored badges, hover overlay, official badge, difficulty dots
• Auth pages: Fixed AuthCardShell glow (bg-primary/20 was invisible), violet buttons with purple glow, violet focus rings and links

Test plan

• Generate page: verify 2-column layout at lg+ breakpoint, config panel collapses/expands, Preview/Code tabs switch correctly
• Dashboard: verify stat cards show real data, usage bars render, plan badge shows correct tier
• Templates: verify new card design renders with gradient backgrounds, hover preview overlay works
• Auth: verify violet glow on auth card background, violet button styling on signin/signup
• Mobile: verify single-column fallback on generate page
• Run npm test to verify no regressions

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Split-pane workspace for generation with toggleable config panel
  • Preview and code output tabs for generated content
  • Monthly usage visualization with plan-based indicators
  • Enhanced template discovery with preview overlays and difficulty badges

• UI Improvements

  • Redesigned dashboard with new metrics (Generations, Templates, AI Keys)
  • Visual theme refresh across authentication and dashboard pages
  • Reorganized generation interface with improved layout
  • Enhanced template cards with official badges and framework indicators

[coderabbitai]

Warning

Rate limit exceeded

@LucasSantana-Dev has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 9 minutes and 46 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 4a24dc27-1bd0-4da7-9ba8-682ef30d1964

📥 Commits

Reviewing files that changed from the base of the PR and between aee636e and d4cc6b7.

📒 Files selected for processing (7)

• apps/web/src/app/(auth)/signin/signin-client.tsx
• apps/web/src/app/(auth)/signup/signup-client.tsx
• apps/web/src/app/(dashboard)/dashboard/dashboard-client.tsx
• apps/web/src/app/(dashboard)/generate/generate-client.tsx
• apps/web/src/app/(dashboard)/templates/templates-client.tsx
• apps/web/src/components/migration/migration-primitives.tsx
• apps/web/src/components/templates/TemplateCard.tsx

Walkthrough

This PR transitions the application UI theme from primary/brand blue to violet colors across authentication and dashboard pages. Key functional additions include subscription data integration in the dashboard with usage visualization, a significant restructuring of the generation interface into a two-pane layout with tabbed output, and a visual redesign of template cards with dynamic gradient headers and metadata badges.

Changes

Cohort / File(s)	Summary
Authentication Theme Updates apps/web/src/app/(auth)/signin/signin-client.tsx, apps/web/src/app/(auth)/signup/signup-client.tsx	Styling updates transitioning email/password inputs, buttons, and links from primary/blue color palette to violet tones with adjusted hover states and shadows.
Dashboard Feature & UI Expansion apps/web/src/app/(dashboard)/dashboard/dashboard-client.tsx	Integrates useSubscription hook; introduces UsageBar component for monthly usage visualization with dynamic color coding; adds plan badge and framework badges to project cards; expands StatCard grid with Generations, Templates, and AI Keys metrics; adds Usage This Month section with conditional upgrade CTA; updates styling to violet theme.
Generation Interface Refactor apps/web/src/app/(dashboard)/generate/generate-client.tsx	Restructures layout from single-column to two-pane (left config panel, right output); introduces OutputTab state for Preview/Code switching; adds generation history sheet; integrates refinement input and feedback panel in bottom bar with GitHub push workflow; updates GenerateLoadingSkeleton to reflect split-view structure; transitions styling to violet theme.
Templates Theme & Display Updates apps/web/src/app/(dashboard)/templates/templates-client.tsx	Updates conditional classNames across filter tabs, selection buttons, and pagination from brand color tokens to violet/purple (border-violet-500, bg-violet-500/15, text-violet-300).
Template Card Visual Redesign apps/web/src/components/templates/TemplateCard.tsx	Replaces Card-based layout with group-card featuring gradient preview header (determined by category); introduces official badge with Sparkles icon; adds framework color badges and difficulty indicator dots; displays name, description, tags, and conditional rating; implements preview overlay on hover with centered Eye icon button.
Shared Component Theme Updates apps/web/src/components/migration/migration-primitives.tsx	Updates decorative background element from primary blue to violet color palette with adjusted opacity.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant GeneratorForm as Generator Form<br/>(Left Panel)
    participant OutputManager as Output Manager<br/>(Preview/Code Tabs)
    participant Refinement as Refinement Input<br/>(Bottom Bar)
    participant GitHub as GitHub<br/>(External)

    User->>GeneratorForm: Configure generation settings
    GeneratorForm->>OutputManager: Trigger generate/load output
    OutputManager->>OutputManager: Render preview or code based on activeTab
    
    User->>OutputManager: Toggle between Preview & Code tabs
    OutputManager->>OutputManager: Switch tab state & re-render content
    
    User->>Refinement: Submit refinement feedback
    Refinement->>OutputManager: Update output based on feedback
    OutputManager->>OutputManager: Re-render current tab view
    
    User->>Refinement: Trigger GitHub push
    Refinement->>GitHub: Send save/push request with PR details
    GitHub-->>Refinement: Confirm success or error state
    Refinement->>User: Display PR URL & status

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Possibly related PRs

• feat: Polish template library with filters and code cleanup #118: Updates templates UI components (templates-client.tsx and TemplateCard.tsx) with metadata changes (isOfficial field) and template preview/code formatting modifications.
• feat: Restructure generation UI with tab-based form and dark theme fixes #241: Restructures the generation interface with split-pane layout and tabs, directly overlapping with the major UI refactor in generate-client.tsx.
• feat: Add loading skeletons to dashboard pages #279: Modifies GenerateLoadingSkeleton and skeleton-based placeholders to align with the new split-view structure introduced in this PR.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main changes: a comprehensive UI overhaul affecting the generate layout, dashboard stats, templates, and authentication pages.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/workspace-ui-overhaul

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}