Feature: Display placeholder when sidebar sections are all hidden

src/Files.App.Controls/Sidebar/SidebarView.Properties.cs

@@ -21,6 +21,14 @@ public UIElement InnerContent
 		public static readonly DependencyProperty InnerContentProperty =
 			DependencyProperty.Register(nameof(InnerContent), typeof(UIElement), typeof(SidebarView), new PropertyMetadata(null));
 
+		public UIElement SidebarContent
+		{
+			get { return (UIElement)GetValue(SidebarContentProperty); }
+			set { SetValue(SidebarContentProperty, value); }
+		}
+		public static readonly DependencyProperty SidebarContentProperty =
+			DependencyProperty.Register("SidebarContent", typeof(UIElement), typeof(SidebarView), new PropertyMetadata(null));
+
 		public UIElement Footer
 		{
 			get { return (UIElement)GetValue(FooterProperty); }

src/Files.App.Controls/Sidebar/SidebarView.xaml

@@ -57,6 +57,15 @@
 				<CompositeTransform x:Name="PaneColumnGridTransform" />
 			</Grid.RenderTransform>
 
+			<!--  Content  -->
+			<ContentPresenter
+				Grid.RowSpan="2"
+				HorizontalAlignment="Stretch"
+				VerticalAlignment="Stretch"
+				HorizontalContentAlignment="Stretch"
+				VerticalContentAlignment="Stretch"
+				Content="{x:Bind SidebarContent, Mode=OneWay}" />
+
 			<!--  Menu Items  -->
 			<ItemsRepeaterScrollHost HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
 				<ScrollViewer

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

@@ -3508,7 +3508,7 @@
   <data name="StatusCenter_GitCloneInProgress_SubHeader" xml:space="preserve">
     <value>Cloning {0} from "{1}" to "{2}"</value>
     <comment>Shown in a StatusCenter card.</comment>
-  </data>	
+  </data>
   <data name="StatusCenter_InstallFontCanceled_Header" xml:space="preserve">
     <value>Canceled installing {0} fonts</value>
     <comment>Shown in a StatusCenter card.</comment>
@@ -3540,7 +3540,7 @@
   <data name="StatusCenter_InstallFontInProgress_SubHeader" xml:space="preserve">
     <value>Installing {0} font(s) from "{1}"</value>
     <comment>Shown in a StatusCenter card.</comment>
-  </data>	
+  </data>
   <data name="StatusCenter_CopyCanceled_Header" xml:space="preserve">
     <value>Canceled copying {0} item(s) to "{1}"</value>
     <comment>Shown in a StatusCenter card.</comment>
@@ -4193,4 +4193,7 @@
   <data name="EnableOmnibar" xml:space="preserve">
     <value>Enable Omnibar</value>
   </data>
+  <data name="SectionsHiddenMessage" xml:space="preserve">
+    <value>You can add sections to the sidebar by right-clicking and selecting the sections you want to add.</value>
+  </data>
 </root>

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

@@ -59,6 +59,7 @@ public SidebarDisplayMode SidebarDisplayMode
 				if (SetProperty(ref sidebarDisplayMode, value))
 				{
 					OnPropertyChanged(nameof(IsSidebarCompactSize));
+					OnPropertyChanged(nameof(AreSectionsHidden));
 					IsSidebarOpen = sidebarDisplayMode == SidebarDisplayMode.Expanded;
 					UpdateTabControlMargin();
 				}
@@ -134,6 +135,16 @@ public bool IsSidebarOpen
 			}
 		}
 
+		public bool AreSectionsHidden =>
+			!ShowPinnedFoldersSection &&
+			!ShowLibrarySection &&
+			!ShowDrivesSection &&
+			!ShowCloudDrivesSection &&
+			!ShowNetworkSection &&
+			(!ShowWslSection || WSLDistroManager.Distros.Any() == false) &&
+			!ShowFileTagsSection &&
+			SidebarDisplayMode is not SidebarDisplayMode.Compact;
+
 		public bool ShowPinnedFoldersSection
 		{
 			get => UserSettingsService.GeneralSettingsService.ShowPinnedSection;
@@ -635,30 +646,37 @@ private async void UserSettingsService_OnSettingChangedEvent(object sender, Sett
 				case nameof(UserSettingsService.GeneralSettingsService.ShowPinnedSection):
 					await UpdateSectionVisibilityAsync(SectionType.Pinned, ShowPinnedFoldersSection);
 					OnPropertyChanged(nameof(ShowPinnedFoldersSection));
+					OnPropertyChanged(nameof(AreSectionsHidden));
 					break;
 				case nameof(UserSettingsService.GeneralSettingsService.ShowLibrarySection):
 					await UpdateSectionVisibilityAsync(SectionType.Library, ShowLibrarySection);
 					OnPropertyChanged(nameof(ShowLibrarySection));
+					OnPropertyChanged(nameof(AreSectionsHidden));
 					break;
 				case nameof(UserSettingsService.GeneralSettingsService.ShowCloudDrivesSection):
 					await UpdateSectionVisibilityAsync(SectionType.CloudDrives, ShowCloudDrivesSection);
 					OnPropertyChanged(nameof(ShowCloudDrivesSection));
+					OnPropertyChanged(nameof(AreSectionsHidden));
 					break;
 				case nameof(UserSettingsService.GeneralSettingsService.ShowDrivesSection):
 					await UpdateSectionVisibilityAsync(SectionType.Drives, ShowDrivesSection);
 					OnPropertyChanged(nameof(ShowDrivesSection));
+					OnPropertyChanged(nameof(AreSectionsHidden));
 					break;
 				case nameof(UserSettingsService.GeneralSettingsService.ShowNetworkSection):
 					await UpdateSectionVisibilityAsync(SectionType.Network, ShowNetworkSection);
 					OnPropertyChanged(nameof(ShowNetworkSection));
+					OnPropertyChanged(nameof(AreSectionsHidden));
 					break;
 				case nameof(UserSettingsService.GeneralSettingsService.ShowWslSection):
 					await UpdateSectionVisibilityAsync(SectionType.WSL, ShowWslSection);
 					OnPropertyChanged(nameof(ShowWslSection));
+					OnPropertyChanged(nameof(AreSectionsHidden));
 					break;
 				case nameof(UserSettingsService.GeneralSettingsService.ShowFileTagsSection):
 					await UpdateSectionVisibilityAsync(SectionType.FileTag, ShowFileTagsSection);
 					OnPropertyChanged(nameof(ShowFileTagsSection));
+					OnPropertyChanged(nameof(AreSectionsHidden));
 					break;
 			}
 		}

src/Files.App/Views/MainPage.xaml

@@ -31,6 +31,24 @@
 				<ResourceDictionary Source="ms-appx:///Styles/DefaultGridSplitterStyle.xaml" />
 			</ResourceDictionary.MergedDictionaries>
 
+			<ResourceDictionary.ThemeDictionaries>
+				<ResourceDictionary x:Key="Light">
+					<ImageSource x:Key="EmptySidebar.48">ms-appx:///Assets/Sidebar/EmptySidebar_48_ThemeLight.svg</ImageSource>
+					<ImageSource x:Key="EmptySidebar.100">ms-appx:///Assets/Sidebar/EmptySidebar_100_ThemeLight.svg</ImageSource>
+					<ImageSource x:Key="EmptySidebar.200">ms-appx:///Assets/Sidebar/EmptySidebar_200_ThemeLight.svg</ImageSource>
+				</ResourceDictionary>
+				<ResourceDictionary x:Key="Dark">
+					<ImageSource x:Key="EmptySidebar.48">ms-appx:///Assets/Sidebar/EmptySidebar_48_ThemeDark.svg</ImageSource>
+					<ImageSource x:Key="EmptySidebar.100">ms-appx:///Assets/Sidebar/EmptySidebar_100_ThemeDark.svg</ImageSource>
+					<ImageSource x:Key="EmptySidebar.200">ms-appx:///Assets/Sidebar/EmptySidebar_200_ThemeDark.svg</ImageSource>
+				</ResourceDictionary>
+				<ResourceDictionary x:Key="HighContrast">
+					<ImageSource x:Key="EmptySidebar.48">ms-appx:///Assets/Sidebar/EmptySidebar_48_ThemeDark.svg</ImageSource>
+					<ImageSource x:Key="EmptySidebar.100">ms-appx:///Assets/Sidebar/EmptySidebar_100_ThemeDark.svg</ImageSource>
+					<ImageSource x:Key="EmptySidebar.200">ms-appx:///Assets/Sidebar/EmptySidebar_200_ThemeDark.svg</ImageSource>
+				</ResourceDictionary>
+			</ResourceDictionary.ThemeDictionaries>
+
 			<x:Boolean x:Key="True">True</x:Boolean>
 			<x:Boolean x:Key="False">False</x:Boolean>
 
@@ -259,6 +277,32 @@
 				</Grid>
 			</controls:SidebarView.InnerContent>
 
+			<!--  Sidebar Content  -->
+			<controls:SidebarView.SidebarContent>
+				<StackPanel
+					x:Name="SidebarContent"
+					Padding="16,0,16,0"
+					VerticalAlignment="Center"
+					Orientation="Vertical"
+					Spacing="16"
+					Visibility="{x:Bind SidebarAdaptiveViewModel.AreSectionsHidden, Mode=OneWay}">
+
+					<Image
+						x:Name="EmptySidebarImage"
+						MaxHeight="48"
+						Source="{ThemeResource EmptySidebar.48}" />
+
+					<TextBlock
+						MaxWidth="240"
+						Foreground="{ThemeResource TextFillColorTertiaryBrush}"
+						Style="{StaticResource App.Theme.CaptionTextBlockStyle}"
+						Text="{helpers:ResourceString Name=SectionsHiddenMessage}"
+						TextAlignment="Center" />
+
+				</StackPanel>
+			</controls:SidebarView.SidebarContent>
+
+			<!--  Footer  -->
 			<controls:SidebarView.Footer>
 				<StackPanel Padding="4" Spacing="4">
 					<Border
@@ -322,6 +366,46 @@
 		</controls:SidebarView>
 
 		<VisualStateManager.VisualStateGroups>
+			<VisualStateGroup x:Name="SidebarWidthStates">
+				<VisualState x:Name="SmallSidebarWidthState">
+					<VisualState.Setters>
+						<Setter Target="EmptySidebarImage.MaxHeight" Value="48" />
+						<Setter Target="EmptySidebarImage.Source" Value="{ThemeResource EmptySidebar.48}" />
+					</VisualState.Setters>
+				</VisualState>
+				<VisualState x:Name="MediumSidebarWidthState">
+					<VisualState.Setters>
+						<Setter Target="EmptySidebarImage.MaxHeight" Value="100" />
+						<Setter Target="EmptySidebarImage.Source" Value="{ThemeResource EmptySidebar.100}" />
+					</VisualState.Setters>
+				</VisualState>
+				<VisualState x:Name="LargeSidebarWidthState">
+					<VisualState.Setters>
+						<Setter Target="EmptySidebarImage.MaxHeight" Value="200" />
+						<Setter Target="EmptySidebarImage.Source" Value="{ThemeResource EmptySidebar.200}" />
+					</VisualState.Setters>
+				</VisualState>
+			</VisualStateGroup>
+
+			<VisualStateGroup x:Name="WindowHeightStates">
+				<VisualState>
+					<VisualState.StateTriggers>
+						<AdaptiveTrigger x:Name="SmallHeightAdaptiveTrigger" MinWindowHeight="440" />
+					</VisualState.StateTriggers>
+					<VisualState.Setters>
+						<Setter Target="EmptySidebarImage.Visibility" Value="Visible" />
+					</VisualState.Setters>
+				</VisualState>
+				<VisualState>
+					<VisualState.StateTriggers>
+						<AdaptiveTrigger x:Name="MediumHeightAdaptiveTrigger" MinWindowHeight="0" />
+					</VisualState.StateTriggers>
+					<VisualState.Setters>
+						<Setter Target="EmptySidebarImage.Visibility" Value="Collapsed" />
+					</VisualState.Setters>
+				</VisualState>
+			</VisualStateGroup>
+
 			<VisualStateGroup>
 				<VisualState>
 					<VisualState.StateTriggers>
@@ -337,6 +421,7 @@
 					</VisualState.Setters>
 				</VisualState>
 			</VisualStateGroup>
+
 			<VisualStateGroup>
 				<VisualState x:Name="NormalSidebarState">
 					<VisualState.StateTriggers>

src/Files.App/Views/MainPage.xaml.cs

@@ -55,6 +55,8 @@ public MainPage()
 			_updateDateDisplayTimer = DispatcherQueue.CreateTimer();
 			_updateDateDisplayTimer.Interval = TimeSpan.FromSeconds(1);
 			_updateDateDisplayTimer.Tick += UpdateDateDisplayTimer_Tick;
+
+			ApplySidebarWidthState();
 		}
 
 		private async Task PromptForReviewAsync()
@@ -120,6 +122,9 @@ private void UserSettingsService_OnSettingChangedEvent(object? sender, SettingCh
 				case nameof(IInfoPaneSettingsService.IsInfoPaneEnabled):
 					LoadPaneChanged();
 					break;
+				case nameof(IAppearanceSettingsService.SidebarWidth):
+					ApplySidebarWidthState();
+					break;
 			}
 		}
 
@@ -434,6 +439,16 @@ private void PaneSplitter_ManipulationCompleted(object sender, ManipulationCompl
 			this.ChangeCursor(InputSystemCursor.Create(InputSystemCursorShape.Arrow));
 		}
 
+		private void ApplySidebarWidthState()
+		{
+			if (UserSettingsService.AppearanceSettingsService.SidebarWidth > 340)
+				VisualStateManager.GoToState(this, "LargeSidebarWidthState", true);
+			else if (UserSettingsService.AppearanceSettingsService.SidebarWidth > 280)
+				VisualStateManager.GoToState(this, "MediumSidebarWidthState", true);
+			else
+				VisualStateManager.GoToState(this, "SmallSidebarWidthState", true);
+		}
+
 		private void LoadPaneChanged()
 		{
 			try