Skip to content

buttons#75

Merged
Kitenite merged 4 commits intomainfrom
buttons
Nov 12, 2025
Merged

buttons#75
Kitenite merged 4 commits intomainfrom
buttons

Conversation

@Kitenite
Copy link
Copy Markdown
Collaborator

@Kitenite Kitenite commented Nov 12, 2025

Summary by CodeRabbit

  • New Features

    • Mode buttons now show hover tooltips with mode descriptions.
    • New composite "New Tab" control (arc-style) replaces separate New Terminal/Preview actions — lets you create Terminal or Preview tabs, choose a default type, uses a dropdown with keyboard/mouse support and a rotating chevron, and remembers your default choice.
  • Style

    • Adjusted border radius for improved visual consistency.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Nov 12, 2025

Caution

Review failed

The pull request is closed.

Walkthrough

Refines ModeCarousel visuals and tooltips, and replaces WorktreeList's inline new-tab actions with a dropdown/arc control that manages default tab type, local state, and click/outside/focus behaviour.

Changes

Cohort / File(s) Summary
ModeCarousel — AnimatedBackground
apps/desktop/src/renderer/screens/main/components/Sidebar/components/ModeCarousel/components/AnimatedBackground/AnimatedBackground.tsx
Styling change: updated className from "absolute h-9 rounded-lg bg-neutral-800/60" to "absolute h-9 rounded bg-neutral-800/60" (smaller border radius). No logic changes.
ModeCarousel — ModeNavigation
apps/desktop/src/renderer/screens/main/components/Sidebar/components/ModeCarousel/components/ModeNavigation/ModeNavigation.tsx
UI enhancement: wrapped each mode button with Tooltip, using TooltipTrigger/TooltipContent and modeLabels for tooltip text. Button click and active styling preserved.
Sidebar — WorktreeList
apps/desktop/src/renderer/screens/main/components/Sidebar/components/WorktreeList/WorktreeList.tsx
Feature/UI change: replaced inline "New Terminal/New Preview" actions with a single arc-style dropdown control. Added local state (isDropdownOpen, persisted default tab type), refs, outside-click/focus handlers, chevron toggle/rotation, and handlers to create terminal/preview tabs and update localStorage. Minor prop aliasing to internal names.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant WorktreeList
    participant Storage as localStorage
    participant App as TabManager

    rect rgb(240,248,255)
    Note over User,WorktreeList: Open/Toggle dropdown
    User->>WorktreeList: click dropdown trigger
    WorktreeList->>WorktreeList: set isDropdownOpen = true
    end

    rect rgb(245,255,240)
    Note over User,WorktreeList: Select default/action
    User->>WorktreeList: click "Create (Terminal|Preview)" or set default
    WorktreeList->>Storage: update default tab type
    WorktreeList->>App: create tab(type)
    App-->>WorktreeList: tab created
    WorktreeList->>WorktreeList: close dropdown (isDropdownOpen = false)
    end

    rect rgb(255,248f0)
    Note over User,WorktreeList: Click outside/escape
    User->>WorktreeList: click outside / press Escape
    WorktreeList->>WorktreeList: close dropdown
    end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

  • Review focus areas:
    • WorktreeList.tsx: verify keyboard/focus/outside-click handlers, localStorage persistence, refs, and accessibility of the new dropdown control.
    • ModeNavigation.tsx: confirm tooltip import/usage and that modeLabels covers all modes.
    • AnimatedBackground.tsx: quick visual check only.

Possibly related PRs

  • buttons #75 — Modifies the same ModeCarousel files (AnimatedBackground and ModeNavigation) with matching style and tooltip changes; likely directly related.
  • carousel #74 — Introduced ModeNavigation/AnimatedBackground components that are being adjusted here; relevant for context and regressions.

Poem

I twitch my whiskers, press the arc so neat,
Tooltips hum softly above each tiny seat,
Corners rounded, just a tad more shy,
Tabs spring open — a bright new sky,
— your rabbit coder, hopping by 🐇✨

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings, 1 inconclusive)
Check name Status Explanation Resolution
Description check ⚠️ Warning The description is incomplete and lacks required template sections such as Type of Change, Testing, and other structured information. Fill out the complete pull request template including Type of Change (Refactor), Testing section describing how tooltips were verified, and any additional context about the UI updates.
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.
Title check ❓ Inconclusive The title 'buttons' is too vague and generic; it does not clearly describe the specific changes made to the codebase. Use a more descriptive title that specifies the main change, such as 'Add tooltips to mode carousel buttons' or 'Update ModeNavigation buttons with tooltip UI'.

📜 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 869fae4 and 7d7c896.

📒 Files selected for processing (1)
  • apps/desktop/src/renderer/screens/main/components/Sidebar/components/WorktreeList/WorktreeList.tsx (7 hunks)

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

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
apps/desktop/src/renderer/screens/main/components/Sidebar/components/ModeCarousel/components/ModeNavigation/ModeNavigation.tsx (1)

34-51: Tooltip integration looks good. Consider adding accessible labels for better screen reader support.

The Button component properly forwards all HTML attributes including aria-label, so the suggested enhancement will work correctly. While the tooltip improves discoverability, adding accessible labels ensures screen readers can identify button purpose:

 <Button
   variant="ghost"
   size="sm"
   onClick={() => onModeSelect(mode)}
+  aria-label={modeLabels[mode]}
   className={`relative z-10 h-9 w-9 rounded transition-colors duration-200 ${isActive
     ? "text-neutral-100"
     : "text-neutral-400 hover:text-neutral-300"
   }`}
 >

This is optional but recommended for improved accessibility. The implementation is correct as-is.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b8b4427 and 869fae4.

📒 Files selected for processing (2)
  • apps/desktop/src/renderer/screens/main/components/Sidebar/components/ModeCarousel/components/AnimatedBackground/AnimatedBackground.tsx (1 hunks)
  • apps/desktop/src/renderer/screens/main/components/Sidebar/components/ModeCarousel/components/ModeNavigation/ModeNavigation.tsx (2 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
apps/desktop/src/renderer/screens/main/components/Sidebar/components/ModeCarousel/components/ModeNavigation/ModeNavigation.tsx (4)
apps/desktop/src/renderer/screens/main/components/Sidebar/components/ModeCarousel/components/AnimatedBackground/AnimatedBackground.tsx (1)
  • AnimatedBackground (8-40)
apps/desktop/src/renderer/screens/main/components/Sidebar/components/ModeCarousel/constants.ts (2)
  • modeIcons (4-7)
  • modeLabels (9-12)
packages/ui/src/components/tooltip.tsx (3)
  • Tooltip (59-59)
  • TooltipTrigger (59-59)
  • TooltipContent (59-59)
packages/ui/src/components/button.tsx (1)
  • Button (61-61)
🔇 Additional comments (2)
apps/desktop/src/renderer/screens/main/components/Sidebar/components/ModeCarousel/components/AnimatedBackground/AnimatedBackground.tsx (1)

27-27: LGTM! Border radius now matches button styling.

The change from rounded-lg to rounded aligns the AnimatedBackground's border radius with the button styling (line 40 in ModeNavigation.tsx uses rounded), ensuring visual consistency.

apps/desktop/src/renderer/screens/main/components/Sidebar/components/ModeCarousel/components/ModeNavigation/ModeNavigation.tsx (1)

2-6: LGTM! Import additions support the tooltip feature.

The new imports for Tooltip components and modeLabels are necessary and correctly structured for the tooltip integration.

@Kitenite Kitenite merged commit 35540ac into main Nov 12, 2025
1 of 4 checks passed
This was referenced Nov 12, 2025
@Kitenite Kitenite deleted the buttons branch November 19, 2025 00:33
@coderabbitai coderabbitai Bot mentioned this pull request Dec 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant