video tutorials modal

[wojcik91]

Add a dedicated modal for video tutorials.

Resolves #2384

[Copilot]

Pull request overview

Adds a new Video Tutorials experience in the web app by introducing a dedicated, two-panel tutorials modal and migrating the existing “video support” mapping/resolution to a richer, section-based “video tutorials” contract fetched from the update service.

Changes:

• Introduce a new video-tutorials module (schema, resolver, hooks, UI components) plus a full modal for browsing all tutorial sections/videos.
• Replace the old video-support data model/tests/resolver with the new tutorials mapping and update the floating widget to use it.
• Wire tutorials fetching into shared query options and add global app state to control opening/closing the tutorials modal; add a navigation entry for tutorials.

Reviewed changes

Copilot reviewed 37 out of 40 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
web/tests/video-tutorials.test.ts	New Vitest coverage for route-key/version parsing, resolver behavior, and Zod parsing contract.
web/tests/video-support.test.ts	Removed tests for the deprecated video-support module.
web/src/shared/video-tutorials/VideoTutorialsModal.tsx	New modal shell: opens/closes based on global store state and route changes.
web/src/shared/video-tutorials/VideoTutorialsModal.scss	Styling for the new two-panel tutorials modal layout.
web/src/shared/video-tutorials/VideoSupportWidget.tsx	Floating widget updated to resolve videos from the new tutorials mapping (still uses widget UI pattern).
web/src/shared/video-tutorials/version.ts	New semver-ish parsing and comparison utilities (with prerelease/build stripping).
web/src/shared/video-tutorials/types.ts	New tutorials types: videos include title/description/appRoute/docsUrl and sectioned mapping per version.
web/src/shared/video-tutorials/style.scss	Styles for the floating widget launcher/panel.
web/src/shared/video-tutorials/route-label.ts	New helper mapping canonical routes to translated navigation labels.
web/src/shared/video-tutorials/route-key.ts	New route-key canonicalization utility.
web/src/shared/video-tutorials/resolver.ts	New resolution logic for per-route videos and “newest eligible version” section lists.
web/src/shared/video-tutorials/resolved.tsx	New hooks to derive the current route key and resolve tutorials via React Query + app version.
web/src/shared/video-tutorials/README.md	New module documentation including JSON contract and resolution rules.
web/src/shared/video-tutorials/data.ts	New Zod schema + parser for the tutorials mapping and env-driven fetch path.
web/src/shared/video-tutorials/components/widget/VideoOverlay/VideoOverlay.tsx	Overlay updated/reintroduced under video-tutorials using shared VideoPlayer.
web/src/shared/video-tutorials/components/widget/VideoOverlay/style.scss	Overlay styling migrated/renamed for the tutorials module.
web/src/shared/video-tutorials/components/widget/VideoCard/VideoCard.tsx	Widget card updated to use tutorials types and renamed CSS classes.
web/src/shared/video-tutorials/components/widget/VideoCard/style.scss	Widget card styles renamed from support → tutorials.
web/src/shared/video-tutorials/components/widget/Thumbnail/Thumbnail.tsx	Thumbnail component import paths and CSS classes updated.
web/src/shared/video-tutorials/components/widget/Thumbnail/style.scss	Thumbnail styles renamed from support → tutorials.
web/src/shared/video-tutorials/components/widget/NavTutorialsButton/NavTutorialsButton.tsx	New nav button to open the tutorials modal.
web/src/shared/video-tutorials/components/VideoPlayer/VideoPlayer.tsx	New shared YouTube iframe player with skeleton + timeout-based error UI variants.
web/src/shared/video-tutorials/components/VideoPlayer/style.scss	Styles for shared player skeleton and error states.
web/src/shared/video-tutorials/components/modal/VideoList/VideoList.tsx	New searchable/collapsible section list for the modal’s left panel.
web/src/shared/video-tutorials/components/modal/VideoList/style.scss	Styles for the modal’s left panel (search + accordion + rows).
web/src/shared/video-tutorials/components/modal/ModalContent/ModalContent.tsx	Modal header + two-panel body wiring, including internal/external links.
web/src/shared/video-support/types.ts	Removed deprecated video-support types.
web/src/shared/video-support/resolver.ts	Removed deprecated video-support resolver.
web/src/shared/video-support/resolved.tsx	Removed deprecated video-support hooks.
web/src/shared/video-support/README.md	Removed deprecated video-support module documentation.
web/src/shared/video-support/data.ts	Removed deprecated video-support schema/parser and env path.
web/src/shared/video-support/components/VideoOverlay/VideoOverlay.tsx	Removed deprecated overlay implementation (replaced by shared player approach).
web/src/shared/video-support/components/VideoOverlay/style.scss	Removed deprecated overlay styles.
web/src/shared/query.ts	Replace videoSupportQueryOptions with videoTutorialsQueryOptions and new parser/path.
web/src/shared/hooks/useApp.tsx	Add tutorialsModalOpen to global store state.
web/src/shared/components/Navigation/style.scss	Adjust bottom area layout/styling to accommodate a tutorials nav section.
web/src/shared/components/Navigation/Navigation.tsx	Add tutorials query + NavTutorialsButton; remove prior bottom controls component.
web/src/routes/_authorized/_default.tsx	Mount the updated floating widget and the new tutorials modal globally in the authorized shell.
web/messages/en/components.json	Add/rename i18n strings for tutorials modal/nav and player error messages.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.