From 318cb32d13bcb8b64c3c8d9750cd7b3af3d52a4c Mon Sep 17 00:00:00 2001
From: Kayla Cinnamon <cinnamon@microsoft.com>
Date: Wed, 22 Jan 2025 13:12:46 -0500
Subject: [PATCH] [Settings] Add "new" labels to navigation for new utilities
 (#36939)

* initial implementation

* move new label to zoomit

* cleanup

* more cleanup

* fix XAML formatting

* update padding to 4px

* add badge to dashboard item

* fix XAML formatting

* Tweaking UX

---------

Co-authored-by: Niels Laute <niels.laute@live.nl>
Co-authored-by: Jaime Bernardo <jaime@janeasystems.com>
---
 .../Settings.UI/SettingsXAML/App.xaml         |  1 +
 .../SettingsXAML/Styles/InfoBadge.xaml        | 23 +++++++++++
 .../SettingsXAML/Views/DashboardPage.xaml     | 39 ++++++++++++++-----
 .../SettingsXAML/Views/ShellPage.xaml         |  9 ++++-
 .../Settings.UI/Strings/en-us/Resources.resw  |  4 ++
 .../ViewModels/DashboardListItem.cs           |  2 +
 .../ViewModels/DashboardViewModel.cs          |  1 +
 7 files changed, 68 insertions(+), 11 deletions(-)
 create mode 100644 src/settings-ui/Settings.UI/SettingsXAML/Styles/InfoBadge.xaml

diff --git a/src/settings-ui/Settings.UI/SettingsXAML/App.xaml b/src/settings-ui/Settings.UI/SettingsXAML/App.xaml
index 6e65f31069..365c592d27 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/App.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/App.xaml
@@ -11,6 +11,7 @@
                 <ResourceDictionary Source="/SettingsXAML/Controls/KeyVisual/KeyVisual.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Styles/TextBlock.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Styles/Button.xaml" />
+                <ResourceDictionary Source="/SettingsXAML/Styles/InfoBadge.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Themes/Colors.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Themes/Generic.xaml" />
                 <!--  Other merged dictionaries here  -->
diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Styles/InfoBadge.xaml b/src/settings-ui/Settings.UI/SettingsXAML/Styles/InfoBadge.xaml
new file mode 100644
index 0000000000..a4a5a26111
--- /dev/null
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Styles/InfoBadge.xaml
@@ -0,0 +1,23 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <Style x:Key="NewInfoBadge" TargetType="InfoBadge">
+        <Setter Property="Padding" Value="5,1,5,2" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="InfoBadge">
+                    <Border
+                        x:Name="RootGrid"
+                        Padding="{TemplateBinding Padding}"
+                        Background="{TemplateBinding Background}"
+                        CornerRadius="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.InfoBadgeCornerRadius}">
+                        <TextBlock
+                            x:Uid="SettingsPage_NewInfoBadge"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            FontSize="10" />
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Views/DashboardPage.xaml b/src/settings-ui/Settings.UI/SettingsXAML/Views/DashboardPage.xaml
index 0e26afcaac..b48ddf66c8 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Views/DashboardPage.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Views/DashboardPage.xaml
@@ -348,17 +348,28 @@
                                             <ColumnDefinition Width="Auto" />
                                             <ColumnDefinition Width="Auto" />
                                         </Grid.ColumnDefinitions>
-                                        <Image Width="20" Margin="0,0,0,0">
+                                        <Image
+                                            Grid.Column="0"
+                                            Width="20"
+                                            Margin="0,0,0,0">
                                             <Image.Source>
                                                 <BitmapImage UriSource="{x:Bind Icon, Mode=OneWay}" />
                                             </Image.Source>
                                         </Image>
-                                        <TextBlock
+                                        <StackPanel
                                             Grid.Column="1"
                                             VerticalAlignment="Center"
-                                            FontWeight="SemiBold"
-                                            Text="{x:Bind Label, Mode=OneWay}"
-                                            TextTrimming="CharacterEllipsis" />
+                                            Orientation="Horizontal">
+                                            <TextBlock
+                                                VerticalAlignment="Center"
+                                                FontWeight="SemiBold"
+                                                Text="{x:Bind Label, Mode=OneWay}"
+                                                TextTrimming="CharacterEllipsis" />
+                                            <InfoBadge
+                                                Margin="4,0,0,0"
+                                                Style="{StaticResource NewInfoBadge}"
+                                                Visibility="{x:Bind IsNew, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" />
+                                        </StackPanel>
                                         <FontIcon
                                             Grid.Column="2"
                                             Width="20"
@@ -440,17 +451,25 @@
                                             <ColumnDefinition Width="Auto" />
                                             <ColumnDefinition Width="Auto" />
                                         </Grid.ColumnDefinitions>
-                                        <Image Width="20">
+                                        <Image Grid.Column="0" Width="20">
                                             <Image.Source>
                                                 <BitmapImage UriSource="{x:Bind Icon, Mode=OneWay}" />
                                             </Image.Source>
                                         </Image>
-                                        <TextBlock
+                                        <StackPanel
                                             Grid.Column="1"
                                             VerticalAlignment="Center"
-                                            FontWeight="SemiBold"
-                                            Text="{x:Bind Label, Mode=OneWay}"
-                                            TextTrimming="CharacterEllipsis" />
+                                            Orientation="Horizontal">
+                                            <TextBlock
+                                                VerticalAlignment="Center"
+                                                FontWeight="SemiBold"
+                                                Text="{x:Bind Label, Mode=OneWay}"
+                                                TextTrimming="CharacterEllipsis" />
+                                            <InfoBadge
+                                                Margin="4,0,0,0"
+                                                Style="{StaticResource NewInfoBadge}"
+                                                Visibility="{x:Bind IsNew, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" />
+                                        </StackPanel>
                                         <FontIcon
                                             Grid.Column="2"
                                             Width="20"
diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Views/ShellPage.xaml b/src/settings-ui/Settings.UI/SettingsXAML/Views/ShellPage.xaml
index f3f21292b5..4167e3e39f 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Views/ShellPage.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Views/ShellPage.xaml
@@ -110,6 +110,9 @@
                     x:Uid="Shell_TopLevelSystemTools"
                     Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/SystemTools.png}"
                     SelectsOnInvoked="False">
+                    <NavigationViewItem.InfoBadge>
+                        <InfoBadge Style="{StaticResource NewInfoBadge}" />
+                    </NavigationViewItem.InfoBadge>
                     <NavigationViewItem.MenuItems>
                         <NavigationViewItem
                             x:Uid="Shell_AdvancedPaste"
@@ -142,7 +145,11 @@
                         <NavigationViewItem
                             x:Uid="Shell_ZoomIt"
                             helpers:NavHelper.NavigateTo="views:ZoomItPage"
-                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/ZoomIt.png}" />
+                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/ZoomIt.png}">
+                            <NavigationViewItem.InfoBadge>
+                                <InfoBadge Style="{StaticResource NewInfoBadge}" />
+                            </NavigationViewItem.InfoBadge>
+                        </NavigationViewItem>
                     </NavigationViewItem.MenuItems>
                 </NavigationViewItem>
 
diff --git a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
index 842e49ae99..b7c9b4ec68 100644
--- a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
@@ -4880,4 +4880,8 @@ To record a specific window, enter the hotkey with the Alt key in the opposite m
   <data name="PowerLauncher_PluginWebsite.Text" xml:space="preserve">
     <value>Project website</value>
   </data>
+  <data name="SettingsPage_NewInfoBadge.Text" xml:space="preserve">
+    <value>NEW</value>
+	<comment>Must be all caps</comment>
+  </data>
 </root>
\ No newline at end of file
diff --git a/src/settings-ui/Settings.UI/ViewModels/DashboardListItem.cs b/src/settings-ui/Settings.UI/ViewModels/DashboardListItem.cs
index 03843a8d8c..9e3110456b 100644
--- a/src/settings-ui/Settings.UI/ViewModels/DashboardListItem.cs
+++ b/src/settings-ui/Settings.UI/ViewModels/DashboardListItem.cs
@@ -20,6 +20,8 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
 
         public string Label { get; set; }
 
+        public bool IsNew { get; set; }
+
         public string Icon { get; set; }
 
         public string ToolTip { get; set; }
diff --git a/src/settings-ui/Settings.UI/ViewModels/DashboardViewModel.cs b/src/settings-ui/Settings.UI/ViewModels/DashboardViewModel.cs
index e2b0762288..ca5de48f5d 100644
--- a/src/settings-ui/Settings.UI/ViewModels/DashboardViewModel.cs
+++ b/src/settings-ui/Settings.UI/ViewModels/DashboardViewModel.cs
@@ -74,6 +74,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             {
                 Tag = moduleType,
                 Label = resourceLoader.GetString(ModuleHelper.GetModuleLabelResourceName(moduleType)),
+                IsNew = moduleType == ModuleType.ZoomIt,
                 IsEnabled = gpo == GpoRuleConfigured.Enabled || (gpo != GpoRuleConfigured.Disabled && ModuleHelper.GetIsModuleEnabled(generalSettingsConfig, moduleType)),
                 IsLocked = gpo == GpoRuleConfigured.Enabled || gpo == GpoRuleConfigured.Disabled,
                 Icon = ModuleHelper.GetModuleTypeFluentIconName(moduleType),