Add New Tab Menu Customization to Settings UI

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,15 @@
         </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" />
+    </Style>
+
     <Style x:Key="SmallButtonStyle"
            BasedOn="{StaticResource BrowseButtonStyle}"
            TargetType="Button">
@@ -288,6 +298,15 @@
         <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" />
+    </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 interactionTag{ L"Interaction_Nav" };
 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,9 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         InitializeComponent();
         _UpdateBackgroundForMica();
 
+        _newTabMenuPageVM = winrt::make<NewTabMenuViewModel>(_settingsClone);
+        _SetupNTMEventHandling();
+
         _colorSchemesPageVM = winrt::make<ColorSchemesPageViewModel>(_settingsClone);
         _colorSchemesPageViewModelChangedRevoker = _colorSchemesPageVM.PropertyChanged(winrt::auto_revoke, [=](auto&&, const PropertyChangedEventArgs& args) {
             const auto settingName{ args.PropertyName() };
@@ -136,13 +141,24 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         _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())
         {
+            // Early exit if the last breadcrumb was a FolderEntry in the NewTabMenu
+            if (const auto& breadcrumbFolderEntry{ crumb->Tag().try_as<Editor::FolderEntryViewModel>() })
+            {
+                // It's _a lot_ of extra work to figure out where this folder is and recreate the breadcrumbs
+                // (and that assumes that the folder even exists!) so for now we'll just navigate to the base page
+                _newTabMenuPageVM.CurrentFolder(nullptr);
+                _Navigate(breadcrumbFolderEntry, BreadcrumbSubPage::None);
+                return;
+            }
+
             for (const auto& item : _menuItemSource)
             {
                 if (const auto& menuItem{ item.try_as<MUX::Controls::NavigationViewItem>() })
@@ -301,6 +317,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
     void MainPage::_PreNavigateHelper()
     {
         _profileViewModelChangedRevoker.revoke();
+        _ntmViewModelChangedRevoker.revoke();
         _breadcrumbs.Clear();
     }
 
@@ -359,6 +376,31 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         });
     }
 
+    void MainPage::_SetupNTMEventHandling()
+    {
+        _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())
+                {
+                    contentFrame().Navigate(xaml_typename<Editor::NewTabMenu>(), _newTabMenuPageVM);
+                    const auto crumb = winrt::make<Breadcrumb>(box_value(currentFolder), currentFolder.Name(), BreadcrumbSubPage::NTM_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
+                    contentFrame().Navigate(xaml_typename<Editor::NewTabMenu>(), _newTabMenuPageVM);
+                    _breadcrumbs.Clear();
+                    const auto crumb = winrt::make<Breadcrumb>(box_value(newTabMenuTag), RS_(L"Nav_NewTabMenu/Content"), BreadcrumbSubPage::None);
+                    _breadcrumbs.Append(crumb);
+                }
+            }
+        });
+    }
+
     void MainPage::_Navigate(hstring clickedItemTag, BreadcrumbSubPage subPage)
     {
         _PreNavigateHelper();
@@ -393,6 +435,17 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
             const auto crumb = winrt::make<Breadcrumb>(box_value(clickedItemTag), RS_(L"Nav_Actions/Content"), BreadcrumbSubPage::None);
             _breadcrumbs.Append(crumb);
         }
+        else if (clickedItemTag == newTabMenuTag)
+        {
+            // Reset the current folder entry and page BEFORE setting up the event handling
+            _newTabMenuPageVM.CurrentFolder(nullptr);
+
+            _SetupNTMEventHandling();
+
+            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 +534,26 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         }
     }
 
+    void MainPage::_Navigate(const Editor::NewTabMenuEntryViewModel& ntmEntryVM, BreadcrumbSubPage subPage)
+    {
+        _PreNavigateHelper();
+
+        _SetupNTMEventHandling();
+
+        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 folderEntry = ntmEntryVM.try_as<FolderEntryViewModel>(); subPage == BreadcrumbSubPage::NTM_Folder && folderEntry)
+        {
+            _newTabMenuPageVM.CurrentFolder(*folderEntry);
+        }
+    }
+
     void MainPage::OpenJsonTapped(const IInspectable& /*sender*/, const Windows::UI::Xaml::Input::TappedRoutedEventArgs& /*args*/)
     {
         const auto window = CoreWindow::GetForCurrentThread();
@@ -523,6 +596,10 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
             {
                 _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

@@ -65,18 +65,22 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         void _AddProfileHandler(const winrt::guid profileGuid);
 
         void _SetupProfileEventHandling(const winrt::Microsoft::Terminal::Settings::Editor::ProfileViewModel profile);
+        void _SetupNTMEventHandling();
 
         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,
+        NTM_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>