From c14a90024b04b73ea27e9d4429f6fcd69635a8a5 Mon Sep 17 00:00:00 2001
From: insomnious <simon.davies@nexusmods.com>
Date: Mon, 7 Oct 2024 10:41:51 +0100
Subject: [PATCH] Fix for badge width with larger numbers

Added design view model for testing
---
 .../LeftMenu/Items/IconDesignViewModel.cs     | 28 +++++++++++++++++++
 .../LeftMenu/Items/IconView.axaml             | 13 +++++----
 2 files changed, 35 insertions(+), 6 deletions(-)
 create mode 100644 src/NexusMods.App.UI/LeftMenu/Items/IconDesignViewModel.cs

diff --git a/src/NexusMods.App.UI/LeftMenu/Items/IconDesignViewModel.cs b/src/NexusMods.App.UI/LeftMenu/Items/IconDesignViewModel.cs
new file mode 100644
index 0000000000..b59f6e421e
--- /dev/null
+++ b/src/NexusMods.App.UI/LeftMenu/Items/IconDesignViewModel.cs
@@ -0,0 +1,28 @@
+using System.Reactive;
+using System.Reactive.Linq;
+using NexusMods.App.UI.Controls.Navigation;
+using NexusMods.Icons;
+using ReactiveUI;
+using ReactiveUI.Fody.Helpers;
+
+namespace NexusMods.App.UI.LeftMenu.Items;
+
+public class IconDesignViewModel : AViewModel<IIconViewModel>, IIconViewModel
+{
+    [Reactive] public string Name { get; set; } = "";
+
+    [Reactive] public IconValue Icon { get; set; } = new();
+
+    [Reactive] public string[] Badges { get; set; } = [];
+
+    [Reactive] public ReactiveCommand<NavigationInformation, Unit> NavigateCommand { get; set; } = ReactiveCommand.Create<NavigationInformation>(_ => { }, Observable.Return(true));
+    
+    [Reactive] public int RelativeOrder { get; set; } = 0;
+    
+    public IconDesignViewModel() : base()
+    {
+        Icon = IconValues.ModLibrary;
+        Name = "Sample Text";
+        Badges = new[] { "82" };
+    }
+}
diff --git a/src/NexusMods.App.UI/LeftMenu/Items/IconView.axaml b/src/NexusMods.App.UI/LeftMenu/Items/IconView.axaml
index f0e82b0e0b..06d6dc55f0 100644
--- a/src/NexusMods.App.UI/LeftMenu/Items/IconView.axaml
+++ b/src/NexusMods.App.UI/LeftMenu/Items/IconView.axaml
@@ -1,6 +1,6 @@
 <reactiveUi:ReactiveUserControl
-    d:DesignHeight="40"
-    d:DesignWidth="184"
+    d:DesignHeight="50"
+    d:DesignWidth="300"
     mc:Ignorable="d"
     x:Class="NexusMods.App.UI.LeftMenu.Items.IconView"
     x:TypeArguments="items:IIconViewModel"
@@ -15,7 +15,7 @@
     xmlns:system="clr-namespace:System;assembly=System.Runtime">
 
     <Design.DataContext>
-        <items:IconViewModel Icon="{x:Static icons:IconValues.ModLibrary}" Name="Some long Text" />
+        <items:IconDesignViewModel />
     </Design.DataContext>
 
     <navigation:NavigationControl Classes="LeftMenuItem" 
@@ -40,8 +40,9 @@
                 </ItemsControl.ItemsPanel>
                 <ItemsControl.ItemTemplate>
                     <DataTemplate DataType="{x:Type system:String}">
-                        <Border Width="20" 
-                                Height="20" 
+                        <Border
+                                Padding="6,0"
+                                Height="20"
                                 CornerRadius="{StaticResource Rounded-full}" 
                                 Background="{StaticResource PrimaryModerate}">
                             <TextBlock
@@ -49,7 +50,7 @@
                                 TextAlignment="Center"
                                 HorizontalAlignment="Center"
                                 VerticalAlignment="Center"
-                                Classes="BodySMBold"
+                                Theme="{StaticResource BodySMBoldTheme}"
                                 Foreground="{StaticResource NeutralInverted}"
                                 Text="{CompiledBinding }"/>
                         </Border>