[CmdPal] Introduce Small, Medium, and Large sizing options for Details (#43956)

<!-- Enter a brief description/summary of your PR here. What does it
fix/what does it change/how was it tested (even manually, if necessary)?
-->
## Summary of the Pull Request
This PR introduces 3 new sizing options to the Details Panel in the
Extensions API.
- `Small` (Default)
- `Medium`
- `Large`
<!-- Please review the items on the PR checklist before submitting-->
## PR Checklist

- [x] Closes: #43251
<!-- - [ ] Closes: #yyy (add separate lines for additional resolved
issues) -->
- [ ] **Communication:** I've discussed this with core contributors
already. If the work hasn't been agreed, this work might be rejected
- [ ] **Tests:** Added/updated and all pass
- [ ] **Localization:** All end-user-facing strings can be localized
- [ ] **Dev docs:** Added/updated
- [ ] **New binaries:** Added on the required places
- [ ] [JSON for
signing](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ESRPSigning_core.json)
for new binaries
- [ ] [WXS for
installer](https://github.com/microsoft/PowerToys/blob/main/installer/PowerToysSetup/Product.wxs)
for new binaries and localization folder
- [ ] [YML for CI
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ci/templates/build-powertoys-steps.yml)
for new test projects
- [ ] [YML for signed
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/release.yml)
- [ ] **Documentation updated:** If checked, please file a pull request
on [our docs
repo](https://github.com/MicrosoftDocs/windows-uwp/tree/docs/hub/powertoys)
and link it here: #xxx

<!-- Provide a more detailed description of the PR, other things fixed,
or any additional comments/features here -->
## Detailed Description of the Pull Request / Additional comments

Here's how it looks like:
```csharp
new ListItem(new NoOpCommand())
{
    Title = "Details on ListItems (Medium)",
    Details = new Details()
    {
        Title = "This item has medium details size",
        Body = "Each of these items can have a `Body` formatted with **Markdown**",
        Size = ContentSize.Medium,
    },
},
```

### Moving Pictures


![DetailsSize](https://github.com/user-attachments/assets/ae11b767-ecba-4b39-bd81-3e77eec93ed0)


<!-- Describe how you validated the behavior. Add automated tests
wherever possible, but list manual validation steps taken as well -->
## Validation Steps Performed

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

@@ -19,6 +19,8 @@ public partial class DetailsViewModel(IDetails _details, WeakReference<IPageCont
 
     public string Body { get; private set; } = string.Empty;
 
+    public ContentSize? Size { get; private set; } = ContentSize.Small;
+
     // Metadata is an array of IDetailsElement,
     //   where IDetailsElement = {IDetailsTags, IDetailsLink, IDetailsSeparator}
     public List<DetailsElementViewModel> Metadata { get; private set; } = [];
@@ -40,6 +42,21 @@ public partial class DetailsViewModel(IDetails _details, WeakReference<IPageCont
         UpdateProperty(nameof(Body));
         UpdateProperty(nameof(HeroImage));
 
+        if (model is IExtendedAttributesProvider provider)
+        {
+            if (provider.GetProperties()?.TryGetValue("Size", out var rawValue) == true)
+            {
+                if (rawValue is int sizeAsInt)
+                {
+                    Size = (ContentSize)sizeAsInt;
+                }
+            }
+        }
+
+        Size ??= ContentSize.Small;
+
+        UpdateProperty(nameof(Size));
+
         var meta = model.Metadata;
         if (meta is not null)
         {

src/modules/cmdpal/Microsoft.CmdPal.UI/Converters/DetailsSizeToGridLengthConverter.cs

@@ -0,0 +1,39 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.CommandPalette.Extensions;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Data;
+
+namespace Microsoft.CmdPal.UI;
+
+public partial class DetailsSizeToGridLengthConverter : IValueConverter
+{
+    public object Convert(object value, Type targetType, object parameter, string language)
+    {
+        if (value is ContentSize size)
+        {
+            // This converter calculates the Star width for the LIST.
+            //
+            // The input 'size' (ContentSize) represents the TARGET WIDTH desired for the DETAILS PANEL.
+            //
+            // To ensure the Details Panel achieves its target size (e.g. ContentSize.Large),
+            // we must shrink the List and let the Details fill the available space.
+            // (e.g., A larger target size for Details results in a smaller Star value for the List).
+            var starValue = size switch
+            {
+                ContentSize.Small => 3.0,
+                ContentSize.Medium => 2.0,
+                ContentSize.Large => 1.0,
+                _ => 3.0,
+            };
+
+            return new GridLength(starValue, GridUnitType.Star);
+        }
+
+        return new GridLength(3.0, GridUnitType.Star);
+    }
+
+    public object ConvertBack(object value, Type targetType, object parameter, string language) => throw new NotImplementedException();
+}

src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml

@@ -26,6 +26,7 @@
                 EmptyValue="Collapsed"
                 NotEmptyValue="Visible" />
 
+            <cmdpalUI:DetailsSizeToGridLengthConverter x:Key="SizeToWidthConverter" />
             <cmdpalUI:MessageStateToSeverityConverter x:Key="MessageStateToSeverityConverter" />
 
             <cmdpalUI:DetailsDataTemplateSelector
@@ -370,7 +371,7 @@
             <Grid x:Name="ContentGrid" Grid.Row="1">
 
                 <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="3*" />
+                    <ColumnDefinition Width="{x:Bind ViewModel.Details.Size, Mode=OneWay, Converter={StaticResource SizeToWidthConverter}}" />
                     <ColumnDefinition x:Name="DetailsColumn" Width="Auto" />
                 </Grid.ColumnDefinitions>
 

src/modules/cmdpal/ext/SamplePagesExtension/Pages/SampleListPageWithDetails.cs

@@ -5,7 +5,6 @@
 using System;
 using Microsoft.CommandPalette.Extensions;
 using Microsoft.CommandPalette.Extensions.Toolkit;
-using Microsoft.UI.Xaml;
 
 namespace SamplePagesExtension;
 
@@ -23,14 +22,34 @@ internal sealed partial class SampleListPageWithDetails : ListPage
         return [
             new ListItem(new NoOpCommand())
             {
-                Title = "This page demonstrates Details on ListItems",
+                Title = "Details on ListItems (Small)",
                 Details = new Details()
                 {
-                    Title = "List Item 1",
+                    Title = "This item has default details size",
                     Body = "Each of these items can have a `Body` formatted with **Markdown**",
                 },
             },
             new ListItem(new NoOpCommand())
+            {
+                Title = "Details on ListItems (Medium)",
+                Details = new Details()
+                {
+                    Title = "This item has medium details size",
+                    Body = "Each of these items can have a `Body` formatted with **Markdown**",
+                    Size = ContentSize.Medium,
+                },
+            },
+            new ListItem(new NoOpCommand())
+            {
+                Title = "Details on ListItems (Large)",
+                Details = new Details()
+                {
+                    Title = "This item has large details size",
+                    Body = "Each of these items can have a `Body` formatted with **Markdown**",
+                    Size = ContentSize.Large,
+                },
+            },
+            new ListItem(new NoOpCommand())
             {
                 Title = "This one has a subtitle too",
                 Subtitle = "Example Subtitle",
@@ -70,11 +89,13 @@ internal sealed partial class SampleListPageWithDetails : ListPage
             new ListItem(new NoOpCommand())
             {
                 Title = "This one has metadata",
+                Subtitle = "And Large Details panel",
                 Tags = [],
                 Details = new Details()
                 {
                     Title = "Metadata Example",
                     Body = "Each of the sections below is some sample metadata",
+                    Size = ContentSize.Large,
                     Metadata = [
                         new DetailsElement()
                         {

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

@@ -1,10 +1,11 @@
 // Copyright (c) Microsoft Corporation
 // The Microsoft Corporation licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
+using Windows.Foundation.Collections;
 
 namespace Microsoft.CommandPalette.Extensions.Toolkit;
 
-public partial class Details : BaseObservable, IDetails
+public partial class Details : BaseObservable, IDetails, IExtendedAttributesProvider
 {
     public virtual IIconInfo HeroImage
     {
@@ -53,4 +54,21 @@ public partial class Details : BaseObservable, IDetails
     }
 
 = [];
+
+    public virtual ContentSize Size
+    {
+        get;
+        set
+        {
+            field = value;
+            OnPropertyChanged(nameof(Size));
+        }
+    }
+
+= ContentSize.Small;
+
+    public IDictionary<string, object>? GetProperties() => new ValueSet()
+    {
+        { "Size", (int)Size },
+    };
 }

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

@@ -160,6 +160,15 @@ namespace Microsoft.CommandPalette.Extensions
     [uuid("6a6dd345-37a3-4a1e-914d-4f658a4d583d")]
     [contract(Microsoft.CommandPalette.Extensions.ExtensionsContract, 1)]
     interface IDetailsData {}
+
+    [contract(Microsoft.CommandPalette.Extensions.ExtensionsContract, 1)]
+    enum ContentSize
+    {
+        Small = 0,
+        Medium = 1,
+        Large = 2,
+    };
+
     [contract(Microsoft.CommandPalette.Extensions.ExtensionsContract, 1)]
     interface IDetailsElement {
         String Key { get; };