Add settings tab to top bar for easier navigation

[AviPeltz]

• Settings now appears as a tab in the top bar when opened
• Clicking workspace tabs switches away from settings but keeps the settings tab visible
• Clicking the settings tab switches back to settings view
• X button on settings tab closes it completely
• Workspace tabs deselect when settings view is active
• Minor adjustment to workspace dropdown button positioning

🤖 Generated with Claude Code

Description

Related Issues

Type of Change

• Bug fix
• New feature
• Documentation
• Refactor
• Other (please describe):

Testing

Screenshots (if applicable)

Additional Notes

Summary by CodeRabbit

Release Notes

• New Features

  • Settings is now accessible as a dedicated tab in the workspace tabs area for easier access.
  • Added a dedicated close button for dismissing the settings panel.

• Improvements

  • Settings automatically close when switching between workspaces.
  • Enhanced visual distinction between active and inactive settings states.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
website	Ready	Preview	Comment	Dec 1, 2025 7:20pm

[coderabbitai]

Walkthrough

This pull request introduces a settings tab feature to the workspace tabs UI. A new SettingsTab component is added, state management is extended to track when the settings tab is open, and the workspace tabs system is updated to render and integrate this new tab alongside workspace groups.

Changes

Cohort / File(s)	Summary
Settings Tab Component apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/SettingsTab.tsx	New React component renders a settings tab with a cog icon button. Includes a close button to dismiss the tab. Styling adapts based on active state with distinct visual appearance and hover behavior.
App State Management apps/desktop/src/renderer/stores/app-state.ts	Adds isSettingsTabOpen boolean state flag and closeSettingsTab() action to manage settings tab visibility. Updates openSettings to set the tab open flag. Exports two new hooks: useIsSettingsTabOpen() and useCloseSettingsTab().
Workspace Tabs Integration apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/index.tsx	Imports new state hooks and SettingsTab component. Conditionally renders SettingsTab when open, nullifies active workspace ID during settings view, and maintains layout spacing with visual separator when workspace groups exist.
Workspace Item Enhancement apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceItem.tsx	Adds useCloseSettings hook and closes settings tab on workspace activation via onMouseDown handler (except during rename operations).
Workspace Dropdown Styling apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx	Adds mt-1 margin class to button, adjusting vertical alignment.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• app-state.ts: Verify state initialization, hook exports, and integration with openSettings logic; ensure closeSettingsTab correctly resets state
• SettingsTab.tsx: Review component structure, event propagation handling, and active/idle styling logic
• index.tsx: Validate conditional rendering logic, null-check for active workspace during settings view, and layout spacing behavior

Possibly related PRs

• Move workspace dropdown button next to tab group #210 — Modifies WorkspaceTabs layout and workspace dropdown/button placement, directly related to tab rendering changes
• tabs mangement interaction #105 — Modifies WorkspaceTabs components and app-state for settings-open state management, core feature overlap
• xterm ui #115 — Modifies WorkspaceItem.tsx with cursor behavior changes, shares file-level modifications

Poem

🐰 A settings cog now nestles in the tabs so neat,
With clickity-close and a visual treat,
When workspaces dance and the settings align,
The state keeps them synced—a masterpiece fine!
Hopfully yours, in code we confide,
Your UI just got a stylish stride! ✨

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: adding a settings tab to the top bar for easier navigation, which matches the core functionality described in the PR objectives.
Description check	✅ Passed	The PR description uses the required template structure with all major sections present (Description, Type of Change checked), but the Related Issues, Testing, Screenshots, and Additional Notes sections lack substantive content.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch jade-glacier-73

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 22bbe26 and 1c0195a.

📒 Files selected for processing (5)

• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/SettingsTab.tsx (1 hunks)
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx (1 hunks)
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceItem.tsx (3 hunks)
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/index.tsx (4 hunks)
• apps/desktop/src/renderer/stores/app-state.ts (4 hunks)

🧰 Additional context used

📓 Path-based instructions (6)

apps/desktop/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (apps/desktop/AGENTS.md)

For Electron interprocess communication, ALWAYS use tRPC as defined in src/lib/trpc

Files:

• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/index.tsx
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/SettingsTab.tsx
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx
• apps/desktop/src/renderer/stores/app-state.ts
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceItem.tsx

apps/desktop/**/*.{ts,tsx}

📄 CodeRabbit inference engine (apps/desktop/AGENTS.md)

apps/desktop/**/*.{ts,tsx}: Please use alias as defined in tsconfig.json when possible
Prefer zustand for state management if it makes sense. Do not use effect unless absolutely necessary

Files:

• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/index.tsx
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/SettingsTab.tsx
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx
• apps/desktop/src/renderer/stores/app-state.ts
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceItem.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Avoid using any type - use explicit types instead for type safety
Use camelCase for variable and function names following existing codebase patterns
Keep diffs minimal with targeted edits only - avoid unnecessary changes when making modifications
Follow existing patterns and match the codebase style when writing new code

Files:

• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/index.tsx
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/SettingsTab.tsx
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx
• apps/desktop/src/renderer/stores/app-state.ts
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceItem.tsx

**/components/**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

**/components/**/*.tsx: Create one folder per component with structure: ComponentName/ComponentName.tsx + index.ts for barrel export
Co-locate tests next to the component file they test (e.g., ComponentName.test.tsx)
Co-locate dependencies (utils, hooks, constants, config, stories) next to the file using them
Use nested components/ subdirectory within a parent component only if a sub-component is used 2+ times within that parent; otherwise keep it in the parent's components/ folder
One component per file - avoid multi-component files

Files:

• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/index.tsx
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/SettingsTab.tsx
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceItem.tsx

apps/desktop/src/renderer/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Never import Node.js modules (fs, path, os, net, etc.) in renderer process code - browser environment only

Files:

• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/index.tsx
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/SettingsTab.tsx
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx
• apps/desktop/src/renderer/stores/app-state.ts
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceItem.tsx

apps/desktop/src/renderer/**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

Call IPC methods using window.ipcRenderer.invoke() with object parameters - TypeScript will infer the exact response type automatically

Files:

• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/index.tsx
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/SettingsTab.tsx
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceItem.tsx

🧠 Learnings (3)

📚 Learning: 2025-11-28T01:03:47.963Z

Learnt from: CR
Repo: superset-sh/superset PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T01:03:47.963Z
Learning: Applies to **/*.{ts,tsx} : Keep diffs minimal with targeted edits only - avoid unnecessary changes when making modifications

Applied to files:

• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx

📚 Learning: 2025-11-28T01:03:47.963Z

Learnt from: CR
Repo: superset-sh/superset PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T01:03:47.963Z
Learning: Applies to packages/ui/src/**/*.tsx : Use shadcn/ui components and TailwindCSS v4 for all UI component styling in the shared UI package

Applied to files:

• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx

📚 Learning: 2025-11-24T21:33:13.267Z

Learnt from: CR
Repo: superset-sh/superset PR: 0
File: apps/desktop/AGENTS.md:0-0
Timestamp: 2025-11-24T21:33:13.267Z
Learning: Applies to apps/desktop/**/*.{ts,tsx} : Prefer zustand for state management if it makes sense. Do not use effect unless absolutely necessary

Applied to files:

• apps/desktop/src/renderer/stores/app-state.ts

🧬 Code graph analysis (3)

apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/index.tsx (2)

apps/desktop/src/renderer/stores/app-state.ts (2)

• useCurrentView (54-54)
• useIsSettingsTabOpen (55-56)

apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/SettingsTab.tsx (1)

• SettingsTab (14-57)

apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/SettingsTab.tsx (3)

apps/desktop/src/renderer/stores/app-state.ts (2)

• useOpenSettings (61-61)
• useCloseSettingsTab (64-65)

packages/ui/src/lib/utils.ts (1)

• cn (4-6)

packages/ui/src/components/button.tsx (1)

• Button (61-61)

apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceItem.tsx (1)

apps/desktop/src/renderer/stores/app-state.ts (1)

• useCloseSettings (62-63)

🔇 Additional comments (13)

apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx (1)

58-58: LGTM - Minimal UI adjustment for layout alignment.

The added top margin aligns the dropdown button with the new settings tab layout.

apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceItem.tsx (2)

11-11: Good addition of settings integration.

Importing the close settings hook enables proper coordination between workspace activation and settings state.

---

94-99: Correct implementation of view-switching behavior.

The closeSettings() call switches the view back to workspace while keeping the settings tab visible, which aligns with the PR objective: "Clicking workspace tabs switches away from settings but keeps the settings tab visible." The guard condition !rename.isRenaming appropriately prevents view changes during rename operations.

apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/index.tsx (4)

5-10: Clean integration of settings state and component.

The imports properly expose the necessary state hooks and the new SettingsTab component for rendering.

---

23-25: Well-structured state derivation.

The isSettingsActive flag clearly captures when the settings view is active, making the downstream logic more readable.

---

136-138: Correct workspace deselection when settings is active.

Passing null as activeWorkspaceId when isSettingsActive is true properly implements the PR objective: "Workspace tabs deselect when the settings view is active."

---

150-162: Proper conditional rendering of settings tab.

The settings tab renders with consistent width and includes a separator when workspace groups exist. The implementation correctly maintains visual consistency with existing workspace tabs.

apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/SettingsTab.tsx (2)

1-12: Well-structured component setup.

The imports, type definitions, and props interface follow best practices with proper typing and clear naming.

---

14-57: Clean implementation mirroring workspace tab patterns.

The component correctly:

• Uses openSettings() to activate the settings view when clicked
• Implements a close button with closeSettingsTab() to remove the tab entirely
• Applies stopPropagation() on the close button to prevent triggering the parent's onClick
• Maintains visual consistency with WorkspaceItem styling
• Includes proper accessibility with aria-label

The distinction between view switching (clicking the tab) and tab removal (clicking the X) aligns perfectly with the PR objectives.

apps/desktop/src/renderer/stores/app-state.ts (4)

9-9: Appropriate state addition for tab visibility tracking.

The isSettingsTabOpen flag enables independent control of the tab's visibility separate from the current view state.

---

29-35: Correct state update in openSettings.

Setting isSettingsTabOpen: true when opening settings ensures the tab appears in the top bar as intended.

---

37-43: Important behavioral distinction between close actions.

The separation of concerns is well-designed:

• closeSettings() (lines 37-39): Switches view to workspace but keeps isSettingsTabOpen unchanged, allowing the tab to remain visible
• closeSettingsTab() (lines 41-43): Closes both the view and the tab completely

This distinction enables the UX described in the PR objectives where clicking a workspace tab switches away from settings while keeping the settings tab visible for easy return access.

---

55-65: Proper hook exports for component consumption.

The convenience hooks provide clean, typed access to the new settings tab state and actions, following zustand best practices. As per coding guidelines: "Prefer zustand for state management if it makes sense."

---

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.}