Feat/33 tabs action ux - Add three dots kebab menu visible only on hover of active tab

[shawnriju]

What this PR does

Main fix: Adds a kebab menu (three-dots) button to the active tab of the document, providing quick access to actions (rename, copy link and delete ) without requiring a right-click context menu.

Refinements based on maintainer feedback:

• Kebab menu only shows when hovering over the active tab
• Moved the existing Expand/Collapse (+/-) button to the left edge for consistent UI behavior

My initial approach

When I first implemented this, I added the kebab menu button directly to the right of the existing Plus/Minus button on the tab container, with both buttons always visible.

Feedback received

@safwansamsudeen requested that the kebab menu should only show when the active tab is hovered upon.

Why I made the additional changes

Keeping the kebab menu hover-only while leaving the Expand/Collapse button always visible would create inconsistent UI behavior on the active tab (one button appearing on hover, another always there). This could cause some confusion for users.

Final solution

• Added kebab menu button to the right edge of the tab
• Made kebab menu visible only on hover of the active tab
• Moved Expand/Collapse (+/-) button to the left edge
• Kept Expand/Collapse always visible (consistent with original behavior)

This creates clear visual separation:

• Left side = persistent navigation/expand actions
• Right side = contextual menu that appears when needed

Video recording of the happy case

updated-toc-action-menu-demo.mp4

(Video shows: kebab menu appears on tab hover → actions can be selected → kebab disappears on mouse leave → expand/collapse always accessible on left)

Additional suggestion (separate PR)

I believe an Arrow icon would be more intuitive than Plus/Minus for expand/collapse functionality. However, I've kept this out of the current PR to maintain focus. If the team agrees, I'm happy to open a separate PR for that icon change.

---

Note about additional code changes in this PR

I'm developing on WSL (Windows Subsystem for Linux). When I ran pre-commit on the ToC.vue file, Prettier automatically formatted the file according to the project's or (I assume) my system's configuration.

This means: The diff shows more changes than just my manual code modifications because Prettier made formatting adjustments to existing code. No functional changes were made outside of the kebab menu implementation described above.

---

What was solved

• Added kebab menu to active tabs in the document (main issue)
• Kebab menu shows only on hover of active tab
• Expand/collapse button always visible on left for active tabs
• No changes to existing right-click context menu
• Consistent hover/non-hover UI behavior

---

This solves the issue: Tabs Actions UX #33 (adding kebab menu) with the requested hover behavior, plus a layout adjustment for UI consistency. Open to feedback and further adjustments if needed.

[safwansamsudeen]

@shawnriju we're hiring for Frappe Writer. Would you be interested in applying?

DM me @realsafwan if you're in.