Show filter tags in scene list toolbar (#5969)

* Add filter tags to toolbar
* Show overflow control if filter tags overflow
* Remove second set of filter tags from top of page
* Add border around filter area

ui/v2.5/src/components/Scenes/SceneList.tsx

@@ -62,6 +62,7 @@ import { FilterButton } from "../List/Filters/FilterButton";
 import { Icon } from "../Shared/Icon";
 import { ListViewOptions } from "../List/ListViewOptions";
 import { PageSizeSelector, SortBySelect } from "../List/ListFilter";
+import { Criterion } from "src/models/list-filter/criteria/criterion";
 
 function renderMetadataByline(result: GQL.FindScenesQueryResult) {
   const duration = result?.data?.findScenes?.duration;
@@ -316,11 +317,14 @@ interface IOperations {
 }
 
 const ListToolbarContent: React.FC<{
-  criteriaCount: number;
+  criteria: Criterion[];
   items: GQL.SlimSceneDataFragment[];
   selectedIds: Set<string>;
   operations: IOperations[];
   onToggleSidebar: () => void;
+  onEditCriterion: (c: Criterion) => void;
+  onRemoveCriterion: (criterion: Criterion, valueIndex?: number) => void;
+  onRemoveAllCriterion: () => void;
   onSelectAll: () => void;
   onSelectNone: () => void;
   onEdit: () => void;
@@ -328,11 +332,14 @@ const ListToolbarContent: React.FC<{
   onPlay: () => void;
   onCreateNew: () => void;
 }> = ({
-  criteriaCount,
+  criteria,
   items,
   selectedIds,
   operations,
   onToggleSidebar,
+  onEditCriterion,
+  onRemoveCriterion,
+  onRemoveAllCriterion,
   onSelectAll,
   onSelectNone,
   onEdit,
@@ -350,9 +357,16 @@ const ListToolbarContent: React.FC<{
         <div>
           <FilterButton
             onClick={() => onToggleSidebar()}
-            count={criteriaCount}
+            count={criteria.length}
             title={intl.formatMessage({ id: "actions.sidebar.toggle" })}
           />
+          <FilterTags
+            criteria={criteria}
+            onEditCriterion={onEditCriterion}
+            onRemoveCriterion={onRemoveCriterion}
+            onRemoveAll={onRemoveAllCriterion}
+            truncateOnOverflow
+          />
         </div>
       )}
       {hasSelection && (
@@ -730,11 +744,14 @@ export const FilteredSceneList = (props: IFilteredScenes) => {
               })}
             >
               <ListToolbarContent
-                criteriaCount={filter.count()}
+                criteria={filter.criteria}
                 items={items}
                 selectedIds={selectedIds}
                 operations={otherOperations}
                 onToggleSidebar={() => setShowSidebar(!showSidebar)}
+                onEditCriterion={(c) => showEditFilter(c.criterionOption.type)}
+                onRemoveCriterion={removeCriterion}
+                onRemoveAllCriterion={() => clearAllCriteria()}
                 onSelectAll={() => onSelectAll()}
                 onSelectNone={() => onSelectNone()}
                 onEdit={onEdit}
@@ -752,13 +769,6 @@ export const FilteredSceneList = (props: IFilteredScenes) => {
               onChangeFilter={(newFilter) => setFilter(newFilter)}
             />
 
-            <FilterTags
-              criteria={filter.criteria}
-              onEditCriterion={(c) => showEditFilter(c.criterionOption.type)}
-              onRemoveCriterion={removeCriterion}
-              onRemoveAll={() => clearAllCriteria()}
-            />
-
             <LoadedContent loading={result.loading} error={result.error}>
               <SceneList
                 filter={effectiveFilter}