Code Quality: Toolbar toggle button for Shelf (#16678)

src/Files.App/Data/Contracts/IAppearanceSettingsService.cs

@@ -111,5 +111,10 @@ public interface IAppearanceSettingsService : IBaseSettingsService, INotifyPrope
 		/// Gets or sets a value whether the home button should be displayed.
 		/// </summary>
 		bool ShowHomeButton { get; set; }
+
+		/// <summary>
+		/// Gets or sets a value whether the shelf pane toggle button should be displayed.
+		/// </summary>
+		bool ShowShelfPaneToggleButton{ get; set; }
 	}
 }

src/Files.App/Services/Settings/AppearanceSettingsService.cs

@@ -152,6 +152,13 @@ public bool ShowHomeButton
 			set => Set(value);
 		}
 
+		/// <inheritdoc/>
+		public bool ShowShelfPaneToggleButton
+		{
+			get => Get(false);
+			set => Set(value);
+		}
+
 		protected override void RaiseOnSettingChangedEvent(object sender, SettingChangedEventArgs e)
 		{
 			base.RaiseOnSettingChangedEvent(sender, e);

src/Files.App/Strings/en-US/Resources.resw

@@ -3969,7 +3969,7 @@
     <value>Navigate to the home page</value>
   </data>
   <data name="ShowHomeButton" xml:space="preserve">
-    <value>Show Home in address bar</value>
+    <value>Show home button in address bar</value>
   </data>
   <data name="Toolbars" xml:space="preserve">
     <value>Toolbars</value>
@@ -4019,8 +4019,11 @@
   <data name="AlwaysSwitchToNewlyOpenedTab" xml:space="preserve">
     <value>Always switch focus to newly created tab</value>
   </data>
-  <data name="ShowShelfPane" xml:space="preserve">
-    <value>Show Shelf Pane</value>
+  <data name="ToggleShelfPane" xml:space="preserve">
+    <value>Toggle the shelf pane</value>
+  </data>
+  <data name="ShowShelfPaneButtonInAddressBar" xml:space="preserve">
+    <value>Show shelf pane toggle in address bar</value>
   </data>
   <data name="Shelf" xml:space="preserve">
     <value>Shelf</value>
@@ -4033,7 +4036,7 @@
     <value>Remove from shelf</value>
   </data>
   <data name="AddToShelf" xml:space="preserve">
-    <value>Add to Shelf</value>
+    <value>Add to shelf</value>
     <comment>Tooltip that displays when dragging items to the Shelf Pane</comment>
   </data>
 </root>

src/Files.App/UserControls/AddressToolbar.xaml

@@ -5,6 +5,7 @@
 	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 	xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
 	xmlns:contract8Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,8)"
+	xmlns:controls="using:Files.App.Controls"
 	xmlns:converters="using:Files.App.Converters"
 	xmlns:converters1="using:CommunityToolkit.WinUI.UI.Converters"
 	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
@@ -469,7 +470,10 @@
 				Visibility="{x:Bind converters:MultiBooleanConverter.OrConvertToVisibility(ShowSearchBox, ViewModel.IsSearchBoxVisible), Mode=OneWay}" />
 
 			<!--  Right Side Action Buttons  -->
-			<StackPanel Grid.Column="3" Orientation="Horizontal">
+			<StackPanel
+				Grid.Column="3"
+				Orientation="Horizontal"
+				Spacing="4">
 
 				<!--  Mini Search Button  -->
 				<Button
@@ -485,6 +489,27 @@
 					<FontIcon FontSize="14" Glyph="{x:Bind ViewModel.SearchButtonGlyph, Mode=OneWay}" />
 				</Button>
 
+				<!--  Shelf Pane  -->
+				<ToggleButton
+					x:Name="OpenShelfPaneButton"
+					Width="36"
+					Height="32"
+					Padding="0"
+					x:Load="{x:Bind ViewModel.ShowShelfPaneToggleButton, Mode=OneWay}"
+					AccessKeyInvoked="Button_AccessKeyInvoked"
+					AutomationProperties.Name="{helpers:ResourceString Name=ToggleShelfPane}"
+					Background="Transparent"
+					BorderBrush="Transparent"
+					IsChecked="{x:Bind ViewModel.ShowShelfPane, Mode=TwoWay}"
+					ToolTipService.ToolTip="{helpers:ResourceString Name=ToggleShelfPane}">
+					<controls:ThemedIcon
+						Width="20"
+						Height="20"
+						HorizontalAlignment="Center"
+						VerticalAlignment="Center"
+						Style="{StaticResource App.ThemedIcons.Shelf}" />
+				</ToggleButton>
+
 				<!--  Status Center  -->
 				<Button
 					x:Name="ShowStatusCenterButton"

src/Files.App/ViewModels/Settings/AdvancedViewModel.cs

@@ -366,20 +366,6 @@ public bool ShowFlattenOptions
 				OnPropertyChanged();
 			}
 		}
-
-		// TODO remove when feature is marked as stable
-		public bool ShowShelfPane
-		{
-			get => UserSettingsService.GeneralSettingsService.ShowShelfPane;
-			set
-			{
-				if (value == UserSettingsService.GeneralSettingsService.ShowShelfPane)
-					return;
-
-				UserSettingsService.GeneralSettingsService.ShowShelfPane = value;
-				OnPropertyChanged();
-			}
-		}
 
 		public async Task OpenFilesOnWindowsStartupAsync()
 		{

src/Files.App/ViewModels/Settings/AppearanceViewModel.cs

@@ -315,5 +315,24 @@ public bool ShowHomeButton
 				}
 			}
 		}
+
+		public bool ShowShelfPaneToggleButton
+		{
+			get => UserSettingsService.AppearanceSettingsService.ShowShelfPaneToggleButton;
+			set
+			{
+				if (value != UserSettingsService.AppearanceSettingsService.ShowShelfPaneToggleButton)
+				{
+					UserSettingsService.AppearanceSettingsService.ShowShelfPaneToggleButton = value;
+
+					OnPropertyChanged();
+				}
+			}
+		}
+
+		public bool IsAppEnvironmentDev
+		{
+			get => AppLifecycleHelper.AppEnvironment is AppEnvironment.Dev;
+		}
 	}
 }

src/Files.App/ViewModels/UserControls/AddressToolbarViewModel.cs

@@ -22,6 +22,7 @@ public sealed class AddressToolbarViewModel : ObservableObject, IAddressToolbarV
 
 		private IUserSettingsService UserSettingsService { get; } = Ioc.Default.GetRequiredService<IUserSettingsService>();
 		private IAppearanceSettingsService AppearanceSettingsService { get; } = Ioc.Default.GetRequiredService<IAppearanceSettingsService>();
+		private IGeneralSettingsService GeneralSettingsService { get; } = Ioc.Default.GetRequiredService<IGeneralSettingsService>();
 
 		private readonly IDialogService _dialogService = Ioc.Default.GetRequiredService<IDialogService>();
 
@@ -162,6 +163,23 @@ public string? PathText
 		public bool ShowHomeButton
 			=> AppearanceSettingsService.ShowHomeButton;
 
+		public bool ShowShelfPaneToggleButton
+			=> AppearanceSettingsService.ShowShelfPaneToggleButton && AppLifecycleHelper.AppEnvironment is AppEnvironment.Dev;
+
+
+		// TODO replace with action when feature is marked as stable
+		public bool ShowShelfPane
+		{
+			get => GeneralSettingsService.ShowShelfPane;
+			set
+			{
+				if (value == GeneralSettingsService.ShowShelfPane)
+					return;
+
+				GeneralSettingsService.ShowShelfPane = value;
+			}
+		}
+
 		public ObservableCollection<NavigationBarSuggestionItem> NavigationBarSuggestions = [];
 
 		private CurrentInstanceViewModel instanceViewModel;
@@ -213,6 +231,19 @@ public AddressToolbarViewModel()
 					case nameof(AppearanceSettingsService.ShowHomeButton):
 						OnPropertyChanged(nameof(ShowHomeButton));
 						break;
+					case nameof(AppearanceSettingsService.ShowShelfPaneToggleButton):
+						OnPropertyChanged(nameof(ShowShelfPaneToggleButton));
+						break;
+				}
+			};
+
+			GeneralSettingsService.PropertyChanged += (s, e) =>
+			{
+				switch (e.PropertyName)
+				{
+					case nameof(GeneralSettingsService.ShowShelfPane):
+						OnPropertyChanged(nameof(ShowShelfPane));
+						break;
 				}
 			};
 		}

src/Files.App/Views/Settings/AdvancedPage.xaml

@@ -185,21 +185,6 @@
 				</ToggleSwitch>
 			</local:SettingsBlockControl>
 
-			<!--  Show Shelf Pane  -->
-			<local:SettingsBlockControl
-				x:Name="ShowShelfPane"
-				Title="{helpers:ResourceString Name=ShowShelfPane}"
-				HorizontalAlignment="Stretch"
-				x:Load="{x:Bind ViewModel.IsAppEnvironmentDev}">
-				<local:SettingsBlockControl.Icon>
-					<FontIcon Glyph="&#xE90D;" />
-				</local:SettingsBlockControl.Icon>
-				<ToggleSwitch
-					AutomationProperties.Name="{helpers:ResourceString Name=ShowShelfPane}"
-					IsOn="{x:Bind ViewModel.ShowShelfPane, Mode=TwoWay}"
-					Style="{StaticResource RightAlignedToggleSwitchStyle}" />
-			</local:SettingsBlockControl>
-
 			<!--  Flatten options  -->
 			<local:SettingsBlockControl
 				Title="{helpers:ResourceString Name=ShowFlattenOptions}"

src/Files.App/Views/Settings/AppearancePage.xaml

@@ -270,6 +270,18 @@
 								Style="{StaticResource RightAlignedToggleSwitchStyle}" />
 						</local:SettingsBlockControl>
 
+						<!--  Show shelf pane toggle button  -->
+						<local:SettingsBlockControl
+							x:Name="ShowShelfPaneSetting"
+							Title="{helpers:ResourceString Name=ShowShelfPaneButtonInAddressBar}"
+							HorizontalAlignment="Stretch"
+							x:Load="{x:Bind ViewModel.IsAppEnvironmentDev}">
+							<ToggleSwitch
+								AutomationProperties.Name="{helpers:ResourceString Name=ShowShelfPaneButtonInAddressBar}"
+								IsOn="{x:Bind ViewModel.ShowShelfPaneToggleButton, Mode=TwoWay}"
+								Style="{StaticResource RightAlignedToggleSwitchStyle}" />
+						</local:SettingsBlockControl>
+
 						<!--  Show toolbar  -->
 						<local:SettingsBlockControl Title="{helpers:ResourceString Name=ShowToolbar}" HorizontalAlignment="Stretch">
 							<ToggleSwitch