Added RichGlyph to the dummy data template

Author: 0x5bfa

src/Files.App.Controls/Omnibar/Omnibar.cs

@@ -9,6 +9,7 @@
 using Microsoft.UI.Xaml.Shapes;
 using Microsoft.UI.Xaml.Input;
 using Microsoft.UI;
+using Windows.ApplicationModel.Contacts;
 
 namespace Files.App.Controls
 {
@@ -116,13 +117,18 @@ internal void ChangeMode(OmnibarMode modeToExpand)
 
 		private void UpdateVisualStates()
 		{
-			VisualStateManager.GoToState(
-				this,
-				_isFocused ? "Focused" : "Normal",
-				true);
+			VisualStateManager.GoToState(this, _isFocused ? "Focused" : "Normal", true);
 
 			if (CurrentActiveMode is not null && _autoSuggestPopup is not null)
-				VisualStateManager.GoToState(this, _isFocused && CurrentActiveMode.SuggestionItemsSource is not null ? "PopupOpened" : "PopupClosed", true);
+			{
+				// Close anyway
+				if (_autoSuggestPopup.IsOpen && CurrentActiveMode.SuggestionItemsSource is null)
+					VisualStateManager.GoToState(this, "PopupClosed", true);
+
+				// Decide open or close
+				if (_isFocused != _autoSuggestPopup.IsOpen)
+					VisualStateManager.GoToState(this, _isFocused && CurrentActiveMode.SuggestionItemsSource is not null ? "PopupOpened" : "PopupClosed", true);
+			}
 
 			if (CurrentActiveMode is not null)
 				VisualStateManager.GoToState(CurrentActiveMode, _isFocused ? "Focused" : "CurrentUnfocused", true);
@@ -143,6 +149,12 @@ private void Omnibar_GotFocus(object sender, RoutedEventArgs e)
 
 		private void Omnibar_LostFocus(object sender, RoutedEventArgs e)
 		{
+			// Ignore when user clicks on the TextBox or OmnibarMode's button area, Omnibar still has focus
+			if (e.OriginalSource.GetType() is not { } originalSourceType ||
+				originalSourceType == typeof(TextBox) ||
+				originalSourceType == typeof(OmnibarMode))
+				return;
+
 			_isFocused = false;
 			UpdateVisualStates();
 		}

src/Files.App.Controls/Omnibar/Omnibar.xaml

@@ -19,9 +19,6 @@
 	<Thickness x:Key="OmnibarUnfocusedBorderThickness">1</Thickness>
 	<Thickness x:Key="OmnibarUnfocusedRootPadding">1</Thickness>
 
-	<x:Double x:Key="OmnibarModeDividerDefaultHeight">24</x:Double>
-	<SolidColorBrush x:Key="OmnibarModeDivisiderBrush" Color="{ThemeResource DividerStrokeColorDefaultBrush}" />
-
 	<Style BasedOn="{StaticResource DefaultOmnibarStyle}" TargetType="local:Omnibar" />
 
 	<Style x:Key="DefaultOmnibarStyle" TargetType="local:Omnibar">
@@ -75,7 +72,7 @@
 								</Border.Shadow>
 
 								<ListView
-									Padding="4"
+									Padding="0,2"
 									HorizontalAlignment="Stretch"
 									IsItemClickEnabled="True"
 									ItemTemplate="{Binding CurrentActiveMode.SuggestionItemTemplate, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"

tests/Files.App.UITests/Views/OmnibarPage.xaml

@@ -74,7 +74,6 @@
 
 				<controls:OmnibarMode
 					IsDefault="True"
-					SuggestionItemsSource="{x:Bind DummyItems1, Mode=OneWay}"
 					Text="Path..."
 					TextPlaceholder="Enter text..."
 					ToolTip="Path"
@@ -85,41 +84,46 @@
 					<controls:OmnibarMode.IconOnInactive>
 						<controls:ThemedIcon Style="{StaticResource App.ThemedIcons.Omnibar.Path}" />
 					</controls:OmnibarMode.IconOnInactive>
+				</controls:OmnibarMode>
+
+				<controls:OmnibarMode
+					SuggestionItemsSource="{x:Bind DummyItems1, Mode=OneWay}"
+					Text="Palette..."
+					TextPlaceholder="Enter a palette command..."
+					ToolTip="Palette"
+					UseDefaultInactiveMode="True">
+					<controls:OmnibarMode.IconOnActive>
+						<controls:ThemedIcon IsFilled="True" Style="{StaticResource App.ThemedIcons.Omnibar.Commands}" />
+					</controls:OmnibarMode.IconOnActive>
+					<controls:OmnibarMode.IconOnInactive>
+						<controls:ThemedIcon Style="{StaticResource App.ThemedIcons.Omnibar.Commands}" />
+					</controls:OmnibarMode.IconOnInactive>
 					<controls:OmnibarMode.SuggestionItemTemplate>
 						<DataTemplate x:DataType="data:DummyItem1">
-							<Grid Height="48">
+							<Grid Height="48" ColumnSpacing="12">
 								<Grid.ColumnDefinitions>
+									<ColumnDefinition Width="Auto" />
 									<ColumnDefinition Width="*" />
 									<ColumnDefinition Width="Auto" />
 								</Grid.ColumnDefinitions>
-								<StackPanel Grid.Column="0" VerticalAlignment="Center">
+								<StackPanel VerticalAlignment="Center">
+									<controls:ThemedIcon IconSize="20" Style="{StaticResource App.ThemedIcons.Actions.Copying}" />
+								</StackPanel>
+								<StackPanel Grid.Column="1" VerticalAlignment="Center">
 									<TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="{x:Bind Title}" />
 									<TextBlock
 										Foreground="{ThemeResource TextFillColorSecondaryBrush}"
 										Style="{StaticResource CaptionTextBlockStyle}"
 										Text="{x:Bind Description}" />
 								</StackPanel>
-								<StackPanel Grid.Column="1" VerticalAlignment="Center">
+								<StackPanel Grid.Column="2" VerticalAlignment="Center">
 									<TextBlock Text="{x:Bind HotKeys}" />
 								</StackPanel>
 							</Grid>
 						</DataTemplate>
 					</controls:OmnibarMode.SuggestionItemTemplate>
 				</controls:OmnibarMode>
 
-				<controls:OmnibarMode
-					Text="Palette..."
-					TextPlaceholder="Enter a palette command..."
-					ToolTip="Palette"
-					UseDefaultInactiveMode="True">
-					<controls:OmnibarMode.IconOnActive>
-						<controls:ThemedIcon IsFilled="True" Style="{StaticResource App.ThemedIcons.Omnibar.Commands}" />
-					</controls:OmnibarMode.IconOnActive>
-					<controls:OmnibarMode.IconOnInactive>
-						<controls:ThemedIcon Style="{StaticResource App.ThemedIcons.Omnibar.Commands}" />
-					</controls:OmnibarMode.IconOnInactive>
-				</controls:OmnibarMode>
-
 				<controls:OmnibarMode
 					Text="Search..."
 					TextPlaceholder="Enter a search query..."