From 8c9e1630075ccc1c340abc101c8a47e743ea59ca Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Thu, 27 Feb 2025 20:57:17 +0100
Subject: [PATCH 01/14] initiat file

---
 .../GameIdeas.BlazorApp/Pages/Games/GamesBase.razor       | 5 ++---
 .../Pages/Games/Header/HeaderGame.razor                   | 4 ++++
 .../Pages/Games/Header/HeaderGame.razor.cs                | 8 ++++++++
 .../Pages/Games/Header/HeaderGame.razor.css               | 1 +
 .../GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor   | 2 +-
 .../Shared/Headers/HeaderBase.razor.cs                    | 2 +-
 .../Shared/Headers/HeaderBaseComponent.cs                 | 5 +++++
 7 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.css
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBaseComponent.cs
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
index 87718be..8b7779d 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
@@ -1,5 +1,6 @@
 ﻿@page "/Games"
 @using GameIdeas.BlazorApp.Layouts
+@using GameIdeas.BlazorApp.Pages.Games.Header
 @using GameIdeas.BlazorApp.Shared.Components
 @using GameIdeas.BlazorApp.Shared.Headers
 @using GameIdeas.Resources
@@ -9,7 +10,5 @@
 <PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
 
 <HeaderBase>
-    <Body>
-        <div>PROUT</div>
-    </Body>
+    <HeaderGame />
 </HeaderBase>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor
new file mode 100644
index 0000000..afd8803
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor
@@ -0,0 +1,4 @@
+﻿@using GameIdeas.BlazorApp.Shared.Headers
+@inherits HeaderBaseComponent
+
+
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs
new file mode 100644
index 0000000..f58f625
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs
@@ -0,0 +1,8 @@
+using GameIdeas.BlazorApp.Shared.Headers;
+
+namespace GameIdeas.BlazorApp.Pages.Games.Header;
+
+public partial class HeaderGame : HeaderBaseComponent
+{
+
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.css
new file mode 100644
index 0000000..5f28270
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.css
@@ -0,0 +1 @@
+﻿
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor
index d6c82f0..71f784f 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor
@@ -8,7 +8,7 @@
         <img src="icon.png" alt="Game Ideas">        
     </div>
 
-    @Body
+    @Header
 
     <div class="account-add-container">
         <div class="add-container">
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.cs
index 722958a..181a72e 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.cs
@@ -7,7 +7,7 @@ namespace GameIdeas.BlazorApp.Shared.Headers;
 
 public partial class HeaderBase
 {
-    [Parameter] public RenderFragment? Body { get; set; }
+    [Parameter] public HeaderBaseComponent? Header { get; set; }
     [Parameter] public EventCallback<AddType> AddTypeChanged { get; set; }
 
     private DropdownContent<AddTypeParams>? DropdownAdd;
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBaseComponent.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBaseComponent.cs
new file mode 100644
index 0000000..79f09b8
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBaseComponent.cs
@@ -0,0 +1,5 @@
+﻿using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Headers;
+
+public class HeaderBaseComponent : ComponentBase;
-- 
2.39.5


From 512deb6eaca8b5cd80d2ccdda559ac7cfaceca44 Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Sat, 1 Mar 2025 21:25:52 +0100
Subject: [PATCH 02/14] refactoring dropdown

---
 .../Pages/Games/GamesBase.razor               | 10 +--
 .../Pages/Games/Header/HeaderGame.razor       |  3 +-
 .../Pages/Games/Header/HeaderGame.razor.cs    |  4 +-
 .../Account}/AccountSettings.razor            |  2 +-
 .../Account}/AccountSettings.razor.cs         |  2 +-
 .../Account}/AccountSettings.razor.css        |  0
 .../Components/Dropdown/DropdownContent.razor | 13 ----
 .../Dropdown/DropdownContent.razor.cs         | 36 -----------
 .../Components/Dropdown/DropdownTheme.cs      |  7 --
 .../Select/Components/SelectListElement.razor | 15 +++++
 .../Components/SelectListElement.razor.cs     | 18 ++++++
 .../Components/SelectListElement.razor.css    | 25 ++++++++
 .../Shared/Components/Select/SelectElement.cs |  8 +++
 .../Shared/Components/Select/SelectList.razor | 32 ++++++++++
 .../Components/Select/SelectList.razor.cs     | 64 +++++++++++++++++++
 .../SelectList.razor.css}                     | 29 +++++----
 .../Shared/Components/Select/SelectTheme.cs   |  8 +++
 .../Shared/Headers/HeaderBaseComponent.cs     |  5 --
 .../Header/HeaderLayout.razor}                | 34 +++++-----
 .../Header/HeaderLayout.razor.cs}             | 16 +++--
 .../Header/HeaderLayout.razor.css}            |  0
 .../Header}/LoginValidator.cs                 |  2 +-
 22 files changed, 227 insertions(+), 106 deletions(-)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Headers => Components/Account}/AccountSettings.razor (96%)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Headers => Components/Account}/AccountSettings.razor.cs (95%)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Headers => Components/Account}/AccountSettings.razor.css (100%)
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.cs
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownTheme.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectElement.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/{Dropdown/DropdownContent.razor.css => Select/SelectList.razor.css} (53%)
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectTheme.cs
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBaseComponent.cs
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Headers/HeaderBase.razor => Layouts/Header/HeaderLayout.razor} (58%)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Headers/HeaderBase.razor.cs => Layouts/Header/HeaderLayout.razor.cs} (61%)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Headers/HeaderBase.razor.css => Layouts/Header/HeaderLayout.razor.css} (100%)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Headers => Layouts/Header}/LoginValidator.cs (86%)

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
index 8b7779d..0e9af03 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
@@ -2,13 +2,15 @@
 @using GameIdeas.BlazorApp.Layouts
 @using GameIdeas.BlazorApp.Pages.Games.Header
 @using GameIdeas.BlazorApp.Shared.Components
-@using GameIdeas.BlazorApp.Shared.Headers
+@using GameIdeas.BlazorApp.Shared.Layouts.Header
 @using GameIdeas.Resources
 
 @layout MainLayout
 
 <PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
 
-<HeaderBase>
-    <HeaderGame />
-</HeaderBase>
+<HeaderLayout>
+    <Body>
+        <HeaderGame />
+    </Body>
+</HeaderLayout>
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor
index afd8803..171fad3 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor
@@ -1,4 +1,3 @@
-﻿@using GameIdeas.BlazorApp.Shared.Headers
-@inherits HeaderBaseComponent
+﻿
 
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs
index f58f625..875ea39 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs
@@ -1,8 +1,6 @@
-using GameIdeas.BlazorApp.Shared.Headers;
-
 namespace GameIdeas.BlazorApp.Pages.Games.Header;
 
-public partial class HeaderGame : HeaderBaseComponent
+public partial class HeaderGame
 {
 
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor
similarity index 96%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor
index 578eead..22c10b9 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor
@@ -1,7 +1,7 @@
 ﻿@using GameIdeas.Resources
 @using Blazored.FluentValidation;
 
-<div class="account-setting-container" tabindex="1001">
+<div class="account-setting-container" tabindex="1000">
     <div class="account-setting-content @(ContentVisile ? string.Empty : "invisible")">
         @if (!AuthentificationService.IsLogin)
         {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs
similarity index 95%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor.cs
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs
index 97ff274..68ede95 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs
@@ -2,7 +2,7 @@ using GameIdeas.BlazorApp.Services;
 using GameIdeas.Shared.Dto;
 using Microsoft.AspNetCore.Components.Forms;
 
-namespace GameIdeas.BlazorApp.Shared.Headers;
+namespace GameIdeas.BlazorApp.Shared.Components.Account;
 
 public partial class AccountSettings (
     AuthentificationService AuthentificationService)
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
similarity index 100%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor.css
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor
deleted file mode 100644
index 1ddac6b..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor
+++ /dev/null
@@ -1,13 +0,0 @@
-﻿@typeparam TItem
-
-<div @ref=Content class="dropdown-container" tabindex="1000"
-        @onfocusout=HandleDropdownAddFocusOut>
-    <div class="dropdown-content @(ContentVisile ? string.Empty : "invisible") @(Enum.GetName(Theme)?.ToLower())">
-        @foreach (var item in Items)
-        {
-            <div class="drowdown-element @(Enum.GetName(Theme)?.ToLower())" @onclick=HandleItemClicked>
-                @(LabelSelector != null ? LabelSelector.Invoke(item) : item?.ToString())
-            </div>
-        }
-    </div>
-</div>
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.cs
deleted file mode 100644
index 97c8b71..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.cs
+++ /dev/null
@@ -1,36 +0,0 @@
-using Microsoft.AspNetCore.Components;
-
-namespace GameIdeas.BlazorApp.Shared.Components.Dropdown;
-
-public partial class DropdownContent<TItem>
-{
-    [Parameter] public TItem? Value { get; set; }
-    [Parameter] public EventCallback<TItem?> ValueChanged { get; set; }
-    [Parameter] public IEnumerable<TItem> Items { get; set; } = [];
-    [Parameter] public Func<TItem, string>? LabelSelector { get; set; }
-    [Parameter] public DropdownTheme Theme { get; set; }
-
-    private bool ContentVisile = false;
-    private DateTime ContentLastFocusOut = DateTime.Now;
-    private ElementReference Content;
-
-    public async Task OpenAsync()
-    {
-        if (DateTime.Now - ContentLastFocusOut >= TimeSpan.FromSeconds(0.2))
-        {
-            await Content.FocusAsync();
-            ContentVisile = true;
-        }
-    }
-
-    public void Close() => ContentVisile = false;
-
-    private void HandleDropdownAddFocusOut()
-    {
-        ContentLastFocusOut = DateTime.Now;
-        ContentVisile = false;
-    }
-
-    private async Task HandleItemClicked() => await ValueChanged.InvokeAsync(Value);
-
-}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownTheme.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownTheme.cs
deleted file mode 100644
index e225ac5..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownTheme.cs
+++ /dev/null
@@ -1,7 +0,0 @@
-﻿namespace GameIdeas.BlazorApp.Shared.Components.Dropdown;
-
-public enum DropdownTheme
-{
-    Navigation,
-    Account
-}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor
new file mode 100644
index 0000000..837f2ad
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor
@@ -0,0 +1,15 @@
+﻿@typeparam TItem
+
+<div class="select-element @(Enum.GetName(Theme)?.ToLower())" @onclick=HandleItemClicked>
+    <div class="selected">
+        @if (Value != null && Value.IsSelected)
+        {
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" />
+            </svg>
+        }
+    </div>
+    <div class="select-label">
+        @Value?.Label
+    </div>
+</div>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
new file mode 100644
index 0000000..c33f01a
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
@@ -0,0 +1,18 @@
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Components.Select.Components;
+
+public partial class SelectListElement<TItem>
+{
+    [Parameter] public EventCallback<SelectElement<TItem>?> ValueChanged { get; set; }
+    [Parameter] public SelectElement<TItem>? Value { get; set; }
+    [Parameter] public SelectListTheme Theme { get; set; }
+    private async Task HandleItemClicked()
+    {
+        if (Value != null)
+        {
+            Value.IsSelected = true;
+            await ValueChanged.InvokeAsync(Value);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
new file mode 100644
index 0000000..e7c5314
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
@@ -0,0 +1,25 @@
+﻿.select-element {
+    width: fit-content;
+}
+
+    .select-element:hover {
+        cursor: pointer;
+    }
+
+.selected svg {
+    fill: var(--white)
+}
+
+/***** Navigation Theme *****/
+.navigation .selected {
+    display: none;
+}
+
+.navigation .select-label:hover {
+    color: var(--light-grey);
+}
+
+/***** Sort Theme *****/
+.sort .select-label:hover {
+    color: var(--light-grey);
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectElement.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectElement.cs
new file mode 100644
index 0000000..b6a9299
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectElement.cs
@@ -0,0 +1,8 @@
+﻿namespace GameIdeas.BlazorApp.Shared.Components.Select;
+
+public class SelectElement<TItem>
+{
+    public TItem? Item { get; set; }
+    public string? Label { get; set; }
+    public bool IsSelected { get; set; } = false;
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
new file mode 100644
index 0000000..2a47bd3
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
@@ -0,0 +1,32 @@
+﻿@using GameIdeas.BlazorApp.Shared.Components.Select.Components
+@typeparam TItem
+
+<div class="select-list" @onclick=HandleButtonClicked>
+    <div class="select-button">
+        @Button
+    </div>
+    <div @ref=Container class="select-container" tabindex="1000"
+         @onfocusout=HandleFocusOut>
+        <div class="select-content @(ContentVisile ? string.Empty : "invisible") @(Enum.GetName(Theme)?.ToLower())">
+            @foreach (var item in Headers)
+            {
+                <SelectListElement TItem="TItem"
+                                   Value="item"
+                                   ValueChanged="HandleHeaderClicked"
+                                   Theme="Theme"/>
+            }
+            @if (Headers.Any())
+            {
+                <span class="line"></span>
+            }
+            @foreach (var item in Items)
+            {
+                <SelectListElement TItem="TItem"
+                                   Value="item"
+                                   ValueChanged="HandleItemClicked"
+                                   Theme="Theme" />
+            }
+        </div>
+    </div>
+</div>
+
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
new file mode 100644
index 0000000..415c24e
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
@@ -0,0 +1,64 @@
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Components.Select;
+
+public partial class SelectList<TItem> 
+{
+    [Parameter] public RenderFragment? Button { get; set; }
+    [Parameter] public TItem? Value { get; set; }
+    [Parameter] public EventCallback<TItem?> ValueChanged { get; set; }
+    [Parameter] public TItem? Header { get; set; }
+    [Parameter] public EventCallback<TItem?> HeaderChanged { get; set; }
+    [Parameter] public IEnumerable<SelectElement<TItem>> Items { get; set; } = [];
+    [Parameter] public IEnumerable<SelectElement<TItem>> Headers { get; set; } = [];
+    [Parameter] public SelectListTheme Theme { get; set; }
+    [Parameter] public bool AlignRight { get; set; }
+
+    private bool ContentVisile = false;
+    private DateTime ContentLastFocusOut = DateTime.Now;
+    private ElementReference Container;
+
+    public async Task OpenAsync()
+    {
+        if (DateTime.Now - ContentLastFocusOut >= TimeSpan.FromSeconds(0.2))
+        {
+            await Container.FocusAsync();
+            ContentVisile = true;
+        }
+    }
+
+    public void Close() => ContentVisile = false;
+
+    private async Task HandleButtonClicked() => await OpenAsync();
+
+    private void HandleFocusOut()
+    {
+        ContentLastFocusOut = DateTime.Now;
+        ContentVisile = false;
+    }
+
+    private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
+    {
+        foreach (var item in Items)
+        {
+            item.IsSelected = false;
+        }
+
+        selectedValue.IsSelected = true;
+        Value = selectedValue.Item;
+        await ValueChanged.InvokeAsync(Value);
+        Close();
+    }
+
+    private async Task HandleHeaderClicked(SelectElement<TItem> selectedValue)
+    {
+        foreach (var header in Headers)
+        {
+            header.IsSelected = false;
+        }
+
+        selectedValue.IsSelected = true;
+        Header = selectedValue.Item;
+        await HeaderChanged.InvokeAsync(Header);
+    }
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
similarity index 53%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.css
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
index 253d8f6..843330c 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
@@ -1,4 +1,4 @@
-﻿.dropdown-content {
+﻿.select-content {
     overflow: hidden;
     display: flex;
     flex-direction: column;
@@ -9,25 +9,28 @@
     margin-top: 4px;
 }
 
-.drowdown-element {
-    width: fit-content;
-}
-
-    .drowdown-element:hover {
-        cursor: pointer;
-    }
-
 .invisible {
     display: none;
 }
 
-.dropdown-content.navigation {
+.line {
+    margin: 0 6px;
+    border-bottom: 2px solid var(--light-grey);
+}
+
+/***** Navigation Theme *****/
+.select-content.navigation {
     gap: 4px;
     background: var(--violet);
     box-shadow: var(--drop-shadow);
     padding: 4px 6px;
 }
 
-    .drowdown-element.navigation:hover {
-        color: var(--light-grey);
-    }
+/***** Sort Theme *****/
+.select-content.sort {
+    gap: 4px;
+    background: var(--black);
+    box-shadow: var(--drop-shadow);
+    padding: 4px 6px;
+}
+
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectTheme.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectTheme.cs
new file mode 100644
index 0000000..f3bb87f
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectTheme.cs
@@ -0,0 +1,8 @@
+﻿namespace GameIdeas.BlazorApp.Shared.Components.Select;
+
+public enum SelectListTheme
+{
+    Navigation,
+    Sort,
+    Filter
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBaseComponent.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBaseComponent.cs
deleted file mode 100644
index 79f09b8..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBaseComponent.cs
+++ /dev/null
@@ -1,5 +0,0 @@
-﻿using Microsoft.AspNetCore.Components;
-
-namespace GameIdeas.BlazorApp.Shared.Headers;
-
-public class HeaderBaseComponent : ComponentBase;
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
similarity index 58%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
index 71f784f..b18fedc 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
@@ -1,14 +1,18 @@
 ﻿@using GameIdeas.BlazorApp.Pages.Games
 @using GameIdeas.BlazorApp.Pages.Games.Models
+@using GameIdeas.BlazorApp.Shared.Components.Account
 @using GameIdeas.BlazorApp.Shared.Components.Dropdown
+@using GameIdeas.BlazorApp.Shared.Components.Select
 @using GameIdeas.Resources
 
+@inherits LayoutComponentBase
+
 <div class="header-tab">
     <div class="icon-container" @onclick="HandleIconClicked">
-        <img src="icon.png" alt="Game Ideas">        
+        <img src="icon.png" alt="Game Ideas">
     </div>
 
-    @Header
+    @Body
 
     <div class="account-add-container">
         <div class="add-container">
@@ -18,21 +22,21 @@
                         <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
                     </svg>
                 </div>
-                <div class="second-button button" @onclick=HandleMoreButton>
-                    <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                        <path d="M1 3H23L12 22" />
-                    </svg>
-                </div>
-            </div>
-            <DropdownContent @ref="DropdownAdd"
-                             TItem="AddTypeParams"
-                             ValueChanged=HandleAddTypeClickedAsync
-                             Items="AddTypes"
-                             LabelSelector="(addtype => addtype.Label)"
-                             Theme="DropdownTheme.Navigation" />
+                <SelectList TItem="AddType"
+                            Items="SelectElements"
+                            ValueChanged=HandleAddTypeClickedAsync
+                            Theme="SelectListTheme.Navigation">
+                    <Button>
+                        <div class="second-button button">
+                            <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                <path d="M1 3H23L12 22" />
+                            </svg>
+                        </div>
+                    </Button>
+                </SelectList>
         </div>
         <div class="account-container">
-            <div class="icon-container">
+            <div class="icon-container" @onclick=HandleAccountClicked>
                 <svg class="account-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                     <path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
                 </svg>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs
similarity index 61%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.cs
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs
index 181a72e..b3a43f7 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs
@@ -1,15 +1,21 @@
 using GameIdeas.BlazorApp.Pages.Games.Models;
+using GameIdeas.BlazorApp.Shared.Components.Account;
 using GameIdeas.BlazorApp.Shared.Components.Dropdown;
+using GameIdeas.BlazorApp.Shared.Components.Select;
 using GameIdeas.Resources;
 using Microsoft.AspNetCore.Components;
 
-namespace GameIdeas.BlazorApp.Shared.Headers;
+namespace GameIdeas.BlazorApp.Shared.Layouts.Header;
 
-public partial class HeaderBase
+public partial class HeaderLayout : LayoutComponentBase
 {
-    [Parameter] public HeaderBaseComponent? Header { get; set; }
     [Parameter] public EventCallback<AddType> AddTypeChanged { get; set; }
 
+    private readonly IEnumerable<SelectElement<AddType>> SelectElements = [
+        new SelectElement<AddType> { Item = AddType.Manual, Label = ResourcesKey.ManualAdd },
+        new SelectElement<AddType> { Item = AddType.Auto, Label = ResourcesKey.AutoAdd }
+    ];
+
     private DropdownContent<AddTypeParams>? DropdownAdd;
     private readonly IEnumerable<AddTypeParams> AddTypes =
     [
@@ -34,9 +40,9 @@ public partial class HeaderBase
         AccountSettings?.Close();
     }
 
-    private async Task HandleAddTypeClickedAsync(AddTypeParams value)
+    private async Task HandleAddTypeClickedAsync(AddType value)
     {
-        await AddTypeChanged.InvokeAsync(value.AddType);
+        await AddTypeChanged.InvokeAsync(value);
     }
 
     private void HandleAccountClicked()
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
similarity index 100%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.css
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/LoginValidator.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/LoginValidator.cs
similarity index 86%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/LoginValidator.cs
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/LoginValidator.cs
index 931bd7b..14cd426 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/LoginValidator.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/LoginValidator.cs
@@ -1,7 +1,7 @@
 ﻿using FluentValidation;
 using GameIdeas.Shared.Dto;
 
-namespace GameIdeas.BlazorApp.Shared.Headers;
+namespace GameIdeas.BlazorApp.Shared.Layouts.Header;
 
 public class LoginValidator : AbstractValidator<LoginDto>
 {
-- 
2.39.5


From 713378ef9c814f2be43179ec876bce7075d816d5 Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Sat, 1 Mar 2025 21:28:45 +0100
Subject: [PATCH 03/14] fix build error

---
 .../Pages/Games/Models/AddType.cs              |  6 ------
 .../Components/Account}/AccountSetting.cs      |  2 +-
 .../Shared/Layouts/Header/HeaderLayout.razor   |  2 +-
 .../Layouts/Header/HeaderLayout.razor.cs       | 18 ------------------
 4 files changed, 2 insertions(+), 26 deletions(-)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/{Pages/Games/Models => Shared/Components/Account}/AccountSetting.cs (87%)

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AddType.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AddType.cs
index 6e34746..d526be0 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AddType.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AddType.cs
@@ -5,9 +5,3 @@ public enum AddType
     Manual,
     Auto
 }
-
-public class AddTypeParams(AddType addType, string label)
-{
-    public AddType AddType { get; set; } = addType;
-    public string? Label { get; set; } = label;
-}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AccountSetting.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSetting.cs
similarity index 87%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AccountSetting.cs
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSetting.cs
index 23e9ce3..487c78a 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AccountSetting.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSetting.cs
@@ -1,4 +1,4 @@
-namespace GameIdeas.BlazorApp.Pages.Games.Models;
+namespace GameIdeas.BlazorApp.Shared.Components.Account;
 
 public enum AccountSetting
 {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
index b18fedc..dc9b0dc 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
@@ -1,7 +1,6 @@
 ﻿@using GameIdeas.BlazorApp.Pages.Games
 @using GameIdeas.BlazorApp.Pages.Games.Models
 @using GameIdeas.BlazorApp.Shared.Components.Account
-@using GameIdeas.BlazorApp.Shared.Components.Dropdown
 @using GameIdeas.BlazorApp.Shared.Components.Select
 @using GameIdeas.Resources
 
@@ -34,6 +33,7 @@
                         </div>
                     </Button>
                 </SelectList>
+            </div>
         </div>
         <div class="account-container">
             <div class="icon-container" @onclick=HandleAccountClicked>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs
index b3a43f7..7dd8fdc 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs
@@ -1,6 +1,5 @@
 using GameIdeas.BlazorApp.Pages.Games.Models;
 using GameIdeas.BlazorApp.Shared.Components.Account;
-using GameIdeas.BlazorApp.Shared.Components.Dropdown;
 using GameIdeas.BlazorApp.Shared.Components.Select;
 using GameIdeas.Resources;
 using Microsoft.AspNetCore.Components;
@@ -16,13 +15,6 @@ public partial class HeaderLayout : LayoutComponentBase
         new SelectElement<AddType> { Item = AddType.Auto, Label = ResourcesKey.AutoAdd }
     ];
 
-    private DropdownContent<AddTypeParams>? DropdownAdd;
-    private readonly IEnumerable<AddTypeParams> AddTypes =
-    [
-        new AddTypeParams(AddType.Manual, ResourcesKey.ManualAdd),
-        new AddTypeParams(AddType.Auto, ResourcesKey.AutoAdd)
-    ];
-
     private AccountSettings? AccountSettings;
 
     private void HandleIconClicked()
@@ -30,16 +22,6 @@ public partial class HeaderLayout : LayoutComponentBase
         throw new NotImplementedException();
     }
 
-    private async Task HandleMoreButton()
-    {
-        if (DropdownAdd != null)
-        {
-            await DropdownAdd.OpenAsync();
-        }
-
-        AccountSettings?.Close();
-    }
-
     private async Task HandleAddTypeClickedAsync(AddType value)
     {
         await AddTypeChanged.InvokeAsync(value);
-- 
2.39.5


From ce0c43b48a96fd6bf421662b7a2a9778849b4f5c Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Sun, 2 Mar 2025 17:55:17 +0100
Subject: [PATCH 04/14] refactoring select list

---
 .../Components/SelectListElement.razor.css    | 15 ++++--
 .../Shared/Components/Select/SelectList.razor | 49 ++++++++++---------
 .../Components/Select/SelectList.razor.cs     |  1 -
 .../Components/Select/SelectList.razor.css    | 26 +++++-----
 .../Shared/Layouts/Header/HeaderLayout.razor  |  3 +-
 .../Layouts/Header/HeaderLayout.razor.css     |  2 +-
 6 files changed, 55 insertions(+), 41 deletions(-)

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
index e7c5314..9f39b89 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
@@ -11,13 +11,18 @@
 }
 
 /***** Navigation Theme *****/
-.navigation .selected {
-    display: none;
+.navigation {
+    padding: 4px 8px;
+    width: 100%;
 }
 
-.navigation .select-label:hover {
-    color: var(--light-grey);
-}
+.navigation .selected {
+    display: none;
+} 
+
+    .navigation:hover {
+        background: var(--violet-selected);
+    }
 
 /***** Sort Theme *****/
 .sort .select-label:hover {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
index 2a47bd3..0aee122 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
@@ -5,28 +5,33 @@
     <div class="select-button">
         @Button
     </div>
-    <div @ref=Container class="select-container" tabindex="1000"
-         @onfocusout=HandleFocusOut>
-        <div class="select-content @(ContentVisile ? string.Empty : "invisible") @(Enum.GetName(Theme)?.ToLower())">
-            @foreach (var item in Headers)
-            {
-                <SelectListElement TItem="TItem"
-                                   Value="item"
-                                   ValueChanged="HandleHeaderClicked"
-                                   Theme="Theme"/>
-            }
-            @if (Headers.Any())
-            {
-                <span class="line"></span>
-            }
-            @foreach (var item in Items)
-            {
-                <SelectListElement TItem="TItem"
-                                   Value="item"
-                                   ValueChanged="HandleItemClicked"
-                                   Theme="Theme" />
-            }
-        </div>
+    <div @ref=Container @onfocusout=HandleFocusOut
+        class="select-container @(AlignRight ? "align-right" : "")" 
+        tabindex="1000">
+
+        @if (ContentVisile)
+        {
+            <div class="select-content @(Enum.GetName(Theme)?.ToLower())">
+                @foreach (var item in Headers)
+                {
+                    <SelectListElement TItem="TItem"
+                                       Value="item"
+                                       ValueChanged="HandleHeaderClicked"
+                                       Theme="Theme" />
+                }
+                @if (Headers.Any())
+                {
+                    <span class="line"></span>
+                }
+                @foreach (var item in Items)
+                {
+                    <SelectListElement TItem="TItem"
+                                       Value="item"
+                                       ValueChanged="HandleItemClicked"
+                                       Theme="Theme" />
+                }
+            </div>
+        }
     </div>
 </div>
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
index 415c24e..e8cca12 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
@@ -47,7 +47,6 @@ public partial class SelectList<TItem>
         selectedValue.IsSelected = true;
         Value = selectedValue.Item;
         await ValueChanged.InvokeAsync(Value);
-        Close();
     }
 
     private async Task HandleHeaderClicked(SelectElement<TItem> selectedValue)
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
index 843330c..ead1cd6 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
@@ -1,16 +1,23 @@
-﻿.select-content {
+﻿.select-list {
+    position: relative;
+}
+
+.select-container {
+    margin-top: 4px;
+    position: absolute;
+}
+
+.align-right {
+    right: 0;
+}
+
+.select-content {
     overflow: hidden;
     display: flex;
     flex-direction: column;
     border-radius: var(--small-radius);
-    position: fixed;
     animation-name: fade-in;
     animation-duration: 0.4s;
-    margin-top: 4px;
-}
-
-.invisible {
-    display: none;
 }
 
 .line {
@@ -18,19 +25,16 @@
     border-bottom: 2px solid var(--light-grey);
 }
 
+
 /***** Navigation Theme *****/
 .select-content.navigation {
-    gap: 4px;
     background: var(--violet);
     box-shadow: var(--drop-shadow);
-    padding: 4px 6px;
 }
 
 /***** Sort Theme *****/
 .select-content.sort {
-    gap: 4px;
     background: var(--black);
     box-shadow: var(--drop-shadow);
-    padding: 4px 6px;
 }
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
index dc9b0dc..9c1b917 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
@@ -24,7 +24,8 @@
                 <SelectList TItem="AddType"
                             Items="SelectElements"
                             ValueChanged=HandleAddTypeClickedAsync
-                            Theme="SelectListTheme.Navigation">
+                            Theme="SelectListTheme.Navigation"
+                            AlignRight=true>
                     <Button>
                         <div class="second-button button">
                             <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
index 3648621..7661644 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
@@ -42,7 +42,7 @@
     flex-direction: row;
     background: var(--violet);
     border-radius: var(--small-radius);
-    overflow: hidden;
+    overflow: visible;
 }
 
 .button {
-- 
2.39.5


From 73114e932127022cfe852747355fd6424474e38d Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Sun, 2 Mar 2025 19:51:43 +0100
Subject: [PATCH 05/14] add sort button

---
 .../Pages/Games/Filter/GameFilter.razor       | 23 ++++++++++++
 .../Pages/Games/Filter/GameFilter.razor.cs    | 37 +++++++++++++++++++
 .../Pages/Games/Filter/GameFilter.razor.css   | 17 +++++++++
 .../Pages/Games/Filter/GameFilterParams.cs    | 10 +++++
 .../Pages/Games/GamesBase.razor               |  4 +-
 .../Pages/Games/Header/HeaderGame.razor       |  3 --
 .../Pages/Games/Header/HeaderGame.razor.cs    |  6 ---
 .../Pages/Games/Header/HeaderGame.razor.css   |  1 -
 .../Components/Account/AccountSetting.cs      | 20 ----------
 .../Account/AccountSettings.razor.css         |  6 +--
 .../Components/SelectListElement.razor.css    | 26 +++++++++++--
 .../Components/Select/SelectList.razor.css    |  5 ++-
 .../GameIdeas.BlazorApp/wwwroot/css/app.css   |  1 +
 src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs |  7 ++++
 .../GameIdeas.Shared/Enum/SortType.cs         |  7 ++++
 15 files changed, 133 insertions(+), 40 deletions(-)
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.css
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSetting.cs
 create mode 100644 src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs
 create mode 100644 src/GameIdeas/GameIdeas.Shared/Enum/SortType.cs

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
new file mode 100644
index 0000000..79c9572
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
@@ -0,0 +1,23 @@
+﻿@using GameIdeas.BlazorApp.Shared.Components.Select
+@using GameIdeas.Shared.Dto
+
+
+<EditForm EditContext="EditContext">
+    <SelectList TItem="Func<GameDto, object>"
+                Headers="SortTypes"
+                Items="GameProperties"
+                @bind-Value=GameFilterParams.GameProperty
+                HeaderChanged=HandleSortTypeChanged
+                Theme="SelectListTheme.Sort">
+        <Button>
+            <div class="sort-button">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path d="M18 21L14 17H17V7H14L18 3L22 7H19V17H22M2 19V17H12V19M2 13V11H9V13M2 7V5H6V7H2Z" />
+                </svg>
+            </div>
+        </Button>
+    </SelectList>
+</EditForm>
+
+
+
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
new file mode 100644
index 0000000..5868c38
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
@@ -0,0 +1,37 @@
+using GameIdeas.BlazorApp.Shared.Components.Select;
+using GameIdeas.Shared.Dto;
+using GameIdeas.Shared.Enum;
+using Microsoft.AspNetCore.Components.Forms;
+
+namespace GameIdeas.BlazorApp.Pages.Games.Filter;
+
+public partial class GameFilter
+{
+    private readonly IEnumerable<SelectElement<Func<GameDto?, object?>>> SortTypes = [
+        new() { Item = _ => SortType.Ascending, Label = "Ascendant", IsSelected = true },
+        new() { Item = _ => SortType.Descending, Label = "Descendant" }
+    ];
+    
+    private readonly IEnumerable<SelectElement<Func<GameDto?, object?>>> GameProperties = [
+        new() { Item = game => game?.Name, Label = "Nom", IsSelected = true },
+        new() { Item = game => game?.ReleaseDate, Label = "Date de parution" }
+    ];
+
+    private EditContext? EditContext;
+    private GameFilterParams GameFilterParams = new();
+
+    protected override void OnInitialized()
+    {
+        EditContext = new EditContext(GameFilterParams);
+        EditContext.OnFieldChanged += HandleFormChanged;
+    }
+
+    private void HandleFormChanged(object? sender, FieldChangedEventArgs e)
+    {
+        throw new NotImplementedException();
+    }
+    private void HandleSortTypeChanged(Func<GameDto?, object?> getHeader)
+    {
+        GameFilterParams.SortType = (SortType?)getHeader(null) ?? SortType.Ascending;
+    }
+}
\ 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
new file mode 100644
index 0000000..a1e4e53
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css
@@ -0,0 +1,17 @@
+﻿.sort-button {
+    height: 28px;
+    width: 28px;
+    border-radius: var(--small-radius);
+    background: var(--black);
+    overflow: hidden;
+}
+
+.sort-button svg {
+    fill: var(--white);
+    padding: 2px;
+}
+
+    .sort-button svg:hover {
+        cursor: pointer;
+        background: var(--low-white);
+    }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
new file mode 100644
index 0000000..c98d496
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
@@ -0,0 +1,10 @@
+﻿using GameIdeas.Shared.Enum;
+using GameIdeas.Shared.Dto;
+
+namespace GameIdeas.BlazorApp.Pages.Games.Filter;
+
+public class GameFilterParams
+{
+    public SortType? SortType { get; set; }
+    public Func<GameDto?, object?>? GameProperty { get; set; }
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
index 0e9af03..d317dda 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
@@ -1,6 +1,6 @@
 ﻿@page "/Games"
 @using GameIdeas.BlazorApp.Layouts
-@using GameIdeas.BlazorApp.Pages.Games.Header
+@using GameIdeas.BlazorApp.Pages.Games.Filter
 @using GameIdeas.BlazorApp.Shared.Components
 @using GameIdeas.BlazorApp.Shared.Layouts.Header
 @using GameIdeas.Resources
@@ -11,6 +11,6 @@
 
 <HeaderLayout>
     <Body>
-        <HeaderGame />
+        <GameFilter />
     </Body>
 </HeaderLayout>
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor
deleted file mode 100644
index 171fad3..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor
+++ /dev/null
@@ -1,3 +0,0 @@
-﻿
-
-
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs
deleted file mode 100644
index 875ea39..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs
+++ /dev/null
@@ -1,6 +0,0 @@
-namespace GameIdeas.BlazorApp.Pages.Games.Header;
-
-public partial class HeaderGame
-{
-
-}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.css
deleted file mode 100644
index 5f28270..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.css
+++ /dev/null
@@ -1 +0,0 @@
-﻿
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSetting.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSetting.cs
deleted file mode 100644
index 487c78a..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSetting.cs
+++ /dev/null
@@ -1,20 +0,0 @@
-namespace GameIdeas.BlazorApp.Shared.Components.Account;
-
-public enum AccountSetting
-{
-	Logout
-}
-
-public class AccountSettingParams
-{
-    public string Label { get; set; }
-    public AccountSetting AccountSetting { get; set; }
-    public bool ForConnected { get; set; }
-
-    public AccountSettingParams(string label, AccountSetting accountSetting, bool forConnected)
-    {
-        Label = label;
-        AccountSetting = accountSetting;
-        ForConnected = forConnected;
-    }
-}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
index de479fc..7550294 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
@@ -4,7 +4,7 @@
     position: fixed;
     animation-name: fade-in;
     animation-duration: 0.4s;
-    border: 2px solid var(--light-grey);
+    border: 2px solid var(--low-white);
     background: var(--black);
     right: 10px;
     margin-top: 4px;
@@ -17,7 +17,7 @@
 .login-form {
     display: flex;
     flex-direction: column;
-    padding: 20px 6px;
+    padding: 20px 8px;
     gap: 20px;
     max-width: 400px;
 }
@@ -31,7 +31,7 @@
 
 ::deep .input-text {
     background: var(--light-grey);
-    border: 2px solid rgb(255, 255, 255, 0.3);
+    border: 2px solid var(--low-white);
     border-radius: var(--small-radius);
     padding: 6px;
     color: var(--white);
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
index 9f39b89..38ad19b 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
@@ -25,6 +25,26 @@
     }
 
 /***** Sort Theme *****/
-.sort .select-label:hover {
-    color: var(--light-grey);
-}
\ No newline at end of file
+.sort {
+    gap: 6px;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    padding: 2px 6px;
+}
+
+    .sort:hover {
+        background: var(--low-white);
+    }
+
+.sort .selected {
+    width: 20px;
+    height: 20px;
+}
+
+.sort .select-label {
+    text-wrap: nowrap;
+    margin-right: 6px;
+}
+
+
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
index ead1cd6..bdbf6ba 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
@@ -21,8 +21,8 @@
 }
 
 .line {
-    margin: 0 6px;
-    border-bottom: 2px solid var(--light-grey);
+    margin: 2px 6px;
+    border-bottom: 2px solid var(--low-white);
 }
 
 
@@ -36,5 +36,6 @@
 .select-content.sort {
     background: var(--black);
     box-shadow: var(--drop-shadow);
+    padding: 4px 0;
 }
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
index b9df5af..b744d36 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
@@ -10,6 +10,7 @@
     --light-grey: #5C5C5E;
     --black: rgba(44, 43, 46, 0.8);
     --white: #fff;
+    --low-white: rgb(255, 255, 255, 0.1);
     --semi-black: rgba(0, 0, 0, 0.5);
     --line-black: rgba(0, 0, 0, 0.2);
     --small-radius: 4px;
diff --git a/src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs b/src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs
new file mode 100644
index 0000000..293a672
--- /dev/null
+++ b/src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs
@@ -0,0 +1,7 @@
+﻿namespace GameIdeas.Shared.Dto;
+
+public class GameDto
+{
+    public string? Name { get; set; }
+    public string? ReleaseDate { get; set; }
+}
\ No newline at end of file
diff --git a/src/GameIdeas/GameIdeas.Shared/Enum/SortType.cs b/src/GameIdeas/GameIdeas.Shared/Enum/SortType.cs
new file mode 100644
index 0000000..e3091cc
--- /dev/null
+++ b/src/GameIdeas/GameIdeas.Shared/Enum/SortType.cs
@@ -0,0 +1,7 @@
+﻿namespace GameIdeas.Shared.Enum;
+
+public enum SortType
+{
+    Ascending,
+    Descending
+}
-- 
2.39.5


From 47af962a383f94dd8caba9b1acf438cfb0a70a4f Mon Sep 17 00:00:00 2001
From: Maxime Adler <madler@sqli.com>
Date: Mon, 10 Mar 2025 16:30:34 +0100
Subject: [PATCH 06/14] Add display type button

---
 .../Pages/Games/Filter/GameFilter.razor       | 43 +++++++++++++------
 .../Pages/Games/Filter/GameFilter.razor.cs    | 23 +++++++---
 .../Pages/Games/Filter/GameFilter.razor.css   | 40 ++++++++++++++---
 .../Pages/Games/GamesBase.razor               |  2 +-
 .../Pages/Games/GamesBase.razor.cs            |  4 +-
 .../Pages/Games/Models/DisplayType.cs         |  7 +++
 .../Components/Select/SelectList.razor.css    |  2 +-
 .../GameIdeas.BlazorApp/wwwroot/css/app.css   |  2 +-
 8 files changed, 93 insertions(+), 30 deletions(-)
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs

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 79c9572..84907eb 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
@@ -1,22 +1,37 @@
 ﻿@using GameIdeas.BlazorApp.Shared.Components.Select
 @using GameIdeas.Shared.Dto
+@using GameIdeas.BlazorApp.Pages.Games.Models
 
 
 <EditForm EditContext="EditContext">
-    <SelectList TItem="Func<GameDto, object>"
-                Headers="SortTypes"
-                Items="GameProperties"
-                @bind-Value=GameFilterParams.GameProperty
-                HeaderChanged=HandleSortTypeChanged
-                Theme="SelectListTheme.Sort">
-        <Button>
-            <div class="sort-button">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                    <path d="M18 21L14 17H17V7H14L18 3L22 7H19V17H22M2 19V17H12V19M2 13V11H9V13M2 7V5H6V7H2Z" />
-                </svg>
-            </div>
-        </Button>
-    </SelectList>
+    <div class="form-filter">
+        <SelectList TItem="Func<GameDto, object>"
+                    Headers="SortTypes"
+                    Items="GameProperties"
+                    @bind-Value=GameFilterParams.GameProperty
+                    HeaderChanged=HandleSortTypeChanged
+                    Theme="SelectListTheme.Sort">
+            <Button>
+                <div class="square-button">
+                    <svg class="sort-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                        <path d="M10,13H22V11H10M10,19H22V17H10M10,7H22V5H10M6,7H8.5L5,3.5L1.5,7H4V17H1.5L5,20.5L8.5,17H6V7Z" />
+                    </svg>
+                </div>
+            </Button>
+        </SelectList>
+
+        <div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.List))">
+            <svg class="list-icon @(DisplayType == DisplayType.List ? "selected-icon" : "")" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path d="M4,5V7H21V5M4,11H21V9H4M4,19H21V17H4M4,15H21V13H4V15Z" />
+            </svg>
+        </div>
+
+        <div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.Card))">
+            <svg class="card-icon @(DisplayType == DisplayType.Card ? "selected-icon" : "")" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path d="M16,5V11H21V5M10,11H15V5H10M16,18H21V12H16M10,18H15V12H10M4,18H9V12H4M4,11H9V5H4V11Z" />
+            </svg>
+        </div>
+    </div>
 </EditForm>
 
 
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 5868c38..36c0646 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
@@ -1,12 +1,19 @@
+using GameIdeas.BlazorApp.Pages.Games.Models;
 using GameIdeas.BlazorApp.Shared.Components.Select;
 using GameIdeas.Shared.Dto;
 using GameIdeas.Shared.Enum;
+using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Forms;
 
 namespace GameIdeas.BlazorApp.Pages.Games.Filter;
 
 public partial class GameFilter
 {
+    [Parameter] public GameFilterParams GameFilterParams { get; set; } = new();
+    [Parameter] public EventCallback<GameFilterParams> GameFilterParamsChanged { get; set; }
+    [Parameter] public DisplayType DisplayType { get; set; }
+    [Parameter] public EventCallback<DisplayType> DisplayTypeChanged { get; set; }
+
     private readonly IEnumerable<SelectElement<Func<GameDto?, object?>>> SortTypes = [
         new() { Item = _ => SortType.Ascending, Label = "Ascendant", IsSelected = true },
         new() { Item = _ => SortType.Descending, Label = "Descendant" }
@@ -18,20 +25,24 @@ public partial class GameFilter
     ];
 
     private EditContext? EditContext;
-    private GameFilterParams GameFilterParams = new();
 
     protected override void OnInitialized()
     {
         EditContext = new EditContext(GameFilterParams);
-        EditContext.OnFieldChanged += HandleFormChanged;
+        EditContext.OnFieldChanged += async (s, e) =>
+        {
+            await GameFilterParamsChanged.InvokeAsync(GameFilterParams);
+        };
     }
 
-    private void HandleFormChanged(object? sender, FieldChangedEventArgs e)
-    {
-        throw new NotImplementedException();
-    }
     private void HandleSortTypeChanged(Func<GameDto?, object?> getHeader)
     {
         GameFilterParams.SortType = (SortType?)getHeader(null) ?? SortType.Ascending;
     }
+
+    private async Task HandleDisplayClicked(DisplayType displayType)
+    {
+        DisplayType = displayType;
+        await DisplayTypeChanged.InvokeAsync(displayType);
+    }
 }
\ 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 a1e4e53..34db4b4 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
@@ -1,4 +1,10 @@
-﻿.sort-button {
+﻿.form-filter {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+}
+
+.square-button {
     height: 28px;
     width: 28px;
     border-radius: var(--small-radius);
@@ -6,12 +12,34 @@
     overflow: hidden;
 }
 
-.sort-button svg {
+    .square-button:first-child {
+        margin-right: 16px;
+    }
+
+.square-button svg {
     fill: var(--white);
+}
+
+    .square-button svg:hover {
+        cursor: pointer;
+        background: var(--low-white);
+    }
+
+.selected-icon {
+    fill: var(--violet) !important;
+}
+
+.sort-icon {
     padding: 2px;
 }
 
-    .sort-button svg:hover {
-        cursor: pointer;
-        background: var(--low-white);
-    }
\ No newline at end of file
+.list-icon {
+    padding-right: 1px;
+    padding-top: 0.5px;
+    padding-bottom: 0.5px;
+}
+
+.card-icon {
+    padding-top: 1px;
+    padding-right: 1px;
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
index d317dda..e30c95a 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
@@ -11,6 +11,6 @@
 
 <HeaderLayout>
     <Body>
-        <GameFilter />
+        <GameFilter @bind-DisplayType=DisplayType />
     </Body>
 </HeaderLayout>
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs
index dc671cf..d4cfdaf 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs
@@ -1,6 +1,8 @@
+using GameIdeas.BlazorApp.Pages.Games.Models;
+
 namespace GameIdeas.BlazorApp.Pages.Games;
 
 public partial class GamesBase ()
 {
-
+    private DisplayType DisplayType = DisplayType.List;
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs
new file mode 100644
index 0000000..f3c0af4
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs
@@ -0,0 +1,7 @@
+﻿namespace GameIdeas.BlazorApp.Pages.Games.Models;
+
+public enum DisplayType
+{
+    Card,
+    List
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
index bdbf6ba..facfbda 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
@@ -34,7 +34,7 @@
 
 /***** Sort Theme *****/
 .select-content.sort {
-    background: var(--black);
+    background: var(--semi-black);
     box-shadow: var(--drop-shadow);
     padding: 4px 0;
 }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
index b744d36..725eae6 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
@@ -8,7 +8,7 @@
     --yellow: #FFC107;
     --green: #43F8C0;
     --light-grey: #5C5C5E;
-    --black: rgba(44, 43, 46, 0.8);
+    --black: rgba(0, 0, 0, 0.8);
     --white: #fff;
     --low-white: rgb(255, 255, 255, 0.1);
     --semi-black: rgba(0, 0, 0, 0.5);
-- 
2.39.5


From fbcd40834e7dfa36ee407c613f34a7b3d9c810c3 Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Mon, 10 Mar 2025 20:59:46 +0100
Subject: [PATCH 07/14] Add search input

---
 .../Pages/Games/Filter/GameFilter.razor       |  8 ++-
 .../Pages/Games/Filter/GameFilterParams.cs    |  3 +-
 .../Components/Account/AccountSettings.razor  |  5 +-
 .../Account/AccountSettings.razor.cs          |  6 +--
 .../Account/AccountSettings.razor.css         |  4 +-
 .../Components/Search/SearchInput.razor       | 18 +++++++
 .../Components/Search/SearchInput.razor.cs    | 29 ++++++++++
 .../Components/Search/SearchInput.razor.css   | 53 +++++++++++++++++++
 .../CreateStaticResourceKey.cs                |  2 +
 .../Constants/GlobalConstants.cs              |  7 +++
 .../GameIdeas.WebAPI/Files/GameIdeas.fr.json  |  3 +-
 11 files changed, 128 insertions(+), 10 deletions(-)
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
 create mode 100644 src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs

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 84907eb..d6718a2 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
@@ -1,4 +1,5 @@
-﻿@using GameIdeas.BlazorApp.Shared.Components.Select
+﻿@using GameIdeas.BlazorApp.Shared.Components.Search
+@using GameIdeas.BlazorApp.Shared.Components.Select
 @using GameIdeas.Shared.Dto
 @using GameIdeas.BlazorApp.Pages.Games.Models
 
@@ -8,7 +9,7 @@
         <SelectList TItem="Func<GameDto, object>"
                     Headers="SortTypes"
                     Items="GameProperties"
-                    @bind-Value=GameFilterParams.GameProperty
+                    @bind-Value=GameFilterParams.SortProperty
                     HeaderChanged=HandleSortTypeChanged
                     Theme="SelectListTheme.Sort">
             <Button>
@@ -31,6 +32,9 @@
                 <path d="M16,5V11H21V5M10,11H15V5H10M16,18H21V12H16M10,18H15V12H10M4,18H9V12H4M4,11H9V5H4V11Z" />
             </svg>
         </div>
+
+        <SearchInput @bind-Text=GameFilterParams.SearchName />
+
     </div>
 </EditForm>
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
index c98d496..8e2d3e8 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
@@ -6,5 +6,6 @@ namespace GameIdeas.BlazorApp.Pages.Games.Filter;
 public class GameFilterParams
 {
     public SortType? SortType { get; set; }
-    public Func<GameDto?, object?>? GameProperty { get; set; }
+    public Func<GameDto?, object?>? SortProperty { get; set; }
+    public string? SearchName { get; set; }
 }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor
index 22c10b9..5b111c2 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor
@@ -36,10 +36,13 @@
         else
         {
             <div class="settings-list">
+                <div class="settings-element">
+                    @ResourcesKey.UserManager
+                </div>
+                <span class="line"></span>
                 <div class="settings-element" @onclick="HandleLogoutClicked">
                     @ResourcesKey.Logout
                 </div>
-                @* <span class="line"></span> *@
             </div>
         }
     </div>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs
index 68ede95..4e36135 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs
@@ -39,17 +39,17 @@ public partial class AccountSettings (
     {
         if (EditContext?.Validate() == false)
         {
-            LoginDto.Password = string.Empty;
             return;
         }
 
         IsLoading = true;
         await Task.Delay(TimeSpan.FromSeconds(5));
+        Close();
+        AuthentificationService.Login();
         IsLoading = false;
 
         LoginDto = new();
-        Close();
-        AuthentificationService.Login();
+        EditContext = new EditContext(LoginDto);
     }
     private void HandleLogoutClicked()
     {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
index 7550294..6a651ee 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
@@ -5,7 +5,7 @@
     animation-name: fade-in;
     animation-duration: 0.4s;
     border: 2px solid var(--low-white);
-    background: var(--black);
+    background: var(--semi-black);
     right: 10px;
     margin-top: 4px;
 }
@@ -30,7 +30,7 @@
 }
 
 ::deep .input-text {
-    background: var(--light-grey);
+    background: var(--low-white);
     border: 2px solid var(--low-white);
     border-radius: var(--small-radius);
     padding: 6px;
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
new file mode 100644
index 0000000..a83c92f
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
@@ -0,0 +1,18 @@
+﻿<EditForm EditContext="EditContext">
+    <div class="search-container">
+        <InputText class="search-field"
+                   @bind-Value=Text />
+
+        <div class="clear-icon" @onclick=HandleClearClicked>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
+            </svg>
+        </div>
+        <div type="submit" class="search-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
+            </svg>
+        </div>
+    </div>
+</EditForm>
+
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
new file mode 100644
index 0000000..976b70b
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
@@ -0,0 +1,29 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Forms;
+using System.Threading.Tasks;
+
+namespace GameIdeas.BlazorApp.Shared.Components.Search;
+
+public partial class SearchInput
+{
+    [Parameter] public string? Text { get; set; }
+    [Parameter] public EventCallback<string> TextChanged { get; set; }
+
+    private EditContext? EditContext;
+
+    protected override void OnInitialized()
+    {
+        Text = string.Empty;
+        EditContext = new EditContext(Text);
+
+        EditContext.OnFieldChanged += async (s, e) =>
+        {
+            await TextChanged.InvokeAsync(Text);
+        };
+    }
+
+    private void HandleClearClicked()
+    {
+        Text = string.Empty;
+    }
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
new file mode 100644
index 0000000..552ef2f
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
@@ -0,0 +1,53 @@
+﻿.search-container {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    height: 28px;
+    padding-left: 8px;
+    padding-right: 2px;
+    border-radius: var(--small-radius);
+    background: var(--black);
+    overflow: hidden;
+    align-items: center;
+    width: 140px;
+}
+
+::deep .search-field {
+    border: none !important;
+    outline: none !important;
+    background: none !important;
+    color: var(--white);
+    height: 100%;
+    padding: 0;
+    min-width: 0;
+}
+
+.clear-icon {
+    min-height: 18px;
+    min-width: 18px;
+    height: 18px;
+    width: 18px;
+}
+
+    .clear-icon:hover {
+        cursor: pointer;
+    }
+
+    .clear-icon svg {
+        fill: var(--white);
+    }
+
+.search-icon {
+    min-height: 24px;
+    min-width: 24px;
+    height: 24px;
+    width: 24px;
+}
+
+    .search-icon:hover {
+        cursor: pointer;
+    }
+
+    .search-icon svg {
+        fill: var(--white);
+    }
diff --git a/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs b/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
index 2509e89..d81c880 100644
--- a/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
+++ b/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
@@ -10,6 +10,7 @@ public class Translations (TranslationService translationService)
     public string Logout => translationService.Translate(nameof(Logout));
     public string EnterUsername => translationService.Translate(nameof(EnterUsername));
     public string EnterPassword => translationService.Translate(nameof(EnterPassword));
+    public string UserManager => translationService.Translate(nameof(UserManager));
 }
 
 public static class ResourcesKey
@@ -28,4 +29,5 @@ public static class ResourcesKey
     public static string Logout => _instance?.Logout ?? throw new InvalidOperationException("ResourcesKey.Logout is not initialized.");
     public static string EnterUsername => _instance?.EnterUsername ?? throw new InvalidOperationException("ResourcesKey.EnterUsername is not initialized.");
     public static string EnterPassword => _instance?.EnterPassword ?? throw new InvalidOperationException("ResourcesKey.EnterPassword is not initialized.");
+    public static string UserManager => _instance?.UserManager ?? throw new InvalidOperationException("ResourcesKey.UserManager is not initialized.");
 }
\ No newline at end of file
diff --git a/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs b/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs
new file mode 100644
index 0000000..21d357b
--- /dev/null
+++ b/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs
@@ -0,0 +1,7 @@
+﻿namespace GameIdeas.Shared.Constants;
+
+public class GlobalConstants
+{
+    public const string EnterKeyCode = "Enter";
+    public const string PadEnterKeyCode = "NumpadEnter";
+}
diff --git a/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json b/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
index ea987f0..5feb362 100644
--- a/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
+++ b/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
@@ -5,5 +5,6 @@
   "Login": "Se connecter",
   "Logout": "Se déconnecter",
   "EnterUsername": "Nom d'utilisateur",
-  "EnterPassword": "Mot de passe"
+  "EnterPassword": "Mot de passe",
+  "UserManager": "Gestion des utilisateurs"
 }
\ No newline at end of file
-- 
2.39.5


From 3ba79fdf037f09293803dafa5e0433b229e93e74 Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Tue, 11 Mar 2025 00:14:09 +0100
Subject: [PATCH 08/14] add multiple select list

---
 .../Account}/LoginValidator.cs                |  2 +-
 .../Components/Search/SearchInput.razor       | 25 ++++++---
 .../Components/Search/SearchInput.razor.cs    |  1 +
 .../Components/Search/SearchInputIcon.cs      |  7 +++
 .../Components/SelectListElement.razor.cs     |  1 -
 .../Components/SelectListElement.razor.css    | 24 +++++----
 .../Select/MultipleSelectList.razor           | 29 +++++++++++
 .../Select/MultipleSelectList.razor.cs        | 51 +++++++++++++++++++
 .../Select/MultipleSelectList.razor.css       |  1 +
 .../Shared/Components/Select/SelectElement.cs |  1 +
 .../Components/Select/SelectList.razor.cs     |  2 +-
 11 files changed, 124 insertions(+), 20 deletions(-)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Layouts/Header => Components/Account}/LoginValidator.cs (85%)
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInputIcon.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/LoginValidator.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/LoginValidator.cs
similarity index 85%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/LoginValidator.cs
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/LoginValidator.cs
index 14cd426..629c3c9 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/LoginValidator.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/LoginValidator.cs
@@ -1,7 +1,7 @@
 ﻿using FluentValidation;
 using GameIdeas.Shared.Dto;
 
-namespace GameIdeas.BlazorApp.Shared.Layouts.Header;
+namespace GameIdeas.BlazorApp.Shared.Components.Account;
 
 public class LoginValidator : AbstractValidator<LoginDto>
 {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
index a83c92f..50b36d0 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
@@ -1,16 +1,27 @@
 ﻿<EditForm EditContext="EditContext">
     <div class="search-container">
         <InputText class="search-field"
-                   @bind-Value=Text />
+        @bind-Value=Text />
+
+        @if (!string.IsNullOrEmpty(Text))
+        {
+            <div class="clear-icon" @onclick=HandleClearClicked>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
+                </svg>
+            </div>
+        }
 
-        <div class="clear-icon" @onclick=HandleClearClicked>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
-            </svg>
-        </div>
         <div type="submit" class="search-icon">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
+                @if (Icon == SearchInputIcon.Search)
+                {
+                    <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
+                }
+                else if (Icon == SearchInputIcon.Dropdown)
+                {
+                    <path style="fill: var(--violet)" d="M1 3H23L12 22" />
+                }
             </svg>
         </div>
     </div>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
index 976b70b..d9e601f 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
@@ -8,6 +8,7 @@ public partial class SearchInput
 {
     [Parameter] public string? Text { get; set; }
     [Parameter] public EventCallback<string> TextChanged { get; set; }
+    [Parameter] public SearchInputIcon Icon { get; set; }
 
     private EditContext? EditContext;
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInputIcon.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInputIcon.cs
new file mode 100644
index 0000000..3f731f2
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInputIcon.cs
@@ -0,0 +1,7 @@
+﻿namespace GameIdeas.BlazorApp.Shared.Components.Search;
+
+public enum SearchInputIcon
+{
+    Search,
+    Dropdown
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
index c33f01a..c37d70b 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
@@ -11,7 +11,6 @@ public partial class SelectListElement<TItem>
     {
         if (Value != null)
         {
-            Value.IsSelected = true;
             await ValueChanged.InvokeAsync(Value);
         }
     }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
index 38ad19b..792c973 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
@@ -1,19 +1,32 @@
 ﻿.select-element {
+    display: flex;
+    flex-direction: row;
     width: fit-content;
+    width: 100%;
+    gap: 6px;
+    height: 20px;
+    align-items: center;
 }
 
     .select-element:hover {
         cursor: pointer;
     }
 
+.selected {
+    width: 12px;
+    min-width: 12px;
+    height: 12px;
+    min-height: 12px;
+}
+
 .selected svg {
+    display: block;
     fill: var(--white)
 }
 
 /***** Navigation Theme *****/
 .navigation {
     padding: 4px 8px;
-    width: 100%;
 }
 
 .navigation .selected {
@@ -26,10 +39,6 @@
 
 /***** Sort Theme *****/
 .sort {
-    gap: 6px;
-    display: flex;
-    flex-direction: row;
-    width: 100%;
     padding: 2px 6px;
 }
 
@@ -37,11 +46,6 @@
         background: var(--low-white);
     }
 
-.sort .selected {
-    width: 20px;
-    height: 20px;
-}
-
 .sort .select-label {
     text-wrap: nowrap;
     margin-right: 6px;
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
new file mode 100644
index 0000000..05e534f
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
@@ -0,0 +1,29 @@
+﻿@using GameIdeas.BlazorApp.Shared.Components.Search
+@using GameIdeas.BlazorApp.Shared.Components.Select.Components
+@typeparam TItem
+
+<div class="select-list" @onclick=HandleButtonClicked>
+    <div class="select-button">
+        <SearchInput Icon="SearchInputIcon.Dropdown"
+                     Text="Text"
+                     TextChanged="HandleTextChanged"/>
+    </div>
+    <div @ref=Container @onfocusout=HandleFocusOut
+         class="select-container @(AlignRight ? "align-right" : "")"
+         tabindex="1000">
+
+        @if (ContentVisile)
+        {
+            <div class="select-content @(Enum.GetName(Theme)?.ToLower())">
+                @foreach (var item in Items)
+                {
+                    <SelectListElement TItem="TItem"
+                                       Value="item"
+                                       ValueChanged="HandleItemClicked"
+                                       Theme="Theme" />
+                }
+            </div>
+        }
+    </div>
+</div>
+
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
new file mode 100644
index 0000000..727513b
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
@@ -0,0 +1,51 @@
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Components.Select;
+
+public partial class MultipleSelectList<TItem>
+{
+    [Parameter] public IEnumerable<TItem>? Values { get; set; }
+    [Parameter] public EventCallback<IEnumerable<TItem>?> ValuesChanged { get; set; }
+    [Parameter] public IEnumerable<SelectElement<TItem>> Items { get; set; } = [];
+    [Parameter] public SelectListTheme Theme { get; set; }
+    [Parameter] public bool AlignRight { get; set; }
+
+    private bool ContentVisile = false;
+    private DateTime ContentLastFocusOut = DateTime.Now;
+    private ElementReference Container;
+    private string? Text;
+
+    public async Task OpenAsync()
+    {
+        if (DateTime.Now - ContentLastFocusOut >= TimeSpan.FromSeconds(0.2))
+        {
+            await Container.FocusAsync();
+            ContentVisile = true;
+        }
+    }
+
+    public void Close() => ContentVisile = false;
+
+    private async Task HandleButtonClicked() => await OpenAsync();
+
+    private void HandleFocusOut()
+    {
+        ContentLastFocusOut = DateTime.Now;
+        ContentVisile = true;
+    }
+
+    private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
+    {
+        selectedValue.IsSelected = !selectedValue.IsSelected;
+        Values = Items.Where(x => x.IsSelected && x.Item != null).Select(x => x.Item!);
+        Text = string.Join(", ", Values);
+        await ValuesChanged.InvokeAsync(Values);
+    }
+    private void HandleTextChanged(string args)
+    {
+        foreach (var item in Items)
+        {
+            item.IsSelected = false;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
new file mode 100644
index 0000000..3c7930d
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
@@ -0,0 +1 @@
+﻿@import "SelectList.razor.css";
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectElement.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectElement.cs
index b6a9299..6815c78 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectElement.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectElement.cs
@@ -5,4 +5,5 @@ public class SelectElement<TItem>
     public TItem? Item { get; set; }
     public string? Label { get; set; }
     public bool IsSelected { get; set; } = false;
+    public bool IsNew { get; set; } = false;
 }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
index e8cca12..13e6254 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
@@ -34,7 +34,7 @@ public partial class SelectList<TItem>
     private void HandleFocusOut()
     {
         ContentLastFocusOut = DateTime.Now;
-        ContentVisile = false;
+        ContentVisile = true;
     }
 
     private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
-- 
2.39.5


From 7d8f1c954489ff288193af063e7ca0e9a0ba16cf Mon Sep 17 00:00:00 2001
From: Maxime Adler <madler@sqli.com>
Date: Tue, 11 Mar 2025 15:00:52 +0100
Subject: [PATCH 09/14] Add multiple select component

---
 .../Pages/Games/Filter/GameFilter.razor       |  6 +++
 .../Pages/Games/Filter/GameFilter.razor.cs    |  9 +++-
 .../Pages/Games/Filter/GameFilterParams.cs    |  3 ++
 .../Properties/launchSettings.json            |  2 +
 .../Components/Search/SearchInput.razor       | 49 +++++++++---------
 .../Components/Search/SearchInput.razor.cs    | 29 +++++++----
 .../Components/Search/SearchInput.razor.css   |  5 ++
 .../Components/SelectListElement.razor.cs     |  2 +
 .../Components/SelectListElement.razor.css    | 29 ++++++++---
 .../Select/{ => Models}/SelectElement.cs      |  2 +-
 .../Select/{ => Models}/SelectTheme.cs        |  2 +-
 .../Select/MultipleSelectList.razor           | 14 +++---
 .../Select/MultipleSelectList.razor.cs        | 30 ++++-------
 .../Select/MultipleSelectList.razor.css       | 50 ++++++++++++++++++-
 .../Components/Select/SelectList.razor.cs     |  3 +-
 .../Components/Select/SelectList.razor.css    |  1 -
 .../Layouts/Header/HeaderLayout.razor.cs      |  2 +-
 17 files changed, 163 insertions(+), 75 deletions(-)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/{ => Models}/SelectElement.cs (76%)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/{ => Models}/SelectTheme.cs (51%)

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 d6718a2..4a6289b 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
@@ -35,6 +35,12 @@
 
         <SearchInput @bind-Text=GameFilterParams.SearchName />
 
+        <MultipleSelectList TItem="string"
+                            Items="Plateforms" 
+                            @bind-Values=GameFilterParams.Plateforms
+                            Theme="SelectListTheme.Filter"/>
+
+
     </div>
 </EditForm>
 
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 36c0646..5444c3b 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
@@ -1,5 +1,5 @@
 using GameIdeas.BlazorApp.Pages.Games.Models;
-using GameIdeas.BlazorApp.Shared.Components.Select;
+using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using GameIdeas.Shared.Dto;
 using GameIdeas.Shared.Enum;
 using Microsoft.AspNetCore.Components;
@@ -24,6 +24,13 @@ public partial class GameFilter
         new() { Item = game => game?.ReleaseDate, Label = "Date de parution" }
     ];
 
+    private readonly IEnumerable<SelectElement<string>> Plateforms = [
+        new() { Item = "Steam", Label = "Steam" },
+        new() { Item = "GOG", Label = "GOG" },
+        new() { Item = "Epic games", Label = "Epic games" },
+        new() { Item = "Ubisoft", Label = "Ubisoft" },
+    ];
+
     private EditContext? EditContext;
 
     protected override void OnInitialized()
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
index 8e2d3e8..6135664 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
@@ -8,4 +8,7 @@ public class GameFilterParams
     public SortType? SortType { get; set; }
     public Func<GameDto?, object?>? SortProperty { get; set; }
     public string? SearchName { get; set; }
+    public IEnumerable<string>? Plateforms { get; set; }
+    public IEnumerable<string>? Genres { get; set; }
+
 }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Properties/launchSettings.json b/src/GameIdeas/Client/GameIdeas.BlazorApp/Properties/launchSettings.json
index 8db20ce..fccd456 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Properties/launchSettings.json
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Properties/launchSettings.json
@@ -7,6 +7,7 @@
       "launchBrowser": true,
       "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
       "applicationUrl": "http://localhost:5172",
+      "launchUrl": "http://localhost:5172/Games",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }
@@ -17,6 +18,7 @@
       "launchBrowser": true,
       "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
       "applicationUrl": "https://localhost:7060;http://localhost:5172",
+      "launchUrl": "http://localhost:7060/Games",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
index 50b36d0..e921fb2 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
@@ -1,29 +1,30 @@
-﻿<EditForm EditContext="EditContext">
-    <div class="search-container">
-        <InputText class="search-field"
-        @bind-Value=Text />
+﻿<div class="search-container">
+    <input type="text"
+           class="search-field"
+           @bind=@Text
+           @bind:event="oninput" 
+           @bind:after=HandleTextChanged />
 
-        @if (!string.IsNullOrEmpty(Text))
-        {
-            <div class="clear-icon" @onclick=HandleClearClicked>
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                    <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
-                </svg>
-            </div>
-        }
-
-        <div type="submit" class="search-icon">
+    @if (!string.IsNullOrEmpty(Text))
+    {
+        <div class="clear-icon" @onclick=HandleClearClicked>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                @if (Icon == SearchInputIcon.Search)
-                {
-                    <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
-                }
-                else if (Icon == SearchInputIcon.Dropdown)
-                {
-                    <path style="fill: var(--violet)" d="M1 3H23L12 22" />
-                }
+                <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
             </svg>
         </div>
-    </div>
-</EditForm>
+    }
+
+    <div class="search-icon @(Enum.GetName(Icon)?.ToLower())" @onclick=HandleSearchClicked>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            @if (Icon == SearchInputIcon.Search)
+            {
+                <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
+            }
+            else if (Icon == SearchInputIcon.Dropdown)
+            {
+                <path d="M1 3H23L12 22" />
+            }
+        </svg>
+    </div>
+</div>
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
index d9e601f..4d08c04 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
@@ -1,6 +1,4 @@
 using Microsoft.AspNetCore.Components;
-using Microsoft.AspNetCore.Components.Forms;
-using System.Threading.Tasks;
 
 namespace GameIdeas.BlazorApp.Shared.Components.Search;
 
@@ -8,23 +6,32 @@ public partial class SearchInput
 {
     [Parameter] public string? Text { get; set; }
     [Parameter] public EventCallback<string> TextChanged { get; set; }
+    [Parameter] public EventCallback ClearClicked { get; set; }
+    [Parameter] public EventCallback SearchClicked { get; set; }
     [Parameter] public SearchInputIcon Icon { get; set; }
 
-    private EditContext? EditContext;
-
     protected override void OnInitialized()
     {
         Text = string.Empty;
-        EditContext = new EditContext(Text);
-
-        EditContext.OnFieldChanged += async (s, e) =>
-        {
-            await TextChanged.InvokeAsync(Text);
-        };
     }
 
-    private void HandleClearClicked()
+    public void SetText(string str)
+    {
+        Text = str;
+    }
+    
+    private async Task HandleTextChanged()
+    {
+        await TextChanged.InvokeAsync(Text);
+    }
+
+    private async Task HandleClearClicked()
     {
         Text = string.Empty;
+        await ClearClicked.InvokeAsync();
+    }
+    private async Task HandleSearchClicked()
+    {
+        await SearchClicked.InvokeAsync();
     }
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
index 552ef2f..17aca87 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
@@ -51,3 +51,8 @@
     .search-icon svg {
         fill: var(--white);
     }
+
+    .search-icon.dropdown svg {
+        fill: var(--violet);
+        transform: scale(.8, .5);
+    }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
index c37d70b..903d3e1 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
@@ -1,3 +1,4 @@
+using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using Microsoft.AspNetCore.Components;
 
 namespace GameIdeas.BlazorApp.Shared.Components.Select.Components;
@@ -11,6 +12,7 @@ public partial class SelectListElement<TItem>
     {
         if (Value != null)
         {
+            Value.IsSelected = true;
             await ValueChanged.InvokeAsync(Value);
         }
     }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
index 792c973..8f975aa 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
@@ -28,15 +28,14 @@
 .navigation {
     padding: 4px 8px;
 }
-
-.navigation .selected {
-    display: none;
-} 
-
     .navigation:hover {
         background: var(--violet-selected);
     }
 
+    .navigation .selected {
+        display: none;
+    } 
+
 /***** Sort Theme *****/
 .sort {
     padding: 2px 6px;
@@ -46,9 +45,23 @@
         background: var(--low-white);
     }
 
-.sort .select-label {
-    text-wrap: nowrap;
-    margin-right: 6px;
+    .sort .select-label {
+        text-wrap: nowrap;
+        margin-right: 6px;
+    }
+
+/***** Filter Theme *****/
+.filter {
+    padding: 2px 6px;
 }
 
+    .filter:hover {
+        background: var(--low-white);
+    }
+
+    .filter .select-label {
+        text-wrap: nowrap;
+        margin-right: 6px;
+    }
+
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectElement.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectElement.cs
similarity index 76%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectElement.cs
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectElement.cs
index 6815c78..5e0e8f4 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectElement.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectElement.cs
@@ -1,4 +1,4 @@
-﻿namespace GameIdeas.BlazorApp.Shared.Components.Select;
+﻿namespace GameIdeas.BlazorApp.Shared.Components.Select.Models;
 
 public class SelectElement<TItem>
 {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectTheme.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs
similarity index 51%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectTheme.cs
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs
index f3bb87f..f0c1d1f 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectTheme.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs
@@ -1,4 +1,4 @@
-﻿namespace GameIdeas.BlazorApp.Shared.Components.Select;
+﻿namespace GameIdeas.BlazorApp.Shared.Components.Select.Models;
 
 public enum SelectListTheme
 {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
index 05e534f..8a5b730 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
@@ -2,13 +2,15 @@
 @using GameIdeas.BlazorApp.Shared.Components.Select.Components
 @typeparam TItem
 
-<div class="select-list" @onclick=HandleButtonClicked>
-    <div class="select-button">
-        <SearchInput Icon="SearchInputIcon.Dropdown"
-                     Text="Text"
-                     TextChanged="HandleTextChanged"/>
+<div class="select-list">
+    <div class="select-button" @onfocusin=HandleFocusIn>
+        <SearchInput @ref=SearchInput
+                     Icon="SearchInputIcon.Dropdown"
+                     TextChanged="HandleTextChanged"
+                     ClearClicked="HandleTextChanged"
+                     SearchClicked="Open" />
     </div>
-    <div @ref=Container @onfocusout=HandleFocusOut
+    <div @onfocusout=HandleFocusOut
          class="select-container @(AlignRight ? "align-right" : "")"
          tabindex="1000">
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
index 727513b..621f0d5 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
@@ -1,3 +1,5 @@
+using GameIdeas.BlazorApp.Shared.Components.Search;
+using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using Microsoft.AspNetCore.Components;
 
 namespace GameIdeas.BlazorApp.Shared.Components.Select;
@@ -11,41 +13,31 @@ public partial class MultipleSelectList<TItem>
     [Parameter] public bool AlignRight { get; set; }
 
     private bool ContentVisile = false;
-    private DateTime ContentLastFocusOut = DateTime.Now;
-    private ElementReference Container;
-    private string? Text;
+    private SearchInput? SearchInput;
 
-    public async Task OpenAsync()
-    {
-        if (DateTime.Now - ContentLastFocusOut >= TimeSpan.FromSeconds(0.2))
-        {
-            await Container.FocusAsync();
-            ContentVisile = true;
-        }
-    }
+    public void Open() => ContentVisile = true;
 
     public void Close() => ContentVisile = false;
 
-    private async Task HandleButtonClicked() => await OpenAsync();
+    private void HandleFocusOut() => Close();
 
-    private void HandleFocusOut()
-    {
-        ContentLastFocusOut = DateTime.Now;
-        ContentVisile = true;
-    }
+    private void HandleFocusIn() => Open();
 
     private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
     {
         selectedValue.IsSelected = !selectedValue.IsSelected;
         Values = Items.Where(x => x.IsSelected && x.Item != null).Select(x => x.Item!);
-        Text = string.Join(", ", Values);
+        SearchInput?.SetText(string.Join(", ", Values));
         await ValuesChanged.InvokeAsync(Values);
     }
-    private void HandleTextChanged(string args)
+
+    private void HandleTextChanged()
     {
         foreach (var item in Items)
         {
             item.IsSelected = false;
         }
+
+        Close();
     }
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
index 3c7930d..0884707 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
@@ -1 +1,49 @@
-﻿@import "SelectList.razor.css";
+﻿.select-list {
+    position: relative;
+}
+
+.select-container {
+    margin-top: 4px;
+    position: absolute;
+}
+
+.align-right {
+    right: 0;
+}
+
+.select-content {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--small-radius);
+    animation-name: fade-in;
+    animation-duration: 0.4s;
+}
+
+.line {
+    margin: 2px 6px;
+    border-bottom: 2px solid var(--low-white);
+}
+
+
+/***** Navigation Theme *****/
+.select-content.navigation {
+    background: var(--violet);
+    box-shadow: var(--drop-shadow);
+}
+
+/***** Sort Theme *****/
+.select-content.sort {
+    background: var(--semi-black);
+    box-shadow: var(--drop-shadow);
+    padding: 4px 0;
+}
+
+/***** Filter Theme *****/
+.select-content.filter {
+    background: var(--semi-black);
+    box-shadow: var(--drop-shadow);
+    padding: 4px 0;
+    min-width: 150px;
+}
+
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
index 13e6254..59423dd 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
@@ -1,3 +1,4 @@
+using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using Microsoft.AspNetCore.Components;
 
 namespace GameIdeas.BlazorApp.Shared.Components.Select;
@@ -34,7 +35,7 @@ public partial class SelectList<TItem>
     private void HandleFocusOut()
     {
         ContentLastFocusOut = DateTime.Now;
-        ContentVisile = true;
+        ContentVisile = false;
     }
 
     private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
index facfbda..3e5473b 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
@@ -38,4 +38,3 @@
     box-shadow: var(--drop-shadow);
     padding: 4px 0;
 }
-
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs
index 7dd8fdc..f3e335a 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs
@@ -1,6 +1,6 @@
 using GameIdeas.BlazorApp.Pages.Games.Models;
 using GameIdeas.BlazorApp.Shared.Components.Account;
-using GameIdeas.BlazorApp.Shared.Components.Select;
+using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using GameIdeas.Resources;
 using Microsoft.AspNetCore.Components;
 
-- 
2.39.5


From 34a2e80ffbf19a1f25acdbcddfb0b9530a812fa0 Mon Sep 17 00:00:00 2001
From: Maxime Adler <madler@sqli.com>
Date: Tue, 11 Mar 2025 16:27:16 +0100
Subject: [PATCH 10/14] add genres filter

---
 .../Pages/Games/Filter/GameFilter.razor                    | 6 ++++++
 .../Pages/Games/Filter/GameFilter.razor.cs                 | 7 +++++++
 2 files changed, 13 insertions(+)

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 4a6289b..71463f3 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
@@ -40,6 +40,12 @@
                             @bind-Values=GameFilterParams.Plateforms
                             Theme="SelectListTheme.Filter"/>
 
+        <MultipleSelectList TItem="string"
+                            Items="Genres"
+                            @bind-Values=GameFilterParams.Genres
+                            Theme="SelectListTheme.Filter" />
+
+        
 
     </div>
 </EditForm>
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 5444c3b..dedbaf8 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
@@ -31,6 +31,13 @@ public partial class GameFilter
         new() { Item = "Ubisoft", Label = "Ubisoft" },
     ];
 
+    private readonly IEnumerable<SelectElement<string>> Genres = [
+        new() { Item = "Rogue Like", Label = "Rogue Like" },
+        new() { Item = "Aventure", Label = "Aventure" },
+        new() { Item = "RPG", Label = "RPG" },
+        new() { Item = "Fast FPS", Label = "Fast FPS" },
+    ];
+
     private EditContext? EditContext;
 
     protected override void OnInitialized()
-- 
2.39.5


From a21827d14678368622ef6f91162b8986c2faa286 Mon Sep 17 00:00:00 2001
From: Maxime Adler <madler@sqli.com>
Date: Wed, 12 Mar 2025 16:10:29 +0100
Subject: [PATCH 11/14] add slider range filter

---
 .../Pages/Games/Filter/GameFilter.razor       | 33 ++++---
 .../Pages/Games/Filter/GameFilter.razor.cs    |  3 +
 .../Pages/Games/Filter/GameFilter.razor.css   | 24 ++++++
 .../Pages/Games/Filter/GameFilterParams.cs    |  3 +-
 .../Components/SliderRange/SliderRange.razor  | 13 +++
 .../SliderRange/SliderRange.razor.cs          | 57 ++++++++++++
 .../SliderRange/SliderRange.razor.css         | 86 +++++++++++++++++++
 .../SliderRange/SliderRangeParams.cs          | 10 +++
 8 files changed, 217 insertions(+), 12 deletions(-)
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRangeParams.cs

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 71463f3..f18e32a 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
@@ -1,5 +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.SliderRange
 @using GameIdeas.Shared.Dto
 @using GameIdeas.BlazorApp.Pages.Games.Models
 
@@ -33,20 +35,29 @@
             </svg>
         </div>
 
-        <SearchInput @bind-Text=GameFilterParams.SearchName />
+        <div class="search-container">
+            <SearchInput @bind-Text=GameFilterParams.SearchName />
+        </div>
 
-        <MultipleSelectList TItem="string"
-                            Items="Plateforms" 
-                            @bind-Values=GameFilterParams.Plateforms
-                            Theme="SelectListTheme.Filter"/>
+        <div class="select-container">
+            <MultipleSelectList TItem="string"
+                                Items="Plateforms"
+                                @bind-Values=GameFilterParams.Plateforms
+                                Theme="SelectListTheme.Filter" />
+        </div>
 
-        <MultipleSelectList TItem="string"
-                            Items="Genres"
-                            @bind-Values=GameFilterParams.Genres
-                            Theme="SelectListTheme.Filter" />
-
-        
+        <div class="select-container">
+            <MultipleSelectList TItem="string"
+                                Items="Genres"
+                                @bind-Values=GameFilterParams.Genres
+                                Theme="SelectListTheme.Filter" />
+        </div>
 
+        <div class="slider-container">
+            <SliderRange Params="SliderRangeParams"
+                         @bind-Max=GameFilterParams.MaxRating
+                         @bind-Min=GameFilterParams.MinRating />
+        </div>
     </div>
 </EditForm>
 
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 dedbaf8..8dcba7b 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
@@ -1,5 +1,6 @@
 using GameIdeas.BlazorApp.Pages.Games.Models;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using GameIdeas.BlazorApp.Shared.Components.SliderRange;
 using GameIdeas.Shared.Dto;
 using GameIdeas.Shared.Enum;
 using Microsoft.AspNetCore.Components;
@@ -39,6 +40,8 @@ public partial class GameFilter
     ];
 
     private EditContext? EditContext;
+    private SliderRangeParams SliderRangeParams =
+        new() { Min = 1, ValueMin = 1, ValueMax = 5, Max = 5 };
 
     protected override void OnInitialized()
     {
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 34db4b4..75bae77 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
@@ -2,11 +2,29 @@
     display: flex;
     flex-direction: row;
     gap: 8px;
+    align-items: center;
+}
+
+.search-container {
+    width: 150px;
+    min-width: 150px;
+}
+
+.slider-container {
+    width: 150px;
+    min-width: 150px;
+}
+
+.select-container {
+    width: 150px;
+    min-width: 150px;
 }
 
 .square-button {
     height: 28px;
+    min-height: 28px;
     width: 28px;
+    min-width: 28px;
     border-radius: var(--small-radius);
     background: var(--black);
     overflow: hidden;
@@ -42,4 +60,10 @@
 .card-icon {
     padding-top: 1px;
     padding-right: 1px;
+}
+
+@media screen and (max-width: 1000px) {
+    .select-container {
+        display: none;
+    }
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
index 6135664..7106f83 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
@@ -10,5 +10,6 @@ public class GameFilterParams
     public string? SearchName { get; set; }
     public IEnumerable<string>? Plateforms { get; set; }
     public IEnumerable<string>? Genres { get; set; }
-
+    public int MaxRating { get; set; }
+    public int MinRating { get; set; }
 }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor
new file mode 100644
index 0000000..f0eb5ab
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor
@@ -0,0 +1,13 @@
+﻿<div class="container">
+    <div class="slider-track" style="@FillColor()"></div>
+    
+    <input type="range" id="min-range" style="@StatusColor(Params.ValueMin)" min="@Params.Min" max="@Params.Max" 
+        @bind="@Params.ValueMin" @bind:event="oninput" @bind:after=HandleSlideOnInput />
+    <input type="range" id="max-range" style="@StatusColor(Params.ValueMax)" min="@Params.Min" max="@Params.Max" 
+        @bind="@Params.ValueMax" @bind:event="oninput" @bind:after=HandleSlideTwoInput />
+
+    <div class="values">
+        <span class="value">@Params.ValueMin</span>
+        <span class="value">@Params.ValueMax</span>
+    </div>
+</div>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs
new file mode 100644
index 0000000..bdc2846
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs
@@ -0,0 +1,57 @@
+using Microsoft.AspNetCore.Components;
+using System.Threading.Tasks;
+
+namespace GameIdeas.BlazorApp.Shared.Components.SliderRange;
+
+public partial class SliderRange
+{
+    [Parameter] public SliderRangeParams Params { get; set; } = new();
+    [Parameter] public int Max { get; set; }
+    [Parameter] public EventCallback<int> MaxChanged { get; set; }
+    [Parameter] public int Min { get; set; }
+    [Parameter] public EventCallback<int> MinChanged { get; set; }
+
+    private async Task HandleSlideTwoInput()
+    {
+        if (Params.ValueMax - Params.ValueMin <= Params.Gap)
+        {
+            Params.ValueMin = Params.ValueMax - Params.Gap;
+        }
+
+        Max = Params.Max;
+        await MaxChanged.InvokeAsync(Params.Max);
+    }
+
+    private async Task HandleSlideOnInput()
+    {
+        if (Params.ValueMax - Params.ValueMin <= Params.Gap)
+        {
+            Params.ValueMax = Params.ValueMin + Params.Gap;
+        }
+
+        Min = Params.Min;
+        await MinChanged.InvokeAsync(Params.Min);
+    }
+
+    private string FillColor()
+    {
+        var percent1 = (double)(Params.ValueMin - Params.Min) / (Params.Max - Params.Min) * 100;
+        var percent2 = (double)(Params.ValueMax - Params.Min) / (Params.Max - Params.Min) * 100;
+        return $"background: linear-gradient(to right, var(--light-grey) {percent1}% , var(--violet) {percent1}% , var(--violet) {percent2}%, var(--light-grey) {percent2}%)";
+    }
+
+    private string StatusColor(int value)
+    {
+        string str = "--thumb-color: var({0});";
+
+        int firstTier = (int)Math.Floor(0.33 * Params.Max);
+        int secondTier = (int)Math.Ceiling(0.66 * Params.Max);
+
+        return value switch
+        {
+            int x when x <= firstTier => string.Format(str, "--red"),
+            int x when x >= secondTier => string.Format(str, "--green"),
+            _ => string.Format(str, "--yellow"),
+        };
+    }
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css
new file mode 100644
index 0000000..cf23999
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css
@@ -0,0 +1,86 @@
+﻿.container {
+    position: relative;
+    width: 100%;
+}
+
+input[type="range"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 100%;
+    outline: none;
+    margin: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background-color: transparent;
+    pointer-events: none;
+}
+
+.slider-track {
+    width: 100%;
+    height: 2px;
+    margin: auto;
+    border-radius: 2px;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+    height: 2px;
+}
+
+input[type="range"]::-moz-range-track {
+    -moz-appearance: none;
+    height: 2px;
+}
+
+input[type="range"]::-ms-track {
+    appearance: none;
+    height: 2px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 1em;
+    width: 1em;
+    background-color: var(--thumb-color);
+    cursor: pointer;
+    margin-top: -6px;
+    pointer-events: auto;
+    border-radius: 50%;
+}
+
+input[type="range"]::-moz-range-thumb {
+    -webkit-appearance: none;
+    height: 1em;
+    width: 1em;
+    cursor: pointer;
+    border-radius: 50%;
+    background-color: var(--thumb-color);
+    pointer-events: auto;
+    border: none;
+}
+
+input[type="range"]::-ms-thumb {
+    appearance: none;
+    height: 1em;
+    width: 1em;
+    cursor: pointer;
+    border-radius: 50%;
+    background-color: var(--thumb-color);
+    pointer-events: auto;
+}
+
+.values {
+    display: flex;
+    position: absolute;
+    margin-top: 10px;
+    width: 100%;
+    font-weight: bold;
+    justify-content: space-between;
+}
+
+.value {
+    width: 1em;
+    text-align:center;
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRangeParams.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRangeParams.cs
new file mode 100644
index 0000000..b82f00b
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRangeParams.cs
@@ -0,0 +1,10 @@
+﻿namespace GameIdeas.BlazorApp.Shared.Components.SliderRange;
+
+public class SliderRangeParams
+{
+    public int Min{ get; set; }
+    public int Max { get; set; }
+    public int ValueMin { get; set; }
+    public int ValueMax { get; set; }
+    public int Gap { get; set; } = 0;
+}
-- 
2.39.5


From 08ab5a091d37b2630409110b0dc119cf5d5436a2 Mon Sep 17 00:00:00 2001
From: Maxime Adler <madler@sqli.com>
Date: Thu, 13 Mar 2025 13:12:36 +0100
Subject: [PATCH 12/14] fix bugs

---
 .../Shared/Components/Search/SearchInput.razor.cs               | 2 ++
 .../Shared/Components/Select/MultipleSelectList.razor           | 2 +-
 .../Shared/Components/Select/MultipleSelectList.razor.cs        | 2 ++
 .../Shared/Layouts/Header/HeaderLayout.razor                    | 1 +
 4 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
index 4d08c04..d8f6e14 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
@@ -28,10 +28,12 @@ public partial class SearchInput
     private async Task HandleClearClicked()
     {
         Text = string.Empty;
+        await TextChanged.InvokeAsync(string.Empty);
         await ClearClicked.InvokeAsync();
     }
     private async Task HandleSearchClicked()
     {
+        await TextChanged.InvokeAsync(Text);
         await SearchClicked.InvokeAsync();
     }
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
index 8a5b730..92856da 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
@@ -8,7 +8,7 @@
                      Icon="SearchInputIcon.Dropdown"
                      TextChanged="HandleTextChanged"
                      ClearClicked="HandleTextChanged"
-                     SearchClicked="Open" />
+                     SearchClicked="Toggle" />
     </div>
     <div @onfocusout=HandleFocusOut
          class="select-container @(AlignRight ? "align-right" : "")"
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
index 621f0d5..7b4209d 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
@@ -19,6 +19,8 @@ public partial class MultipleSelectList<TItem>
 
     public void Close() => ContentVisile = false;
 
+    public void Toggle() => ContentVisile = !ContentVisile;
+
     private void HandleFocusOut() => Close();
 
     private void HandleFocusIn() => Open();
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
index 9c1b917..17f9cc6 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
@@ -2,6 +2,7 @@
 @using GameIdeas.BlazorApp.Pages.Games.Models
 @using GameIdeas.BlazorApp.Shared.Components.Account
 @using GameIdeas.BlazorApp.Shared.Components.Select
+@using GameIdeas.BlazorApp.Shared.Components.Select.Models
 @using GameIdeas.Resources
 
 @inherits LayoutComponentBase
-- 
2.39.5


From 237c88d38baa419279979adb56824ec880f5ec35 Mon Sep 17 00:00:00 2001
From: Maxime Adler <madler@sqli.com>
Date: Fri, 14 Mar 2025 14:31:13 +0100
Subject: [PATCH 13/14] fix dropdown

---
 .../Select/MultipleSelectList.razor           | 11 +++---
 .../Select/MultipleSelectList.razor.cs        | 36 ++++++++++++++++---
 2 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
index 92856da..69142f2 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
@@ -3,16 +3,17 @@
 @typeparam TItem
 
 <div class="select-list">
-    <div class="select-button" @onfocusin=HandleFocusIn>
+    <div class="select-button" @onfocusin=HandleFocusIn @onfocusout=HandleFocusOut>
         <SearchInput @ref=SearchInput
                      Icon="SearchInputIcon.Dropdown"
                      TextChanged="HandleTextChanged"
                      ClearClicked="HandleTextChanged"
-                     SearchClicked="Toggle" />
+                     SearchClicked="HandleSearchClicked" />
     </div>
-    <div @onfocusout=HandleFocusOut
-         class="select-container @(AlignRight ? "align-right" : "")"
-         tabindex="1000">
+    <div class="select-container @(AlignRight ? "align-right" : "")"
+         tabindex="1000"
+         @onfocusin=HandleContentFocusIn
+         @onfocusout=HandleContentFocusOut>
 
         @if (ContentVisile)
         {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
index 7b4209d..8af5bb8 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
@@ -14,14 +14,24 @@ public partial class MultipleSelectList<TItem>
 
     private bool ContentVisile = false;
     private SearchInput? SearchInput;
+    private bool ShouldClose = false;
 
     public void Open() => ContentVisile = true;
 
-    public void Close() => ContentVisile = false;
+    public async Task Close()
+    {
+        await Task.Delay(TimeSpan.FromSeconds(0.2));
+
+        if (ShouldClose)
+        {
+            ContentVisile = false;
+            ShouldClose = false;
+        }
+    }
 
     public void Toggle() => ContentVisile = !ContentVisile;
 
-    private void HandleFocusOut() => Close();
+    private async Task HandleFocusOut() => await Close();
 
     private void HandleFocusIn() => Open();
 
@@ -33,13 +43,31 @@ public partial class MultipleSelectList<TItem>
         await ValuesChanged.InvokeAsync(Values);
     }
 
-    private void HandleTextChanged()
+    private async Task HandleTextChanged()
     {
         foreach (var item in Items)
         {
             item.IsSelected = false;
         }
 
-        Close();
+        await Close();
+    }
+    private void HandleContentFocusOut(Microsoft.AspNetCore.Components.Web.FocusEventArgs args)
+    {
+        ShouldClose = true;
+        ContentVisile = false;
+    }
+    private void HandleContentFocusIn(Microsoft.AspNetCore.Components.Web.FocusEventArgs args)
+    {
+        ShouldClose = true;
+    }
+    private void HandleSearchClicked()
+    {
+        if (ContentVisile)
+        {
+            ShouldClose = false;
+        }
+
+        ContentVisile = !ContentVisile;
     }
 }
\ No newline at end of file
-- 
2.39.5


From 7460fb37e14ba945d1c749a85c2e7cf5d0270518 Mon Sep 17 00:00:00 2001
From: Maxime Adler <madler@sqli.com>
Date: Thu, 20 Mar 2025 18:23:23 +0100
Subject: [PATCH 14/14] fix multiple select list

---
 .../Components/SelectListElement.razor.cs     |  9 ++-
 .../Select/MultipleSelectList.razor           |  5 +-
 .../Select/MultipleSelectList.razor.cs        | 78 +++++++++----------
 3 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
index 903d3e1..917c9a6 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
@@ -10,10 +10,13 @@ public partial class SelectListElement<TItem>
     [Parameter] public SelectListTheme Theme { get; set; }
     private async Task HandleItemClicked()
     {
-        if (Value != null)
+        if (Value == null)
         {
-            Value.IsSelected = true;
-            await ValueChanged.InvokeAsync(Value);
+            return;
         }
+
+        Value.IsSelected = true;
+        StateHasChanged();
+        await ValueChanged.InvokeAsync(Value);
     }
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
index 69142f2..c9495fc 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
@@ -2,7 +2,7 @@
 @using GameIdeas.BlazorApp.Shared.Components.Select.Components
 @typeparam TItem
 
-<div class="select-list">
+<div class="select-list" tabindex="1001" @ref="BaseElement">
     <div class="select-button" @onfocusin=HandleFocusIn @onfocusout=HandleFocusOut>
         <SearchInput @ref=SearchInput
                      Icon="SearchInputIcon.Dropdown"
@@ -12,10 +12,11 @@
     </div>
     <div class="select-container @(AlignRight ? "align-right" : "")"
          tabindex="1000"
+         @ref=ContentElement
          @onfocusin=HandleContentFocusIn
          @onfocusout=HandleContentFocusOut>
 
-        @if (ContentVisile)
+        @if (IsContentOpen)
         {
             <div class="select-content @(Enum.GetName(Theme)?.ToLower())">
                 @foreach (var item in Items)
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
index 8af5bb8..5d5e07c 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
@@ -12,32 +12,19 @@ public partial class MultipleSelectList<TItem>
     [Parameter] public SelectListTheme Theme { get; set; }
     [Parameter] public bool AlignRight { get; set; }
 
-    private bool ContentVisile = false;
-    private SearchInput? SearchInput;
-    private bool ShouldClose = false;
-
-    public void Open() => ContentVisile = true;
-
-    public async Task Close()
+    private bool IsContentOpen
     {
-        await Task.Delay(TimeSpan.FromSeconds(0.2));
-
-        if (ShouldClose)
-        {
-            ContentVisile = false;
-            ShouldClose = false;
-        }
+        get => InputFocus || ContentFocus;
     }
 
-    public void Toggle() => ContentVisile = !ContentVisile;
-
-    private async Task HandleFocusOut() => await Close();
-
-    private void HandleFocusIn() => Open();
+    private bool InputFocus = false;
+    private bool ContentFocus = false;
+    private SearchInput? SearchInput;
+    private ElementReference ContentElement;
+    private ElementReference BaseElement;
 
     private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
     {
-        selectedValue.IsSelected = !selectedValue.IsSelected;
         Values = Items.Where(x => x.IsSelected && x.Item != null).Select(x => x.Item!);
         SearchInput?.SetText(string.Join(", ", Values));
         await ValuesChanged.InvokeAsync(Values);
@@ -45,29 +32,40 @@ public partial class MultipleSelectList<TItem>
 
     private async Task HandleTextChanged()
     {
-        foreach (var item in Items)
-        {
-            item.IsSelected = false;
-        }
+        await BaseElement.FocusAsync();
+    }
 
-        await Close();
-    }
-    private void HandleContentFocusOut(Microsoft.AspNetCore.Components.Web.FocusEventArgs args)
+    private void HandleFocusIn()
     {
-        ShouldClose = true;
-        ContentVisile = false;
+        InputFocus = true;
     }
-    private void HandleContentFocusIn(Microsoft.AspNetCore.Components.Web.FocusEventArgs args)
-    {
-        ShouldClose = true;
-    }
-    private void HandleSearchClicked()
-    {
-        if (ContentVisile)
-        {
-            ShouldClose = false;
-        }
 
-        ContentVisile = !ContentVisile;
+    private void HandleContentFocusIn()
+    {
+        ContentFocus = true;
+    }
+
+    private async Task HandleContentFocusOut()
+    {
+        await Task.Delay(TimeSpan.FromSeconds(0.3));
+        ContentFocus = false;
+    }
+
+    private async Task HandleFocusOut()
+    {
+        await Task.Delay(TimeSpan.FromSeconds(0.3));
+        InputFocus = false;
+    }
+
+    private async Task HandleSearchClicked()
+    {
+        if (!IsContentOpen)
+        {
+            await ContentElement.FocusAsync();
+        }
+        else
+        {
+            await BaseElement.FocusAsync();
+        }
     }
 }
\ No newline at end of file
-- 
2.39.5

