fix(desktop): update workspace dropdown button layout#455
Conversation
Make the primary action open the new workspace modal instead of quick create. The "New" button now shows "+ New" text with an outlined button group, and the quick create action is moved to a secondary bolt icon button. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
Warning Rate limit exceeded@Kitenite has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 18 minutes and 56 seconds before requesting another review. ⌛ 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. 📒 Files selected for processing (2)
WalkthroughThe WorkspaceDropdown component was refactored to replace its dropdown trigger pattern with a split button group. The primary button now opens a modal for creating a new workspace and displays a "New" label, while a secondary button implements a quick-create action triggered by a bolt icon. The UI now includes a button group separator and updated tooltips reflecting the new contextual messaging. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx (1)
21-21: Consider renamingchevronButtonRefto reflect current usage.The ref is still named
chevronButtonRef, but the button now displays a bolt icon and triggers quick-create. A name likequickCreateButtonReforsecondaryButtonRefwould better reflect its purpose.🔎 Proposed fix
const primaryButtonRef = useRef<HTMLButtonElement>(null); - const chevronButtonRef = useRef<HTMLButtonElement>(null); + const quickCreateButtonRef = useRef<HTMLButtonElement>(null);And update the usages on lines 40 and 118 accordingly.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
apps/desktop/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (apps/desktop/AGENTS.md)
apps/desktop/**/*.{ts,tsx,js,jsx}: For Electron interprocess communication, ALWAYS use trpc as defined insrc/lib/trpc
Use alias as defined intsconfig.jsonwhen 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/WorkspaceDropdown.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Avoid using any type in TypeScript - maintain type safety unless absolutely necessary
Files:
apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Run Biome for formatting, linting, import organization, and safe fixes at the root level using bun run lint:fix
Files:
apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx
**/{components,features}/**/[!.]*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Organize project structure with one folder per component: ComponentName/ComponentName.tsx with index.ts barrel export
Files:
apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx
**/{components,features}/**/*.{ts,tsx,test.ts,test.tsx,stories.tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Co-locate component dependencies (utils, hooks, constants, config, tests, stories) next to the file using them
Files:
apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx
apps/desktop/src/renderer/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Never import Node.js modules in renderer process or shared code - use only in main process (src/main/)
Files:
apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx
apps/desktop/src/{main,renderer,preload}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use type-safe IPC communication - define channel types in apps/desktop/src/shared/ipc-channels.ts before implementing handlers
Files:
apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx
**/*.{tsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
Use React + TailwindCSS v4 + shadcn/ui for UI development
Files:
apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx
**/{components,features}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/{components,features}/**/*.tsx: Nest components in parent's components/ folder if used only once, promote to highest shared parent's components/ if used 2+ times
Use one component per file - do not combine multiple components in a single file
Files:
apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx
🧠 Learnings (1)
📚 Learning: 2025-12-18T23:19:10.405Z
Learnt from: CR
Repo: superset-sh/superset PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-18T23:19:10.405Z
Learning: Applies to **/*.{tsx,css} : Use React + TailwindCSS v4 + shadcn/ui for UI development
Applied to files:
apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Build
🔇 Additional comments (3)
apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx (3)
39-54: Quick-create handler logic is well-structured.Good implementation with:
- Proper blur handling to remove focus after click.
- Toast-based feedback for async operation with loading/success/error states.
- Fallback to
handleOpenNewProjectwhen no current project exists.
124-128: Disabled state covers all relevant pending mutations.The disabled logic correctly prevents interaction during any of the three async operations, avoiding race conditions or duplicate submissions.
96-113: Split button UI implementation looks good.The button group pattern with
ButtonGroupSeparator, rounded corners (rounded-r-none/rounded-l-none), proper aria-labels, and contextual tooltips follows good UX practices. The dynamic tooltip on the quick-create button providing project context is a nice touch.Also applies to: 114-138
| <ButtonGroup | ||
| className={[className, "group/split"].filter(Boolean).join(" ")} | ||
| > | ||
| <ButtonGroup className={`${className} ml-1 mt-1 rounded-md border border-border/50`}> |
There was a problem hiding this comment.
Potential "undefined" in className when prop is omitted.
If className is not provided, the template literal ${className} will render as the string "undefined", resulting in an invalid class like "undefined ml-1 mt-1...".
🔎 Proposed fix
- <ButtonGroup className={`${className} ml-1 mt-1 rounded-md border border-border/50`}>
+ <ButtonGroup className={`${className ?? ""} ml-1 mt-1 rounded-md border border-border/50`}>Or use a utility like cn() from shadcn/ui if available in your codebase.
🤖 Prompt for AI Agents
In
apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx
around line 95, the template literal uses `${className}` which will produce the
string "undefined" when the prop is omitted; replace it with a safe class
composition (e.g. default className to an empty string, or guard it with
className ? className : ''), or use a classnames utility like cn(className,
'ml-1 mt-1 rounded-md border border-border/50') to ensure no "undefined" token
is emitted.
Rename refs and handlers to better reflect their purpose: - primaryButtonRef → modalButtonRef - chevronButtonRef → quickCreateButtonRef - handlePrimaryAction → handleModalCreate 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
🧹 Preview Cleanup CompleteThe following preview resources have been cleaned up:
Thank you for your contribution! 🎉 Preview resources have been processed for cleanup |
1 participant
Summary
Test plan
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.