[UX] Add Guided tour for Library, filters and Sidebar #4401
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…nd Tour components
…r for guided tour
… step descriptions
…oicVersion CSS file
…d enhanced descriptions
flavioislima
requested review from
arielj,
CommandMC,
Etaash-mathamsetty and
imLinguin
flavioislima
added
the
pr:ready-for-review
flavioislima
changed the title
arielj
reviewed
Mar 9, 2025
public/locales/en/translation.json
Outdated
| "title": "Enjoy your games!" | ||
| }, | ||
| "filters": "Filter your games by store, platform, favorites and more using these options.", | ||
| "gameCard": "Right Click on thegame card to navigate to the game page and to see details and adjust settings or Left click to open the context menu.", |
There was a problem hiding this comment.
These are backwards, left click opens the game page, right click opens the context menu
There was a problem hiding this comment.
also, when there are no games, this step is still displayed, but doesn't have a card to point
src/frontend/components/UI/Sidebar/components/HeroicVersion/index.tsx
Outdated
Show resolved
Hide resolved
| 'info.heroic.click-to-see-changelog', | ||
| 'Click to see changelog' | ||
| <div className="heroicVersionContainer" data-tour="sidebar-version"> | ||
| <> |
There was a problem hiding this comment.
we don't need this fragment if we are adding the wrapper div, it should make the diff less complicated cause it won't change the indentation of everything inside
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This adds two new help icons that will trigger a small guided tour, one for the library, gamecard and filters and another one for the Sidebar.
Gravar.a.tela_20250307_224042.mp4
Gravar.a.tela_20250307_221356.mp4
AI Summary
This pull request introduces a new guided tour feature using
intro.jsandintro.js-reactto help users navigate the application. The changes include adding new dependencies, updating localization files, and creating new components for the tour functionality. Additionally, custom styles have been added to ensure the tour elements match the application's design.New Guided Tour Feature:
Dependencies Added:
intro.jsandintro.js-reacttopackage.jsonandpnpm-lock.yamlto support the guided tour feature. [1] [2] [3] [4]Localization Updates:
public/locales/en/translation.jsonto include new strings for the tour feature.New Components:
TourProvidertosrc/frontend/App.tsxto wrap the application and manage tour state. [1] [2] [3]Tourcomponent insrc/frontend/components/Tour/Tour.tsxto handle the steps and options of the guided tour.TourButtoncomponent insrc/frontend/components/Tour/TourButton.tsxto trigger the guided tour.Custom Styles:
src/frontend/components/Tour/Tour.scssandsrc/frontend/components/Tour/TourButton.scssto match the application's design. [1] [2]Integration with Existing UI:
ActionIcons,CategoryFilter,LibraryFilters, andLibrarySearchBarto guide users through different parts of the application. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]These changes collectively enhance the user experience by providing an interactive guide to navigate and understand the application features.
Use the following Checklist if you have changed something on the Backend or Frontend: