[UI/UX] Filters dropdown in Library. Show only installed #3266

arielj · 2023-11-25T15:40:37Z

This PR fixes #1881 and adds a filter requested in discord (show only installed games).

Now all filtering options are grouped in a dropdown that shows up when clicking/hovering the Filters button.

filters-dropdown.mp4

This makes the UI more consistent anda easier to maintain:

it's easier to add more filters without dealing with sizes and positioning
it's easier to translate elements without dealing with sizes
we can use more text and less icons with hover tooltips (it's more accessible)
all filters are in the same place

I also included 2 more fixes closely related:

I added a Show Installed Only filter that was requested many times
The Show Favourites Only filter was not composable (turning it on was ignoring all other filters)

It should honor the older filtering configurations (so if a user was filtering only GOG, only GOG will be enabled in the new filters)

Note two changes:

because the store filter is now composable instead of exclusive, there was some code in the library header to say Epic/GOG/etc in the library title instead of All Games but that can't be done now cause we can toggle more than 1 store at a time
the library refresh icon was triggering a background refresh ONLY for when the GOG filter was selected, that doesn't make much sense now so I made it refresh in the background for all store (we could make it refresh in the foreground for all stores if desired instead)

Use the following Checklist if you have changed something on the Backend or Frontend:

Tested the feature and it's working on a current and clean install.
Tested the main App features and they are still working on a current and clean install. (Login, Install, Play, Uninstall, Move games, etc.)
Created / Updated Tests (If necessary)
Created / Updated documentation (If necessary)

arielj · 2023-11-25T15:41:08Z

public/locales/en/translation.json

-        "hide_non_available_games": "Hide non-available games",
-        "ignore_hidden": "Ignore Hidden",
-        "platform": "Platform",
-        "show_all_games": "Show all games",


these are not needed anymore

arielj · 2023-11-25T15:41:36Z

src/frontend/components/UI/ActionIcons/index.tsx

-
-  const showNonAvailableTitle = showNonAvailable
-    ? t('header.hide_non_available_games', 'Hide non-available games')
-    : t('header.show_available_games', 'Show non-Available games')


moving all the filters from here to LibraryFilters

arielj · 2023-11-25T15:42:22Z

src/frontend/components/UI/Header/index.css

-    grid-template-columns: 1fr min-content;
-    grid-template-areas:
-      'search search'
-      'filters filters';


we don't need to drop into a second row now that the filters element is smaller

arielj · 2023-11-25T15:43:40Z

src/frontend/screens/Library/components/LibraryHeader/index.tsx

@@ -17,7 +15,7 @@ export default React.memo(function LibraryHeader({
  handleAddGameButtonClick
 }: Props) {
  const { t } = useTranslation()
-  const { category, showFavourites } = useContext(LibraryContext)
+  const { showFavourites } = useContext(LibraryContext)


we don't have a single category anymore (I didn't like the word category anyway haha), so the code that depended on this was removed

arielj · 2023-11-25T15:44:06Z

src/frontend/screens/Library/constants.ts

we can't change the library title based on the category cause now they are composable, so removing this

flavioislima · 2023-11-27T21:14:57Z

That is looking pretty great. I will do some testing during the week :D

flavioislima · 2023-11-28T14:29:53Z

Testing here. Overall looks good.
Some good additions would be to:

Have a ALL Button that will select everything
Do not allow to unselect all stores and all platforms if possible (I imagine some people might come to us asking why their library is gone).
Also, I am not sure if that is expected but selecting all stores by deselecting all platforms makes it show native linux games + Browser games.

If those are too much we can improve it in another PR since most of the feature is working fine :)

arielj · 2023-11-28T16:02:49Z

I implemented that if you don't select any platform it behaves like if all platforms are selected. Same with the stores, selecting none is like selecting all. To avoid that problem of users deselecting everything and then complaining haha.
I didn't add an All cause that felt different to the rest of the options (each check is composable, we would have to handle the All in a different way, I wanted to avoid the extra code, and as a button makes the UI kinda inconsistent.

the third element seems to be a bug, I'll check that later today

arielj · 2023-11-28T23:18:52Z

Just pushed a fix with the missing windows games with nothing selected.

For the other two:

we can allow users to unselect everything, it will just show all games so I think it's safe, if somebody expect that to not show any game I can jump in and ask "but why?"
for the All button, I'd wait to see if it's something needed, it will make the UI inconsistent with a button or a check box that works different than the rest (and we would need 2 of those one for platforms and one for stores)

flavioislima · 2023-11-29T21:19:08Z

Just pushed a fix with the missing windows games with nothing selected.

For the other two:

* we can allow users to unselect everything, it will just show all games so I think it's safe, if somebody expect that to not show any game I can jump in and ask "but why?"

* for the `All` button, I'd wait to see if it's something needed, it will make the UI inconsistent with a button or a check box that works different than the rest (and we would need 2 of those one for platforms and one for stores)

Sounds good, lets gather some feedback.

i believe this one is ready to be merged since it is not breaking anything, so it can be on the next release.

flavioislima

LGTM

arielj added 5 commits November 25, 2023 11:41

Group library filters in a dropdown. Add only installed filter

9a97fec

Favorites filter composable. Refresh libraries in background

ef463b5

Re-add translation strings

398c2f8

Fix checked status for store filters

cb452a8

Remove console.log

3eda2ee

arielj added the pr:ready-for-review Feature-complete, ready for the grind! :P label Nov 25, 2023

arielj requested review from a team, flavioislima, CommandMC, Etaash-mathamsetty, Nocccer and imLinguin and removed request for a team November 25, 2023 15:40

arielj commented Nov 25, 2023

View reviewed changes

arielj mentioned this pull request Nov 26, 2023

[Feature] Add custom user-defined game categories #1428 #3115

Merged

4 tasks

Fix missing windows games when no platform is selected

86d1dd4

flavioislima approved these changes Nov 29, 2023

View reviewed changes

arielj merged commit 3cf6091 into main Nov 29, 2023
13 checks passed

arielj deleted the filters-dropdown branch November 29, 2023 22:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[UI/UX] Filters dropdown in Library. Show only installed #3266

[UI/UX] Filters dropdown in Library. Show only installed #3266

arielj commented Nov 25, 2023

arielj Nov 25, 2023

arielj Nov 25, 2023

arielj Nov 25, 2023

arielj Nov 25, 2023

arielj Nov 25, 2023

flavioislima commented Nov 27, 2023

flavioislima commented Nov 28, 2023 •

edited

Loading

arielj commented Nov 28, 2023 •

edited

Loading

arielj commented Nov 28, 2023

flavioislima commented Nov 29, 2023

flavioislima left a comment

[UI/UX] Filters dropdown in Library. Show only installed #3266

[UI/UX] Filters dropdown in Library. Show only installed #3266

Conversation

arielj commented Nov 25, 2023

arielj Nov 25, 2023

Choose a reason for hiding this comment

arielj Nov 25, 2023

Choose a reason for hiding this comment

arielj Nov 25, 2023

Choose a reason for hiding this comment

arielj Nov 25, 2023

Choose a reason for hiding this comment

arielj Nov 25, 2023

Choose a reason for hiding this comment

flavioislima commented Nov 27, 2023

flavioislima commented Nov 28, 2023 • edited Loading

arielj commented Nov 28, 2023 • edited Loading

arielj commented Nov 28, 2023

flavioislima commented Nov 29, 2023

flavioislima left a comment

Choose a reason for hiding this comment

flavioislima commented Nov 28, 2023 •

edited

Loading

arielj commented Nov 28, 2023 •

edited

Loading