Show search field always (#6079)

ui/v2.5/src/components/List/Filters/FilterSidebar.tsx

@@ -68,20 +68,6 @@ export function useFilteredSidebarKeybinds(props: {
 }) {
   const { showSidebar, setShowSidebar } = props;
 
-  // Show the sidebar when the user presses the "/" key
-  useEffect(() => {
-    Mousetrap.bind("/", (e) => {
-      if (!showSidebar) {
-        setShowSidebar(true);
-        e.preventDefault();
-      }
-    });
-
-    return () => {
-      Mousetrap.unbind("/");
-    };
-  }, [showSidebar, setShowSidebar]);
-
   // Hide the sidebar when the user presses the "Esc" key
   useEffect(() => {
     Mousetrap.bind("esc", (e) => {

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
+          <div className="search-container">
-            onClick={() => onToggleSidebar()}
+            <SearchTermInput filter={filter} onFilterUpdate={onSetFilter} />
-            count={criteria.length}
+          </div>
-            title={intl.formatMessage({ id: "actions.sidebar.toggle" })}
+          <div className="filter-section">
-          />
+            <FilterButton
-          <FilterTags
+              onClick={() => onToggleSidebar()}
-            criteria={criteria}
+              count={criteria.length}
-            onEditCriterion={onEditCriterion}
+              title={intl.formatMessage({ id: "actions.sidebar.toggle" })}
-            onRemoveCriterion={onRemoveCriterion}
+            />
-            onRemoveAll={onRemoveAllCriterion}
+            <FilterTags
-            truncateOnOverflow
+              criteria={criteria}
-          />
+              onEditCriterion={onEditCriterion}
-        </div>
+              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}

ui/v2.5/src/components/Scenes/styles.scss

@@ -1063,7 +1063,7 @@ input[type="range"].blue-slider {
     }
   }
 
-  > div:first-child {
+  > div.filter-section {
     border: 1px solid $secondary;
     border-radius: 0.25rem;
     flex-grow: 1;
@@ -1075,6 +1075,23 @@ input[type="range"].blue-slider {
     }
   }
 
+  .search-container {
+    border-right: 1px solid $secondary;
+    display: block;
+    margin-right: -0.5rem;
+    padding-right: 10px;
+    width: calc($sidebar-width - 15px);
+
+    .search-term-input {
+      margin-right: 0;
+      width: 100%;
+
+      .clearable-text-field {
+        height: 100%;
+      }
+    }
+  }
+
   .filter-tags {
     flex-grow: 1;
     flex-wrap: nowrap;
@@ -1093,6 +1110,17 @@ input[type="range"].blue-slider {
   }
 }
 
+@include media-breakpoint-up(xl) {
+  .sidebar-pane:not(.hide-sidebar) .scene-list-toolbar .search-container {
+    display: none;
+  }
+}
+@include media-breakpoint-down(md) {
+  .sidebar-pane.hide-sidebar .scene-list-toolbar .search-container {
+    display: none;
+  }
+}
+
 .scene-list-header {
   flex-wrap: wrap-reverse;
   gap: 0.5rem;

ui/v2.5/src/components/Shared/styles.scss

@@ -755,8 +755,6 @@ button.btn.favorite-button {
   }
 }
 
-$sidebar-width: 250px;
-
 .sidebar-pane {
   display: flex;
 

ui/v2.5/src/index.scss

@@ -5,6 +5,8 @@ $navbar-height: 48.75px;
 
 $sticky-detail-header-height: 50px;
 
+$sidebar-width: 250px;
+
 @import "styles/theme";
 @import "styles/range";
 @import "styles/scrollbars";