simplify categories as well

Author: veryprofessionaldodo

src/frontend/components/UI/CategoryFilter/index.tsx

@@ -24,47 +24,16 @@ export default function CategoryFilter() {
     }
   }
 
-  const setCategoryOnly = (category: string) => {
-    setCurrentCustomCategories([category])
-  }
-
-  const selectAll = () => {
-    setCurrentCustomCategories(
-      ['preset_uncategorized'].concat(customCategories.listCategories())
-    )
-  }
-
-  const toggleWithOnly = (
-    toggle: JSX.Element,
-    onOnlyClicked: () => void,
-    category: string
-  ) => {
-    return (
-      <div className="toggleWithOnly" key={category}>
-        {toggle}
-        <button className="only" onClick={() => onOnlyClicked()}>
-          {t('header.only', 'only')}
-        </button>
-      </div>
-    )
-  }
-
-  const categoryToggle = (categoryName: string, categoryValue?: string) => {
-    const toggle = (
-      <ToggleSwitch
-        htmlId={categoryValue || categoryName}
-        handleChange={() => toggleCategory(categoryValue || categoryName)}
-        value={currentCustomCategories.includes(categoryValue || categoryName)}
-        title={categoryName}
-      />
-    )
-
-    const onOnlyClick = () => {
-      setCategoryOnly(categoryValue || categoryName)
-    }
+  const resetCategories = () => setCurrentCustomCategories([])
 
-    return toggleWithOnly(toggle, onOnlyClick, categoryValue || categoryName)
-  }
+  const categoryToggle = (categoryName: string, categoryValue?: string) => (
+    <ToggleSwitch
+      htmlId={categoryValue || categoryName}
+      handleChange={() => toggleCategory(categoryValue || categoryName)}
+      value={currentCustomCategories.includes(categoryValue || categoryName)}
+      title={categoryName}
+    />
+  )
 
   const categoriesList = customCategories.listCategories()
 
@@ -94,9 +63,9 @@ export default function CategoryFilter() {
         <button
           type="reset"
           className="button is-primary"
-          onClick={() => selectAll()}
+          onClick={() => resetCategories()}
         >
-          {t('header.select_all', 'Select All')}
+          {t('header.reset', 'Reset')}
         </button>
         <button
           className="button is-secondary is-small"

src/frontend/components/UI/LibraryFilters/index.css

@@ -60,29 +60,6 @@
       box-shadow: 4px 5px 5px 7px rgba(0, 0, 0, 0.2);
     }
   }
-
-  .toggleWithOnly {
-    display: flex;
-
-    & label {
-      flex-grow: 1;
-    }
-    .only {
-      opacity: 0.01;
-      background: none;
-      border: none;
-      color: var(--text);
-      text-decoration: underline;
-      cursor: pointer;
-      &:hover {
-        color: var(--accent);
-      }
-    }
-    &:hover .only,
-    &:focus-within .only {
-      opacity: 1;
-    }
-  }
 }
 
 body.isRTL .libraryFilters .dropdown {

src/frontend/components/UI/LibraryFilters/index.tsx

@@ -136,7 +136,7 @@ export default function LibraryFilters() {
       browser: false
     })
     setShowHidden(false)
-    setShowNonAvailable(true)
+    setShowNonAvailable(false)
     setShowFavourites(false)
     setShowInstalledOnly(false)
     setShowSupportOfflineOnly(false)