feat: Add hover and long press tooltips to quicktools items

[gahanad]

Summary of this PR

This PR adds tooltips for the editor quick tools.

Changes

• Added a reusable tooltip component.
• Added tooltip support on mouse hover.
• Added tooltip support on touch long-press.
• Added descriptions for search-related quick tool buttons.
• Preserved the existing long-press behavior for repeatable buttons.

Testing

• Mouse hover
• Touch long-press
• Undo/Redo
• Search buttons
• Replace/Replace All
• Arrow keys (repeat behavior remains unchanged)

Closes #2268

[greptile-apps]

Greptile Summary

This PR adds hover and long-press tooltip support to the editor quick-tools toolbar, introducing a reusable singleton Tooltip component that positions itself above the target button with viewport-edge clamping and a short fade animation via motion. The previous review's concerns about missing id props on search-row buttons and RAF-stacking flicker have both been addressed.

• New tooltip component (src/components/tooltip/index.js, style.scss): singleton div appended to <body>, RAF-guarded positioning with Math.max/Math.min clamping, cancelAnimationFrame for rapid-hover safety, and a 150 ms fade powered by motion.animate().
• Footer wiring (footer.js): mouseenter/mouseleave listeners added to every RowItem that has an id; search-row buttons now receive explicit id props so tooltip lookup and long-press detection both work.
• Touch long-press path (quickToolsInit.js): a new longPress flag is set inside the 500 ms context-menu timeout; tooltip is shown for any button, repeat actions still fire for repeatable buttons, and touchcancel / onclick always call hideTooltip() to clean up.

Confidence Score: 5/5

Safe to merge — the tooltip feature is additive, touch interaction logic is preserved, and all previously flagged regressions have been corrected.

The core logic changes are straightforward: a new singleton tooltip element, RAF-guarded positioning, and a longPress flag that gates the touch-release click. All three paths (hover, long-press, click-mode) correctly call hideTooltip() on cleanup. The only open items are cosmetic — concurrent motion animation handles and untranslated i18n strings — neither of which affects correctness or data integrity.

src/components/tooltip/index.js — the motion.animate() handle from a prior fade is not cancelled before starting the next animation, which can cause a brief visual stutter on fast hover. No files require attention for correctness.

Important Files Changed

Filename	Overview
src/components/tooltip/index.js	New singleton tooltip component with RAF cancellation and viewport-edge clamping. A minor animation-conflict issue remains: motion.animate() handles from prior show/hide calls are never cancelled, which can cause visible stuttering on rapid hover.
src/components/tooltip/style.scss	New tooltip styles using CSS custom properties for theming. Fixed positioning, pointer-events: none, and high z-index are all correct.
src/components/quickTools/footer.js	Adds id props to all five search-row buttons and wires mouseenter/mouseleave listeners on RowItem for hover tooltips. The previous missing-id issue is resolved.
src/handlers/quickToolsInit.js	Introduces longPress flag and touch long-press tooltip path. Tooltip is properly hidden in touchcancel, onclick, and when touchend fires after a long-press. Repeat-button context-menu behavior is preserved.
src/lang/en-us.json	Adds five English tooltip strings for search/replace quick-tool buttons. Strings are correct and consistent with existing naming convention.
src/lang/ar-ye.json	New quicktools strings added in English despite the file containing native Arabic translations for all other quicktools keys; same pattern repeated across all 30 non-English locale files.
pnpm-workspace.yaml	New file whitelisting @parcel/watcher, core-js, and core-js-pure for pnpm build execution. Unrelated to the tooltip feature but otherwise fine.

Sequence Diagram

%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
    participant User
    participant RowItem
    participant quickToolsInit
    participant Tooltip

    Note over User,Tooltip: Mouse hover flow
    User->>RowItem: mouseenter
    RowItem->>Tooltip: showTooltip($item, description(id))
    Tooltip->>Tooltip: cancelAnimationFrame(rafId)
    Tooltip->>Tooltip: RAF → position + animate(opacity:1)
    User->>RowItem: mouseleave
    RowItem->>Tooltip: hideTooltip()
    Tooltip->>Tooltip: animate(opacity:0)

    Note over User,Tooltip: Touch long-press flow
    User->>quickToolsInit: touchstart
    quickToolsInit->>quickToolsInit: setTimeout(500ms)
    quickToolsInit->>Tooltip: showTooltip($el, description($el.dataset.id))
    alt repeat button
        quickToolsInit->>quickToolsInit: "contextmenu=true, oncontextmenu()"
    end
    User->>quickToolsInit: touchend / touchcancel
    quickToolsInit->>Tooltip: hideTooltip()

    Note over User,Tooltip: Click (any mode)
    User->>quickToolsInit: click / onclick
    quickToolsInit->>Tooltip: hideTooltip()

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
    participant User
    participant RowItem
    participant quickToolsInit
    participant Tooltip

    Note over User,Tooltip: Mouse hover flow
    User->>RowItem: mouseenter
    RowItem->>Tooltip: showTooltip($item, description(id))
    Tooltip->>Tooltip: cancelAnimationFrame(rafId)
    Tooltip->>Tooltip: RAF → position + animate(opacity:1)
    User->>RowItem: mouseleave
    RowItem->>Tooltip: hideTooltip()
    Tooltip->>Tooltip: animate(opacity:0)

    Note over User,Tooltip: Touch long-press flow
    User->>quickToolsInit: touchstart
    quickToolsInit->>quickToolsInit: setTimeout(500ms)
    quickToolsInit->>Tooltip: showTooltip($el, description($el.dataset.id))
    alt repeat button
        quickToolsInit->>quickToolsInit: "contextmenu=true, oncontextmenu()"
    end
    User->>quickToolsInit: touchend / touchcancel
    quickToolsInit->>Tooltip: hideTooltip()

    Note over User,Tooltip: Click (any mode)
    User->>quickToolsInit: click / onclick
    quickToolsInit->>Tooltip: hideTooltip()

Loading

_{Reviews (4): Last reviewed commit: "fix: replaced title attribute" | Re-trigger Greptile}