feat: codex inspired dark theme ui redesign with layout fixes#75
Merged
feat: codex inspired dark theme ui redesign with layout fixes#75
Conversation
- Update CSS variables for darker background (#121212) and subtle grays - Increase border-radius from 4px to 8px for modern rounded corners - Standardize hover/focus states to use bg-secondary across components - Update all UI components for consistent styling: - button, card, input, select, dialog, dropdown-menu - tabs, tooltip, scroll-area, sidebar, context-menu - menubar, navigation-menu - Refresh ProjectSidebar and WorkspaceLayout layouts - Update TitleBar with consistent styling Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove border-r from ProjectSidebar, add rounded-xl with margin - Add rounded-xl to FileExplorer container with margin - Add rounded-xl to main content area in WorkspaceLayout - Add rounded-xl to terminal pane content area - Creates floating card-style panels matching Codex reference Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Move FileExplorer outside ResizablePanelGroup to be sibling of main content - Fix FileExplorer to have fixed width (w-64) like ProjectSidebar - Creates proper visual hierarchy: background -> sidebar -> main content -> file explorer - All panels now float separately with rounded corners Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Wrap center content in flex-1 min-w-0 container - Wrap file explorer in flex-shrink-0 container - Prevents overlap between main content and right sidebar Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Move FileExplorer outside main element to be sibling - Main content: flex-1 with m-2 mr-0 (margin only on left) - FileExplorer: flex-shrink-0 with w-64, m-2 (margin only on right) - Creates proper floating panels at same level: ProjectSidebar | MainContent | FileExplorer - Remove rounded-xl m-1 from PaneContent to prevent overflow Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Move padding to parent container (p-2) instead of individual margins - Add h-full to all containers for proper flex height propagation - Fix terminal blank screen by ensuring proper height chain - Add gap between panels using ml-2/mr-2 instead of m-2 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Show "Connecting..." loading state instead of blank when PTY ID is pending - Prevent Ctrl+B from toggling file explorer when xterm terminal is focused - Add overflow-hidden and min-w-0 to prevent main content width overflow Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the 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. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThis PR applies a Codex dark theme and larger corner radii across many UI primitives, refactors the workspace into multi-panel layout with a floating FileExplorer, and adds keyboard/terminal-context guards for panel shortcuts. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant WorkspaceLayout
participant FileExplorer
participant MainContent
participant Terminal
User->>WorkspaceLayout: press toggle shortcut / interact
WorkspaceLayout->>Terminal: detect target (closest('.xterm')) → isInTerminal?
alt In terminal
WorkspaceLayout-->>User: ignore toggle (no panel change)
else Not in terminal
WorkspaceLayout->>FileExplorer: toggle visibility (render floating panel)
WorkspaceLayout->>MainContent: ensure main area rendered (h-full)
MainContent->>Terminal: if no PTY and active -> render "Connecting..." placeholder
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
gnoviawan
changed the title
gnoviawan
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/renderer/components/ui/context-menu.tsx (1)
28-28: Minor radius inconsistency between SubTrigger and Item components.
ContextMenuSubTriggerusesrounded-md(Line 28) whileContextMenuItemusesrounded-sm(Line 81). Similarly,ContextMenuCheckboxItemandContextMenuRadioItemretainrounded-sm. This creates a subtle visual inconsistency within the menu.Consider aligning all interactive menu items to the same radius for visual consistency.
Also applies to: 81-81
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/renderer/components/ui/context-menu.tsx` at line 28, ContextMenuSubTrigger currently uses "rounded-md" while ContextMenuItem, ContextMenuCheckboxItem, and ContextMenuRadioItem use "rounded-sm", causing a visual mismatch; update the class string in ContextMenuSubTrigger (the component named ContextMenuSubTrigger) to use "rounded-sm" so all interactive menu items share the same border radius, and verify the classNames for ContextMenuItem, ContextMenuCheckboxItem, and ContextMenuRadioItem remain "rounded-sm" for consistency.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/renderer/components/ui/tabs.tsx`:
- Line 30: The active tab styling uses data-[state=active]:bg-card which can
match parent Card backgrounds (loss of contrast); update the Tabs component's
class string in src/renderer/components/ui/tabs.tsx to use a darker/more
distinct token (e.g., data-[state=active]:bg-background or a newly defined
data-[state=active]:bg-muted) so active tabs remain distinguishable when
rendered inside TerminalTabBar and WorkspaceTabBar; adjust the token name
consistently where Tabs is used so the active state uses the chosen surface
token.
In `@src/renderer/layouts/WorkspaceLayout.tsx`:
- Line 395: Split terminal focus out of the generic isInEditor check: remove
'.xterm' from the isInEditor assignment and add a new boolean (e.g.,
isInTerminal = !!target.closest('.xterm')). Use isInEditor for editor/IDE
shortcut guards only, and use isInTerminal only for the Ctrl+B/file-explorer
guard (where the terminal should be excluded from opening/closing the explorer).
Update the shortcut handling conditions that currently reference isInEditor (the
global shortcut-skip checks) to not skip when isInTerminal is true, leaving
ConnectedTerminal's own routing intact.
---
Nitpick comments:
In `@src/renderer/components/ui/context-menu.tsx`:
- Line 28: ContextMenuSubTrigger currently uses "rounded-md" while
ContextMenuItem, ContextMenuCheckboxItem, and ContextMenuRadioItem use
"rounded-sm", causing a visual mismatch; update the class string in
ContextMenuSubTrigger (the component named ContextMenuSubTrigger) to use
"rounded-sm" so all interactive menu items share the same border radius, and
verify the classNames for ContextMenuItem, ContextMenuCheckboxItem, and
ContextMenuRadioItem remain "rounded-sm" for consistency.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: b83462b0-efb3-42dc-94fb-4c9e8f6de223
📒 Files selected for processing (23)
src/renderer/components/ProjectSidebar.tsxsrc/renderer/components/TitleBar.tsxsrc/renderer/components/file-explorer/FileExplorer.tsxsrc/renderer/components/ui/button.tsxsrc/renderer/components/ui/card.tsxsrc/renderer/components/ui/context-menu.tsxsrc/renderer/components/ui/dialog.tsxsrc/renderer/components/ui/dropdown-menu.tsxsrc/renderer/components/ui/input.tsxsrc/renderer/components/ui/menubar.tsxsrc/renderer/components/ui/navigation-menu.tsxsrc/renderer/components/ui/resizable.tsxsrc/renderer/components/ui/scroll-area.tsxsrc/renderer/components/ui/select.tsxsrc/renderer/components/ui/sidebar.tsxsrc/renderer/components/ui/tabs.tsxsrc/renderer/components/ui/tooltip.tsxsrc/renderer/components/workspace/EditorTab.tsxsrc/renderer/components/workspace/PaneContent.tsxsrc/renderer/components/workspace/WorkspaceTabBar.tsxsrc/renderer/index.csssrc/renderer/layouts/WorkspaceLayout.tsxsrc/renderer/pages/AppPreferences.tsx
…s, version label - Change active tab bg from bg-card to bg-muted for contrast - Split xterm out of isInEditor into separate isInTerminal boolean - Fix ContextMenuSubTrigger rounded-md to rounded-sm for consistency - Replace bottom New Project button with Termul version label Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/renderer/layouts/WorkspaceLayout.tsx (1)
444-453:⚠️ Potential issue | 🟠 MajorDon't block the configurable sidebar shortcut in xterm.
The terminal-specific exclusion should stay limited to the hardcoded file-explorer toggle. With
!isInTerminalhere,sidebarTogglestill no-ops whenever focus is inside xterm, even though the later global skip intentionally allows terminal-focused app shortcuts through.Suggested fix
if (matchesShortcut(e, getActiveKey('sidebarToggle'))) { - if (!isInEditor && !isInInput && !isInTerminal) { + if (!isInEditor && !isInInput) { e.preventDefault() e.stopPropagation() void updatePanelVisibility('sidebarVisible', !isSidebarVisible).catch((error) => {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/renderer/layouts/WorkspaceLayout.tsx` around lines 444 - 453, The current handler prevents the configurable sidebarToggle from firing when focus is in xterm because it checks !isInTerminal; remove the terminal check from this condition so the shortcut can run while terminal-focused—i.e., in the matchesShortcut(getActiveKey('sidebarToggle')) branch only require !isInEditor && !isInInput before calling updatePanelVisibility (keep the existing updatePanelVisibility, isSidebarVisible and toast error handling unchanged), and leave any separate, hardcoded file-explorer toggle logic that needs isInTerminal intact.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/renderer/layouts/WorkspaceLayout.tsx`:
- Around line 881-888: The FileExplorer is mounted whenever isExplorerVisible is
true, which can display a previous project's tree after activeProject is removed
because the root-path sync only sets when activeProject?.path is a string and
never clears it; update the render condition to also check that
activeProject?.path is a non-empty string (or that activeProject is truthy)
before rendering FileExplorer (i.e., change the conditional around <FileExplorer
/> to require both isExplorerVisible and activeProject/path), and also adjust
the root-path sync logic that reads activeProject?.path to explicitly clear the
explorer root when activeProject becomes null so FileExplorer and any
PaneDndProvider state are not left showing stale data.
---
Duplicate comments:
In `@src/renderer/layouts/WorkspaceLayout.tsx`:
- Around line 444-453: The current handler prevents the configurable
sidebarToggle from firing when focus is in xterm because it checks
!isInTerminal; remove the terminal check from this condition so the shortcut can
run while terminal-focused—i.e., in the
matchesShortcut(getActiveKey('sidebarToggle')) branch only require !isInEditor
&& !isInInput before calling updatePanelVisibility (keep the existing
updatePanelVisibility, isSidebarVisible and toast error handling unchanged), and
leave any separate, hardcoded file-explorer toggle logic that needs isInTerminal
intact.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 72ac31ca-e0fe-4c9d-a070-dcf18b36a357
📒 Files selected for processing (4)
src/renderer/components/ProjectSidebar.tsxsrc/renderer/components/ui/context-menu.tsxsrc/renderer/components/ui/tabs.tsxsrc/renderer/layouts/WorkspaceLayout.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- src/renderer/components/ui/tabs.tsx
- src/renderer/components/ProjectSidebar.tsx
- src/renderer/components/ui/context-menu.tsx
…le in terminal - Clear explorer root path when activeProject becomes null - Guard FileExplorer render on activeProject?.path being truthy - Remove isInTerminal check from configurable sidebarToggle shortcut Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…ect button Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/renderer/layouts/WorkspaceLayout.tsx`:
- Around line 125-132: The code treats only non-strings as a teardown, allowing
an empty string path to fall through and call watchDirectory('') while leaving
watchedRootPathRef.current and prevProjectIdRef.current in a state that can leak
watchers or block re-init; change the guard around nextRootPathCandidate to
require a non-empty string (e.g. if (!activeProject || typeof
nextRootPathCandidate !== 'string' || nextRootPathCandidate === '') ), and in
that branch clear the explorer root via
useFileExplorerStore.getState().setRootPath(''), stop/remove/reset any existing
watcher state by clearing watchedRootPathRef.current (and calling whatever
unwatch/cleanup is appropriate), set prevProjectIdRef.current = activeProjectId,
and return so watchDirectory is only invoked when nextRootPathCandidate is a
non-empty path and different from watchedRootPathRef.current.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: a4f3d0d8-39e0-4cf5-9882-55444e0b11ba
📒 Files selected for processing (1)
src/renderer/layouts/WorkspaceLayout.tsx
…e watcher Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
gnoviawan
added a commit
that referenced
this pull request
Mar 12, 2026
Three issues prevented tab DnD from working: 1. Tauri's dragDropEnabled defaults to true, which intercepts all drag events at the native WebView2 level on Windows, preventing HTML5 DnD events from reaching the DOM. Set to false in tauri.conf.json. 2. PR #75 split PaneDndProvider into two separate instances (one for PaneRenderer, one for FileExplorer), so isDragging state set in one provider was invisible to children of the other. Reunified into a single provider wrapping both. 3. The tab bar container div lacked an onDragOver handler, causing the browser to show a no-drop cursor when dragging over gaps between tabs. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
7 tasks
gnoviawan
added a commit
that referenced
this pull request
Mar 12, 2026
Three issues prevented tab DnD from working: 1. Tauri's dragDropEnabled defaults to true, which intercepts all drag events at the native WebView2 level on Windows, preventing HTML5 DnD events from reaching the DOM. Set to false in tauri.conf.json. 2. PR #75 split PaneDndProvider into two separate instances (one for PaneRenderer, one for FileExplorer), so isDragging state set in one provider was invisible to children of the other. Reunified into a single provider wrapping both. 3. The tab bar container div lacked an onDragOver handler, causing the browser to show a no-drop cursor when dragging over gaps between tabs. Co-authored-by: Claude Opus 4.6 <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
Full UI redesign with Codex dark theme aesthetic, plus layout and terminal fixes.
UI Redesign
File Explorer Restructure
Layout & Terminal Fixes
overflow-hiddenandmin-w-0to content container to fix horizontal overflowSidebar
Test plan
🤖 Generated with Claude Code
Summary by CodeRabbit
Style
Layout
Bug Fixes