From 334bbe9ef222b3ec119d499f42f56efca63abc97 Mon Sep 17 00:00:00 2001
From: Brian Bicknell <brister388@gmail.com>
Date: Tue, 11 Nov 2025 17:10:28 -0500
Subject: [PATCH] Minor adjustments to the UI.

---
 JSMR.Api/.config/dotnet-tools.json            |   5 +
 JSMR.UI.Blazor/.config/dotnet-tools.json      |  13 +++
 JSMR.UI.Blazor/JSMR.UI.Blazor.csproj          |  37 ++++---
 JSMR.UI.Blazor/Pages/Circles.razor            |  35 +++++-
 JSMR.UI.Blazor/Pages/Creators.razor           | 104 ++++++++----------
 JSMR.UI.Blazor/Program.cs                     |   3 +-
 JSMR.UI.Blazor/{ => wwwroot}/appsettings.json |   0
 7 files changed, 114 insertions(+), 83 deletions(-)
 create mode 100644 JSMR.Api/.config/dotnet-tools.json
 create mode 100644 JSMR.UI.Blazor/.config/dotnet-tools.json
 rename JSMR.UI.Blazor/{ => wwwroot}/appsettings.json (100%)

diff --git a/JSMR.Api/.config/dotnet-tools.json b/JSMR.Api/.config/dotnet-tools.json
new file mode 100644
index 0000000..b0e38ab
--- /dev/null
+++ b/JSMR.Api/.config/dotnet-tools.json
@@ -0,0 +1,5 @@
+{
+  "version": 1,
+  "isRoot": true,
+  "tools": {}
+}
\ No newline at end of file
diff --git a/JSMR.UI.Blazor/.config/dotnet-tools.json b/JSMR.UI.Blazor/.config/dotnet-tools.json
new file mode 100644
index 0000000..d4937e0
--- /dev/null
+++ b/JSMR.UI.Blazor/.config/dotnet-tools.json
@@ -0,0 +1,13 @@
+{
+  "version": 1,
+  "isRoot": true,
+  "tools": {
+    "dotnet-ef": {
+      "version": "9.0.10",
+      "commands": [
+        "dotnet-ef"
+      ],
+      "rollForward": false
+    }
+  }
+}
\ No newline at end of file
diff --git a/JSMR.UI.Blazor/JSMR.UI.Blazor.csproj b/JSMR.UI.Blazor/JSMR.UI.Blazor.csproj
index 6565cb5..0268fc8 100644
--- a/JSMR.UI.Blazor/JSMR.UI.Blazor.csproj
+++ b/JSMR.UI.Blazor/JSMR.UI.Blazor.csproj
@@ -1,25 +1,26 @@
 <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
-  <PropertyGroup>
-    <TargetFramework>net9.0</TargetFramework>
-    <Nullable>enable</Nullable>
-    <ImplicitUsings>enable</ImplicitUsings>
-    <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
-  </PropertyGroup>
+	<PropertyGroup>
+		<TargetFramework>net9.0</TargetFramework>
+		<Nullable>enable</Nullable>
+		<ImplicitUsings>enable</ImplicitUsings>
+		<ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
+		<RunAOTCompilation>true</RunAOTCompilation>
+	</PropertyGroup>
 
-  <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.10" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.10" PrivateAssets="all" />
-    <PackageReference Include="Microsoft.AspNetCore.Mvc.Core" Version="2.3.0" />
-    <PackageReference Include="MudBlazor" Version="8.14.0" />
-  </ItemGroup>
+	<ItemGroup>
+		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.10" />
+		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.10" PrivateAssets="all" />
+		<PackageReference Include="Microsoft.AspNetCore.Mvc.Core" Version="2.3.0" />
+		<PackageReference Include="MudBlazor" Version="8.14.0" />
+	</ItemGroup>
 
-  <ItemGroup>
-    <ProjectReference Include="..\JSMR.Application\JSMR.Application.csproj" />
-  </ItemGroup>
+	<ItemGroup>
+		<ProjectReference Include="..\JSMR.Application\JSMR.Application.csproj" />
+	</ItemGroup>
 
-  <ItemGroup>
-    <ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
-  </ItemGroup>
+	<ItemGroup>
+		<ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
+	</ItemGroup>
 
 </Project>
diff --git a/JSMR.UI.Blazor/Pages/Circles.razor b/JSMR.UI.Blazor/Pages/Circles.razor
index 710bc1a..81515d6 100644
--- a/JSMR.UI.Blazor/Pages/Circles.razor
+++ b/JSMR.UI.Blazor/Pages/Circles.razor
@@ -43,8 +43,20 @@ else
                     <JImage ContainerClass="j-circle-image-container-mini" ImageClass="j-circle-image-mini" Source="@ImageUrlProvider.GetImageURL(context.Item.LatestProductId, context.Item.LatestVoiceWorkHasImage ?? false, context.Item.LatestVoiceWorkSalesDate, "main")" />
                 </CellTemplate>
             </TemplateColumn>
-            <PropertyColumn Property="x => x.Name" Title="Name" />
-            <PropertyColumn Property="x => x.MakerId" Title="Maker Id" HeaderStyle="width: 12em" />
+            <TemplateColumn Title="Name">
+                <CellTemplate>
+                    <div class="circle-name-container">
+                        <div class="circle-name">@context.Item.Name</div>
+                    </div>
+                </CellTemplate>
+            </TemplateColumn>
+            @* <TemplateColumn Title="Maker Id">
+                <CellTemplate>
+                    <MudChip T="string" Label="true" Class="maker-id">@context.Item.MakerId</MudChip>
+                </CellTemplate>
+            </TemplateColumn> *@
+            @* <PropertyColumn Property="x => x.Name" Title="Name" />
+            <PropertyColumn Property="x => x.MakerId" Title="Maker Id" HeaderStyle="width: 12em" /> *@
             <TemplateColumn Title="Status" HeaderStyle="width: 10em">
                 <CellTemplate>
                     @if (context.Item.Favorite)
@@ -78,7 +90,7 @@ else
             <PropertyColumn Property="x => x.Downloads" Title="Downloads" HeaderStyle="width: 12em" />
             <PropertyColumn Property="x => x.Releases" Title="Releases" HeaderStyle="width: 12em" />
             <PropertyColumn Property="x => x.Pending" Title="Pending" HeaderStyle="width: 12em" />
-            <TemplateColumn Title="First Release Date" HeaderStyle="width: 14em">
+            @* <TemplateColumn Title="First Release Date" HeaderStyle="width: 14em">
                 <CellTemplate>
                     <MudText>@context.Item.FirstReleaseDate?.ToString("MMMM d, yyyy")</MudText>
                 </CellTemplate>
@@ -87,7 +99,7 @@ else
                 <CellTemplate>
                     <MudText>@context.Item.LatestReleaseDate?.ToString("MMMM d, yyyy")</MudText>
                 </CellTemplate>
-            </TemplateColumn>
+            </TemplateColumn> *@
         </Columns>
     </MudDataGrid>
 
@@ -136,6 +148,21 @@ else
         background: var(--mud-palette-background);
         padding: .5em 1em;
     }
+
+    .circle-name-container {
+        display: inline-flex;
+        flex-direction: column;
+        gap: .5rem;
+    }
+
+    .circle-name {
+        font-size: 1.2rem;
+        font-weight: 600;
+    }
+
+    .maker-id {
+        margin: 0;
+    }
 </style>
 
 @code {
diff --git a/JSMR.UI.Blazor/Pages/Creators.razor b/JSMR.UI.Blazor/Pages/Creators.razor
index 66e026f..0924a0c 100644
--- a/JSMR.UI.Blazor/Pages/Creators.razor
+++ b/JSMR.UI.Blazor/Pages/Creators.razor
@@ -11,7 +11,7 @@
 
 <h1>Creators</h1>
 
-<MudTextField @bind-Value="Keywords" Immediate="true" DebounceInterval="500" Label="Filter" Variant="Variant.Text" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search" />
+<MudTextField T="string" Value="Keywords" ValueChanged="OnKeywordsChanged" Immediate="true" DebounceInterval="500" Label="Filter" Variant="Variant.Text" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search" />
 
 @if (searchResults is null)
 {
@@ -23,24 +23,26 @@ else if (searchResults.Items.Length == 0)
 }
 else
 {
-    <MudDataGrid Items="@searchResults.Items" Style="table-layout: fixed">
-        <Columns>
-            <PropertyColumn Property="x => x.Name" Title="Name" />
-            <PropertyColumn Property="x => x.VoiceWorkCount" Title="Voice Works" HeaderStyle="width: 14em" />
-            <TemplateColumn Title="Favorite" HeaderStyle="width: 8em">
-                <CellTemplate>
-                    <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.Favorite" Color="@(context.Item.Favorite? Color.Secondary: Color.Dark)" />
-                </CellTemplate>
-            </TemplateColumn>
-            <TemplateColumn Title="Blacklisted" HeaderStyle="width: 8em">
-                <CellTemplate>
-                    <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.Block" Color="@(context.Item.Blacklisted? Color.Secondary: Color.Dark)" />
-                </CellTemplate>
-            </TemplateColumn>
-        </Columns>
-    </MudDataGrid>
+    <MudTable Items="@searchResults.Items" Style="table-layout: fixed" Virtualize="true">
+        <HeaderContent>
+            <MudTh>Name</MudTh>
+            <MudTh>Voice Works</MudTh>
+            <MudTh>Favorite</MudTh>
+            <MudTh>Blacklisted</MudTh>
+        </HeaderContent>
+        <RowTemplate>
+                <MudTd DataLabel="Name">@context.Name</MudTd>
+                <MudTd DataLabel="Voice Works">@context.VoiceWorkCount</MudTd>
+                <MudTd DataLabel="Favorite">
+                    <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.Favorite" Color="@(context.Favorite? Color.Secondary: Color.Dark)" />
+                </MudTd>
+                <MudTd DataLabel="Blacklisted">
+                    <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.Block" Color="@(context.Blacklisted? Color.Secondary: Color.Dark)" />
+                </MudTd>
+        </RowTemplate>
+    </MudTable>
 
-    <JPagination @bind-PageNumber="PageNumber" @bind-PageSize="PageSize" @bind-TotalItems="searchResults.TotalItems" />
+    <JPagination PageNumber="PageNumber" PageNumberChanged="OnPageNumberChanged" PageSize="PageSize" PageSizeChanged="OnPageSizeChanged" @bind-TotalItems="searchResults.TotalItems" />
 }
 
 <style>
@@ -61,55 +63,39 @@ else
 </style>
 
 @code {
-    private string? keywords;
-
-    public string? Keywords
-    {
-        get { return keywords; }
-        set
-        {
-            keywords = value;
-            _ = UpdateDataAsync(true);
-        }
-    }
-
-    private int pageNumber = 1;
-
-    public int PageNumber
-    {
-        get { return pageNumber; }
-        set
-        {
-            pageNumber = value;
-            _ = UpdateDataAsync(false);
-        }
-    }
-
-    int pageSize = 100;
-
-    public int PageSize
-    {
-        get { return pageSize; }
-        set
-        {
-            pageSize = value;
-            _ = UpdateDataAsync(true);
-        }
-    }
+    public string? Keywords { get; set; }
+    public int PageNumber { get; set; } = 1;
+    public int PageSize { get; set; } = 100;
 
     SearchResult<CreatorSearchItem>? searchResults;
 
-    protected override Task OnInitializedAsync()
+    protected override async Task OnInitializedAsync()
     {
-        _ = LoadCreatorsAsync();
+        await UpdateDataAsync(true);
+    }
 
-        return Task.CompletedTask;
+    public async Task OnKeywordsChanged(string? newKeywords)
+    {
+        Keywords = newKeywords;
+        await UpdateDataAsync(true);
+    }
+
+    public async Task OnPageNumberChanged(int newPageNumber)
+    {
+        PageNumber = newPageNumber;
+        await UpdateDataAsync(false);
+    }
+
+    public async Task OnPageSizeChanged(int newPageSize)
+    {
+        PageSize = newPageSize;
+        await UpdateDataAsync(true);
     }
 
     private async Task UpdateDataAsync(bool resetPageNumber)
     {
         if (resetPageNumber)
-            pageNumber = 1;
+            PageNumber = 1;
 
         await LoadCreatorsAsync();
     }
@@ -120,7 +106,7 @@ else
             Options: new()
             {
                 PageNumber = PageNumber,
-                PageSize = pageSize,
+                PageSize = PageSize,
                 Criteria = new()
                 {
                     Name = Keywords
@@ -137,6 +123,6 @@ else
 
         searchResults = result?.Results ?? new();
 
-        await InvokeAsync(StateHasChanged);
+        //await InvokeAsync(StateHasChanged);
     }
 }
\ No newline at end of file
diff --git a/JSMR.UI.Blazor/Program.cs b/JSMR.UI.Blazor/Program.cs
index 1835427..1c28932 100644
--- a/JSMR.UI.Blazor/Program.cs
+++ b/JSMR.UI.Blazor/Program.cs
@@ -8,8 +8,7 @@ var builder = WebAssemblyHostBuilder.CreateDefault(args);
 builder.RootComponents.Add<App>("#app");
 builder.RootComponents.Add<HeadOutlet>("head::after");
 
-var apiBase = builder.Configuration["ApiBaseUrl"] ?? builder.HostEnvironment.BaseAddress;
-apiBase = "https://localhost:7277";
+string apiBase = builder.Configuration["ApiBaseUrl"] ?? builder.HostEnvironment.BaseAddress;
 
 Console.WriteLine(apiBase);
 
diff --git a/JSMR.UI.Blazor/appsettings.json b/JSMR.UI.Blazor/wwwroot/appsettings.json
similarity index 100%
rename from JSMR.UI.Blazor/appsettings.json
rename to JSMR.UI.Blazor/wwwroot/appsettings.json