From 879be554427e7b1fe1147ea2ee35fe9fe7522672 Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Sun, 13 Apr 2025 23:41:37 +0200
Subject: [PATCH] Rework multiple select list

---
 .../Games/Components/GameCreationForm.razor   |  2 +-
 .../Components/GameCreationForm.razor.cs      |  4 +-
 .../Games/Filter/AdvancedGameFilter.razor     | 32 ++++++--------
 .../Games/Filter/AdvancedGameFilter.razor.cs  | 34 +++++++++++++--
 .../Games/Filter/AdvancedGameFilter.razor.css |  2 +-
 .../Pages/Games/Filter/GameFilter.razor       | 22 ++++------
 .../Pages/Games/Filter/GameFilter.razor.cs    | 42 +++++++++++++------
 .../Pages/Games/Filter/GameFilter.razor.css   |  2 +-
 .../Pages/Games/GameBase.razor                |  7 ++--
 .../Pages/Games/GameBase.razor.cs             | 10 +++++
 .../Pages/Games/Header/GameHeader.razor.cs    |  2 +-
 .../SelectList/Helpers/SelectHelper.cs        |  2 +-
 .../SelectList/Models/SelectParams.cs         |  4 +-
 .../Shared/Components/SelectList/Select.razor | 24 +++++++----
 .../Components/SelectList/Select.razor.cs     | 19 +++++----
 .../Components/SelectList/Select.razor.css    | 32 ++++++++++++--
 .../SelectSearch/SelectSearch.razor           | 19 +++++++++
 .../SelectSearch/SelectSearch.razor.cs        | 42 +++++++++++++++++++
 .../SelectSearch/SelectSearch.razor.css       | 17 ++++++++
 .../CreateStaticResourceKey.cs                |  4 +-
 .../GameIdeas.Shared/Dto/CategoriesDto.cs     | 10 ++---
 .../GameIdeas.Shared/Dto/GameFilterDto.cs     | 12 +++---
 .../GameIdeas.WebAPI/Files/GameIdeas.fr.json  |  2 +-
 .../Services/CategoryService.cs               | 10 ++---
 24 files changed, 257 insertions(+), 99 deletions(-)
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor.css

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
index 7354efa..0adb6db 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
@@ -42,7 +42,7 @@
                                     Items="CategoriesDto?.Properties?.Select(p => new SelectElement<PropertyDto>(p, p.Label))" />
             </div>
             <div class="input-game">
-                <div class="label">@ResourcesKey.Genres :</div>
+                <div class="label">@ResourcesKey.Tags :</div>
                 <MultipleSelectList TItem="TagDto" Theme="SelectListTheme" @bind-Values=GameDto.Tags 
                                     Items="CategoriesDto?.Tags?.Select(t => new SelectElement<TagDto>(t, t.Label))" />
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs
index 97c0854..657b891 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs
@@ -1,4 +1,3 @@
-using GameIdeas.BlazorApp.Pages.Games.Gateways;
 using GameIdeas.BlazorApp.Shared.Components.Popup;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using GameIdeas.BlazorApp.Shared.Components.Slider;
@@ -12,8 +11,8 @@ namespace GameIdeas.BlazorApp.Pages.Games.Components;
 public partial class GameCreationForm
 {
     [Inject] private IJSRuntime Js { get; set; } = default!;
-    [Inject] private IGameGateway GameGateway { get; set; } = default!;
     [CascadingParameter] private Popup? Popup { get; set; }
+    [Parameter] public CategoriesDto Categories { get; set; } = new();
 
     private GameDto GameDto = new();
     private CategoriesDto CategoriesDto = new();
@@ -24,7 +23,6 @@ public partial class GameCreationForm
     protected override async Task OnInitializedAsync()
     {
         EditContext = new(GameDto);
-        CategoriesDto = await GameGateway.FetchCategories();
 
         if (Popup != null)
         {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor
index cd93cda..17ec219 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor
@@ -1,32 +1,26 @@
-@using GameIdeas.BlazorApp.Shared.Components.Select
-@using GameIdeas.BlazorApp.Shared.Components.Select.Models
+@using GameIdeas.BlazorApp.Shared.Components.SelectList.Models
+@using GameIdeas.BlazorApp.Shared.Components.SelectSearch
 @using GameIdeas.Shared.Dto
 
 <div class="advanced-filter-container">
     <span class="title">@ResourcesKey.Filters</span>
 
     <div class="duplicate">
-        <MultipleSelectList TItem="PlatformDto"
-                            @bind-Values=GameFilter!.Platforms
-                            Placeholder="@ResourcesKey.Platforms"
-                            Theme="Theme" />
+        <SelectSearch TItem="PlatformDto" Placeholder="@ResourcesKey.Platforms" GetLabel="@(p => p.Label)"
+                        ValuesChanged=HandlePlatformsChanged Values=GameFilter.Platforms Theme="Theme" Items="Categories?.Platforms" />
 
-        <MultipleSelectList TItem="TagDto"
-                            Placeholder="@ResourcesKey.Genres"
-                            @bind-Values=GameFilter.Tags
-                            Theme="Theme" />
+        <SelectSearch TItem="TagDto" Placeholder="@ResourcesKey.Tags" GetLabel="@(p => p.Label)"
+                      ValuesChanged=HandleTagsChanged Values=GameFilter.Tags Theme="Theme" Items="Categories?.Tags" />
     </div>
 
+    <SelectSearch TItem="PropertyDto" Placeholder="@ResourcesKey.Properties" GetLabel="@(p => p.Label)"
+                  ValuesChanged=HandlePropertiesChanged Values=GameFilter.Properties Theme="Theme" Items="Categories?.Properties" />
 
-    <MultipleSelectList TItem="PublisherDto"
-                        Placeholder="@ResourcesKey.Publishers"
-                        @bind-Values=GameFilter!.Publishers
-                        Theme="Theme" />
+    <SelectSearch TItem="DeveloperDto" Placeholder="@ResourcesKey.Developers" GetLabel="@(p => p.Name)"
+                  ValuesChanged=HandleDevelopersChanged Values=GameFilter.Developers Theme="Theme" Items="Categories?.Developers" />
 
-    <MultipleSelectList TItem="DeveloperDto"
-                        Placeholder="@ResourcesKey.Developers"
-                        @bind-Values=GameFilter!.Developers
-                        Theme="Theme" />
+    <SelectSearch TItem="PublisherDto" Placeholder="@ResourcesKey.Publishers" GetLabel="@(p => p.Name)"
+                  ValuesChanged=HandlePublishersChanged Values=GameFilter.Publishers Theme="Theme" Items="Categories?.Publishers" />
 
     <span class="title">@ResourcesKey.LastAdd</span>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs
index 2bc6859..c1de509 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs
@@ -1,4 +1,4 @@
-using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using GameIdeas.BlazorApp.Shared.Components.SelectList.Models;
 using GameIdeas.Shared.Dto;
 using Microsoft.AspNetCore.Components;
 
@@ -6,7 +6,35 @@ namespace GameIdeas.BlazorApp.Pages.Games.Filter;
 
 public partial class AdvancedGameFilter
 {
-    [Parameter] public GameFilterDto? GameFilter { get; set; }
+    [Parameter] public GameFilterDto GameFilter { get; set; } = new();
+    [Parameter] public CategoriesDto? Categories { get; set; }
     [Parameter] public EventCallback<GameFilterDto> GameFilterChanged { get; set; }
-    private readonly SelectListTheme Theme = SelectListTheme.AdvancedFilter;
+
+    private readonly SelectTheme Theme = SelectTheme.AdvancedFilter;
+
+    private async Task HandlePublishersChanged(List<PublisherDto> args)
+    {
+        GameFilter.Publishers = args;
+        await GameFilterChanged.InvokeAsync(GameFilter);
+    }
+    private async Task HandleDevelopersChanged(List<DeveloperDto> args)
+    {
+        GameFilter.Developers = args;
+        await GameFilterChanged.InvokeAsync(GameFilter);
+    }
+    private async Task HandlePropertiesChanged(List<PropertyDto> args)
+    {
+        GameFilter.Properties = args;
+        await GameFilterChanged.InvokeAsync(GameFilter);
+    }
+    private async Task HandleTagsChanged(List<TagDto> args)
+    {
+        GameFilter.Tags = args;
+        await GameFilterChanged.InvokeAsync(GameFilter);
+    }
+    private async Task HandlePlatformsChanged(List<PlatformDto> args)
+    {
+        GameFilter.Platforms = args;
+        await GameFilterChanged.InvokeAsync(GameFilter);
+    }
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css
index b854400..d6db344 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css
@@ -8,7 +8,7 @@
     box-sizing: border-box;
     width: 240px;
     border-left: 2px solid var(--line);
-    z-index: var(--index-component);
+    z-index: var(--index-content);
 }
 
 .duplicate {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
index 6f501d2..22032e4 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
@@ -1,8 +1,7 @@
 @using GameIdeas.BlazorApp.Shared.Components.Search
-@using GameIdeas.BlazorApp.Shared.Components.Select
-@using GameIdeas.BlazorApp.Shared.Components.Select.Models
 @using GameIdeas.BlazorApp.Shared.Components.SelectList
 @using GameIdeas.BlazorApp.Shared.Components.SelectList.Models
+@using GameIdeas.BlazorApp.Shared.Components.SelectSearch
 @using GameIdeas.BlazorApp.Shared.Components.SliderRange
 @using GameIdeas.BlazorApp.Shared.Models
 @using GameIdeas.Shared.Dto
@@ -31,29 +30,24 @@
     </div>
 
     <div class="search-container">
-        <SearchInput @bind-Text=Value.Title
+        <SearchInput TextChanged=HandleTitleChanged Text="@Value.Title"
                      Placeholder="@ResourcesKey.Research" />
     </div>
 
     <div class="select-container">
-        <MultipleSelectList TItem="PlatformDto"
-                            Placeholder="@ResourcesKey.Platforms"
-                            @bind-Values=Value.Platforms
-                            Theme="SelectListTheme.Filter" />
+        <SelectSearch TItem="PlatformDto" Placeholder="@ResourcesKey.Platforms" GetLabel="@(p => p.Label)"
+                      ValuesChanged=HandlePlatformsChanged Values=Value.Platforms Theme="SelectTheme.Filter" Items="Categories?.Platforms" />
     </div>
 
     <div class="select-container">
-        <MultipleSelectList TItem="TagDto"
-                            Placeholder="@ResourcesKey.Genres"
-                            @bind-Values=Value.Tags
-                            Theme="SelectListTheme.Filter" />
+        <SelectSearch TItem="TagDto" Placeholder="@ResourcesKey.Tags" GetLabel="@(p => p.Label)"
+                      ValuesChanged=HandleTagsChanged Values=Value.Tags Theme="SelectTheme.Filter" Items="Categories?.Tags" />
     </div>
 
     <div class="slider-container">
         <SliderRange Params="SliderRangeParams"
-                     @bind-Max=Value.MaxInterest
-                     @bind-Min=Value.MinInterest />
+                     MaxChanged=HandleMaxChanged Max="Value.MaxInterest"
+                     MinChanged=HandleMinChanged Min="Value.MinInterest" />
     </div>
 </div>
 
-
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
index b2e9a0c..2862ad4 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
@@ -14,31 +14,24 @@ public partial class GameFilter
     [Parameter] public EventCallback<GameFilterDto> ValueChanged { get; set; }
     [Parameter] public DisplayType DisplayType { get; set; }
     [Parameter] public EventCallback<DisplayType> DisplayTypeChanged { get; set; }
+    [Parameter] public CategoriesDto? Categories { get; set; }
 
-    private SelectParams<SortPropertyDto, SortTypeDto> SelectParams = new();
 
-    private readonly IEnumerable<SortTypeDto> SortTypes = [
+    private readonly List<SortTypeDto> SortTypes = [
         new() { SortType = SortType.Ascending, Label = "Ascendant" },
         new() { SortType = SortType.Descending, Label = "Descendant" }
     ];
 
-    private readonly IEnumerable<SortPropertyDto> GameProperties = [
+    private readonly List<SortPropertyDto> GameProperties = [
         new() { SortProperty = game => game.Title!, Label = "Titre" },
         new() { SortProperty = game => game.ReleaseDate!, Label = "Date de parution" }
     ];
 
-    private EditContext? EditContext;
-    private readonly SliderRangeParams SliderRangeParams =
-        new() { Min = 1, Max = 5 };
+    private SelectParams<SortPropertyDto, SortTypeDto> SelectParams = new();
+    private readonly SliderRangeParams SliderRangeParams = new() { Min = 1, Max = 5 };
 
     protected override void OnInitialized()
     {
-        EditContext = new EditContext(Value);
-        EditContext.OnFieldChanged += async (s, e) =>
-        {
-            await ValueChanged.InvokeAsync(Value);
-        };
-
         SelectParams = new()
         {
             Headers = SortTypes,
@@ -65,4 +58,29 @@ public partial class GameFilter
         Value.SortProperty = sortProperties.FirstOrDefault();
         await ValueChanged.InvokeAsync(Value);
     }
+    private async Task HandleTagsChanged(List<TagDto> args)
+    {
+        Value.Tags = args;
+        await ValueChanged.InvokeAsync(Value);
+    }
+    private async Task HandleMinChanged(int args)
+    {
+        Value.MinInterest = args;
+        await ValueChanged.InvokeAsync(Value);
+    }
+    private async Task HandleMaxChanged(int args)
+    {
+        Value.MaxInterest = args;
+        await ValueChanged.InvokeAsync(Value);
+    }
+    private async Task HandlePlatformsChanged(List<PlatformDto> args)
+    {
+        Value.Platforms = args;
+        await ValueChanged.InvokeAsync(Value);
+    }
+    private async Task HandleTitleChanged(string args)
+    {
+        Value.Title = args;
+        await ValueChanged.InvokeAsync(Value);
+    }
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css
index f1df118..a7a9081 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css
@@ -3,7 +3,7 @@
     flex-direction: row;
     gap: 8px;
     align-items: center;
-    z-index: var(--index-component);
+    z-index: var(--index-content);
 }
 
 .search-container {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor
index 1bd2393..e32a814 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor
@@ -12,7 +12,8 @@
 <PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
 
 <GameHeader AddTypeChanged="HandleAddClicked">
-    <GameFilter @bind-DisplayType=DisplayType
+    <GameFilter Categories="Categories"
+                @bind-DisplayType=DisplayType
                 @bind-Value=GameFilter/>
 </GameHeader>
 
@@ -20,9 +21,9 @@
     <div class="content">
     </div>
 
-    <AdvancedGameFilter @bind-GameFilter=GameFilter/>
+    <AdvancedGameFilter @bind-GameFilter=GameFilter Categories="Categories" />
 </div>
 
 <Popup @ref=ManualAddPopup BackdropFilterClicked="HandleBackdropManualAddClicked">
-    <GameCreationForm />
+    <GameCreationForm Categories="Categories" />
 </Popup>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor.cs
index 3844579..f00fdd0 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor.cs
@@ -1,15 +1,25 @@
+using GameIdeas.BlazorApp.Pages.Games.Gateways;
 using GameIdeas.BlazorApp.Shared.Components.Popup;
 using GameIdeas.BlazorApp.Shared.Models;
 using GameIdeas.Shared.Dto;
+using Microsoft.AspNetCore.Components;
 
 namespace GameIdeas.BlazorApp.Pages.Games;
 
 public partial class GameBase ()
 {
+    [Inject] private IGameGateway GameGateway { get; set; } = default!;
+
     private DisplayType DisplayType = DisplayType.List;
     private GameFilterDto GameFilter = new();
     private Popup? ManualAddPopup;
+    private CategoriesDto? Categories;
 
+    protected override async Task OnInitializedAsync()
+    {
+        Categories = await GameGateway.FetchCategories();
+        await base.OnInitializedAsync();
+    }
     private void HandleAddClicked(AddType addType)
     {
         switch (addType)
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs
index 5fda18c..5b069a9 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs
@@ -26,7 +26,7 @@ public partial class GameHeader : ComponentBase
     {
         SelectParams = new()
         {
-            Items = AddTypes,
+            Items = AddTypes.ToList(),
             GetItemLabel = item => item.Value,
         };
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Helpers/SelectHelper.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Helpers/SelectHelper.cs
index 7e15185..1edc57c 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Helpers/SelectHelper.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Helpers/SelectHelper.cs
@@ -11,7 +11,7 @@ public static class SelectHelper
             SelectTheme.Navigation => "navigation",
             SelectTheme.Sort => "sort",
             SelectTheme.Filter => "filter",
-            SelectTheme.AdvancedFilter => "advenced-filter",
+            SelectTheme.AdvancedFilter => "advanced-filter",
             SelectTheme.Creation => "creation",
             _ => string.Empty
         };
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Models/SelectParams.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Models/SelectParams.cs
index d06f35e..3493283 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Models/SelectParams.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Models/SelectParams.cs
@@ -2,10 +2,10 @@
 
 public class SelectParams<TItem, THeader>
 {
-    public IEnumerable<TItem> Items { get; set; } = [];
+    public List<TItem> Items { get; set; } = [];
     public TItem? DefaultItem { get; set; }
     public Func<TItem, string> GetItemLabel { get; set; } = _ => string.Empty;
-    public IEnumerable<THeader> Headers { get; set; } = [];
+    public List<THeader> Headers { get; set; } = [];
     public THeader? DefaultHeader { get; set; }
     public Func<THeader, string> GetHeaderLabel { get; set; } = _ => string.Empty;
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Select.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Select.razor
index 79c0cff..50e39f4 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Select.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Select.razor
@@ -14,23 +14,29 @@
         @if (IsContentOpen)
         {
             <div class="content @SelectHelper.GetClassFromTheme(Theme)">
-                @foreach (var header in Params.Headers)
+                @if (Params.Headers != null)
                 {
-                    <SelectRow IsSelected=HeaderValues?.Contains(header) 
-                               Label="@Params.GetHeaderLabel(header)" Theme=Theme
-                               OnClick="_ => HandleHeaderClicked(header)" />
+                    @foreach (var header in Params.Headers)
+                    {
+                        <SelectRow IsSelected=HeaderValues?.Contains(header)
+                                   Label="@Params.GetHeaderLabel(header)" Theme=Theme
+                                   OnClick="_ => HandleHeaderClicked(header)" />
+                    }
                 }
 
-                @if (Params.Headers.Any())
+                @if (Params.Headers?.Any() == true)
                 {
                     <span class="line"></span>
                 }
 
-                @foreach (var item in Params.Items)
+                @if (Params.Items != null)
                 {
-                    <SelectRow IsSelected=Values?.Contains(item)
-                               Label="@Params.GetItemLabel(item)" Theme=Theme
-                               OnClick="_ => HandleValueClicked(item)" />
+                    @foreach (var item in Params.Items)
+                    {
+                        <SelectRow IsSelected=Values?.Contains(item)
+                                   Label="@Params.GetItemLabel(item)" Theme=Theme
+                                   OnClick="_ => HandleValueClicked(item)" />
+                    }
                 }
             </div>
         }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Select.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Select.razor.cs
index 7ca25af..c8d7a0c 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Select.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Select.razor.cs
@@ -41,34 +41,39 @@ public partial class Select<TItem, THeader>
 
     private async Task HandleValueClicked(TItem value)
     {
-        if (Type != SelectType.Multiple)
+        if (Type != SelectType.Multiple || Values == null)
         {
-            Values?.Clear();
+            Values = [];
         }
 
         if (Values?.Contains(value) == true)
         {
             Values.Remove(value);
         }
+        else
+        {
+            Values!.Add(value);
+        }
 
-        Values?.Add(value);
         await ValuesChanged.InvokeAsync(Values);
-        StateHasChanged();
     }
 
     private async Task HandleHeaderClicked(THeader header)
     {
-        if (Type != SelectType.Multiple)
+        if (Type != SelectType.Multiple || HeaderValues == null)
         {
-            HeaderValues?.Clear();
+            HeaderValues = [];
         }
 
         if (HeaderValues?.Contains(header) == true)
         {
             HeaderValues.Remove(header);
         }
+        else
+        {
+            HeaderValues!.Add(header);
+        }
 
-        HeaderValues?.Add(header);
         await HeaderValuesChanged.InvokeAsync(HeaderValues);
     }
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Select.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Select.razor.css
index da81379..17be5e0 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Select.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Select.razor.css
@@ -12,6 +12,7 @@
     position: absolute;
     z-index: var(--index-dropdown);
     border-radius: var(--small-radius);
+    width: 100%;
 }
 
     .dropdown.align-right {
@@ -19,27 +20,52 @@
     }
 
 .content {
+    background: var(--dropdown-content);
     overflow: hidden;
     display: flex;
     flex-direction: column;
     animation-name: fade-in;
     animation-duration: 0.2s;
+    box-shadow: var(--drop-shadow);
 }
 
 .line {
     display: none;
 }
 
+.dropdown::-webkit-scrollbar {
+    width: 10px;
+}
+
+.dropdown::-webkit-scrollbar-track {
+    background: var(--input-secondary);
+    border-radius: 0 var(--small-radius) var(--small-radius) 0;
+}
+
+.dropdown::-webkit-scrollbar-thumb {
+    background: #555;
+    border-radius: var(--small-radius);
+}
+
+    .dropdown::-webkit-scrollbar-thumb:hover {
+        background: #777;
+    }
+
 /***** Navigation Theme *****/
+.dropdown.navigation {
+    width: auto;
+}
+
 .content.navigation {
     background: var(--violet);
-    box-shadow: var(--drop-shadow);
 }
 
 /***** Sort Theme *****/
+.dropdown.sort {
+    width: auto;
+}
+
 .content.sort {
-    background: var(--dropdown-content);
-    box-shadow: var(--drop-shadow);
     padding: 4px 0;
 }
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor
new file mode 100644
index 0000000..77ef98b
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor
@@ -0,0 +1,19 @@
+@using GameIdeas.BlazorApp.Shared.Components.Search
+@using GameIdeas.BlazorApp.Shared.Components.SelectList
+@using GameIdeas.BlazorApp.Shared.Components.SelectList.Helpers
+@using GameIdeas.BlazorApp.Shared.Components.SelectList.Models
+
+@typeparam TItem
+
+<Select TItem="TItem" THeader="string" Theme="Theme" Type="SelectType.Multiple"
+        Params="SelectParams" Values=Values ValuesChanged="HandleValuesChanged">
+
+    <div class="@SelectHelper.GetClassFromTheme(Theme)">
+        <SearchInput @ref=SearchInput
+                     Icon="SearchInputIcon.Dropdown"
+                     Placeholder="@Placeholder"
+                     TextChanged="HandleTextChanged"
+                     ClearClicked="HandleClearClicked" />
+    </div>
+
+</Select>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor.cs
new file mode 100644
index 0000000..3b60f5d
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor.cs
@@ -0,0 +1,42 @@
+using GameIdeas.BlazorApp.Shared.Components.Search;
+using GameIdeas.BlazorApp.Shared.Components.SelectList.Models;
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Components.SelectSearch;
+
+public partial class SelectSearch<TItem>
+{
+    [Parameter] public SelectTheme Theme { get; set; }
+    [Parameter] public List<TItem> Items { get; set; } = [];
+    [Parameter] public Func<TItem, string> GetLabel { get; set; } = _ => string.Empty;
+    [Parameter] public List<TItem> Values { get; set; } = [];
+    [Parameter] public EventCallback<List<TItem>> ValuesChanged { get; set; }
+    [Parameter] public string Placeholder { get; set; } = string.Empty;
+
+    private SelectParams<TItem, string> SelectParams = new();
+    private SearchInput? SearchInput;
+    protected override void OnParametersSet()
+    {
+        SelectParams = new()
+        {
+            Items = Items,
+            GetItemLabel = GetLabel
+        };
+
+        base.OnParametersSet();
+    }
+    private async Task HandleValuesChanged(IEnumerable<TItem> values)
+    {
+        Values = values.ToList();
+        await ValuesChanged.InvokeAsync(values.ToList());
+    }
+
+    private void HandleClearClicked()
+    {
+        Values = [];
+    }
+    private void HandleTextChanged()
+    {
+        Values = [];
+    }
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor.css
new file mode 100644
index 0000000..83cac73
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor.css
@@ -0,0 +1,17 @@
+/* Advanced filter */
+::deep .advanced-filter .search-container {
+    height: 24px;
+    background: var(--input-secondary);
+}
+
+    ::deep .advanced-filter .search-container input::placeholder {
+        color: #bbb;
+    }
+
+/* Creation */
+::deep .creation .search-container {
+    height: 24px;
+    background: var(--input-secondary);
+    border: solid 1px var(--input-selected);
+    box-sizing: border-box;
+}
diff --git a/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs b/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
index c904515..8f90fac 100644
--- a/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
+++ b/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
@@ -15,7 +15,7 @@ public class Translations (TranslationService translationService)
     public string LastAdd => translationService.Translate(nameof(LastAdd));
     public string Research => translationService.Translate(nameof(Research));
     public string Platforms => translationService.Translate(nameof(Platforms));
-    public string Genres => translationService.Translate(nameof(Genres));
+    public string Tags => translationService.Translate(nameof(Tags));
     public string Publishers => translationService.Translate(nameof(Publishers));
     public string Developers => translationService.Translate(nameof(Developers));
     public string StorageSize => translationService.Translate(nameof(StorageSize));
@@ -57,7 +57,7 @@ public static class ResourcesKey
     public static string LastAdd => _instance?.LastAdd ?? throw new InvalidOperationException("ResourcesKey.LastAdd is not initialized.");
     public static string Research => _instance?.Research ?? throw new InvalidOperationException("ResourcesKey.Research is not initialized.");
     public static string Platforms => _instance?.Platforms ?? throw new InvalidOperationException("ResourcesKey.Platforms is not initialized.");
-    public static string Genres => _instance?.Genres ?? throw new InvalidOperationException("ResourcesKey.Genres is not initialized.");
+    public static string Tags => _instance?.Tags ?? throw new InvalidOperationException("ResourcesKey.Tags is not initialized.");
     public static string Publishers => _instance?.Publishers ?? throw new InvalidOperationException("ResourcesKey.Publishers is not initialized.");
     public static string Developers => _instance?.Developers ?? throw new InvalidOperationException("ResourcesKey.Developers is not initialized.");
     public static string StorageSize => _instance?.StorageSize ?? throw new InvalidOperationException("ResourcesKey.StorageSize is not initialized.");
diff --git a/src/GameIdeas/GameIdeas.Shared/Dto/CategoriesDto.cs b/src/GameIdeas/GameIdeas.Shared/Dto/CategoriesDto.cs
index 233a090..4d6583f 100644
--- a/src/GameIdeas/GameIdeas.Shared/Dto/CategoriesDto.cs
+++ b/src/GameIdeas/GameIdeas.Shared/Dto/CategoriesDto.cs
@@ -2,9 +2,9 @@
 
 public class CategoriesDto
 {
-    public IEnumerable<PlatformDto>? Platforms { get; set; }
-    public IEnumerable<PropertyDto>? Properties { get; set; }
-    public IEnumerable<TagDto>? Tags { get; set; }
-    public IEnumerable<DeveloperDto>? Developers { get; set; }
-    public IEnumerable<PublisherDto>? Publishers { get; set; }
+    public List<PlatformDto>? Platforms { get; set; }
+    public List<PropertyDto>? Properties { get; set; }
+    public List<TagDto>? Tags { get; set; }
+    public List<DeveloperDto>? Developers { get; set; }
+    public List<PublisherDto>? Publishers { get; set; }
 }
diff --git a/src/GameIdeas/GameIdeas.Shared/Dto/GameFilterDto.cs b/src/GameIdeas/GameIdeas.Shared/Dto/GameFilterDto.cs
index 1401e19..d2922c2 100644
--- a/src/GameIdeas/GameIdeas.Shared/Dto/GameFilterDto.cs
+++ b/src/GameIdeas/GameIdeas.Shared/Dto/GameFilterDto.cs
@@ -6,14 +6,14 @@ public class GameFilterDto
     public SortTypeDto? SortType { get; set; }
     public SortPropertyDto? SortProperty { get; set; }
     public string? Title { get; set; }
-    public IEnumerable<PlatformDto>? Platforms { get; set; }
-    public IEnumerable<PropertyDto>? Properties { get; set; }
-    public IEnumerable<TagDto>? Tags { get; set; }
-    public IEnumerable<PublisherDto>? Publishers { get; set; }
-    public IEnumerable<DeveloperDto>? Developers { get; set; }
+    public List<PlatformDto>? Platforms { get; set; }
+    public List<PropertyDto>? Properties { get; set; }
+    public List<TagDto>? Tags { get; set; }
+    public List<PublisherDto>? Publishers { get; set; }
+    public List<DeveloperDto>? Developers { get; set; }
     public int MinInterest { get; set; } = 1;
     public int MaxInterest { get; set; } = 5;
-    public IEnumerable<int>? ReleaseYears { get; set; }
+    public List<int>? ReleaseYears { get; set; }
     public int? MinStorageSize { get; set; }
     public int? MaxStorageSize { get; set; }
 }
diff --git a/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json b/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
index 5185f4f..a3ec135 100644
--- a/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
+++ b/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
@@ -11,7 +11,7 @@
     "LastAdd": "Les ajouts récents",
     "Research": "Rechercher",
     "Platforms": "Plateformes",
-    "Genres": "Genres",
+    "Tags": "Genres",
     "Publishers": "Editeurs",
     "Developers": "Développeurs",
     "StorageSize": "Taille d'espace",
diff --git a/src/GameIdeas/Server/GameIdeas.WebAPI/Services/CategoryService.cs b/src/GameIdeas/Server/GameIdeas.WebAPI/Services/CategoryService.cs
index 5a1aefc..f3650a1 100644
--- a/src/GameIdeas/Server/GameIdeas.WebAPI/Services/CategoryService.cs
+++ b/src/GameIdeas/Server/GameIdeas.WebAPI/Services/CategoryService.cs
@@ -18,11 +18,11 @@ public class CategoryService(GameIdeasContext context, IMapper mapper) : ICatego
 
         return new()
         {
-            Platforms = mapper.Map<IEnumerable<PlatformDto>>(platforms),
-            Properties = mapper.Map<IEnumerable<PropertyDto>>(properties),
-            Tags = mapper.Map<IEnumerable<TagDto>>(tags),
-            Developers = mapper.Map<IEnumerable<DeveloperDto>>(developers),
-            Publishers = mapper.Map<IEnumerable<PublisherDto>>(publishers)
+            Platforms = mapper.Map<List<PlatformDto>>(platforms),
+            Properties = mapper.Map<List<PropertyDto>>(properties),
+            Tags = mapper.Map<List<TagDto>>(tags),
+            Developers = mapper.Map<List<DeveloperDto>>(developers),
+            Publishers = mapper.Map<List<PublisherDto>>(publishers)
         };
     }
 }