add search to marking editors (#15526)

Content.Client/Humanoid/MarkingPicker.xaml

@@ -5,23 +5,32 @@
         <BoxContainer Orientation="Horizontal" SeparationOverride="5" HorizontalExpand="True">
             <!-- Unused markings -->
             <BoxContainer Orientation="Vertical" HorizontalExpand="True">
-                <Label Text="{Loc 'markings-unused'}" />
+                <BoxContainer Orientation="Horizontal" HorizontalExpand="True">
-                <OptionButton Name="CMarkingCategoryButton" />
+                    <Label Text="{Loc 'markings-unused'}" HorizontalAlignment="Stretch" HorizontalExpand="True" />
+                    <Label Name="CMarkingPoints" Text="uwu" HorizontalAlignment="Right" />
+                </BoxContainer>
+
+                <OptionButton Name="CMarkingCategoryButton" StyleClasses="OpenLeft" />
+                <LineEdit Name="CMarkingSearch" PlaceHolder="{Loc 'markings-search'}" />
+
                 <ItemList Name="CMarkingsUnused" VerticalExpand="True" MinSize="300 250" />
-                <Label Name="CMarkingPoints" Text="uwu" />
+                <Button Name="CMarkingAdd" Text="{Loc 'markings-add'}" StyleClasses="OpenRight" />
-                <Button Name="CMarkingAdd" Text="{Loc 'markings-add'}" />
             </BoxContainer>
+
             <!-- Used markings -->
             <BoxContainer Orientation="Vertical" HorizontalExpand="True">
                 <Label Text="{Loc 'markings-used'}" />
+
                 <ItemList Name="CMarkingsUsed" VerticalExpand="True" MinSize="300 250" />
-                <BoxContainer Orientation="Horizontal" SeparationOverride="5">
+
-                    <Button Name="CMarkingRankUp" Text="{Loc 'markings-rank-up'}" HorizontalExpand="True" />
+                <BoxContainer Orientation="Horizontal">
-                    <Button Name="CMarkingRankDown" Text="{Loc 'markings-rank-down'}" HorizontalExpand="True" />
+                    <Button Name="CMarkingRankUp" Text="{Loc 'markings-rank-up'}" StyleClasses="OpenBoth" HorizontalExpand="True" />
+                    <Button Name="CMarkingRankDown" Text="{Loc 'markings-rank-down'}" StyleClasses="OpenBoth" HorizontalExpand="True" />
                 </BoxContainer>
-                <Button Name="CMarkingRemove" Text="{Loc 'markings-remove'}" />
+                <Button Name="CMarkingRemove" Text="{Loc 'markings-remove'}" StyleClasses="OpenRight" />
             </BoxContainer>
         </BoxContainer>
+
         <!-- Colors -->
         <BoxContainer Name="CMarkingColors" Orientation="Vertical" Visible="False" />
     </BoxContainer>

Content.Client/Humanoid/MarkingPicker.xaml.cs

@@ -73,7 +73,7 @@ public sealed partial class MarkingPicker : Control
         set
         {
             _ignoreSpecies = value;
-            Populate();
+            Populate(CMarkingSearch.Text);
         }
     }
 
@@ -92,7 +92,7 @@ public sealed partial class MarkingPicker : Control
         CurrentSkinColor = skinColor;
         CurrentEyeColor = eyeColor;
 
-        Populate();
+        Populate(CMarkingSearch.Text);
         PopulateUsed();
     }
 
@@ -109,7 +109,7 @@ public sealed partial class MarkingPicker : Control
         CurrentSkinColor = skinColor;
         CurrentEyeColor = eyeColor;
 
-        Populate();
+        Populate(CMarkingSearch.Text);
         PopulateUsed();
     }
 
@@ -136,6 +136,8 @@ public sealed partial class MarkingPicker : Control
 
         CMarkingRankUp.OnPressed += _ => SwapMarkingUp();
         CMarkingRankDown.OnPressed += _ => SwapMarkingDown();
+
+        CMarkingSearch.OnTextChanged += args => Populate(args.Text);
     }
 
     private void SetupCategoryButtons()
@@ -174,7 +176,7 @@ public sealed partial class MarkingPicker : Control
         return result;
     }
 
-    public void Populate()
+    public void Populate(string filter)
     {
         CMarkingsUnused.Clear();
         _selectedUnusedMarking = null;
@@ -183,8 +185,12 @@ public sealed partial class MarkingPicker : Control
             ? _markingManager.MarkingsByCategory(_selectedMarkingCategory)
             : _markingManager.MarkingsByCategoryAndSpecies(_selectedMarkingCategory, _currentSpecies);
 
-        var sortedMarkings = markings.OrderBy(p => Loc.GetString(GetMarkingName(p.Value)));
+        var sortedMarkings = markings.Values.Where(m =>
-        foreach (var (_, marking) in sortedMarkings)
+            m.ID.ToLower().Contains(filter.ToLower()) ||
+            GetMarkingName(m).ToLower().Contains(filter.ToLower())
+        ).OrderBy(p => Loc.GetString(GetMarkingName(p)));
+
+        foreach (var marking in sortedMarkings)
         {
             if (_currentMarkings.TryGetMarking(_selectedMarkingCategory, marking.ID, out _))
             {
@@ -314,7 +320,7 @@ public sealed partial class MarkingPicker : Control
         _currentMarkings = new(markingList, speciesPrototype.MarkingPoints, _markingManager, _prototypeManager);
         _currentMarkings.EnsureSpecies(species, null, _markingManager);
 
-        Populate();
+        Populate(CMarkingSearch.Text);
         PopulateUsed();
     }
 
@@ -331,7 +337,7 @@ public sealed partial class MarkingPicker : Control
     {
         CMarkingCategoryButton.SelectId(category.Id);
         _selectedMarkingCategory = _markingCategories[category.Id];
-        Populate();
+        Populate(CMarkingSearch.Text);
         PopulateUsed();
         UpdatePoints();
     }

Content.Client/Humanoid/SingleMarkingPicker.xaml

@@ -5,15 +5,18 @@
     <!-- "Slot" selection -->
     <Label Name="CategoryName" />
     <BoxContainer Name="SlotSelectorContainer" HorizontalExpand="True">
-        <OptionButton Name="SlotSelector" HorizontalExpand="True" />
+        <OptionButton Name="SlotSelector" HorizontalExpand="True" StyleClasses="OpenBoth" />
-        <Button Name="AddButton" Text="{Loc 'marking-slot-add'}"/>
+        <Button Name="AddButton" Text="{Loc 'marking-slot-add'}" StyleClasses="OpenBoth" />
-        <Button Name="RemoveButton" Text="{Loc 'marking-slot-remove'}"/>
+        <Button Name="RemoveButton" Text="{Loc 'marking-slot-remove'}" StyleClasses="OpenLeft" />
     </BoxContainer>
+    <LineEdit Name="Search" PlaceHolder="{Loc 'markings-search'}" HorizontalExpand="True" />
+
     <!-- Item list -->
     <BoxContainer Name="MarkingSelectorContainer" Orientation="Vertical" HorizontalExpand="True" VerticalExpand="True">
         <ScrollContainer MinHeight="500" VerticalExpand="True" HorizontalExpand="True">
             <ItemList Name="MarkingList" VerticalExpand="True" />
         </ScrollContainer>
+
         <!-- Color sliders -->
         <ScrollContainer MinHeight="200" HorizontalExpand="True">
             <BoxContainer Name="ColorSelectorContainer" HorizontalExpand="True" />

Content.Client/Humanoid/SingleMarkingPicker.xaml.cs

@@ -10,7 +10,7 @@ namespace Content.Client.Humanoid;
 [GenerateTypedNameReferences]
 public sealed partial class SingleMarkingPicker : BoxContainer
 {
-    [Dependency] private MarkingManager _markingManager = default!;
+    [Dependency] private readonly MarkingManager _markingManager = default!;
 
     /// <summary>
     ///     What happens if a marking is selected.
@@ -89,7 +89,7 @@ public sealed partial class SingleMarkingPicker : BoxContainer
 
             if (!string.IsNullOrEmpty(_species))
             {
-                PopulateList();
+                PopulateList(Search.Text);
             }
         }
     }
@@ -138,6 +138,11 @@ public sealed partial class SingleMarkingPicker : BoxContainer
         {
             OnSlotRemove!(_slot);
         };
+
+        Search.OnTextChanged += args =>
+        {
+            PopulateList(args.Text);
+        };
     }
 
     public void UpdateData(List<Marking> markings, string species, int totalPoints)
@@ -154,12 +159,12 @@ public sealed partial class SingleMarkingPicker : BoxContainer
             return;
         }
 
-        PopulateList();
+        PopulateList(Search.Text);
         PopulateColors();
         PopulateSlotSelector();
     }
 
-    public void PopulateList()
+    public void PopulateList(string filter)
     {
         if (string.IsNullOrEmpty(_species))
         {
@@ -176,7 +181,11 @@ public sealed partial class SingleMarkingPicker : BoxContainer
 
         MarkingList.Clear();
 
-        var sortedMarkings = _markingPrototypeCache.OrderBy(p => Loc.GetString($"marking-{p.Key}"));
+        var sortedMarkings = _markingPrototypeCache.Where(m =>
+            m.Key.ToLower().Contains(filter.ToLower()) ||
+            GetMarkingName(m.Value).ToLower().Contains(filter.ToLower())
+        ).OrderBy(p => Loc.GetString($"marking-{p.Key}"));
+
         foreach (var (id, marking) in sortedMarkings)
         {
             var item = MarkingList.AddItem(Loc.GetString($"marking-{id}"), marking.Sprites[0].Frame0());
@@ -260,6 +269,7 @@ public sealed partial class SingleMarkingPicker : BoxContainer
     private void PopulateSlotSelector()
     {
         SlotSelector.Visible = Slot >= 0;
+        Search.Visible = Slot >= 0;
         AddButton.HorizontalExpand = Slot < 0;
         RemoveButton.HorizontalExpand = Slot < 0;
         AddButton.Disabled = PointsLeft == 0 && _totalPoints > -1 ;
@@ -281,4 +291,9 @@ public sealed partial class SingleMarkingPicker : BoxContainer
             }
         }
     }
+
+    private string GetMarkingName(MarkingPrototype marking)
+    {
+        return Loc.GetString($"marking-{marking.ID}");
+    }
 }

Resources/Locale/en-US/preferences/ui/markings-picker.ftl

@@ -4,6 +4,7 @@ markings-add = Add Marking
 markings-remove = Remove Marking
 markings-rank-up = Up
 markings-rank-down = Down
+markings-search = Search
 marking-points-remaining = Markings left: {$points}
 marking-used = {$marking-name}
 marking-used-forced = {$marking-name} (Forced)