Add New Tab Menu Customization to Settings UI

.github/actions/spelling/allow/allow.txt

@@ -54,6 +54,7 @@ Powerline
 ptys
 pwn
 pwshw
+QOL
 qof
 qps
 quickfix

src/cascadia/TerminalSettingsEditor/CommonResources.xaml

@@ -67,6 +67,7 @@
     <Thickness x:Key="StandardControlMargin">0,24,0,0</Thickness>
     <x:Double x:Key="StandardBoxMinWidth">250</x:Double>
     <x:Double x:Key="StandardControlMaxWidth">1000</x:Double>
+    <Thickness x:Key="SettingStackMargin">13,0,13,48</Thickness>
 
     <!--
         This is for styling the entire items control used on the
@@ -80,13 +81,13 @@
     <!--  Used to stack a group of settings  -->
     <Style x:Key="SettingsStackStyle"
            TargetType="StackPanel">
-        <Setter Property="Margin" Value="13,0,13,48" />
+        <Setter Property="Margin" Value="{StaticResource SettingStackMargin}" />
     </Style>
 
     <!--  Used to stack a group of settings inside a pivot  -->
     <Style x:Key="PivotStackStyle"
            TargetType="StackPanel">
-        <Setter Property="Margin" Value="0,0,13,48" />
+        <Setter Property="Margin" Value="{StaticResource SettingStackMargin}" />
     </Style>
 
     <!--  Combo Box  -->
@@ -255,6 +256,17 @@
         </Setter>
     </Style>
 
+    <Style x:Key="ExtraSmallButtonStyle"
+           BasedOn="{StaticResource BrowseButtonStyle}"
+           TargetType="Button">
+        <Setter Property="Height" Value="25" />
+        <Setter Property="Width" Value="25" />
+        <Setter Property="Padding" Value="0" />
+        <Setter Property="Margin" Value="0" />
+        <Setter Property="MinHeight" Value="0" />
+        <Setter Property="MinWidth" Value="0" />
+    </Style>
+
     <Style x:Key="SmallButtonStyle"
            BasedOn="{StaticResource BrowseButtonStyle}"
            TargetType="Button">
@@ -288,6 +300,17 @@
         <Setter Property="Padding" Value="5" />
     </Style>
 
+    <Style x:Key="DeleteExtraSmallButtonStyle"
+           BasedOn="{StaticResource DeleteButtonStyle}"
+           TargetType="Button">
+        <Setter Property="Height" Value="25" />
+        <Setter Property="Width" Value="25" />
+        <Setter Property="Padding" Value="0" />
+        <Setter Property="Margin" Value="0" />
+        <Setter Property="MinHeight" Value="0" />
+        <Setter Property="MinWidth" Value="0" />
+    </Style>
+
     <Style x:Key="IconButtonTextBlockStyle"
            TargetType="TextBlock">
         <Setter Property="Margin" Value="10,0,0,0" />

src/cascadia/TerminalSettingsEditor/MainPage.cpp

@@ -17,6 +17,7 @@
 #include "AddProfile.h"
 #include "InteractionViewModel.h"
 #include "LaunchViewModel.h"
+#include "NewTabMenuViewModel.h"
 #include "..\types\inc\utils.hpp"
 #include <..\WinRTUtils\inc\Utils.h>
 
@@ -42,6 +43,7 @@
 static const std::wstring_view renderingTag{ L"Rendering_Nav" };
 static const std::wstring_view compatibilityTag{ L"Compatibility_Nav" };
 static const std::wstring_view actionsTag{ L"Actions_Nav" };
+static const std::wstring_view newTabMenuTag{ L"NewTabMenu_Nav" };
 static const std::wstring_view globalProfileTag{ L"GlobalProfile_Nav" };
 static const std::wstring_view addProfileTag{ L"AddProfile" };
 static const std::wstring_view colorSchemesTag{ L"ColorSchemes_Nav" };
@@ -61,6 +63,28 @@
         InitializeComponent();
         _UpdateBackgroundForMica();
 
+        _newTabMenuPageVM = winrt::make<NewTabMenuViewModel>(_settingsClone);
+        _ntmViewModelChangedRevoker = _newTabMenuPageVM.PropertyChanged(winrt::auto_revoke, [this](auto&&, const PropertyChangedEventArgs& args) {
+            const auto settingName{ args.PropertyName() };
+            if (settingName == L"CurrentFolder")
+            {
+                if (const auto& currentFolder = _newTabMenuPageVM.CurrentFolder())
+                {
+                    const auto crumb = winrt::make<Breadcrumb>(box_value(currentFolder), currentFolder.Name(), BreadcrumbSubPage::NewTabMenu_Folder);
+                    _breadcrumbs.Append(crumb);
+                    SettingsMainPage_ScrollViewer().ScrollToVerticalOffset(0);
+                }
+                else
+                {
+                    // If we don't have a current folder, we're at the root of the NTM
+                    _breadcrumbs.Clear();
+                    const auto crumb = winrt::make<Breadcrumb>(box_value(newTabMenuTag), RS_(L"Nav_NewTabMenu/Content"), BreadcrumbSubPage::None);
+                    _breadcrumbs.Append(crumb);
+                }
+                contentFrame().Navigate(xaml_typename<Editor::NewTabMenu>(), _newTabMenuPageVM);
+            }
+        });
+
         _colorSchemesPageVM = winrt::make<ColorSchemesPageViewModel>(_settingsClone);
         _colorSchemesPageViewModelChangedRevoker = _colorSchemesPageVM.PropertyChanged(winrt::auto_revoke, [=](auto&&, const PropertyChangedEventArgs& args) {
             const auto settingName{ args.PropertyName() };
@@ -136,12 +160,13 @@
         _InitializeProfilesList();
         // Update the Nav State with the new version of the settings
         _colorSchemesPageVM.UpdateSettings(_settingsClone);
+        _newTabMenuPageVM.UpdateSettings(_settingsClone);
 
         // We'll update the profile in the _profilesNavState whenever we actually navigate to one
 
         // now that the menuItems are repopulated,
         // refresh the current page using the breadcrumb data we collected before the refresh
-        if (const auto& crumb{ lastBreadcrumb.try_as<Breadcrumb>() })
+        if (const auto& crumb{ lastBreadcrumb.try_as<Breadcrumb>() }; crumb && crumb->Tag())
         {
             for (const auto& item : _menuItemSource)
             {
@@ -161,6 +186,17 @@
                                     return;
                                 }
                             }
+                            else if (const auto& breadcrumbFolderEntry{ crumb->Tag().try_as<Editor::FolderEntryViewModel>() })
+                            {
+                                if (stringTag == newTabMenuTag)
+                                {
+                                    // navigate to the NewTabMenu page,
+                                    // _Navigate() will handle trying to find the right subpage
+                                    SettingsNav().SelectedItem(item);
+                                    _Navigate(breadcrumbFolderEntry, BreadcrumbSubPage::NewTabMenu_Folder);
+                                    return;
+                                }
+                            }
                         }
                         else if (const auto& profileTag{ tag.try_as<ProfileViewModel>() })
                         {
@@ -393,6 +429,22 @@
             const auto crumb = winrt::make<Breadcrumb>(box_value(clickedItemTag), RS_(L"Nav_Actions/Content"), BreadcrumbSubPage::None);
             _breadcrumbs.Append(crumb);
         }
+        else if (clickedItemTag == newTabMenuTag)
+        {
+            if (_newTabMenuPageVM.CurrentFolder())
+            {
+                // Setting CurrentFolder triggers the PropertyChanged event,
+                // which will navigate to the correct page and update the breadcrumbs appropriately
+                _newTabMenuPageVM.CurrentFolder(nullptr);
+            }
+            else
+            {
+                // Navigate to the NewTabMenu page
+                contentFrame().Navigate(xaml_typename<Editor::NewTabMenu>(), _newTabMenuPageVM);
+                const auto crumb = winrt::make<Breadcrumb>(box_value(clickedItemTag), RS_(L"Nav_NewTabMenu/Content"), BreadcrumbSubPage::None);
+                _breadcrumbs.Append(crumb);
+            }
+        }
         else if (clickedItemTag == globalProfileTag)
         {
             auto profileVM{ _viewModelForProfile(_settingsClone.ProfileDefaults(), _settingsClone) };
@@ -481,6 +533,39 @@
         }
     }
 
+    void MainPage::_Navigate(const Editor::NewTabMenuEntryViewModel& ntmEntryVM, BreadcrumbSubPage subPage)
+    {
+        _PreNavigateHelper();
+
+        contentFrame().Navigate(xaml_typename<Editor::NewTabMenu>(), _newTabMenuPageVM);
+        const auto crumb = winrt::make<Breadcrumb>(box_value(newTabMenuTag), RS_(L"Nav_NewTabMenu/Content"), BreadcrumbSubPage::None);
+        _breadcrumbs.Append(crumb);
+
+        if (subPage == BreadcrumbSubPage::None)
+        {
+            _newTabMenuPageVM.CurrentFolder(nullptr);
+        }
+        else if (const auto& folderEntryVM = ntmEntryVM.try_as<Editor::FolderEntryViewModel>(); subPage == BreadcrumbSubPage::NewTabMenu_Folder && folderEntryVM)
+        {
+            // The given ntmEntryVM doesn't exist anymore since the whole tree had to be recreated.
+            // Instead, let's look for a match by name and navigate to it.
+            if (const auto& folderPath = _newTabMenuPageVM.FindFolderPathByName(folderEntryVM.Name()); folderPath.Size() > 0)
+            {
+                for (const auto& step : folderPath)
+                {
+                    // Take advantage of the PropertyChanged event to navigate
+                    // to the correct folder and build the breadcrumbs as we go
+                    _newTabMenuPageVM.CurrentFolder(step);
+                }
+            }
+            else
+            {
+                // If we couldn't find a reasonable match, just go back to the root
+                _newTabMenuPageVM.CurrentFolder(nullptr);
+            }
+        }
+    }
+
     void MainPage::OpenJsonTapped(const IInspectable& /*sender*/, const Windows::UI::Xaml::Input::TappedRoutedEventArgs& /*args*/)
     {
         const auto window = CoreWindow::GetForCurrentThread();
@@ -523,6 +608,10 @@
             {
                 _Navigate(*profileViewModel, subPage);
             }
+            else if (const auto ntmEntryViewModel = tag.try_as<NewTabMenuEntryViewModel>())
+            {
+                _Navigate(*ntmEntryViewModel, subPage);
+            }
             else
             {
                 _Navigate(tag.as<hstring>(), subPage);

src/cascadia/TerminalSettingsEditor/MainPage.h

@@ -69,14 +69,17 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         void _PreNavigateHelper();
         void _Navigate(hstring clickedItemTag, BreadcrumbSubPage subPage);
         void _Navigate(const Editor::ProfileViewModel& profile, BreadcrumbSubPage subPage);
+        void _Navigate(const Editor::NewTabMenuEntryViewModel& ntmEntryVM, BreadcrumbSubPage subPage);
 
         void _UpdateBackgroundForMica();
         void _MoveXamlParsedNavItemsIntoItemSource();
 
         winrt::Microsoft::Terminal::Settings::Editor::ColorSchemesPageViewModel _colorSchemesPageVM{ nullptr };
+        winrt::Microsoft::Terminal::Settings::Editor::NewTabMenuViewModel _newTabMenuPageVM{ nullptr };
 
         Windows::UI::Xaml::Data::INotifyPropertyChanged::PropertyChanged_revoker _profileViewModelChangedRevoker;
         Windows::UI::Xaml::Data::INotifyPropertyChanged::PropertyChanged_revoker _colorSchemesPageViewModelChangedRevoker;
+        Windows::UI::Xaml::Data::INotifyPropertyChanged::PropertyChanged_revoker _ntmViewModelChangedRevoker;
     };
 }
 

src/cascadia/TerminalSettingsEditor/MainPage.idl

@@ -19,7 +19,8 @@ namespace Microsoft.Terminal.Settings.Editor
         Profile_Appearance,
         Profile_Terminal,
         Profile_Advanced,
-        ColorSchemes_Edit
+        ColorSchemes_Edit,
+        NewTabMenu_Folder
     };
 
     runtimeclass Breadcrumb : Windows.Foundation.IStringable

src/cascadia/TerminalSettingsEditor/MainPage.xaml

@@ -149,6 +149,13 @@
                 </muxc:NavigationViewItem.Icon>
             </muxc:NavigationViewItem>
 
+            <muxc:NavigationViewItem x:Uid="Nav_NewTabMenu"
+                                     Tag="NewTabMenu_Nav">
+                <muxc:NavigationViewItem.Icon>
+                    <FontIcon Glyph="&#xE71d;" />
+                </muxc:NavigationViewItem.Icon>
+            </muxc:NavigationViewItem>
+
             <muxc:NavigationViewItemHeader x:Uid="Nav_Profiles" />
 
             <muxc:NavigationViewItem x:Name="BaseLayerMenuItem"

src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj

@@ -73,6 +73,9 @@
     <ClInclude Include="Launch.h">
       <DependentUpon>Launch.xaml</DependentUpon>
     </ClInclude>
+    <ClInclude Include="NewTabMenu.h">
+      <DependentUpon>NewTabMenu.xaml</DependentUpon>
+    </ClInclude>
     <ClInclude Include="pch.h" />
     <ClInclude Include="MainPage.h">
       <DependentUpon>MainPage.xaml</DependentUpon>
@@ -109,6 +112,10 @@
       <DependentUpon>LaunchViewModel.idl</DependentUpon>
       <SubType>Code</SubType>
     </ClInclude>
+    <ClInclude Include="NewTabMenuViewModel.h">
+      <DependentUpon>NewTabMenuViewModel.idl</DependentUpon>
+      <SubType>Code</SubType>
+    </ClInclude>
     <ClInclude Include="Profiles_Base.h">
       <DependentUpon>Profiles_Base.xaml</DependentUpon>
       <SubType>Code</SubType>
@@ -170,6 +177,9 @@
     <Page Include="Launch.xaml">
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="NewTabMenu.xaml">
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="MainPage.xaml">
       <SubType>Designer</SubType>
     </Page>
@@ -226,6 +236,9 @@
     <ClCompile Include="Launch.cpp">
       <DependentUpon>Launch.xaml</DependentUpon>
     </ClCompile>
+    <ClCompile Include="NewTabMenu.cpp">
+      <DependentUpon>NewTabMenu.xaml</DependentUpon>
+    </ClCompile>
     <ClCompile Include="pch.cpp">
       <PrecompiledHeader>Create</PrecompiledHeader>
     </ClCompile>
@@ -265,6 +278,10 @@
       <DependentUpon>LaunchViewModel.idl</DependentUpon>
       <SubType>Code</SubType>
     </ClCompile>
+    <ClCompile Include="NewTabMenuViewModel.cpp">
+      <DependentUpon>NewTabMenuViewModel.idl</DependentUpon>
+      <SubType>Code</SubType>
+    </ClCompile>
     <ClCompile Include="Profiles_Base.cpp">
       <DependentUpon>Profiles_Base.xaml</DependentUpon>
       <SubType>Code</SubType>
@@ -327,6 +344,10 @@
       <DependentUpon>Launch.xaml</DependentUpon>
       <SubType>Code</SubType>
     </Midl>
+    <Midl Include="NewTabMenu.idl">
+      <DependentUpon>NewTabMenu.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </Midl>
     <Midl Include="Interaction.idl">
       <DependentUpon>Interaction.xaml</DependentUpon>
       <SubType>Code</SubType>
@@ -350,6 +371,7 @@
     <Midl Include="InteractionViewModel.idl" />
     <Midl Include="GlobalAppearanceViewModel.idl" />
     <Midl Include="LaunchViewModel.idl" />
+    <Midl Include="NewTabMenuViewModel.idl" />
     <Midl Include="Profiles_Base.idl">
       <DependentUpon>Profiles_Base.xaml</DependentUpon>
       <SubType>Code</SubType>

src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj.filters

@@ -27,6 +27,7 @@
     <Midl Include="LaunchViewModel.idl" />
     <Midl Include="EnumEntry.idl" />
     <Midl Include="SettingContainer.idl" />
+    <Midl Include="NewTabMenuViewModel.idl" />
   </ItemGroup>
   <ItemGroup>
     <None Include="packages.config" />
@@ -49,5 +50,6 @@
     <Page Include="SettingContainerStyle.xaml" />
     <Page Include="AddProfile.xaml" />
     <Page Include="KeyChordListener.xaml" />
+    <Page Include="NewTabMenu.xaml" />
   </ItemGroup>
 </Project>