src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor

@@ -1,45 +1,32 @@
 @using GameIdeas.BlazorApp.Shared.Components.Select
 @using GameIdeas.BlazorApp.Shared.Components.Select.Models
+@using GameIdeas.Shared.Dto
+
 <div class="advanced-filter-container">
     <span class="title">@ResourcesKey.Filters</span>
 
     <div class="duplicate">
-        <MultipleSelectList TItem="string"
+        <MultipleSelectList TItem="PlatformDto"
-                            @bind-Values=GameFilterParams!.Platforms
+                            @bind-Values=GameFilter!.Platforms
                             Placeholder="@ResourcesKey.Platforms"
-                            Theme="SelectListTheme.AdvancedFilter" />
+                            Theme="Theme" />
 
-        <MultipleSelectList TItem="string"
+        <MultipleSelectList TItem="TagDto"
                             Placeholder="@ResourcesKey.Genres"
-                            @bind-Values=GameFilterParams!.Tags
+                            @bind-Values=GameFilter.Tags
-                            Theme="SelectListTheme.AdvancedFilter" />
+                            Theme="Theme" />
     </div>
 
 
-    <MultipleSelectList TItem="string"
+    <MultipleSelectList TItem="PublisherDto"
                         Placeholder="@ResourcesKey.Publishers"
-                        @bind-Values=GameFilterParams!.Publishers
+                        @bind-Values=GameFilter!.Publishers
-                        Theme="SelectListTheme.AdvancedFilter" />
+                        Theme="Theme" />
 
-    <MultipleSelectList TItem="string"
+    <MultipleSelectList TItem="DeveloperDto"
                         Placeholder="@ResourcesKey.Developers"
-                        @bind-Values=GameFilterParams!.Developers
+                        @bind-Values=GameFilter!.Developers
-                        Theme="SelectListTheme.AdvancedFilter" />
+                        Theme="Theme" />
-
-    <MultipleSelectList TItem="string"
-                        Placeholder="@ResourcesKey.StorageSize"
-                        @bind-Values=GameFilterParams!.StorageSizes
-                        Theme="SelectListTheme.AdvancedFilter" />
-
-    <MultipleSelectList TItem="string"
-                        Placeholder="@ResourcesKey.LastModification"
-                        @bind-Values=GameFilterParams!.LastModification
-                        Theme="SelectListTheme.AdvancedFilter" />
-
-    <MultipleSelectList TItem="string"
-                        Placeholder="@ResourcesKey.ReleaseDate"
-                        @bind-Values=GameFilterParams!.ReleaseDates
-                        Theme="SelectListTheme.AdvancedFilter" />
 
     <span class="title">@ResourcesKey.LastAdd</span>
 </div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs

@@ -1,10 +1,12 @@
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using GameIdeas.Shared.Dto;
 using Microsoft.AspNetCore.Components;
 
 namespace GameIdeas.BlazorApp.Pages.Games.Filter;
 
 public partial class AdvancedGameFilter
 {
-    [Parameter] public GameFilterParams? GameFilterParams { get; set; }
+    [Parameter] public GameFilterDto? GameFilter { get; set; }
-    [Parameter] public EventCallback<GameFilterParams> GameFilterParamsChanged { get; set; }
+    [Parameter] public EventCallback<GameFilterDto> GameFilterChanged { get; set; }
+    private readonly SelectListTheme Theme = SelectListTheme.AdvancedFilter;
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor

@@ -1,23 +1,22 @@
 @using GameIdeas.BlazorApp.Shared.Components.Search
 @using GameIdeas.BlazorApp.Shared.Components.Select
 @using GameIdeas.BlazorApp.Shared.Components.Select.Models
+@using GameIdeas.BlazorApp.Shared.Components.SelectList
+@using GameIdeas.BlazorApp.Shared.Components.SelectList.Models
 @using GameIdeas.BlazorApp.Shared.Components.SliderRange
 @using GameIdeas.BlazorApp.Shared.Models
 @using GameIdeas.Shared.Dto
-@using GameIdeas.Shared.Enum
 
 <div class="form-filter">
-    <SelectList TItem="Func<GameDto, object>" Items="GameProperties" 
+    <Select TItem="SortPropertyDto" ValuesChanged=HandleSortPropertyClicked
-                @bind-Value=GameFilterParams.SortProperty
+            THeader="SortTypeDto" HeaderValuesChanged=HandleSortTypeClicked
-                THeader="SortType" Headers="SortTypes"
+            Params=SelectParams Theme="SelectTheme.Sort" >
-                @bind-Header=GameFilterParams.SortType
-                Theme="SelectListTheme.Sort">
         <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>
-    </SelectList>
+    </Select>
 
     <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">
@@ -32,28 +31,28 @@
     </div>
 
     <div class="search-container">
-        <SearchInput @bind-Text=GameFilterParams.SearchName
+        <SearchInput @bind-Text=Value.Title
-                        Placeholder="@ResourcesKey.Research" />
+                     Placeholder="@ResourcesKey.Research" />
     </div>
 
     <div class="select-container">
-        <MultipleSelectList TItem="string"
+        <MultipleSelectList TItem="PlatformDto"
                             Placeholder="@ResourcesKey.Platforms"
-                            @bind-Values=GameFilterParams.Platforms
+                            @bind-Values=Value.Platforms
                             Theme="SelectListTheme.Filter" />
     </div>
 
     <div class="select-container">
-        <MultipleSelectList TItem="string"
+        <MultipleSelectList TItem="TagDto"
                             Placeholder="@ResourcesKey.Genres"
-                            @bind-Values=GameFilterParams.Tags
+                            @bind-Values=Value.Tags
                             Theme="SelectListTheme.Filter" />
     </div>
 
     <div class="slider-container">
         <SliderRange Params="SliderRangeParams"
-                     @bind-Max=GameFilterParams.MaxRating
+                     @bind-Max=Value.MaxInterest
-                     @bind-Min=GameFilterParams.MinRating />
+                     @bind-Min=Value.MinInterest />
     </div>
 </div>
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs

@@ -1,4 +1,4 @@
-using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using GameIdeas.BlazorApp.Shared.Components.SelectList.Models;
 using GameIdeas.BlazorApp.Shared.Components.SliderRange;
 using GameIdeas.BlazorApp.Shared.Models;
 using GameIdeas.Shared.Dto;
@@ -10,19 +10,21 @@ namespace GameIdeas.BlazorApp.Pages.Games.Filter;
 
 public partial class GameFilter
 {
-    [Parameter] public GameFilterParams GameFilterParams { get; set; } = new();
+    [Parameter] public GameFilterDto Value { get; set; } = new();
-    [Parameter] public EventCallback<GameFilterParams> GameFilterParamsChanged { get; set; }
+    [Parameter] public EventCallback<GameFilterDto> ValueChanged { get; set; }
     [Parameter] public DisplayType DisplayType { get; set; }
     [Parameter] public EventCallback<DisplayType> DisplayTypeChanged { get; set; }
 
-    private readonly IEnumerable<SelectElement<SortType>> SortTypes = [
+    private SelectParams<SortPropertyDto, SortTypeDto> SelectParams = new();
-        new(SortType.Ascending, "Ascendant") { IsSelected = true },
+
-        new(SortType.Descending, "Descendant")
+    private readonly IEnumerable<SortTypeDto> SortTypes = [
+        new() { SortType = SortType.Ascending, Label = "Ascendant" },
+        new() { SortType = SortType.Descending, Label = "Descendant" }
     ];
-    
+
-    private readonly IEnumerable<SelectElement<Func<GameDto?, object?>>> GameProperties = [
+    private readonly IEnumerable<SortPropertyDto> GameProperties = [
-        new(game => game?.Title, "Nom") { IsSelected = true },
+        new() { SortProperty = game => game.Title!, Label = "Titre" },
-        new(game => game?.ReleaseDate, "Date de parution"),
+        new() { SortProperty = game => game.ReleaseDate!, Label = "Date de parution" }
     ];
 
     private EditContext? EditContext;
@@ -31,10 +33,20 @@ public partial class GameFilter
 
     protected override void OnInitialized()
     {
-        EditContext = new EditContext(GameFilterParams);
+        EditContext = new EditContext(Value);
         EditContext.OnFieldChanged += async (s, e) =>
         {
-            await GameFilterParamsChanged.InvokeAsync(GameFilterParams);
+            await ValueChanged.InvokeAsync(Value);
+        };
+
+        SelectParams = new()
+        {
+            Headers = SortTypes,
+            GetHeaderLabel = header => header.Label,
+            DefaultHeader = SortTypes.FirstOrDefault(h => h.SortType == SortType.Ascending),
+            Items = GameProperties,
+            GetItemLabel = item => item.Label,
+            DefaultItem = GameProperties.FirstOrDefault(p => p.Label == "Titre")
         };
     }
 
@@ -43,4 +55,14 @@ public partial class GameFilter
         DisplayType = displayType;
         await DisplayTypeChanged.InvokeAsync(displayType);
     }
+    private async Task HandleSortTypeClicked(IEnumerable<SortTypeDto> sortTypes)
+    {
+        Value.SortType = sortTypes.FirstOrDefault();
+        await ValueChanged.InvokeAsync(Value);
+    }
+    private async Task HandleSortPropertyClicked(IEnumerable<SortPropertyDto> sortProperties)
+    {
+        Value.SortProperty = sortProperties.FirstOrDefault();
+        await ValueChanged.InvokeAsync(Value);
+    }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs

@@ -1,21 +0,0 @@
-using GameIdeas.Shared.Enum;
-using GameIdeas.Shared.Dto;
-
-namespace GameIdeas.BlazorApp.Pages.Games.Filter;
-
-public class GameFilterParams
-{
-    public SortType SortType { get; set; } = SortType.Ascending;
-    public Func<GameDto?, object?>? SortProperty { get; set; }
-    public string? SearchName { get; set; }
-    public IEnumerable<string>? Platforms { get; set; }
-    public IEnumerable<string>? Properties { get; set; }
-    public IEnumerable<string>? Tags { get; set; }
-    public IEnumerable<string>? Publishers { get; set; }
-    public IEnumerable<string>? Developers { get; set; }
-    public IEnumerable<string>? StorageSizes { get; set; }
-    public IEnumerable<string>? LastModification { get; set; }
-    public IEnumerable<string>? ReleaseDates { get; set; }
-    public int MaxRating { get; set; } = 5;
-    public int MinRating { get; set; } = 1;
-}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor

@@ -13,14 +13,14 @@
 
 <GameHeader AddTypeChanged="HandleAddClicked">
     <GameFilter @bind-DisplayType=DisplayType
-                @bind-GameFilterParams=GameFilterParams />
+                @bind-Value=GameFilter/>
 </GameHeader>
 
 <div class="container">
     <div class="content">
     </div>
 
-    <AdvancedGameFilter @bind-GameFilterParams=GameFilterParams />
+    <AdvancedGameFilter @bind-GameFilter=GameFilter/>
 </div>
 
 <Popup @ref=ManualAddPopup BackdropFilterClicked="HandleBackdropManualAddClicked">

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor.cs

@@ -1,14 +1,15 @@
-using GameIdeas.BlazorApp.Pages.Games.Filter;
 using GameIdeas.BlazorApp.Shared.Components.Popup;
 using GameIdeas.BlazorApp.Shared.Models;
+using GameIdeas.Shared.Dto;
 
 namespace GameIdeas.BlazorApp.Pages.Games;
 
 public partial class GameBase ()
 {
     private DisplayType DisplayType = DisplayType.List;
-    private GameFilterParams GameFilterParams = new();
+    private GameFilterDto GameFilter = new();
     private Popup? ManualAddPopup;
+
     private void HandleAddClicked(AddType addType)
     {
         switch (addType)

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css

@@ -18,7 +18,7 @@
     flex-direction: column;
     border-radius: var(--small-radius);
     animation-name: fade-in;
-    animation-duration: 0.4s;
+    animation-duration: 0.2s;
 }
 
 .select-button {

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Components/SelectRow.razor

@@ -0,0 +1,16 @@
+@using GameIdeas.BlazorApp.Shared.Components.SelectList.Helpers
+
+<div class="select-element @SelectHelper.GetClassFromTheme(Theme)"
+     @onclick=HandleElementClicked>
+    <div class="selected">
+        @if (IsSelected == true)
+        {
+            <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="label">
+        @Label
+    </div>
+</div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Components/SelectRow.razor.cs

@@ -0,0 +1,16 @@
+using GameIdeas.BlazorApp.Shared.Components.SelectList.Models;
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Components.SelectList.Components;
+
+public partial class SelectRow
+{
+    [Parameter] public bool? IsSelected { get; set; }
+    [Parameter] public string? Label { get; set; }
+    [Parameter] public SelectTheme Theme { get; set; }
+    [Parameter] public EventCallback OnClick { get; set; }
+    private async Task HandleElementClicked()
+    {
+        await OnClick.InvokeAsync();
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Components/SelectRow.razor.css

@@ -0,0 +1,45 @@
+.select-element {
+    display: flex;
+    flex-direction: row;
+    width: auto;
+    gap: 6px;
+    height: 20px;
+    align-items: center;
+    padding: 2px 6px;
+}
+
+    .select-element:hover {
+        cursor: pointer;
+        background: var(--input-selected);
+    }
+
+.selected {
+    width: 12px;
+    min-width: 12px;
+    height: 12px;
+    min-height: 12px;
+    border: 1px solid var(--line);
+}
+
+    .selected svg {
+        display: block;
+        fill: var(--white)
+    }
+
+.label {
+    text-wrap: nowrap;
+    margin-right: 6px;
+}
+
+/***** Navigation Theme *****/
+.navigation {
+    padding: 4px 8px;
+}
+
+    .navigation:hover {
+        background: var(--violet-selected);
+    }
+
+    .navigation .selected {
+        display: none;
+    }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Helpers/SelectHelper.cs

@@ -0,0 +1,19 @@
+using GameIdeas.BlazorApp.Shared.Components.SelectList.Models;
+
+namespace GameIdeas.BlazorApp.Shared.Components.SelectList.Helpers;
+
+public static class SelectHelper
+{
+    public static string GetClassFromTheme(SelectTheme selectTheme)
+    {
+        return selectTheme switch
+        {
+            SelectTheme.Navigation => "navigation",
+            SelectTheme.Sort => "sort",
+            SelectTheme.Filter => "filter",
+            SelectTheme.AdvancedFilter => "advenced-filter",
+            SelectTheme.Creation => "creation",
+            _ => string.Empty
+        };
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Models/SelectParams.cs

@@ -0,0 +1,12 @@
+namespace GameIdeas.BlazorApp.Shared.Components.SelectList.Models;
+
+public class SelectParams<TItem, THeader>
+{
+    public IEnumerable<TItem> Items { get; set; } = [];
+    public TItem? DefaultItem { get; set; }
+    public Func<TItem, string> GetItemLabel { get; set; } = _ => string.Empty;
+    public IEnumerable<THeader> Headers { get; set; } = [];
+    public THeader? DefaultHeader { get; set; }
+    public Func<THeader, string> GetHeaderLabel { get; set; } = _ => string.Empty;
+
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Models/SelectTheme.cs

@@ -0,0 +1,10 @@
+namespace GameIdeas.BlazorApp.Shared.Components.SelectList.Models;
+
+public enum SelectTheme
+{
+    Navigation,
+    Sort,
+    Filter,
+    AdvancedFilter,
+    Creation
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Models/SelectType.cs

@@ -0,0 +1,7 @@
+namespace GameIdeas.BlazorApp.Shared.Components.SelectList.Models;
+
+public enum SelectType
+{
+    Single,
+    Multiple
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Select.razor

@@ -0,0 +1,41 @@
+@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
+@using GameIdeas.BlazorApp.Shared.Components.SelectList.Components
+@using GameIdeas.BlazorApp.Shared.Components.SelectList.Helpers
+
+@typeparam TItem
+@typeparam THeader
+
+<div class="select-container">
+    <div class="button" @onclick=HandleButtonClicked>
+        @ChildContent
+    </div>
+
+    <div class="dropdown @(AlignRight ? "align-right" : "")">
+        @if (IsContentOpen)
+        {
+            <div class="content @SelectHelper.GetClassFromTheme(Theme)">
+                @foreach (var header in Params.Headers)
+                {
+                    <SelectRow IsSelected=HeaderValues?.Contains(header) 
+                               Label="@Params.GetHeaderLabel(header)" Theme=Theme
+                               OnClick="_ => HandleHeaderClicked(header)" />
+                }
+
+                @if (Params.Headers.Any())
+                {
+                    <span class="line"></span>
+                }
+
+                @foreach (var item in Params.Items)
+                {
+                    <SelectRow IsSelected=Values?.Contains(item)
+                               Label="@Params.GetItemLabel(item)" Theme=Theme
+                               OnClick="_ => HandleValueClicked(item)" />
+                }
+            </div>
+        }
+    </div>
+</div>
+
+<BackdropFilter AllowBodyScroll=true CloseOnClick=true Color="BackdropFilterColor.Transparent"
+                IsVisible=IsContentOpen OnClick="HandleContentClosed" />

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Select.razor.cs

@@ -0,0 +1,74 @@
+using GameIdeas.BlazorApp.Shared.Components.SelectList.Models;
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Components.SelectList;
+
+public partial class Select<TItem, THeader>
+{
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public List<TItem> Values { get; set; } = [];
+    [Parameter] public EventCallback<IEnumerable<TItem>> ValuesChanged { get; set; }
+    [Parameter] public List<THeader> HeaderValues { get; set; } = [];
+    [Parameter] public EventCallback<IEnumerable<THeader>> HeaderValuesChanged { get; set; }
+    [Parameter] public SelectParams<TItem, THeader> Params { get; set; } = new();
+    [Parameter] public SelectTheme Theme { get; set; }
+    [Parameter] public SelectType Type { get; set; } = SelectType.Single;
+    [Parameter] public bool AlignRight { get; set; } = false;
+
+    private bool IsContentOpen = false;
+
+    public void Close() =>
+        IsContentOpen = false;
+
+    private void HandleButtonClicked() =>
+        IsContentOpen = !IsContentOpen;
+
+    private void HandleContentClosed() =>
+        IsContentOpen = false;
+
+    protected override void OnInitialized()
+    {
+        if (Params.DefaultItem != null)
+        {
+            Values.Add(Params.DefaultItem);
+        }
+
+        if (Params.DefaultHeader != null)
+        {
+            HeaderValues.Add(Params.DefaultHeader);
+        }
+    }
+
+    private async Task HandleValueClicked(TItem value)
+    {
+        if (Type != SelectType.Multiple)
+        {
+            Values?.Clear();
+        }
+
+        if (Values?.Contains(value) == true)
+        {
+            Values.Remove(value);
+        }
+
+        Values?.Add(value);
+        await ValuesChanged.InvokeAsync(Values);
+        StateHasChanged();
+    }
+
+    private async Task HandleHeaderClicked(THeader header)
+    {
+        if (Type != SelectType.Multiple)
+        {
+            HeaderValues?.Clear();
+        }
+
+        if (HeaderValues?.Contains(header) == true)
+        {
+            HeaderValues.Remove(header);
+        }
+
+        HeaderValues?.Add(header);
+        await HeaderValuesChanged.InvokeAsync(HeaderValues);
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Select.razor.css

@@ -0,0 +1,52 @@
+.select-container {
+    position: relative;
+}
+
+.button {
+    z-index: var(--index-component)
+}
+
+.dropdown {
+    overflow: auto;
+    margin-top: 4px;
+    position: absolute;
+    z-index: var(--index-dropdown);
+    border-radius: var(--small-radius);
+}
+
+    .dropdown.align-right {
+        right: 0;
+    }
+
+.content {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    animation-name: fade-in;
+    animation-duration: 0.2s;
+}
+
+.line {
+    display: none;
+}
+
+/***** Navigation Theme *****/
+.content.navigation {
+    background: var(--violet);
+    box-shadow: var(--drop-shadow);
+}
+
+/***** Sort Theme *****/
+.content.sort {
+    background: var(--dropdown-content);
+    box-shadow: var(--drop-shadow);
+    padding: 4px 0;
+}
+
+    .content.sort .line {
+        display: block;
+        margin: 2px 6px;
+        border-bottom: 2px solid var(--input-selected);
+    }
+
+

src/GameIdeas/GameIdeas.Shared/Dto/GameFilterDto.cs

@@ -1,16 +1,19 @@
-namespace GameIdeas.Shared.Dto;
+
+namespace GameIdeas.Shared.Dto;
 
 public class GameFilterDto
 {
-    public IEnumerable<string>? Platforms { get; set; }
+    public SortTypeDto? SortType { get; set; }
-    public string? Name { get; set; }
+    public SortPropertyDto? SortProperty { get; set; }
-    public IEnumerable<string>? Tags { get; set; }
+    public string? Title { get; set; }
-    public IEnumerable<string>? Properties { get; set; }
+    public IEnumerable<PlatformDto>? Platforms { get; set; }
-    public int? MinInterest { get; set; }
+    public IEnumerable<PropertyDto>? Properties { get; set; }
-    public int? MaxInterest { get; set; }
+    public IEnumerable<TagDto>? Tags { get; set; }
+    public IEnumerable<PublisherDto>? Publishers { get; set; }
+    public IEnumerable<DeveloperDto>? Developers { get; set; }
+    public int MinInterest { get; set; } = 1;
+    public int MaxInterest { get; set; } = 5;
     public IEnumerable<int>? ReleaseYears { get; set; }
-    public IEnumerable<int>? PublisherIds { get; set; }
+    public int? MinStorageSize { get; set; }
-    public IEnumerable<int>? DeveloperIds { get; set; }
+    public int? MaxStorageSize { get; set; }
-    public IEnumerable<int>? CreationUserIds { get; set; }
-    public IEnumerable<int>? ModificationUserIds { get; set; }
 }

src/GameIdeas/GameIdeas.Shared/Dto/SortPropertyDto.cs

@@ -0,0 +1,7 @@
+namespace GameIdeas.Shared.Dto;
+
+public class SortPropertyDto
+{
+    public Func<GameDto, object>? SortProperty { get; set; }
+    public string Label { get; set; } = string.Empty;
+}

src/GameIdeas/GameIdeas.Shared/Dto/SortTypeDto.cs

@@ -0,0 +1,9 @@
+using GameIdeas.Shared.Enum;
+
+namespace GameIdeas.Shared.Dto;
+
+public class SortTypeDto
+{
+    public SortType SortType { get; set; } = SortType.Ascending;
+    public string Label { get; set; } = string.Empty;
+}