Initial state rework.

Wabbajack.App.Blazor/App.xaml.cs

@@ -1,5 +1,6 @@
 using System;
 using System.Windows;
+using Fluxor;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Hosting;
 using Microsoft.Extensions.Logging;
@@ -24,8 +25,9 @@ namespace Wabbajack.App.Blazor
 
         private static IServiceCollection ConfigureServices(IServiceCollection services)
         {
-            services.AddBlazorWebView();
             services.AddOSIntegrated();
+            services.AddFluxor(o => o.ScanAssemblies(typeof(App).Assembly));
+            services.AddBlazorWebView();
             services.AddTransient<MainWindow>();
             return services;
         }

Wabbajack.App.Blazor/Components/ModlistItem.razor

@@ -1,14 +1,23 @@
 @namespace Wabbajack.App.Blazor.Components
+@using Wabbajack.App.Blazor.Store
+@inherits Fluxor.Blazor.Web.Components.FluxorComponent
 
 <div class="item">
     <div class="display">
         <img src="@Metadata.Links.ImageUri" class="image" alt="@Metadata.Title Image">
         <div class="interaction">
-            <img src="images/icons/install.svg" class="install" alt="Install" @onclick="Download">
+            @if (_installState.Value.CurrentInstallState != InstallState.InstallStateEnum.Configuration)
+            {
+                <img src="images/icons/install.svg" class="install hidden" alt="Install">
+            }
+            else
+            {
+                <img src="images/icons/install.svg" class="install" alt="Install" @onclick="Download">
+            }
             <img src="images/icons/info.svg" class="more" alt="Information">
         </div>
     </div>
-    @if (Status == DownloadStatus.Downloading)
+    @if (_installState.Value.CurrentInstallState == InstallState.InstallStateEnum.Downloading && _installState.Value.CurrentModlistMetadata == Metadata)
     {
         <Progress Percentage=PercentDownloaded></Progress>
     }

Wabbajack.App.Blazor/Components/ModlistItem.razor.cs

@@ -3,9 +3,11 @@ using System.Diagnostics;
 using System.Reactive.Disposables;
 using System.Threading;
 using System.Threading.Tasks;
+using Fluxor;
 using Microsoft.AspNetCore.Components;
 using Microsoft.CodeAnalysis;
 using Microsoft.Extensions.Logging;
+using Wabbajack.App.Blazor.Store;
 using Wabbajack.DTOs;
 using Wabbajack.Networking.WabbajackClientApi;
 using Wabbajack.RateLimiter;
@@ -15,35 +17,29 @@ namespace Wabbajack.App.Blazor.Components
 {
     public partial class ModlistItem
     {
-        //[Inject] private ILogger                   _logger     { get; set; }
-        [Inject] private ModListDownloadMaintainer _maintainer { get; set; }
-        //[Inject] private Client                    _wjClient   { get; set; }
+        [Inject] private ModListDownloadMaintainer _maintainer    { get; set; }
+        [Inject] private IState<DownloadState>     _downloadState { get; set; }
+        [Inject] private IDispatcher               _dispatcher    { get; set; }
 
         [Parameter] public ModlistMetadata Metadata { get; set; }
-
-        public  DownloadStatus      Status            { get; set; }
-        public  double             PercentDownloaded { get; set; }
-        private CompositeDisposable _disposables      { get; set; }
+        
+        public double         PercentDownloaded { get; set; }
 
         private async Task Download()
         {
             await using Timer timer = new(_ => InvokeAsync(StateHasChanged));
-            timer.Change(TimeSpan.FromMilliseconds(500), TimeSpan.FromMilliseconds(500));
+            timer.Change(TimeSpan.FromMilliseconds(250), TimeSpan.FromMilliseconds(250));
             try
             {
-                _disposables = new CompositeDisposable();
-                Status       = DownloadStatus.Downloading;
+                UpdateInstallState(InstallState.InstallStateEnum.Downloading, Metadata);
 
                 (IObservable<Percent> progress, Task task) = _maintainer.DownloadModlist(Metadata);
-                IDisposable dispose = progress.Subscribe(p =>
-                {
-                    PercentDownloaded = p.Value * 100;
-                });
+                IDisposable dispose = progress.Subscribe(p => { PercentDownloaded = p.Value * 100; });
 
                 await task;
                 //await _wjClient.SendMetric("downloading", Metadata.Title);
-                //await UpdateStatus();
                 Debug.Print("##### WE DOWNLOADED THE THING!");
+                UpdateInstallState(InstallState.InstallStateEnum.Configuration);
                 dispose.Dispose();
             }
             catch (Exception e)
@@ -53,12 +49,7 @@ namespace Wabbajack.App.Blazor.Components
 
             await timer.DisposeAsync();
         }
-        
-        public enum DownloadStatus
-        {
-            NotDownloaded,
-            Downloading,
-            Downloaded
-        }
+
+        private void UpdateInstallState(InstallState.InstallStateEnum state, ModlistMetadata? metadata = null) => _dispatcher.Dispatch(new UpdateInstallState(state, metadata));
     }
 }

Wabbajack.App.Blazor/Components/ModlistItem.razor.scss

@@ -5,12 +5,11 @@ $hover-icon-size: 75px;
 
 .item {
   width: 400px;
-  height: 400px;
+  height: 450px;
   overflow: hidden;
   margin: 0.5rem;
-  padding: 0.5rem;
+  padding: 1rem;
   background: rgba(255, 255, 255, 0.1);
-  border-radius: 16px;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(7px);
   -webkit-backdrop-filter: blur(7px);
@@ -49,6 +48,10 @@ $hover-icon-size: 75px;
         height: $hover-icon-size;
         margin: 0;
         transition: all 150ms ease-in-out;
+
+        .hidden {
+          opacity: 0.25;
+        }
         
         &:hover {
           margin-left: 10px;
@@ -61,8 +64,8 @@ $hover-icon-size: 75px;
 
   .info {
     padding-bottom: 1rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
 
     .title {
       color: white;

Wabbajack.App.Blazor/Components/TopBar.razor

@@ -8,7 +8,7 @@
                 <a href="/gallery">Gallery</a>
             </li>
             <li>
-                <a href="/install">Install</a>
+                <a href="/SelectInstall">Install</a>
             </li>
             <li>
                 <a href="/">Compile</a>

Wabbajack.App.Blazor/Components/TopBar.razor.scss

@@ -7,6 +7,9 @@
   background-color: transparent;
   backdrop-filter: blur(5px) grayscale(10%);
   z-index: 2;
+  
+  font-family: $raleway-font;
+  text-transform: uppercase;
 
   display: flex;
   align-items: flex-start;
@@ -15,7 +18,7 @@
 
   nav {
     font-weight: 100;
-    font-size: 1.1em;
+    font-size: 1em;
     line-height: 2rem;
   }
   
@@ -26,7 +29,7 @@
       a {
         color: white;
         display: block;
-        padding: 0.5rem 2rem;
+        padding: 0.5rem 1rem;
         text-decoration: none;
         transition: background-color .25s ease-in-out;
 

Wabbajack.App.Blazor/Controllers/DownloadController.cs

@@ -0,0 +1,51 @@
+using System;
+using System.Diagnostics;
+using System.Threading.Tasks;
+using Fluxor;
+using Wabbajack.App.Blazor.Store;
+using Wabbajack.DTOs;
+using Wabbajack.RateLimiter;
+using Wabbajack.Services.OSIntegrated.Services;
+
+namespace Wabbajack.App.Blazor.Controllers;
+
+public class DownloadController
+{
+    private readonly ModListDownloadMaintainer _maintainer;
+    private readonly IState<DownloadState>     _downloadState;
+    private          IDispatcher               _dispatcher;
+
+    public DownloadController(ModListDownloadMaintainer maintainer, IState<DownloadState> downloadState, IDispatcher dispatcher)
+    {
+        _maintainer    = maintainer;
+        _downloadState = downloadState;
+        _dispatcher    = dispatcher;
+    }
+
+    private async Task DownloadModlist(ModlistMetadata metadata)
+    {
+        // await using Timer timer = new(_ => InvokeAsync(StateHasChanged));
+        // timer.Change(TimeSpan.FromMilliseconds(250), TimeSpan.FromMilliseconds(250));
+        try
+        {
+            (IObservable<Percent> progress, Task task) = _maintainer.DownloadModlist(metadata);
+            IDisposable dispose = progress.Subscribe(p =>
+            {
+                UpdateDownloadState(DownloadState.DownloadStateEnum.Downloading, metadata, p);
+            });
+
+            await task;
+            //await _wjClient.SendMetric("downloading", Metadata.Title);
+            UpdateDownloadState(DownloadState.DownloadStateEnum.Downloaded, metadata);
+            dispose.Dispose();
+        }
+        catch (Exception e)
+        {
+            Debug.Print(e.Message);
+        }
+
+        // await timer.DisposeAsync();
+    }
+    
+    private void UpdateDownloadState(DownloadState.DownloadStateEnum state, ModlistMetadata metadata, Percent? progress = null) => _dispatcher.Dispatch(new UpdateDownloadState(state, metadata, progress));
+}

Wabbajack.App.Blazor/Main.razor

@@ -1,4 +1,6 @@
-<Router AppAssembly="@GetType().Assembly">
+<Fluxor.Blazor.Web.StoreInitializer/>
+
+<Router AppAssembly="@GetType().Assembly">
     <Found Context="routeData">
         <RouteView RouteData="@routeData" DefaultLayout="@typeof(Shared.MainLayout)" />
     </Found>

Wabbajack.App.Blazor/MainWindow.xaml.cs

@@ -1,4 +1,5 @@
 using System;
+using Fluxor;
 using Microsoft.Extensions.Logging;
 
 namespace Wabbajack.App.Blazor
@@ -6,14 +7,18 @@ namespace Wabbajack.App.Blazor
     public partial class MainWindow
     {
         private readonly ILogger<MainWindow> _logger;
-        public MainWindow(ILogger<MainWindow> logger, IServiceProvider serviceProvider)
+        private readonly IStore              _store;
+
+        public MainWindow(ILogger<MainWindow> logger, IStore store, IServiceProvider serviceProvider)
         {
             _logger = logger;
+            _store  = store;
+            _store.InitializeAsync().Wait();
             Resources.Add("services", serviceProvider);
             InitializeComponent();
         }
     }
-    
+
     // Required so compiler doesn't complain about not finding the type. [MC3050]
-    public partial class Main {}
-}
+    public partial class Main { }
+}

Wabbajack.App.Blazor/Pages/Configure.razor

@@ -1,5 +1,9 @@
-@page "/install"
+@page "/configure/{path}"
 @layout Shared.MainLayout
+@using System.Diagnostics
+@using Wabbajack.Paths
+@using Wabbajack.Paths.IO
+@inherits Fluxor.Blazor.Web.Components.FluxorComponent
 
 <div id="content">
     <div class="image"></div>
@@ -23,4 +27,20 @@
         <div class="mod-author">Simon Magus and colinswrath</div>
         <div class="mod-info">Manbeast is a complete overhaul of Skyrim’s Werewolf system designed to balance existing Werewolf mechanics and add powerful new lycanthropic abilities to the game.</div>
     </div>
-</div>
+</div>
+
+@code {
+
+    [Parameter]
+    public string path { get; set; }
+
+    protected override void OnInitialized()
+    {
+        var file = path.ToAbsolutePath();
+        if (file.FileExists())
+        {
+            Debug.Print("IT EXISTS I GUESS");
+        }
+    }
+
+}

Wabbajack.App.Blazor/Pages/Gallery.razor

@@ -1,36 +1,15 @@
 @page "/gallery"
 @layout Shared.MainLayout
+@inherits Fluxor.Blazor.Web.Components.FluxorComponent
 
 @using Wabbajack.Networking.WabbajackClientApi;
-@using System.Linq;
 @using Wabbajack.DTOs
 
 @inject Client _client
 
 <div id="content">
-    @if (_listItems.Count > 0)
+    @foreach (ModlistMetadata item in _listItems)
     {
-        foreach (ModlistMetadata item in _listItems)
-        {
-            <ModlistItem Metadata=@item></ModlistItem>
-        }
+        <ModlistItem Metadata=@item></ModlistItem>
     }
-</div>
-
-@code {
-    List<ModlistMetadata> _listItems = new();
-
-    protected override async Task OnInitializedAsync()
-    {
-        try
-        {
-            ModlistMetadata[] modLists = await _client.LoadLists();
-            _listItems = modLists.ToList();
-            StateHasChanged();
-        }
-        catch (Exception ex)
-        {
-            Console.WriteLine(ex);
-        }
-    }
-}
+</div>

Wabbajack.App.Blazor/Pages/Gallery.razor.cs

@@ -0,0 +1,30 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Wabbajack.DTOs;
+
+namespace Wabbajack.App.Blazor.Pages;
+
+public partial class Gallery
+{
+    List<ModlistMetadata> _listItems = new();
+
+    protected override async Task<Task> OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender) return base.OnAfterRenderAsync(firstRender);
+
+        try
+        {
+            ModlistMetadata[] modLists = await _client.LoadLists();
+            _listItems = modLists.ToList();
+            StateHasChanged();
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine(ex);
+        }
+
+        return base.OnAfterRenderAsync(firstRender);
+    }
+}

Wabbajack.App.Blazor/Pages/Install.razor.cs

@@ -1,5 +0,0 @@
-namespace Wabbajack.App.Blazor.Pages;
-
-public partial class Install
-{
-}

Wabbajack.App.Blazor/Pages/SelectInstall.razor

@@ -0,0 +1,35 @@
+@page "/SelectInstall"
+@layout Shared.MainLayout
+@inject NavigationManager NavigationManager
+
+<div id="content">
+    <div class="select">
+        <div class="browse">
+            <img src="images/icons/cloud-download.svg" alt="Browse Gallery">
+            <span>Browse the Gallery</span>
+        </div>
+        <div class="disk" @onclick="Navigate">
+            <img src="images/icons/disk.svg" alt="Install from File">
+            <span>Install from File</span>
+        </div>
+    </div>
+    <div class="recent">
+        <div class="title">Recently downloaded</div>
+        <div class="modlist">
+            <img src="" alt="">
+            <div class="info">
+                <div class="title">Living Skyrim</div>
+                <div class="description">ForgottenGlory</div>
+            </div>
+        </div>
+    </div>
+</div>
+
+@code {
+
+    public void Navigate()
+    {
+        NavigationManager.NavigateTo("configure");
+    }
+
+}

Wabbajack.App.Blazor/Pages/SelectInstall.razor.scss

@@ -0,0 +1,49 @@
+$install-icon-size: 200px;
+
+#content {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: white;
+
+  .select {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    justify-content: space-evenly;
+
+    div {
+      display: flex;
+      border: solid 1px white;
+      flex-direction: column;
+      align-items: center;
+
+      img {
+        width: $install-icon-size;
+        height: $install-icon-size;
+      }
+    }
+  }
+
+  .recent {
+    .title {
+      font-size: 1.5rem;
+      font-weight: 100;
+    }
+
+    .modlist {
+      img {
+        height: 75px;
+        width: 125px;
+        border: solid 1px white;
+      }
+
+      .info {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}

Wabbajack.App.Blazor/Shared/Globals.css

@@ -1,3 +0,0 @@
-
-
-/*# sourceMappingURL=Globals.css.map */

Wabbajack.App.Blazor/Shared/Globals.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"Globals.css"}

Wabbajack.App.Blazor/Shared/Globals.scss

@@ -1,6 +1,21 @@
-$primary-background-color: #121212;
+@font-face {
+  font-family: "Raleway";
+  src: url("fonts/Raleway-Variable.ttf");
+}
+
+@font-face {
+  font-family: "YanoneKaffeesatz";
+  src: url("fonts/YanoneKaffeesatz-Variable.ttf");
+}
+
+$primary-background-color: #121212;
 $secondary-background-color: #0A0A0A;
 $accent-color: #5E437F;
 
 $header-height: 65px;
-$sidebar-width: 75px;
+$sidebar-width: 75px;
+
+$fallback-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+$raleway-font: 'Raleway', $fallback-font;
+$yanone-font: 'YanoneKaffeesatz', $fallback-font;

Wabbajack.App.Blazor/Store/DownloadState.cs

@@ -0,0 +1,52 @@
+using Fluxor;
+using Wabbajack.DTOs;
+using Wabbajack.RateLimiter;
+
+namespace Wabbajack.App.Blazor.Store;
+
+[FeatureState]
+public class DownloadState
+{
+    public DownloadStateEnum CurrentDownloadState    { get; }
+    public ModlistMetadata   CurrentModlistMetadata  { get; }
+    public Percent           CurrentDownloadProgress { get; }
+
+    // Required for initial state.
+    private DownloadState() { }
+
+    public DownloadState(DownloadStateEnum newState, ModlistMetadata newModlist, Percent newProgress)
+    {
+        CurrentDownloadState    = newState;
+        CurrentModlistMetadata  = newModlist;
+        CurrentDownloadProgress = newProgress;
+    }
+
+    public enum DownloadStateEnum
+    {
+        Waiting,
+        Downloading,
+        Downloaded,
+        Failure
+    }
+}
+
+public class UpdateDownloadState
+{
+    public DownloadState.DownloadStateEnum State            { get; }
+    public ModlistMetadata                 Modlist          { get; }
+    public Percent                         DownloadProgress { get; }
+
+    public UpdateDownloadState(DownloadState.DownloadStateEnum state, ModlistMetadata modlist, Percent? currentDownloadProgress)
+    {
+        State            = state;
+        Modlist          = modlist;
+        DownloadProgress = currentDownloadProgress ?? Percent.Zero;
+    }
+}
+
+public static class DownloadStateReducers
+{
+    [ReducerMethod]
+    public static DownloadState ReduceChangeDownloadState(DownloadState state, UpdateDownloadState action) =>
+        new(action.State, action.Modlist, action.DownloadProgress);
+}

Wabbajack.App.Blazor/Store/InstallState.cs

@@ -0,0 +1,47 @@
+using Fluxor;
+using Wabbajack.DTOs;
+
+namespace Wabbajack.App.Blazor.Store;
+
+[FeatureState]
+public class InstallState
+{
+    public InstallStateEnum CurrentInstallState    { get; }
+    public ModlistMetadata? CurrentModlistMetadata { get; }
+
+    // Required for initial state.
+    private InstallState() { }
+
+    public InstallState(InstallStateEnum newState, ModlistMetadata? newModlist)
+    {
+        CurrentInstallState    = newState;
+        CurrentModlistMetadata = newModlist;
+    }
+    
+
+    public enum InstallStateEnum
+    {
+        Configuration,
+        Installing,
+        Success,
+        Failure
+    }
+}
+
+public class UpdateInstallState
+{
+    public InstallState.InstallStateEnum State   { get; }
+    public ModlistMetadata?              Modlist { get; }
+
+    public UpdateInstallState(InstallState.InstallStateEnum state, ModlistMetadata? modlist = null)
+    {
+        State   = state;
+        Modlist = modlist;
+    }
+}
+
+public static class InstallStateReducers
+{
+    [ReducerMethod]
+    public static InstallState ReduceChangeInstallState(InstallState state, UpdateInstallState action) => new(action.State, action.Modlist);
+}

Wabbajack.App.Blazor/Wabbajack.App.Blazor.csproj

@@ -14,6 +14,8 @@
 
     <ItemGroup>
 <!--        <PackageReference Include="LibSassBuilder" Version="2.0.1" />-->
+        <PackageReference Include="Fluxor" Version="4.2.2-Alpha" />
+        <PackageReference Include="Fluxor.Blazor.Web" Version="4.2.2-Alpha" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebView.Wpf" Version="6.0.101-preview.11.2349" />
         <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.0" />
         <PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation" Version="6.0.1" />
@@ -39,4 +41,8 @@
         <ProjectReference Include="..\Wabbajack.Services.OSIntegrated\Wabbajack.Services.OSIntegrated.csproj" />
     </ItemGroup>
 
+    <ItemGroup>
+      <Folder Include="wwwroot\fonts" />
+    </ItemGroup>
+
 </Project>

Wabbajack.App.Blazor/wwwroot/images/icons/cloud-download.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
+     width="1024" height="1024" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024">
+    <path d="M624 706.3h-74.1V464c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v242.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.7a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9z"
+          fill="#FFF"/>
+    <path d="M811.4 366.7C765.6 245.9 648.9 160 512.2 160S258.8 245.8 213 366.6C127.3 389.1 64 467.2 64 560c0 110.5 89.5 200 199.9 200H304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8h-40.1c-33.7 0-65.4-13.4-89-37.7c-23.5-24.2-36-56.8-34.9-90.6c.9-26.4 9.9-51.2 26.2-72.1c16.7-21.3 40.1-36.8 66.1-43.7l37.9-9.9l13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0 1 52.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9c15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5l37.8 10C846.1 454.5 884 503.8 884 560c0 33.1-12.9 64.3-36.3 87.7a123.07 123.07 0 0 1-87.6 36.3H720c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h40.1C870.5 760 960 670.5 960 560c0-92.7-63.1-170.7-148.6-193.3z"
+          fill="#FFF"/>
+</svg>

Wabbajack.App.Blazor/wwwroot/index.html

@@ -32,5 +32,6 @@
 <div id="app"></div>
 
 <script src="_framework/blazor.webview.js"></script>
+<script src="_content/Fluxor.Blazor.Web/scripts/index.js"></script>
 </body>
 </html>