Added initial components.

JSMR.UI.Blazor/Components/Icon.razor

@@ -0,0 +1,34 @@
+@using JSMR.UI.Blazor.Enums
+
+<div class="@GetIconClasses()"></div>
+
+@code {
+    [Parameter]
+    public Graphic Graphic { get; set; }
+
+    [Parameter]
+    public SizeVarient Size { get; set; } = SizeVarient.Medium;
+
+    [Parameter]
+    public IconVarient Varient { get; set; } = IconVarient.None;
+
+    [Parameter]
+    public ColorVarient Color { get; set; }
+
+    private string GetIconClasses()
+    {
+        string graphic = Varient == IconVarient.None
+            ? Graphic.ToString().ToLower()
+            : $"{Graphic.ToString().ToLower()}-{Varient.ToString().ToLower()}";
+        
+        List<string> classNames =
+        [
+            $"j-icon",
+            $"j-icon-{graphic}",
+            $"j-icon-size-{Size.ToString().ToLower()}",
+            $"background-color-{Color.ToString().ToLower()}"
+        ];
+
+        return string.Join(" ", classNames);
+    }
+}

JSMR.UI.Blazor/Components/InputPrefix.razor

@@ -0,0 +1,24 @@
+@using JSMR.UI.Blazor.Enums
+
+<BitTooltip Text="@Tooltip">
+    <div class="j-input-prefix background-color-@BackgroundColor.ToString().ToLower()">
+        <Icon Color="Color" Size="SizeVarient.Small" Graphic="Graphic" Varient="IconVarient"></Icon>
+    </div>
+</BitTooltip>
+
+@code {
+    [Parameter]
+    public Graphic Graphic { get; set; }
+
+    [Parameter]
+    public IconVarient IconVarient { get; set; } = IconVarient.None;
+
+    [Parameter]
+    public ColorVarient Color { get; set; } = ColorVarient.Primary;
+
+    [Parameter]
+    public ColorVarient BackgroundColor { get; set; } = ColorVarient.Black;
+
+    [Parameter]
+    public string? Tooltip { get; set; }
+}

JSMR.UI.Blazor/Components/JProduct.razor

@@ -1,5 +1,6 @@
 @using JSMR.Application.VoiceWorks.Queries.Search
 @using JSMR.Domain.Enums
+@using JSMR.UI.Blazor.Enums
 @using JSMR.UI.Blazor.Services
 @using System.Globalization
 
@@ -54,26 +55,38 @@
         }
         @* <div class="j-icon-2 j-icon-2-flag-@GetFlagClassSuffix(Product)"></div> *@
         <div class="j-spacer"></div>
-        <div class="j-product-indicators">
+        <BitStack Horizontal="true" Gap="0.5rem" VerticalAlign="BitAlignment.End" HorizontalAlign="BitAlignment.End">
             @if (Product.IsValid != true)
             {
-                <div class="j-product-indicator j-product-indicator-invalid">
-                    <div class="j-icon j-icon-warning-fill"></div>
-                </div>
+                <ProductIndicator Graphic="Graphic.Warning" IconVarient="IconVarient.Fill" Color="ColorVarient.Orange" BackgroundColor="ColorVarient.Black"></ProductIndicator>
+            }
+            @if (Product.OriginalProductId is not null)
+            {
+                <ProductIndicator Graphic="Graphic.Translate" Color="ColorVarient.Primary" BackgroundColor="ColorVarient.Black"></ProductIndicator>
             }
             @if (Product.Favorite)
             {
-                <div class="j-product-indicator j-product-indicator-favorite">
-                    <div class="j-icon j-icon-heart-fill"></div>
-                </div>
+                <ProductIndicator Graphic="Graphic.Star" Color="ColorVarient.Pink" BackgroundColor="ColorVarient.Black"></ProductIndicator>
             }
             @if (Product.HasTrial || Product.HasChobit)
             {
-                <div class="j-trial-container">
-                    <div class="j-icon j-icon-headphones"></div>
-                </div>
+                <ProductIndicator Graphic="Graphic.Headphones" Color="ColorVarient.Blue" BackgroundColor="ColorVarient.Black"></ProductIndicator>
             }
-        </div>
+        </BitStack>
+        @* <div class="j-product-indicators">
+            @if (Product.IsValid != true)
+            {
+                <ProductIndicator Graphic="Graphic.Warning" IconVarient="IconVarient.Fill" Color="ColorVarient.Orange" BackgroundColor="ColorVarient.Black"></ProductIndicator>
+            }
+            @if (Product.Favorite)
+            {
+                <ProductIndicator Graphic="Graphic.Star" Color="ColorVarient.Pink" BackgroundColor="ColorVarient.Black"></ProductIndicator>
+            }
+            @if (Product.HasTrial || Product.HasChobit)
+            {
+                <ProductIndicator Graphic="Graphic.Headphones" Color="ColorVarient.Blue" BackgroundColor="ColorVarient.Black"></ProductIndicator>
+            }
+        </div> *@
     </div>
 </div>
 

JSMR.UI.Blazor/Components/ProductIndicator.razor

@@ -0,0 +1,22 @@
+@using JSMR.UI.Blazor.Enums
+
+<div class="j-product-indicator border-color-@Color.ToString().ToLower() background-color-@BackgroundColor.ToString().ToLower()">
+    <Icon Color="Color" Size="SizeVarient.Small" Graphic="Graphic" Varient="IconVarient"></Icon>
+</div>
+
+@code {
+    [Parameter]
+    public Graphic Graphic { get; set; }
+
+    [Parameter]
+    public IconVarient IconVarient { get; set; }
+
+    [Parameter]
+    public ColorVarient Color { get; set; }
+
+    [Parameter]
+    public ColorVarient BackgroundColor { get; set; }
+
+    [Parameter]
+    public bool Clickable { get; set; }
+}

JSMR.UI.Blazor/Components/VoiceWorkFilters.razor

@@ -35,7 +35,11 @@
                      TItem="BitDropdownItem<Locale>"
                      TValue="Locale"
                      Value="@Value.Locale"
-                     ValueChanged="@(value => Update(Value with { Locale = value }))" />
+                     ValueChanged="@(value => Update(Value with { Locale = value }))">
+                        <PrefixTemplate>
+                            <InputPrefix Graphic="Graphic.Globe" Tooltip="Locale"></InputPrefix>
+                        </PrefixTemplate>
+                     </BitDropdown>
     </div>
     <!-- Row 2 -->
     <div class="search-filter-control-span-1">

JSMR.UI.Blazor/Enums/ColorVarient.cs

@@ -0,0 +1,14 @@
+namespace JSMR.UI.Blazor.Enums;
+
+public enum ColorVarient
+{
+    Primary,
+    Secondary,
+    Black,
+    Yellow,
+    Green,
+    Teal,
+    Blue,
+    Orange,
+    Pink
+}

JSMR.UI.Blazor/Enums/Graphic.cs

@@ -0,0 +1,13 @@
+namespace JSMR.UI.Blazor.Enums;
+
+public enum Graphic
+{
+    None,
+    Star,
+    Bag,
+    Headphones,
+    Warning,
+    Heart,
+    Globe,
+    Translate
+}

JSMR.UI.Blazor/Enums/IconVarient.cs

@@ -0,0 +1,7 @@
+namespace JSMR.UI.Blazor.Enums;
+
+public enum IconVarient
+{
+    None,
+    Fill
+}

JSMR.UI.Blazor/Enums/SizeVarient.cs

@@ -0,0 +1,8 @@
+namespace JSMR.UI.Blazor.Enums;
+
+public enum SizeVarient
+{
+    Small,
+    Medium,
+    Large
+}

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

@@ -352,6 +352,13 @@ code {
 }
 
 /* Input */
+.j-input-prefix {
+    display: flex;
+    align-items: center;
+    padding: .5em;
+    background-color: rgb(57, 79, 94); /* TODO: Move this out */
+}
+
 .j-input {
     background: rgb(0,20,34);
     border: 1px solid #304562;
@@ -545,7 +552,7 @@ code {
 }
 
 .j-product-indicator {
-    border-width: 1px;
+    border-width: 2px;
     border-style: solid;
     border-image: none;
     padding: 0.5rem;
@@ -553,6 +560,15 @@ code {
     border-color: var(--product-title-text-color);
 }
 
+.j-product-indicator-invalid {
+    border-color: #ffe073;
+    background: #272727;
+}
+
+.j-product-indicator-invalid > .j-icon {
+    background-color: #ffe073;
+}
+
 .j-product-indicator-favorite {
     border-color: #f04885;
     background: #f048852b;
@@ -610,6 +626,10 @@ code {
     mask-image: url("../svg/star-fill.svg");
 }
 
+.j-icon-star-fill {
+    mask-image: url("../svg/star-fill.svg");
+}
+
 .j-icon-bag {
     mask-image: url("../svg/bag.svg");
 }
@@ -638,6 +658,14 @@ code {
     mask-image: url("../svg/warning-fill.svg");
 }
 
+.j-icon-globe {
+    mask-image: url("../svg/globe.svg");
+}
+
+.j-icon-translate {
+    mask-image: url("../svg/translate.svg");
+}
+
 .j-icon-2 {
     background-repeat: no-repeat;
     background-position: center;
@@ -660,4 +688,67 @@ code {
 
 .j-icon-2-flag-kr {
     background-image: url("../svg/flag-kr.svg");
+}
+
+/* Border Colors */
+.border-color-black {
+    border-color: var(--color-black);
+}
+
+.border-color-yellow {
+    border-color: var(--color-yellow);
+}
+
+.border-color-green {
+    border-color: var(--color-green);
+}
+
+.border-color-teal {
+    border-color: var(--color-teal);
+}
+
+.border-color-blue {
+    border-color: var(--color-blue);
+}
+
+.border-color-orange {
+    border-color: var(--color-orange);
+}
+
+.border-color-pink {
+    border-color: var(--color-pink);
+}
+
+/* Background Colors */
+.background-color-black {
+    background-color: var(--color-black);
+}
+
+.background-color-yellow {
+    background-color: var(--color-yellow);
+}
+
+.background-color-green {
+    background-color: var(--color-green);
+}
+
+.background-color-teal {
+    background-color: var(--color-teal);
+}
+
+.background-color-blue {
+    background-color: var(--color-blue);
+}
+
+.background-color-orange {
+    background-color: var(--color-orange);
+}
+
+.background-color-pink {
+    background-color: var(--color-pink);
+}
+
+/* Background Gradients */
+.background-gradient-pink {
+    background-image: linear-gradient(45deg, var(--color-dark-pink), var(--color-pink))
 }

JSMR.UI.Blazor/wwwroot/css/theme-frozen.css

@@ -39,6 +39,22 @@
     --input-background-color: rgb(0,20,34);
     --input-focus-border-color: #64b5f6;
     --input-focus-box-shadow: 0 0 0 1px #93cbf9;
+    /* Colors */
+    --color-primary: rgb(180,200, 214);
+    --color-secondary: rgb(200,220,234);
+    --color-black: #272727;
+    --color-yellow: #ffe073;
+    --color-green: #afe07d;
+    --color-teal: #6eecff;
+    --color-blue: #73c4ff;
+    --color-orange: #ffa773;
+    --color-pink: #e06894;
+    --color-dark-pink: #832044;
+    /* Background Colors */
+    --background-color-primary: rgb(57, 79, 94);
+    --background-color-secondary: rgb(30, 53, 69);
+
+    /* Official */
 }
 
 /*

JSMR.UI.Blazor/wwwroot/svg/globe.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe" viewBox="0 0 16 16">
+	<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7.03 7.03 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a7 7 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12q.208.58.468 1.068c.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7 7 0 0 0 13.745 12H11.91a9.3 9.3 0 0 1-.64 1.539 7 7 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855q.26-.487.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a7 7 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7 7 0 0 0-3.072-2.472c.218.284.418.598.597.933M10.855 4a8 8 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z"/>
+</svg>

JSMR.UI.Blazor/wwwroot/svg/translate.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-translate" viewBox="0 0 16 16">
+	<path d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286zm1.634-.736L5.5 3.956h-.049l-.679 2.022z"/>
+	<path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm7.138 9.995q.289.451.63.846c-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6 6 0 0 1-.415-.492 2 2 0 0 1-.94.31"/>
+</svg>