Manual installer UI Layout and Styling

[Al12rs]

#449
This handles the views, layout and styling parts

Figma design:
https://www.figma.com/file/Ntr9PttR5VrqpTRwwZHzLu/%F0%9F%93%B1-Mod-list?type=design&node-id=1616-1693&mode=dev

TODO: UI Layout and Styling:

• Setup AdvancedInstaller.UI project
  • Add Fody Weavers
  • Set up Language.resx for translations
  • Exclude some folders from automatic namespacing
  • Get design previews working by referencing library from main app.
• Unsupported Mod Overlay (Overlay just saying the mod is unsupported, Cancel/AdvancedInstall)
  • file structure
  • Layout
  • Styling
  • Text
  • Translations
  • Warning Icon
  • Footer
• Overlay container view
  • file structure
  • Layout
  • Styling
  • Text
  • Translations
  • Fix rounded corners not applying
  • Overlay header with icon
    • Layout
    • Styling
    • Text
    • Translations
• Body view
  • file structure
  • Layout
  • Styling
  • Text
  • Translations
• ModContentSection
  • file structure
  • Header Section
    • Layout
    • Styling
    • Text
    • Translations
  • Mod contents File Tree
• ResultsSection
  • Grayed out empty version
    • Layout
    • Translation
  • Install location preview version
    • Header section
      • Layout
      • Translations
    • File Tree
  • Select install location version
    • Header section
      • Layout
      • Translations
    • Suggested section
      • Layout
      • Translations
      • Suggested Entry View
    • FileTree Section
      • Layout
      • Translations
      • Actual file tree
  • file structure
  • Layout
  • Styling
  • Text
  • Translations
  • Header section
• Suggested Entry View
  • File Structure
  • Layout
  • Text
• File Tree
  • File Structure
  • File icon
  • Folder icon
  • Layout
  • Fix constrained space case
  • Translations
  • Good design VM for preview
  • Mod Content specific File Tree stuff:
    • Round Install button (Install all, install, Install folder)
    • Select Location with X button (while selecting location)
    • X + Location button for mapped files
    • X + Include with Folder (while selecting location)
    • X + Included with folder for mapped sub files (blue version).
  • Results version specific stuff:
    • "NEW" pill labels
    • tick "folder merged" white pill
    • warning "dupe folder" white pill
    • X buttons
    • + Create Folder button
    • Cancel Button
    • Save button
    • Delete button
    • Select button
• OverlayFooter
  • file structure
  • Layout
  • Styling
  • Text
  • Translations
• Added Tertiary button style to Style Index (LeftMenuItem contained additional unwanted styling like size and padding)
• Add Pill Accent style
• Add Pill Standard style
• Add "Add Circle" custom icon
• Fix Round Button for Game widget
• Add WidgetRounded button style (https://www.figma.com/file/8pjtQeNggvVi7RWoLNGV80/%F0%9F%A7%B0-Nexus-Mods-Design-System?type=design&node-id=6135-21484&mode=dev)
• Add Close Icon style
• Add plus icons style
• Add check icon style
• Add Button.Rounded style
• Add Button.Rounded.Active style
• Add Button.Rounded.SemiActive style
• Add Button.Rounded.SemiActiveAccent style
• Add Button.Rounded.Accent Style
• Add disabled and pointer over versions for all Rounded button styles

Non UI Layout/Styling TODO:

• Make Advanced installer usable from UI (SSE and SLE default method for now).
• Close and cancel installation on Footer Cancel and Top right Close buttons.
• "X Include with folder" button functionality.
• Populate Suggested section with game locations
• Pass in the mod name to UnsupportedModOverlay
• Pass in the mod name to AdvancedInstallerOverlay
• Make Mod Name always Caps
• "Select" button functionality on SuggestedEntry and SelectTreeEntry.
• "X" Unlink button functionality on modContent view
• Cleanup preview root node if empty.
• Switch to Empty preview view if Preview is empty.
• Linking a folder always links all children, even if child was excluded.
• Unlinking a folder always unlinks all children, even if some were linked someplace else.
• "X" Unlink modContent button show name of linked location.
• "X" Unlink button functionality on PreviewTreeEntry
• After mapping a folder, un-mapping all children doesn't unlink the folder.
• Enable Install button when there is something to be installed (BodyVM CanInstall property).
• Install button functionality.
• "Create folder" functionality
  • Edit button functionality
    • Switch states and update view
  • Save button functionality
    • Validate text input
    • Enable Save button only if text can be trimmed to a valid name
    • Create new node for folder
    • Create new "Create Folder node" under the new node.
  • Cancel button functionality
    • Switch states and update view
  • Remove created button functionality
• Review/Fix Tests.
• Other TBD

Not implemented in this version:

• Disable everything while editing Createfolder
• Dupe folder pill
• Folder merged pill
• Add nested LocationIds to SuggestedEntries and make sure each is linked to a TreeNode beneath. (This is currently problematic because the tree underneath is currently populating from the FS starting from Top level LocationIds, which doesn't guarantee the presence of nested LocationIds in the tree). FS part might need to go in favour of just populating a tree from LocationIds.
• Cleanup and XML Comments.

Known issues:

• Referencing Advanced installer from the DataModel or main App ui code is not possible due to creation of Circular dependency between projects. To resolve this an abstraction project is needed, see Unnecessary Project Dependencies: Introduce Abstractions or Common Package #207.
• Referencing advanced installer from Games breaks tests and in general doesn't work in CLI setting as it requires the OverlayManager. Have the AdvancedInstaller use an interface that does the actual install. The main version just returns nothing "not supported", then register another implementation of the interface in the AdvanencedInstallerUI project that does all the UI stuff. Then create another fallback installer in the CLI project that just installs everything to the Game folder. This installer should mostly be used for testing.
• AdvancedInstaller.cs is in AdvancedInstaller.UI project, should instead be in AdvancedInstaller project.
• AdvancedInstaller uses generics for Testing purposes, avoid having to use generics here. Use DI or another solution instead.
• Logic driving the UI is distributed between various VM, like TreeEntries deeply nested in different locations of the VM hierarchy, with no clear or easy method of communication between them. This makes maintaining the code and adding features very difficult. Follow new UI coding guidelines to make VM simpler and centralize the logic in BodyVM (Not higher as Overlay version will be discarded for Panels)
• There are multiple instances where the UI was split into multiple axaml files to be able to populate ItemsControls such as Lists or similar. Consider reducing the number of Views by compacting them and leveraging new ways to handle this described in UI coding guidelines.
• Consider renaming the 3 different ITreeEntryViewModel to differentiate them more clearly.
• Consider cleaning up the namespaces.
• Change how data is represented in DeploymentData and how UI data is derived from it.
• Try using DynamicData based trees
• Rework the tests

[codecov]

Codecov Report

Merging #673 (9575baf) into main (b324e46) will increase coverage by 0.30%.
The diff coverage is 68.62%.

❗ Current head 9575baf differs from pull request most recent head 7a39574. Consider uploading reports for the commit 7a39574 to get more accurate results

@@            Coverage Diff             @@
##             main     #673      +/-   ##
==========================================
+ Coverage   62.73%   63.04%   +0.30%     
==========================================
  Files         585      606      +21     
  Lines       17422    18379     +957     
  Branches     1219     1301      +82     
==========================================
+ Hits        10930    11587     +657     
- Misses       6170     6453     +283     
- Partials      322      339      +17     

Flag	Coverage Δ
Linux	62.38% <68.62%> (+0.41%)	⬆️
Windows	62.10% <68.62%> (+0.21%)	⬆️
clean_environment_tests	63.02% <68.62%> (+0.30%)	⬆️
network_tests	?

Flags with carried forward coverage won't be shown. Click here to find out more.

Files	Coverage Δ
...edInstaller.UI/Common/ICheckIfItemAlreadyExists.cs	100.00% <100.00%> (ø)
...taller.UI/Content/Bottom/Footer/FooterViewModel.cs	100.00% <100.00%> (ø)
...taller.UI/Content/IAdvancedInstallerCoordinator.cs	100.00% <100.00%> (ø)
....UI/Content/Left/ModContent/ModContentViewModel.cs	100.00% <100.00%> (ø)
...tent/Right/Results/PreviewView/PreviewViewModel.cs	100.00% <100.00%> (ø)
...s/PreviewView/Tree/LocationPreviewTreeViewModel.cs	100.00% <100.00%> (ø)
...SelectLocation/Tree/SelectLocationTreeViewModel.cs	100.00% <100.00%> (ø)
...s/NexusMods.Games.AdvancedInstaller.UI/Services.cs	100.00% <100.00%> (ø)
...exusMods.Games.AdvancedInstaller/DeploymentData.cs	97.43% <100.00%> (+2.99%)	⬆️
...ames.AdvancedInstaller/DeploymentDataExtensions.cs	100.00% <100.00%> (ø)
... and 39 more

... and 5 files with indirect coverage changes

[erri120]

Is this a left-over?

[Al12rs]

That is where you would put it to test/use it. If I leave it there though it breaks tests because it requires the OverlayManager, that isn't available in CLI setting.

[erri120]

A rework should change how the data is represented internally (DeploymentData), how the UI is derived from it and how the UI interacts with the data. https://github.com/Nexus-Mods/NexusMods.App/blob/main/docs/UICodingConventions.md#trees can be used as a reference for that.

[erri120]

The installer throws an exception and fails to start if one of the locations provided by the game is a file instead of a directory:

Failed to get mods from installer NexusMods.Games.AdvancedInstaller.UI.AdvancedInstaller`2[NexusMods.Games.AdvancedInstaller.UI.UnsupportedModOverlayViewModelFactory,NexusMods.Games.AdvancedInstaller.UI.AdvancedInstallerOverlayViewModelFactory]|System.IO.DirectoryNotFoundException: Could not find a part of the path '/home/florian/.local/share/Red Hook Studios/Darkest/persist.options.json'.
   at System.IO.Enumeration.FileSystemEnumerator`1.CreateDirectoryHandle(String path, Boolean ignoreNotFound)
   at System.IO.Enumeration.FileSystemEnumerator`1.Init()
   at NexusMods.Paths.DirectoriesEnumerator..ctor(String directory, String pattern, EnumerationOptions options, IOSInformation os)
   at NexusMods.Paths.FileSystem.InternalEnumerateDirectories(AbsolutePath directory, String pattern, Boolean recursive)+MoveNext()
   at NexusMods.Games.AdvancedInstaller.UI.Content.Right.Results.SelectLocation.SelectableDirectoryEntry.TreeEntryViewModel.CreateChildrenRecursive(AbsolutePath currentDirectory, LocationId locationId, Int32 dirSubstringLength, IAdvancedInstallerCoordinator coordinator) in /home/florian/projects/NexusMods.App/src/Games/NexusMods.Games.AdvancedInstaller.UI/Content/Right/Results/SelectLocation/Tree/SelectableDirectoryEntry/TreeEntryViewModel.cs:line 186
   at NexusMods.Games.AdvancedInstaller.UI.Content.Right.Results.SelectLocation.SelectableDirectoryEntry.TreeEntryViewModel.Create(AbsolutePath absPath, GamePath gamePath, IAdvancedInstallerCoordinator coordinator, String rootName) in /home/florian/projects/NexusMods.App/src/Games/NexusMods.Games.AdvancedInstaller.UI/Content/Right/Results/SelectLocation/Tree/SelectableDirectoryEntry/TreeEntryViewModel.cs:line 162
   at NexusMods.Games.AdvancedInstaller.UI.Content.Right.Results.SelectLocation.SelectLocationTreeViewModel..ctor(AbsolutePath absPath, LocationId treeRoot, String rootName, IAdvancedInstallerCoordinator coordinator) in /home/florian/projects/NexusMods.App/src/Games/NexusMods.Games.AdvancedInstaller.UI/Content/Right/Results/SelectLocation/Tree/SelectLocationTreeViewModel.cs:line 13
   at NexusMods.Games.AdvancedInstaller.UI.Content.Right.Results.SelectLocation.SelectLocationViewModel..ctor(GameLocationsRegister register, IAdvancedInstallerCoordinator directorySelectedObserver, String gameName) in /home/florian/projects/NexusMods.App/src/Games/NexusMods.Games.AdvancedInstaller.UI/Content/Right/Results/SelectLocation/SelectLocationViewModel.cs:line 24
   at NexusMods.Games.AdvancedInstaller.UI.Content.BodyViewModel..ctor(String modName, FileTreeNode`2 archiveFiles, GameLocationsRegister register, String gameName) in /home/florian/projects/NexusMods.App/src/Games/NexusMods.Games.AdvancedInstaller.UI/Content/BodyViewModel.cs:line 37
   at NexusMods.Games.AdvancedInstaller.UI.AdvancedInstallerOverlayViewModel..ctor(String modName, FileTreeNode`2 archiveFiles, GameLocationsRegister register, String gameName) in /home/florian/projects/NexusMods.App/src/Games/NexusMods.Games.AdvancedInstaller.UI/Overlay/AdvancedInstallerOverlay/AdvancedInstallerOverlayViewModel.cs:line 20
   at NexusMods.Games.AdvancedInstaller.UI.AdvancedInstallerOverlayViewModelFactory.Create(FileTreeNode`2 archiveFiles, GameLocationsRegister register, String gameName, String modName) in /home/florian/projects/NexusMods.App/src/Games/NexusMods.Games.AdvancedInstaller.UI/AdvancedInstaller.cs:line 165
   at NexusMods.Games.AdvancedInstaller.UI.AdvancedInstaller`2.ShowAdvancedInstallerOverlay(String modName, FileTreeNode`2 archiveFiles, GameLocationsRegister register, String gameName, Object referenceItem) in /home/florian/projects/NexusMods.App/src/Games/NexusMods.Games.AdvancedInstaller.UI/AdvancedInstaller.cs:line 108
   at NexusMods.Games.AdvancedInstaller.UI.AdvancedInstaller`2.GetDeploymentDataAsync(GameInstallation gameInstallation, Loadout loadout, String modName, ModId baseModId, FileTreeNode`2 archiveFiles, CancellationToken cancellationToken) in /home/florian/projects/NexusMods.App/src/Games/NexusMods.Games.AdvancedInstaller.UI/AdvancedInstaller.cs:line 89
   at NexusMods.Games.AdvancedInstaller.UI.AdvancedInstaller`2.GetModsAsync(GameInstallation gameInstallation, LoadoutId loadoutId, ModId baseModId, FileTreeNode`2 archiveFiles, CancellationToken cancellationToken) in /home/florian/projects/NexusMods.App/src/Games/NexusMods.Games.AdvancedInstaller.UI/AdvancedInstaller.cs:line 62
   at NexusMods.DataModel.ArchiveInstaller.<>c__DisplayClass7_1.<<AddMods>b__6>d.MoveNext() in /home/florian/projects/NexusMods.App/src/NexusMods.DataModel/ArchiveInstaller.cs:line 103

[erri120]

As discussed before, I won't mention the issues listed in #750.