Grouping in depot, default to no grouping

LANCommander.Launcher.Models/DepotFilterModel.cs

@@ -6,7 +6,7 @@ namespace LANCommander.Launcher.Models
     public class DepotFilterModel
     {
         public string Title { get; set; }
-        public GroupBy GroupBy { get; set; } = GroupBy.Collection;
+        public GroupBy GroupBy { get; set; } = GroupBy.None;
         public SortBy SortBy { get; set; } = SortBy.Title;
         public SortDirection SortDirection { get; set; } = SortDirection.Ascending;
         public ICollection<Engine> Engines { get; set; }

LANCommander.Launcher/Styles/_depot.scss

@@ -32,19 +32,23 @@ $hero-max-height: 40vh;
     flex-shrink: 0;
 }
 
-.depot-games {
+.depot-list {
     width: 100%;
     overflow-y: scroll;
     overflow-x: hidden;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax($cover-max-width, 1fr));
-    gap: $cover-gap;
     padding-top: $window-drag-area-height + $cover-vertical-padding;
     padding-left: $cover-horizontal-padding + $cover-gap;
     padding-right: $cover-horizontal-padding + $cover-gap;
     padding-bottom: $cover-vertical-padding + $cover-gap;
 }
 
+.depot-list-items,
+.depot-list-group-items {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax($cover-max-width, 1fr));
+    gap: $cover-gap;
+}
+
 .depot-game {
     display: flex;
     align-items: center;

LANCommander.Launcher/UI/Depot/Components/DepotList.razor

@@ -1,14 +1,54 @@
 @using LANCommander.SDK.Models
 @inject SDK.Client Client
 
-<Flex Wrap="wrap" Justify="center" Gap="large" Class="depot-games no-scrollbar">
-    @foreach (var item in Items)
+<div class="depot-list no-scrollbar">
+    @if (Groups.Count > 1)
     {
-        <DepotGameItem Item="item" OnClick="OnItemSelected" />
+        @foreach (var group in Groups)
+        {
+            <div class="depot-list-group">
+                <Divider Text="@group" />
+
+                <div class="depot-list-group-items">
+                    @foreach (var item in Items.Where(i => i.Groups.Contains(group) || (group == "Uncategorized" && i.Groups.Length == 0)))
+                    {
+                        <DepotGameItem Item="item" OnClick="OnItemSelected" />
+                    }
+                </div>
+            </div>
+        }
     }
-</Flex>
+    else
+    {
+        <div class="depot-list-items">
+            @foreach (var item in Items)
+            {
+                <DepotGameItem Item="item" OnClick="OnItemSelected" />
+            }
+        </div>
+    }
+</div>
 
 @code {
     [Parameter] public IEnumerable<Models.ListItem> Items { get; set; }
     [Parameter] public EventCallback<Models.ListItem> OnItemSelected { get; set; }
+
+    List<string> Groups = new();
+
+    protected override async Task OnParametersSetAsync()
+    {
+        await UpdateGroups();
+    }
+
+    async Task UpdateGroups()
+    {
+        Groups = Items.SelectMany(i => i.Groups).Distinct().ToList();
+
+        var uncategorized = Items.Where(i => i.Groups == null || i.Groups.Length == 0).ToList();
+
+        if (Items.Any(i => i.Groups == null || i.Groups.Length == 0))
+            Groups.Add("Uncategorized");
+
+        await InvokeAsync(StateHasChanged);
+    }
 }

LANCommander.Launcher/UI/Depot/Index.razor

@@ -36,7 +36,6 @@
 
     DepotGameDetails DepotGameDetails;
 
-    List<string> Groups = new();
     IEnumerable<Models.ListItem> ListItems = new List<Models.ListItem>();
 
     Models.ListItem SelectedItem { get; set; }
@@ -64,17 +63,6 @@
     {
         ListItems = listItems;
 
-        await UpdateGroups();
-        await InvokeAsync(StateHasChanged);
-    }
-
-    async Task UpdateGroups()
-    {
-        Groups = ListItems.SelectMany(i => i.Groups).Distinct().ToList();
-
-        if (ListItems.Any(i => i.Groups == null || i.Groups.Length == 0))
-            Groups.Add("Uncategorized");
-
         await InvokeAsync(StateHasChanged);
     }
 }