Code Quality: Added placeholder content for Shelf

Author: yaira2

src/Files.App/Assets/Shelf/EmptyShelf_100_ThemeDark.svg

@@ -4194,6 +4194,9 @@
     <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>
+    <value>You can add sections to the sidebar by right-clicking and selecting the sections you want to add</value>
+  </data>
+  <data name="EmptyShelfText" xml:space="preserve">
+    <value>Drag files or folders here to interact with them across different tabs</value>
   </data>
 </root>

src/Files.App/Assets/Shelf/EmptyShelf_100_ThemeLight.svg

@@ -325,6 +325,7 @@
 		<!--  Right Side Action Buttons  -->
 		<StackPanel
 			Grid.Column="2"
+			Margin="0,0,4,0"
 			Orientation="Horizontal"
 			Spacing="4">
 

src/Files.App/Assets/Shelf/EmptyShelf_200_ThemeDark.svg

@@ -11,7 +11,28 @@
 	mc:Ignorable="d">
 
 	<UserControl.Resources>
-		<converters:ImageModelToImageConverter x:Key="ImageModelToImageConverter" />
+		<ResourceDictionary>
+			<converters:ImageModelToImageConverter x:Key="ImageModelToImageConverter" />
+
+			<ResourceDictionary.ThemeDictionaries>
+				<ResourceDictionary x:Key="Light">
+					<ImageSource x:Key="EmptyShelf.48">ms-appx:///Assets/Shelf/EmptyShelf_48_ThemeLight.svg</ImageSource>
+					<ImageSource x:Key="EmptyShelf.100">ms-appx:///Assets/Shelf/EmptyShelf_100_ThemeLight.svg</ImageSource>
+					<ImageSource x:Key="EmptyShelf.200">ms-appx:///Assets/Shelf/EmptyShelf_200_ThemeLight.svg</ImageSource>
+				</ResourceDictionary>
+				<ResourceDictionary x:Key="Dark">
+					<ImageSource x:Key="EmptyShelf.48">ms-appx:///Assets/Shelf/EmptyShelf_48_ThemeDark.svg</ImageSource>
+					<ImageSource x:Key="EmptyShelf.100">ms-appx:///Assets/Shelf/EmptyShelf_100_ThemeDark.svg</ImageSource>
+					<ImageSource x:Key="EmptyShelf.200">ms-appx:///Assets/Shelf/EmptyShelf_200_ThemeDark.svg</ImageSource>
+				</ResourceDictionary>
+				<ResourceDictionary x:Key="HighContrast">
+					<ImageSource x:Key="EmptyShelf.48">ms-appx:///Assets/Shelf/EmptyShelf_48_ThemeDark.svg</ImageSource>
+					<ImageSource x:Key="EmptyShelf.100">ms-appx:///Assets/Shelf/EmptyShelf_100_ThemeDark.svg</ImageSource>
+					<ImageSource x:Key="EmptyShelf.200">ms-appx:///Assets/Shelf/EmptyShelf_200_ThemeDark.svg</ImageSource>
+				</ResourceDictionary>
+			</ResourceDictionary.ThemeDictionaries>
+
+		</ResourceDictionary>
 	</UserControl.Resources>
 
 	<Grid
@@ -31,6 +52,7 @@
 			<RowDefinition Height="Auto" />
 		</Grid.RowDefinitions>
 
+		<!--  Shelf Header  -->
 		<StackPanel
 			Grid.Row="0"
 			Padding="12,12,12,4"
@@ -48,6 +70,30 @@
 
 		</StackPanel>
 
+		<!--  Empty Shelf Content  -->
+		<StackPanel
+			x:Name="EmptyShelfContent"
+			Grid.Row="1"
+			Padding="16,0,16,0"
+			VerticalAlignment="Center"
+			Orientation="Vertical"
+			Spacing="16"
+			Visibility="Collapsed">
+
+			<Image
+				x:Name="EmptyShelfImage"
+				MaxHeight="48"
+				Source="{ThemeResource EmptyShelf.48}" />
+
+			<TextBlock
+				MaxWidth="240"
+				Foreground="{ThemeResource TextFillColorTertiaryBrush}"
+				Style="{StaticResource App.Theme.CaptionTextBlockStyle}"
+				Text="{helpers:ResourceString Name=EmptyShelfText}"
+				TextAlignment="Center" />
+
+		</StackPanel>
+
 		<!--  Items List  -->
 		<ListView
 			x:Name="ShelfItemsList"
@@ -101,6 +147,7 @@
 		</ListView>
 
 
+		<!--  Shelf Footer  -->
 		<StackPanel
 			Grid.Row="2"
 			Padding="12,12,12,4"

src/Files.App/Assets/Shelf/EmptyShelf_200_ThemeLight.svg

@@ -60,6 +60,9 @@ private async void Shelf_Drop(object sender, DragEventArgs e)
 
 				ItemsSource.Add(shelfItem);
 			}
+
+			// ToDo bind to property in view model
+			EmptyShelfContent.Visibility = ItemsSource.Count == 0 ? Microsoft.UI.Xaml.Visibility.Visible : Microsoft.UI.Xaml.Visibility.Collapsed;
 		}
 
 		private void ListView_DragItemsStarting(object sender, DragItemsStartingEventArgs e)