Updated UI with BitBlazor components.

2025-11-22 14:42:29 -05:00
parent 2418bd0a8f
commit 8490b49354
22 changed files with 552 additions and 68 deletions
--- a/JSMR.UI.Blazor/App.razor
+++ b/JSMR.UI.Blazor/App.razor
@@ -1,4 +1,8 @@
-<Router AppAssembly="@typeof(App).Assembly">
+<HeadContent>
+    <RadzenTheme Theme="material-dark" />
+</HeadContent>
+
+<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
--- a/JSMR.UI.Blazor/Components/JPagination.razor
+++ b/JSMR.UI.Blazor/Components/JPagination.razor
@@ -4,7 +4,7 @@
    </div>
    <MudPagination class="pager" ShowFirstButton="true" ShowLastButton="true" Count="@((int)Math.Ceiling((decimal)TotalItems / (decimal)PageSize))" Selected="@PageNumber" SelectedChanged="OnSelectedChanged" />
    <div class="page-sizes">
-        <MudSelect T="int" Value="PageSize" ValueChanged="OnPageSizeChanged" Dense="true" Variant="Variant.Outlined" Margin="Margin.Dense">
+        <MudSelect T="int" Value="PageSize" ValueChanged="OnPageSizeChanged" Dense="true" Variant="MudBlazor.Variant.Outlined" Margin="Margin.Dense">
            @foreach (int value in PageSizes)
            {
                <MudSelectItem Value="@value">@value</MudSelectItem>
--- a/JSMR.UI.Blazor/Components/JProduct.razor
+++ b/JSMR.UI.Blazor/Components/JProduct.razor
@@ -1,8 +1,9 @@
@using JSMR.Application.VoiceWorks.Queries.Search
+@using JSMR.Domain.Enums
@using JSMR.UI.Blazor.Services
@using System.Globalization

-<div class="j-card j-voice-work-card">
+<div class=@GetCardClasses(Product)>
    <div class="j-voice-work-image-container">
        <JImage OverlayClass="j-voice-work-image-overlay" ImageClass="j-voice-work-image" Source="@ImageUrlProvider.GetImageUrl(Product, "main")"></JImage>
    </div>
@@ -15,14 +16,14 @@
                <MudChip T="string"
                         Href=@($"https://www.dlsite.com/maniax/circle/profile/=/maker_id/{Product.MakerId}.html")
                         Target="_blank"
-                         Variant="Variant.Filled"
+                         Variant="MudBlazor.Variant.Filled"
                         Icon="@Icons.Material.Outlined.Circle">@Product.Maker</MudChip>
                @foreach (var creator in Product.Creators)
                {
                    <MudChip T="string"
                             Href=@($"https://www.dlsite.com/maniax/fsr/=/keyword_creater/{creator.Name}")
                             Target="_blank"
-                             Variant="Variant.Filled"
+                             Variant="MudBlazor.Variant.Filled"
                             Icon="@Icons.Material.Filled.Person">@creator.Name</MudChip>
                }
            </span>
@@ -53,6 +54,19 @@
        }
        @* <div class="j-icon-2 j-icon-2-flag-@GetFlagClassSuffix(Product)"></div> *@
        <div class="j-spacer"></div>
+        <div class="j-product-indicators">
+            @if (Product.IsValid != true)
+            {
+                <div class="j-product-indicator j-product-indicator-invalid">
+                    <div class="j-icon j-icon-warning-fill"></div>
+                </div>
+            }
+            @if (Product.Favorite)
+            {
+                <div class="j-product-indicator j-product-indicator-favorite">
+                    <div class="j-icon j-icon-heart-fill"></div>
+                </div>
+            }
            @if (Product.HasTrial || Product.HasChobit)
            {
                <div class="j-trial-container">
@@ -61,11 +75,28 @@
            }
        </div>
    </div>
+</div>

@code {
    [Parameter]
    public required VoiceWorkSearchResult Product { get; set; }

+    private string GetCardClasses(VoiceWorkSearchResult voiceWork)
+    {
+        List<string> classNames = ["j-card", "j-voice-work-card"];
+
+        if (voiceWork.Status == (byte)VoiceWorkStatus.NewRelease)
+        {
+            classNames.Add("type-sale");
+        }
+        else if (voiceWork.Status == (byte)VoiceWorkStatus.NewAndUpcoming)
+        {
+            classNames.Add("type-new");
+        }
+
+        return string.Join(" ", classNames);
+    }
+
    private string GetReleaseDateText(VoiceWorkSearchResult voiceWork)
    {
        if (voiceWork.SalesDate.HasValue)
--- a/JSMR.UI.Blazor/Components/JTextBox.razor
+++ b/JSMR.UI.Blazor/Components/JTextBox.razor
@@ -0,0 +1,75 @@
+<RadzenStack Orientation="Radzen.Orientation.Vertical" Gap=".5em">
+    @if (string.IsNullOrWhiteSpace(Label) == false)
+    {
+        <RadzenLabel @bind-Text=Label Component="DropDownTextValueProperties" />
+    }
+    <RadzenTextBox class="j-input j-textbox" Value="@currentValue" Immediate="@Immediate" ValueChanged="@OnInnerValueChanged" Change="@OnInnerChange" />
+</RadzenStack>
+
+@code {
+    [Parameter]
+    public required string Label { get; set; }
+
+    [Parameter]
+    public string? Value { get; set; }
+
+    [Parameter]
+    public EventCallback<string?> ValueChanged { get; set; }
+
+    [Parameter]
+    public bool Immediate { get; set; }
+
+    [Parameter]
+    public int DebounceInterval { get; set; } = 300;
+
+    /// <summary>If true, also emit immediately on blur/Enter (in addition to debounced typing).</summary>
+    [Parameter]
+    public bool EmitOnCommit { get; set; } = false;
+
+    private string? currentValue;
+    private CancellationTokenSource? cancellationTokenSource;
+
+    protected override void OnParametersSet()
+    {
+        currentValue = Value;
+    }
+
+    private void OnInnerValueChanged(string? newValue)
+    {
+        currentValue = newValue;
+        _ = DebounceEmitAsync();
+        //Task.Run(DebounceEmitAsync);
+    }
+
+    private async Task DebounceEmitAsync()
+    {
+        cancellationTokenSource?.Cancel();
+        cancellationTokenSource?.Dispose();
+        cancellationTokenSource = new();
+
+        try
+        {
+            await Task.Delay(DebounceInterval, cancellationTokenSource.Token);
+            await ValueChanged.InvokeAsync(currentValue);
+        }
+        catch (TaskCanceledException)
+        {
+            
+        }
+    }
+
+    private async Task OnInnerChange(object? _)
+    {
+        if (EmitOnCommit)
+        {
+            cancellationTokenSource?.Cancel();
+            await ValueChanged.InvokeAsync(currentValue);
+        }
+    }
+
+    public void Dispose()
+    {
+        cancellationTokenSource?.Cancel();
+        cancellationTokenSource?.Dispose();
+    }
+}
--- a/JSMR.UI.Blazor/JSMR.UI.Blazor.csproj
+++ b/JSMR.UI.Blazor/JSMR.UI.Blazor.csproj
@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

 	<PropertyGroup>
 		<TargetFramework>net9.0</TargetFramework>
@@ -9,10 +9,12 @@
 	</PropertyGroup>

 	<ItemGroup>
+		<PackageReference Include="Bit.BlazorUI" Version="10.1.0" />
 		<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" />
+		<PackageReference Include="Radzen.Blazor" Version="8.3.2" />
 	</ItemGroup>

 	<ItemGroup>
--- a/JSMR.UI.Blazor/Layout/MainLayout.razor
+++ b/JSMR.UI.Blazor/Layout/MainLayout.razor
@@ -32,6 +32,7 @@
    <MudSnackbarProvider />
 </MudLayout>

+<RadzenComponents @rendermode="RenderMode.InteractiveAuto" />

@code{
    private bool _open = false;
--- a/JSMR.UI.Blazor/Pages/Circles.razor
+++ b/JSMR.UI.Blazor/Pages/Circles.razor
@@ -13,10 +13,10 @@

 <div class="search-filter-control-container">
    <div class="search-filter-control-span-3">
-        <MudTextField @bind-Value="Keywords" Placeholder="Circle Name or Maker Id" Immediate="true" DebounceInterval="500" Variant="Variant.Outlined" Margin="Margin.Dense" Adornment="@Adornment.End" AdornmentIcon="@Icons.Material.Outlined.Search" />
+        <MudTextField @bind-Value="Keywords" Placeholder="Circle Name or Maker Id" Immediate="true" DebounceInterval="500" Variant="MudBlazor.Variant.Outlined" Margin="Margin.Dense" Adornment="@Adornment.End" AdornmentIcon="@Icons.Material.Outlined.Search" />
    </div>
    <div class="search-filter-control-span-1">
-        <MudSelect @bind-Value="SelectedCircleStatus" Placeholder="Circle Status" Dense="true" Variant="Variant.Outlined" Margin="Margin.Dense">
+        <MudSelect @bind-Value="SelectedCircleStatus" Placeholder="Circle Status" Dense="true" Variant="MudBlazor.Variant.Outlined" Margin="Margin.Dense">
            <MudSelectItem Value="@CircleStatus.NotBlacklisted.ToString()">Not Blacklisted</MudSelectItem>
            <MudSelectItem Value="@CircleStatus.Favorited.ToString()">Favorite</MudSelectItem>
            <MudSelectItem Value="@CircleStatus.Blacklisted.ToString()">Blacklisted</MudSelectItem>
@@ -49,19 +49,19 @@ else

                @if (item.Favorite)
                {
-                    <MudChip T="string" Label="true" Color="Color.Info" Style="width: 100%" Variant="Variant.Outlined">Favorite</MudChip>
+                    <MudChip T="string" Label="true" Color="Color.Info" Style="width: 100%" Variant="MudBlazor.Variant.Outlined">Favorite</MudChip>
                }
                else if (item.Blacklisted)
                {
-                    <MudChip T="string" Label="true" Color="Color.Warning" Style="width: 100%" Variant="Variant.Outlined">Blacklisted</MudChip>
+                    <MudChip T="string" Label="true" Color="Color.Warning" Style="width: 100%" Variant="MudBlazor.Variant.Outlined">Blacklisted</MudChip>
                }
                else if (item.Spam)
                {
-                    <MudChip T="string" Label="true" Color="Color.Error" Style="width: 100%" Variant="Variant.Outlined">Spam</MudChip>
+                    <MudChip T="string" Label="true" Color="Color.Error" Style="width: 100%" Variant="MudBlazor.Variant.Outlined">Spam</MudChip>
                }
                else
                {
-                    <MudChip T="string" Label="true" Style="width: 100%" Variant="Variant.Outlined">Normal</MudChip>
+                    <MudChip T="string" Label="true" Style="width: 100%" Variant="MudBlazor.Variant.Outlined">Normal</MudChip>
                }

                <div class="circle-star-container">
--- a/JSMR.UI.Blazor/Pages/Creators.razor
+++ b/JSMR.UI.Blazor/Pages/Creators.razor
@@ -11,7 +11,7 @@

 <h1>Creators</h1>

-<MudTextField T="string" Value="Keywords" ValueChanged="OnKeywordsChanged" 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="MudBlazor.Variant.Text" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search" />

@if (searchResults is null)
 {
--- a/JSMR.UI.Blazor/Pages/Tags.razor
+++ b/JSMR.UI.Blazor/Pages/Tags.razor
@@ -11,7 +11,7 @@

 <h1>Tags</h1>

-<MudTextField @bind-Value="Keywords" Immediate="true" DebounceInterval="500" Label="Filter" Variant="Variant.Text" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search" />
+<MudTextField @bind-Value="Keywords" Immediate="true" DebounceInterval="500" Label="Filter" Variant="MudBlazor.Variant.Text" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search" />

@if (searchResults is null)
 {
--- a/JSMR.UI.Blazor/Pages/VoiceWorks.razor
+++ b/JSMR.UI.Blazor/Pages/VoiceWorks.razor
@@ -1,6 +1,8 @@
@page "/voiceworks"
@using JSMR.Application.Common.Search
@using JSMR.Application.VoiceWorks.Queries.Search
+@using JSMR.Domain.Enums
+@using JSMR.Domain.ValueObjects
@using JSMR.UI.Blazor.Components
@using JSMR.UI.Blazor.Services
@inject VoiceWorksClient Client
@@ -12,40 +14,109 @@

 <div class="search-filter-control-container">
    <div class="search-filter-control-span-4">
-        <MudTextField T="string" Value="Keywords" ValueChanged="OnKeywordsChanged" Immediate="true" DebounceInterval="500" Label="Filter" Variant="Variant.Text" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search" />
+        <JTextBox Label="Keywords" Value="@Keywords" ValueChanged="OnKeywordsChanged" Immediate="true" DebounceInterval="1500" />
+    </div>
+    <div class="search-filter-control-span-4">
+        <BitTextField Label="Keywords" Value="@Keywords" ValueChanged="OnKeywordsChanged" Immediate="true" DebounceTime="500" />
+    </div>
+    <!-- Row 2 -->
+    <div class="search-filter-control-span-1">
+        <BitDropdown Label="Sale Status"
+                     Items="BasicItems"
+                     Placeholder="Select..."
+                     TItem="BitDropdownItem<SaleStatus?>"
+                     TValue="SaleStatus?"
+                     Value="SelectedSaleStatus"
+                     ValueChanged="OnSaleStatusChanged" />
    </div>
    <div class="search-filter-control-span-1">
-        <MudSelect T="string" Value="SelectedSaleStatus" ValueChanged="OnSaleStatusChanged" Label="Sale Status" Variant="Variant.Text">
-            <MudSelectItem Value="@SaleStatus.Available.ToString()">Available</MudSelectItem>
-            <MudSelectItem Value="@SaleStatus.Upcoming.ToString()">Upcoming</MudSelectItem>
-            <MudSelectItem Value="@String.Empty">All</MudSelectItem>
-        </MudSelect>
+        <BitDropdown Label="Circle Status"
+                     Items="CircleStatuses"
+                     Placeholder="Select..."
+                     TItem="BitDropdownItem<CircleStatus?>"
+                     TValue="CircleStatus?"
+                     Value="SelectedCircleStatus"
+                     ValueChanged="OnCircleStatusChanged" />
    </div>
    <div class="search-filter-control-span-1">
-        <MudSelect T="string" Value="SelectedCircleStatus" ValueChanged="OnCircleStatusChanged" Label="Circle Status" Variant="Variant.Text">
-            <MudSelectItem Value="@CircleStatus.NotBlacklisted.ToString()">Not Blacklisted</MudSelectItem>
-            <MudSelectItem Value="@CircleStatus.Favorited.ToString()">Favorite</MudSelectItem>
-            <MudSelectItem Value="@CircleStatus.Blacklisted.ToString()">Blacklisted</MudSelectItem>
-            <MudSelectItem Value="@String.Empty">All</MudSelectItem>
-        </MudSelect>
+        <BitDropdown Label="Tag Status"
+                     Items="TagStatuses"
+                     Placeholder="Select..."
+                     TItem="BitDropdownItem<TagStatus?>"
+                     TValue="TagStatus?"
+                     Value="SelectedTagStatus"
+                     ValueChanged="OnTagStatusChanged" />
    </div>
    <div class="search-filter-control-span-1">
-        <MudSelect T="string" Value="SelectedTagStatus" ValueChanged="OnTagStatusChanged" Label="Tag Status" Dense="true" Variant="Variant.Outlined" Margin="Margin.Dense" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search">
-            <MudSelectItem Value="@TagStatus.NotBlacklisted.ToString()">Not Blacklisted</MudSelectItem>
-            <MudSelectItem Value="@TagStatus.FavoriteExcludeBlacklist.ToString()">Favorite (Exclude Blacklisted)</MudSelectItem>
-            <MudSelectItem Value="@TagStatus.FavoriteIncludeBlacklist.ToString()">Favorite (Include Blacklisted)</MudSelectItem>
-            <MudSelectItem Value="@TagStatus.Blacklisted.ToString()">Blacklisted</MudSelectItem>
-            <MudSelectItem Value="@String.Empty">All</MudSelectItem>
-        </MudSelect>
+        <BitDropdown Label="Creator Status"
+                     Items="CreatorStatuses"
+                     Placeholder="Select..."
+                     TItem="BitDropdownItem<CreatorStatus?>"
+                     TValue="CreatorStatus?"
+                     Value="SelectedCreatorStatus"
+                     ValueChanged="OnCreatorStatusChanged" />
+    </div>
+    <!-- Row 3 -->
+    <div class="search-filter-control-span-2">
+        <BitDropdown Label="Creator Status 2"
+                     Items="CreatorStatuses"
+                     Placeholder="Select..."
+                     TItem="BitDropdownItem<CreatorStatus?>"
+                     TValue="CreatorStatus ?"
+                     Value="SelectedCreatorStatus"
+                     ValueChanged="OnCreatorStatusChanged" />
    </div>
    <div class="search-filter-control-span-1">
-        <MudSelect T="string" Value="SelectedCreatorStatus" ValueChanged="OnCreatorStatusChanged" Label="Creator Status" Dense="true" Variant="Variant.Outlined" Margin="Margin.Dense" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search">
-            <MudSelectItem Value="@CreatorStatus.NotBlacklisted.ToString()">Not Blacklisted</MudSelectItem>
-            <MudSelectItem Value="@CreatorStatus.FavoriteExcludeBlacklist.ToString()">Favorite (Exclude Blacklisted)</MudSelectItem>
-            <MudSelectItem Value="@CreatorStatus.FavoriteIncludeBlacklist.ToString()">Favorite (Include Blacklisted)</MudSelectItem>
-            <MudSelectItem Value="@CreatorStatus.Blacklisted.ToString()">Blacklisted</MudSelectItem>
-            <MudSelectItem Value="@String.Empty">All</MudSelectItem>
-        </MudSelect>
+        <BitCheckbox Label="Show Only Favorite Works" Value="ShowOnlyFavoriteWorks" ValueChanged="OnShowOnlyFavoriteWorksChanged" />
+    </div>
+    <div class="search-filter-control-span-1"></div>
+    <!-- Row 4 -->
+    <div class="search-filter-control-span-2">
+        <BitDropdown Label="Creator Status 2"
+                     Items="CreatorStatuses"
+                     Placeholder="Select..."
+                     TItem="BitDropdownItem<CreatorStatus?>"
+                     TValue="CreatorStatus ?"
+                     Value="SelectedCreatorStatus"
+                     ValueChanged="OnCreatorStatusChanged" />
+    </div>
+    <div class="search-filter-control-span-1">
+        <BitCheckbox Label="Show Only Favorite Works" Value="ShowOnlyFavoriteWorks" ValueChanged="OnShowOnlyFavoriteWorksChanged" />
+    </div>
+    <div class="search-filter-control-span-1"></div>
+    <!-- Row 5 -->
+    <div class="search-filter-control-span-1">
+        <BitCheckbox Label="Show Only Favorite Works" Value="ShowOnlyFavoriteWorks" ValueChanged="OnShowOnlyFavoriteWorksChanged" />
+    </div>
+    <div class="search-filter-control-span-1">
+        <BitCheckbox Label="Show Only Invalid Works" Value="ShowOnlyInvalidWorks" ValueChanged="OnShowOnlyInvalidWorksChanged" />
+    </div>
+    <div class="search-filter-control-span-2"></div>
+    <div class="search-filter-control-span-1">
+        <BitDropdown Label="Supported Languages"
+                     MultiSelect
+                     Items="Languages"
+                     Placeholder="Select..."
+                     TItem="BitDropdownItem<Language>"
+                     TValue="Language"
+                     Values="SupportedLanguages"
+                     ValuesChanged="OnSupportedLanguagesChanged" />
+    </div>
+    <div class="search-filter-control-span-1">
+        <BitDropdown Label="Age Ratings"
+                     MultiSelect
+                     Items="AgeRatings"
+                     Placeholder="Select..."
+                     TItem="BitDropdownItem<AgeRating>"
+                     TValue="AgeRating"
+                     Values="SelectedAgeRatings"
+                     ValuesChanged="OnAgeRatingsChanged" />
+    </div>
+    <div class="search-filter-control-span-1">
+        <BitDatePicker Label="Release Date Start" ShowClearButton="true" Value="ReleaseDateStart" ValueChanged="OnReleaseDateStartChanged" />
+    </div>
+    <div class="search-filter-control-span-1">
+        <BitDatePicker Label="Release Date End" ShowClearButton="true" Value="ReleaseDateEnd" ValueChanged="OnReleaseDateEndChanged" />
    </div>
 </div>

@@ -58,13 +129,75 @@

@code {
    public string? Keywords { get; set; }
-    public string? SelectedSaleStatus { get; set; } = string.Empty;
-    public string? SelectedCircleStatus { get; set; } = string.Empty;
-    public string? SelectedTagStatus { get; set; } = string.Empty;
-    public string? SelectedCreatorStatus { get; set; } = string.Empty;
+    public SaleStatus? SelectedSaleStatus { get; set; }
+    public CircleStatus? SelectedCircleStatus { get; set; }
+    public TagStatus? SelectedTagStatus { get; set; }
+    public CreatorStatus? SelectedCreatorStatus { get; set; }
+    public bool ShowOnlyFavoriteWorks { get; set; }
+    public bool ShowOnlyInvalidWorks { get; set; }
+    public IEnumerable<Language> SupportedLanguages { get; set; } = [];
+    public IEnumerable<AgeRating> SelectedAgeRatings { get; set; } = [];
+    public DateTimeOffset? ReleaseDateStart { get; set; }
+    public DateTimeOffset? ReleaseDateEnd { get; set; }
    public int PageNumber { get; set; } = 1;
    public int PageSize { get; set; } = 100;

+    IEnumerable<Tuple<SaleStatus?, string>> SaleStatuses =
+    [
+        new(SaleStatus.Available, "Available"),
+        new(SaleStatus.Upcoming, "Upcoming"),
+        new(null, "All")
+    ];
+
+    List<BitDropdownItem<SaleStatus?>> BasicItems =
+    [
+        new() { Text = "Available", Value = SaleStatus.Available },
+        new() { Text = "Upcoming", Value = SaleStatus.Upcoming },
+        new() { Text = "All", Value = null }
+    ];
+
+    List<BitDropdownItem<CircleStatus?>> CircleStatuses =
+    [
+        new() { Text = "Not Blacklisted", Value = CircleStatus.NotBlacklisted },
+        new() { Text = "Favorites", Value = CircleStatus.Favorited },
+        new() { Text = "Blacklisted", Value = CircleStatus.Blacklisted },
+        new() { Text = "All", Value = null }
+    ];
+
+    List<BitDropdownItem<TagStatus?>> TagStatuses =
+    [
+        new() { Text = "Not Blacklisted", Value = TagStatus.NotBlacklisted },
+        new() { Text = "Favorites (Exclude Blacklisted)", Value = TagStatus.FavoriteExcludeBlacklist },
+        new() { Text = "Favorites (Include Blacklisted)", Value = TagStatus.FavoriteIncludeBlacklist },
+        new() { Text = "Blacklisted", Value = TagStatus.Blacklisted },
+        new() { Text = "All", Value = null }
+    ];
+
+    List<BitDropdownItem<CreatorStatus?>> CreatorStatuses =
+    [
+        new() { Text = "Not Blacklisted", Value = CreatorStatus.NotBlacklisted },
+        new() { Text = "Favorites (Exclude Blacklisted)", Value = CreatorStatus.FavoriteExcludeBlacklist },
+        new() { Text = "Favorites (Include Blacklisted)", Value = CreatorStatus.FavoriteIncludeBlacklist },
+        new() { Text = "Blacklisted", Value = CreatorStatus.Blacklisted },
+        new() { Text = "All", Value = null }
+    ];
+
+    List<BitDropdownItem<Language>> Languages =
+    [
+        new() { Text = "Japanese", Value = Language.Japanese },
+        new() { Text = "English", Value = Language.English },
+        new() { Text = "Chinese (Traditional)", Value = Language.ChineseTraditional },
+        new() { Text = "Chinese (Simplified)", Value = Language.ChineseSimplified },
+        new() { Text = "Korean", Value = Language.Korean }
+    ];
+
+    List<BitDropdownItem<AgeRating>> AgeRatings =
+    [
+        new() { Text = "All Ages", Value = AgeRating.AllAges },
+        new() { Text = "R15", Value = AgeRating.R15 },
+        new() { Text = "R18", Value = AgeRating.R18 }
+    ];
+
    SearchResult<VoiceWorkSearchResult>? searchResults;

    protected override async Task OnInitializedAsync()
@@ -85,11 +218,16 @@
                Criteria = new()
                {
                    Keywords = Keywords,
-                    SaleStatus = string.IsNullOrWhiteSpace(SelectedSaleStatus) == false ? Enum.Parse<SaleStatus>(SelectedSaleStatus) : null,
-                    CircleStatus = string.IsNullOrWhiteSpace(SelectedCircleStatus) == false ? Enum.Parse<CircleStatus>(SelectedCircleStatus) : null,
-                    TagStatus = string.IsNullOrWhiteSpace(SelectedTagStatus) == false ? Enum.Parse<TagStatus>(SelectedTagStatus) : null,
-                    CreatorStatus = string.IsNullOrWhiteSpace(SelectedCreatorStatus) == false ? Enum.Parse<CreatorStatus>(SelectedCreatorStatus) : null,
-                    //SupportedLanguages = [Domain.Enums.Language.English]
+                    SaleStatus = SelectedSaleStatus,
+                    CircleStatus = SelectedCircleStatus,
+                    TagStatus = SelectedTagStatus,
+                    CreatorStatus = SelectedCreatorStatus,
+                    ShowFavoriteVoiceWorks = ShowOnlyFavoriteWorks,
+                    ShowInvalidVoiceWorks = ShowOnlyInvalidWorks,
+                    SupportedLanguages = [.. SupportedLanguages],
+                    AgeRatings = [.. SelectedAgeRatings],
+                    ReleaseDateStart = ReleaseDateStart != null ? DateOnly.FromDateTime(ReleaseDateStart.Value.Date) : null,
+                    ReleaseDateEnd = ReleaseDateEnd != null ? DateOnly.FromDateTime(ReleaseDateEnd.Value.Date) : null
                },
                SortOptions =
                [
@@ -111,30 +249,66 @@
        await UpdateDataAsync(true);
    }

-    public async Task OnSaleStatusChanged(string? saleStatus)
+    public async Task OnSaleStatusChanged(SaleStatus? saleStatus)
    {
        SelectedSaleStatus = saleStatus;
        await UpdateDataAsync(true);
    }

-    public async Task OnCircleStatusChanged(string? circleStatus)
+    public async Task OnCircleStatusChanged(CircleStatus? circleStatus)
    {
        SelectedCircleStatus = circleStatus;
        await UpdateDataAsync(true);
    }

-    public async Task OnTagStatusChanged(string? tagStatus)
+    public async Task OnTagStatusChanged(TagStatus? tagStatus)
    {
        SelectedTagStatus = tagStatus;
        await UpdateDataAsync(true);
    }

-    public async Task OnCreatorStatusChanged(string? creatorStatus)
+    public async Task OnCreatorStatusChanged(CreatorStatus? creatorStatus)
    {
        SelectedCreatorStatus = creatorStatus;
        await UpdateDataAsync(true);
    }

+    public async Task OnSupportedLanguagesChanged(IEnumerable<Language> languages)
+    {
+        SupportedLanguages = languages;
+        await UpdateDataAsync(true);
+    }
+
+    public async Task OnAgeRatingsChanged(IEnumerable<AgeRating> ageRatings)
+    {
+        SelectedAgeRatings = ageRatings;
+        await UpdateDataAsync(true);
+    }
+
+    public async Task OnShowOnlyFavoriteWorksChanged(bool showOnlyFavoriteWorks)
+    {
+        ShowOnlyFavoriteWorks = showOnlyFavoriteWorks;
+        await UpdateDataAsync(true);
+    }
+
+    public async Task OnShowOnlyInvalidWorksChanged(bool showOnlyInvalidWorks)
+    {
+        ShowOnlyInvalidWorks = showOnlyInvalidWorks;
+        await UpdateDataAsync(true);
+    }
+
+    public async Task OnReleaseDateStartChanged(DateTimeOffset? releaseDateStart)
+    {
+        ReleaseDateStart = releaseDateStart;
+        await UpdateDataAsync(true);
+    }
+
+    public async Task OnReleaseDateEndChanged(DateTimeOffset? releaseDateEnd)
+    {
+        ReleaseDateEnd = releaseDateEnd;
+        await UpdateDataAsync(true);
+    }
+
    public async Task OnPageNumberChanged(int newPageNumber)
    {
        PageNumber = newPageNumber;
@@ -149,9 +323,7 @@

    private VoiceWorkSortField GetSortField()
    {
-        SaleStatus? saleStatus = string.IsNullOrWhiteSpace(SelectedSaleStatus) == false ? Enum.Parse<SaleStatus>(SelectedSaleStatus) : null;
-
-        switch (saleStatus)
+        switch (SelectedSaleStatus)
        {
            case SaleStatus.Available:
                return VoiceWorkSortField.ReleaseDate;
--- a/JSMR.UI.Blazor/Program.cs
+++ b/JSMR.UI.Blazor/Program.cs
@@ -1,8 +1,10 @@
+using Bit.BlazorUI;
 using JSMR.UI.Blazor;
 using JSMR.UI.Blazor.Services;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 using MudBlazor.Services;
+using Radzen;

 var builder = WebAssemblyHostBuilder.CreateDefault(args);
 builder.RootComponents.Add<App>("#app");
@@ -14,6 +16,8 @@ Console.WriteLine(apiBase);

 builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(apiBase) });
 builder.Services.AddMudServices();
+builder.Services.AddRadzenComponents();
+builder.Services.AddBitBlazorUIServices();

 builder.Services.AddScoped<VoiceWorksClient>();

--- a/JSMR.UI.Blazor/_Imports.razor
+++ b/JSMR.UI.Blazor/_Imports.razor
@@ -9,3 +9,6 @@
@using JSMR.UI.Blazor
@using JSMR.UI.Blazor.Layout
@using MudBlazor
+@using Radzen
+@using Radzen.Blazor
+@using Bit.BlazorUI
--- a/JSMR.UI.Blazor/wwwroot/css/app.css
+++ b/JSMR.UI.Blazor/wwwroot/css/app.css
@@ -150,6 +150,11 @@ code {
        grid-column: span 4;
    }

+.search-filter-control {
+    display: flex;
+    align-items: center;
+}
+
 .items-container {
    display: grid;
    grid-column-gap: 1.2em;
@@ -335,6 +340,16 @@ code {
    background-image: var(--card-background-image);
 }

+/* Input */
+.j-input {
+    background: rgb(0,20,34);
+    border: 1px solid #304562;
+}
+
+.j-textbox {
+
+}
+
 /* Image */
 .j-image-container {

@@ -357,6 +372,7 @@ code {
 }

 .j-voice-work-card {
+    position: relative;
    display: flex;
    gap: 1rem;
    background-image: linear-gradient(0deg, rgb(30, 53, 69), rgb(39, 59, 73));
@@ -367,6 +383,36 @@ code {
    border-right-color: rgb(72, 88, 99);
 }

+.j-voice-work-card[class*="type-sale"]::before {
+    background-image: url(../images/web/common/icon_sale_status_01.png);
+    width: 72px;
+    height: 72px;
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    content: "";
+    background-position: 0 -432px;
+    background-size: cover;
+    pointer-events: none;
+}
+
+.j-voice-work-card[class*="type-new"]::before {
+    background-image: url(../images/web/common/icon_sale_status_01.png);
+    width: 72px;
+    height: 72px;
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    content: "";
+    background-position: 0 -504px;
+    background-size: cover;
+    pointer-events: none;
+}
+
 .j-voice-work-image-container {
    width: 240px;
    width: 300px;
@@ -482,6 +528,29 @@ code {
    height: 16px;
 }

+.j-product-indicators {
+    display: flex;
+    gap: .5rem;
+}
+
+.j-product-indicator {
+    border-width: 1px;
+    border-style: solid;
+    border-image: none;
+    padding: 0.5rem;
+    border-radius: 100%;
+    border-color: var(--product-title-text-color);
+}
+
+.j-product-indicator-favorite {
+    border-color: #f04885;
+    background: #f048852b;
+}
+
+.j-product-indicator-favorite > .j-icon {
+    background-color: #f04885;
+}
+
 /* Tags */
 .j-tags {
    display: flex;
@@ -542,6 +611,22 @@ code {
    mask-image: url("../svg/headphones.svg");
 }

+.j-icon-heart {
+    mask-image: url("../svg/heart.svg");
+}
+
+.j-icon-heart-fill {
+    mask-image: url("../svg/heart-fill.svg");
+}
+
+.j-icon-warning {
+    mask-image: url("../svg/warning.svg");
+}
+
+.j-icon-warning-fill {
+    mask-image: url("../svg/warning-fill.svg");
+}
+
 .j-icon-2 {
    background-repeat: no-repeat;
    background-position: center;
--- a/JSMR.UI.Blazor/wwwroot/css/bit-blazor.css
+++ b/JSMR.UI.Blazor/wwwroot/css/bit-blazor.css
@@ -0,0 +1,41 @@
+.bit-tfl-inp,
+.bit-drp-wrp,
+.bit-dtp-wrp {
+    border: 1px solid var(--input-border-color);
+    background-color: var(--input-background-color);
+    transition: background-color .2s,color .2s,border-color .2s,box-shadow .2s;
+    padding: .25rem .5rem;
+}
+
+.bit-tfl-fgp {
+    border: 1px solid var(--input-border-color);
+}
+
+.bit-tfl-inp:hover,
+.bit-drp-wrp:hover {
+    border: 1px solid var(--input-hover-border-color);
+    background-color: var(--input-background-color);
+}
+
+.bit-tfl-inp:focus,
+.bit-drp-wrp:focus {
+    background-color: var(--input-background-color);
+    border: 1px solid var(--input-focus-border-color);
+    box-shadow: var(--input-focus-box-shadow);
+}
+
+/* DropDownList */
+.bit-drp-cal {
+    background-color: var(--input-background-color);
+}
+
+.bit-drp-itm:hover {
+    color: #ffffffde;
+    background: rgba(255,255,255,.03);
+}
+
+.bit-drp-sel,
+.bit-drp-sel:hover {
+    color: #ffffffde;
+    background: rgba(100,181,246,.16);
+}
--- a/JSMR.UI.Blazor/wwwroot/css/jsmr-mud-blazor.css
+++ b/JSMR.UI.Blazor/wwwroot/css/jsmr-mud-blazor.css
--- a/JSMR.UI.Blazor/wwwroot/css/radzen.css
+++ b/JSMR.UI.Blazor/wwwroot/css/radzen.css
@@ -0,0 +1,48 @@
+.rz-timespanpicker > .rz-inputtext.j-input,
+.rz-colorpicker.j-input,
+.rz-lookup-search input.j-input,
+.rz-numeric.j-input,
+.rz-datepicker > .rz-inputtext.j-input,
+.rz-multiselect, .rz-dropdown.j-input,
+.mask.j-input,
+.rz-textarea.j-input,
+.rz-textbox.j-input {
+    border: 1px solid var(--input-border-color);
+    background-color: var(--input-background-color);
+    transition: background-color .2s,color .2s,border-color .2s,box-shadow .2s;
+    padding: .25rem .5rem;
+}
+
+.j-input.rz-form-field:hover .rz-form-field-content,
+.j-input.rz-autocomplete:hover:not(.rz-state-disabled),
+.j-input.rz-timespanpicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover,
+.j-input.rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover,
+.j-input.rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover,
+.j-input.rz-numeric:not(:disabled):not(.rz-state-disabled):hover,
+.j-input.rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover,
+.j-input.rz-multiselect:not(:disabled):not(.rz-state-disabled):hover,
+.j-input.rz-dropdown:not(:disabled):not(.rz-state-disabled):hover,
+.j-input.mask:not(:disabled):not(.rz-state-disabled):hover,
+.j-input.rz-textarea:not(:disabled):not(.rz-state-disabled):hover,
+.j-input.rz-textbox:not(:disabled):not(.rz-state-disabled):hover {
+    border: 1px solid var(--input-hover-border-color);
+    background-color: var(--input-background-color);
+}
+
+.j-input.rz-form-field.rz-state-focused .rz-form-field-content,
+.j-input.rz-numeric:focus-within:not(.rz-state-disabled),
+.j-input.rz-autocomplete:focus-within:not(.rz-state-disabled),
+.j-input.rz-timespanpicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus,
+.j-input.rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus,
+.j-input.rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus,
+.j-input.rz-numeric:not(:disabled):not(.rz-state-disabled):focus,
+.j-input.rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus,
+.j-input.rz-multiselect:not(:disabled):not(.rz-state-disabled):focus,
+.j-input.rz-dropdown:not(:disabled):not(.rz-state-disabled):focus,
+.j-input.mask:not(:disabled):not(.rz-state-disabled):focus,
+.j-input.rz-textarea:not(:disabled):not(.rz-state-disabled):focus,
+.j-input.rz-textbox:not(:disabled):not(.rz-state-disabled):focus {
+    background-color: var(--input-background-color);
+    border: 1px solid var(--input-focus-border-color);
+    box-shadow: var(--input-focus-box-shadow);
+}
--- a/JSMR.UI.Blazor/wwwroot/css/theme-base.css
+++ b/JSMR.UI.Blazor/wwwroot/css/theme-base.css
@@ -5,5 +5,5 @@ body {
 }

 label {
-    font-weight: 600;
+    font-weight: 500;
 }
--- a/JSMR.UI.Blazor/wwwroot/css/theme-frozen.css
+++ b/JSMR.UI.Blazor/wwwroot/css/theme-frozen.css
@@ -34,6 +34,11 @@
    --card-border-left-color: #212630;
    --card-border-right-color: #212531;
    --card-border-bottom-color: #212530;
+    --input-border-color: #304562;
+    --input-hover-border-color: #64b5f6;
+    --input-background-color: rgb(0,20,34);
+    --input-focus-border-color: #64b5f6;
+    --input-focus-box-shadow: 0 0 0 1px #93cbf9;
 }

 /*
--- a/JSMR.UI.Blazor/wwwroot/index.html
+++ b/JSMR.UI.Blazor/wwwroot/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" bit-theme-system>

 <head>
    <meta charset="utf-8" />
@@ -16,9 +16,14 @@
    <!-- Important: Increment the version parameter whenever you update MudBlazor to prevent caching issues -->
    <script src="_content/MudBlazor/MudBlazor.min.js?v=1"></script>

+    <script src="_content/Bit.BlazorUI/scripts/bit.blazorui.js"></script>
+
    <script src="js/site.js"></script>

-    <link rel="stylesheet" href="css/jsmr-mud-blazor.css" />
+    <link rel="stylesheet" href="css/mud-blazor.css" />
+    <link rel="stylesheet" href="css/radzen.css" />
+    <link href="_content/Bit.BlazorUI/styles/bit.blazorui.css" rel="stylesheet" />
+    <link rel="stylesheet" href="css/bit-blazor.css" />
    <link rel="stylesheet" href="css/app.css" />
    <link rel="stylesheet" href="css/theme-base.css" />
    <link rel="stylesheet" href="css/theme-frozen.css" />
@@ -46,6 +51,7 @@
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script>navigator.serviceWorker.register('service-worker.js');</script>
+    <script src="_content/Radzen.Blazor/Radzen.Blazor.min.js"></script>
 </body>

 </html>
--- a/JSMR.UI.Blazor/wwwroot/svg/warning-fill.svg
+++ b/JSMR.UI.Blazor/wwwroot/svg/warning-fill.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16">
+	<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
+</svg>
--- a/JSMR.UI.Blazor/wwwroot/svg/warning.svg
+++ b/JSMR.UI.Blazor/wwwroot/svg/warning.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle" viewBox="0 0 16 16">
+	<path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z"/>
+	<path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/>
+</svg>
--- a/JSMR.sln
+++ b/JSMR.sln
@@ -1,7 +1,7 @@

 Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 18
-VisualStudioVersion = 18.0.11205.157 d18.0
+VisualStudioVersion = 18.0.11205.157
 MinimumVisualStudioVersion = 10.0.40219.1
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "JSMR.Domain", "JSMR.Domain\JSMR.Domain.csproj", "{BC16F228-63B0-4EE6-9B96-19A38A31C125}"
 EndProject