feat(HappyHare): Replace right-click context menu with regular click menus and completes operations

[moggieuk]

Description

This PR removes the right-click context menu and replaces it with a regular click. This simplifies operation especially on mobile devices and was advocated by the community. The sensitivity of menu items is set based on current MMU state/capabilities and now necessarily extends to the bypass gate. This PR groups all changes the the context menu including the ability to invoke none gcode command operations like opening the filament editor dialog with the selected gate as default. The cursor type is pointer for gate selection and menu in the main panel

Note: There will be a minor merge conflict with PR #2429 in MmuUnitGate.vue since both modify the same template line. The correct resolution is (note mb-n5, @click handling and cursorType class):

<template>
    <div class="d-flex flex-column align-center" :class="cursorType" @click="handleClickGate" @contextmenu.prevent>
        <div class="d-flex flex-wrap mb-n5 pt-1 position-relative">
            <mmu-unit-gate-spool

Related Tickets & Documents

This PR replaces closed PR #2430

Mobile & Desktop Screenshots/Recordings

[optional] Are there any post-deployment tasks we need to perform?

n/a

[coderabbitai]

📝 Walkthrough

Walkthrough

Refactored MMU gate interaction to a click-based filament-edit workflow: dialog gains an initialGate prop and watcher; mmu-unit emits edit-filament; gate components replace long-press context menus with item-based click handlers and renamed spool selection events; panel coordinates opening the dialog with preselected gate.

Changes

Cohort / File(s)	Summary
MMU Edit Dialog src/components/dialogs/MmuEditGateMapDialog.vue	Added initialGate prop and @Watch('showDialog') handler to initialize selection on open. close() now emits close before hiding. Sets :show-context-menu="false" on child mmu-unit.
MMU Unit & Panel src/components/panels/Mmu/MmuUnit.vue, src/components/panels/MmuPanel.vue	MmuUnit adds editFilament(gateIndex) and now emits edit-filament. showContextMenu prop default toggled. MmuPanel adds initialEditGate state, editFilament() to open dialog, binds initial-gate to dialog and handles dialog close. Removed explicit :show-context-menu="true" usage.
MMU Gate & Spool src/components/panels/Mmu/MmuUnitGate.vue, src/components/panels/Mmu/MmuUnitGateSpool.vue	MmuUnitGate replaces long-press context model with click-driven contextMenuItems, adds handleClickGate(), new getters (contextMenuHeader, contextMenuItems), makes selectGate() private, and emits edit-filament. MmuUnitGateSpool renames selection API from select-gate → select-spool, updates SVG click handler and related getters/classes.
Localization src/locales/en.json	Added MmuPanel.Active.ButtonChangeTool (value: "Change Tool").

Sequence Diagram

sequenceDiagram
    participant User
    participant Gate as MmuUnitGate
    participant Unit as MmuUnit
    participant Panel as MmuPanel
    participant Dialog as MmuEditGateMapDialog

    User->>Gate: click gate
    Gate->>Gate: handleClickGate()
    Gate->>Unit: emit edit-filament(gateIndex)
    Unit->>Panel: emit edit-filament(gateIndex)
    Panel->>Panel: editFilament(gateIndex) / set initialEditGate
    Panel->>Dialog: open dialog (initial-gate)
    rect rgba(100,150,200,0.5)
    User->>Dialog: perform edits
    end
    Dialog->>Panel: emit close
    Panel->>Panel: reset initialEditGate

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 I hopped and clicked a tiny gate,
Menus reformed to suit my fate.
A whisper: "edit filament"—so neat,
Dialog opens, prefilled and sweet. 🎨✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main objective of the PR: replacing right-click context menus with regular click menus.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The pull request description clearly explains the changes: removing right-click context menu, replacing it with regular click menus, and enabling filament editor access with pre-selected gates.

_{✏️ 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

---

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

🤖 Fix all issues with AI agents

In `@src/components/panels/Mmu/MmuUnitGate.vue`:
- Around line 212-215: The handleClickGate method calls
selectGate(this.gateIndex) but selectGate is defined to take no arguments (it
reads this.gateIndex itself); remove the extraneous parameter so call
selectGate() instead (or alternatively update selectGate to accept an index and
use it everywhere, but prefer the simpler fix of changing handleClickGate to
call selectGate() and ensure no other callers rely on the old signature).

🧹 Nitpick comments (2)

src/components/dialogs/MmuEditGateMapDialog.vue (1)

83-92: Minor: redundant undefined check.

The initialGate prop is typed as number | null with a default of null, so it can never be undefined. The !== undefined guard on line 87 is unnecessary.

Suggested simplification

     `@Watch`('showDialog')
     onShowDialogChanged(val: boolean) {
         if (!val) return

-        if (this.initialGate !== null && this.initialGate !== undefined) {
+        if (this.initialGate !== null) {
             this.selectedGate = this.initialGate
         } else {
             this.selectedGate = TOOL_GATE_UNKNOWN
         }
     }

src/components/panels/Mmu/MmuUnitGate.vue (1)

8-11: No-op @select-spool handler used solely for CSS hover class.

The () => {} handler exists only to make hasSelectSpoolListener return true in MmuUnitGateSpool, which drives the .hasSelectSpool hover CSS class. Since the actual click is handled by the parent div's @click="handleClickGate" via DOM bubbling, this works but is indirect. A dedicated boolean prop (e.g., :show-hover="true") would be more explicit.

That said, if this pattern was already used before the rename, keeping it consistent is reasonable.