feat(consumer-saas): add sidebar layout, theme switcher, and projects dashboard#5
Merged
Merged
Conversation
Design for sidebar layout (Claude Code style), theme system, GitHub integration, and Supabase projects storage. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
… dashboard Implements Claude Code-style sidebar layout for consumer SaaS transformation: Layout Components: - SidebarLayout.tsx - Main app layout with collapsible sidebar - Sidebar.tsx - Project list with status indicators and filters - TopBar.tsx - Logo, repo selector, theme toggle, user menu - ThemeSwitcher.tsx - Arcade (green terminal) / Enterprise (blue) themes - UserMenu.tsx - Avatar dropdown with profile/settings/logout Theme System: - Arcade theme: Terminal green (#00ff00) on black background - Enterprise theme: Professional blue (#3b82f6) with light/dark variants - CSS variables in globals.css for seamless theme switching - localStorage persistence for instant theme application Projects Feature: - ProjectsService.ts - CRUD operations via Supabase - ProjectList.tsx / ProjectCard.tsx - Sidebar project display - RepoSelector.tsx - GitHub repo dropdown in top bar - CreateProjectModal.tsx - New project creation form - Supabase migration for projects and project_builds tables Dashboard: - QuickActions.tsx - New Project, Continue Last, Import, Templates - Dashboard page with welcome message and recent activity Routing: - Updated middleware to show dashboard instead of redirect to /chat - App Router route groups prepared for (app) and (auth) layouts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| 'there' | ||
|
|
||
| return ( | ||
| <SidebarLayout> |
There was a problem hiding this comment.
logic: Duplicate SidebarLayout wrapper. The (app)/layout.tsx route group already wraps children in SidebarLayout, so this page (which should be served from the (app) route group) will have nested sidebars. Consider removing this wrapper since the layout handles it.
Suggested change
| <SidebarLayout> | |
| <div className="p-6"> |
Prompt To Fix With AI
This is a comment left during a code review.
Path: src/app/page.tsx
Line: 27:27
Comment:
**logic:** Duplicate `SidebarLayout` wrapper. The `(app)/layout.tsx` route group already wraps children in `SidebarLayout`, so this page (which should be served from the `(app)` route group) will have nested sidebars. Consider removing this wrapper since the layout handles it.
```suggestion
<div className="p-6">
```
How can I resolve this? If you propose a fix, please make it concise.
Comment on lines
+29
to
+31
| useEffect(() => { | ||
| loadProject() | ||
| }, [projectId]) |
There was a problem hiding this comment.
style: React hook useEffect has a missing dependency. The loadProject function should either be added to dependencies or wrapped in useCallback.
Suggested change
| useEffect(() => { | |
| loadProject() | |
| }, [projectId]) | |
| useEffect(() => { | |
| loadProject() | |
| }, [projectId]) // eslint-disable-line react-hooks/exhaustive-deps |
Prompt To Fix With AI
This is a comment left during a code review.
Path: src/app/(app)/projects/[id]/page.tsx
Line: 29:31
Comment:
**style:** React hook `useEffect` has a missing dependency. The `loadProject` function should either be added to dependencies or wrapped in `useCallback`.
```suggestion
useEffect(() => {
loadProject()
}, [projectId]) // eslint-disable-line react-hooks/exhaustive-deps
```
How can I resolve this? If you propose a fix, please make it concise.
Comment on lines
+27
to
+31
| useEffect(() => { | ||
| if (isGitHubConnected && dropdownOpen && repos.length === 0) { | ||
| loadRepos() | ||
| } | ||
| }, [isGitHubConnected, dropdownOpen]) |
There was a problem hiding this comment.
style: The useEffect has missing dependencies: repos.length and loadRepos. This can cause stale closure issues. Also, the loadRepos function is never called since repos is always empty.
Suggested change
| useEffect(() => { | |
| if (isGitHubConnected && dropdownOpen && repos.length === 0) { | |
| loadRepos() | |
| } | |
| }, [isGitHubConnected, dropdownOpen]) | |
| useEffect(() => { | |
| if (isGitHubConnected && dropdownOpen && repos.length === 0) { | |
| loadRepos() | |
| } | |
| }, [isGitHubConnected, dropdownOpen, repos.length]) |
Prompt To Fix With AI
This is a comment left during a code review.
Path: src/components/projects/RepoSelector.tsx
Line: 27:31
Comment:
**style:** The `useEffect` has missing dependencies: `repos.length` and `loadRepos`. This can cause stale closure issues. Also, the `loadRepos` function is never called since `repos` is always empty.
```suggestion
useEffect(() => {
if (isGitHubConnected && dropdownOpen && repos.length === 0) {
loadRepos()
}
}, [isGitHubConnected, dropdownOpen, repos.length])
```
How can I resolve this? If you propose a fix, please make it concise.
ScientiaCapital
added a commit
that referenced
this pull request
Jan 18, 2026
… dashboard (#5) * docs: add consumer SaaS design document Design for sidebar layout (Claude Code style), theme system, GitHub integration, and Supabase projects storage. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * feat(consumer-saas): add sidebar layout, theme switcher, and projects dashboard Implements Claude Code-style sidebar layout for consumer SaaS transformation: Layout Components: - SidebarLayout.tsx - Main app layout with collapsible sidebar - Sidebar.tsx - Project list with status indicators and filters - TopBar.tsx - Logo, repo selector, theme toggle, user menu - ThemeSwitcher.tsx - Arcade (green terminal) / Enterprise (blue) themes - UserMenu.tsx - Avatar dropdown with profile/settings/logout Theme System: - Arcade theme: Terminal green (#00ff00) on black background - Enterprise theme: Professional blue (#3b82f6) with light/dark variants - CSS variables in globals.css for seamless theme switching - localStorage persistence for instant theme application Projects Feature: - ProjectsService.ts - CRUD operations via Supabase - ProjectList.tsx / ProjectCard.tsx - Sidebar project display - RepoSelector.tsx - GitHub repo dropdown in top bar - CreateProjectModal.tsx - New project creation form - Supabase migration for projects and project_builds tables Dashboard: - QuickActions.tsx - New Project, Continue Last, Import, Templates - Dashboard page with welcome message and recent activity Routing: - Updated middleware to show dashboard instead of redirect to /chat - App Router route groups prepared for (app) and (auth) layouts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Transform AI Development Cockpit into a consumer-friendly SaaS with a polished sidebar-based layout (Claude Code style) that makes it accessible for family members to build apps using plain English.
Key Features
Files Changed (20 files, +1,998 lines)
Theme CSS Variables
Test Plan
Screenshots
Themes were visually verified during development (Arcade green, Enterprise blue).
🤖 Generated with Claude Code
Greptile Overview
Greptile Summary
This PR introduces a consumer-friendly SaaS interface for the AI Development Cockpit with a Claude Code-inspired sidebar layout.
(app)route group withSidebarLayout,TopBar, collapsibleSidebar, andUserMenucomponentsProjectsServicewith Supabase integrationprojectsandproject_buildstables with proper RLS policies and indexesRepoSelectorcomponent ready for OAuth repository selection (currently placeholder implementation)Issues Found:
SidebarLayoutwrapper insrc/app/page.tsxthat will cause nested sidebars since the route group layout already provides thisuseEffectcallsConfidence Score: 4/5
src/app/page.tsx- has duplicate SidebarLayout wrapper that conflicts with route group layoutImportant Files Changed
File Analysis
showCreateModalstate that isn't connected to any UI trigger.Sequence Diagram
sequenceDiagram participant User participant Dashboard as Dashboard Page participant Sidebar participant ProjectsService participant Supabase participant ThemeSwitcher User->>Dashboard: Navigate to / Dashboard->>Sidebar: Render SidebarLayout Sidebar->>ProjectsService: listProjects() ProjectsService->>Supabase: SELECT * FROM projects Supabase-->>ProjectsService: projects[] ProjectsService-->>Sidebar: projects[] Sidebar-->>Dashboard: Render ProjectList User->>ThemeSwitcher: Toggle theme ThemeSwitcher->>ThemeSwitcher: applyTheme() ThemeSwitcher->>ThemeSwitcher: localStorage.setItem() User->>Dashboard: Click "New Project" Dashboard->>Dashboard: Open CreateProjectModal User->>Dashboard: Submit form Dashboard->>ProjectsService: createProject() ProjectsService->>Supabase: INSERT INTO projects Supabase-->>ProjectsService: project ProjectsService-->>Dashboard: project Dashboard->>User: Navigate to /projects/{id}