feat: initial support for segatools pkgs

src/components/App.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { Ref, computed, onMounted, ref } from 'vue';
 import Button from 'primevue/button';
+import InputIcon from 'primevue/inputicon';
+import InputText from 'primevue/inputtext';
 import Tab from 'primevue/tab';
 import TabList from 'primevue/tablist';
 import TabPanel from 'primevue/tabpanel';
@@ -21,7 +23,9 @@ const general = useGeneralStore();
 
 pkg.setupListeners();
 
-const currentTab = ref('3');
+const currentTab: Ref<string | number> = ref(3);
+const searchPkg = ref('');
+const searchCfg = ref('');
 
 const isProfileDisabled = computed(() => prf.current === null);
 
@@ -30,47 +34,81 @@ onMounted(async () => {
         general.dirs = d as Dirs;
     });
 
+    const fetch_promise = pkg.fetch();
+
     await Promise.all([prf.reloadList(), prf.reload()]);
 
     if (prf.current !== null) {
         await pkg.reloadAll();
-        currentTab.value = '0';
+        currentTab.value = 0;
     }
+
+    fetch_promise.then(async () => {
+        await invoke('install_package', {
+            key: 'segatools-mu3hook',
+            force: false,
+        });
+    });
 });
 </script>
 
 <template>
     <main>
-        <Tabs lazy :value="currentTab" class="h-screen">
+        <Tabs
+            lazy
+            :value="currentTab"
+            v-on:update:value="(value) => (currentTab = value)"
+            class="h-screen"
+        >
             <div class="fixed w-full flex z-100">
                 <TabList class="grow">
-                    <Tab :disabled="isProfileDisabled" value="0"
+                    <Tab :disabled="isProfileDisabled" :value="0"
                         ><div class="pi pi-list-check"></div
                     ></Tab>
-                    <Tab :disabled="isProfileDisabled" value="1"
+                    <Tab :disabled="isProfileDisabled" :value="1"
                         ><div class="pi pi-download"></div
                     ></Tab>
-                    <Tab :disabled="isProfileDisabled" value="2"
+                    <Tab :disabled="isProfileDisabled" :value="2"
                         ><div class="pi pi-cog"></div
                     ></Tab>
-                    <Tab value="3"
+                    <Tab :value="3"
                         ><div class="pi pi-question-circle"></div
                     ></Tab>
                     <div class="grow"></div>
+                    <div class="flex" v-if="currentTab !== 3">
+                        <InputIcon class="self-center mr-2">
+                            <i class="pi pi-search" />
+                        </InputIcon>
+                        <InputText
+                            v-if="currentTab === 2"
+                            class="self-center"
+                            size="small"
+                            placeholder="Search"
+                            v-model="searchCfg"
+                        />
+                        <InputText
+                            v-else
+                            class="self-center"
+                            size="small"
+                            placeholder="Search"
+                            v-model="searchPkg"
+                        />
+                    </div>
+                    <div class="grow"></div>
                     <StartButton />
                 </TabList>
             </div>
             <TabPanels class="w-full grow mt-[3rem]">
-                <TabPanel value="0">
-                    <ModList />
+                <TabPanel :value="0">
+                    <ModList :search="searchPkg" />
                 </TabPanel>
-                <TabPanel value="1">
-                    <ModStore />
+                <TabPanel :value="1">
+                    <ModStore :search="searchPkg" />
                 </TabPanel>
-                <TabPanel value="2">
+                <TabPanel :value="2">
                     <OptionList />
                 </TabPanel>
-                <TabPanel value="3">
+                <TabPanel :value="3">
                     <strong>UNDER CONSTRUCTION</strong><br />Some features are
                     missing.<br />Existing features are expected to break
                     sometimes.