Show search field always (#6079)

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

@@ -61,7 +61,11 @@ import { Button, ButtonGroup, ButtonToolbar } from "react-bootstrap";
 import { FilterButton } from "../List/Filters/FilterButton";
 import { Icon } from "../Shared/Icon";
 import { ListViewOptions } from "../List/ListViewOptions";
-import { PageSizeSelector, SortBySelect } from "../List/ListFilter";
+import {
+  PageSizeSelector,
+  SearchTermInput,
+  SortBySelect,
+} from "../List/ListFilter";
 import { Criterion } from "src/models/list-filter/criteria/criterion";
 
 function renderMetadataByline(result: GQL.FindScenesQueryResult) {
@@ -332,11 +336,12 @@ interface IOperations {
 }
 
 const ListToolbarContent: React.FC<{
-  criteria: Criterion[];
+  filter: ListFilterModel;
   items: GQL.SlimSceneDataFragment[];
   selectedIds: Set<string>;
   operations: IOperations[];
   onToggleSidebar: () => void;
+  onSetFilter: (filter: ListFilterModel) => void;
   onEditCriterion: (c: Criterion) => void;
   onRemoveCriterion: (criterion: Criterion, valueIndex?: number) => void;
   onRemoveAllCriterion: () => void;
@@ -347,11 +352,12 @@ const ListToolbarContent: React.FC<{
   onPlay: () => void;
   onCreateNew: () => void;
 }> = ({
-  criteria,
+  filter,
   items,
   selectedIds,
   operations,
   onToggleSidebar,
+  onSetFilter,
   onEditCriterion,
   onRemoveCriterion,
   onRemoveAllCriterion,
@@ -364,25 +370,31 @@ const ListToolbarContent: React.FC<{
 }) => {
   const intl = useIntl();
 
+  const { criteria } = filter;
   const hasSelection = selectedIds.size > 0;
 
   return (
     <>
       {!hasSelection && (
-        <div>
-          <FilterButton
-            onClick={() => onToggleSidebar()}
-            count={criteria.length}
-            title={intl.formatMessage({ id: "actions.sidebar.toggle" })}
-          />
-          <FilterTags
-            criteria={criteria}
-            onEditCriterion={onEditCriterion}
-            onRemoveCriterion={onRemoveCriterion}
-            onRemoveAll={onRemoveAllCriterion}
-            truncateOnOverflow
-          />
-        </div>
+        <>
+          <div className="search-container">
+            <SearchTermInput filter={filter} onFilterUpdate={onSetFilter} />
+          </div>
+          <div className="filter-section">
+            <FilterButton
+              onClick={() => onToggleSidebar()}
+              count={criteria.length}
+              title={intl.formatMessage({ id: "actions.sidebar.toggle" })}
+            />
+            <FilterTags
+              criteria={criteria}
+              onEditCriterion={onEditCriterion}
+              onRemoveCriterion={onRemoveCriterion}
+              onRemoveAll={onRemoveAllCriterion}
+              truncateOnOverflow
+            />
+          </div>
+        </>
       )}
       {hasSelection && (
         <div className="selected-items-info">
@@ -789,7 +801,8 @@ export const FilteredSceneList = (props: IFilteredScenes) => {
               })}
             >
               <ListToolbarContent
-                criteria={filter.criteria}
+                filter={filter}
+                onSetFilter={setFilter}
                 items={items}
                 selectedIds={selectedIds}
                 operations={otherOperations}