feat: categories and option search

src/components/ModStore.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+import Divider from 'primevue/divider';
+import MultiSelect from 'primevue/multiselect';
+import ToggleSwitch from 'primevue/toggleswitch';
 import ModStoreEntry from './ModStoreEntry.vue';
 import { usePkgStore } from '../stores';
 
@@ -28,6 +31,37 @@ const list = () => {
 </script>
 
 <template>
+    <div class="flex gap-4 items-center">
+        <div class="flex flex-col gap-2">
+            <div class="flex gap-2">
+                <div class="text-amber-400 grow">Show deprecated</div>
+                <ToggleSwitch v-model="pkgs.showDeprecated" />
+            </div>
+            <div class="flex gap-2">
+                <div class="text-red-400 grow">Show NSFW</div>
+                <ToggleSwitch v-model="pkgs.showNSFW" />
+            </div>
+        </div>
+        <div class="flex flex-col gap-2 grow">
+            <MultiSelect
+                size="small"
+                :showToggleAll="false"
+                placeholder="Include categories"
+                v-model="pkgs.includeCategories"
+                :options="[...pkgs.availableCategories]"
+                class="w-full"
+            />
+            <MultiSelect
+                size="small"
+                :showToggleAll="false"
+                placeholder="Exclude categories"
+                v-model="pkgs.excludeCategories"
+                :options="[...pkgs.availableCategories]"
+                class="w-full"
+            />
+        </div>
+    </div>
+    <Divider />
     <div v-for="p in list()" class="flex flex-row">
         <ModStoreEntry :pkg="p" />
     </div>