...

Pages/Pages/Database/CatalogPage.razor

@@ -20,7 +20,7 @@
     </PaperComponent>
 
     <PaperComponent>
-        <EntityFilterComponent></EntityFilterComponent>
+        <CatalogEntityFilterComponent></CatalogEntityFilterComponent>
 
         <div class="catalogResultCount">
             @searches.Count @(searches.Count == 1 ? "entity" : "entities")

Pages/Pages/Database/Parts/CatalogEntityFilterComponent.razor

@@ -0,0 +1,197 @@
+@using Model.Entity.Data
+
+<div class="catalogFilters">
+    <div class="filterGroup">
+        <span class="filterLabel">Faction</span>
+        <div class="filterPills">
+            @foreach (var choice in EntityFilterService.GetFactionChoices())
+            {
+                <button class="filterPill @(choice.Equals(EntityFilterService.GetFactionType()) ? "active" : "")"
+                        @onclick="() => OnChangeFaction(choice)">
+                    @(choice == DataType.Any
+                        ? "Any"
+                        : EntityData.Get().TryGetValue(choice, out var fac) ? fac.Info().Name : choice)
+                </button>
+            }
+        </div>
+    </div>
+
+    @if (EntityFilterService.GetFactionType() != "Any" && EntityFilterService.GetFactionType() != "None")
+    {
+        <div class="filterGroup">
+            <span class="filterLabel">Immortal</span>
+            <div class="filterPills">
+                @foreach (var choice in EntityFilterService.GetImmortalChoices())
+                {
+                    <button class="filterPill @(choice.Equals(EntityFilterService.GetImmortalType()) ? "active" : "")"
+                            @onclick="() => OnChangeImmortal(choice)">
+                        @(EntityData.Get().TryGetValue(choice, out var imm) ? imm.Info().Name : choice)
+                    </button>
+                }
+            </div>
+        </div>
+    }
+
+    <div class="filterGroup">
+        <span class="filterLabel">Type</span>
+        <div class="filterPills">
+            @foreach (var choice in EntityFilterService.GetEntityChoices())
+            {
+                <button class="filterPill @(choice.Equals(EntityFilterService.GetEntityType()) ? "active" : "")"
+                        @onclick="() => OnChangeEntity(choice)">
+                    @choice.Replace("_", " ")
+                </button>
+            }
+        </div>
+    </div>
+
+    <div class="filterSearch">
+        <svg class="searchIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="11" cy="11" r="8"/>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+        </svg>
+        <input class="searchInput" type="text" placeholder="Search by name..."
+               @bind="searchText"
+               @bind:after="OnSearchChanged"/>
+    </div>
+</div>
+
+<style>
+    .catalogFilters {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    .filterGroup {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+
+    .filterLabel {
+        font-size: 0.8rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        opacity: 0.5;
+        min-width: 64px;
+        flex-shrink: 0;
+    }
+
+    .filterPills {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+    }
+
+    .filterPill {
+        padding: 6px 16px;
+        border-radius: 20px;
+        border: 1px solid var(--primary-border);
+        background: var(--primary);
+        color: rgba(255, 255, 255, 0.8);
+        font-family: inherit;
+        font-size: 0.85rem;
+        font-weight: 600;
+        cursor: pointer;
+        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+    }
+
+    .filterPill:hover {
+        background: var(--primary-hover);
+        border-color: var(--primary-border-hover);
+        color: #fff;
+    }
+
+    .filterPill.active {
+        background: var(--secondary);
+        border-color: var(--primary-border-hover);
+        color: #fff;
+    }
+
+    .filterSearch {
+        position: relative;
+        margin-top: 4px;
+        max-width: 400px;
+    }
+
+    .searchIcon {
+        position: absolute;
+        left: 12px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 16px;
+        height: 16px;
+        opacity: 0.5;
+        pointer-events: none;
+    }
+
+    .searchInput {
+        width: 100%;
+        padding: 10px 12px 10px 36px;
+        border-radius: 20px;
+        border: 2px solid var(--primary-border);
+        background: var(--primary);
+        color: #fff;
+        font-family: inherit;
+        font-size: 0.9rem;
+        outline: none;
+        transition: border-color 0.15s ease;
+        box-sizing: border-box;
+    }
+
+    .searchInput::placeholder {
+        color: rgba(255, 255, 255, 0.4);
+    }
+
+    .searchInput:focus {
+        border-color: var(--primary-border-hover);
+    }
+
+    @@media only screen and (max-width: 600px) {
+        .filterGroup {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 6px;
+        }
+
+        .filterLabel {
+            min-width: auto;
+        }
+    }
+</style>
+
+@code {
+
+    [Inject] public IEntityFilterService EntityFilterService { get; set; } = default!;
+
+    string searchText = "";
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+        searchText = EntityFilterService.GetSearchText();
+    }
+
+    void OnChangeFaction(string choice)
+    {
+        EntityFilterService.SelectFactionType(choice);
+    }
+
+    void OnChangeImmortal(string choice)
+    {
+        EntityFilterService.SelectImmortalType(choice);
+    }
+
+    void OnChangeEntity(string choice)
+    {
+        EntityFilterService.SelectEntityType(choice);
+    }
+
+    void OnSearchChanged()
+    {
+        EntityFilterService.EnterSearchText(searchText);
+    }
+
+}