feat: initial support for segatools pkgs

src/components/ModStore.vue

@@ -1,24 +1,37 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { ref } from 'vue';
 import ModStoreEntry from './ModStoreEntry.vue';
 import { usePkgStore } from '../stores';
 
 const pkgs = usePkgStore();
+const empty = ref(true);
 
-onMounted(() => {
-    pkgs.fetch();
+const props = defineProps({
+    search: String,
 });
+
+const list = () => {
+    const res = pkgs.allRemote
+        .filter(
+            (p) =>
+                props.search === undefined ||
+                p.name.toLowerCase().includes(props.search.toLowerCase()) ||
+                p.namespace
+                    .toLowerCase()
+                    .includes(props.search.toLowerCase()) ||
+                p.description.toLowerCase().includes(props.search.toLowerCase())
+        )
+        .sort((p1, p2) => p1.name.localeCompare(p2.name));
+    empty.value = res.length === 0;
+    return res;
+};
 </script>
 
 <template>
-    <div
-        v-for="p in pkgs.allRemote.sort((p1, p2) =>
-            p1.name.localeCompare(p2.name)
-        )"
-        class="flex flex-row"
-    >
+    <div v-for="p in list()" class="flex flex-row">
         <ModStoreEntry :pkg="p" />
     </div>
+    <div v-if="empty" class="text-3xl">∅</div>
 </template>
 
 <style lang="scss">