Split DriveSwitcher into navigable name and dropdown toggle

[2witstudios]

Summary

Refactored the DriveSwitcher component to separate the drive name display from the dropdown trigger, enabling direct navigation to the drive root when clicking the folder icon and name.

Key Changes

• Split the single button into two interactive elements:
  • Left section (folder icon + drive name): Navigates to the drive root when clicked
  • Right section (chevron icon): Opens the drive switcher dropdown menu
• Added handleNavigateToDriveRoot() function that navigates to /dashboard/{driveId} or opens the dropdown if no drive is selected
• Updated styling to reflect the two-part layout with rounded corners on appropriate sides
• Added descriptive title attributes for better UX clarity
• Wrapped both elements in a flex container for proper alignment and spacing

Implementation Details

• The left button uses hover:bg-accent for visual feedback on interaction
• The right button (dropdown trigger) has rounded-l-none rounded-r-md to create a cohesive two-part appearance
• Maintains all existing dropdown functionality while adding the new navigation feature
• The dropdown menu content remains unchanged

https://claude.ai/code/session_011ztG1vdgTQzZ3s76q2XGCK

Summary by CodeRabbit

• New Features
  • Improved drive switcher interaction: the drive name button now directly navigates to that drive, while the dropdown menu (accessed via chevron) allows switching between drives. Enhanced accessibility with improved tooltips.

[coderabbitai]

📝 Walkthrough

Walkthrough

The DriveSwitcher component was refactored to split the drive selection control into two separate interactive elements: a primary drive-root button that navigates to the current drive's dashboard, and an auxiliary dropdown trigger for switching between drives, with improved accessibility via title attributes.

Changes

Cohort / File(s)	Summary
DriveSwitcher UI Refactor apps/web/src/components/layout/navbar/DriveSwitcher.tsx	Split single drive button into dual controls: navigate-to-root button and dropdown switch. Added handleNavigateToDriveRoot function, restructured layout with flex container, and enhanced accessibility with title attributes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A switcher refined with care so true,
One button now splits into two!
Navigate here, or dropdown there,
The drives await with accessible flair. ✨

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

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Split DriveSwitcher into navigable name and dropdown toggle' clearly and accurately summarizes the main change: separating the component into two interactive parts with distinct behaviors.

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

✨ 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 claude/add-drive-root-navigation-2r9v3

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

apps/web/src/components/layout/navbar/DriveSwitcher.tsx (1)

134-140: Move handleNavigateToDriveRoot above the early return guard.

Defining a handler after an early return is unconventional and can mislead future contributors into thinking it is safe to place hook calls there (which would silently violate Rules of Hooks). All handlers and derived values should be declared before any conditional return.

♻️ Suggested reorganization

+ const handleNavigateToDriveRoot = () => {
+   if (currentDriveId) {
+     router.push(`/dashboard/${currentDriveId}`);
+   } else {
+     setIsOpen(true);
+   }
+ };

  if (isLoading) {
    return <Skeleton className="h-9 w-40" />;
  }

- const handleNavigateToDriveRoot = () => {
-   if (currentDriveId) {
-     router.push(`/dashboard/${currentDriveId}`);
-   } else {
-     setIsOpen(true);
-   }
- };

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/components/layout/navbar/DriveSwitcher.tsx` around lines 134 -
140, Move the handleNavigateToDriveRoot function declaration so it appears
before the component's early return guard; currently handleNavigateToDriveRoot
is defined after the conditional return which is confusing and could encourage
unsafe hook placement. Locate the handler named handleNavigateToDriveRoot in
DriveSwitcher and cut/paste it above the early return that exits the component
(the guard handling when the component shouldn't render), keeping its logic
unchanged (router.push(`/dashboard/${currentDriveId}`) / setIsOpen(true)).
Ensure no hooks or other derived values are declared after the early return as
part of this reordering.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/web/src/components/layout/navbar/DriveSwitcher.tsx`:
- Around line 146-155: The button in DriveSwitcher that triggers
handleNavigateToDriveRoot lacks an explicit type, so add type="button" to that
<button> element in the DriveSwitcher component to prevent it from acting as a
submit button when rendered inside any enclosing <form>; update the button with
the type attribute alongside the existing onClick, className, title, and
children.

---

Nitpick comments:
In `@apps/web/src/components/layout/navbar/DriveSwitcher.tsx`:
- Around line 134-140: Move the handleNavigateToDriveRoot function declaration
so it appears before the component's early return guard; currently
handleNavigateToDriveRoot is defined after the conditional return which is
confusing and could encourage unsafe hook placement. Locate the handler named
handleNavigateToDriveRoot in DriveSwitcher and cut/paste it above the early
return that exits the component (the guard handling when the component shouldn't
render), keeping its logic unchanged
(router.push(`/dashboard/${currentDriveId}`) / setIsOpen(true)). Ensure no hooks
or other derived values are declared after the early return as part of this
reordering.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Add type="button" to the native <button> element.

Without an explicit type, HTML buttons default to type="submit". If DriveSwitcher is ever rendered inside a <form> ancestor (e.g., a search or settings form in the navbar), clicking the drive-root button will inadvertently submit that form.

🐛 Proposed fix

  <button
+   type="button"
    onClick={handleNavigateToDriveRoot}
    className="flex items-center gap-2 pl-2 pr-1 h-9 max-w-[170px] hover:bg-accent rounded-l-md transition-colors"
    title={currentDrive ? `Go to ${currentDrive.name} root` : "Select a drive"}
  >

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<button
	onClick={handleNavigateToDriveRoot}
	className="flex items-center gap-2 pl-2 pr-1 h-9 max-w-[170px] hover:bg-accent rounded-l-md transition-colors"
	title={currentDrive ? `Go to ${currentDrive.name} root` : "Select a drive"}
	>
	<Folder className="h-4 w-4 shrink-0" />
	<span className="truncate font-medium">
	{currentDrive ? currentDrive.name : "Select Drive"}
	</span>
	</button>
	<button
	type="button"
	onClick={handleNavigateToDriveRoot}
	className="flex items-center gap-2 pl-2 pr-1 h-9 max-w-[170px] hover:bg-accent rounded-l-md transition-colors"
	title={currentDrive ? `Go to ${currentDrive.name} root` : "Select a drive"}
	>
	<Folder className="h-4 w-4 shrink-0" />
	<span className="truncate font-medium">
	{currentDrive ? currentDrive.name : "Select Drive"}
	</span>
	</button>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/components/layout/navbar/DriveSwitcher.tsx` around lines 146 -
155, The button in DriveSwitcher that triggers handleNavigateToDriveRoot lacks
an explicit type, so add type="button" to that <button> element in the
DriveSwitcher component to prevent it from acting as a submit button when
rendered inside any enclosing <form>; update the button with the type attribute
alongside the existing onClick, className, title, and children.