UI refinements for Multiple Loadouts

[Greg-Nexus]

EDIT (Al12rs):

Converting this ticket to UI refinement ticket since the functionality was completed. See https://github.com/Nexus-Mods/NexusMods.App/issues/401#issuecomment-2242416759 for remaining items.

User story

As a user with multiple loadouts

I want to quickly switch between loadouts

So that I can apply different sets of mods to my game

Requirements

Users need to be able to quickly switch between loadouts.

We need to consider whether switching a loadout applies it, or whether that is a separate action that needs to be taken.

This issue should consider how we clearly display which loadout is being viewed/edited vs. which is currently loaded.

This will require #982 to be completed first as we'll need to "unmod" a game in order to switch between loadouts

[Al12rs]

Currently we show the loadouts on the Spine, but this can create confusion for users, specifically as to which loadout is active. The active loadout is used to determine where Downloads should be installed and where Outside changed should be placed.

So we need a way to make it clear to users which loadout is currently active.

We should also keep in mind the ability of users to have multiple windows of the App open and being able to have two loaoduts open side by side. This should be allowed, so we still need a way to make it clear which of them is the active one.

[Al12rs]

• Implement design #1180

[Al12rs]

Multiple Loadouts remaining TODO:

• [x] #1842
• [x] #1748
• [x] #1818
• [x] LoadoutBadge:
  • [x] Show Progress spinner while Loadout is applying
• [x] #1817
• [x] Show Loadout Name in MainWindow TopBar when inside a Loadout workspace (to be done as part of #1686 )
• [x] #1804
• [ ] MyLoadouts page UI and behaviors:
  • [x] Implement LastApplied date
  • [ ] Add "Are you sure you want to delete the loadout" confirm message box (requires #1128)
  • [ ] Show Skeleton Card while a new loadout is creating, to give visual feedback of work
  • [ ] Keep Deleting card state for at least 1500ms
  • [ ] Disable Hover state on Loadout Card while child buttons are hovered
  • [x] Only allow deleting Loadout if it isn't the last one
  • [x] Add Empty State: https://www.figma.com/design/TbJiArfCPTv9fQFIEPuwd5/%F0%9F%93%B1-Loadouts?node-id=518-6243&t=Zm8SQQpNnmk23kTE-1
• [ ] Spine UI and behaviour changes:
  • [x] Add button to open "My Games" page
  • [x] Add LoadoutBadge to ImageButtons
    • [x] Update 'selected' state on loadout badge
  • [x] Sort Loadout spine entries
  • [x] Add scroller to spine, in case of overflow
  • [x] Fix layout to not go under Download button
  • [x] Grouping of loadout ImageButtons by game install
    • [ ] Make loadout spine groups collapsible as per design
  • [x] Don't show LoadoutBadge ? on spine loadout items if it is the only loadout for that gameinstall

[LukeNexusMods]

@Al12rs Can this be closed now?

[Al12rs]

@Al12rs Can this be closed now?

Only if the remaining items are made into tickets or moved to another ticket