feat: disable menu ripple

[amhsirak]

Summary by CodeRabbit

• Style
  • Unified tab interaction visuals by removing the ripple effect across all main menu tabs for a consistent, cleaner feel.
• Refactor
  • Simplified tab click handling for most tabs to rely on default navigation behavior, reducing custom logic.
  • Maintained a custom click handler only where needed to preserve expected navigation.

[coderabbitai]

Walkthrough

Disables ripple effects on all Tab components in MainMenu and removes onClick handlers from non-robots tabs. The robots tab retains its specific click handler. Labels/icons are reformatted across multiple lines without altering exports or public APIs.

Changes

Cohort / File(s)	Summary
Dashboard MainMenu Tabs src/components/dashboard/MainMenu.tsx	Disabled ripple on all Tabs; removed onClick from runs/proxy/apikey tabs; retained robots tab onClick handler; reformatted tab labels/icons across multiple lines; event handling now relies on Tabs’ default behavior except for robots tab.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant T as Tabs (MUI)
  participant R as Robots Tab (onClick)
  participant D as Other Tabs (no onClick)

  U->>T: Click on a tab
  alt Robots tab clicked
    T->>R: onClick handleRobotsClick
    R-->>T: Navigation triggered via handler
  else Other tab clicked
    T->>D: Default tab selection (no ripple)
    D-->>T: Internal state change (selection)
  end
  note over T: Ripple disabled for all tabs

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• feat: routing #336 — Also modifies MainMenu tab selection/click handling by adding handleChange-based navigation, overlapping with this PR’s event flow adjustments.

Suggested labels

Type: Enhancement, Scope: UI/UX

Poem

I tap with velvet paws—no ripples now, just glide,
A quiet hop between the tabs where routes decide.
Robots lead the warren with a purposeful click,
The others follow gently, calm and slick.
Carrots cached, UX polished—thump-thump, neat and quick! 🥕✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title concisely highlights the main change by stating that menu ripple effects are disabled, directly reflecting the updates to Tab components in the MainMenu.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ 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 disable-ripple

---

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: 0

🧹 Nitpick comments (1)

src/components/dashboard/MainMenu.tsx (1)

100-117: LGTM! Consider extracting the repeated styles.

The ripple disable and removal of onClick handlers simplify the code correctly. The repeated sx prop could be extracted into a constant for maintainability.

+ const tabStyles = { justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' };
+
  return (
    <>
      <Paper

Then replace the repeated sx prop:

            <Tab value="runs"
              label={t('mainmenu.runs')}
              icon={<FormatListBulleted />}
              iconPosition="start"
              disableRipple={true}
-             sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
+             sx={tabStyles} />
            <Tab value="proxy"
              label={t('mainmenu.proxy')}
              icon={<Usb />}
              iconPosition="start"
              disableRipple={true}
-             sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
+             sx={tabStyles} />
            <Tab value="apikey"
              label={t('mainmenu.apikey')}
              icon={<VpnKey />}
              iconPosition="start"
              disableRipple={true}
-             sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
+             sx={tabStyles} />

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 833fe59 and 25256e3.

📒 Files selected for processing (1)

• src/components/dashboard/MainMenu.tsx (1 hunks)

🔇 Additional comments (1)

src/components/dashboard/MainMenu.tsx (1)

92-99: LGTM—pattern confirmed elsewhere
Other <Tab> usages (e.g. in src/components/recorder/LeftSidePanel.tsx) pair onClick on the tab with a parent <Tabs onChange>. No changes needed here.