Add separate sidebar toggle button (#6077)

* Move sidebar toggle to right. Change icon
* Show sidebar button on selection
* Fix clicking toggle cycling visibility on smaller views
* Show more tags component when cutoff == 0
* Hide filter/filter icon buttons in certain situations
* Move sidebar toggle to left on xl viewports

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

@@ -23,6 +23,7 @@ import {
   faPencil,
   faPlay,
   faPlus,
+  faSliders,
   faTimes,
   faTrash,
 } from "@fortawesome/free-solid-svg-icons";
@@ -346,7 +347,7 @@ const ListToolbarContent: React.FC<{
   operations: IOperations[];
   onToggleSidebar: () => void;
   onSetFilter: (filter: ListFilterModel) => void;
-  onEditCriterion: (c: Criterion) => void;
+  onEditCriterion: (c?: Criterion) => void;
   onRemoveCriterion: (criterion: Criterion, valueIndex?: number) => void;
   onRemoveAllCriterion: () => void;
   onEditSearchTerm: () => void;
@@ -381,6 +382,17 @@ const ListToolbarContent: React.FC<{
   const { criteria, searchTerm } = filter;
   const hasSelection = selectedIds.size > 0;
 
+  const sidebarToggle = (
+    <Button
+      className="minimal sidebar-toggle-button ignore-sidebar-outside-click"
+      variant="secondary"
+      onClick={() => onToggleSidebar()}
+      title={intl.formatMessage({ id: "actions.sidebar.toggle" })}
+    >
+      <Icon icon={faSliders} />
+    </Button>
+  );
+
   return (
     <>
       {!hasSelection && (
@@ -390,9 +402,8 @@ const ListToolbarContent: React.FC<{
           </div>
           <div className="filter-section">
             <FilterButton
-              onClick={() => onToggleSidebar()}
+              onClick={() => onEditCriterion()}
               count={criteria.length}
-              title={intl.formatMessage({ id: "actions.sidebar.toggle" })}
             />
             <FilterTags
               searchTerm={searchTerm}
@@ -404,6 +415,7 @@ const ListToolbarContent: React.FC<{
               onRemoveSearchTerm={onRemoveSearchTerm}
               truncateOnOverflow
             />
+            {sidebarToggle}
           </div>
         </>
       )}
@@ -421,6 +433,7 @@ const ListToolbarContent: React.FC<{
           <Button variant="link" onClick={() => onSelectAll()}>
             <FormattedMessage id="actions.select_all" />
           </Button>
+          {sidebarToggle}
         </div>
       )}
       <div>
@@ -822,7 +835,7 @@ export const FilteredSceneList = (props: IFilteredScenes) => {
                 selectedIds={selectedIds}
                 operations={otherOperations}
                 onToggleSidebar={() => setShowSidebar(!showSidebar)}
-                onEditCriterion={(c) => showEditFilter(c.criterionOption.type)}
+                onEditCriterion={(c) => showEditFilter(c?.criterionOption.type)}
                 onRemoveCriterion={removeCriterion}
                 onRemoveAllCriterion={() => clearAllCriteria(true)}
                 onEditSearchTerm={() => {