feat(library): filter for enabled only

src/modules/library/api/useFilteredMods.ts

@@ -5,7 +5,8 @@ import { sortMods } from "@/modules/library/utils";
 import { useLibraryFilterStore } from "@/stores";
 
 export function useFilteredMods(mods: InstalledMod[], searchQuery: string): InstalledMod[] {
-  const { selectedTags, selectedChampions, selectedMaps, sort } = useLibraryFilterStore();
+  const { selectedTags, selectedChampions, selectedMaps, showOnlyEnabled, sort } =
+    useLibraryFilterStore();
 
   return useMemo(() => {
     let result = mods;
@@ -17,6 +18,10 @@ export function useFilteredMods(mods: InstalledMod[], searchQuery: string): Inst
       );
     }
 
+    if (showOnlyEnabled) {
+      result = result.filter((mod) => mod.enabled);
+    }
+
     if (selectedTags.size > 0) {
       result = result.filter((mod) => mod.tags.some((t) => selectedTags.has(t)));
     }
@@ -28,5 +33,5 @@ export function useFilteredMods(mods: InstalledMod[], searchQuery: string): Inst
     }
 
     return sortMods(result, sort);
-  }, [mods, searchQuery, selectedTags, selectedChampions, selectedMaps, sort]);
+  }, [mods, searchQuery, selectedTags, selectedChampions, selectedMaps, showOnlyEnabled, sort]);
 }

src/modules/library/components/FilterPopover.tsx

@@ -36,6 +36,8 @@ export function FilterPopover({ filterOptions }: FilterPopoverProps) {
     toggleChampion,
     toggleMap,
     clearFilters,
+    showOnlyEnabled,
+    setShowOnlyEnabled,
   } = useLibraryFilterStore();
   const hasActive = useHasActiveFilters();
   const [champSearch, setChampSearch] = useState("");
@@ -94,6 +96,17 @@ export function FilterPopover({ filterOptions }: FilterPopoverProps) {
             </div>
 
             <div className="space-y-3">
+              <div className="flex flex-col gap-1.5 pb-1">
+                <Checkbox
+                  size="sm"
+                  label="Show only enabled"
+                  checked={showOnlyEnabled}
+                  onCheckedChange={setShowOnlyEnabled}
+                />
+              </div>
+
+              <Separator />
+
               <FilterSection title="Tags">
                 <div className="flex flex-wrap gap-1.5">
                   {tags.map((tag) => (

src/stores/libraryFilter.ts

@@ -12,6 +12,7 @@ interface LibraryFilterStore {
   selectedTags: Set<string>;
   selectedChampions: Set<string>;
   selectedMaps: Set<string>;
+  showOnlyEnabled: boolean;
   sort: SortConfig;
 
   toggleTag: (tag: string) => void;
@@ -21,13 +22,15 @@ interface LibraryFilterStore {
   setChampions: (champions: Set<string>) => void;
   setMaps: (maps: Set<string>) => void;
   clearFilters: () => void;
+  setShowOnlyEnabled: (show: boolean) => void;
   setSort: (sort: SortConfig) => void;
 }
 
 export const useLibraryFilterStore = create<LibraryFilterStore>((set) => ({
   selectedTags: new Set(),
   selectedChampions: new Set(),
   selectedMaps: new Set(),
+  showOnlyEnabled: false,
   sort: { field: "priority", direction: "desc" },
 
   toggleTag: (tag) =>
@@ -63,13 +66,19 @@ export const useLibraryFilterStore = create<LibraryFilterStore>((set) => ({
       selectedTags: new Set(),
       selectedChampions: new Set(),
       selectedMaps: new Set(),
+      showOnlyEnabled: false,
     }),
 
+  setShowOnlyEnabled: (show) => set({ showOnlyEnabled: show }),
   setSort: (sort) => set({ sort }),
 }));
 
 export function useHasActiveFilters() {
   return useLibraryFilterStore(
-    (s) => s.selectedTags.size > 0 || s.selectedChampions.size > 0 || s.selectedMaps.size > 0,
+    (s) =>
+      s.selectedTags.size > 0 ||
+      s.selectedChampions.size > 0 ||
+      s.selectedMaps.size > 0 ||
+      s.showOnlyEnabled,
   );
 }