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

[lgcavalheiro]

<--- Put the description here --->

This should close or partially satisfy #1428
This is a very simple system for creating custom categories and adding/removing games to them, similar to how hidden and favorites work.

On the category settings modal, when a category is assigned to the game, clicking on the "X" will remove that game from the category, when a category is in the available categories section, clicking the body of the chip will assign the game to the category, clicking on the "X" will delete the category.

On the library view there's now a dropdown selector to filter games by a category, this filter also stacks with the hidden and platform filters.

Video demonstration:
https://github.com/Heroic-Games-Launcher/HeroicGamesLauncher/assets/10094385/856f5575-02a8-49cc-a727-b2b4df4b2f30

Sample of store/config.json:

---

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]

I'm worried about the x in the available categories categories deleting the category completely. It's too easy to delete things by mistake (maybe we should display a warning saying "This category is applied to these games: ...., are you sure you want to delete it?").

[arielj]

We probably want to add a button in the 3 dots menu in the game page to open the same Categories dialog

[lgcavalheiro]

Fixed issues mentioned above, now before deleting a category outright, a confirmation dialog will show up:

I've also took the liberty of adding a preset category (uncategorized) which will list all games that have no categories assigned to them.

[imLinguin]

Could you also add runner for each game? To avoid issues when the same appid is found in another store, as we plan to extend Heroic to more integrations eventually

[arielj]

I wonder if it's easier to use if we use checkboxes instead of pills. It will also make the UI less "jumpy". That will also simplify the copy:

we would remove the Assigned Categories and Available Categories headers that use a lot of the space

One thing I was expecting was that if I add a new category, it should set that already for the game I'm configuring. Currently I have to first add a category, then it appears in the available ones, then I have to click it.

One thing I noticed is that you can type the same category twice when adding a category, it lets you submit the category but it unassigns every game from it. I think we should disable the submit button when the category typed there already exists.

One error I found is that you can delete a category while you are filtering by it, when you close the modal the app crashes with:

I think we should also trim the category name, you can add " " with any number of white spaces, or " my category " for example

Maybe we can also add some length limit for the category name? I think we should also use a flex box and not a 6-columns grid

The grid forces a number of columns and can end up adding horizontal scroll

[arielj]

Something weird happens with the focus when I use a mouse to control the UI, when I focus the category it goes transparent so I can't see the content, pressing A adds the category if it's in the Available column, pressing A does nothing if it's in the Assigned column.

Adding a category to a game with the controller also loses the position of the current focus cause the element disappears and the next movement starts from an un-focused state which is not great.

Pressing A does nothing when focusing the X button.

categories.mp4

Maybe using checkboxes and labels fixes these issues? we already have the toggle component that we use in the settings and it's controller friendlier. We could have:

[  ]  Category 1                        ( x )
[  ]  Category 2                        ( x )

[flavioislima]

@lgcavalheiro what is the current state of this PR? are you gonna fix the other comments or should we assume it? I think there is just a few small things to improve and one conflict to fix as well :)

[lgcavalheiro]

@flavioislima sry for the hiatus, got busy with work and college these past few weeks, i'll be resuming work on this PR this week.

[flavioislima]

@flavioislima sry for the hiatus, got busy with work and college these past few weeks, i'll be resuming work on this PR this week.

No problem! 👍

[lgcavalheiro]

Hi folks, fixed the issues mentioned, here's how this feature is looking at the moment:

finalforpr_2.webm

• Using appName and runner as well
• Limited category length to 33 (seems to be the limit on steam, so i went with that)
• Trims leading and trailling white spaces from category names
• Does not allow for duplicate categories anymore
• If deleting a category that is being used as filter, will reset filter before deleting the category
• When a new category is created, it will be assigned to the current game as well
• Changed layout in favor of checkboxes, controller testing seems ok

Exemple of new customCategories in store/config.json:

"customCategories": {
			"2D": [
				"1dea8a6ddb544842a58e4b5c8675ff58_legendary",
				"amzn1.adg.product.4a10b5b0-d498-4a74-8053-e31f665dc82c_nile"
			],
			"Action": [
				"1dea8a6ddb544842a58e4b5c8675ff58_legendary",
				"amzn1.adg.product.4a10b5b0-d498-4a74-8053-e31f665dc82c_nile",
				"Petunia_legendary",
				"1133514031_gog"
			]
}

[flavioislima]

@lgcavalheiro those are really nice improvements, thanks for that.

Latest issues are just related to layout on small windows, like this:

Maybe creating another row could fix that. we should have a media query for that.

[lgcavalheiro]

@flavioislima got a basic layout fix going for smaller screens, see if it's better now (didn´t really know how much i should pay attention to responsiveness, since it's a desktop application and stuff, sry):

finalforpr_3_trimmed.webm

[arielj]

In this PR #3266 I'm moving all the filter into a Filters button, that will save some space there (then we could put the categories selector either next to it instead of its own row, or even inside the filters maybe?).

I also think we have to make some decisions:

• what's the minimum width we want to support? (so we know when to stop)
• should we auto-collapse the sidebar when the width is too small? that will free some room for the library
  (of course these questions are unrelated to this PR but something we should do for the whole project, cc @flavioislima )

What I mean is that maybe we can improve the small screens design when both things are merged and those decisions are made.

I think we should merge this and #3266 after the 2.10.1 release (that should be mostly bugfixes).

[lgcavalheiro]

@arielj I did a quick local merge of your PR with mine and having the categories selector by the filters button made the UI look much cleaner indeed :D
I suppose i'll just wait until the new filters menu is rolled out, then i'll rebase against upstream before you guys roll the custom categories out.

About supported widths, my 2 cents would be supporting a minimum between 758px (lowest width i could observe in which Heroic still looks good and nothing is visibly breaking) and 960px (half width of a FHD monitor)

[arielj]

@lgcavalheiro my PR was just merged if you want to update this one against main

[lgcavalheiro]

Hi guys i just finished merging and manually testing stuff to be sure everything is working ok, the merge process was a bit messy so i'd recommend double-checking just to be sure @arielj @flavioislima

On a side note: do you think the search bar suggestions should take the filters into consideration when searching for games? Right now it is not:

finalforpr_4.webm

[flavioislima]

On a side note: do you think the search bar suggestions should take the filters into consideration when searching for games? Right now it is not:

That is a pretty good question.
I think it should not because you can now click on the selected item on the search bar and it will redirect you to the game page. So if we limit to the current filters this won't be possible. So I think we should keep it as it is.

I imagine the following scenario, for instance.
A person enabled some filters and cannot find a certain game. It decides to use the search bar. Right now it will find the game, clicking on it will go to the game page. If we change that, the game will never be found. So I think it is good to have all games there. 🙂

[flavioislima]

Tested everything here and it is working pretty fine.
Thanks a lot for adding this feature to Heroic and I believe it is safe to be on the next release ⚔️ 🛡️