Fix text bug dropdown (#56)

Reviewed-on: #56

src/GameIdeas/Client/GameIdeas.BlazorApp/Helpers/GameHelper.cs

@@ -13,13 +13,27 @@ public static class GameHelper
             throw new ArgumentNullException(nameof(authState), "Authentication state missing");
         }
 
-        var userId = authState.User.FindFirstValue(ClaimTypes.Sid) 
+        var userId = authState.User.FindFirstValue(ClaimTypes.Sid)
             ?? throw new ArgumentNullException(nameof(authState), "user state missing");
 
         game.CreationUserId = userId;
         game.CreationDate = DateTime.Now;
     }
 
+    public static void UpdateTrackingDto(GameDetailDto game, AuthenticationState authState)
+    {
+        if (authState == null)
+        {
+            throw new ArgumentNullException(nameof(authState), "Authentication state missing");
+        }
+
+        var userId = authState.User.FindFirstValue(ClaimTypes.Sid)
+            ?? throw new ArgumentNullException(nameof(authState), "user state missing");
+
+        game.ModificationUserId = userId;
+        game.ModificationDate = DateTime.Now;
+    }
+
     public static string GetInterestColor(int interest, int maxInterest)
     {
         int firstTier = (int)Math.Floor(0.33 * maxInterest);

src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor

@@ -3,10 +3,4 @@
 
 <div class="page">
     @Body
-</div>
-
-<div class="background">
-    <span class="orb red"></span>
-    <span class="orb blue"></span>
-    <span class="orb green"></span>
 </div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css

@@ -2,47 +2,4 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-}
-
-.orb {
-    position: absolute;
-    border-radius: 100%;
-    z-index: var(--index-orb);
-}
-
-.green {
-    width: 80vh;
-    height: 80vh;
-    top: -20vh;
-    background: #315941;
-    filter: blur(30vh);
-}
-
-.blue {
-    width: 80vw;
-    height: 80vw;
-    left: 10vw;
-    top: 50vh;
-    background: #3A4156;
-    filter: blur(30vh);
-}
-
-.red {
-    width: 100vh;
-    height: 100vh;
-    left: 60vw;
-    top: -40vh;
-    background: #593533;
-    filter: blur(30vh);
-}
-
-.background {
-    height: 100vh;
-    width: 100vw;
-    background: var(--background);
-    position: fixed;
-    overflow: hidden;
-    top: 0;
-    left: 0;
-    z-index: var(--index-background);
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Detail/GameDetail.razor

@@ -1,12 +1,22 @@
 @page "/Detail/{GameId:int}"
 @using GameIdeas.BlazorApp.Helpers
+@using GameIdeas.BlazorApp.Pages.Games.Components
+@using GameIdeas.BlazorApp.Shared.Components
+@using GameIdeas.BlazorApp.Shared.Components.ButtonAdd
 @using GameIdeas.BlazorApp.Shared.Components.Header
 @using GameIdeas.BlazorApp.Shared.Components.Interest
+@using GameIdeas.BlazorApp.Shared.Components.Popup
+@using GameIdeas.BlazorApp.Shared.Components.ReadMore
 @using GameIdeas.BlazorApp.Shared.Constants
+@using GameIdeas.Shared.Constants
+
+@inherits GameBaseComponent
 @layout MainLayout
 
 <HeaderGameIdeas>
-
+    <div class="button">
+        <ButtonAdd AddTypeChanged="HandleAddClicked" />
+    </div>
 </HeaderGameIdeas>
 
 <div class="detail-container">
@@ -18,7 +28,7 @@
 
 
     <div class="section col-2">
-        <span class="description">@Game.Description</span>
+        <ReadMore Text="@Game.Description" MaxLength="GlobalConstants.MAX_DESCRIPTION_LENGTH" />
 
         <div class="medias"></div>
     </div>
@@ -95,4 +105,8 @@
 
     <div class="section">
     </div>
-</div>
+</div>
+
+<Popup @ref=ManualAddPopup BackdropFilterClicked="HandleBackdropManualAddClicked" Closable=false>
+    <GameCreationForm Categories="Categories" OnSubmit="HandleSubmitNewGame" />
+</Popup>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Detail/GameDetail.razor.cs

@@ -1,19 +1,47 @@
-using GameIdeas.BlazorApp.Pages.Games.Gateways;
+using GameIdeas.BlazorApp.Shared.Components;
+using GameIdeas.BlazorApp.Shared.Exceptions;
+using GameIdeas.Resources;
 using GameIdeas.Shared.Dto;
 using Microsoft.AspNetCore.Components;
+using System.Linq.Expressions;
 
 namespace GameIdeas.BlazorApp.Pages.Detail;
 
-public partial class GameDetail
+public partial class GameDetail : GameBaseComponent
 {
-    [Inject] private IGameGateway GameGateway { get; set; } = default!;
+    [Inject] private NavigationManager NavigationManager { get; set; } = default!;
     [Parameter] public int GameId { get; set; }
 
     private GameDetailDto Game = new();
 
     protected override async Task OnInitializedAsync()
     {
-        Game = await GameGateway.GetGameById(GameId);
+        await FetchGameDetail();
         await base.OnInitializedAsync();
     }
+
+    private void HandleSubmitNewGame()
+    {
+        NavigationManager.NavigateTo("/Games");
+    }
+
+    private async Task FetchGameDetail()
+    {
+        try
+        {
+            IsLoading = true;
+            StateHasChanged();
+
+            Game = await GameGateway.GetGameById(GameId);
+        }
+        catch (Exception)
+        {
+            throw new FetchGameDetailException(ResourcesKey.ErrorFetchDetail);
+        }
+        finally
+        {
+            IsLoading = false;
+            StateHasChanged();
+        }
+    }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Detail/GameDetail.razor.css

@@ -1,6 +1,6 @@
 .detail-container, .properties-tags {
     display: grid;
-    grid-gap: 20px;
+    grid-gap: 10px;
 }
 
 .flex {
@@ -38,7 +38,11 @@
 .pills, .informations {
     display: flex;
     flex-wrap: wrap;
-    gap: 34px;
+    gap: 34px;  
+}
+
+.pills {
+    gap: 8px;
 }
 
 .additional-informations, .platforms {
@@ -86,6 +90,12 @@
         background: var(--input-selected);
     }
 
+.button {
+    display: flex;
+    width: 100%;
+    justify-content: end;
+}
+
 @media screen and (max-width: 1000px) {
     .section {
         padding: 20px;

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/DetailOptions.cs

@@ -0,0 +1,8 @@
+namespace GameIdeas.BlazorApp.Pages.Games.Components;
+
+public enum DetailOptions
+{
+    Detail,
+    Edit,
+    Delete
+}

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

@@ -1,4 +1,7 @@
-using GameIdeas.Shared.Dto;
+using GameIdeas.BlazorApp.Shared.Components.Select;
+using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using GameIdeas.Resources;
+using GameIdeas.Shared.Dto;
 using Microsoft.AspNetCore.Components;
 
 namespace GameIdeas.BlazorApp.Pages.Games.Components;
@@ -6,10 +9,51 @@ namespace GameIdeas.BlazorApp.Pages.Games.Components;
 public class GameBase : ComponentBase
 {
     [Parameter] public GameDto GameDto { get; set; } = new();
+    [Parameter] public EventCallback<GameDto> OnDelete { get; set; } = new();
+    [Parameter] public EventCallback<GameDto> OnEdit { get; set; } = new();
     [Inject] public NavigationManager NavigationManager { get; set; } = default!;
 
-    protected void HandleDetailClicked()
+    protected SelectParams<DetailOptions, object> SelectParams = default!;
+    protected Select<DetailOptions, object>? SelectOption;
+
+    protected override void OnInitialized()
     {
-        NavigationManager.NavigateTo($"/Games/Detail/{GameDto.Id}");
+        SelectParams = new()
+        {
+            Items = [DetailOptions.Detail, DetailOptions.Edit, DetailOptions.Delete],
+            GetItemLabel = GetDetailOptionsLabel
+        };
+    }
+
+    protected async Task HandlerSelectValuesChanged(IEnumerable<DetailOptions> detailOptions)
+    {
+        var option = detailOptions.First();
+        switch (option)
+        {
+            case DetailOptions.Detail:
+                NavigationManager.NavigateTo($"/Detail/{GameDto.Id}");
+                break;
+            case DetailOptions.Edit:
+                await OnEdit.InvokeAsync(GameDto);
+                break;
+            case DetailOptions.Delete:
+                await OnDelete.InvokeAsync(GameDto);
+                break;
+            default:
+                break;
+        }
+
+        SelectOption?.Close();
+    }
+
+    private string GetDetailOptionsLabel(DetailOptions options)
+    {
+        return options switch
+        {
+            DetailOptions.Detail => ResourcesKey.Detail,
+            DetailOptions.Edit => ResourcesKey.Edit,
+            DetailOptions.Delete => ResourcesKey.Delete,
+            _ => ResourcesKey.Unknown
+        };
     }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor

@@ -11,7 +11,7 @@
         <div class="container">
             <div class="input-game">
                 <div id="first-label" class="label">@ResourcesKey.Title :</div>
-                <InputText  class="title" @bind-Value=GameDto.Title/>
+                <InputText class="title" @bind-Value=GameDto.Title/>
             </div>
             <div class="input-game">
                 <div class="label">@ResourcesKey.ReleaseDate :</div>
@@ -24,13 +24,13 @@
             <div class="input-game">
                 <div class="label">@ResourcesKey.Developer :</div>
                 <SelectSearch TItem="DeveloperDto" Theme="Theme" GetLabel="@(i => i.Name)" QuickAdd=true
-                              Items="Categories?.Developers" ValuesChanged="HandleDeveloperChanged" 
+                              Items="Categories?.Developers" ValuesChanged="HandleDeveloperChanged" Values="@(GameDto.Developer != null ? [GameDto.Developer] : [])"
                               AddItem="@(str => new DeveloperDto() { Name = str })" SelectType="SelectType.Single" />
             </div>
             <div class="input-game">
                 <div class="label">@ResourcesKey.Publisher :</div>
                 <SelectSearch TItem="PublisherDto" Theme="Theme" GetLabel="@(i => i.Name)" QuickAdd=true
-                              Items="Categories?.Publishers" ValuesChanged="HandlePublisherChanged"
+                              Items="Categories?.Publishers" ValuesChanged="HandlePublisherChanged" Values="@(GameDto.Publisher != null ? [GameDto.Publisher] : [])"
                               AddItem="@(str => new PublisherDto() { Name = str })" SelectType="SelectType.Single" />
             </div>
         </div>
@@ -44,21 +44,21 @@
             <div class="input-game">
                 <div class="label">@ResourcesKey.Properties :</div>
                 <SelectSearch TItem="PropertyDto" Theme="Theme" GetLabel="@(i => i.Label)" QuickAdd=true
-                Items="Categories?.Properties" @bind-Values=GameDto.Properties
-                AddItem="@(str => new PropertyDto() { Label = str })" />
+                              Items="Categories?.Properties" @bind-Values=GameDto.Properties
+                              AddItem="@(str => new PropertyDto() { Label = str })" />
             </div>
             <div class="input-game">
                 <div class="label">@ResourcesKey.Tags :</div>
                 <SelectSearch TItem="TagDto" Theme="Theme" GetLabel="@(i => i.Label)" QuickAdd=true
-                Items="Categories?.Tags" @bind-Values=GameDto.Tags
-                AddItem="@(str => new TagDto() { Label = str })" />
+                              Items="Categories?.Tags" @bind-Values=GameDto.Tags
+                              AddItem="@(str => new TagDto() { Label = str })" />
 
             </div>
             <div class="input-game">
                 <div class="label">@ResourcesKey.Platforms :</div>
                 <SelectSearch TItem="PlatformDto" Theme="Theme" GetLabel="@(i => i.Label)" QuickAdd=true
-                Items="Categories?.Platforms" @bind-Values=GameDto.Platforms
-                AddItem="@(str => new PlatformDto() { Label = str })" />
+                              Items="Categories?.Platforms" @bind-Values=GameDto.Platforms
+                              AddItem="@(str => new PlatformDto() { Label = str })" />
             </div>
 
             @foreach (var platform in GameDto.Platforms ?? [])

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs

@@ -3,12 +3,13 @@ using GameIdeas.BlazorApp.Pages.Games.Gateways;
 using GameIdeas.BlazorApp.Shared.Components.Popup;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using GameIdeas.BlazorApp.Shared.Components.Slider;
+using GameIdeas.BlazorApp.Shared.Exceptions;
+using GameIdeas.Resources;
 using GameIdeas.Shared.Dto;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Authorization;
 using Microsoft.AspNetCore.Components.Forms;
 using Microsoft.JSInterop;
-using System.Security.Claims;
 
 namespace GameIdeas.BlazorApp.Pages.Games.Components;
 
@@ -20,22 +21,27 @@ public partial class GameCreationForm
     [CascadingParameter] private Popup? Popup { get; set; }
     [Parameter] public CategoriesDto? Categories { get; set; }
     [Parameter] public EventCallback OnSubmit { get; set; }
-
+    [Parameter] public EventCallback OnRender { get; set; }
+    
     private GameDetailDto GameDto = new();
     private EditContext? EditContext;
     private readonly SelectTheme Theme = SelectTheme.Creation;
     private readonly SliderParams SliderParams = new() { Gap = 1, Min = 1, Max = 5 };
     private bool IsLoading = false;
 
-    protected override async Task OnInitializedAsync()
+    protected override void OnInitialized()
     {
         EditContext = new(GameDto);
-        await base.OnInitializedAsync();
+        base.OnInitialized();
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         await Js.InvokeVoidAsync("resizeGameForm");
+        if (firstRender)
+        {
+            await OnRender.InvokeAsync();
+        }
     }
 
     private void HandleOnCancel()
@@ -53,16 +59,24 @@ public partial class GameCreationForm
         try
         {
             IsLoading = true;
+            StateHasChanged();
 
+            int gameId;
             var authState = await AuthenticationState.GetAuthenticationStateAsync();
             GameHelper.WriteTrackingDto(GameDto, authState);
 
-            var gameId = await GameGateway.CreateGame(GameDto);
-
-            if (gameId != 0)
+            if (GameDto.Id != null)
             {
-                Popup?.Close();
-                await OnSubmit.InvokeAsync();
+                gameId = await GameGateway.UpdateGame(GameDto);
+            }
+            else
+            {
+                gameId = await GameGateway.CreateGame(GameDto);
+            }
+
+            if (gameId == 0)
+            {
+                throw new GameCreationException(ResourcesKey.ErrorCreateGame);
             }
         }
         catch (Exception)
@@ -74,13 +88,40 @@ public partial class GameCreationForm
             IsLoading = false;
             StateHasChanged();
         }
+
+        Popup?.Close();
+
+        await OnSubmit.InvokeAsync();
     }
+
     private void HandlePublisherChanged(List<PublisherDto> pubs)
     {
         GameDto.Publisher = pubs.FirstOrDefault();
     }
+
     private void HandleDeveloperChanged(List<DeveloperDto> devs)
     {
         GameDto.Developer = devs.FirstOrDefault();
     }
+
+    public async Task SetGameToUpdateAsync(int gameId)
+    {
+        try
+        {
+            IsLoading = true;
+            StateHasChanged();
+
+            GameDto = await GameGateway.GetGameById(gameId);
+        }
+        catch (Exception)
+        {
+            throw new FetchGameDetailException(ResourcesKey.ErrorFetchDetail);
+        }
+        finally
+        {
+            IsLoading = false;
+            EditContext = new(GameDto);
+            StateHasChanged();
+        }
+    }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css

@@ -34,6 +34,7 @@
     grid-column: 2;
     box-sizing: border-box;
     color: var(--white);
+    padding: 0 8px;
 }
 
 ::deep input[type="date"]::-webkit-calendar-picker-indicator {
@@ -118,3 +119,20 @@
 .buttons button:hover {
     background: var(--violet-selected);
 }
+
+@media screen and (max-width: 400px) {
+    .input-game {
+        grid-template-columns: auto 1fr;
+    }
+
+    #label-description {
+        width: auto !important;
+    }
+}
+
+@media screen and (max-width: 700px) {
+    .game-form {
+        flex-direction: column;
+        gap: 8px;
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor

@@ -1,10 +1,12 @@
 @using GameIdeas.BlazorApp.Helpers
 @using GameIdeas.BlazorApp.Shared.Components.Interest
+@using GameIdeas.BlazorApp.Shared.Components.Select
+@using GameIdeas.BlazorApp.Shared.Components.Select.Models
 @using GameIdeas.BlazorApp.Shared.Constants
 @inherits GameBase
 
 <div class="row">
-    <img class="icon" src="~/icon.png" />
+    <img class="icon" src="icon.png" />
 
     <a class="title" href="@($"/Detail/{GameDto.Id}")">@GameDto.Title</a>
 
@@ -33,5 +35,8 @@
 
     <Interest Value="GameDto.Interest" />
 
-    <button class="detail">@Icons.Triangle</button>
+    <Select @ref="SelectOption" TItem="DetailOptions" THeader="object" Type="SelectType.Single" Theme="SelectTheme.RowOption"
+            Params="SelectParams" ValuesChanged="HandlerSelectValuesChanged">
+        @Icons.Triangle
+    </Select>
 </div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor.css

@@ -8,7 +8,6 @@
     box-shadow: var(--drop-shadow);
     border-radius: var(--big-radius);
     align-items: center;
-    overflow: hidden;
 }
 
 .row > * {
@@ -40,6 +39,7 @@
 }
 
 .release-date, .storage {   
+    display: block;
     color: rgb(184, 184, 184);
 }
 
@@ -68,21 +68,37 @@
         text-decoration: underline;
     }
 
-.detail {
-    transform: scale(0.6, 1) rotate(-90deg);
-    background: none;
-    border: none;
-    outline: none;
-    cursor: pointer;
+::deep .button {
+    width: fit-content;
+    transform: rotate(-90deg);
+    transition: transform 0.2s ease-in-out;
+    justify-self: center;
 }
 
-::deep .detail svg {
-    fill: var(--white);
-}
+    ::deep .button svg {
+        fill: var(--white);
+        height: 20px;
+        width: 20px;
+        transform: scale(1, 0.6);
+    }
+
+    ::deep .button:hover, ::deep .button.selected {
+        transform: translate(-4px, 2px);
+    }
+
+@media screen and (max-width: 700px) {
+    .release-date, .tags, .storage {
+        display: none;
+    }
 
-@media screen and (max-width: 1000px) {
     .row {
-        grid-template-columns: 48px 3fr 2fr 3fr 30px 30px;
+        grid-template-columns: auto 3fr 3fr 30px 30px;
+    }
+}
+
+@media screen and (min-width: 700px) and (max-width: 1000px) {
+    .row {
+        grid-template-columns: auto 3fr 2fr 3fr 30px 30px;
     }
 
     .tags, .storage {

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRowSkeleton.razor.css

@@ -96,16 +96,4 @@
     .tags, .storage {
         display: none;
     }
-}
-
-@keyframes loading {
-    0% {
-        background: rgb(255, 255, 255, 0.05);
-    }
-    50% {
-        background: rgb(255, 255, 255, 0.2);
-    }
-    100% {
-        background: rgb(255, 255, 255, 0.05);
-    }
 }

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

@@ -1,8 +1,12 @@
-@using GameIdeas.BlazorApp.Shared.Components.Select.Models
+@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
+@using GameIdeas.BlazorApp.Shared.Components.Select.Models
 @using GameIdeas.BlazorApp.Shared.Components.SelectSearch
+@using GameIdeas.BlazorApp.Shared.Constants
 @using GameIdeas.Shared.Dto
 
-<div class="advanced-filter-container">
+<NavigationLock OnBeforeInternalNavigation="HandleLocationChanged" />
+
+<div class="advanced-filter-container" style="@(ExpandedFilter ? "display: flex" : "")">
     <span class="title">@ResourcesKey.Filters</span>
 
     <div class="duplicate">
@@ -25,8 +29,15 @@
     <SelectSearch TItem="int" Placeholder="@ResourcesKey.ReleaseDate" GetLabel="@(p => p.ToString())"
                   @bind-Values=GameFilter.ReleaseYears @bind-Values:after=HandleValueChanged Theme="Theme" Items="Categories?.ReleaseYears" />
 
-    <SelectSearch TItem="int" Placeholder="@ResourcesKey.StorageSize" GetLabel="@GetStorageSpaceLabel"
+    <SelectSearch TItem="int" Placeholder="@ResourcesKey.StorageSize" GetLabel="@GetStorageSpaceLabel" OrderBy="@(item => item.ToString())"
                   @bind-Values=GameFilter.StorageSpaceIds @bind-Values:after=HandleValueChanged Theme="Theme" Items="@(Categories?.StorageSpaces?.Select(stor => stor.Id).ToList())" />
 
     <span class="title">@ResourcesKey.LastAdd</span>
 </div>
+
+<button type="button" class="open-filter" @onclick=HandleExpandFilterAsync>
+    @Icons.Filter
+</button>
+
+<BackdropFilter @ref="BackdropFilter" OnClick="HandleBackdropFilterClickedAsync" CloseOnClick="true"
+                AllowBodyScroll="false" Color="BackdropFilterColor.Overlay" />

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

@@ -1,8 +1,10 @@
 using GameIdeas.BlazorApp.Helpers;
+using GameIdeas.BlazorApp.Shared.Components.BackdropFilter;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using GameIdeas.Resources;
 using GameIdeas.Shared.Dto;
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Routing;
 
 namespace GameIdeas.BlazorApp.Pages.Games.Filter;
 
@@ -13,6 +15,8 @@ public partial class AdvancedGameFilter
     [Parameter] public EventCallback<GameFilterParams> GameFilterChanged { get; set; }
 
     private readonly SelectTheme Theme = SelectTheme.AdvancedFilter;
+    private bool ExpandedFilter;
+    private BackdropFilter? BackdropFilter;
 
     private async Task HandleValueChanged()
     {
@@ -45,4 +49,24 @@ public partial class AdvancedGameFilter
 
         throw new ArgumentNullException(ResourcesKey.ErrorStorageSpaceLabel);
     }
+    private void HandleExpandFilterAsync(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
+    {
+        ExpandedFilter = true;
+        BackdropFilter?.Show();
+    }
+
+    private void HandleBackdropFilterClickedAsync()
+    {
+        ExpandedFilter = false;
+    }
+
+    private void HandleLocationChanged(LocationChangingContext locationContext)
+    {
+        if (ExpandedFilter)
+        {
+            ExpandedFilter = false;
+            BackdropFilter?.Hide();
+            locationContext.PreventNavigation();
+        }
+    }
 }

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

@@ -2,15 +2,39 @@
     display: flex;
     flex-direction: column;
     gap: 10px;
-    padding-right: 20px;
-    padding-left: 10px;
+    padding: 0 20px;
     min-height: calc(100vh - 80px);
     box-sizing: border-box;
-    width: 100%;
+    width: 260px;
     border-left: 2px solid var(--line);
     z-index: var(--index-content);
 }
 
+.open-filter {
+    padding: 0;
+    display: none;
+    position: fixed;
+    outline: none;
+    border: none;
+    background: var(--input-primary);
+    border-radius: 100px;
+    right: 10px;
+    bottom: 10px;
+    overflow: hidden;
+    z-index: var(--index-floating);
+}
+
+.open-filter ::deep svg {
+    fill: var(--white);
+    width: 24px;
+    height: 24px;
+    padding: 10px;
+}
+
+    .open-filter:hover ::deep svg {
+        background: var(--input-selected);
+    }
+
 .duplicate {
     display: none;
     flex-direction: column;
@@ -30,3 +54,28 @@
         display: flex;
     }
 }
+
+@media screen and (max-width: 700px) {
+    .advanced-filter-container {
+        display: none;
+    }
+
+    .open-filter {
+        display: flex;
+    }
+
+    .advanced-filter-container {
+        border-radius: var(--big-radius) 0 0 var(--big-radius);
+        background: var(--input-primary);
+        border: none;
+        right: 0;
+        position: fixed;
+        z-index: 800;
+        width: auto;
+        height: auto;
+        left: 25vw;
+        bottom: 0;
+        top: 0;
+        padding: 60px 20px;
+    }
+}

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

@@ -7,16 +7,11 @@
 }
 
 .search-container {
-    width: 150px;
-    min-width: 150px;
+    min-width: 50px;
+    max-width: 150px;
 }
 
-.slider-container {
-    width: 150px;
-    min-width: 150px; 
-}
-
-.select-container {
+.slider-container, .select-container {
     width: 150px;
     min-width: 150px;
 }
@@ -63,6 +58,16 @@
     padding-right: 1px;
 }
 
+@media screen and (max-width: 700px) {
+    .slider-container {
+        display: none;
+    }
+
+    .square-button:first-child {
+        margin-right: 0;
+    }
+}
+
 @media screen and (max-width: 1000px) {
     .select-container {
         display: none;

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

@@ -1,12 +1,13 @@
-@page "/"
+@page "/Games"
 @using GameIdeas.BlazorApp.Pages.Games.Components
 @using GameIdeas.BlazorApp.Pages.Games.Filter
 @using GameIdeas.BlazorApp.Shared.Components
 @using GameIdeas.BlazorApp.Shared.Components.ButtonAdd
 @using GameIdeas.BlazorApp.Shared.Components.Header
 @using GameIdeas.BlazorApp.Shared.Components.Popup
+@using GameIdeas.BlazorApp.Shared.Components.Popup.Components
 @using GameIdeas.Resources
-
+@inherits GameBaseComponent
 @layout MainLayout
 
 <PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
@@ -22,10 +23,20 @@
     <div class="content">
         @if (!IsLoading)
         {
-            @foreach (var game in GamesDto)
+            @if (GamesDto.NumberOfGames != 0)
             {
-                <GameRow GameDto="game" />
+                <div class="games-number">@string.Format(ResourcesKey.GamesNumberFormat, GamesDto.NumberOfGames)</div>
+
+                @foreach (var game in GamesDto.Games)
+                {
+                    <GameRow GameDto="game" OnDelete="HandleDeleteGame" OnEdit="HandleEditGame" />
+                }
             }
+            else
+            {
+                <div class="no-games">@ResourcesKey.NoGames</div>
+            }
+            
         }
         else
         {
@@ -41,5 +52,9 @@
 </div>
 
 <Popup @ref=ManualAddPopup BackdropFilterClicked="HandleBackdropManualAddClicked" Closable=false>
-    <GameCreationForm Categories="Categories" OnSubmit="() => HandleFetchDatas()" />
+    <GameCreationForm @ref="CreationForm" Categories="Categories" OnSubmit="HandleOnSubmitGame" OnRender="HandleRenderCreationForm" />
 </Popup>
+
+<Popup @ref=DeletePopup Closable=false>
+    <ConfirmDelete OnCancel="HandleCancelPopupClicked" OnConfirm="HandleRemoveGame" />
+</Popup>

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

@@ -1,24 +1,23 @@
+using GameIdeas.BlazorApp.Pages.Games.Components;
 using GameIdeas.BlazorApp.Pages.Games.Filter;
-using GameIdeas.BlazorApp.Pages.Games.Gateways;
+using GameIdeas.BlazorApp.Shared.Components;
 using GameIdeas.BlazorApp.Shared.Components.Popup;
 using GameIdeas.BlazorApp.Shared.Models;
 using GameIdeas.Shared.Dto;
 using GameIdeas.Shared.Enum;
-using Microsoft.AspNetCore.Components;
 
 namespace GameIdeas.BlazorApp.Pages.Games;
 
-public partial class Games
+public partial class Games : GameBaseComponent
 {
-    [Inject] private IGameGateway GameGateway { get; set; } = default!;
-
     private DisplayType DisplayType = DisplayType.List;
     private GameFilterParams GameFilter = new();
-    private Popup? ManualAddPopup;
-    private bool IsLoading = false;
-    private CategoriesDto? Categories;
-    private IEnumerable<GameDto> GamesDto = [];
+    private GameListDto GamesDto = new();
     private int CurrentPage;
+    private Popup? DeletePopup;
+    private GameDto? GameToDelete;
+    private int? GameIdToUpdate;
+    private GameCreationForm? CreationForm;
 
     protected override async Task OnInitializedAsync()
     {
@@ -26,38 +25,19 @@ public partial class Games
         GameFilter.SortType = Filter.GameFilter.SortTypes
             .First(st => st.SortType == SortType.Ascending);
 
-        GameFilter.SortProperty= Filter.GameFilter.GameProperties
+        GameFilter.SortProperty = Filter.GameFilter.GameProperties
             .First(gp => gp.PropertyName == nameof(GameIdeas.Shared.Model.Game.Title));
 
         await HandleFetchDatas();
         await base.OnInitializedAsync();
     }
 
-    private void HandleAddClicked(AddType addType)
-    {
-        switch (addType)
-        {
-            case AddType.Manual:
-                ManualAddPopup?.Open();
-                break;
-            case AddType.Auto:
-                break;
-            default:
-                break;
-        }
-    }
-    private void HandleBackdropManualAddClicked()
-    {
-        ManualAddPopup?.Close();
-    }
-    private async Task HandleFetchDatas(bool loadCategories = true, bool displayLoader = true)
+    private async Task HandleFetchDatas(bool displayLoader = true)
     {
         try
         {
             IsLoading = displayLoader;
-
-            if (loadCategories)
-                Categories = await GameGateway.FetchCategories();
+            StateHasChanged();
 
             GamesDto = await GameGateway.FetchGames(GameFilter, CurrentPage);
         }
@@ -68,11 +48,75 @@ public partial class Games
         finally
         {
             IsLoading = false;
+            StateHasChanged();
         }
     }
     private async Task HandleFilterChanged(GameFilterParams args)
     {
         GameFilter = args;
-        await HandleFetchDatas(loadCategories: false, displayLoader: false);
+        await HandleFetchDatas(false);
+    }
+
+    private void HandleDeleteGame(GameDto args)
+    {
+        DeletePopup?.Open();
+        GameToDelete = args;
+    }
+
+    private void HandleCancelPopupClicked()
+    {
+        DeletePopup?.Close();
+        GameToDelete = null;
+    }
+
+    private void HandleEditGame(GameDto args)
+    {
+        if (args.Id == null)
+        {
+            return;
+        }
+
+        GameIdToUpdate = args.Id;
+
+        ManualAddPopup?.Open();
+    }
+
+    private async Task HandleRemoveGame()
+    {
+        DeletePopup?.Close();
+
+        if (GameToDelete?.Id == null)
+        {
+            return;
+        }
+
+        try
+        {
+            IsLoading = true;
+            StateHasChanged();
+
+            await GameGateway.DeleteGame(GameToDelete?.Id ?? 0);
+            await HandleFetchDatas(false);
+        }
+        catch (Exception)
+        {
+            throw;
+        }
+
+        GameToDelete = null;
+    }
+    private async Task HandleRenderCreationForm()
+    {
+        if (GameIdToUpdate != null && CreationForm != null)
+        {
+            await CreationForm.SetGameToUpdateAsync(GameIdToUpdate ?? 0);
+        }
+
+        GameIdToUpdate = null;
+    }
+    private async Task HandleOnSubmitGame()
+    {
+        await HandleFetchDatas(false);
+        await HandleFetchCategories();
     }
 }

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

@@ -1,6 +1,5 @@
 .container {
-    display: grid;
-    grid-template-columns: 1fr 240px;
+    display: flex;
     padding: 20px 0;
     height: fit-content;
 }
@@ -11,4 +10,5 @@
     display: flex;
     flex-direction: column;
     gap: 20px;
+    width: 100%;
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/GameGateway.cs

@@ -26,7 +26,7 @@ public class GameGateway(IHttpClientService httpClientService) : IGameGateway
         try
         {
             var result = await httpClientService.FetchDataAsync<CategoriesDto>(Endpoints.Category.AllCategories);
-                
+
             return result ?? throw new InvalidOperationException(ResourcesKey.ErrorFetchCategories);
         }
         catch (Exception)
@@ -35,7 +35,7 @@ public class GameGateway(IHttpClientService httpClientService) : IGameGateway
         }
     }
 
-    public async Task<IEnumerable<GameDto>> FetchGames(GameFilterParams filterParams, int currentPage)
+    public async Task<GameListDto> FetchGames(GameFilterParams filterParams, int currentPage)
     {
         try
         {
@@ -52,9 +52,11 @@ public class GameGateway(IHttpClientService httpClientService) : IGameGateway
                 PropertyIds = filterParams.Properties?.Select(d => d.Id ?? 0).ToList(),
                 ReleaseYears = filterParams.ReleaseYears,
                 TagIds = filterParams.Tags?.Select(d => d.Id ?? 0).ToList(),
+                SortPropertyName = filterParams.SortProperty?.PropertyName,
+                SortType = filterParams.SortType?.SortType
             };
 
-            var result = await httpClientService.FetchDataAsync<IEnumerable<GameDto>>(Endpoints.Game.Fetch(filter));
+            var result = await httpClientService.FetchDataAsync<GameListDto>(Endpoints.Game.Fetch(filter));
             return result ?? throw new InvalidOperationException(ResourcesKey.ErrorFetchGames);
         }
         catch (Exception)
@@ -76,4 +78,28 @@ public class GameGateway(IHttpClientService httpClientService) : IGameGateway
             throw new CategoryNotFoundException(ResourcesKey.ErrorFetchGames);
         }
     }
+
+    public async Task<bool> DeleteGame(int gameIdToDelete)
+    {
+        try
+        {
+            return await httpClientService.DeleteAsync<bool>(Endpoints.Game.Delete(gameIdToDelete));
+        }
+        catch (Exception)
+        {
+            throw new GameDeletionException(ResourcesKey.ErrorDeleteGame);
+        }
+    }
+
+    public async Task<int> UpdateGame(GameDetailDto gameDto)
+    {
+        try
+        {
+            return await httpClientService.PutAsync<int>(Endpoints.Game.Update, gameDto);
+        }
+        catch (Exception)
+        {
+            throw new GameUpdateException(ResourcesKey.ErrorUpdateGame);
+        }
+    }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/IGameGateway.cs

@@ -7,6 +7,8 @@ public interface IGameGateway
 {
     Task<CategoriesDto> FetchCategories();
     Task<int> CreateGame(GameDetailDto game);
-    Task<IEnumerable<GameDto>> FetchGames(GameFilterParams filter, int currentPage);
+    Task<GameListDto> FetchGames(GameFilterParams filter, int currentPage);
     Task<GameDetailDto> GetGameById(int gameId);
+    Task<bool> DeleteGame(int gameIdToDelete);
+    Task<int> UpdateGame(GameDetailDto gameDto);
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Redirect/RedirectToGames.razor

@@ -0,0 +1,10 @@
+@page "/"
+
+@inject NavigationManager navigationManager
+
+@code {
+    protected override void OnInitialized()
+    {
+        navigationManager.NavigateTo("/Games");
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/UserMenu/Components/Login.razor.cs

@@ -10,9 +10,9 @@ public partial class Login
     [Parameter] public IAuthGateway AuthGateway { get; set; } = default!;
 
     private EditContext? EditContext;
-    private UserDto UserDto = new();
+    private readonly UserDto UserDto = new();
     private bool IsLoading = false;
-    private LoginValidator Validator = new();
+    private readonly LoginValidator Validator = new();
     protected override void OnInitialized()
     {
         EditContext = new EditContext(UserDto);
@@ -28,6 +28,8 @@ public partial class Login
         try
         {
             IsLoading = true;
+            StateHasChanged();
+
             await AuthGateway.Login(UserDto);
         }
         catch (Exception)

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/UserMenu/Components/Login.razor.css

@@ -50,6 +50,6 @@
     border-radius: 50%;
     border: 3px solid rgba(0, 0, 0, 0.2);
     border-top-color: var(--white);
-    animation: loading 1s linear infinite;
+    animation: spin 1s linear infinite;
     justify-self: center;
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/UserMenu/UserMenu.razor.cs

@@ -14,7 +14,7 @@ public partial class UserMenu
     {
         ContentVisile = false;
         await AuthGateway.Logout();
-        NavigationManager.NavigateTo("/");
+        NavigationManager.NavigateTo("/Games");
     }
 
     private void HandleAccountClicked()

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.cs

@@ -1,5 +1,4 @@
 using FluentValidation;
-using GameIdeas.BlazorApp.Shared.Components.Select;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using GameIdeas.Shared.Dto;
 using Microsoft.AspNetCore.Components;

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.css

@@ -89,3 +89,16 @@
 .submit ::deep svg {
     fill: var(--green);
 }
+
+@media screen and (max-width: 700px) {
+    .row {
+        height: 104px;
+        display: grid;
+        grid-template-rows: 48px 48px;
+        grid-template-columns: 48px 1fr 100px;
+    }
+
+    .role {
+        grid-column: 2;
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRowSkeleton.razor.css

@@ -54,16 +54,3 @@
     fill: var(--yellow);
 }
 
-@keyframes loading {
-    0% {
-        background: rgb(255, 255, 255, 0.05);
-    }
-
-    50% {
-        background: rgb(255, 255, 255, 0.2);
-    }
-
-    100% {
-        background: rgb(255, 255, 255, 0.05);
-    }
-}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Gateways/UserGateway.cs

@@ -37,36 +37,36 @@ public class UserGateway(IHttpClientService httpClient) : IUserGateway
 
     public async Task<IEnumerable<RoleDto>> GetRoles()
     {
-		try
-		{
-			return await httpClient.FetchDataAsync<IEnumerable<RoleDto>>(Endpoints.User.Roles)
-				?? throw new InvalidOperationException(ResourcesKey.ErrorFetchRoles);
-		}
-		catch (Exception)
-		{
-			throw new RoleNotFoundException(ResourcesKey.ErrorFetchRoles);
+        try
+        {
+            return await httpClient.FetchDataAsync<IEnumerable<RoleDto>>(Endpoints.User.Roles)
+                ?? throw new InvalidOperationException(ResourcesKey.ErrorFetchRoles);
+        }
+        catch (Exception)
+        {
+            throw new RoleNotFoundException(ResourcesKey.ErrorFetchRoles);
         }
     }
 
     public async Task<UserListDto> GetUsers(UserFilterParams filterParams, int currentPage)
     {
-		try
-		{
-			UserFilterDto filter = new()
-			{
-				CurrentPage = currentPage,
-				Name = filterParams.Name,
-				RoleIds = filterParams.Roles?.Select(r => r.Id)
-			};
+        try
+        {
+            UserFilterDto filter = new()
+            {
+                CurrentPage = currentPage,
+                Name = filterParams.Name,
+                RoleIds = filterParams.Roles?.Select(r => r.Id)
+            };
 
-			var url = Endpoints.User.Fetch(filter);
-			return await httpClient.FetchDataAsync<UserListDto>(url)
-				?? throw new InvalidOperationException(ResourcesKey.ErrorFetchUsers);
-		}
-		catch (Exception)
-		{
-			throw new UserNotFoundException(ResourcesKey.ErrorFetchUsers);
-		}
+            var url = Endpoints.User.Fetch(filter);
+            return await httpClient.FetchDataAsync<UserListDto>(url)
+                ?? throw new InvalidOperationException(ResourcesKey.ErrorFetchUsers);
+        }
+        catch (Exception)
+        {
+            throw new UserNotFoundException(ResourcesKey.ErrorFetchUsers);
+        }
     }
 
     public async Task<IdDto> UpdateUser(UserDto user)

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Users.razor

@@ -16,7 +16,7 @@
     <div class="header-content">
         <SearchInput Placeholder="@ResourcesKey.EnterUsername" @bind-Text="FilterParams.Name" @bind-Text:after=HandleFilterChanged />
         <SelectSearch TItem="RoleDto" Placeholder="@ResourcesKey.Roles" @bind-Values="FilterParams.Roles" @bind-Values:after=HandleFilterChanged
-                      Items="Roles.ToList()" GetLabel="@(role => role.Name)" Theme="SelectTheme.Filter" />
+        Items="Roles.ToList()" GetLabel="@(role => role.Name)" Theme="SelectTheme.Filter" />
     </div>
 </HeaderGameIdeas>
 
@@ -28,9 +28,18 @@
     <div class="content">
         @if (!IsLoading)
         {
-            @foreach (var user in UserList.Users ?? [])
+            @if (UserList.UsersCount != 0)
             {
-                <UserRow User="user" Roles="Roles.ToList()" OnRemove="HandleOpenConfirmationPopup" OnSubmit="HandleUpdateUser" Validator="@(new UserUpdateValidator())" CanDelete=@(user.Id != currentUserId) />
+                <div class="user-number">@string.Format(ResourcesKey.UsersNumberFormat, UserList.UsersCount)</div>
+
+                @foreach (var user in UserList.Users ?? [])
+                {
+                    <UserRow User="user" Roles="Roles.ToList()" OnRemove="HandleOpenConfirmationPopup" OnSubmit="HandleUpdateUser" Validator="@(new UserUpdateValidator())" CanDelete=@(user.Id != currentUserId) />
+                }
+            }
+            else
+            {
+                <div class="no-users">@ResourcesKey.NoUsers</div>
             }
         }
         else

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Users.razor.cs

@@ -17,10 +17,10 @@ public partial class Users
 
     private Popup? Popup;
     private bool IsLoading = false;
-    private UserFilterParams FilterParams = new();
+    private readonly UserFilterParams FilterParams = new();
     private UserListDto UserList = new();
     private IEnumerable<RoleDto> Roles = [];
-    private int CurrentPage = 1;
+    private readonly int CurrentPage = 1;
     private UserDto UserAdd = new();
     private UserDto? UserDelete;
     private string? currentUserId;
@@ -34,20 +34,19 @@ public partial class Users
             NavigationManager.NavigateTo("/Unauthorized");
             return;
         }
-        
 
-        await FetchData();
+
+        await FetchUsers();
+        await FetchRoles();
         await base.OnInitializedAsync();
     }
 
-    private async Task FetchData(bool fetchRoles = true)
+    private async Task FetchUsers(bool displayLoading = true)
     {
         try
         {
-            IsLoading = true;
-
-            if (fetchRoles)
-                Roles = await UserGateway.GetRoles();
+            IsLoading = displayLoading;
+            StateHasChanged();
 
             UserList = await UserGateway.GetUsers(FilterParams, CurrentPage);
         }
@@ -57,7 +56,28 @@ public partial class Users
         }
         finally
         {
-            IsLoading = false;  
+            IsLoading = false;
+            StateHasChanged();
+        }
+    }
+
+    private async Task FetchRoles()
+    {
+        try
+        {
+            IsLoading = true;
+            StateHasChanged();
+
+            Roles = await UserGateway.GetRoles();
+        }
+        catch (Exception)
+        {
+            throw;
+        }
+        finally
+        {
+            IsLoading = false;
+            StateHasChanged();
         }
     }
 
@@ -66,9 +86,10 @@ public partial class Users
         try
         {
             IsLoading = true;
+            StateHasChanged();
 
             await UserGateway.CreateUser(user);
-            await FetchData(false);
+            await FetchUsers();
         }
         catch (Exception)
         {
@@ -77,9 +98,9 @@ public partial class Users
         finally
         {
             IsLoading = false;
+            StateHasChanged();
+            UserAdd = new();
         }
-
-        UserAdd = new();
     }
 
     private async Task HandleUpdateUser(UserDto user)
@@ -87,9 +108,10 @@ public partial class Users
         try
         {
             IsLoading = true;
+            StateHasChanged();
 
             await UserGateway.UpdateUser(user);
-            await FetchData(false);
+            await FetchUsers();
         }
         catch (Exception)
         {
@@ -98,6 +120,7 @@ public partial class Users
         finally
         {
             IsLoading = false;
+            StateHasChanged();
         }
     }
 
@@ -113,9 +136,10 @@ public partial class Users
         try
         {
             IsLoading = true;
+            StateHasChanged();
 
             await UserGateway.DeleteUser(UserDelete.Id);
-            await FetchData(false);
+            await FetchUsers();
         }
         catch (Exception)
         {
@@ -124,6 +148,7 @@ public partial class Users
         finally
         {
             IsLoading = false;
+            StateHasChanged();
         }
 
         UserDelete = null;
@@ -134,7 +159,7 @@ public partial class Users
     }
     private async Task HandleFilterChanged()
     {
-        await FetchData(false);
+        await FetchUsers(false);
     }
     private void HandleCancelPopupClicked()
     {

src/GameIdeas/Client/GameIdeas.BlazorApp/Program.cs

@@ -1,4 +1,3 @@
-using System.Net.Http.Json;
 using Blazored.LocalStorage;
 using GameIdeas.BlazorApp;
 using GameIdeas.BlazorApp.Pages.Games.Gateways;
@@ -10,6 +9,7 @@ using GameIdeas.Shared.Constants;
 using Microsoft.AspNetCore.Components.Authorization;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using System.Net.Http.Json;
 
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
 var services = builder.Services;

src/GameIdeas/Client/GameIdeas.BlazorApp/Services/HttpClientService.cs

@@ -1,23 +1,23 @@
-using GameIdeas.Resources;
-using System.Net.Http.Headers;
-using System.Text.Json.Serialization;
-using System.Text.Json;
-using System.Text;
-using Blazored.LocalStorage;
+using Blazored.LocalStorage;
+using GameIdeas.Resources;
 using GameIdeas.Shared.Constants;
 using Microsoft.AspNetCore.Components.Authorization;
+using System.Net.Http.Headers;
+using System.Text;
+using System.Text.Json;
+using System.Text.Json.Serialization;
 
 namespace GameIdeas.BlazorApp.Services;
 
 public class HttpClientService(
-    IHttpClientFactory httpClientFactory, 
+    IHttpClientFactory httpClientFactory,
     ILoggerFactory loggerFactory,
     ILocalStorageService localStorage,
     AuthenticationStateProvider stateProvider) : IHttpClientService
 {
     private readonly HttpClient httpClient = httpClientFactory.CreateClient("GameIdeas.WebAPI");
     private readonly ILogger<HttpClientService> logger = loggerFactory.CreateLogger<HttpClientService>();
-    
+
     private readonly JsonSerializerOptions _optionsCamelCase = new()
     {
         PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
@@ -145,8 +145,8 @@ public class HttpClientService(
     {
         var expired = await localStorage.GetItemAsStringAsync(GlobalConstants.LS_EXPIRED_STORAGE_KEY);
 
-        if (expired == null 
-            || (DateTime.TryParse(expired, out DateTime expiration) 
+        if (expired == null
+            || (DateTime.TryParse(expired, out DateTime expiration)
                 && expiration < DateTime.UtcNow))
         {
             await ((JwtAuthenticationStateProvider)stateProvider).NotifyUserLogoutAsync();

src/GameIdeas/Client/GameIdeas.BlazorApp/Services/JwtAuthenticationStateProvider.cs

@@ -1,9 +1,9 @@
 using Blazored.LocalStorage;
-using Microsoft.AspNetCore.Components.Authorization;
-using System.Security.Claims;
-using System.IdentityModel.Tokens.Jwt;
 using GameIdeas.Shared.Constants;
 using GameIdeas.Shared.Dto;
+using Microsoft.AspNetCore.Components.Authorization;
+using System.IdentityModel.Tokens.Jwt;
+using System.Security.Claims;
 
 namespace GameIdeas.BlazorApp.Services;
 
@@ -13,7 +13,7 @@ public class JwtAuthenticationStateProvider(ILocalStorageService localStorage) :
     {
         var savedToken = await localStorage.GetItemAsStringAsync(GlobalConstants.LS_AUTH_STORAGE_KEY);
 
-        if (!string.IsNullOrWhiteSpace(savedToken)) 
+        if (!string.IsNullOrWhiteSpace(savedToken))
         {
             try
             {

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor

@@ -35,7 +35,7 @@
             }
             else
             {
-                await Js.InvokeVoidAsync("setBodyOverflow", "auto");
+                await Js.InvokeVoidAsync("setBodyOverflow", "visible");
             }
         }
         catch (Exception)

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ButtonAdd/ButtonAdd.razor.cs

@@ -1,5 +1,5 @@
-using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using GameIdeas.BlazorApp.Shared.Components.Select;
+using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using GameIdeas.BlazorApp.Shared.Models;
 using GameIdeas.Resources;
 using Microsoft.AspNetCore.Components;

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ButtonAdd/ButtonAdd.razor.css

@@ -35,3 +35,9 @@
         background: var(--violet-selected);
         cursor: pointer;
     }
+
+@media screen and (max-width: 700px) {
+    .add-buttons {
+        margin-right: 8px;
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/CircleLoader/CircleLoader.razor.css

@@ -19,13 +19,3 @@
     height: 60px;
     animation: spin 1s linear infinite;
 }
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/GameBaseComponent.cs

@@ -0,0 +1,60 @@
+using GameIdeas.BlazorApp.Pages.Games.Gateways;
+using GameIdeas.BlazorApp.Shared.Models;
+using GameIdeas.Shared.Dto;
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Components;
+
+public class GameBaseComponent : ComponentBase
+{
+    [Inject] protected IGameGateway GameGateway { get; set; } = default!;
+
+    protected Popup.Popup? ManualAddPopup;
+    protected CategoriesDto? Categories;
+    protected bool IsLoading = false;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await HandleFetchCategories();
+        await base.OnInitializedAsync();
+    }
+
+    protected async Task HandleFetchCategories()
+    {
+        try
+        {
+            IsLoading = true;
+            StateHasChanged();
+
+            Categories = await GameGateway.FetchCategories();
+        }
+        catch (Exception)
+        {
+            throw;
+        }
+        finally
+        {
+            IsLoading = false;
+            StateHasChanged();
+        }
+    }
+
+    protected void HandleAddClicked(AddType addType)
+    {
+        switch (addType)
+        {
+            case AddType.Manual:
+                ManualAddPopup?.Open();
+                break;
+            case AddType.Auto:
+                break;
+            default:
+                break;
+        }
+    }
+
+    protected void HandleBackdropManualAddClicked()
+    {
+        ManualAddPopup?.Close();
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header/HeaderGameIdeas.razor.cs

@@ -1,7 +1,3 @@
-using GameIdeas.BlazorApp.Shared.Components.Select;
-using GameIdeas.BlazorApp.Shared.Components.Select.Models;
-using GameIdeas.BlazorApp.Shared.Models;
-using GameIdeas.Resources;
 using Microsoft.AspNetCore.Components;
 
 namespace GameIdeas.BlazorApp.Shared.Components.Header;

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header/HeaderGameIdeas.razor.css

@@ -4,7 +4,6 @@
     justify-content: space-between;
     align-items: flex-end;
     padding: 0px 10px;
-    height: 40px;
 }
 
 .icon-container {
@@ -12,14 +11,14 @@
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    width: 40px;
-    height: 100%;
     cursor: pointer;
+    margin-right: 10px;
+
 }
 
     .icon-container img {
-        max-height: 85%;
-        max-width: 85%;
+        width: 34px;
+        height: 34px;
     }
 
 .content {

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ReadMore/ReadMore.razor

@@ -0,0 +1,16 @@
+<div class="readmore-container">
+    <div class="text">
+        @DisplayedText()
+    </div>
+    @if (Text?.Length > MaxLength && !_showFullText)
+    {
+        <div class="fade-overlay"></div>
+    }
+    @if (Text?.Length > MaxLength)
+    {
+        <button type="button" class="button" @onclick=ToggleFullText>
+            @(_showFullText ? @ResourcesKey.ReadLess : @ResourcesKey.ReadMore)
+        </button>
+    }
+</div>
+

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ReadMore/ReadMore.razor.cs

@@ -0,0 +1,24 @@
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Components.ReadMore;
+
+public partial class ReadMore
+{
+    private bool _showFullText = false;
+
+    [Parameter]
+    public string? Text { get; set; }
+
+    [Parameter]
+    public int MaxLength { get; set; } = 100;
+
+    private string DisplayedText()
+    {
+        if (Text == null) return string.Empty;
+        if (_showFullText || Text.Length <= MaxLength) return Text;
+
+        return Text[..MaxLength] + "...";
+    }
+
+    private void ToggleFullText() => _showFullText = !_showFullText;
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ReadMore/ReadMore.razor.css

@@ -0,0 +1,44 @@
+.button {
+    margin: 0 auto 10px auto;
+    border: none;
+    outline: none;
+    background: var(--violet);
+    border-radius: var(--small-radius);
+    z-index: var(--index-floating);
+    color: var(--white);
+    font-size: 14px;
+    line-height: 22px;
+    padding: 2px 8px;
+}
+
+    .button:hover {
+        background: var(--violet-selected);
+    }
+
+.text {
+    overflow-wrap: break-word;
+    margin: 0 10px;
+}
+
+.readmore-container {
+    width: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    color: var(--white);
+    font-size: 14px;
+    line-height: 22px;
+    white-space: break-spaces;
+}
+
+.fade-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 4.5em;
+    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
+    border-radius: 0 0 var(--big-radius) var(--big-radius);
+    pointer-events: none;
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor

@@ -7,6 +7,7 @@
            placeholder="@Placeholder"
            disabled="@IsDisable"
            style="@(IsDisable ? "pointer-events: none" : "")"
+           onClick="this.select();"
            @bind=@Text
            @bind:event="oninput"
            @bind:after="HandleTextChanged"

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css

@@ -26,7 +26,7 @@
     height: 100%;
     width: 100%;
     padding: 0;
-    min-width: 0;
+    min-width: 0;   
 }
 
 .clear-icon {
@@ -34,6 +34,7 @@
     min-width: 18px;
     height: 18px;
     width: 18px;
+    z-index: 800;
 }
 
     .clear-icon:hover {

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

@@ -51,4 +51,21 @@
 
 .single .selected {
     display: none;
+}
+
+/***** Navigation Theme *****/
+.row-option {
+    padding: 4px 8px;
+}
+
+    .row-option:hover {
+        background: var(--violet-selected);
+    }
+
+    .row-option .selected {
+        display: none;
+    }
+
+.row-option:last-child {
+    color: var(--red);
 }

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

@@ -14,6 +14,7 @@ public static class SelectHelper
             SelectTheme.AdvancedFilter => "advanced-filter",
             SelectTheme.Creation => "creation",
             SelectTheme.Single => "single",
+            SelectTheme.RowOption => "row-option",
             _ => string.Empty
         };
     }

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

@@ -4,8 +4,10 @@ public class SelectParams<TItem, THeader>
 {
     public List<TItem> Items { get; set; } = [];
     public Func<TItem, string> GetItemLabel { get; set; } = _ => string.Empty;
+    public Func<TItem, string>? GetItemOrder { get; set; }
     public List<THeader> Headers { get; set; } = [];
     public Func<THeader, string> GetHeaderLabel { get; set; } = _ => string.Empty;
+    public Func<THeader, string>? GetHeaderOrder { get; set; }
     public Func<string, TItem>? AddItem { get; set; }
 
 }

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

@@ -7,5 +7,6 @@ public enum SelectTheme
     Filter,
     AdvancedFilter,
     Creation,
-    Single
+    Single,
+    RowOption
 }

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

@@ -6,7 +6,7 @@
 @typeparam THeader
 
 <div class="select-container">
-    <div class="button" @onclick=HandleButtonClicked>
+    <div class="button @(IsContentOpen ? "selected" : "")" @onclick=HandleButtonClicked>
         @ChildContent
     </div>
 
@@ -27,9 +27,9 @@
 
                 @if (Params.Headers != null)
                 {
-                    @foreach (var header in Params.Headers.Union(HeaderValues ?? []))
+                    @foreach (var header in GetHeaders())
                     {
-                        <SelectRow IsSelected=HeaderValues?.Contains(header)
+                        <SelectRow IsSelected=@(HeaderValues?.Contains(header))
                                    Label="@Params.GetHeaderLabel(header)" Theme=Theme
                                    OnClick="_ => HandleHeaderClicked(header)" />
                     }
@@ -42,9 +42,9 @@
 
                 @if (Params.Items != null)
                 {
-                    @foreach (var item in Params.Items.Union(Values ?? []))
+                    @foreach (var item in GetItems())
                     {
-                        <SelectRow IsSelected=Values?.Contains(item)
+                        <SelectRow IsSelected=@(Values?.Contains(item))
                                    Label="@Params.GetItemLabel(item)" Theme=Theme
                                    OnClick="_ => HandleValueClicked(item)" />
                     }

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

@@ -1,9 +1,6 @@
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
-using GameIdeas.Resources;
-using GameIdeas.Shared.Constants;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Forms;
-using System.Text.RegularExpressions;
 
 namespace GameIdeas.BlazorApp.Shared.Components.Select;
 
@@ -92,11 +89,24 @@ public partial class Select<TItem, THeader>
         if (Params.AddItem != null)
         {
             Values ??= [];
-            Values.Add(Params.AddItem(AddLabel));
 
+            if (Type != SelectType.Multiple)
+            {
+                Values = [];
+            }
+
+            Values.Add(Params.AddItem(AddLabel));
             AddLabel = string.Empty;
 
             await ValuesChanged.InvokeAsync(Values);
         }
     }
+
+    private List<THeader> GetHeaders() => [.. (HeaderValues ?? [])
+        .UnionBy(Params.Headers, Params.GetHeaderLabel)
+        .OrderBy(Params.GetHeaderOrder ?? Params.GetHeaderLabel)];
+
+    private List<TItem> GetItems() => [.. (Values ?? [])
+        .UnionBy(Params.Items, Params.GetItemLabel)
+        .OrderBy(Params.GetItemOrder ?? Params.GetItemLabel)];
 }

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

@@ -22,8 +22,6 @@
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    animation-name: fade-in;
-    animation-duration: 0.2s;
 }
 
 .line {
@@ -104,3 +102,13 @@
 .single {
     border: none;
 }
+
+/***** Row Option Theme *****/
+.dropdown.row-option {
+    width: auto;
+    right: 10px;
+}
+
+.row-option .content {
+    background: var(--violet);
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor

@@ -5,12 +5,12 @@
 
 @typeparam TItem
 
-<Select @ref=Select TItem="TItem" THeader="string" Theme="Theme" Type="SelectType"
+<Select @ref=Select TItem="TItem" THeader="string" Theme="Theme" Type="SelectType" DisableClicked=true
         Params="SelectParams" Values=Values ValuesChanged="HandleValuesChanged" QuickAdd=QuickAdd>
 
     <div class="@SelectHelper.GetClassFromTheme(Theme)">
         <SearchInput @ref=SearchInput Icon="SearchInputIcon.Dropdown" Placeholder="@Placeholder" 
-                     TextChanged="HandleClearClicked" ClearClicked="HandleClearClicked" IsDisable=QuickAdd
+                     TextChanged="HandleTextChanged" ClearClicked="HandleClearClicked" IsDisable=false
                      FocusIn="HandleFocusIn" SearchClicked="HandleFocusIn" />
     </div>
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor.cs

@@ -1,6 +1,7 @@
+using GameIdeas.BlazorApp.Pages.Games;
 using GameIdeas.BlazorApp.Shared.Components.Search;
-using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using GameIdeas.BlazorApp.Shared.Components.Select;
+using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using Microsoft.AspNetCore.Components;
 
 namespace GameIdeas.BlazorApp.Shared.Components.SelectSearch;
@@ -10,6 +11,7 @@ public partial class SelectSearch<TItem>
     [Parameter] public SelectTheme Theme { get; set; }
     [Parameter] public List<TItem> Items { get; set; } = [];
     [Parameter] public Func<TItem, string> GetLabel { get; set; } = _ => string.Empty;
+    [Parameter] public Func<TItem, string>? OrderBy { get; set; }
     [Parameter] public List<TItem> Values { get; set; } = [];
     [Parameter] public EventCallback<List<TItem>> ValuesChanged { get; set; }
     [Parameter] public string Placeholder { get; set; } = string.Empty;
@@ -27,26 +29,62 @@ public partial class SelectSearch<TItem>
         {
             Items = Items,
             GetItemLabel = GetLabel,
+            GetItemOrder = OrderBy,
             AddItem = AddItem
         };
 
         base.OnParametersSet();
     }
+
+    protected override void OnAfterRender(bool firstRender)
+    {
+        if (firstRender && Values != null)
+        {
+            SearchInput?.SetText(string.Join(", ", Values.Select(GetLabel)));
+        }
+    }
+
     private async Task HandleValuesChanged(IEnumerable<TItem> values)
     {
-        Values = values.ToList();
+        Values = [.. values];
         SearchInput?.SetText(string.Join(", ", Values.Select(GetLabel)));
-        await ValuesChanged.InvokeAsync(Values.ToList());
+        await ValuesChanged.InvokeAsync([.. Values]);
     }
 
     private async Task HandleClearClicked()
     {
         Values = [];
-        await ValuesChanged.InvokeAsync(Values.ToList());
+        Select?.Close();
+        SearchInput?.SetText(string.Empty);
+        await ValuesChanged.InvokeAsync([]);
     }
 
     private void HandleFocusIn()
     {
         Select?.Open();
     }
+    private void HandleTextChanged(string args)
+    {
+        if (!string.IsNullOrEmpty(args))
+        {
+            var keywords = args
+                        .Split([' '], StringSplitOptions.RemoveEmptyEntries)
+                        .Select(k => k.Trim())
+                        .ToArray() ?? [];
+
+            SelectParams.Items = [.. Items
+                .Where(game => keywords.All(
+                    kw => SelectParams.GetItemLabel(game).Contains(kw, StringComparison.OrdinalIgnoreCase)
+                ))
+                .OrderBy(game => keywords.Min(kw =>
+                    SelectParams.GetItemLabel(game).IndexOf(kw, StringComparison.OrdinalIgnoreCase)
+                ))
+                .ThenBy(game => SelectParams.GetItemLabel(game).Length)];
+        }
+        else
+        {
+            SelectParams.Items = Items;
+            SearchInput?.SetText(string.Join(", ", Values?.Select(GetLabel) ?? []));
+        }
+    }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/SliderParams.cs

@@ -2,7 +2,7 @@
 
 public class SliderParams
 {
-    public int Min{ get; set; }
+    public int Min { get; set; }
     public int Max { get; set; }
     public int Gap { get; set; } = 0;
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRangeParams.cs

@@ -2,7 +2,7 @@
 
 public class SliderRangeParams
 {
-    public int Min{ get; set; }
+    public int Min { get; set; }
     public int Max { get; set; }
     public int Gap { get; set; } = 0;
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Endpoints.cs

@@ -10,6 +10,8 @@ public static class Endpoints
         public const string Create = "api/Game/Create";
         public static string Fetch(GameFilterDto filter) => $"api/Game?{UrlHelper.BuildUrlParams(filter)}";
         public static string FetchById(int gameId) => $"api/Game/{gameId}";
+        public static string Delete(int gameId) => $"api/Game/Delete/{gameId}";
+        public const string Update = "api/Game/Update";
     }
 
     public static class Category

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs

@@ -15,7 +15,7 @@ public static class Icons
     public readonly static MarkupString Triangle = new(OpenBraket +
         "<path d=\"M1 3H23L12 22\" />" +
         CloseBraket);
-    
+
     public readonly static MarkupString Close = new(OpenBraket +
         "<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\" />" +
         CloseBraket);
@@ -43,4 +43,8 @@ public static class Icons
     public readonly static MarkupString Back = new(OpenBraket +
         "<path d=\"M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z\" />" +
         CloseBraket);
+
+    public readonly static MarkupString Filter = new(OpenBraket +
+        "<path d=\"M15,19.88C15.04,20.18 14.94,20.5 14.71,20.71C14.32,21.1 13.69,21.1 13.3,20.71L9.29,16.7C9.06,16.47 8.96,16.16 9,15.87V10.75L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L15,10.75V19.88M7.04,5L11,10.06V15.58L13,17.58V10.05L16.96,5H7.04Z\" />" +
+        CloseBraket);
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Exceptions/FetchGameDetailException.cs

@@ -0,0 +1,3 @@
+namespace GameIdeas.BlazorApp.Shared.Exceptions;
+
+public class FetchGameDetailException(string message) : Exception(message);

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Exceptions/GameDeletionException.cs

@@ -0,0 +1,3 @@
+namespace GameIdeas.BlazorApp.Shared.Exceptions;
+
+public class GameDeletionException(string message) : Exception(message);

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Exceptions/GameUpdateException.cs

@@ -0,0 +1,3 @@
+namespace GameIdeas.BlazorApp.Shared.Exceptions;
+
+public class GameUpdateException(string message) : Exception(message);

src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css

@@ -82,64 +82,20 @@ html, body, #app {
     }
 
 .loading-progress {
-    position: relative;
-    display: block;
-    width: 8rem;
-    height: 8rem;
-    margin: 20vh auto 1rem auto;
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+    animation: loading-background 4s linear infinite;
 }
 
-    .loading-progress circle {
-        fill: none;
-        stroke: #e0e0e0;
-        stroke-width: 0.6rem;
-        transform-origin: 50% 50%;
-        transform: rotate(-90deg);
+    .loading-progress > #loading-icon {
+        max-width: 200px;
+        max-height: 200px;
+        animation: loading-icon 4s ease-in-out infinite;
     }
 
-        .loading-progress circle:last-child {
-            stroke: #1b6ec2;
-            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
-            transition: stroke-dasharray 0.05s ease-in-out;
-        }
-
-.loading-progress-text {
-    color: #000;
-    position: absolute;
-    text-align: center;
-    font-weight: bold;
-    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
-}
-
-    .loading-progress-text:after {
-        content: var(--blazor-load-percentage-text, "Loading");
-    }
-
-code {
-    color: #c02d76;
-}
-
-.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
-    color: var(--bs-secondary-color);
-    text-align: end;
-}
-
-.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
-    text-align: start;
-}
-
-:focus-visible {
-    outline: none;
-}
-
-.expand-col-2 {
-    grid-column: 1 / 3;
-}
-
-.expand-row-2 {
-    grid-row: 1 / 3;
-}
-
 .body-sm {
     color: #ccc
 }
@@ -147,9 +103,10 @@ code {
 .body-lg {
     font-weight: 400;
     font-size: 14px;
+    display: block;
 }
 
-.header-1, .header-2, span, a {
+.header-1, .header-2 {
     display: block;
     color: var(--white);
     margin: 0;
@@ -157,14 +114,59 @@ code {
     text-decoration: none;
 }
 
+:focus-visible {
+    outline: none;
+}
 
-@keyframes fade-in {
-    0% {opacity: 0}
-    100% {opacity: 1}
+@keyframes loading-background {
+    0% {
+        background: rgb(0, 0, 0, 0.2);
+    }
+
+    50% {
+        background: rgb(0, 0, 0, 0.3);
+    }
+
+    100% {
+        background: rgb(0, 0, 0, 0.2);
+    }
+}
+
+
+@keyframes loading-icon {
+    0% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(0.95);
+    }
+
+    100% {
+        transform: scale(1);
+    }
 }
 
 @keyframes loading {
-    to {
+    0% {
+        background: rgb(255, 255, 255, 0.05);
+    }
+
+    50% {
+        background: rgb(255, 255, 255, 0.2);
+    }
+
+    100% {
+        background: rgb(255, 255, 255, 0.05);
+    }
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
         transform: rotate(360deg);
     }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/background.css

@@ -0,0 +1,42 @@
+.orb {
+    position: absolute;
+    border-radius: 100%;
+    z-index: var(--index-orb);
+}
+
+.green {
+    width: 80vh;
+    height: 80vh;
+    top: -20vh;
+    background: #315941;
+    filter: blur(30vh);
+}
+
+.blue {
+    width: 80vw;
+    height: 80vw;
+    left: 10vw;
+    top: 50vh;
+    background: #3A4156;
+    filter: blur(30vh);
+}
+
+.red {
+    width: 100vh;
+    height: 100vh;
+    left: 60vw;
+    top: -40vh;
+    background: #593533;
+    filter: blur(30vh);
+}
+
+#background {
+    height: 100vh;
+    width: 100vw;
+    background: var(--background);
+    position: fixed;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    z-index: var(--index-background);
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html

@@ -7,17 +7,22 @@
     <title>Game Ideas</title>
     <base href="/" />
     <link rel="stylesheet" href="css/app.css" />
+    <link rel="stylesheet" href="css/background.css" />
     <link rel="icon" type="image/png" href="icon.png" />
     <link href="GameIdeas.BlazorApp.styles.css" rel="stylesheet" />
 </head>
 
 <body>
     <div id="app">
-        <svg class="loading-progress">
-            <circle r="40%" cx="50%" cy="50%" />
-            <circle r="40%" cx="50%" cy="50%" />
-        </svg>
-        <div class="loading-progress-text"></div>
+        <div class="loading-progress">
+            <img src="icon.png" alt="" id="loading-icon">
+        </div>
+    </div>
+
+    <div id="background">
+        <span class="orb red"></span>
+        <span class="orb blue"></span>
+        <span class="orb green"></span>
     </div>
 
     <div id="blazor-error-ui">
@@ -25,6 +30,7 @@
         <a href="." class="reload">Reload</a>
         <span class="dismiss">🗙</span>
     </div>
+
     <script src="_framework/blazor.webassembly.js"></script>
     <script src="Shared/Components/BackdropFilter/BackdropFilter.razor.js"></script>
     <script src="Pages/Games/Components/GameCreationForm.razor.js"></script>

src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs

@@ -39,10 +39,13 @@ public class Translations (TranslationService translationService)
     public string ErrorFetchCategories => translationService.Translate(nameof(ErrorFetchCategories));
     public string PlaceholderAdd => translationService.Translate(nameof(PlaceholderAdd));
     public string ErrorCreateGame => translationService.Translate(nameof(ErrorCreateGame));
+    public string ErrorDeleteGame => translationService.Translate(nameof(ErrorDeleteGame));
+    public string ErrorUpdateGame => translationService.Translate(nameof(ErrorUpdateGame));
     public string InvalidTitle => translationService.Translate(nameof(InvalidTitle));
     public string InvalidInterest => translationService.Translate(nameof(InvalidInterest));
     public string Unknown => translationService.Translate(nameof(Unknown));
     public string ErrorFetchGames => translationService.Translate(nameof(ErrorFetchGames));
+    public string ErrorFetchDetail => translationService.Translate(nameof(ErrorFetchDetail));
     public string Ascending => translationService.Translate(nameof(Ascending));
     public string Descending => translationService.Translate(nameof(Descending));
     public string ErrorStorageSpaceLabel => translationService.Translate(nameof(ErrorStorageSpaceLabel));
@@ -66,6 +69,15 @@ public class Translations (TranslationService translationService)
     public string ConfirmDeleteDescription => translationService.Translate(nameof(ConfirmDeleteDescription));
     public string Informations => translationService.Translate(nameof(Informations));
     public string About => translationService.Translate(nameof(About));
+    public string ReadMore => translationService.Translate(nameof(ReadMore));
+    public string ReadLess => translationService.Translate(nameof(ReadLess));
+    public string Detail => translationService.Translate(nameof(Detail));
+    public string Edit => translationService.Translate(nameof(Edit));
+    public string Delete => translationService.Translate(nameof(Delete));
+    public string NoGames => translationService.Translate(nameof(NoGames));
+    public string NoUsers => translationService.Translate(nameof(NoUsers));
+    public string GamesNumberFormat => translationService.Translate(nameof(GamesNumberFormat));
+    public string UsersNumberFormat => translationService.Translate(nameof(UsersNumberFormat));
 }
 
 public static class ResourcesKey
@@ -113,10 +125,13 @@ public static class ResourcesKey
     public static string ErrorFetchCategories => _instance?.ErrorFetchCategories ?? throw new InvalidOperationException("ResourcesKey.ErrorFetchCategories is not initialized.");
     public static string PlaceholderAdd => _instance?.PlaceholderAdd ?? throw new InvalidOperationException("ResourcesKey.PlaceholderAdd is not initialized.");
     public static string ErrorCreateGame => _instance?.ErrorCreateGame ?? throw new InvalidOperationException("ResourcesKey.ErrorCreateGame is not initialized.");
+    public static string ErrorDeleteGame => _instance?.ErrorDeleteGame ?? throw new InvalidOperationException("ResourcesKey.ErrorDeleteGame is not initialized.");
+    public static string ErrorUpdateGame => _instance?.ErrorUpdateGame ?? throw new InvalidOperationException("ResourcesKey.ErrorUpdateGame is not initialized.");
     public static string InvalidTitle => _instance?.InvalidTitle ?? throw new InvalidOperationException("ResourcesKey.InvalidTitle is not initialized.");
     public static string InvalidInterest => _instance?.InvalidInterest ?? throw new InvalidOperationException("ResourcesKey.InvalidInterest is not initialized.");
     public static string Unknown => _instance?.Unknown ?? throw new InvalidOperationException("ResourcesKey.Unknown is not initialized.");
     public static string ErrorFetchGames => _instance?.ErrorFetchGames ?? throw new InvalidOperationException("ResourcesKey.ErrorFetchGames is not initialized.");
+    public static string ErrorFetchDetail => _instance?.ErrorFetchDetail ?? throw new InvalidOperationException("ResourcesKey.ErrorFetchDetail is not initialized.");
     public static string Ascending => _instance?.Ascending ?? throw new InvalidOperationException("ResourcesKey.Ascending is not initialized.");
     public static string Descending => _instance?.Descending ?? throw new InvalidOperationException("ResourcesKey.Descending is not initialized.");
     public static string ErrorStorageSpaceLabel => _instance?.ErrorStorageSpaceLabel ?? throw new InvalidOperationException("ResourcesKey.ErrorStorageSpaceLabel is not initialized.");
@@ -140,4 +155,13 @@ public static class ResourcesKey
     public static string ConfirmDeleteDescription => _instance?.ConfirmDeleteDescription ?? throw new InvalidOperationException("ResourcesKey.ConfirmDeleteDescription is not initialized.");
     public static string Informations => _instance?.Informations ?? throw new InvalidOperationException("ResourcesKey.Informations is not initialized.");
     public static string About => _instance?.About ?? throw new InvalidOperationException("ResourcesKey.About is not initialized.");
+    public static string ReadMore => _instance?.ReadMore ?? throw new InvalidOperationException("ResourcesKey.ReadMore is not initialized.");
+    public static string ReadLess => _instance?.ReadLess ?? throw new InvalidOperationException("ResourcesKey.ReadLess is not initialized.");
+    public static string Detail => _instance?.Detail ?? throw new InvalidOperationException("ResourcesKey.Detail is not initialized.");
+    public static string Edit => _instance?.Edit ?? throw new InvalidOperationException("ResourcesKey.Edit is not initialized.");
+    public static string Delete => _instance?.Delete ?? throw new InvalidOperationException("ResourcesKey.Delete is not initialized.");
+    public static string NoGames => _instance?.NoGames ?? throw new InvalidOperationException("ResourcesKey.NoGames is not initialized.");
+    public static string NoUsers => _instance?.NoUsers ?? throw new InvalidOperationException("ResourcesKey.NoUsers is not initialized.");
+    public static string GamesNumberFormat => _instance?.GamesNumberFormat ?? throw new InvalidOperationException("ResourcesKey.GamesNumberFormat is not initialized.");
+    public static string UsersNumberFormat => _instance?.UsersNumberFormat ?? throw new InvalidOperationException("ResourcesKey.UsersNumberFormat is not initialized.");
 }

src/GameIdeas/GameIdeas.Resources/TranslationService.cs

@@ -5,22 +5,22 @@ namespace GameIdeas.Resources;
 
 public class TranslationService
 {
-	private readonly Dictionary<string, Dictionary<string, string>?> _translations = new();
+    private readonly Dictionary<string, Dictionary<string, string>?> _translations = [];
 
-	public void Initialize(Dictionary<string, string> translations)
-	{
-		foreach (var translation in translations)
-		{
-			var json = JsonSerializer.Deserialize<Dictionary<string, string>>(translation.Value);
-			_translations[translation.Key] = json;
-		}
-	}
+    public void Initialize(Dictionary<string, string> translations)
+    {
+        foreach (var translation in translations)
+        {
+            var json = JsonSerializer.Deserialize<Dictionary<string, string>>(translation.Value);
+            _translations[translation.Key] = json;
+        }
+    }
 
-	public string Translate(string key, string? culture = "fr")
-	{
-		culture ??= CultureInfo.CurrentCulture.TwoLetterISOLanguageName;
-		if (_translations.TryGetValue(culture, out var value) && value?.TryGetValue(key, out var translate) == true)
-			return translate;
-		return key; // Fallback to key if translation is missing
-	}
+    public string Translate(string key, string? culture = "fr")
+    {
+        culture ??= CultureInfo.CurrentCulture.TwoLetterISOLanguageName;
+        if (_translations.TryGetValue(culture, out var value) && value?.TryGetValue(key, out var translate) == true)
+            return translate;
+        return key; // Fallback to key if translation is missing
+    }
 }

src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs

@@ -22,5 +22,7 @@ public class GlobalConstants
     public const int API_PORT = 8000;
     public const string SUB_DOMAIN_NAME = "api-";
 
-    public const double DELAY_INPUT_MS = 500;
+    public const double DELAY_INPUT_MS = 450;
+
+    public const int MAX_DESCRIPTION_LENGTH = 350;
 }

src/GameIdeas/GameIdeas.Shared/Dto/CategoriesDto.cs

@@ -8,5 +8,5 @@ public class CategoriesDto
     public List<DeveloperDto>? Developers { get; set; }
     public List<PublisherDto>? Publishers { get; set; }
     public List<int>? ReleaseYears { get; set; }
-    public List<StorageSpaceDto>? StorageSpaces { get; set; } 
+    public List<StorageSpaceDto>? StorageSpaces { get; set; }
 }

src/GameIdeas/GameIdeas.Shared/Dto/GameListDto.cs

@@ -0,0 +1,7 @@
+namespace GameIdeas.Shared.Dto;
+
+public class GameListDto
+{
+    public IEnumerable<GameDto> Games { get; set; } = [];
+    public int NumberOfGames { get; set; }
+}

src/GameIdeas/GameIdeas.Shared/Dto/UserDto.cs

@@ -1,6 +1,4 @@
-using GameIdeas.Shared.Enum;
-
-namespace GameIdeas.Shared.Dto;
+namespace GameIdeas.Shared.Dto;
 
 public class UserDto
 {

src/GameIdeas/GameIdeas.Shared/Model/Game.cs

@@ -31,4 +31,3 @@ public partial class Game
     public virtual ICollection<GameProperty> GameProperties { get; set; }
     public virtual ICollection<GameTag> GameTags { get; set; }
 }
-    

src/GameIdeas/Server/GameIdeas.WebAPI/Context/GameIdeasContext.cs

@@ -6,7 +6,7 @@ namespace GameIdeas.WebAPI.Context;
 
 public class GameIdeasContext : IdentityDbContext<User>
 {
-    public GameIdeasContext(DbContextOptions<GameIdeasContext> option) 
+    public GameIdeasContext(DbContextOptions<GameIdeasContext> option)
         : base(option)
     {
         AppContext.SetSwitch("Npgsql.EnableLegacyTimestampBehavior", true);
@@ -25,14 +25,16 @@ public class GameIdeasContext : IdentityDbContext<User>
 
     protected override void OnModelCreating(ModelBuilder modelBuilder)
     {
-        modelBuilder.Entity<Developer>(entity => {
+        modelBuilder.Entity<Developer>(entity =>
+        {
             entity.ToTable("Developer");
 
             entity.HasIndex(e => e.Name)
                 .IsUnique();
         });
 
-        modelBuilder.Entity<Platform>(entity => {
+        modelBuilder.Entity<Platform>(entity =>
+        {
             entity.ToTable("Platform");
 
             entity.HasIndex(e => e.Label)
@@ -41,18 +43,18 @@ public class GameIdeasContext : IdentityDbContext<User>
 
         modelBuilder.Entity<Property>(entity =>
         {
-            entity.ToTable("Property"); 
-            
+            entity.ToTable("Property");
+
             entity.HasIndex(e => e.Label)
                 .IsUnique();
         });
 
-        modelBuilder.Entity<Publisher>(entity => 
-        { 
-            entity.ToTable("Publisher"); 
+        modelBuilder.Entity<Publisher>(entity =>
+        {
+            entity.ToTable("Publisher");
 
             entity.HasIndex(e => e.Name)
-                .IsUnique(); 
+                .IsUnique();
         });
 
         modelBuilder.Entity<Tag>(entity =>

src/GameIdeas/Server/GameIdeas.WebAPI/Controllers/GameController.cs

@@ -11,13 +11,13 @@ namespace GameIdeas.WebAPI.Controllers;
 
 public class GameController(
     IGameReadService gameReadService,
-    IGameWriteService gameWriteService, 
+    IGameWriteService gameWriteService,
     ILoggerFactory loggerFactory) : Controller
 {
     private readonly ILogger<GameController> logger = loggerFactory.CreateLogger<GameController>();
 
     [HttpGet]
-    public async Task<ActionResult<IEnumerable<GameDto>>> SearchGames([FromQuery] GameFilterDto filter)
+    public async Task<ActionResult<GameListDto>> SearchGames([FromQuery] GameFilterDto filter)
     {
         try
         {
@@ -73,7 +73,7 @@ public class GameController(
         {
             logger.LogError(e, "Internal error while update game");
             return StatusCode(500, e.Message);
-        }   
+        }
     }
 
     [Authorize(Roles = GlobalConstants.ADMIN_MEMBER)]

src/GameIdeas/Server/GameIdeas.WebAPI/Controllers/TranslationsController.cs

@@ -5,32 +5,32 @@ namespace GameIdeas.WebAPI.Controllers;
 [ApiController]
 [Route("api/[controller]")]
 
-public class TranslationsController (ILogger<TranslationsController> Logger) : ControllerBase
+public class TranslationsController(ILogger<TranslationsController> Logger) : ControllerBase
 {
     [HttpGet]
-	public async Task<IActionResult> GetTranslations()
-	{
-		var dictionary = new Dictionary<string, string>();
+    public async Task<IActionResult> GetTranslations()
+    {
+        var dictionary = new Dictionary<string, string>();
 
-		try
-		{
-			var filesDirectory = Path.Combine(
-				Directory.GetCurrentDirectory(),
-				"Files");
-			var translationFiles = Directory.GetFiles(filesDirectory, "*.json");
-			foreach (var file in translationFiles)
-			{
-				var name = file.Split('.');
-				var culture = name[^2];
-				var content = await System.IO.File.ReadAllTextAsync(file);
-				dictionary.Add(culture, content);
-			}
-		}
-		catch(Exception ex)
-		{
-			Logger.LogError(ex, "Internal translations error");
-		}
+        try
+        {
+            var filesDirectory = Path.Combine(
+                Directory.GetCurrentDirectory(),
+                "Files");
+            var translationFiles = Directory.GetFiles(filesDirectory, "*.json");
+            foreach (var file in translationFiles)
+            {
+                var name = file.Split('.');
+                var culture = name[^2];
+                var content = await System.IO.File.ReadAllTextAsync(file);
+                dictionary.Add(culture, content);
+            }
+        }
+        catch (Exception ex)
+        {
+            Logger.LogError(ex, "Internal translations error");
+        }
 
-		return Ok(dictionary);
-	}
+        return Ok(dictionary);
+    }
 }

src/GameIdeas/Server/GameIdeas.WebAPI/Controllers/UserController.cs

@@ -19,22 +19,22 @@ public class UserController(
     [HttpPost("Login")]
     public async Task<ActionResult<TokenDto>> Login([FromBody] UserDto model)
     {
-		try
-		{
+        try
+        {
             return Ok(await userReadService.Login(model));
-		}
-		catch (UserInvalidException e)
-		{
+        }
+        catch (UserInvalidException e)
+        {
             logger.LogInformation(e, "Missing informations for authentication");
             return StatusCode(406, e.Message);
         }
-		catch (UserUnauthorizedException e)
+        catch (UserUnauthorizedException e)
         {
             logger.LogWarning(e, "Authentication invalid with there informations");
             return Unauthorized(e.Message);
         }
         catch (Exception e)
-		{
+        {
             logger.LogError(e, "Internal error while search games");
             return StatusCode(500, e.Message);
         }

src/GameIdeas/Server/GameIdeas.WebAPI/Exceptions/UserInvalidException.cs

@@ -1,3 +1,3 @@
 namespace GameIdeas.WebAPI.Exceptions;
 
-public class UserInvalidException (string message) : Exception(message);
+public class UserInvalidException(string message) : Exception(message);

src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json

@@ -1,65 +1,77 @@
 {
-    "GamesIdeas": "Game Ideas",
-    "ManualAdd": "Manuel",
-    "AutoAdd": "Automatique",
-    "Login": "Se connecter",
-    "Logout": "Se déconnecter",
-    "EnterUsername": "Nom d'utilisateur",
-    "EnterPassword": "Mot de passe",
-    "UserManager": "Gestion des utilisateurs",
-    "CategoriesManager": "Gestion des catégories",
-    "Filters": "Les filtres",
-    "LastAdd": "Les ajouts récents",
-    "Research": "Rechercher",
-    "Platforms": "Plateformes",
-    "Tags": "Genres",
-    "Publisher": "Editeur",
-    "Developer": "Développeur",
-    "StorageSize": "Taille d'espace",
-    "StorageSizeMo": "Taille d'espace en Mo",
-    "LastModification": "Dernière modifications",
-    "ReleaseDate": "Date de parution",
-    "CreateDate": "Date de création",
-    "UpdateDate": "Date de modification",
-    "Title": "Titre",
-    "Interest": "Intérêt",
-    "Properties": "Propriétés",
-    "Description": "Description",
-    "Save": "Enregister",
-    "Reset": "Annuler",
-    "ErrorWhenPostingData": "Erreur lors de la requête POST",
-    "ErrorWhenPutingData": "Erreur lors de la requête PUT",
-    "ErrorWhenDeletingData": "Erreur lors de la requête DELETE",
-    "ErrorWhenFetchingData": "Erreur lors de la requête GET",
-    "RequestFailedStatusFormat": "Erreur lors de la réponse, code {0}",
-    "ErrorFetchCategories": "Erreur lors de la récupération des catégories",
-    "PlaceholderAdd": "Ajouter un nouveau",
-    "ErrorCreateGame": "Erreur lors de la création d'un jeu",
-    "InvalidTitle": "Le titre est incorrect",
-    "InvalidInterest": "L'interêt est incorrect",
-    "Unknown": "Inconnu",
-    "ErrorFetchGames": "Erreur lors de la récupération des jeux",
-    "Ascending": "Ascendant",
-    "Descending": "Descendant",
-    "ErrorStorageSpaceLabel": "Erreur lors de la génération des label de l'espace de stockage",
-    "MinStorageSpaceFormat": "Jusqu'à {0}",
-    "MaxStorageSpaceFormat": "Plus de {0}",
-    "MinMaxStorageSpaceFormat": "{0} à {1}",
-    "UserArgumentsNull": "Nom d'utilisateur ou mot de passe invalide",
-    "InvalidToken": "Le token JWT est invalide",
-    "UserUnauthorized": "Utilisateur non authorisé",
-    "UserLoginFailed": "Authentification de l'utilisateur échoué",
-    "UserLogoutFailed": "Déconnection de l'utilisateur échoué",
-    "Roles": "Rôles",
-    "ErrorFetchUsers": "Erreur lors de la récupération des utilisateurs",
-    "ErrorFetchRoles": "Erreur lors de la récupération des rôles",
-    "MissingField": "Un champs est manquant",
-    "ErrorCreateUser": "Erreur lors de la création d'un utilisateur",
-    "ErrorUpdateUser": "Erreur lors de la mise à jour d'un utilisateur",
-    "ErrorDeleteUser": "Erreur lors de la suppression d'un utilisateur",
-    "Cancel": "Annuler",
-    "Confirm": "Confirmer",
-    "ConfirmDeleteDescription": "Êtes-vous sur de vouloir supprimer cet élément ?",
-    "Informations": "Informations",
-    "About": "À propos"
+  "GamesIdeas": "Game Ideas",
+  "ManualAdd": "Manuel",
+  "AutoAdd": "Automatique",
+  "Login": "Se connecter",
+  "Logout": "Se déconnecter",
+  "EnterUsername": "Nom d'utilisateur",
+  "EnterPassword": "Mot de passe",
+  "UserManager": "Gestion des utilisateurs",
+  "CategoriesManager": "Gestion des catégories",
+  "Filters": "Les filtres",
+  "LastAdd": "Les ajouts récents",
+  "Research": "Rechercher",
+  "Platforms": "Plateformes",
+  "Tags": "Genres",
+  "Publisher": "Editeur",
+  "Developer": "Développeur",
+  "StorageSize": "Taille d'espace",
+  "StorageSizeMo": "Taille d'espace en Mo",
+  "LastModification": "Dernière modifications",
+  "ReleaseDate": "Date de parution",
+  "CreateDate": "Date de création",
+  "UpdateDate": "Date de modification",
+  "Title": "Titre",
+  "Interest": "Intérêt",
+  "Properties": "Propriétés",
+  "Description": "Description",
+  "Save": "Enregister",
+  "Reset": "Annuler",
+  "ErrorWhenPostingData": "Erreur lors de la requête POST",
+  "ErrorWhenPutingData": "Erreur lors de la requête PUT",
+  "ErrorWhenDeletingData": "Erreur lors de la requête DELETE",
+  "ErrorWhenFetchingData": "Erreur lors de la requête GET",
+  "RequestFailedStatusFormat": "Erreur lors de la réponse, code {0}",
+  "ErrorFetchCategories": "Erreur lors de la récupération des catégories",
+  "PlaceholderAdd": "Ajouter un nouveau",
+  "ErrorCreateGame": "Erreur lors de la création d'un jeu",
+  "ErrorDeleteGame": "Erreur lors de la suppression d'un jeu",
+  "ErrorUpdateGame": "Erreur lors de la modification d'un jeu",
+  "InvalidTitle": "Le titre est incorrect",
+  "InvalidInterest": "L'interêt est incorrect",
+  "Unknown": "Inconnu",
+  "ErrorFetchGames": "Erreur lors de la récupération des jeux",
+  "ErrorFetchDetail": "Erreur lors de la récupération des détails d'un jeu",
+  "Ascending": "Ascendant",
+  "Descending": "Descendant",
+  "ErrorStorageSpaceLabel": "Erreur lors de la génération des label de l'espace de stockage",
+  "MinStorageSpaceFormat": "Jusqu'à {0}",
+  "MaxStorageSpaceFormat": "Plus de {0}",
+  "MinMaxStorageSpaceFormat": "{0} à {1}",
+  "UserArgumentsNull": "Nom d'utilisateur ou mot de passe invalide",
+  "InvalidToken": "Le token JWT est invalide",
+  "UserUnauthorized": "Utilisateur non authorisé",
+  "UserLoginFailed": "Authentification de l'utilisateur échoué",
+  "UserLogoutFailed": "Déconnection de l'utilisateur échoué",
+  "Roles": "Rôles",
+  "ErrorFetchUsers": "Erreur lors de la récupération des utilisateurs",
+  "ErrorFetchRoles": "Erreur lors de la récupération des rôles",
+  "MissingField": "Un champs est manquant",
+  "ErrorCreateUser": "Erreur lors de la création d'un utilisateur",
+  "ErrorUpdateUser": "Erreur lors de la mise à jour d'un utilisateur",
+  "ErrorDeleteUser": "Erreur lors de la suppression d'un utilisateur",
+  "Cancel": "Annuler",
+  "Confirm": "Confirmer",
+  "ConfirmDeleteDescription": "Êtes-vous sur de vouloir supprimer cet élément ?",
+  "Informations": "Informations",
+  "About": "À propos",
+  "ReadMore": "Afficher",
+  "ReadLess": "Réduire",
+  "Detail": "Détail",
+  "Edit": "Modifier",
+  "Delete": "Supprimer",
+  "NoGames": "Pas de jeux disponible",
+  "NoUsers": "Pas d'utilisateurs disponible",
+  "GamesNumberFormat": "Nombre de jeux : {0}",
+  "UsersNumberFormat": "Nombre d'utilisateurs : {0}"
 }

src/GameIdeas/Server/GameIdeas.WebAPI/Migrations/20250420153030_InitialCreate.cs

@@ -1,5 +1,4 @@
-using System;
-using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Migrations;
 using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
 
 #nullable disable

src/GameIdeas/Server/GameIdeas.WebAPI/Migrations/20250420160158_SeedDefaultUser.cs

@@ -54,7 +54,7 @@ namespace GameIdeas.WebAPI.Migrations
         /// <inheritdoc />
         protected override void Down(MigrationBuilder migrationBuilder)
         {
-            migrationBuilder.Sql(@$"DELETE FROM ""AspNetUserRoles"" WHERE ""UserId"" = '{GlobalConstants.ADMINISTRATOR_USER_ID.ToString()}' AND ""RoleId"" = '{GlobalConstants.ADMINISTRATOR_ID.ToString()}'");
+            migrationBuilder.Sql(@$"DELETE FROM ""AspNetUserRoles"" WHERE ""UserId"" = '{GlobalConstants.ADMINISTRATOR_USER_ID}' AND ""RoleId"" = '{GlobalConstants.ADMINISTRATOR_ID}'");
             migrationBuilder.DeleteData("AspNetUsers", "Id", GlobalConstants.ADMINISTRATOR_USER_ID.ToString());
             migrationBuilder.DeleteData("AspNetRoles", "Id", GlobalConstants.ADMINISTRATOR_ID.ToString());
             migrationBuilder.DeleteData("AspNetRoles", "Id", GlobalConstants.MEMBER_ID.ToString());

src/GameIdeas/Server/GameIdeas.WebAPI/Program.cs

@@ -39,7 +39,7 @@ services.AddIdentity<User, IdentityRole>()
     .AddDefaultTokenProviders();
 
 var jwtKey = Environment.GetEnvironmentVariable("JWT_KEY")
-    ?? throw new ArgumentNullException(message: "Invalid key for JWT token", null); 
+    ?? throw new ArgumentNullException(message: "Invalid key for JWT token", null);
 
 services.AddAuthentication(options =>
 {

src/GameIdeas/Server/GameIdeas.WebAPI/Services/Games/GameReadService.cs

@@ -12,7 +12,7 @@ namespace GameIdeas.WebAPI.Services.Games;
 
 public class GameReadService(GameIdeasContext context, IMapper mapper, ICategoryService categoryService) : IGameReadService
 {
-    public async Task<IEnumerable<GameDto>> GetGames(GameFilterDto filter)
+    public async Task<GameListDto> GetGames(GameFilterDto filter)
     {
         var query = context.Games
             .Include(g => g.GamePlatforms).ThenInclude(gp => gp.Platform)
@@ -26,13 +26,19 @@ public class GameReadService(GameIdeasContext context, IMapper mapper, ICategory
 
         ApplyOrder(ref query, filter);
 
-        var games = await query.Skip((filter.CurrentPage - 1) * GlobalConstants.NUMBER_PER_PAGE)
-            .Take(GlobalConstants.NUMBER_PER_PAGE)
-            .ToListAsync();
+        var games = await query.ToListAsync();
 
         ApplyStaticFilter(ref games, filter);
 
-        return mapper.Map<IEnumerable<GameDto>>(games);
+        games = [.. games
+            .Skip((filter.CurrentPage - 1) * GlobalConstants.NUMBER_PER_PAGE)
+            .Take(GlobalConstants.NUMBER_PER_PAGE)];
+
+        return new()
+        {
+            Games = mapper.Map<IEnumerable<GameDto>>(games),
+            NumberOfGames = games.Count
+        };
     }
 
     public async Task<GameDetailDto> GetGameById(int gameId)
@@ -60,7 +66,7 @@ public class GameReadService(GameIdeasContext context, IMapper mapper, ICategory
             Expression propertyAccess = Expression.PropertyOrField(param, filter.SortPropertyName);
             var converted = Expression.Convert(propertyAccess, typeof(object));
             var lambda = Expression.Lambda<Func<Game, object>>(converted, param);
-            
+
             if (filter.SortType == Shared.Enum.SortType.Ascending)
             {
                 query = Queryable.OrderBy(query, lambda);
@@ -116,7 +122,7 @@ public class GameReadService(GameIdeasContext context, IMapper mapper, ICategory
 
         if (filter.ReleaseYears != null)
         {
-            query = query.Where(game => game.ReleaseDate != null && 
+            query = query.Where(game => game.ReleaseDate != null &&
                 filter.ReleaseYears.Contains(game.ReleaseDate.Value.Year));
         }
     }
@@ -130,15 +136,14 @@ public class GameReadService(GameIdeasContext context, IMapper mapper, ICategory
                         .Select(k => k.Trim())
                         .ToArray() ?? [];
 
-            games = games
+            games = [.. games
                 .Where(game => keywords.All(
                     kw => game.Title.Contains(kw, StringComparison.OrdinalIgnoreCase)
                 ))
                 .OrderBy(game => keywords.Min(kw =>
                     game.Title.IndexOf(kw, StringComparison.OrdinalIgnoreCase)
                 ))
-                .ThenBy(game => game.Title.Length)
-                .ToList();
+                .ThenBy(game => game.Title.Length)];
 
             return;
         }
@@ -147,10 +152,9 @@ public class GameReadService(GameIdeasContext context, IMapper mapper, ICategory
         {
             var storageSpaces = categoryService.GetStorageSpaces().Where(stor => filter.StorageSpaces.Contains(stor.Id));
 
-            games = games
+            games = [.. games
                 .Where(game => storageSpaces.Any(stor =>
-                    (stor.MinSize ?? int.MinValue) <= game.StorageSpace && (stor.MaxSize ?? int.MaxValue) > game.StorageSpace))
-                .ToList();
+                    (stor.MinSize ?? int.MinValue) <= game.StorageSpace && (stor.MaxSize ?? int.MaxValue) > game.StorageSpace))];
         }
     }
 }

src/GameIdeas/Server/GameIdeas.WebAPI/Services/Games/GameWriteService.cs

@@ -4,6 +4,7 @@ using GameIdeas.Shared.Exceptions;
 using GameIdeas.Shared.Model;
 using GameIdeas.WebAPI.Context;
 using Microsoft.EntityFrameworkCore;
+using System.Threading.Tasks;
 
 namespace GameIdeas.WebAPI.Services.Games;
 
@@ -13,7 +14,7 @@ public class GameWriteService(GameIdeasContext context, IMapper mapper) : IGameW
     {
         var gameToCreate = mapper.Map<Game>(gameDto);
 
-        HandleDeveloperPublisherCreation(gameToCreate);
+        await HandleDeveloperPublisherCreation(gameToCreate);
         await context.Games.AddAsync(gameToCreate);
         await context.SaveChangesAsync();
 
@@ -35,7 +36,7 @@ public class GameWriteService(GameIdeasContext context, IMapper mapper) : IGameW
 
         var gameToUpdate = mapper.Map<Game>(gameDto);
 
-        HandleDeveloperPublisherCreation(gameToUpdate);
+        await HandleDeveloperPublisherCreation(gameToUpdate);
         await HandlePlatformsCreation(gameDto.Platforms, gameToUpdate.Id);
         await HandlePropertiesCreation(gameDto.Properties, gameToUpdate.Id);
         await HandleTagsCreation(gameDto.Tags, gameToUpdate.Id);
@@ -48,12 +49,27 @@ public class GameWriteService(GameIdeasContext context, IMapper mapper) : IGameW
 
     public async Task<bool> DeleteGame(int gameId)
     {
+        await HandlePlatformsCreation([], gameId);
+        await HandlePropertiesCreation([], gameId);
+        await HandleTagsCreation([], gameId);
+
         var gameToRemove = await context.Games
             .FirstOrDefaultAsync(g => g.Id == gameId)
             ?? throw new NotFoundException($"[{typeof(Game).FullName}] with ID {gameId} has not been found in context");
 
         context.Games.Remove(gameToRemove);
-        return await context.SaveChangesAsync() != 0;
+        await context.SaveChangesAsync();
+
+        context.Publishers.RemoveRange(
+            context.Publishers.Include(p => p.Games)
+                .Where(p => p.Games.Count == 0));
+
+        context.Developers.RemoveRange(
+            context.Developers.Include(d => d.Games)
+                .Where(d => d.Games.Count == 0));
+
+        await context.SaveChangesAsync();
+        return true;
     }
 
     private async Task HandlePlatformsCreation(IEnumerable<PlatformDto>? categoriesToCreate, int gameId)
@@ -62,6 +78,9 @@ public class GameWriteService(GameIdeasContext context, IMapper mapper) : IGameW
         {
             var gps = mapper.Map<ICollection<GamePlatform>>(categoriesToCreate);
 
+            context.GamePlatforms.RemoveRange(
+                context.GamePlatforms.Where(gp => gp.GameId == gameId));
+
             foreach (var gp in gps)
             {
                 gp.GameId = gameId;
@@ -69,6 +88,14 @@ public class GameWriteService(GameIdeasContext context, IMapper mapper) : IGameW
 
             context.Platforms.AttachRange(gps.Select(gp => gp.Platform));
             await context.GamePlatforms.AddRangeAsync(gps);
+
+            await context.SaveChangesAsync();
+
+            context.Platforms.RemoveRange(
+                context.Platforms.Include(p => p.GamePlatforms)
+                    .Where(p => p.GamePlatforms.Count == 0));
+
+            await context.SaveChangesAsync();
         }
     }
 
@@ -78,6 +105,9 @@ public class GameWriteService(GameIdeasContext context, IMapper mapper) : IGameW
         {
             var gps = mapper.Map<ICollection<GameProperty>>(categoriesToCreate);
 
+            context.GameProperties.RemoveRange(
+                context.GameProperties.Where(gp => gp.GameId == gameId));
+
             foreach (var gp in gps)
             {
                 gp.GameId = gameId;
@@ -85,6 +115,14 @@ public class GameWriteService(GameIdeasContext context, IMapper mapper) : IGameW
 
             context.Properties.AttachRange(gps.Select(gp => gp.Property));
             await context.GameProperties.AddRangeAsync(gps);
+
+            await context.SaveChangesAsync();
+
+            context.Properties.RemoveRange(
+                context.Properties.Include(p => p.GameProperties)
+                    .Where(p => p.GameProperties.Count == 0));
+
+            await context.SaveChangesAsync();
         }
     }
 
@@ -94,6 +132,9 @@ public class GameWriteService(GameIdeasContext context, IMapper mapper) : IGameW
         {
             var gts = mapper.Map<ICollection<GameTag>>(categoriesToCreate);
 
+            context.GameTags.RemoveRange(
+                context.GameTags.Where(gt => gt.GameId == gameId));
+
             foreach (var gt in gts)
             {
                 gt.GameId = gameId;
@@ -101,11 +142,30 @@ public class GameWriteService(GameIdeasContext context, IMapper mapper) : IGameW
 
             context.Tags.AttachRange(gts.Select(gt => gt.Tag));
             await context.GameTags.AddRangeAsync(gts);
+
+            await context.SaveChangesAsync();
+
+            context.Tags.RemoveRange(
+                context.Tags.Include(t => t.GameTags)
+                    .Where(t => t.GameTags.Count == 0));
+
+            await context.SaveChangesAsync();
+
         }
     }
 
-    private void HandleDeveloperPublisherCreation(Game? game)
+    private async Task HandleDeveloperPublisherCreation(Game? game)
     {
+        context.Publishers.RemoveRange(
+            context.Publishers.Include(p => p.Games)
+                .Where(p => p.Games.Count == 0));
+
+        context.Developers.RemoveRange(
+            context.Developers.Include(d => d.Games)
+                .Where(d => d.Games.Count == 0));
+
+        await context.SaveChangesAsync();
+
         if (game?.Publisher != null)
         {
             context.Publishers.Attach(game.Publisher);

src/GameIdeas/Server/GameIdeas.WebAPI/Services/Games/IGameReadService.cs

@@ -4,6 +4,6 @@ namespace GameIdeas.WebAPI.Services.Games;
 
 public interface IGameReadService
 {
-    Task<IEnumerable<GameDto>> GetGames(GameFilterDto filter);
+    Task<GameListDto> GetGames(GameFilterDto filter);
     Task<GameDetailDto> GetGameById(int gameId);
 }

src/GameIdeas/Server/GameIdeas.WebAPI/Services/Users/UserReadService.cs

@@ -33,8 +33,9 @@ public class UserReadService(
             .OrderBy(u => u.UserName)
             .ToListAsync();
 
-        var count = users.Count;
         ApplyStaticFilter(ref users, filter);
+        
+        var count = users.Count;
 
         var usersDto = mapper.Map<IEnumerable<UserDto>>(users);
         usersDto = await ApplyRoles(usersDto, filter);
@@ -91,15 +92,14 @@ public class UserReadService(
                         .Select(k => k.Trim())
                         .ToArray() ?? [];
 
-            users = users
+            users = [.. users
                 .Where(user => keywords.All(
                     kw => user.UserName?.Contains(kw, StringComparison.OrdinalIgnoreCase) ?? true
                 ))
                 .OrderBy(user => keywords.Min(kw =>
                     user.UserName?.IndexOf(kw, StringComparison.OrdinalIgnoreCase)
                 ))
-                .ThenBy(user => user.UserName?.Length)
-                .ToList();
+                .ThenBy(user => user.UserName?.Length)];
         }
     }
 

src/GameIdeas/Server/GameIdeas.WebAPI/Services/Users/UserWriteService.cs

@@ -1,5 +1,4 @@
-using AutoMapper;
-using GameIdeas.Resources;
+using GameIdeas.Resources;
 using GameIdeas.Shared.Dto;
 using GameIdeas.Shared.Model;
 using GameIdeas.WebAPI.Exceptions;
@@ -12,8 +11,8 @@ public class UserWriteService(
 {
     public async Task<string> CreateUser(UserDto user)
     {
-        if (user.Username == null || 
-            user.Password == null || 
+        if (user.Username == null ||
+            user.Password == null ||
             user.Role == null)
         {
             throw new UserInvalidException(ResourcesKey.MissingField);
@@ -75,7 +74,7 @@ public class UserWriteService(
         {
             var roles = await userManager.GetRolesAsync(userToUpdate);
             await userManager.RemoveFromRolesAsync(userToUpdate, roles);
-            await userManager.AddToRoleAsync(userToUpdate, user.Role.Name);  
+            await userManager.AddToRoleAsync(userToUpdate, user.Role.Name);
         }
 
         return userToUpdate.Id;