From c8486087d85cb04456d067eddaae16b2680e86ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ji=C5=99=C3=AD=20Pol=C3=A1=C5=A1ek?= <me@jiripolasek.com>
Date: Tue, 30 Sep 2025 16:06:48 +0200
Subject: [PATCH] CmdPal: Update visual style of details panel elements
 (#42102)

## Summary of the Pull Request

This PR updates the details panel formatting:

- Hides the empty text block used as a separator when the key is empty.
- Makes separators more subtle by adjusting the brush.
- Reverses the typographical hierarchy of detail key/value items, making
the value dominant and the key more subtle to help users focus on the
content.
- Defines new detail text styles derived from the base WinUI
typographical styles.


| Before | After |
|--------|-------|
| <img width="711" height="1795" alt="image"
src="https://github.com/user-attachments/assets/9155ec88-639a-44c1-a70d-edcd4107945e"
/> | <img width="743" height="1667" alt="image"
src="https://github.com/user-attachments/assets/9d1dc432-82da-4183-b347-74a2f3b96c53"
/> |


<!-- Please review the items on the PR checklist before submitting-->
## PR Checklist

- [x] Closes: #42099
- [x] Closes: #41664
- [ ] **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

<!-- Describe how you validated the behavior. Add automated tests
wherever possible, but list manual validation steps taken as well -->
## Validation Steps Performed
---
 .../Helpers/BindTransformers.cs               |  8 +++
 .../Microsoft.CmdPal.UI/Pages/ShellPage.xaml  | 59 +++++++++++--------
 2 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/src/modules/cmdpal/Microsoft.CmdPal.UI/Helpers/BindTransformers.cs b/src/modules/cmdpal/Microsoft.CmdPal.UI/Helpers/BindTransformers.cs
index 66744b4c99..24d2ef47a6 100644
--- a/src/modules/cmdpal/Microsoft.CmdPal.UI/Helpers/BindTransformers.cs
+++ b/src/modules/cmdpal/Microsoft.CmdPal.UI/Helpers/BindTransformers.cs
@@ -2,9 +2,17 @@
 // 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.UI.Xaml;
+
 namespace Microsoft.CmdPal.UI.Helpers;
 
 internal static class BindTransformers
 {
     public static bool Negate(bool value) => !value;
+
+    public static Visibility EmptyToCollapsed(string? input)
+        => string.IsNullOrEmpty(input) ? Visibility.Collapsed : Visibility.Visible;
+
+    public static Visibility EmptyOrWhitespaceToCollapsed(string? input)
+        => string.IsNullOrWhiteSpace(input) ? Visibility.Collapsed : Visibility.Visible;
 }
diff --git a/src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml b/src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml
index af0eff2181..597072241a 100644
--- a/src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml
+++ b/src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml
@@ -41,6 +41,31 @@
                 FalseValue="Visible"
                 TrueValue="Collapsed" />
 
+            <Style
+                x:Key="DetailKeyTextBlockStyle"
+                BasedOn="{StaticResource CaptionTextBlockStyle}"
+                TargetType="TextBlock">
+                <Setter Property="IsTextSelectionEnabled" Value="True" />
+                <Setter Property="TextWrapping" Value="WrapWholeWords" />
+                <Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />
+            </Style>
+
+            <Style
+                x:Key="SeparatorKeyTextBlockStyle"
+                BasedOn="{StaticResource BodyStrongTextBlockStyle}"
+                TargetType="TextBlock">
+                <Setter Property="IsTextSelectionEnabled" Value="True" />
+                <Setter Property="TextWrapping" Value="WrapWholeWords" />
+            </Style>
+
+            <Style
+                x:Key="DetailValueTextBlockStyle"
+                BasedOn="{StaticResource BodyTextBlockStyle}"
+                TargetType="TextBlock">
+                <Setter Property="IsTextSelectionEnabled" Value="True" />
+                <Setter Property="TextWrapping" Value="WrapWholeWords" />
+            </Style>
+
             <DataTemplate x:Key="TagTemplate" x:DataType="coreViewModels:TagViewModel">
                 <cpcontrols:Tag
                     HorizontalAlignment="Left"
@@ -68,7 +93,7 @@
                                 Margin="0,3,8,0"
                                 SourceKey="{x:Bind Icon, Mode=OneWay}"
                                 SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested}" />
-                            <TextBlock Text="{x:Bind Name}" />
+                            <TextBlock Style="{StaticResource BodyTextBlockStyle}" Text="{x:Bind Name}" />
                         </StackPanel>
                     </Button>
                 </StackPanel>
@@ -76,20 +101,13 @@
 
             <DataTemplate x:Key="DetailsLinkTemplate" x:DataType="coreViewModels:DetailsLinkViewModel">
                 <StackPanel Orientation="Vertical">
+                    <TextBlock Style="{StaticResource DetailKeyTextBlockStyle}" Text="{x:Bind Key, Mode=OneWay}" />
                     <TextBlock
-                        IsTextSelectionEnabled="True"
-                        Text="{x:Bind Key, Mode=OneWay}"
-                        TextWrapping="WrapWholeWords" />
-                    <TextBlock
-                        FontSize="12"
-                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                        IsTextSelectionEnabled="True"
+                        Style="{StaticResource DetailValueTextBlockStyle}"
                         Text="{x:Bind Text, Mode=OneWay}"
-                        TextWrapping="WrapWholeWords"
                         Visibility="{x:Bind IsText, Mode=OneWay}" />
                     <HyperlinkButton
                         Padding="0"
-                        FontSize="12"
                         NavigateUri="{x:Bind Link, Mode=OneWay}"
                         Visibility="{x:Bind IsLink, Mode=OneWay}">
                         <TextBlock Text="{x:Bind Text, Mode=OneWay}" TextWrapping="Wrap" />
@@ -98,10 +116,7 @@
             </DataTemplate>
             <DataTemplate x:Key="DetailsCommandsTemplate" x:DataType="coreViewModels:DetailsCommandsViewModel">
                 <StackPanel Orientation="Vertical" Spacing="4">
-                    <TextBlock
-                        IsTextSelectionEnabled="True"
-                        Text="{x:Bind Key, Mode=OneWay}"
-                        TextWrapping="WrapWholeWords" />
+                    <TextBlock Style="{StaticResource DetailKeyTextBlockStyle}" Text="{x:Bind Key, Mode=OneWay}" />
                     <ItemsControl
                         ItemTemplate="{StaticResource CommandTemplate}"
                         ItemsSource="{x:Bind Commands, Mode=OneWay}"
@@ -111,24 +126,20 @@
             <DataTemplate x:Key="DetailsSeparatorTemplate" x:DataType="coreViewModels:DetailsSeparatorViewModel">
                 <StackPanel Margin="0,8,8,0" Orientation="Vertical">
                     <Border
-                        Margin="8,0,0,0"
-                        BorderBrush="{ThemeResource TextFillColorSecondaryBrush}"
+                        Margin="0,0,0,0"
+                        BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
                         BorderThickness="0,0,0,2">
                         <TextBlock
-                            Margin="-8,0,0,8"
-                            FontWeight="SemiBold"
-                            IsTextSelectionEnabled="True"
+                            Margin="0,0,0,0"
+                            Style="{StaticResource SeparatorKeyTextBlockStyle}"
                             Text="{x:Bind Key, Mode=OneWay}"
-                            TextWrapping="WrapWholeWords" />
+                            Visibility="{x:Bind help:BindTransformers.EmptyOrWhitespaceToCollapsed(Key), FallbackValue=Collapsed}" />
                     </Border>
                 </StackPanel>
             </DataTemplate>
             <DataTemplate x:Key="DetailsTagsTemplate" x:DataType="coreViewModels:DetailsTagsViewModel">
                 <StackPanel Orientation="Vertical" Spacing="4">
-                    <TextBlock
-                        IsTextSelectionEnabled="True"
-                        Text="{x:Bind Key, Mode=OneWay}"
-                        TextWrapping="WrapWholeWords" />
+                    <TextBlock Style="{StaticResource DetailKeyTextBlockStyle}" Text="{x:Bind Key, Mode=OneWay}" />
                     <ItemsControl
                         ItemTemplate="{StaticResource TagTemplate}"
                         ItemsSource="{x:Bind Tags, Mode=OneWay}"