Repository: microsoft/terminal (language: cpp)

Issue:
Users _still_ have a hard time with the color schemes page
(from discussion)


* Move the Add New button to the top of the schemes page
* When you click on a list item, navigate into the scheme detail page
* Move the delete, set as default buttons into the scheme detail page
* Add New just does the navigation into the scheme detail page of the newly created scheme


Discussion / hints:

Fix patch:
diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.cpp b/src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.cpp
index 160f5a3839b..30fc1018e82 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.cpp
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.cpp
@@ -114,6 +114,22 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         }
     }
 
+    void ColorSchemeViewModel::DeleteConfirmation_Click(const IInspectable& /*sender*/, const Windows::UI::Xaml::RoutedEventArgs& /*e*/)
+    {
+        if (const auto parentPageVM{ _parentPageVM.get() })
+        {
+            return parentPageVM.RequestDeleteCurrentScheme();
+        }
+    }
+
+    void ColorSchemeViewModel::SetAsDefault_Click(const IInspectable& /*sender*/, const Windows::UI::Xaml::RoutedEventArgs& /*e*/)
+    {
+        if (const auto parentPageVM{ _parentPageVM.get() })
+        {
+            return parentPageVM.RequestSetSelectedSchemeAsDefault();
+        }
+    }
+
     Editor::ColorTableEntry ColorSchemeViewModel::ColorEntryAt(uint32_t index)
     {
         if (index < ColorTableDivider)
diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.h b/src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.h
index 84158100c3e..6b31e06343b 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.h
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.h
@@ -36,6 +36,9 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         bool IsDefaultScheme();
         void RefreshIsDefault();
 
+        void DeleteConfirmation_Click(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::RoutedEventArgs& e);
+        void SetAsDefault_Click(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::RoutedEventArgs& e);
+
         // DON'T YOU DARE ADD A `WINRT_CALLBACK(PropertyChanged` TO A CLASS DERIVED FROM ViewModelHelper. Do this instead:
         using ViewModelHelper<ColorSchemeViewModel>::PropertyChanged;
 
diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.idl b/src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.idl
index 8ffa62bbaf7..3247ef125e3 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.idl
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.idl
@@ -24,6 +24,9 @@ namespace Microsoft.Terminal.Settings.Editor
         ColorTableEntry BackgroundColor;
         ColorTableEntry CursorColor;
         ColorTableEntry SelectionBackgroundColor;
+
+        void DeleteConfirmation_Click(IInspectable sender, Windows.UI.Xaml.RoutedEventArgs args);
+        void SetAsDefault_Click(IInspectable sender, Windows.UI.Xaml.RoutedEventArgs args);
     }
 
     [default_interface] runtimeclass ColorTableEntry : Windows.UI.Xaml.Data.INotifyPropertyChanged
diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp b/src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp
index 06a84e2e53b..86bc0f20ef1 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp
@@ -30,9 +30,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
     {
         InitializeComponent();
 
-        Automation::AutomationProperties::SetName(EditButton(), RS_(L"ColorScheme_EditButton/Text"));
         Automation::AutomationProperties::SetName(AddNewButton(), RS_(L"ColorScheme_AddNewButton/Text"));
-        Automation::AutomationProperties::SetName(DeleteButton(), RS_(L"ColorScheme_DeleteButton2/Text"));
     }
 
     void ColorSchemes::OnNavigatedTo(const NavigationEventArgs& e)
@@ -41,44 +39,15 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         _ViewModel.CurrentPage(ColorSchemesSubPage::Base);
     }
 
-    void ColorSchemes::DeleteConfirmation_Click(const IInspectable& /*sender*/, const RoutedEventArgs& /*e*/)
-    {
-        _ViewModel.RequestDeleteCurrentScheme();
-        DeleteButton().Flyout().Hide();
-
-        // GH#11971, part 2. If we delete a scheme, and the next scheme we've
-        // loaded is an inbox one that _can't_ be deleted, then we need to toss
-        // focus to something sensible, rather than letting it fall out to the
-        // tab item.
-        //
-        // When deleting a scheme and the next scheme _is_ deletable, this isn't
-        // an issue, we'll already correctly focus the Delete button.
-        //
-        // However, it seems even more useful for focus to ALWAYS land on the
-        // scheme list view. This forces Narrator to read the name of the
-        // newly selected color scheme, which seemed more useful.
-
-        // For some reason, if we just call ColorSchemeListView().Focus(FocusState::Programmatic),
-        // focus always lands on the _first_ item of the list view, regardless of what the currently
-        // selected item is. So we need to grab the item container and focus that.
-        const auto itemContainer = ColorSchemeListView().ContainerFromIndex(ColorSchemeListView().SelectedIndex());
-        itemContainer.as<ContentControl>().Focus(FocusState::Programmatic);
-    }
-
     void ColorSchemes::AddNew_Click(const IInspectable& /*sender*/, const RoutedEventArgs& /*e*/)
     {
         if (const auto newSchemeVM{ _ViewModel.RequestAddNew() })
         {
             ColorSchemeListView().SelectedItem(newSchemeVM);
-            ColorSchemeListView().ScrollIntoView(newSchemeVM);
+            _ViewModel.RequestEditSelectedScheme();
         }
     }
 
-    void ColorSchemes::Edit_Click(const IInspectable& /*sender*/, const RoutedEventArgs& /*e*/)
-    {
-        _ViewModel.RequestEditSelectedScheme();
-    }
-
     void ColorSchemes::ListView_PreviewKeyDown(const IInspectable& /*sender*/, const winrt::Windows::UI::Xaml::Input::KeyRoutedEventArgs& e)
     {
         if (e.OriginalKey() == winrt::Windows::System::VirtualKey::Enter)
@@ -87,32 +56,5 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
             _ViewModel.RequestEditSelectedScheme();
             e.Handled(true);
         }
-        else if (e.OriginalKey() == winrt::Windows::System::VirtualKey::Delete)
-        {
-            // Treat this as if 'delete' was clicked
-            DeleteConfirmation_Click(nullptr, nullptr);
-            e.Handled(true);
-        }
-    }
-
-    void ColorSchemes::ListView_SelectionChanged(const IInspectable& /*sender*/, const winrt::Windows::UI::Xaml::Controls::SelectionChangedEventArgs& e)
-    {
-        if (const auto addedItems{ e.AddedItems() }; addedItems && addedItems.Size() > 0)
-        {
-            if (const auto selectedScheme{ addedItems.GetAt(0).try_as<Editor::ColorSchemeViewModel>() })
-            {
-                if (selectedScheme.IsInBoxScheme())
-                {
-                    // display disclaimer that this scheme can't be deleted
-                    SelectedSchemeDisclaimer().Text(RS_(L"ColorScheme_DeleteDisclaimerInBox"));
-                    SelectedSchemeDisclaimer().Visibility(Visibility::Visible);
-                }
-                else
-                {
-                    // hide the disclaimer
-                    SelectedSchemeDisclaimer().Visibility(Visibility::Collapsed);
-                }
-            }
-        }
     }
 }
diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemes.h b/src/cascadia/TerminalSettingsEditor/ColorSchemes.h
index 152a0fffea3..e46bf19dfb8 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemes.h
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemes.h
@@ -20,8 +20,6 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         void AddNew_Click(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::RoutedEventArgs& e);
         void ListView_PreviewKeyDown(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::Input::KeyRoutedEventArgs& e);
         void ListView_SelectionChanged(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::Controls::SelectionChangedEventArgs& e);
-        void DeleteConfirmation_Click(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::RoutedEventArgs& e);
-        void Edit_Click(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::RoutedEventArgs& e);
 
         WINRT_PROPERTY(Model::ColorScheme, CurrentColorScheme, nullptr);
         WINRT_OBSERVABLE_PROPERTY(Editor::ColorSchemesPageViewModel, ViewModel, _PropertyChangedHandlers, nullptr);
diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml b/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
index 83e5c3d0651..69c8166b526 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
@@ -36,221 +36,180 @@
         </ResourceDictionary>
     </Page.Resources>
 
-    <ScrollViewer ViewChanging="ViewChanging">
-        <StackPanel Style="{StaticResource SettingsStackStyle}">
+    <Grid Margin="0,0,0,8"
+          RowSpacing="8">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+        <StackPanel Grid.Row="0"
+                    MaxWidth="{StaticResource StandardControlMaxWidth}"
+                    Spacing="8">
             <TextBlock x:Uid="ColorSchemesDisclaimer"
                        Style="{StaticResource DisclaimerStyle}" />
-            <ListView x:Name="ColorSchemeListView"
-                      MaxWidth="{StaticResource StandardControlMaxWidth}"
-                      ItemsSource="{x:Bind ViewModel.AllColorSchemes, Mode=OneWay}"
-                      PreviewKeyDown="ListView_PreviewKeyDown"
-                      SelectedItem="{x:Bind ViewModel.CurrentScheme, Mode=TwoWay}"
-                      SelectionChanged="ListView_SelectionChanged"
-                      SelectionMode="Single">
-                <ListView.ItemTemplate>
-                    <DataTemplate x:DataType="local:ColorSchemeViewModel">
-                        <Grid MaxWidth="1000"
-                              Margin="0,2,0,2"
-                              Style="{StaticResource SchemeGridStyle}">
+
+            <Button x:Name="AddNewButton"
+                    Margin="4,0,0,0"
+                    Click="AddNew_Click"
+                    Style="{StaticResource BrowseButtonStyle}">
+                <StackPanel Orientation="Horizontal">
+                    <FontIcon FontSize="{StaticResource StandardIconSize}"
+                              Glyph="&#xE710;" />
+                    <TextBlock x:Uid="ColorScheme_AddNewButton"
+                               Style="{StaticResource IconButtonTextBlockStyle}" />
+                </StackPanel>
+            </Button>
+        </StackPanel>
+
+        <ListView x:Name="ColorSchemeListView"
+                  Grid.Row="1"
+                  MaxWidth="{StaticResource StandardControlMaxWidth}"
+                  IsItemClickEnabled="True"
+                  ItemClick="{x:Bind ViewModel.SchemeListItemClicked}"
+                  ItemsSource="{x:Bind ViewModel.AllColorSchemes, Mode=OneWay}"
+                  PreviewKeyDown="ListView_PreviewKeyDown"
+                  SelectedItem="{x:Bind ViewModel.CurrentScheme, Mode=TwoWay}"
+                  SelectionMode="Single">
+            <ListView.ItemTemplate>
+                <DataTemplate x:DataType="local:ColorSchemeViewModel">
+                    <Grid MaxWidth="1000"
+                          Margin="0,2,0,2"
+                          Style="{StaticResource SchemeGridStyle}">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto" />
+                            <ColumnDefinition Width="Auto" />
+                        </Grid.ColumnDefinitions>
+                        <!--  Set the height of the inner grid as 48 to be 3/4 of the ListViewItem height  -->
+                        <Grid Grid.Column="0"
+                              Height="48"
+                              Padding="12,11,8,8"
+                              VerticalAlignment="Center"
+                              Background="{x:Bind local:Converters.ColorToBrush(BackgroundColor.Color), Mode=OneWay}"
+                              ColumnSpacing="2"
+                              CornerRadius="4"
+                              RowSpacing="2">
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="Auto" />
                                 <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="Auto" />
                             </Grid.ColumnDefinitions>
-                            <!--  Set the height of the inner grid as 48 to be 3/4 of the ListViewItem height  -->
-                            <Grid Grid.Column="0"
-                                  Height="48"
-                                  Padding="12,11,8,8"
-                                  VerticalAlignment="Center"
-                                  Background="{x:Bind local:Converters.ColorToBrush(BackgroundColor.Color), Mode=OneWay}"
-                                  ColumnSpacing="2"
-                                  CornerRadius="4"
-                                  RowSpacing="2">
-                                <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="Auto" />
-                                </Grid.ColumnDefinitions>
-                                <Grid.RowDefinitions>
-                                    <RowDefinition Height="Auto" />
-                                    <RowDefinition Height="Auto" />
-                                </Grid.RowDefinitions>
-                                <ContentControl Grid.Row="0"
-                                                Grid.Column="0"
-                                                Content="{x:Bind ColorEntryAt(0), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="0"
-                                                Grid.Column="1"
-                                                Content="{x:Bind ColorEntryAt(1), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="0"
-                                                Grid.Column="2"
-                                                Content="{x:Bind ColorEntryAt(2), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="0"
-                                                Grid.Column="3"
-                                                Content="{x:Bind ColorEntryAt(3), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="0"
-                                                Grid.Column="4"
-                                                Content="{x:Bind ColorEntryAt(4), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="0"
-                                                Grid.Column="5"
-                                                Content="{x:Bind ColorEntryAt(5), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="0"
-                                                Grid.Column="6"
-                                                Content="{x:Bind ColorEntryAt(6), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="0"
-                                                Grid.Column="7"
-                                                Content="{x:Bind ColorEntryAt(7), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="1"
-                                                Grid.Column="0"
-                                                Content="{x:Bind ColorEntryAt(8), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="1"
-                                                Grid.Column="1"
-                                                Content="{x:Bind ColorEntryAt(9), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="1"
-                                                Grid.Column="2"
-                                                Content="{x:Bind ColorEntryAt(10), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="1"
-                                                Grid.Column="3"
-                                                Content="{x:Bind ColorEntryAt(11), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="1"
-                                                Grid.Column="4"
-                                                Content="{x:Bind ColorEntryAt(12), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="1"
-                                                Grid.Column="5"
-                                                Content="{x:Bind ColorEntryAt(13), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="1"
-                                                Grid.Column="6"
-                                                Content="{x:Bind ColorEntryAt(14), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="1"
-                                                Grid.Column="7"
-                                                Content="{x:Bind ColorEntryAt(15), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
-                                                IsTabStop="False" />
-                                <TextBlock Grid.RowSpan="2"
-                                           Grid.Column="8"
-                                           Padding="10,0,10,0"
-                                           HorizontalAlignment="Center"
-                                           VerticalAlignment="Center"
-                                           AutomationProperties.AccessibilityView="Raw"
-                                           FontFamily="Cascadia Code"
-                                           Foreground="{x:Bind local:Converters.ColorToBrush(ForegroundColor.Color), Mode=OneWay}"
-                                           Text="{x:Bind Name, Mode=OneWay}" />
-                            </Grid>
-                            <Border Grid.Column="1"
-                                    Margin="10,0,0,0"
-                                    Padding="2,0,2,0"
-                                    HorizontalAlignment="Left"
-                                    VerticalAlignment="Center"
-                                    Background="{ThemeResource SystemAltMediumLowColor}"
-                                    BorderBrush="{ThemeResource SystemControlForegroundBaseMediumBrush}"
-                                    BorderThickness="1"
-                                    CornerRadius="1"
-                                    Visibility="{x:Bind IsDefaultScheme, Mode=OneWay}">
-                                <TextBlock x:Uid="ColorScheme_DefaultTag"
-                                           Grid.Column="1"
-                                           Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
-                            </Border>
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="Auto" />
+                            </Grid.RowDefinitions>
+                            <ContentControl Grid.Row="0"
+                                            Grid.Column="0"
+                                            Content="{x:Bind ColorEntryAt(0), Mode=OneWay}"
+                                            ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                            IsTabStop="False" />
+                            <ContentControl Grid.Row="0"
+                                            Grid.Column="1"
+                                            Content="{x:Bind ColorEntryAt(1), Mode=OneWay}"
+                                            ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                            IsTabStop="False" />
+                            <ContentControl Grid.Row="0"
+                                            Grid.Column="2"
+                                            Content="{x:Bind ColorEntryAt(2), Mode=OneWay}"
+                                            ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                            IsTabStop="False" />
+                            <ContentControl Grid.Row="0"
+                                            Grid.Column="3"
+                                            Content="{x:Bind ColorEntryAt(3), Mode=OneWay}"
+                                            ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                            IsTabStop="False" />
+                            <ContentControl Grid.Row="0"
+                                            Grid.Column="4"
+                                            Content="{x:Bind ColorEntryAt(4), Mode=OneWay}"
+                                            ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                            IsTabStop="False" />
+                            <ContentControl Grid.Row="0"
+                                            Grid.Column="5"
+                                            Content="{x:Bind ColorEntryAt(5), Mode=OneWay}"
+                                            ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                            IsTabStop="False" />
+                            <ContentControl Grid.Row="0"
+                                            Grid.Column="6"
+                                            Content="{x:Bind ColorEntryAt(6), Mode=OneWay}"
+                                            ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                            IsTabStop="False" />
+                            <ContentControl Grid.Row="0"
+                                            Grid.Column="7"
+                                            Content="{x:Bind ColorEntryAt(7), Mode=OneWay}"
+                                            ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                            IsTabStop="False" />
+                            <ContentControl Grid.Row="1"
+                                            Grid.Column="0"
+                                            Content="{x:Bind ColorEntryAt(8), Mode=OneWay}"
+                                            ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                            IsTabStop="False" />
+                            <ContentControl Grid.Row="1"
+                                            Grid.Column="1"
+                                            Content="{x:Bind ColorEntryAt(9), Mode=OneWay}"
+                                            ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                            IsTabStop="False" />
+                            <ContentControl Grid.Row="1"
+                                            Grid.Column="2"
+                                            Content="{x:Bind ColorEntryAt(10), Mode=OneWay}"
+                                            ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                            IsTabStop="False" />
+                            <ContentControl Grid.Row="1"
+                                            Grid.Column="3"
+                                            Content="{x:Bind ColorEntryAt(11), Mode=OneWay}"
+                                            ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                            IsTabStop="False" />
+                            <ContentControl Grid.Row="1"
+                                            Grid.Column="4"
+                                            Content="{x:Bind ColorEntryAt(12), Mode=OneWay}"
+                                            ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                            IsTabStop="False" />
+                            <ContentControl Grid.Row="1"
+                                            Grid.Column="5"
+                                            Content="{x:Bind ColorEntryAt(13), Mode=OneWay}"
+                                            ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                            IsTabStop="False" />
+                            <ContentControl Grid.Row="1"
+                                            Grid.Column="6"
+                                            Content="{x:Bind ColorEntryAt(14), Mode=OneWay}"
+                                            ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                            IsTabStop="False" />
+                            <ContentControl Grid.Row="1"
+                                            Grid.Column="7"
+                                            Content="{x:Bind ColorEntryAt(15), Mode=OneWay}"
+                                            ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                            IsTabStop="False" />
+                            <TextBlock Grid.RowSpan="2"
+                                       Grid.Column="8"
+                                       Padding="10,0,10,0"
+                                       HorizontalAlignment="Center"
+                                       VerticalAlignment="Center"
+                                       AutomationProperties.AccessibilityView="Raw"
+                                       FontFamily="Cascadia Code"
+                                       Foreground="{x:Bind local:Converters.ColorToBrush(ForegroundColor.Color), Mode=OneWay}"
+                                       Text="{x:Bind Name, Mode=OneWay}" />
                         </Grid>
-                    </DataTemplate>
-                </ListView.ItemTemplate>
-            </ListView>
-
-            <StackPanel MaxWidth="{StaticResource StandardControlMaxWidth}"
-                        Margin="0,8,0,0"
-                        Orientation="Horizontal"
-                        XYFocusKeyboardNavigation="Enabled">
-                <Button x:Name="EditButton"
-                        Click="{x:Bind ViewModel.RequestEditSelectedScheme}"
-                        IsEnabled="{x:Bind ViewModel.HasCurrentScheme, Mode=OneWay}"
-                        Style="{StaticResource BrowseButtonStyle}">
-                    <StackPanel Orientation="Horizontal">
-                        <FontIcon FontSize="{StaticResource StandardIconSize}"
-                                  Glyph="&#xE70F;" />
-                        <TextBlock x:Uid="ColorScheme_EditButton"
-                                   Style="{StaticResource IconButtonTextBlockStyle}" />
-                    </StackPanel>
-                </Button>
-
-                <Button x:Name="AddNewButton"
-                        Click="AddNew_Click"
-                        Style="{StaticResource BrowseButtonStyle}">
-                    <StackPanel Orientation="Horizontal">
-                        <FontIcon FontSize="{StaticResource StandardIconSize}"
-                                  Glyph="&#xE710;" />
-                        <TextBlock x:Uid="ColorScheme_AddNewButton"
-                                   Style="{StaticResource IconButtonTextBlockStyle}" />
-                    </StackPanel>
-                </Button>
-
-                <Button x:Name="DeleteButton"
-                        Margin="10,0,0,0"
-                        IsEnabled="{x:Bind ViewModel.CanDeleteCurrentScheme, Mode=OneWay}"
-                        Style="{StaticResource DeleteButtonStyle}">
-                    <Button.Content>
-                        <StackPanel Orientation="Horizontal">
-                            <FontIcon FontSize="{StaticResource StandardIconSize}"
-                                      Glyph="&#xE74D;" />
-                            <TextBlock x:Uid="ColorScheme_DeleteButton2"
-                                       Style="{StaticResource IconButtonTextBlockStyle}" />
-                        </StackPanel>
-                    </Button.Content>
-                    <Button.Flyout>
-                        <Flyout>
-                            <StackPanel>
-                                <TextBlock x:Uid="ColorScheme_DeleteConfirmationMessage"
-                                           Style="{StaticResource CustomFlyoutTextStyle}" />
-                                <Button x:Uid="ColorScheme_DeleteConfirmationButton"
-                                        Click="DeleteConfirmation_Click" />
-                            </StackPanel>
-                        </Flyout>
-                    </Button.Flyout>
-                </Button>
-
-                <Button x:Uid="ColorScheme_SetAsDefaultButton"
-                        Margin="10,0,0,0"
-                        Click="{x:Bind ViewModel.RequestSetSelectedSchemeAsDefault}"
-                        IsEnabled="{x:Bind ViewModel.HasCurrentScheme, Mode=OneWay}"
-                        Style="{StaticResource BrowseButtonStyle}" />
-            </StackPanel>
-
-            <TextBlock x:Name="SelectedSchemeDisclaimer"
-                       Margin="10,8,0,0"
-                       VerticalAlignment="Center"
-                       Style="{StaticResource DisclaimerStyle}" />
-        </StackPanel>
-    </ScrollViewer>
+                        <Border Grid.Column="1"
+                                Margin="10,0,0,0"
+                                Padding="2,0,2,0"
+                                HorizontalAlignment="Left"
+                                VerticalAlignment="Center"
+                                Background="{ThemeResource SystemAltMediumLowColor}"
+                                BorderBrush="{ThemeResource SystemControlForegroundBaseMediumBrush}"
+                                BorderThickness="1"
+                                CornerRadius="1"
+                                Visibility="{x:Bind IsDefaultScheme, Mode=OneWay}">
+                            <TextBlock x:Uid="ColorScheme_DefaultTag"
+                                       Grid.Column="1"
+                                       Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
+                        </Border>
+                    </Grid>
+                </DataTemplate>
+            </ListView.ItemTemplate>
+        </ListView>
+    </Grid>
 </Page>
diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemesPageViewModel.cpp b/src/cascadia/TerminalSettingsEditor/ColorSchemesPageViewModel.cpp
index badc52b4ac3..145de8f9e7e 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemesPageViewModel.cpp
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemesPageViewModel.cpp
@@ -175,6 +175,12 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 
         // This ensures that the JSON is updated with "Campbell", because the color scheme was deleted
         _settings.UpdateColorSchemeReferences(name, L"Campbell");
+
+        // If we're not on this page, switch back to this page
+        if (CurrentPage() != ColorSchemesSubPage::Base)
+        {
+            CurrentPage(ColorSchemesSubPage::Base);
+        }
     }
 
     void ColorSchemesPageViewModel::RequestEditSelectedScheme()
@@ -208,4 +214,13 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         }
         return false;
     }
+
+    void ColorSchemesPageViewModel::SchemeListItemClicked(const IInspectable& /*sender*/, const winrt::Windows::UI::Xaml::Controls::ItemClickEventArgs& e)
+    {
+        if (const auto item = e.ClickedItem())
+        {
+            CurrentScheme(item.try_as<Editor::ColorSchemeViewModel>());
+            RequestEditSelectedScheme();
+        }
+    }
 }
diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemesPageViewModel.h b/src/cascadia/TerminalSettingsEditor/ColorSchemesPageViewModel.h
index c03c976e6ca..a3431ed0b10 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemesPageViewModel.h
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemesPageViewModel.h
@@ -29,6 +29,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 
         bool CanDeleteCurrentScheme() const;
 
+        void SchemeListItemClicked(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::Controls::ItemClickEventArgs& e);
+
         // DON'T YOU DARE ADD A `WINRT_CALLBACK(PropertyChanged` TO A CLASS DERIVED FROM ViewModelHelper. Do this instead:
         using ViewModelHelper<ColorSchemesPageViewModel>::PropertyChanged;
 
diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemesPageViewModel.idl b/src/cascadia/TerminalSettingsEditor/ColorSchemesPageViewModel.idl
index fb2f7918bba..62cd42a89a5 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemesPageViewModel.idl
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemesPageViewModel.idl
@@ -27,5 +27,7 @@ namespace Microsoft.Terminal.Settings.Editor
         Boolean CanDeleteCurrentScheme { get; };
         ColorSchemesSubPage CurrentPage;
         Windows.Foundation.Collections.IObservableVector<ColorSchemeViewModel> AllColorSchemes { get; };
+
+		void SchemeListItemClicked(IInspectable sender, Windows.UI.Xaml.Controls.ItemClickEventArgs args);
     }
 }
diff --git a/src/cascadia/TerminalSettingsEditor/EditColorScheme.cpp b/src/cascadia/TerminalSettingsEditor/EditColorScheme.cpp
index ab7333e0c5c..226aa9f7b46 100644
--- a/src/cascadia/TerminalSettingsEditor/EditColorScheme.cpp
+++ b/src/cascadia/TerminalSettingsEditor/EditColorScheme.cpp
@@ -34,6 +34,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         ToolTipService::SetToolTip(NameBox(), box_value(RS_(L"ColorScheme_Name/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip")));
         Automation::AutomationProperties::SetName(RenameAcceptButton(), RS_(L"RenameAccept/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip"));
         Automation::AutomationProperties::SetName(RenameCancelButton(), RS_(L"RenameCancel/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip"));
+        Automation::AutomationProperties::SetName(SetAsDefaultButton(), RS_(L"ColorScheme_SetAsDefault/Header"));
     }
 
     void EditColorScheme::OnNavigatedTo(const NavigationEventArgs& e)
@@ -45,7 +46,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         if (_ViewModel.IsInBoxScheme())
         {
             // load disclaimer for in-box profiles
-            disclaimer = RS_(L"ColorScheme_RenameDisclaimerInBox");
+            disclaimer = RS_(L"ColorScheme_DeleteButtonDisclaimerInBox/Text");
         }
         RenameContainer().HelpText(disclaimer);
 
diff --git a/src/cascadia/TerminalSettingsEditor/EditColorScheme.xaml b/src/cascadia/TerminalSettingsEditor/EditColorScheme.xaml
index 2292d63998e..50a0c1357bb 100644
--- a/src/cascadia/TerminalSettingsEditor/EditColorScheme.xaml
+++ b/src/cascadia/TerminalSettingsEditor/EditColorScheme.xaml
@@ -415,6 +415,14 @@
                 </Grid>
             </local:SettingContainer>
 
+            <local:SettingContainer x:Name="SetAsDefaultContainer"
+                                    x:Uid="ColorScheme_SetAsDefault">
+                <Button x:Name="SetAsDefaultButton"
+                        x:Uid="ColorScheme_SetAsDefaultButton"
+                        Click="{x:Bind ViewModel.SetAsDefault_Click}"
+                        Style="{StaticResource BrowseButtonStyle}" />
+            </local:SettingContainer>
+
             <local:SettingContainer x:Name="RenameContainer"
                                     x:Uid="ColorScheme_Rename"
                                     IsEnabled="{x:Bind local:Converters.InvertBoolean(ViewModel.IsInBoxScheme), Mode=OneWay}"
@@ -450,6 +458,45 @@
                     </Button>
                 </StackPanel>
             </local:SettingContainer>
+
+            <Grid MaxWidth="1000"
+                  Margin="2,6,0,0"
+                  ColumnSpacing="4">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="*" />
+                </Grid.ColumnDefinitions>
+                <Button x:Name="DeleteButton"
+                        Grid.Column="0"
+                        IsEnabled="{x:Bind local:Converters.InvertBoolean(ViewModel.IsInBoxScheme)}"
+                        Style="{StaticResource DeleteButtonStyle}">
+                    <Button.Content>
+                        <StackPanel Orientation="Horizontal">
+                            <FontIcon FontSize="{StaticResource StandardIconSize}"
+                                      Glyph="&#xE74D;" />
+                            <TextBlock x:Uid="ColorScheme_DeleteButton"
+                                       Style="{StaticResource IconButtonTextBlockStyle}" />
+                        </StackPanel>
+                    </Button.Content>
+                    <Button.Flyout>
+                        <Flyout>
+                            <StackPanel>
+                                <TextBlock x:Uid="ColorScheme_DeleteConfirmationMessage"
+                                           Style="{StaticResource CustomFlyoutTextStyle}" />
+                                <Button x:Uid="ColorScheme_DeleteConfirmationButton"
+                                        Click="{x:Bind ViewModel.DeleteConfirmation_Click}" />
+                            </StackPanel>
+                        </Flyout>
+                    </Button.Flyout>
+                </Button>
+                <TextBlock x:Name="SelectedSchemeDisclaimer"
+                           x:Uid="ColorScheme_DeleteButtonDisclaimerInBox"
+                           Grid.Column="1"
+                           VerticalAlignment="Center"
+                           Style="{StaticResource DisclaimerStyle}"
+                           TextWrapping="Wrap"
+                           Visibility="{x:Bind ViewModel.IsInBoxScheme}" />
+            </Grid>
         </StackPanel>
     </ScrollViewer>
 </Page>
diff --git a/src/cascadia/TerminalSettingsEditor/MainPage.cpp b/src/cascadia/TerminalSettingsEditor/MainPage.cpp
index 19e1504b3ae..6f7256597f4 100644
--- a/src/cascadia/TerminalSettingsEditor/MainPage.cpp
+++ b/src/cascadia/TerminalSettingsEditor/MainPage.cpp
@@ -70,6 +70,10 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
                     const auto crumb = winrt::make<Breadcrumb>(box_value(colorSchemesTag), currentScheme.Name(), BreadcrumbSubPage::ColorSchemes_Edit);
                     _breadcrumbs.Append(crumb);
                 }
+                else if (_colorSchemesPageVM.CurrentPage() == ColorSchemesSubPage::Base)
+                {
+                    _Navigate(winrt::hstring{ colorSchemesTag }, BreadcrumbSubPage::None);
+                }
             }
             else if (settingName == L"CurrentSchemeName")
             {
@@ -410,9 +414,9 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         }
         else if (clickedItemTag == colorSchemesTag)
         {
-            contentFrame().Navigate(xaml_typename<Editor::ColorSchemes>(), _colorSchemesPageVM);
             const auto crumb = winrt::make<Breadcrumb>(box_value(clickedItemTag), RS_(L"Nav_ColorSchemes/Content"), BreadcrumbSubPage::None);
             _breadcrumbs.Append(crumb);
+            contentFrame().Navigate(xaml_typename<Editor::ColorSchemes>(), _colorSchemesPageVM);
 
             if (subPage == BreadcrumbSubPage::ColorSchemes_Edit)
             {
diff --git a/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw b/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw
index e91ba719149..8235686daac 100644
--- a/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw
+++ b/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw
@@ -135,6 +135,14 @@
     <value>Duplicate</value>
     <comment>Button label that duplicates the selected profile and navigates to the duplicate's page.</comment>
   </data>
+  <data name="ColorScheme_SetAsDefault.Header" xml:space="preserve">
+    <value>Set color scheme as default</value>
+    <comment>This is the header for a control that allows the user to set the currently selected color scheme as their default.</comment>
+  </data>
+  <data name="ColorScheme_SetAsDefault.HelpText" xml:space="preserve">
+    <value>Apply this color scheme to all your profiles. This sets this color scheme in your 'Defaults' profile, it can still be overridden in each individual profile.</value>
+    <comment>A description explaining how this control changes the user's default color scheme.</comment>
+  </data>
   <data name="ColorScheme_Rename.Header" xml:space="preserve">
     <value>Rename color scheme</value>
     <comment>This is the header for a control that allows the user to rename the currently selected color scheme.</comment>


Test patch: