Utilized more BitBlazor components. Added enhancements to voice work search.

JSMR.UI.Blazor/Components/VoiceWorkFilters.razor

@@ -6,6 +6,11 @@
 @using JSMR.UI.Blazor.Filters
 @using JSMR.UI.Blazor.Services
 
+<div class="search-toolbar">
+    <BitMenuButton TItem="BitMenuButtonItem" Text="Presets" Items="presets" Variant="BitVariant.Outline" OnClick="test" />
+    <BitToggleButton @bind-IsChecked="showAdvancedFilters" Text="@(showAdvancedFilters ? "Advanced" : "Basic")" Variant="BitVariant.Outline" />
+</div>
+
 <div class="search-filter-control-container">
     <div class="search-filter-control-span-2">
         <BitTextField Prefix="Keywords"
@@ -69,6 +74,8 @@
                      Value="@Value.CreatorStatus"
                      ValueChanged="@(value => Update(Value with { CreatorStatus = value }))" />
     </div>
+    @if (showAdvancedFilters)
+    {
         <!-- Row 3 -->
         <div class="search-filter-control-span-2">
             <BitDropdown Prefix="Tags"
@@ -157,6 +164,7 @@
         @* <div class="search-filter-control-span-1">
         <BitSlider Label="Downloads" Min="0" Max="100000" Value="MinDownloads" ValueChanged="OnMinDownloadsChanged" />
     </div> *@
+    }
 </div>
 
 @code {
@@ -169,6 +177,8 @@
     [Parameter]
     public EventCallback<VoiceWorkFilterState> ValueChanged { get; set; }
 
+    private bool showAdvancedFilters { get; set; }
+
     List<BitDropdownItem<Locale>> locales = [];
     List<BitDropdownItem<SaleStatus?>> saleStatuses = [];
     List<BitDropdownItem<CircleStatus?>> circleStatuses = [];
@@ -180,6 +190,16 @@
     List<BitDropdownItem<int>> tags = [];
     List<BitDropdownItem<int>> creators = [];
 
+    private List<BitMenuButtonItem> presets =
+    [
+        new() { Text = "Default", Key = "Default" },
+        new() { Text = "Released English", Key = "Released-English" },
+        new() { Text = "Popular Upcoming", Key = "Favorite-Upcoming" },
+        new() { Text = "Popular This Week", Key = "Popular-ThisWeek" },
+        new() { Text = "Popular This Month", Key = "Popular-ThisMonth" },
+        new() { Text = "Popular This Year", Key = "Popular-ThisYear" },
+    ];
+
     protected override async Task OnInitializedAsync()
     {
         locales = Lookups.GetLocales();
@@ -205,4 +225,89 @@
     // Map DateTimeOffset? -> DateOnly?
     private static DateOnly? FromDto(DateTimeOffset? dto) =>
         dto is null ? null : DateOnly.FromDateTime(dto.Value.Date);
+
+    private async Task test(BitMenuButtonItem? item)
+    {
+        if (item is null)
+            return;
+
+        if (item.Key == "Default")
+        {
+            Value = new()
+            {
+                SaleStatus = SaleStatus.Available,
+                CircleStatus = CircleStatus.NotBlacklisted,
+                TagStatus = TagStatus.NotBlacklisted,
+                CreatorStatus = CreatorStatus.NotBlacklisted,
+                SupportedLanguages = [Language.Japanese, Language.English],
+                Locale = Locale.English
+            };
+
+            _ = Update(Value);
+        }
+        else if (item.Key == "Released-English")
+        {
+            Value = new()
+            {
+                SaleStatus = SaleStatus.Available,
+                SupportedLanguages = [Language.English],
+                Locale = Locale.English,
+                Sort = VoiceWorkSort.ReleaseDateNewToOld
+            };
+
+            _ = Update(Value);
+        }
+        else if (item.Key == "Favorite-Upcoming")
+        {
+            Value = new()
+            {
+                SaleStatus = SaleStatus.Upcoming,
+                CircleStatus = CircleStatus.Favorited,
+                SupportedLanguages = [Language.Japanese, Language.English],
+                Locale = Locale.English,
+                Sort = VoiceWorkSort.MostFavorited
+            };
+
+            _ = Update(Value);
+        }
+        else if (item.Key == "Popular-ThisWeek")
+        {
+            Value = new()
+            {
+                SaleStatus = SaleStatus.Available,
+                SupportedLanguages = [Language.Japanese, Language.English],
+                Locale = Locale.English,
+                Sort = VoiceWorkSort.BestSelling,
+                ReleaseDateStart = DateOnly.FromDateTime(DateTime.Now.AddDays(-8))
+            };
+
+            _ = Update(Value);
+        }
+        else if (item.Key == "Popular-ThisMonth")
+        {
+            Value = new()
+            {
+                SaleStatus = SaleStatus.Available,
+                SupportedLanguages = [Language.Japanese, Language.English],
+                Locale = Locale.English,
+                Sort = VoiceWorkSort.BestSelling,
+                ReleaseDateStart = DateOnly.FromDateTime(DateTime.Now.AddDays(-29))
+            };
+
+            _ = Update(Value);
+        }
+        else if (item.Key == "Popular-ThisYear")
+        {
+            Value = new()
+            {
+                SaleStatus = SaleStatus.Available,
+                SupportedLanguages = [Language.Japanese, Language.English],
+                Locale = Locale.English,
+                Sort = VoiceWorkSort.BestSelling,
+                ReleaseDateStart = DateOnly.FromDateTime(DateTime.Now.AddDays(-366))
+            };
+
+            _ = Update(Value);
+        }
+    }
 }

JSMR.UI.Blazor/Pages/Home.razor

@@ -6,17 +6,17 @@
 
 <PageTitle>Home</PageTitle>
 
-<MudTabs Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-6">
+<BitPivot Size="BitSize.Medium">
-    <MudTabPanel Text="Available" Icon="@Icons.Material.Filled.Home">
+    <BitPivotItem HeaderText="@($"Available ({availableVoiceWorks?.Length ?? 0})")">
         <JProductCollection Products="availableVoiceWorks"></JProductCollection>
-    </MudTabPanel>
+    </BitPivotItem>
-    <MudTabPanel Text="Upcoming" Icon="@Icons.Material.Filled.ArrowUpward">
+    <BitPivotItem HeaderText="@($"Upcoming ({upcomingVoiceWorks?.Length ?? 0})")">
         <JProductCollection Products="upcomingVoiceWorks"></JProductCollection>
-    </MudTabPanel>
+    </BitPivotItem>
-    <MudTabPanel Text="Announcements" Icon="@Icons.Material.Filled.Home">
+    <BitPivotItem HeaderText="@($"Announcements ({announcedVoiceWorks?.Length ?? 0})")">
         <JProductCollection Products="announcedVoiceWorks"></JProductCollection>
-    </MudTabPanel>
+    </BitPivotItem>
-</MudTabs>
+</BitPivot>
 
 @code {
     VoiceWorkSearchResult[]? availableVoiceWorks;
@@ -29,9 +29,6 @@
         _ = LoadUpcomingVoiceWorksAsync();
         _ = LoadAnnouncedVoiceWorksAsync();
 
-        // availableVoiceWorks = await GetAvailableVoiceWorksAsync();
-        // upcomingVoiceWorks = await GetUpcomingVoiceWorksAsync();
-
         return Task.CompletedTask;
     }
 
@@ -55,7 +52,7 @@
 
         var result = await Client.SearchAsync(request);
 
-        availableVoiceWorks = result.Results.Items;
+        availableVoiceWorks = result?.Results.Items;
 
         await InvokeAsync(StateHasChanged);
     }
@@ -80,7 +77,7 @@
 
         var result = await Client.SearchAsync(request);
 
-        upcomingVoiceWorks = result.Results.Items;
+        upcomingVoiceWorks = result?.Results.Items;
 
         await InvokeAsync(StateHasChanged);
     }
@@ -104,7 +101,7 @@
 
         var result = await Client.SearchAsync(request);
 
-        announcedVoiceWorks = result.Results.Items;
+        announcedVoiceWorks = result?.Results.Items;
 
         await InvokeAsync(StateHasChanged);
     }

JSMR.UI.Blazor/wwwroot/css/app.css

@@ -116,6 +116,12 @@ code {
 /* Custom */
 
 /* Search Filters */
+.search-toolbar {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1em;
+}
+
 .search-filter-control-container {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;

JSMR.UI.Blazor/wwwroot/css/bit-blazor.css

@@ -1,3 +1,12 @@
+.bit-tfl {
+    width: 100%;
+}
+
+.bit-tfl-inp {
+    
+    font-family: var(--font-family);
+}
+
 .bit-tfl-inp,
 .bit-drp-wrp,
 .bit-dtp-wrp {
@@ -66,3 +75,9 @@
 .bit-drp-pre, .bit-drp-suf {
     background: rgb(57, 79, 94);
 }
+
+.bit-pvt-cct {
+    font-weight: inherit;
+    font-size: inherit;
+    color: inherit;
+}