Implement editor shell layout

[daikictrl]

Summary by CodeRabbit

• New Features
  • Added editor navigation bar with collapsible sidebar toggle
  • Introduced project sidebar with "My Projects" and "Shared" tabs
  • Added new project button in the project sidebar
  • Restructured application layout to support the editor interface shell

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: a50aea79-278e-4e08-b5bd-f9bc782d0482

📥 Commits

Reviewing files that changed from the base of the PR and between 310224b and f5b4b37.

📒 Files selected for processing (7)

• app/layout.tsx
• app/page.tsx
• components/editor/editor-layout.tsx
• components/editor/editor-navbar.tsx
• components/editor/project-sidebar.tsx
• context/feature-spec/02-editor.md
• context/progress-tracker.md

---

📝 Walkthrough

Walkthrough

Introduces editor shell UI components (EditorNavbar, ProjectSidebar, EditorLayout) with sidebar state management, integrates them into the root layout, and adjusts page sizing. Includes feature specification and progress documentation.

Changes

Editor Shell Foundation

Layer / File(s)	Summary
Component Props & Types components/editor/editor-navbar.tsx, components/editor/project-sidebar.tsx, components/editor/editor-layout.tsx	Defines EditorNavbarProps (sidebar open state + toggle handler), ProjectSidebarProps (open state + close handler), and EditorLayoutProps (children).
NavBar Component components/editor/editor-navbar.tsx	Renders fixed header with sidebar toggle button; icon and aria-label change based on isSidebarOpen; click calls onSidebarToggle.
Sidebar Component components/editor/project-sidebar.tsx	Renders slide-in/out projects panel with tabbed content ("My Projects", "Shared") using EmptyProjectState, header with close button, and bottom "New Project" button; toggles visibility via isOpen.
Layout Composition components/editor/editor-layout.tsx	Client component managing isSidebarOpen state; wires navbar toggle and sidebar close handlers; renders navbar, sidebar, and scrollable content area.
App-Level Integration app/layout.tsx, app/page.tsx	RootLayout wraps children with EditorLayout; Home component height class changes from min-h-screen to h-full for proper sizing within layout.
Documentation & Specs context/feature-spec/02-editor.md, context/progress-tracker.md	Feature spec defines navbar and sidebar UI requirements, outlines future dialog pattern, and provides completion checklist; progress tracker documents completed editor shell tasks and implementation notes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

A shell blooms bright with toggle and grace,
The navbar stands tall in its rightful place,
The sidebar slides left with smooth appeal,
The editor layout makes all feel real!
~ 🐰 ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 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 (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Implement editor shell layout' directly and clearly summarizes the main change—adding a new editor shell layout with navbar, sidebar, and layout components.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ 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 development

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

_{Review rate limit: 9/10 reviews remaining, refill in 6 minutes.}

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