Added various icons to use for input prefixes. Updated pagination cocmponent.

2025-12-02 00:13:25 -05:00
parent de00bee801
commit e962832f24
18 changed files with 271 additions and 31 deletions
--- a/JSMR.UI.Blazor/Components/Card.razor
+++ b/JSMR.UI.Blazor/Components/Card.razor
@@ -0,0 +1,8 @@
+<div class="j-card-2">
+    @ChildContent
+</div>
+
+@code {
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+}
--- a/JSMR.UI.Blazor/Components/CircleFilters.razor
+++ b/JSMR.UI.Blazor/Components/CircleFilters.razor
@@ -1,4 +1,5 @@
@using JSMR.Application.Circles.Queries.Search
+@using JSMR.UI.Blazor.Enums
@using JSMR.UI.Blazor.Filters
@using JSMR.UI.Blazor.Services

@@ -8,15 +9,23 @@
                      Immediate="true"
                      DebounceTime="500"
                      Value="@Value.Keywords"
-                      ValueChanged="@(value => Update(Value with { Keywords = value }))" />
+                      ValueChanged="@(value => Update(Value with { Keywords = value }))">
+            <PrefixTemplate>
+                <InputPrefix Graphic="Graphic.Search" Tooltip="Search"></InputPrefix>
+            </PrefixTemplate>
+        </BitTextField>
    </div>
    <div class="search-filter-control-span-1">
        <BitDropdown Items="CircleStatuses"
                     Placeholder="Select..."
                     TItem="BitDropdownItem<CircleStatus?>"
-                     TValue="CircleStatus?"
+                     TValue="CircleStatus ?"
                     Value="@Value.Status"
-                     ValueChanged="@(value => Update(Value with { Status = value }))" />
+                     ValueChanged="@(value => Update(Value with { Status = value }))">
+            <PrefixTemplate>
+                <InputPrefix Graphic="Graphic.Circle" Tooltip="Circles"></InputPrefix>
+            </PrefixTemplate>
+        </BitDropdown>
    </div>
 </div>

@@ -27,7 +36,7 @@
    [Parameter]
    public EventCallback<CircleFilterState> ValueChanged { get; set; }

-    List<BitDropdownItem<CircleStatus?>> CircleStatuses = 
+    List<BitDropdownItem<CircleStatus?>> CircleStatuses =
    [
        new() { Text = "Not Blacklisted", Value = CircleStatus.NotBlacklisted },
        new() { Text = "Favorites",       Value = CircleStatus.Favorited      },
--- a/JSMR.UI.Blazor/Components/InputPrefix.razor
+++ b/JSMR.UI.Blazor/Components/InputPrefix.razor
@@ -1,7 +1,7 @@
@using JSMR.UI.Blazor.Enums

 <BitTooltip Text="@Tooltip">
-    <div class="j-input-prefix background-color-@BackgroundColor.ToString().ToLower()">
+    <div class="j-input-prefix background-color-@BackgroundColor.ToClassName()">
        <Icon Color="Color" Size="SizeVarient.Small" Graphic="Graphic" Varient="IconVarient"></Icon>
    </div>
 </BitTooltip>
@@ -17,7 +17,7 @@
    public ColorVarient Color { get; set; } = ColorVarient.Primary;

    [Parameter]
-    public ColorVarient BackgroundColor { get; set; } = ColorVarient.Black;
+    public ColorVarient BackgroundColor { get; set; } = ColorVarient.SurfaceContainerHigh;

    [Parameter]
    public string? Tooltip { get; set; }
--- a/JSMR.UI.Blazor/Components/JPagination.razor
+++ b/JSMR.UI.Blazor/Components/JPagination.razor
@@ -1,15 +1,23 @@
-<div class="pagination">
+@using JSMR.UI.Blazor.Enums
+
+<div class="pagination">
    <div>
        <label>@IndexInfo</label>
    </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="MudBlazor.Variant.Outlined" Margin="Margin.Dense">
-            @foreach (int value in PageSizes)
-            {
-                <MudSelectItem Value="@value">@value</MudSelectItem>
-            }
-        </MudSelect>
+        @RightContent
+        <BitDropdown Items="PageSizes2"
+                     Style="min-width: 7rem"
+                     Placeholder="Select..."
+                     TItem="BitDropdownItem<int>"
+                     TValue="int"
+                     Value="PageSize"
+                     ValueChanged="OnPageSizeChanged">
+            <PrefixTemplate>
+                <InputPrefix Graphic="Graphic.Grid" Tooltip="Page Size"></InputPrefix>
+            </PrefixTemplate>
+        </BitDropdown>
    </div>
 </div>

@@ -23,6 +31,8 @@
    [Parameter]
    public int[] PageSizes { get; set; } = [5, 10, 25, 50, 100];

+    List<BitDropdownItem<int>> PageSizes2 => [.. PageSizes.Select(x => new BitDropdownItem<int>() { Text = x.ToString(), Value = x })];
+
    [Parameter]
    public int PageSize { get; set; }

@@ -35,6 +45,9 @@
    [Parameter]
    public EventCallback<int> TotalItemsChanged { get; set; }

+    [Parameter]
+    public RenderFragment? RightContent { get; set; }
+
    public string IndexInfo => TotalItems == 0 ? "No items" : $"{StartIndex.ToString("n0")} - {EndIndex.ToString("n0")} of {TotalItems.ToString("n0")} items";

    public int StartIndex => (PageNumber - 1) * PageSize + 1;
--- a/JSMR.UI.Blazor/Components/VoiceWorkFilters.razor
+++ b/JSMR.UI.Blazor/Components/VoiceWorkFilters.razor
@@ -16,7 +16,11 @@
        <BitTextField Prefix="Keywords"
                      Immediate="true" DebounceTime="500"
                      Value="@Value.Keywords"
-                      ValueChanged="@(value => Update(Value with { Keywords = value }))" />
+                      ValueChanged="@(value => Update(Value with { Keywords = value }))">
+            <PrefixTemplate>
+                <InputPrefix Graphic="Graphic.Search" Tooltip="Keywords"></InputPrefix>
+            </PrefixTemplate>
+        </BitTextField>
    </div>
    <div class="search-filter-control-span-1">
        <BitDropdown Prefix="Languages"
@@ -26,7 +30,11 @@
                     TItem="BitDropdownItem<Language>"
                     TValue="Language"
                     Values="@Value.SupportedLanguages"
-                     ValuesChanged="@(values => Update(Value with { SupportedLanguages = [.. values] }))" />
+                     ValuesChanged="@(values => Update(Value with { SupportedLanguages = [.. values] }))">
+            <PrefixTemplate>
+                <InputPrefix Graphic="Graphic.Translate" Tooltip="Supported Languages"></InputPrefix>
+            </PrefixTemplate>
+        </BitDropdown>
    </div>
    <div class="search-filter-control-span-1">
        <BitDropdown Prefix="Locale"
@@ -36,10 +44,10 @@
                     TValue="Locale"
                     Value="@Value.Locale"
                     ValueChanged="@(value => Update(Value with { Locale = value }))">
-                        <PrefixTemplate>
-                            <InputPrefix Graphic="Graphic.Globe" Tooltip="Locale"></InputPrefix>
-                        </PrefixTemplate>
-                     </BitDropdown>
+            <PrefixTemplate>
+                <InputPrefix Graphic="Graphic.Globe" Tooltip="Locale"></InputPrefix>
+            </PrefixTemplate>
+        </BitDropdown>
    </div>
    <!-- Row 2 -->
    <div class="search-filter-control-span-1">
@@ -49,7 +57,11 @@
                     TItem="BitDropdownItem<SaleStatus?>"
                     TValue="SaleStatus ?"
                     Value="@Value.SaleStatus"
-                     ValueChanged="@(value => Update(Value with { SaleStatus = value }))" />
+                     ValueChanged="@(value => Update(Value with { SaleStatus = value }))">
+            <PrefixTemplate>
+                <InputPrefix Graphic="Graphic.Cart" Tooltip="Keywords"></InputPrefix>
+            </PrefixTemplate>
+        </BitDropdown>
    </div>
    <div class="search-filter-control-span-1">
        <BitDropdown Prefix="Circles"
@@ -58,7 +70,11 @@
                     TItem="BitDropdownItem<CircleStatus?>"
                     TValue="CircleStatus ?"
                     Value="@Value.CircleStatus"
-                     ValueChanged="@(value => Update(Value with { CircleStatus = value }))" />
+                     ValueChanged="@(value => Update(Value with { CircleStatus = value }))">
+            <PrefixTemplate>
+                <InputPrefix Graphic="Graphic.Circle" Tooltip="Circles"></InputPrefix>
+            </PrefixTemplate>
+        </BitDropdown>
    </div>
    <div class="search-filter-control-span-1">
        <BitDropdown Prefix="Tags"
@@ -67,7 +83,11 @@
                     TItem="BitDropdownItem<TagStatus?>"
                     TValue="TagStatus ?"
                     Value="@Value.TagStatus"
-                     ValueChanged="@(value => Update(Value with { TagStatus = value }))" />
+                     ValueChanged="@(value => Update(Value with { TagStatus = value }))">
+            <PrefixTemplate>
+                <InputPrefix Graphic="Graphic.Tag" Tooltip="Tags"></InputPrefix>
+            </PrefixTemplate>
+        </BitDropdown>
    </div>
    <div class="search-filter-control-span-1">
        <BitDropdown Prefix="Creators"
@@ -76,7 +96,11 @@
                     TItem="BitDropdownItem<CreatorStatus?>"
                     TValue="CreatorStatus ?"
                     Value="@Value.CreatorStatus"
-                     ValueChanged="@(value => Update(Value with { CreatorStatus = value }))" />
+                     ValueChanged="@(value => Update(Value with { CreatorStatus = value }))">
+            <PrefixTemplate>
+                <InputPrefix Graphic="Graphic.Person" Tooltip="Creators"></InputPrefix>
+            </PrefixTemplate>
+        </BitDropdown>
    </div>
    @if (showAdvancedFilters)
    {
@@ -93,7 +117,11 @@
                         TItem="BitDropdownItem<int>"
                         TValue="int"
                         Values="@Value.TagIds"
-                         ValuesChanged="@(values => Update(Value with { TagIds = [.. values] }))" />
+                         ValuesChanged="@(values => Update(Value with { TagIds = [.. values] }))">
+                <PrefixTemplate>
+                    <InputPrefix Graphic="Graphic.Tag" Tooltip="Tags"></InputPrefix>
+                </PrefixTemplate>
+            </BitDropdown>
        </div>
        <div class="search-filter-control-span-1">
            <BitCheckbox Label="Include All Tags"
@@ -114,7 +142,11 @@
                         TItem="BitDropdownItem<int>"
                         TValue="int"
                         Values="@Value.CreatorIds"
-                         ValuesChanged="@(values => Update(Value with { CreatorIds = [.. values] }))" />
+                         ValuesChanged="@(values => Update(Value with { CreatorIds = [.. values] }))">
+                <PrefixTemplate>
+                    <InputPrefix Graphic="Graphic.Person" Tooltip="Creators"></InputPrefix>
+                </PrefixTemplate>
+            </BitDropdown>
        </div>
        <div class="search-filter-control-span-1">
            <BitCheckbox Label="Include All Creators"
--- a/JSMR.UI.Blazor/Enums/ColorVarient.cs
+++ b/JSMR.UI.Blazor/Enums/ColorVarient.cs
@@ -1,7 +1,16 @@
-namespace JSMR.UI.Blazor.Enums;
+using System.ComponentModel;
+
+namespace JSMR.UI.Blazor.Enums;

 public enum ColorVarient
 {
+    Surface,
+    SurfaceContainer,
+    SurfaceContainerHigh,
+    SurfaceContainerLow,
+    SurfaceContainerOutline,
+    SurfaceContainerOutlineHigh,
+    SurfaceContainerOutlineLow,
    Primary,
    Secondary,
    Black,
@@ -11,4 +20,56 @@ public enum ColorVarient
    Blue,
    Orange,
    Pink
+}
+
+public static class CssUtil
+{
+    public static string ToClassName(this ColorVarient colorVarient) => colorVarient switch
+    {
+        ColorVarient.Surface => "surface",
+        ColorVarient.SurfaceContainer => "surface-container",
+        ColorVarient.SurfaceContainerHigh => "surface-container-high",
+        ColorVarient.SurfaceContainerLow => "surface-container-low",
+        ColorVarient.SurfaceContainerOutline => "surface-container-outline",
+        ColorVarient.SurfaceContainerOutlineHigh => "surface-container-outline-high",
+        ColorVarient.SurfaceContainerOutlineLow => "surface-container-outline-low",
+        ColorVarient.Yellow => "text-yellow",
+        ColorVarient.Green => "text-green",
+        ColorVarient.Teal => "text-teal",
+        ColorVarient.Blue => "text-blue",
+        ColorVarient.Orange => "text-orange",
+        ColorVarient.Pink => "text-pink",
+        _ => ""
+    };
+
+    public static string TextClass(ColorVarient colorVarient) => colorVarient switch
+    {
+        ColorVarient.Surface => "surface",
+        ColorVarient.SurfaceContainer => "surface-container",
+        ColorVarient.SurfaceContainerHigh => "surface-container-high",
+        ColorVarient.SurfaceContainerLow => "surface-container-low",
+        ColorVarient.Yellow => "text-yellow",
+        ColorVarient.Green => "text-green",
+        ColorVarient.Teal => "text-teal",
+        ColorVarient.Blue => "text-blue",
+        ColorVarient.Orange => "text-orange",
+        ColorVarient.Pink => "text-pink",
+        _ => ""
+    };
+
+    //public static string TextClass(ColorVarient colorVarient) => colorVarient switch
+    //{
+    //    ColorVarient.Primary => "text-primary",
+    //    ColorVarient.Secondary => "text-secondary",
+    //    ColorVarient.Black => "text-black",
+    //    ColorVarient.Yellow => "text-yellow",
+    //    ColorVarient.Green => "text-green",
+    //    ColorVarient.Teal => "text-teal",
+    //    ColorVarient.Blue => "text-blue",
+    //    ColorVarient.Orange => "text-orange",
+    //    ColorVarient.Pink => "text-pink",
+    //    _ => ""
+    //};
+
+    //public static string BgClass(ColorVarient v) => /* similar */;
 }
--- a/JSMR.UI.Blazor/Enums/Graphic.cs
+++ b/JSMR.UI.Blazor/Enums/Graphic.cs
@@ -8,6 +8,13 @@ public enum Graphic
    Headphones,
    Warning,
    Heart,
+    Search,
    Globe,
-    Translate
+    Translate,
+    Cart,
+    Circle,
+    Tag,
+    Person,
+    Sort,
+    Grid
 }
--- a/JSMR.UI.Blazor/Pages/VoiceWorks.razor
+++ b/JSMR.UI.Blazor/Pages/VoiceWorks.razor
@@ -2,6 +2,7 @@
@using JSMR.Application.Common.Search
@using JSMR.Application.VoiceWorks.Queries.Search
@using JSMR.UI.Blazor.Components
+@using JSMR.UI.Blazor.Enums
@using JSMR.UI.Blazor.Filters
@using JSMR.UI.Blazor.Services
@using JSMR.UI.Blazor.Shared
@@ -23,10 +24,36 @@
                 PageNumberChanged="@(pageNumber => UpdateAsync(State with { PageNumber = pageNumber }))"
                 PageSize="@State.PageSize"
                 PageSizeChanged="@(pageSize => UpdateAsync(State with { PageSize = pageSize, PageNumber = 1 }))"
-                 @bind-TotalItems="Result.TotalItems" />
+                 @bind-TotalItems="Result.TotalItems">
+        <RightContent>
+            <BitDropdown Items="sortOptions"
+                         Style="min-width: 17rem"
+                         Placeholder="Select..."
+                         TItem="BitDropdownItem<VoiceWorkSort>"
+                         TValue="VoiceWorkSort"
+                         Value="@State.Sort"
+                         ValueChanged="@(value => UpdateAsync(State with { Sort = value }))">
+                <PrefixTemplate>
+                    <InputPrefix Graphic="Graphic.Sort" Tooltip="Sort"></InputPrefix>
+                </PrefixTemplate>
+            </BitDropdown>
+        </RightContent>
+    </JPagination>
 }

@code {
+    [Inject]
+    ILookupDataService Lookups { get; set; } = default!;
+
+    List<BitDropdownItem<VoiceWorkSort>> sortOptions = [];
+
+    protected override async Task OnInitializedAsync()
+    {
+        sortOptions = Lookups.GetSortOptions();
+
+        await base.OnInitializedAsync();
+    }
+
    protected override VoiceWorkFilterState ParseStateFromUri(string absoluteUri)
        => VoiceWorkFilterState.FromQuery(new Uri(absoluteUri).Query);

--- a/JSMR.UI.Blazor/wwwroot/css/app.css
+++ b/JSMR.UI.Blazor/wwwroot/css/app.css
@@ -224,11 +224,13 @@ code {
 .pagination > .page-sizes {
    justify-content: flex-end;
    display: inline-flex;
+    align-items: center;
+    gap: 1rem;
 }

-.pagination > .page-sizes > * {
+/*.pagination > .page-sizes > * {
    max-width: 6rem;
-}
+}*/

 /* Circle */
 .j-circle-image-container {
@@ -351,6 +353,14 @@ code {
    background-image: var(--card-background-image);
 }

+.j-card-2 {
+    background-image: linear-gradient(0deg, var(--surface-container-low), var(--surface-container-high));
+    border-top-color: var(--surface-container-outline-high);
+    border-left-color: var(--surface-container-outline);
+    border-right-color: var(--surface-container-outline);
+    border-bottom-color: var(--surface-container-outline-low);
+}
+
 /* Input */
 .j-input-prefix {
    display: flex;
@@ -658,6 +668,10 @@ code {
    mask-image: url("../svg/warning-fill.svg");
 }

+.j-icon-search {
+    mask-image: url("../svg/search.svg");
+}
+
 .j-icon-globe {
    mask-image: url("../svg/globe.svg");
 }
@@ -666,6 +680,30 @@ code {
    mask-image: url("../svg/translate.svg");
 }

+.j-icon-cart {
+    mask-image: url("../svg/shopping-cart.svg");
+}
+
+.j-icon-circle {
+    mask-image: url("../svg/circle.svg");
+}
+
+.j-icon-tag {
+    mask-image: url("../svg/tag.svg");
+}
+
+.j-icon-person {
+    mask-image: url("../svg/person.svg");
+}
+
+.j-icon-sort {
+    mask-image: url("../svg/sort.svg");
+}
+
+.j-icon-grid {
+    mask-image: url("../svg/grid-view.svg");
+}
+
 .j-icon-2 {
    background-repeat: no-repeat;
    background-position: center;
@@ -720,6 +758,22 @@ code {
 }

 /* Background Colors */
+.background-color-surface {
+    background-color: var(--color-black);
+}
+
+.background-color-surface-container {
+    background-color: var(--surface-container);
+}
+
+.background-color-surface-container-high {
+    background-color: var(--surface-container-high);
+}
+
+.background-color-surface-container-low {
+    background-color: var(--surface-container-low);
+}
+
 .background-color-black {
    background-color: var(--color-black);
 }
--- a/JSMR.UI.Blazor/wwwroot/css/theme-frozen.css
+++ b/JSMR.UI.Blazor/wwwroot/css/theme-frozen.css
@@ -53,8 +53,13 @@
    /* Background Colors */
    --background-color-primary: rgb(57, 79, 94);
    --background-color-secondary: rgb(30, 53, 69);
-
    /* Official */
+    --surface: rgb(16, 36, 50);
+    --surface-container-high: rgb(57, 79, 94);
+    --surface-container-low: rgb(30, 53, 69);
+    --surface-container-outline-high: rgb(83, 99, 109);
+    --surface-container-outline: rgb(72, 88, 99);
+    --surface-container-outline-low: rgb(63, 78, 88);
 }

 /*
--- a/JSMR.UI.Blazor/wwwroot/svg/circle.svg
+++ b/JSMR.UI.Blazor/wwwroot/svg/circle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle" viewBox="0 0 16 16">
+	<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+</svg>
--- a/JSMR.UI.Blazor/wwwroot/svg/grid-view.svg
+++ b/JSMR.UI.Blazor/wwwroot/svg/grid-view.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3">
+	<path d="M120-520v-320h320v320H120Zm0 400v-320h320v320H120Zm400-400v-320h320v320H520Zm0 400v-320h320v320H520ZM200-600h160v-160H200v160Zm400 0h160v-160H600v160Zm0 400h160v-160H600v160Zm-400 0h160v-160H200v160Zm400-400Zm0 240Zm-240 0Zm0-240Z"/>
+</svg>
--- a/JSMR.UI.Blazor/wwwroot/svg/person-fill.svg
+++ b/JSMR.UI.Blazor/wwwroot/svg/person-fill.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
+	<path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
+</svg>
--- a/JSMR.UI.Blazor/wwwroot/svg/person.svg
+++ b/JSMR.UI.Blazor/wwwroot/svg/person.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
+	<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"/>
+</svg>
--- a/JSMR.UI.Blazor/wwwroot/svg/search.svg
+++ b/JSMR.UI.Blazor/wwwroot/svg/search.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
+	<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
+</svg>
--- a/JSMR.UI.Blazor/wwwroot/svg/shopping-cart.svg
+++ b/JSMR.UI.Blazor/wwwroot/svg/shopping-cart.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart2" viewBox="0 0 16 16">
+	<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5M3.14 5l1.25 5h8.22l1.25-5zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0m9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0"/>
+</svg>
--- a/JSMR.UI.Blazor/wwwroot/svg/sort.svg
+++ b/JSMR.UI.Blazor/wwwroot/svg/sort.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3">
+	<path d="M120-240v-80h240v80H120Zm0-200v-80h480v80H120Zm0-200v-80h720v80H120Z"/>
+</svg>
--- a/JSMR.UI.Blazor/wwwroot/svg/tag.svg
+++ b/JSMR.UI.Blazor/wwwroot/svg/tag.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3">
+	<path d="M856-390 570-104q-12 12-27 18t-30 6q-15 0-30-6t-27-18L103-457q-11-11-17-25.5T80-513v-287q0-33 23.5-56.5T160-880h287q16 0 31 6.5t26 17.5l352 353q12 12 17.5 27t5.5 30q0 15-5.5 29.5T856-390ZM513-160l286-286-353-354H160v286l353 354ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640Zm220 160Z"/>
+</svg>