Loadouts V3 (#736)

# Description

Resolves #723
Resolves #708
Resolves #691
Resolves #671
Resolves #643

Adding/removing loadouts and categories (and trait stuff) will require
disconnecting and reconnecting to the server (or anything that will
reload the lobby UI) due to how I've done my caching.

---

# TODO

- [x] Test entity IDs from loadouts
- [x] Better Tab Container
	- [x] Scroll props
	- [x] Margin props
	- [x] Make vertical work
	- [x] Merge buttons
- [x] Subcategories
	- [x] Allow the same for traits (their tab is completely broken)
- [x] Give the Job Picker tab a BoxContainer
- [x] Different selected unusable color
- [x] Deselect unusable button
- Sort menu/Reverse sort direction button
- [x] Fix scroll resetting on updating
	- [x] Cache loadouts
- [x] Ensure everything that can affect reqs updates everything that
checks reqs
- [x] More Requirements
	- [x] Height
	- [x] Width
	- [x] Weight
	- [x] Gender
	- [x] Sex
	- Markings
	- [x] Logic
		- [x] And
		- [x] Or
		- [x] Xor
	- [x] Item groups
- [x] #643
- Something better than `Exclusive`
	- Allow picking slots for things to go in (hands and inventories too)
- [x] Add a background to the loadout spriteView
- [x] Get better style colors
---
- [ ] More PRs
- [ ] Remove duplicate command loadouts that are outside the command
folders/categories
	- [ ] Categorize job loadouts (By dept?)
- [ ] Fix [every
loadout](https://discord.com/channels/1218698320155906090/1218698321053356060/1279260210208440361)'s
IDs (who reviewed them??)
		- [ ] Make loadout ID migrations?

---

<details><summary><h1>Media</h1></summary>
<p>

## New loadouts/traits UI

<!--

![image](https://github.com/user-attachments/assets/3b296f66-2502-49fb-8e24-5a98117bd5e5)


![image](https://github.com/user-attachments/assets/48b1ac49-6afb-49d4-ba6e-03a2551f6dfa)


![image](https://github.com/user-attachments/assets/6c10f68c-a858-478c-a880-f1ac2cf5f033)
-->


![image](https://github.com/user-attachments/assets/9a9c3f64-6ba4-40ea-a89e-d5f57efcf7c0)


![image](https://github.com/user-attachments/assets/3b6f0a36-a474-4ca6-a7c8-90c13e3faa0b)

## NeoTabContainer allows changing the tab orientation

### https://youtu.be/krg8TJoQG3I


![image](https://github.com/user-attachments/assets/81491ad9-45bd-41ed-833e-7295a2216a04)


![image](https://github.com/user-attachments/assets/deb72919-7efe-4be9-a661-b12aa7dc6976)

</p>
</details>

---

# Changelog

:cl:
- fix: The loadout/trait editors' performance has been improved by
100~1000x
- tweak: The character editor's tabs look, feel, and function much
better
- fix: Unusable loadouts/traits have an orange color when selected
- tweak: Loadout previews are now inside the button
- add: Added a button to remove any unusable loadouts (or traits) you
have selected
- add: Loadouts and traits can have subcategories, though only Command
loadouts use them at the moment
- fix: Fixed empty loadout categories not hiding
- fix: Fixed spacing on some loadout requirements' reason text
- fix: Fixed traits not updating after saving

Content.Client/Administration/UI/AdminUIHelpers.cs

@@ -50,7 +50,7 @@ public static bool TryConfirm(Button button, Dictionary<Button, ConfirmationData
             button.Text = data.OriginalText;
         }, data.Cancellation.Token);
 
-        button.ModulateSelfOverride = StyleNano.ButtonColorCautionDefault;
+        button.ModulateSelfOverride = StyleNano.ButtonColorDangerDefault;
         button.Text = Loc.GetString("admin-player-actions-confirm");
         return false;
     }

Content.Client/Changelog/ChangelogButton.cs

@@ -36,12 +36,12 @@ private void UpdateStuff()
             if (_changelogManager.NewChangelogEntries)
             {
                 Text = Loc.GetString("changelog-button-new-entries");
-                StyleClasses.Add(StyleBase.ButtonCaution);
+                StyleClasses.Add(StyleBase.ButtonDanger);
             }
             else
             {
                 Text = Loc.GetString("changelog-button");
-                StyleClasses.Remove(StyleBase.ButtonCaution);
+                StyleClasses.Remove(StyleBase.ButtonDanger);
             }
         }
     }

Content.Client/FlavorText/FlavorText.xaml

@@ -1,4 +1,4 @@
-<Control Name="CFlavorText" xmlns="https://spacestation14.io">
+<Control Name="CFlavorText" HorizontalExpand="True" xmlns="https://spacestation14.io">
     <BoxContainer Orientation="Vertical" HorizontalExpand="True">
         <TextEdit Name="CFlavorTextInput" Access="Public" MinSize="220 100" Margin="10" HorizontalExpand="True" VerticalExpand="True" />
     </BoxContainer>

Content.Client/Gateway/UI/GatewayWindow.xaml.cs

@@ -155,7 +155,7 @@ public void UpdateState(GatewayBoundUserInterfaceState state)
 
             if (Pressable())
             {
-                openButton.AddStyleClass(StyleBase.ButtonCaution);
+                openButton.AddStyleClass(StyleBase.ButtonDanger);
             }
 
             var buttonContainer = new BoxContainer()

Content.Client/LateJoin/LateJoinGui.cs

@@ -266,9 +266,10 @@ private void RebuildUI()
                                 prototype.Requirements ?? new(),
                                 prototype,
                                 (HumanoidCharacterProfile) (_prefs.Preferences?.SelectedCharacter
-                                    ?? HumanoidCharacterProfile.DefaultWithSpecies()),
+                                                            ?? HumanoidCharacterProfile.DefaultWithSpecies()),
                                 _jobRequirements.GetRawPlayTimeTrackers(),
                                 _jobRequirements.IsWhitelisted(),
+                                prototype,
                                 _entityManager,
                                 _prototypeManager,
                                 _configManager,

Content.Client/Options/UI/Tabs/KeyRebindTab.xaml.cs

@@ -478,7 +478,7 @@ public KeyControl(KeyRebindTab parent, BoundKeyFunction function)
 
                 BindButton1 = new BindButton(parent, this, StyleBase.ButtonOpenRight);
                 BindButton2 = new BindButton(parent, this, StyleBase.ButtonOpenLeft);
-                ResetButton = new Button { Text = Loc.GetString("ui-options-bind-reset"), StyleClasses = { StyleBase.ButtonCaution } };
+                ResetButton = new Button { Text = Loc.GetString("ui-options-bind-reset"), StyleClasses = { StyleBase.ButtonDanger } };
 
                 var hBox = new BoxContainer
                 {

Content.Client/Preferences/UI/AntagPreferenceSelector.cs

@@ -47,6 +47,7 @@ public AntagPreferenceSelector(AntagPrototype proto, JobPrototype highJob) : bas
                 (HumanoidCharacterProfile) (prefs.Preferences?.SelectedCharacter ?? HumanoidCharacterProfile.DefaultWithSpecies()),
                 requirements.GetRawPlayTimeTrackers(),
                 requirements.IsWhitelisted(),
+                proto,
                 entMan,
                 protoMan,
                 configMan,

Content.Client/Preferences/UI/CharacterSetupGui.xaml.cs

@@ -213,7 +213,7 @@ public CharacterPickerButton(
                     Text = Loc.GetString("character-setup-gui-character-picker-button-confirm-delete-button"),
                     Visible = false,
                 };
-                confirmDeleteButton.ModulateSelfOverride = StyleNano.ButtonColorCautionDefault;
+                confirmDeleteButton.ModulateSelfOverride = StyleNano.ButtonColorDangerDefault;
                 confirmDeleteButton.OnPressed += _ =>
                 {
                     Parent?.RemoveChild(this);

Content.Client/Preferences/UI/HumanoidProfileEditor.xaml

@@ -3,6 +3,7 @@
     xmlns:prefUi="clr-namespace:Content.Client.Preferences.UI"
     xmlns:humanoid="clr-namespace:Content.Client.Humanoid"
     xmlns:cc="clr-namespace:Content.Client.Administration.UI.CustomControls"
+    xmlns:ui="clr-namespace:Content.Client.UserInterface.Controls"
     HorizontalExpand="True">
     <!-- Left side -->
     <BoxContainer Orientation="Vertical" Margin="10 10 10 10" HorizontalExpand="True">
@@ -45,12 +46,12 @@
             </BoxContainer>
         </BoxContainer>
         <Control MinHeight="10" />
-        <!-- tabContainer -->
-        <TabContainer Name="CTabContainer" VerticalExpand="True">
-            <BoxContainer Orientation="Vertical">
-                <ScrollContainer VerticalExpand="True">
-                    <!-- appearanceList -->
-                    <BoxContainer Orientation="Vertical">
+        <!-- TabContainer -->
+        <ui:NeoTabContainer Name="CTabContainer" VerticalExpand="True" HScrollEnabled="False" VScrollEnabled="False">
+            <BoxContainer Name="CAppearance" HorizontalExpand="True" Orientation="Vertical">
+                <!-- appearanceList -->
+                <ScrollContainer HorizontalExpand="True" HScrollEnabled="True" VerticalExpand="True" VScrollEnabled="True">
+                    <BoxContainer HorizontalExpand="True" Orientation="Vertical">
                         <BoxContainer Margin="10" Orientation="Vertical" HorizontalExpand="True">
                             <!-- Species -->
                             <BoxContainer HorizontalExpand="True">
@@ -108,7 +109,7 @@
                                 <Control HorizontalExpand="True"/>
                                 <OptionButton Name="CSpawnPriorityButton" HorizontalAlignment="Right" />
                             </BoxContainer>
-							<!-- Height -->
+						    <!-- Height -->
                             <BoxContainer HorizontalExpand="True">
                                 <Label Name="CHeightLabel" MinWidth="110" />
                                 <Slider Name="CHeightSlider" MinValue="0.5" Value="1" MaxValue="1.5" HorizontalExpand="True" Margin="5 0 5 0" />
@@ -144,52 +145,76 @@
                     </BoxContainer>
                 </ScrollContainer>
             </BoxContainer>
-            <BoxContainer Orientation="Vertical">
+            <BoxContainer Name="CJobs" HorizontalExpand="True">
                 <!-- Jobs -->
-                <OptionButton Name="CPreferenceUnavailableButton" />
-                <ScrollContainer VerticalExpand="True">
-                    <BoxContainer Name="CJobList" Orientation="Vertical" />
+                <ScrollContainer HorizontalExpand="True" HScrollEnabled="True" VerticalExpand="True" VScrollEnabled="True">
+                    <BoxContainer HorizontalExpand="True" Orientation="Vertical">
+                        <OptionButton Name="CPreferenceUnavailableButton" StyleClasses="OpenBoth" />
+                        <BoxContainer Name="CJobList" Orientation="Vertical" />
+                    </BoxContainer>
                 </ScrollContainer>
-            </BoxContainer>
-            <BoxContainer Orientation="Vertical" Margin="10">
+                </BoxContainer>
+            <BoxContainer Name="CAntags" HorizontalExpand="True" Orientation="Vertical" Margin="10">
                 <!-- Antags -->
-                <ScrollContainer VerticalExpand="True">
+                <ScrollContainer HorizontalExpand="True" HScrollEnabled="True" VerticalExpand="True" VScrollEnabled="True">
                     <BoxContainer Name="CAntagList" Orientation="Vertical" />
                 </ScrollContainer>
             </BoxContainer>
-            <BoxContainer Name="CTraitsTab" Orientation="Vertical" Margin="10">
+            <BoxContainer Name="CTraitsTab" HorizontalExpand="True" Orientation="Vertical" Margin="10">
                 <!-- Traits -->
                 <Label Name="TraitPointsLabel" HorizontalAlignment="Stretch" Align="Center" />
                 <ProgressBar Name="TraitPointsBar" MaxValue="1" Value="1" MaxHeight="8" Margin="0 5" />
 
-                <Button Name="TraitsShowUnusableButton"
+                <BoxContainer HorizontalExpand="True" Margin="0 0 0 5">
+                    <Button
+                        Name="TraitsShowUnusableButton"
                         Text="{Loc 'humanoid-profile-editor-traits-show-unusable-button'}"
                         ToolTip="{Loc 'humanoid-profile-editor-traits-show-unusable-button-tooltip'}"
                         ToggleMode="True"
-                        Margin="0 0 0 5" />
+                        HorizontalAlignment="Stretch"
+                        HorizontalExpand="True"
+                        StyleClasses="OpenRight" />
+                    <Button
+                        Name="TraitsRemoveUnusableButton"
+                        Text="You shouldn't see this"
+                        ToolTip="{Loc 'humanoid-profile-editor-traits-remove-unusable-button-tooltip'}"
+                        HorizontalAlignment="Stretch"
+                        HorizontalExpand="True"
+                        StyleClasses="OpenLeft" />
+                </BoxContainer>
 
-                <TabContainer Name="CTraitsTabs" VerticalExpand="True" />
+                <ui:NeoTabContainer Name="CTraitsTabs" VerticalExpand="True" SeparatorMargin="0" />
             </BoxContainer>
-            <BoxContainer Name="CLoadoutsTab" Orientation="Vertical" Margin="10">
+            <BoxContainer Name="CLoadoutsTab" HorizontalExpand="True" Orientation="Vertical" Margin="10">
                 <!-- Loadouts -->
                 <Label Name="LoadoutPointsLabel" HorizontalAlignment="Stretch" Align="Center" />
                 <ProgressBar Name="LoadoutPointsBar" MaxValue="1" Value="1" MaxHeight="8" Margin="0 5" />
 
-                <Button Name="LoadoutsShowUnusableButton"
+                <BoxContainer HorizontalExpand="True" Margin="0 0 0 5">
+                    <Button
+                        Name="LoadoutsShowUnusableButton"
                         Text="{Loc 'humanoid-profile-editor-loadouts-show-unusable-button'}"
                         ToolTip="{Loc 'humanoid-profile-editor-loadouts-show-unusable-button-tooltip'}"
                         ToggleMode="True"
-                        Margin="0 0 0 5" />
+                        HorizontalAlignment="Stretch"
+                        HorizontalExpand="True"
+                        StyleClasses="OpenRight" />
+                    <Button
+                        Name="LoadoutsRemoveUnusableButton"
+                        Text="You shouldn't see this"
+                        ToolTip="{Loc 'humanoid-profile-editor-loadouts-remove-unusable-button-tooltip'}"
+                        HorizontalAlignment="Stretch"
+                        HorizontalExpand="True"
+                        StyleClasses="OpenLeft" />
+                </BoxContainer>
 
-                <TabContainer Name="CLoadoutsTabs" VerticalExpand="True" />
+                <ui:NeoTabContainer Name="CLoadoutsTabs" VerticalExpand="True" SeparatorMargin="0" />
             </BoxContainer>
-            <BoxContainer Name="CMarkingsTab" Orientation="Vertical" Margin="10">
+            <BoxContainer Name="CMarkingsTab" HorizontalExpand="True" Orientation="Vertical" Margin="10">
                 <!-- Markings -->
-                <ScrollContainer VerticalExpand="True">
-                    <humanoid:MarkingPicker Name="CMarkings" IgnoreCategories="Hair,FacialHair" />
-                </ScrollContainer>
+                <humanoid:MarkingPicker Name="CMarkings" IgnoreCategories="Hair,FacialHair" />
             </BoxContainer>
-        </TabContainer>
+        </ui:NeoTabContainer>
     </BoxContainer>
     <!-- Right side -->
     <BoxContainer Orientation="Vertical" VerticalExpand="True" VerticalAlignment="Center">