Feature: Add invalid tag name warning

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

@@ -2205,9 +2205,6 @@
   <data name="Pictures" xml:space="preserve">
     <value>Pictures</value>
   </data>
-  <data name="Videos" xml:space="preserve">
-    <value>Videos</value>
-  </data>
   <data name="UpdateFiles" xml:space="preserve">
     <value>Update Files</value>
   </data>
@@ -2634,6 +2631,15 @@
   <data name="ToggleSortDirection" xml:space="preserve">
     <value>Toggle sort direction</value>
   </data>
+  <data name="InvalidTagNameWarning" xml:space="preserve">
+    <value>Invalid name</value>
+  </data>
+  <data name="TagNameRules" xml:space="preserve">
+    <value>Name must not be empty or start or end with a period.</value>
+  </data>
+  <data name="Videos" xml:space="preserve">
+    <value>Videos</value>
+  </data>
   <data name="LaunchQuickLook" xml:space="preserve">
     <value>Launch QuickLook</value>
   </data>

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

@@ -138,6 +138,7 @@ public bool IsNameValid
 		public void Reset()
 		{
 			Name = string.Empty;
+			IsNameValid = false;
 			Color = ColorHelpers.RandomColor();
 		}
 	}

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

@@ -22,6 +22,7 @@
 				x:Key="InvertedBoolVisibilityConverter"
 				FalseValue="Visible"
 				TrueValue="Collapsed" />
+			<converters1:BoolNegationConverter x:Key="BoolNegationConverter" />
 			<vc:StringToBrushConverter x:Key="StringToBrushConverter" />
 		</ResourceDictionary>
 	</Page.Resources>
@@ -108,6 +109,41 @@
 								HorizontalAlignment="Right"
 								Orientation="Horizontal"
 								Spacing="12">
+								<!--  Invalid Name Warning  -->
+								<Grid
+									Padding="12,4"
+									VerticalAlignment="Stretch"
+									Background="{ThemeResource SystemFillColorCriticalBackgroundBrush}"
+									BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+									BorderThickness="1"
+									ColumnSpacing="8"
+									CornerRadius="4"
+									ToolTipService.ToolTip="{helpers:ResourceString Name=TagNameRules}"
+									Visibility="{x:Bind ViewModel.NewTag.IsNameValid, Mode=OneWay, Converter={StaticResource InvertedBoolVisibilityConverter}}">
+									<Grid.ColumnDefinitions>
+										<ColumnDefinition Width="Auto" />
+										<ColumnDefinition Width="Auto" />
+									</Grid.ColumnDefinitions>
+									<TextBlock
+										VerticalAlignment="Center"
+										AutomationProperties.AccessibilityView="Raw"
+										FontFamily="{ThemeResource SymbolThemeFontFamily}"
+										FontSize="{StaticResource InfoBarIconFontSize}"
+										Foreground="{ThemeResource InfoBarErrorSeverityIconBackground}"
+										Text="{StaticResource InfoBarIconBackgroundGlyph}" />
+									<TextBlock
+										VerticalAlignment="Center"
+										AutomationProperties.AccessibilityView="Raw"
+										FontFamily="{ThemeResource SymbolThemeFontFamily}"
+										FontSize="{StaticResource InfoBarIconFontSize}"
+										Foreground="{ThemeResource InfoBarInformationalSeverityIconForeground}"
+										Text="{StaticResource InfoBarErrorIconGlyph}" />
+									<TextBlock
+										Grid.Column="1"
+										VerticalAlignment="Center"
+										Text="{helpers:ResourceString Name=InvalidTagNameWarning}" />
+								</Grid>
+
 								<!--  Cancel  -->
 								<Button Command="{x:Bind ViewModel.CancelNewTagCommand, Mode=OneWay}" Content="{helpers:ResourceString Name=Cancel}" />
 
@@ -176,6 +212,7 @@
 												Width="200"
 												VerticalAlignment="Center"
 												KeyDown="RenameTextBox_KeyDown"
+												Text="{x:Bind NewName, Mode=TwoWay}"
 												Visibility="{x:Bind IsEditing, Converter={StaticResource BoolVisibilityConverter}, Mode=OneWay}">
 												<TextBox.Resources>
 													<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{ThemeResource SolidBackgroundFillColorSecondary}" />
@@ -200,7 +237,7 @@
 												</StackPanel>
 												<Button.Flyout>
 													<Flyout>
-														<controls:ColorPicker Color="{x:Bind NewColor, Mode=TwoWay}" />
+														<controls:ColorPicker ColorChanged="EditColorPicker_ColorChanged" Color="{x:Bind NewColor, Mode=TwoWay}" />
 													</Flyout>
 												</Button.Flyout>
 											</Button>
@@ -255,6 +292,39 @@
 											Orientation="Horizontal"
 											Spacing="12"
 											Visibility="{x:Bind IsEditing, Converter={StaticResource BoolVisibilityConverter}, Mode=OneWay}">
+											<Grid
+												Padding="12,4"
+												VerticalAlignment="Stretch"
+												Background="{ThemeResource SystemFillColorCriticalBackgroundBrush}"
+												BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+												BorderThickness="1"
+												ColumnSpacing="8"
+												CornerRadius="4"
+												ToolTipService.ToolTip="{helpers:ResourceString Name=TagNameRules}"
+												Visibility="{x:Bind IsNameValid, Mode=OneWay, Converter={StaticResource InvertedBoolVisibilityConverter}}">
+												<Grid.ColumnDefinitions>
+													<ColumnDefinition Width="Auto" />
+													<ColumnDefinition Width="Auto" />
+												</Grid.ColumnDefinitions>
+												<TextBlock
+													VerticalAlignment="Center"
+													AutomationProperties.AccessibilityView="Raw"
+													FontFamily="{ThemeResource SymbolThemeFontFamily}"
+													FontSize="{StaticResource InfoBarIconFontSize}"
+													Foreground="{ThemeResource InfoBarErrorSeverityIconBackground}"
+													Text="{StaticResource InfoBarIconBackgroundGlyph}" />
+												<TextBlock
+													VerticalAlignment="Center"
+													FontFamily="{ThemeResource SymbolThemeFontFamily}"
+													FontSize="{StaticResource InfoBarIconFontSize}"
+													Foreground="{ThemeResource InfoBarInformationalSeverityIconForeground}"
+													Text="{StaticResource InfoBarErrorIconGlyph}" />
+												<TextBlock
+													Grid.Column="1"
+													VerticalAlignment="Center"
+													Text="{helpers:ResourceString Name=InvalidTagNameWarning}" />
+											</Grid>
+
 											<Button
 												x:Name="CancelChangesButton"
 												Click="CancelRenameTag_Click"
@@ -264,7 +334,7 @@
 												x:Name="SaveChangesButton"
 												Click="CommitRenameTag_Click"
 												Content="{helpers:ResourceString Name=SaveChanges}"
-												IsEnabled="{x:Bind IsNameValid, Mode=OneWay}"
+												IsEnabled="{x:Bind CanCommit, Mode=OneWay}"
 												Style="{StaticResource AccentButtonStyle}" />
 										</StackPanel>
 									</Grid>

src/Files.App/Views/Settings/TagsPage.xaml.cs

@@ -1,5 +1,8 @@
+using CommunityToolkit.WinUI.Helpers;
 using CommunityToolkit.WinUI.UI;
+using Files.App.Helpers;
 using Files.Backend.ViewModels.FileTags;
+using Microsoft.UI;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Controls.Primitives;
@@ -29,6 +32,9 @@ private void RenameTextBox_KeyDown(object sender, KeyRoutedEventArgs e)
 			switch (e.Key)
 			{
 				case VirtualKey.Enter:
+					if (!editingTag!.CanCommit)
+						return;
+
 					CommitChanges(textBox);
 					e.Handled = true;
 					break;
@@ -40,11 +46,13 @@ private void EditTag_Click(object sender, RoutedEventArgs e)
 			if (editingTag is not null)
 			{
 				editingTag.IsEditing = false;
+				editingTag.NewName = editingTag.Tag.Name;
 				editingTag.NewColor = editingTag.Tag.Color;
 			}
 
 			editingTag = (ListedTagViewModel)((Button)sender).DataContext;
 			editingTag.NewColor = editingTag.Tag.Color;
+			editingTag.NewName = editingTag.Tag.Name;
 			editingTag.IsEditing = true;
 
 			var item = (ListViewItem)TagsList.ContainerFromItem(editingTag);
@@ -87,14 +95,29 @@ private void RemoveTag_Click(object sender, RoutedEventArgs e)
 		private void RenameTextBox_TextChanged(object sender, TextChangedEventArgs e)
 		{
 			var text = ((TextBox)sender).Text;
-			editingTag!.IsNameValid = IsNameValid(text);
+			editingTag!.IsNameValid = IsNameValid(text) && !ViewModel.Tags.Any(tag => tag.Tag.Name == text && editingTag!.Tag.Name != text);
+			editingTag!.CanCommit = editingTag!.IsNameValid && (
+				text != editingTag!.Tag.Name ||
+				editingTag!.NewColor != editingTag!.Tag.Color
+			);
+		}
+
+		private void EditColorPicker_ColorChanged(ColorPicker sender, ColorChangedEventArgs args)
+		{
+			if (editingTag is null)
+				return;
+
+			editingTag!.CanCommit = editingTag!.IsNameValid && (
+				editingTag!.NewName != editingTag!.Tag.Name ||
+				CommunityToolkit.WinUI.Helpers.ColorHelper.ToHex(sender.Color) != editingTag!.Tag.Color
+			);
 		}
 
 		private void NewTagTextBox_TextChanged(object sender, TextChangedEventArgs e)
 		{
 			var text = ((TextBox)sender).Text;
 			ViewModel.NewTag.Name = text;
-			ViewModel.NewTag.IsNameValid = IsNameValid(text);
+			ViewModel.NewTag.IsNameValid = IsNameValid(text) && !ViewModel.Tags.Any(tag => text == tag.Tag.Name);
 		}
 
 		private void KeyboardAccelerator_Invoked(KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)
@@ -124,6 +147,8 @@ private void CloseEdit()
 		{
 			var item = (ListViewItem)TagsList.ContainerFromItem(editingTag);
 			editingTag!.NewColor = editingTag.Tag.Color;
+			editingTag!.IsNameValid = true;
+			editingTag!.CanCommit = false;
 
 			EndEditing(item.FindDescendant("TagNameTextBox") as TextBox);
 		}
@@ -133,8 +158,7 @@ private bool IsNameValid(string name)
 			return !(
 				string.IsNullOrWhiteSpace(name) ||
 				name.StartsWith('.') ||
-				name.EndsWith('.') ||
-				(name != editingTag?.Tag.Name && ViewModel.Tags.Any(tag => name == tag.Tag.Name))
+				name.EndsWith('.')
 			);
 		}
 	}

src/Files.Backend/ViewModels/FileTags/ListedTagViewModel.cs

@@ -25,6 +25,20 @@ public bool IsNameValid
 			set => SetProperty(ref isNameValid, value);
 		}
 
+		private bool canCommit = false;
+		public bool CanCommit
+		{
+			get => canCommit;
+			set => SetProperty(ref canCommit, value);
+		}
+
+		private string newName;
+		public string NewName
+		{
+			get => newName;
+			set => SetProperty(ref newName, value);
+		}
+
 		private string newColor;
 		public string NewColor
 		{