Restore and rework demo mode tooltips

[Copilot]

Description:

Demo mode tooltips were lost during the UI redesign that replaced the tab-based layout (Create/Enhance/Answer components) with a mode-based layout (chat/imageGen/imageEdit/video). Restores them fully: correct store naming, complete i18n coverage, Video mode support, and a dedicated component with window-size-independent per-button tooltip positioning.

Related Issue:

Demo mode tooltips (low prio)

Changes Made:

• demoMode.ts / env.d.ts — Store pages renamed to match current modes (answer→chat, create→imageGen, enhance→imageEdit); video page added; DemoModePage = 'chat' | 'imageGen' | 'imageEdit' | 'video'; imageEdit.show is the uniform overlay-visibility flag (consistent with other modes; sub-feature flags showPrompt/showUpscale/etc. unchanged); escapeDemo and visibility watcher cover all four modes

• i18n (all 13 files) — All DEMO_ANSWER_* / DEMO_CREATE_* / DEMO_ENHANCE_* keys renamed; DEMO_IMAGE_GEN_CENTER_CONTENT → DEMO_IMAGE_GEN_HEADING; DEMO_VIDEO_HEADING + DEMO_VIDEO_TOOLTIP_TEXT added and translated in every language; stale "Answer Tab" → "Chat mode" fixed in non-English files

• DemoModeOverlay.vue (new component, extracted from App.vue) — Tooltip anchored to the specific active mode button via id="mode-button-{mode}" + getBoundingClientRect(); centered over its button, clamped to viewport; arrow tip tracks button centre via CSS custom property --arrow-left; position recomputed on activeMode change and window resize; named JS constants (TOOLTIP_WIDTH, TOOLTIP_GAP, ARROW_HEIGHT, …) kept in sync with CSS values; .tooltip-box auto-sizes to content (no fixed height)

• demo-mode.css — .demo-mode-answer-overlay → .demo-mode-overlay; height: 225px removed; ::after/::before arrow left uses var(--arrow-left, 40px)

• App.vue — Inline 70-line overlay block replaced with <DemoModeOverlay />; "Need Help?" button shown only when demo mode is enabled; triggerHelpForCurrentMode() covers all four modes; watchers fire on mode-switch and app startup

• PromptArea.vue — id="mode-button-{mode}" on each button for JS anchoring; demo-mode-overlay-content outline applied to the highlighted mode button only; isDemoModeHighlighted() uses imageEdit.show consistently

• SettingsChat.vue — demoMode.answer.show → demoMode.chat.show

Testing Done:

ESLint, vue-tsc --noEmit, and Vitest unit tests pass. Overlay verified to render per mode when isDemoModeEnabled: true in settings.json; tooltip position and arrow tip confirmed to track each of the four mode buttons independently.

Screenshots:

N/A — only active when demo mode is explicitly enabled via settings.json.

Checklist:

• I have tested the changes locally.
• I have self-reviewed the code changes.
• I have updated the documentation, if necessary.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Demo mode tooltips (low prio)</issue_title>
<issue_description>These got lost during UI redesign. They should be added back and fully working.</issue_description>

Comments on the Issue (you are @copilot in this section)

@mschuettlerTNG Original implementation: #87

• Fixes Restore demo mode tooltips #182

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.