From 9ab49c920139ec3131fae00991613b7b1c1af84e Mon Sep 17 00:00:00 2001
From: Patchzy <64382339+patchzyy@users.noreply.github.com>
Date: Sun, 22 Feb 2026 15:21:10 +0100
Subject: [PATCH 1/3] Add drag-and-drop reordering for mods

---
 WheelWizard/Services/ModManager.cs        |  48 +++
 WheelWizard/Views/Pages/ModsPage.axaml    |  18 +-
 WheelWizard/Views/Pages/ModsPage.axaml.cs | 370 ++++++++++++++++++++++
 3 files changed, 433 insertions(+), 3 deletions(-)

diff --git a/WheelWizard/Services/ModManager.cs b/WheelWizard/Services/ModManager.cs
index 534a8ac3..85d2ece8 100644
--- a/WheelWizard/Services/ModManager.cs
+++ b/WheelWizard/Services/ModManager.cs
@@ -31,6 +31,7 @@ private set
     }
 
     private bool _isProcessing;
+    private bool _isBatchUpdating;
 
     private ModManager()
     {
@@ -103,6 +104,9 @@ public void RemoveMod(Mod mod)
 
     private void Mod_PropertyChanged(object sender, PropertyChangedEventArgs e)
     {
+        if (_isBatchUpdating)
+            return;
+
         if (
             e.PropertyName != nameof(Mod.IsEnabled)
             && e.PropertyName != nameof(Mod.Title)
@@ -490,4 +494,48 @@ public void IncreasePriority(Mod mod)
     public int GetLowestActivePriority() => Mods.Min(m => m.Priority);
 
     public int GetHighestActivePriority() => Mods.Max(m => m.Priority);
+
+    /// <summary>
+    /// Moves a mod to a new position in the list using gap-based indexing.
+    /// Gap 0 = before first item, gap Count = after last item.
+    /// </summary>
+    public void MoveModToIndex(Mod mod, int gapIndex)
+    {
+        var sortedMods = Mods.OrderBy(m => m.Priority).ToList();
+        var currentIndex = sortedMods.IndexOf(mod);
+
+        if (currentIndex == -1)
+            return;
+
+        // Convert gap index to target index after removal
+        int targetIndex;
+        if (gapIndex <= currentIndex)
+            targetIndex = gapIndex;
+        else if (gapIndex > currentIndex + 1)
+            targetIndex = gapIndex - 1;
+        else
+            return; // No change needed (dropped in same position)
+
+        targetIndex = Math.Clamp(targetIndex, 0, sortedMods.Count - 1);
+
+        if (currentIndex == targetIndex)
+            return;
+
+        _isBatchUpdating = true;
+        try
+        {
+            sortedMods.RemoveAt(currentIndex);
+            sortedMods.Insert(targetIndex, mod);
+
+            for (var i = 0; i < sortedMods.Count; i++)
+                sortedMods[i].Priority = i;
+        }
+        finally
+        {
+            _isBatchUpdating = false;
+        }
+
+        SortModsByPriority();
+        SaveModsAsync();
+    }
 }
diff --git a/WheelWizard/Views/Pages/ModsPage.axaml b/WheelWizard/Views/Pages/ModsPage.axaml
index 040b6b4e..7ab7df22 100644
--- a/WheelWizard/Views/Pages/ModsPage.axaml
+++ b/WheelWizard/Views/Pages/ModsPage.axaml
@@ -100,21 +100,29 @@
                         <Border Classes="BoxItemBackground" Height="50">
                             <Grid>
                                 <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="30" />
                                     <ColumnDefinition Width="50" />
                                     <ColumnDefinition Width="*" />
                                 </Grid.ColumnDefinitions>
 
-                                <CheckBox Grid.Column="0" IsChecked="{Binding Mod.IsEnabled, Mode=TwoWay}"
+                                <!-- Drag handle -->
+                                <Panel Grid.Column="0" Background="Transparent" Cursor="Hand"
+                                       PointerPressed="DragHandle_PointerPressed">
+                                    <PathIcon Data="{StaticResource Grip}" Width="12" Height="12"
+                                              Foreground="{StaticResource Neutral500}" />
+                                </Panel>
+
+                                <CheckBox Grid.Column="1" IsChecked="{Binding Mod.IsEnabled, Mode=TwoWay}"
                                           Classes="SwitchDark" Margin="0,5"
                                           HorizontalAlignment="Center" VerticalAlignment="Center" />
                                 <TextBlock Text="{Binding Mod.Title}" FontSize="14"
                                            Foreground="{StaticResource Neutral100}"
-                                           Grid.Column="1" VerticalAlignment="Center" Margin="10,0,0,0" />
+                                           Grid.Column="2" VerticalAlignment="Center" Margin="10,0,0,0" />
 
                                 <!-- Yes i know that it already works without any change event if we remove Mode=OneWay -->
                                 <!-- Removing that will make it so editing that will also edit the model -->
                                 <!-- however, it works really weird if you do that -->
-                                <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right"
+                                <StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Right"
                                             VerticalAlignment="Center">
                                     <TextBlock Text="{x:Static lang:Common.Attribute_Priority}" FontSize="14"
                                                Foreground="{StaticResource Neutral100}"
@@ -188,5 +196,9 @@
                 </ListBox.ContextMenu>
             </ListBox>
         </Grid>
+
+        <!-- Drag-and-drop overlay canvas -->
+        <Canvas x:Name="DragCanvas" IsVisible="False" IsHitTestVisible="False"
+                Grid.RowSpan="2" ZIndex="1000" />
     </Grid>
 </UserControl>
\ No newline at end of file
diff --git a/WheelWizard/Views/Pages/ModsPage.axaml.cs b/WheelWizard/Views/Pages/ModsPage.axaml.cs
index 5301d174..a7f451bb 100644
--- a/WheelWizard/Views/Pages/ModsPage.axaml.cs
+++ b/WheelWizard/Views/Pages/ModsPage.axaml.cs
@@ -1,8 +1,12 @@
 using System.Collections.ObjectModel;
 using System.ComponentModel;
+using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Input;
 using Avalonia.Interactivity;
+using Avalonia.Layout;
+using Avalonia.Media;
+using Avalonia.VisualTree;
 using WheelWizard.Models.Settings;
 using WheelWizard.Services;
 using WheelWizard.Services.Settings;
@@ -42,6 +46,20 @@ public bool HasMods
         }
     }
 
+    // Drag-and-drop state
+    private bool _isDragPending;
+    private bool _isDragging;
+    private Point _dragStartPoint;
+    private ModListItem? _draggedItem;
+    private int _dragStartIndex;
+    private int _currentDropIndex;
+    private ListBoxItem? _draggedListBoxItem;
+    private double _dragOffsetY;
+    private Border? _dragAdorner;
+    private Border? _dropIndicatorLine;
+    private IPointer? _capturedPointer;
+    private const double DragThreshold = 5.0;
+
     public ModsPage()
     {
         InitializeComponent();
@@ -49,6 +67,11 @@ public ModsPage()
         ModManager.PropertyChanged += OnModsChanged;
         ModManager.ReloadAsync();
         SetModsViewVariant();
+
+        // Wire up drag-and-drop pointer tracking
+        PointerMoved += OnDragPointerMoved;
+        PointerReleased += OnDragPointerReleased;
+        PointerCaptureLost += OnDragPointerCaptureLost;
     }
 
     private void OnModsChanged(object? sender, PropertyChangedEventArgs e)
@@ -59,6 +82,9 @@ private void OnModsChanged(object? sender, PropertyChangedEventArgs e)
 
     private void OnModsChanged()
     {
+        if (_isDragging)
+            return; // Suppress UI updates during drag to prevent stale container references
+
         ListItemCount.Text = ModManager.Mods.Count.ToString();
         OnPropertyChanged(nameof(Mods));
         HasMods = Mods.Count > 0;
@@ -210,6 +236,350 @@ private void PriorityText_OnKeyDown(object? sender, KeyEventArgs e)
         ViewUtils.FindParent<ListBoxItem>(e.Source)?.Focus();
     }
 
+    #region Drag and Drop
+
+    private void DragHandle_PointerPressed(object? sender, PointerPressedEventArgs e)
+    {
+        if (!e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
+            return;
+
+        var listBoxItem = ViewUtils.FindParent<ListBoxItem>(sender);
+        if (listBoxItem?.Content is not ModListItem modItem)
+            return;
+
+        if (Mods.Count <= 1)
+            return;
+
+        ModsListBox.SelectedItem = modItem;
+
+        _isDragPending = true;
+        _isDragging = false;
+        _dragStartPoint = e.GetPosition(this);
+        _draggedItem = modItem;
+        _draggedListBoxItem = listBoxItem;
+        _dragOffsetY = e.GetPosition(listBoxItem).Y;
+
+        _capturedPointer = e.Pointer;
+        e.Pointer.Capture(this);
+        e.Handled = true;
+    }
+
+    private void OnDragPointerMoved(object? sender, PointerEventArgs e)
+    {
+        if (!_isDragPending && !_isDragging)
+            return;
+
+        var currentPos = e.GetPosition(this);
+
+        if (_isDragPending && !_isDragging)
+        {
+            var delta = currentPos - _dragStartPoint;
+            if (Math.Abs(delta.Y) < DragThreshold && Math.Abs(delta.X) < DragThreshold)
+                return;
+
+            StartDrag(currentPos);
+        }
+
+        if (_isDragging)
+            UpdateDrag(e, currentPos);
+    }
+
+    private void OnDragPointerReleased(object? sender, PointerReleasedEventArgs e)
+    {
+        if (_isDragging)
+        {
+            EndDrag(commit: true);
+            e.Handled = true;
+        }
+        else if (_isDragPending)
+        {
+            CancelDrag();
+        }
+    }
+
+    private void OnDragPointerCaptureLost(object? sender, PointerCaptureLostEventArgs e)
+    {
+        if (_isDragging || _isDragPending)
+            CancelDrag();
+    }
+
+    protected override void OnKeyDown(KeyEventArgs e)
+    {
+        base.OnKeyDown(e);
+        if (e.Key == Key.Escape && (_isDragging || _isDragPending))
+        {
+            CancelDrag();
+            e.Handled = true;
+        }
+    }
+
+    private void StartDrag(Point currentPos)
+    {
+        _isDragPending = false;
+        _isDragging = true;
+
+        _dragStartIndex = GetModIndex(_draggedItem!);
+        _currentDropIndex = _dragStartIndex;
+
+        if (_draggedListBoxItem != null)
+            _draggedListBoxItem.Opacity = 0.3;
+
+        CreateDragAdorner(currentPos);
+        CreateDropIndicator();
+    }
+
+    private void CreateDragAdorner(Point pos)
+    {
+        var title = _draggedItem?.Mod.Title ?? "Mod";
+
+        var content = new StackPanel
+        {
+            Orientation = Orientation.Horizontal,
+            VerticalAlignment = VerticalAlignment.Center,
+            Spacing = 10,
+        };
+
+        try
+        {
+            if (this.FindResource("Grip") is Geometry gripData)
+            {
+                content.Children.Add(
+                    new PathIcon
+                    {
+                        Data = gripData,
+                        Width = 12,
+                        Height = 12,
+                        Foreground = new SolidColorBrush(Color.Parse("#6C7389")),
+                    }
+                );
+            }
+        }
+        catch
+        {
+            // Resource not found, skip grip icon
+        }
+
+        content.Children.Add(
+            new TextBlock
+            {
+                Text = title,
+                Foreground = new SolidColorBrush(Colors.White),
+                FontSize = 14,
+                VerticalAlignment = VerticalAlignment.Center,
+            }
+        );
+
+        _dragAdorner = new Border
+        {
+            Background = new SolidColorBrush(Color.Parse("#474B5D")),
+            CornerRadius = new CornerRadius(6),
+            Padding = new Thickness(15, 0),
+            Height = 50,
+            MinWidth = 250,
+            RenderTransform = new RotateTransform(1.5),
+            Opacity = 0.95,
+            BoxShadow = new BoxShadows(
+                new BoxShadow
+                {
+                    Blur = 15,
+                    Color = Color.Parse("#80000000"),
+                    OffsetX = 0,
+                    OffsetY = 4,
+                }
+            ),
+            Child = content,
+        };
+
+        Canvas.SetLeft(_dragAdorner, pos.X - 30);
+        Canvas.SetTop(_dragAdorner, pos.Y - _dragOffsetY);
+
+        DragCanvas.Children.Add(_dragAdorner);
+        DragCanvas.IsVisible = true;
+    }
+
+    private void CreateDropIndicator()
+    {
+        _dropIndicatorLine = new Border
+        {
+            Height = 3,
+            Background = new SolidColorBrush(Color.Parse("#34EAC5")),
+            CornerRadius = new CornerRadius(2),
+            IsVisible = false,
+        };
+
+        DragCanvas.Children.Add(_dropIndicatorLine);
+    }
+
+    private void UpdateDrag(PointerEventArgs e, Point currentPos)
+    {
+        if (_dragAdorner != null)
+        {
+            Canvas.SetLeft(_dragAdorner, currentPos.X - 30);
+            Canvas.SetTop(_dragAdorner, currentPos.Y - _dragOffsetY);
+        }
+
+        var dropIndex = CalculateDropIndex(e);
+        _currentDropIndex = dropIndex;
+        UpdateDropIndicator(dropIndex);
+        HandleAutoScroll(e);
+    }
+
+    private int CalculateDropIndex(PointerEventArgs e)
+    {
+        var posInListBox = e.GetPosition(ModsListBox);
+        var items = GetListBoxItems();
+
+        if (items.Count == 0)
+            return 0;
+
+        for (var i = 0; i < items.Count; i++)
+        {
+            var itemPos = items[i].TranslatePoint(new Point(0, 0), ModsListBox);
+            if (itemPos == null)
+                continue;
+
+            var midY = itemPos.Value.Y + items[i].Bounds.Height / 2;
+            if (posInListBox.Y < midY)
+                return i;
+        }
+
+        return items.Count;
+    }
+
+    private void UpdateDropIndicator(int gapIndex)
+    {
+        if (_dropIndicatorLine == null)
+            return;
+
+        var items = GetListBoxItems();
+        if (items.Count == 0)
+            return;
+
+        // Hide indicator when hovering over the no-op zone (same position)
+        if (gapIndex == _dragStartIndex || gapIndex == _dragStartIndex + 1)
+        {
+            _dropIndicatorLine.IsVisible = false;
+            return;
+        }
+
+        _dropIndicatorLine.IsVisible = true;
+
+        if (gapIndex < items.Count)
+        {
+            var item = items[gapIndex];
+            var itemPos = item.TranslatePoint(new Point(0, -2), DragCanvas);
+            if (itemPos != null)
+            {
+                Canvas.SetLeft(_dropIndicatorLine, itemPos.Value.X);
+                Canvas.SetTop(_dropIndicatorLine, itemPos.Value.Y);
+                _dropIndicatorLine.Width = item.Bounds.Width;
+            }
+        }
+        else
+        {
+            var lastItem = items[^1];
+            var itemPos = lastItem.TranslatePoint(new Point(0, lastItem.Bounds.Height + 2), DragCanvas);
+            if (itemPos != null)
+            {
+                Canvas.SetLeft(_dropIndicatorLine, itemPos.Value.X);
+                Canvas.SetTop(_dropIndicatorLine, itemPos.Value.Y);
+                _dropIndicatorLine.Width = lastItem.Bounds.Width;
+            }
+        }
+    }
+
+    private void HandleAutoScroll(PointerEventArgs e)
+    {
+        var scrollViewer = ModsListBox.GetVisualDescendants().OfType<ScrollViewer>().FirstOrDefault();
+        if (scrollViewer == null)
+            return;
+
+        var pos = e.GetPosition(scrollViewer);
+        const double scrollZone = 40.0;
+        const double scrollSpeed = 8.0;
+
+        if (pos.Y < scrollZone && scrollViewer.Offset.Y > 0)
+        {
+            var factor = 1.0 - pos.Y / scrollZone;
+            scrollViewer.Offset = new Vector(scrollViewer.Offset.X, Math.Max(0, scrollViewer.Offset.Y - scrollSpeed * factor));
+        }
+        else if (pos.Y > scrollViewer.Viewport.Height - scrollZone)
+        {
+            var maxScroll = scrollViewer.Extent.Height - scrollViewer.Viewport.Height;
+            if (scrollViewer.Offset.Y < maxScroll)
+            {
+                var factor = 1.0 - (scrollViewer.Viewport.Height - pos.Y) / scrollZone;
+                scrollViewer.Offset = new Vector(scrollViewer.Offset.X, Math.Min(maxScroll, scrollViewer.Offset.Y + scrollSpeed * factor));
+            }
+        }
+    }
+
+    private List<ListBoxItem> GetListBoxItems()
+    {
+        var items = new List<ListBoxItem>();
+        for (var i = 0; i < Mods.Count; i++)
+        {
+            if (ModsListBox.ContainerFromIndex(i) is ListBoxItem lbi)
+                items.Add(lbi);
+        }
+        return items;
+    }
+
+    private int GetModIndex(ModListItem modItem)
+    {
+        for (var i = 0; i < Mods.Count; i++)
+        {
+            if (Mods[i].Mod == modItem.Mod)
+                return i;
+        }
+        return -1;
+    }
+
+    private void EndDrag(bool commit)
+    {
+        if (_draggedListBoxItem != null)
+            _draggedListBoxItem.Opacity = 1.0;
+
+        var modToMove = _draggedItem?.Mod;
+        var targetGapIndex = _currentDropIndex;
+        var sourceIndex = _dragStartIndex;
+        var shouldCommit = commit && modToMove != null && targetGapIndex != sourceIndex && targetGapIndex != sourceIndex + 1;
+
+        CleanupDrag();
+
+        if (shouldCommit)
+            ModManager.MoveModToIndex(modToMove!, targetGapIndex);
+    }
+
+    private void CancelDrag()
+    {
+        if (!_isDragging && !_isDragPending)
+            return;
+
+        if (_draggedListBoxItem != null)
+            _draggedListBoxItem.Opacity = 1.0;
+
+        CleanupDrag();
+    }
+
+    private void CleanupDrag()
+    {
+        _isDragging = false;
+        _isDragPending = false;
+        _draggedItem = null;
+        _draggedListBoxItem = null;
+        _dragAdorner = null;
+        _dropIndicatorLine = null;
+
+        DragCanvas.Children.Clear();
+        DragCanvas.IsVisible = false;
+
+        _capturedPointer?.Capture(null);
+        _capturedPointer = null;
+    }
+
+    #endregion
+
     #region PropertyChanged
 
     public new event PropertyChangedEventHandler? PropertyChanged;

From ad9b4a206725a6dc3bd0bfd4105fea9403fdfddf Mon Sep 17 00:00:00 2001
From: Patchzy <64382339+patchzyy@users.noreply.github.com>
Date: Mon, 23 Feb 2026 23:56:42 +0100
Subject: [PATCH 2/3] Start on gridmod

---
 .../Components/WhWzLibrary/GridModPanel.axaml | 87 +++++++++++++++++
 .../WhWzLibrary/GridModPanel.axaml.cs         | 93 +++++++++++++++++++
 WheelWizard/Views/Pages/ModsPage.axaml        | 30 +++++-
 WheelWizard/Views/Pages/ModsPage.axaml.cs     | 26 +++++-
 4 files changed, 231 insertions(+), 5 deletions(-)
 create mode 100644 WheelWizard/Views/Components/WhWzLibrary/GridModPanel.axaml
 create mode 100644 WheelWizard/Views/Components/WhWzLibrary/GridModPanel.axaml.cs

diff --git a/WheelWizard/Views/Components/WhWzLibrary/GridModPanel.axaml b/WheelWizard/Views/Components/WhWzLibrary/GridModPanel.axaml
new file mode 100644
index 00000000..14fc10b9
--- /dev/null
+++ b/WheelWizard/Views/Components/WhWzLibrary/GridModPanel.axaml
@@ -0,0 +1,87 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:components="clr-namespace:WheelWizard.Views.Components"
+             xmlns:pages="clr-namespace:WheelWizard.Views.Pages"
+             xmlns:lang="clr-namespace:WheelWizard.Resources.Languages"
+             x:Class="WheelWizard.Views.Components.GridModPanel"
+             x:DataType="pages:ModListItem">
+
+    <Border CornerRadius="8" Background="{StaticResource Neutral900}"
+            ClipToBounds="True" Margin="4" MinHeight="200">
+        <Grid RowDefinitions="*, Auto">
+            <!-- Image area -->
+            <Border Grid.Row="0" Background="{StaticResource Neutral700}"
+                    ClipToBounds="True" MinHeight="120">
+                <Panel>
+                    <Image x:Name="ModImage" Stretch="UniformToFill"
+                           HorizontalAlignment="Center" VerticalAlignment="Center" />
+                    <!-- Placeholder icon when no image is loaded -->
+                    <PathIcon x:Name="PlaceholderIcon"
+                              Data="{StaticResource CubesStacked}"
+                              Width="36" Height="36"
+                              Foreground="{StaticResource Neutral500}"
+                              HorizontalAlignment="Center" VerticalAlignment="Center" />
+                </Panel>
+            </Border>
+
+            <!-- Gradient overlay with title at bottom of image -->
+            <Border Grid.Row="0" VerticalAlignment="Bottom" IsHitTestVisible="False">
+                <Border.Background>
+                    <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                        <GradientStop Color="Transparent" Offset="0.0" />
+                        <GradientStop Color="#DD000000" Offset="1.0" />
+                    </LinearGradientBrush>
+                </Border.Background>
+                <TextBlock Text="{Binding Mod.Title}" FontSize="13" FontWeight="SemiBold"
+                           Foreground="{StaticResource Neutral100}"
+                           TextTrimming="CharacterEllipsis"
+                           Margin="10,24,10,6" />
+            </Border>
+
+            <!-- Bottom controls bar: Enabled switch + Priority -->
+            <Border Grid.Row="1" Background="{StaticResource Neutral900}" Padding="8,6">
+                <Grid ColumnDefinitions="Auto, *, Auto">
+                    <CheckBox Grid.Column="0"
+                              IsChecked="{Binding Mod.IsEnabled, Mode=TwoWay}"
+                              Classes="SwitchDark"
+                              VerticalAlignment="Center" />
+
+                    <StackPanel Grid.Column="2" Orientation="Horizontal" Spacing="4"
+                                VerticalAlignment="Center">
+                        <TextBlock Text="#" FontSize="13"
+                                   Foreground="{StaticResource Neutral500}"
+                                   VerticalAlignment="Center" />
+                        <TextBox x:Name="PriorityTextBox"
+                                 Text="{Binding Mod.Priority, Mode=OneWay}"
+                                 Classes="dark"
+                                 MinWidth="30" MaxWidth="50"
+                                 MinHeight="28" Height="28"
+                                 VerticalAlignment="Center"
+                                 Padding="4,2"
+                                 HorizontalContentAlignment="Center"
+                                 TextChanged="PriorityText_OnTextChanged"
+                                 LostFocus="PriorityText_OnLostFocus"
+                                 KeyDown="PriorityText_OnKeyDown">
+                            <TextBox.Styles>
+                                <Style Selector="TextBox /template/ DockPanel#PART_InnerDockPanel">
+                                    <Setter Property="Margin" Value="0" />
+                                </Style>
+                                <Style Selector="TextBox /template/ ScrollViewer#PART_ScrollViewer">
+                                    <Setter Property="HorizontalAlignment" Value="Center" />
+                                    <Setter Property="VerticalScrollBarVisibility" Value="Hidden" />
+                                </Style>
+                            </TextBox.Styles>
+                        </TextBox>
+                    </StackPanel>
+                </Grid>
+            </Border>
+        </Grid>
+
+        <!-- Hover effect -->
+        <Border.Styles>
+            <Style Selector="Border:pointerover">
+                <Setter Property="Background" Value="{StaticResource Neutral700}" />
+            </Style>
+        </Border.Styles>
+    </Border>
+</UserControl>
diff --git a/WheelWizard/Views/Components/WhWzLibrary/GridModPanel.axaml.cs b/WheelWizard/Views/Components/WhWzLibrary/GridModPanel.axaml.cs
new file mode 100644
index 00000000..250be010
--- /dev/null
+++ b/WheelWizard/Views/Components/WhWzLibrary/GridModPanel.axaml.cs
@@ -0,0 +1,93 @@
+using Avalonia.Controls;
+using Avalonia.Input;
+using Avalonia.Interactivity;
+using Avalonia.Media.Imaging;
+using Microsoft.Extensions.DependencyInjection;
+using WheelWizard.GameBanana;
+using WheelWizard.Views.Pages;
+
+namespace WheelWizard.Views.Components;
+
+public partial class GridModPanel : UserControl
+{
+    public GridModPanel()
+    {
+        InitializeComponent();
+        DataContextChanged += OnDataContextChanged;
+    }
+
+    private void OnDataContextChanged(object? sender, EventArgs e)
+    {
+        // Reset image state when DataContext changes
+        ModImage.Source = null;
+        PlaceholderIcon.IsVisible = true;
+        LoadModImageAsync();
+    }
+
+    private async void LoadModImageAsync()
+    {
+        if (DataContext is not ModListItem item || item.Mod.ModID <= 0)
+            return;
+
+        try
+        {
+            var gameBananaService = App.Services.GetService<IGameBananaSingletonService>();
+            if (gameBananaService == null)
+                return;
+
+            var result = await gameBananaService.GetModDetails(item.Mod.ModID);
+            if (!result.IsSuccess || result.Value.PreviewMedia?.Images == null || result.Value.PreviewMedia.Images.Count == 0)
+                return;
+
+            var image = result.Value.PreviewMedia.Images[0];
+            // Prefer smaller 220px thumbnail for grid cards, fall back to full size
+            var imageUrl = image.File220 != null ? $"{image.BaseUrl}/{image.File220}" : $"{image.BaseUrl}/{image.File}";
+
+            using var httpClient = new HttpClient();
+            var response = await httpClient.GetAsync(imageUrl);
+            response.EnsureSuccessStatusCode();
+
+            await using var stream = await response.Content.ReadAsStreamAsync();
+            var memoryStream = new MemoryStream();
+            await stream.CopyToAsync(memoryStream);
+            memoryStream.Position = 0;
+            ModImage.Source = new Bitmap(memoryStream);
+            PlaceholderIcon.IsVisible = false;
+        }
+        catch
+        {
+            // Ignore - just show placeholder icon
+        }
+    }
+
+    private void PriorityText_OnLostFocus(object? sender, RoutedEventArgs e)
+    {
+        if (DataContext is not ModListItem item || e.Source is not TextBox textBox)
+            return;
+
+        textBox.Classes.Remove("error");
+        if (int.TryParse(textBox.Text, out var newPriority))
+            item.Mod.Priority = newPriority;
+        else
+            textBox.Text = item.Mod.Priority.ToString();
+    }
+
+    private void PriorityText_OnTextChanged(object? sender, TextChangedEventArgs e)
+    {
+        if (e.Source is not TextBox textBox)
+            return;
+
+        if (int.TryParse(textBox.Text, out _))
+            textBox.Classes.Remove("error");
+        else if (!textBox.Classes.Contains("error"))
+            textBox.Classes.Add("error");
+    }
+
+    private void PriorityText_OnKeyDown(object? sender, KeyEventArgs e)
+    {
+        if (e.Key != Key.Enter || sender is not TextBox)
+            return;
+
+        this.Focus();
+    }
+}
diff --git a/WheelWizard/Views/Pages/ModsPage.axaml b/WheelWizard/Views/Pages/ModsPage.axaml
index 7ab7df22..a7c7ff0a 100644
--- a/WheelWizard/Views/Pages/ModsPage.axaml
+++ b/WheelWizard/Views/Pages/ModsPage.axaml
@@ -93,7 +93,7 @@
                         VerticalAlignment="Bottom" />
             </Grid>
 
-            <!-- Mods List -->
+            <!-- Mods List (Blocks / arrow mode) -->
             <ListBox Grid.Row="1" x:Name="ModsListBox" ItemsSource="{Binding Mods}" Margin="10,5">
                 <ListBox.ItemTemplate>
                     <DataTemplate>
@@ -195,6 +195,34 @@
                     </ContextMenu>
                 </ListBox.ContextMenu>
             </ListBox>
+
+            <!-- Mods Grid (Rows / priority text mode) -->
+            <ScrollViewer Grid.Row="1" x:Name="ModsGridView" IsVisible="False" Margin="10,5"
+                          HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+                <ItemsControl ItemsSource="{Binding Mods}">
+                    <ItemsControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <UniformGrid Columns="2" />
+                        </ItemsPanelTemplate>
+                    </ItemsControl.ItemsPanel>
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate>
+                            <Border>
+                                <components:GridModPanel />
+                                <Border.ContextMenu>
+                                    <ContextMenu>
+                                        <MenuItem Header="{x:Static lang:Common.Action_Rename}" Click="RenameMod_Click" />
+                                        <MenuItem Header="{x:Static lang:Common.Action_Delete}" Click="DeleteMod_Click" />
+                                        <Separator />
+                                        <MenuItem Header="{x:Static lang:Common.Action_ViewMod}" Click="ViewMod_Click" />
+                                        <MenuItem Header="{x:Static lang:Common.Action_OpenFolder}" Click="OpenFolder_Click" />
+                                    </ContextMenu>
+                                </Border.ContextMenu>
+                            </Border>
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+            </ScrollViewer>
         </Grid>
 
         <!-- Drag-and-drop overlay canvas -->
diff --git a/WheelWizard/Views/Pages/ModsPage.axaml.cs b/WheelWizard/Views/Pages/ModsPage.axaml.cs
index a7f451bb..1c58ecb7 100644
--- a/WheelWizard/Views/Pages/ModsPage.axaml.cs
+++ b/WheelWizard/Views/Pages/ModsPage.axaml.cs
@@ -104,7 +104,8 @@ private void ImportMod_Click(object sender, RoutedEventArgs e)
 
     private void RenameMod_Click(object sender, RoutedEventArgs e)
     {
-        if (ModsListBox.SelectedItem is not ModListItem selectedMod)
+        var selectedMod = GetContextModListItem(sender);
+        if (selectedMod == null)
             return;
 
         ModManager.RenameMod(selectedMod.Mod);
@@ -112,7 +113,8 @@ private void RenameMod_Click(object sender, RoutedEventArgs e)
 
     private void DeleteMod_Click(object sender, RoutedEventArgs e)
     {
-        if (ModsListBox.SelectedItem is not ModListItem selectedMod)
+        var selectedMod = GetContextModListItem(sender);
+        if (selectedMod == null)
             return;
 
         ModManager.DeleteMod(selectedMod.Mod);
@@ -120,7 +122,8 @@ private void DeleteMod_Click(object sender, RoutedEventArgs e)
 
     private void OpenFolder_Click(object sender, RoutedEventArgs e)
     {
-        if (ModsListBox.SelectedItem is not ModListItem selectedMod)
+        var selectedMod = GetContextModListItem(sender);
+        if (selectedMod == null)
             return;
 
         ModManager.OpenModFolder(selectedMod.Mod);
@@ -128,7 +131,8 @@ private void OpenFolder_Click(object sender, RoutedEventArgs e)
 
     private void ViewMod_Click(object sender, RoutedEventArgs e)
     {
-        if (ModsListBox.SelectedItem is not ModListItem selectedMod)
+        var selectedMod = GetContextModListItem(sender);
+        if (selectedMod == null)
         {
             // You actually never see this error, however, if for some unknown reason it happens, we don't want to disregard it
             MessageTranslationHelper.ShowMessage(MessageTranslation.Warning_CantViewMod_SomethingWrong);
@@ -146,6 +150,16 @@ private void ViewMod_Click(object sender, RoutedEventArgs e)
         modPopup.ShowDialog();
     }
 
+    /// <summary>
+    /// Resolves the ModListItem from either a grid context menu (DataContext) or ListBox selection.
+    /// </summary>
+    private ModListItem? GetContextModListItem(object? sender)
+    {
+        if (sender is MenuItem { DataContext: ModListItem item })
+            return item;
+        return ModsListBox.SelectedItem as ModListItem;
+    }
+
     private void ToggleButton_OnIsCheckedChanged(object? sender, RoutedEventArgs e)
     {
         ModManager.ToggleAllMods(EnableAllCheckbox.IsChecked == true);
@@ -227,6 +241,10 @@ private void SetModsViewVariant()
             else
                 elementToSwapClass.Classes.Remove("Rows");
         }
+
+        // Toggle between list view (Blocks/arrows mode) and grid view (Rows/priority text mode)
+        ModsListBox.IsVisible = !asRows;
+        ModsGridView.IsVisible = asRows;
     }
 
     private void PriorityText_OnKeyDown(object? sender, KeyEventArgs e)

From 01b2d2520e4d5ac954c1771db63c2fe3449225a0 Mon Sep 17 00:00:00 2001
From: Patchzy <64382339+patchzyy@users.noreply.github.com>
Date: Tue, 24 Feb 2026 00:13:25 +0100
Subject: [PATCH 3/3] Update GridModPanel.axaml

---
 .../Components/WhWzLibrary/GridModPanel.axaml | 100 +++++++++---------
 1 file changed, 52 insertions(+), 48 deletions(-)

diff --git a/WheelWizard/Views/Components/WhWzLibrary/GridModPanel.axaml b/WheelWizard/Views/Components/WhWzLibrary/GridModPanel.axaml
index 14fc10b9..da766fd9 100644
--- a/WheelWizard/Views/Components/WhWzLibrary/GridModPanel.axaml
+++ b/WheelWizard/Views/Components/WhWzLibrary/GridModPanel.axaml
@@ -7,14 +7,12 @@
              x:DataType="pages:ModListItem">
 
     <Border CornerRadius="8" Background="{StaticResource Neutral900}"
-            ClipToBounds="True" Margin="4" MinHeight="200">
-        <Grid RowDefinitions="*, Auto">
+            ClipToBounds="True" Margin="4" Height="160">
+        <Grid>
             <!-- Image area -->
-            <Border Grid.Row="0" Background="{StaticResource Neutral700}"
-                    ClipToBounds="True" MinHeight="120">
+            <Border Background="{StaticResource Neutral700}" ClipToBounds="True">
                 <Panel>
-                    <Image x:Name="ModImage" Stretch="UniformToFill"
-                           HorizontalAlignment="Center" VerticalAlignment="Center" />
+                    <Image x:Name="ModImage" Stretch="UniformToFill" />
                     <!-- Placeholder icon when no image is loaded -->
                     <PathIcon x:Name="PlaceholderIcon"
                               Data="{StaticResource CubesStacked}"
@@ -24,57 +22,63 @@
                 </Panel>
             </Border>
 
-            <!-- Gradient overlay with title at bottom of image -->
-            <Border Grid.Row="0" VerticalAlignment="Bottom" IsHitTestVisible="False">
+            <!-- Gradient overlay for the bottom area -->
+            <Border VerticalAlignment="Bottom" Height="100" IsHitTestVisible="False">
                 <Border.Background>
                     <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
                         <GradientStop Color="Transparent" Offset="0.0" />
-                        <GradientStop Color="#DD000000" Offset="1.0" />
+                        <GradientStop Color="{StaticResource Neutral900}" Offset="0.7" />
+                        <GradientStop Color="{StaticResource Neutral900}" Offset="1.0" />
                     </LinearGradientBrush>
                 </Border.Background>
-                <TextBlock Text="{Binding Mod.Title}" FontSize="13" FontWeight="SemiBold"
+            </Border>
+
+            <!-- Content -->
+            <Grid RowDefinitions="*, Auto, Auto">
+                <!-- Title -->
+                <TextBlock Grid.Row="1" Text="{Binding Mod.Title}" FontSize="13" FontWeight="SemiBold"
                            Foreground="{StaticResource Neutral100}"
                            TextTrimming="CharacterEllipsis"
-                           Margin="10,24,10,6" />
-            </Border>
+                           Margin="10,0,10,4" />
 
-            <!-- Bottom controls bar: Enabled switch + Priority -->
-            <Border Grid.Row="1" Background="{StaticResource Neutral900}" Padding="8,6">
-                <Grid ColumnDefinitions="Auto, *, Auto">
-                    <CheckBox Grid.Column="0"
-                              IsChecked="{Binding Mod.IsEnabled, Mode=TwoWay}"
-                              Classes="SwitchDark"
-                              VerticalAlignment="Center" />
+                <!-- Bottom controls bar: Enabled switch + Priority -->
+                <Border Grid.Row="2" Padding="8,0,8,8">
+                    <Grid ColumnDefinitions="Auto, *, Auto">
+                        <CheckBox Grid.Column="0"
+                                  IsChecked="{Binding Mod.IsEnabled, Mode=TwoWay}"
+                                  Classes="SwitchDark"
+                                  VerticalAlignment="Center" />
 
-                    <StackPanel Grid.Column="2" Orientation="Horizontal" Spacing="4"
-                                VerticalAlignment="Center">
-                        <TextBlock Text="#" FontSize="13"
-                                   Foreground="{StaticResource Neutral500}"
-                                   VerticalAlignment="Center" />
-                        <TextBox x:Name="PriorityTextBox"
-                                 Text="{Binding Mod.Priority, Mode=OneWay}"
-                                 Classes="dark"
-                                 MinWidth="30" MaxWidth="50"
-                                 MinHeight="28" Height="28"
-                                 VerticalAlignment="Center"
-                                 Padding="4,2"
-                                 HorizontalContentAlignment="Center"
-                                 TextChanged="PriorityText_OnTextChanged"
-                                 LostFocus="PriorityText_OnLostFocus"
-                                 KeyDown="PriorityText_OnKeyDown">
-                            <TextBox.Styles>
-                                <Style Selector="TextBox /template/ DockPanel#PART_InnerDockPanel">
-                                    <Setter Property="Margin" Value="0" />
-                                </Style>
-                                <Style Selector="TextBox /template/ ScrollViewer#PART_ScrollViewer">
-                                    <Setter Property="HorizontalAlignment" Value="Center" />
-                                    <Setter Property="VerticalScrollBarVisibility" Value="Hidden" />
-                                </Style>
-                            </TextBox.Styles>
-                        </TextBox>
-                    </StackPanel>
-                </Grid>
-            </Border>
+                        <StackPanel Grid.Column="2" Orientation="Horizontal" Spacing="4"
+                                    VerticalAlignment="Center">
+                            <TextBlock Text="#" FontSize="13"
+                                       Foreground="{StaticResource Neutral500}"
+                                       VerticalAlignment="Center" />
+                            <TextBox x:Name="PriorityTextBox"
+                                     Text="{Binding Mod.Priority, Mode=OneWay}"
+                                     Classes="dark"
+                                     MinWidth="30" MaxWidth="50"
+                                     MinHeight="28" Height="28"
+                                     VerticalAlignment="Center"
+                                     Padding="4,2"
+                                     HorizontalContentAlignment="Center"
+                                     TextChanged="PriorityText_OnTextChanged"
+                                     LostFocus="PriorityText_OnLostFocus"
+                                     KeyDown="PriorityText_OnKeyDown">
+                                <TextBox.Styles>
+                                    <Style Selector="TextBox /template/ DockPanel#PART_InnerDockPanel">
+                                        <Setter Property="Margin" Value="0" />
+                                    </Style>
+                                    <Style Selector="TextBox /template/ ScrollViewer#PART_ScrollViewer">
+                                        <Setter Property="HorizontalAlignment" Value="Center" />
+                                        <Setter Property="VerticalScrollBarVisibility" Value="Hidden" />
+                                    </Style>
+                                </TextBox.Styles>
+                            </TextBox>
+                        </StackPanel>
+                    </Grid>
+                </Border>
+            </Grid>
         </Grid>
 
         <!-- Hover effect -->