Update AppListItem.cs

src/modules/cmdpal/Core/Microsoft.CmdPal.Core.ViewModels/TagViewModel.cs

@@ -23,6 +23,10 @@ public partial class TagViewModel(ITag _tag, WeakReference<IPageContext> context
 
     public OptionalColor Background { get; private set; }
 
+    public OptionalColor BorderBrushColor { get; private set; }
+
+    public Microsoft.CommandPalette.Extensions.CornerRadius CornerRadius { get; private set; }
+
     public IconInfoViewModel Icon { get; private set; } = new(null);
 
     public override void InitializeProperties()
@@ -36,6 +40,8 @@ public partial class TagViewModel(ITag _tag, WeakReference<IPageContext> context
         Text = model.Text;
         Foreground = model.Foreground;
         Background = model.Background;
+        BorderBrushColor = model.BorderBrushColor;
+        CornerRadius = model.CornerRadius;
         ModelToolTip = model.ToolTip;
         Icon = new(model.Icon);
         Icon.InitializeProperties();
@@ -43,6 +49,8 @@ public partial class TagViewModel(ITag _tag, WeakReference<IPageContext> context
         UpdateProperty(nameof(Text));
         UpdateProperty(nameof(Foreground));
         UpdateProperty(nameof(Background));
+        UpdateProperty(nameof(BorderBrushColor));
+        UpdateProperty(nameof(CornerRadius));
         UpdateProperty(nameof(ToolTip));
         UpdateProperty(nameof(Icon));
     }

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/Tag.xaml

@@ -26,6 +26,7 @@
     </ResourceDictionary.ThemeDictionaries>
     <Thickness x:Key="TagPadding">4,2,4,2</Thickness>
     <Thickness x:Key="TagBorderThickness">1</Thickness>
+    <CornerRadius x:Key="TagCornerRadius">4,4,4,4</CornerRadius>
 
     <local:IconMarginConverter x:Key="IconMarginConverter" />
 
@@ -36,7 +37,7 @@
             <Setter Property="Background" Value="{ThemeResource TagBackground}" />
             <Setter Property="BorderBrush" Value="{ThemeResource TagBorderBrush}" />
             <Setter Property="BorderThickness" Value="{ThemeResource TagBorderThickness}" />
-            <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
+            <Setter Property="CornerRadius" Value="{ThemeResource TagCornerRadius}" />
             <Setter Property="IsTabStop" Value="False" />
             <Setter Property="HorizontalAlignment" Value="Center" />
             <Setter Property="VerticalAlignment" Value="Center" />

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/Tag.xaml.cs

@@ -29,6 +29,18 @@ public partial class Tag : Control
         set => SetValue(ForegroundColorProperty, value);
     }
 
+    public OptionalColor? BorderBrushColor
+    {
+        get => (OptionalColor?)GetValue(BorderBrushColorProperty);
+        set => SetValue(BorderBrushColorProperty, value);
+    }
+
+    public Microsoft.CommandPalette.Extensions.CornerRadius? CornerRadiusValue
+    {
+        get => (Microsoft.CommandPalette.Extensions.CornerRadius?)GetValue(CornerRadiusValueProperty);
+        set => SetValue(CornerRadiusValueProperty, value);
+    }
+
     public bool HasIcon => Icon?.HasIcon(this.ActualTheme == ElementTheme.Light) ?? false;
 
     public IconInfoViewModel? Icon
@@ -49,12 +61,20 @@ public partial class Tag : Control
 
     private static Brush? OriginalBorder => Application.Current.Resources["TagBorderBrush"] as Brush;
 
+    private static CornerRadius? OriginalCornerRadius => Application.Current.Resources["TagCornerRadius"] as CornerRadius?;
+
     public static readonly DependencyProperty ForegroundColorProperty =
         DependencyProperty.Register(nameof(ForegroundColor), typeof(OptionalColor), typeof(Tag), new PropertyMetadata(null, OnForegroundColorPropertyChanged));
 
     public static readonly DependencyProperty BackgroundColorProperty =
         DependencyProperty.Register(nameof(BackgroundColor), typeof(OptionalColor), typeof(Tag), new PropertyMetadata(null, OnBackgroundColorPropertyChanged));
 
+    public static readonly DependencyProperty BorderBrushColorProperty =
+        DependencyProperty.Register(nameof(BorderBrushColor), typeof(OptionalColor), typeof(Tag), new PropertyMetadata(null, OnBorderBrushColorPropertyChanged));
+
+    public static readonly DependencyProperty CornerRadiusValueProperty =
+        DependencyProperty.Register(nameof(CornerRadiusValue), typeof(Microsoft.CommandPalette.Extensions.CornerRadius?), typeof(Tag), new PropertyMetadata(null, OnCornerRadiusValuePropertyChanged));
+
     public static readonly DependencyProperty IconProperty =
         DependencyProperty.Register(nameof(Icon), typeof(IconInfoViewModel), typeof(Tag), new PropertyMetadata(null));
 
@@ -88,22 +108,10 @@ public partial class Tag : Control
             OptionalColorBrushCacheProvider.Convert(tag.ForegroundColor.Value) is SolidColorBrush brush)
         {
             tag.Foreground = brush;
-
-            // If we have a BG color, then don't apply a border.
-            if (tag.BackgroundColor is OptionalColor bg && bg.HasValue)
-            {
-                tag.BorderBrush = OriginalBorder;
-            }
-            else
-            {
-                // Otherwise (no background), use the FG as the border
-                tag.BorderBrush = brush;
-            }
         }
         else
         {
             tag.Foreground = OriginalFg;
-            tag.BorderBrush = OriginalBorder;
         }
     }
 
@@ -118,35 +126,48 @@ public partial class Tag : Control
             OptionalColorBrushCacheProvider.Convert(tag.BackgroundColor.Value) is SolidColorBrush brush)
         {
             tag.Background = brush;
-
-            // Since we have a BG here, we never want a border.
-            tag.BorderBrush = OriginalBorder;
-
-            // If we have a FG color, then don't apply a border.
-            if (tag.ForegroundColor is OptionalColor fg && fg.HasValue)
-            {
-                tag.BorderBrush = OriginalBorder;
-            }
-            else
-            {
-                // Otherwise (no foreground), use the FG as the border
-                tag.BorderBrush = brush;
-            }
         }
         else
         {
-            // No BG color here.
             tag.Background = OriginalBg;
+        }
+    }
 
-            // If we have a FG color, then don't apply a border.
-            if (tag.ForegroundColor is OptionalColor fg && fg.HasValue)
+    private static void OnBorderBrushColorPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        if (d is not Tag tag)
+        {
+            return;
+        }
+
+        if (tag.BorderBrushColor is not null &&
+            OptionalColorBrushCacheProvider.Convert(tag.BorderBrushColor.Value) is SolidColorBrush brush)
+        {
+            tag.BorderBrush = brush;
+        }
+        else
+        {
+            tag.BorderBrush = OriginalBorder;
+        }
+    }
+
+    private static void OnCornerRadiusValuePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        if (d is not Tag tag)
+        {
+            return;
+        }
+
+        if (tag.CornerRadiusValue is Microsoft.CommandPalette.Extensions.CornerRadius extensionRadius)
+        {
+            tag.CornerRadius = new CornerRadius(extensionRadius.TopLeft, extensionRadius.TopRight, extensionRadius.BottomRight, extensionRadius.BottomLeft);
+        }
+        else
+        {
+            // Use TagCornerRadius from theme resources
+            if (OriginalCornerRadius is CornerRadius defaultRadius)
             {
-                tag.BorderBrush = tag.Foreground;
-            }
-            else
-            {
-                // Otherwise (no foreground), use the FG as the border
-                tag.BorderBrush = OriginalBorder;
+                tag.CornerRadius = defaultRadius;
             }
         }
     }

src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml

@@ -37,6 +37,8 @@
             <cpcontrols:Tag
                 AutomationProperties.Name="{x:Bind Text, Mode=OneWay}"
                 BackgroundColor="{x:Bind Background, Mode=OneWay}"
+                BorderBrushColor="{x:Bind BorderBrushColor, Mode=OneWay}"
+                CornerRadiusValue="{x:Bind CornerRadius, Mode=OneWay}"
                 FontSize="12"
                 ForegroundColor="{x:Bind Foreground, Mode=OneWay}"
                 Icon="{x:Bind Icon, Mode=OneWay}"

src/modules/cmdpal/ext/Microsoft.CmdPal.Ext.Apps/AppListItem.cs

@@ -15,8 +15,6 @@ namespace Microsoft.CmdPal.Ext.Apps.Programs;
 
 public sealed partial class AppListItem : ListItem
 {
-    private static readonly Tag _appTag = new("App");
-
     private readonly AppCommand _appCommand;
     private readonly AppItem _app;
     private readonly Lazy<Details> _details;
@@ -48,7 +46,6 @@ public sealed partial class AppListItem : ListItem
         _app = app;
         Title = app.Name;
         Subtitle = app.Subtitle;
-        Tags = [_appTag];
         Icon = Icons.GenericAppIcon;
 
         MoreCommands = AddPinCommands(_app.Commands!, isPinned);

src/modules/cmdpal/extensionsdk/Microsoft.CommandPalette.Extensions.Toolkit/Tag.cs

@@ -8,6 +8,8 @@ public partial class Tag : BaseObservable, ITag
 {
     private OptionalColor _foreground;
     private OptionalColor _background;
+    private OptionalColor _borderBrushColor;
+    private double _cornerRadius;
     private string _text = string.Empty;
 
     public virtual OptionalColor Foreground
@@ -64,6 +66,26 @@ public partial class Tag : BaseObservable, ITag
 
 = string.Empty;
 
+    public virtual OptionalColor BorderBrushColor
+    {
+        get => _borderBrushColor;
+        set
+        {
+            _borderBrushColor = value;
+            OnPropertyChanged(nameof(BorderBrushColor));
+        }
+    }
+
+    public virtual double CornerRadius
+    {
+        get => _cornerRadius;
+        set
+        {
+            _cornerRadius = value;
+            OnPropertyChanged(nameof(CornerRadius));
+        }
+    }
+
     public Tag()
     {
     }

src/modules/cmdpal/extensionsdk/Microsoft.CommandPalette.Extensions/Microsoft.CommandPalette.Extensions.idl

@@ -148,12 +148,22 @@ namespace Microsoft.CommandPalette.Extensions
         Microsoft.CommandPalette.Extensions.Color Color;
     };
     
+    struct CornerRadius
+    {
+        Double TopLeft;
+        Double TopRight;
+        Double BottomRight;
+        Double BottomLeft;
+    };
+    
     [contract(Microsoft.CommandPalette.Extensions.ExtensionsContract, 1)]
     interface ITag {
         IIconInfo Icon { get; };
         String Text { get; };
         OptionalColor Foreground { get; };
         OptionalColor Background { get; };
+        OptionalColor BorderBrushColor { get; };
+        Microsoft.CommandPalette.Extensions.CornerRadius CornerRadius { get; };
         String ToolTip { get; };
     };