Add image gallery page with search autocomplete, tooltips, and type-sorted tags

Nexus.Frontend/Nexus.Frontend.Client/Components/DesignSystem/ImageTag.razor

@@ -0,0 +1,118 @@
+@* Image tag component that displays TagDto with type-specific prefix icons *@
+@using Nexus.Frontend.Client.Models
+
+<NexusTooltip Position="TooltipPosition.Top">
+    <ChildContent>
+        <span class="@GetTagClasses()">
+            @if (!string.IsNullOrWhiteSpace(GetTagIcon()))
+            {
+                <NexusIcon Icon="@GetTagIcon()" />
+            }
+            <span class="ml-1">@Value</span>
+
+            @if (Removable)
+            {
+                <button type="button" class="ml-1.5 text-current/80 hover:text-current focus:outline-none transform hover:scale-110 transition-transform cursor-pointer" @onclick="HandleRemove">
+                    <NexusIcon Icon="fa-solid fa-xmark" />
+                </button>
+            }
+        </span>
+    </ChildContent>
+    <TooltipContent>
+        @GetTagTypeDescription()
+    </TooltipContent>
+</NexusTooltip>
+
+@code {
+    /// <summary>
+    /// Tag type (Artist, Series, Character, General, Meta)
+    /// </summary>
+    [Parameter]
+    public TagType Type { get; set; } = TagType.General;
+
+    /// <summary>
+    /// Tag value/name
+    /// </summary>
+    [Parameter]
+    public string Value { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Whether the tag can be removed
+    /// </summary>
+    [Parameter]
+    public bool Removable { get; set; }
+
+    /// <summary>
+    /// Callback when tag is removed
+    /// </summary>
+    [Parameter]
+    public EventCallback OnRemove { get; set; }
+
+    /// <summary>
+    /// Display size
+    /// </summary>
+    [Parameter]
+    public TagSize Size { get; set; } = TagSize.Small;
+
+    /// <summary>
+    /// Additional HTML attributes
+    /// </summary>
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private string GetTagClasses()
+    {
+        var baseClasses = "inline-flex items-center font-medium rounded-full";
+
+        var sizeClasses = Size switch
+        {
+            TagSize.Tiny => "text-xs px-2 py-0.5",
+            TagSize.Small => "text-xs px-2.5 py-1",
+            TagSize.Medium => "text-sm px-3 py-1.5",
+            _ => "text-xs px-2.5 py-1"
+        };
+
+        var colorClasses = Type switch
+        {
+            TagType.Artist => "bg-violet-100 text-violet-700 border border-violet-200",
+            TagType.Series => "bg-blue-100 text-blue-700 border border-blue-200",
+            TagType.Character => "bg-emerald-100 text-emerald-700 border border-emerald-200",
+            TagType.General => "bg-gray-100 text-gray-700 border border-gray-200",
+            TagType.Meta => "bg-amber-100 text-amber-700 border border-amber-200",
+            _ => "bg-gray-100 text-gray-700 border border-gray-200"
+        };
+
+        return $"{baseClasses} {sizeClasses} {colorClasses}".Trim();
+    }
+
+    private string GetTagIcon()
+    {
+        return Type switch
+        {
+            TagType.Artist => "fa-solid fa-palette",
+            TagType.Series => "fa-solid fa-film",
+            TagType.Character => "fa-solid fa-user",
+            TagType.General => "fa-solid fa-tag",
+            TagType.Meta => "fa-solid fa-circle-info",
+            _ => "fa-solid fa-tag"
+        };
+    }
+
+    private string GetTagTypeDescription()
+    {
+        return Type switch
+        {
+            TagType.Artist => "Artist: Creator or illustrator",
+            TagType.Series => "Series: From a specific series or franchise",
+            TagType.Character => "Character: Character depicted",
+            TagType.General => "General: General descriptive tag",
+            TagType.Meta => "Meta: Metadata about the image",
+            _ => "Tag type"
+        };
+    }
+
+    private async Task HandleRemove()
+    {
+        await OnRemove.InvokeAsync();
+    }
+}

Nexus.Frontend/Nexus.Frontend.Client/Components/DesignSystem/NexusBadge.razor

@@ -20,7 +20,7 @@
 
     @if (Removable)
     {
-        <button type="button" class="ml-2 text-white/90 hover:text-white focus:outline-none transform hover:scale-110 transition-transform" @onclick="HandleRemove">
+        <button type="button" class="ml-2 text-white/90 hover:text-white focus:outline-none transform hover:scale-110 transition-transform cursor-pointer" @onclick="HandleRemove">
             <NexusIcon Icon="fa-solid fa-xmark" />
         </button>
     }

Nexus.Frontend/Nexus.Frontend.Client/Components/DesignSystem/TagSize.cs

@@ -0,0 +1,8 @@
+namespace Nexus.Frontend.Client.Components.DesignSystem;
+
+public enum TagSize
+{
+    Tiny,
+    Small,
+    Medium
+}