From a2906b9140ef8319ff1687a6d5d5ff9a17fde9f9 Mon Sep 17 00:00:00 2001
From: phroggster <phroggster@users.noreply.github.com>
Date: Sat, 6 Jul 2024 08:12:57 -0500
Subject: [PATCH 1/2] Feat: Add filtering to Create New Setup components

- Sorting subjectively feels to be the incorrect solution.
- Instead, here's filtering, enabled for all component types.
- Can filter by name, or by component ID.
- As such, filtered results will likely cause additional items until 3-4
  letters of the search text have been entered.

Implements #1994
---
 .../modals/setups/firebot-component-list-modal.js     | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/gui/app/directives/modals/setups/firebot-component-list-modal.js b/src/gui/app/directives/modals/setups/firebot-component-list-modal.js
index f94df9b83..e58f48614 100644
--- a/src/gui/app/directives/modals/setups/firebot-component-list-modal.js
+++ b/src/gui/app/directives/modals/setups/firebot-component-list-modal.js
@@ -12,8 +12,11 @@
                     <div id="roles" class="modal-subheader" style="padding: 0 0 4px 0">
                         {{$ctrl.label}}
                     </div>
+                    <div style="height: 55px; display: flex; align-items: center;">
+                        <searchbar search-id="componentSearch" placeholder-text="Search {{$ctrl.label}}..." query="$ctrl.componentSearch" style="width: 100%;"></searchbar>
+                    </div>
                     <div class="viewer-group-list" style="height: inherit; min-height: 100px;max-height: 300px;">
-                        <label ng-repeat="component in $ctrl.allComponents track by component.id" class="control-fb control--checkbox">{{component.name}}
+                        <label ng-repeat="component in $ctrl.allComponents | filter:$ctrl.componentSearch track by component.id" class="control-fb control--checkbox">{{component.name}}
                             <input type="checkbox" ng-click="$ctrl.toggleComponentSelected(component.id)" ng-checked="$ctrl.componentIsSelected(component.id)"  aria-label="..." >
                             <div class="control__indicator"></div>
                         </label>
@@ -29,7 +32,7 @@
                 close: "&",
                 dismiss: "&"
             },
-            controller: function() {
+            controller: function($timeout) {
                 const $ctrl = this;
 
                 $ctrl.label = "";
@@ -56,6 +59,10 @@
                     if ($ctrl.resolve.selectedIds) {
                         $ctrl.selectedIds = $ctrl.resolve.selectedIds;
                     }
+
+                    $timeout(() => {
+                        angular.element("#componentSearch").trigger("focus");
+                    }, 50);
                 };
 
                 $ctrl.save = () => {

From 5fdd9a86517679fd77e47f37ea32c317defed52f Mon Sep 17 00:00:00 2001
From: phroggster <phroggster@users.noreply.github.com>
Date: Mon, 8 Jul 2024 09:16:49 -0500
Subject: [PATCH 2/2] Feat: Add sort tags to Create New Setup filtering

This is pretty slick now, but I think I need to display the tags.
Three steps forward, two steps back? Or is this 2-3?
---
 src/gui/app/directives/modals/setups/create-setup-modal.js | 5 +++--
 src/gui/app/services/sort-tags.service.js                  | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/gui/app/directives/modals/setups/create-setup-modal.js b/src/gui/app/directives/modals/setups/create-setup-modal.js
index 703066638..7fb980931 100644
--- a/src/gui/app/directives/modals/setups/create-setup-modal.js
+++ b/src/gui/app/directives/modals/setups/create-setup-modal.js
@@ -84,7 +84,7 @@
             controller: function(commandsService, countersService, currencyService,
                 effectQueuesService, eventsService, hotkeyService, presetEffectListsService,
                 timerService, viewerRolesService, quickActionsService, accountAccess, utilityService,
-                ngToast, backendCommunicator, $q) {
+                ngToast, backendCommunicator, sortTagsService, $q) {
 
                 const $ctrl = this;
 
@@ -161,7 +161,8 @@
                     const components = componentConfig.all.map(c => {
                         return {
                             id: c.id,
-                            name: c[componentConfig.nameField]
+                            name: c[componentConfig.nameField],
+                            tags: sortTagsService.getSortTagsForItem(componentConfig.key, c.sortTags).map(st => st.name)
                         };
                     });
                     const selectedIds = $ctrl.setup.components[componentConfig.key].map(c => c.id);
diff --git a/src/gui/app/services/sort-tags.service.js b/src/gui/app/services/sort-tags.service.js
index 06b11f262..197b045e6 100644
--- a/src/gui/app/services/sort-tags.service.js
+++ b/src/gui/app/services/sort-tags.service.js
@@ -75,7 +75,7 @@
             /**
              * @param {string} context
              * @param {string[]} tagIds
-             * @returns {string[]}
+             * @returns {SortTag[]}
              */
             service.getSortTagsForItem = (context, tagIds) => {
                 if (context == null || tagIds == null) {