feat: multi-profile progress

rust/tauri.conf.json

@@ -2,7 +2,7 @@
     "$schema": "https://schema.tauri.app/config/2",
     "productName": "STARTLINER",
     "version": "0.1.0",
-    "identifier": "moe.tendokyu.akanyan.startliner",
+    "identifier": "zip.patafour.startliner",
     "build": {
         "beforeDevCommand": "bun run dev",
         "devUrl": "http://localhost:1420",

src/components/App.vue

@@ -73,31 +73,22 @@ onMounted(async () => {
                 </TabPanel>
                 <TabPanel value="3">
                     <strong>UNDER CONSTRUCTION</strong><br />Some features are
-                    missing.<br />Existing features are expected to break any
+                    missing.<br />Existing features are expected to break
-                    time.
+                    sometimes.
                     <ProfileList />
                     <img
                         v-if="prf.current?.game === 'ongeki'"
                         src="/sticker-ongeki.svg"
-                        class="fixed bottom-0 right-0"
+                        class="fixed bottom-0 right-0 z-999"
                     />
                     <img
                         v-else-if="prf.current?.game === 'chunithm'"
                         src="/sticker-chunithm.svg"
-                        class="fixed bottom-0 right-0"
+                        class="fixed bottom-0 right-0 z-999"
                     />
                     <br /><br /><br />
-                    <footer
+                    <footer>
-                        style="
-                            position: fixed;
-                            left: 0px;
-                            bottom: 0px;
-                            height: 40px;
-                            width: 100%;
-                        "
-                    >
                         <Button
-                            style="margin-left: 6px"
                             icon="pi pi-discord"
                             as="a"
                             target="_blank"

src/components/ModListEntry.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import Button from 'primevue/button';
 import ToggleSwitch from 'primevue/toggleswitch';
 import { open } from '@tauri-apps/plugin-shell';
@@ -14,9 +15,14 @@ const props = defineProps({
     pkg: Object as () => Package,
 });
 
-const toggle = async (value: boolean) => {
+const model = computed({
+    get() {
+        return prf.isPkgEnabled(props.pkg).value;
+    },
+    async set(value: boolean) {
         await prf.togglePkg(props.pkg, value);
-};
+    },
+});
 </script>
 
 <template>
@@ -28,8 +34,7 @@ const toggle = async (value: boolean) => {
             class="scale-[1.33] shrink-0"
             inputId="switch"
             :disabled="!pkg?.loc"
-            :model-value="prf.isPkgEnabled(pkg)"
+            v-model="model"
-            v-on:value-change="toggle"
         />
         <InstallButton :pkg="pkg" />
         <Button
@@ -43,6 +48,7 @@ const toggle = async (value: boolean) => {
             v-on:click="pkg?.loc && open(pkg.loc.path ?? '')"
         />
         <Button
+            v-if="pkg?.rmt"
             rounded
             icon="pi pi-external-link"
             severity="info"
@@ -50,7 +56,7 @@ const toggle = async (value: boolean) => {
             size="small"
             class="ml-2 shrink-0"
             style="width: 2rem; height: 2rem"
-            v-on:click="pkg?.rmt && open(pkg.rmt.package_url ?? '')"
+            v-on:click="open(pkg.rmt.package_url ?? '')"
         />
     </div>
 </template>

src/components/OptionList.vue

@@ -71,7 +71,7 @@ const extraDisplayOptionsDisabled = computed(() => {
 
 (async () => {
     const aime_path = await path.join(await prf.configDir, 'aime.txt');
-    aimeCode.value = await readTextFile(aime_path);
+    aimeCode.value = await readTextFile(aime_path).catch(() => '');
 })();
 </script>
 
@@ -227,6 +227,15 @@ const extraDisplayOptionsDisabled = computed(() => {
                 :model-value="prf.cfgAny('subnet', '')"
             />
         </OptionRow>
+        <OptionRow title="Address suffix">
+            <InputText
+                class="shrink"
+                size="small"
+                :maxlength="3"
+                placeholder="12"
+                :model-value="prf.cfgAny('addrsuffix', '')"
+            />
+        </OptionRow>
     </OptionCategory>
     <OptionCategory title="Misc">
         <OptionRow title="OpenSSL bug workaround for Intel ≥10th gen">
@@ -250,6 +259,8 @@ const extraDisplayOptionsDisabled = computed(() => {
         <OptionRow title="More segatools options">
             <FileEditor filename="segatools-base.ini" />
         </OptionRow>
+    </OptionCategory>
+    <OptionCategory title="Extensions">
         <OptionRow title="Inohara config">
             <FileEditor
                 filename="inohara.cfg"

src/components/ProfileList.vue

@@ -6,26 +6,27 @@ const prf = usePrfStore();
 </script>
 
 <template>
-    <div class="mt-4 flex flex-wrap align-middle gap-4">
+    <div class="mt-4 flex flex-row flex-wrap align-middle gap-4">
         <Button
-            :disabled="prf.list.length > 0"
             label="O.N.G.E.K.I. profile"
             icon="pi pi-plus"
-            class="ongeki-button"
+            class="ongeki-button profile-button"
             @click="() => prf.create('ongeki')"
         />
         <Button
-            :disabled="prf.list.length > 0"
             label="CHUNITHM profile"
             icon="pi pi-plus"
-            class="chunithm-button"
+            class="chunithm-button profile-button"
             @click="() => prf.create('chunithm')"
         />
-
+    </div>
+    <div class="mt-12 flex flex-col flex-wrap align-middle gap-4">
         <div v-for="p in prf.list">
+            <div class="flex flex-row flex-wrap align-middle gap-2">
                 <Button
                     :disabled="
-                    prf.current?.game === p.game && prf.current?.name === p.name
+                        prf.current?.game === p.game &&
+                        prf.current?.name === p.name
                     "
                     :label="p.name"
                     :class="
@@ -33,31 +34,54 @@ const prf = usePrfStore();
                             ? 'chunithm-button'
                             : 'ongeki-button') +
                         ' ' +
-                    'self-center grow'
+                        'self-center profile-button'
                     "
                     @click="prf.switchTo(p.game, p.name)"
                 />
+                <Button
+                    rounded
+                    icon="pi pi-trash"
+                    severity="danger"
+                    aria-label="remove"
+                    size="small"
+                    class="self-center ml-2"
+                    style="width: 2rem; height: 2rem"
+                    :disabled="true"
+                />
+                <Button
+                    rounded
+                    icon="pi pi-clone"
+                    severity="warn"
+                    aria-label="duplicate"
+                    size="small"
+                    class="self-center"
+                    style="width: 2rem; height: 2rem"
+                    :disabled="true"
+                />
+                <Button
+                    rounded
+                    icon="pi pi-pencil"
+                    severity="help"
+                    aria-label="duplicate"
+                    size="small"
+                    class="self-center"
+                    style="width: 2rem; height: 2rem"
+                    :disabled="true"
+                />
+            </div>
         </div>
     </div>
 </template>
 
 <style scoped>
-.create-button {
+.profile-button {
-    background-color: var(--p-green-400);
+    width: 14em;
-    border-color: var(--p-green-400);
+    white-space: nowrap;
-    width: 10em;
-}
-
-.create-button:hover,
-.create-button:active {
-    background-color: var(--p-green-300) !important;
-    border-color: var(--p-green-300) !important;
 }
 
 .ongeki-button {
     background-color: var(--p-pink-400);
     border-color: var(--p-pink-400);
-    width: 14em;
 }
 
 .ongeki-button:hover,
@@ -69,7 +93,6 @@ const prf = usePrfStore();
 .chunithm-button {
     background-color: var(--p-yellow-400);
     border-color: var(--p-yellow-400);
-    width: 14em;
 }
 .chunithm-button:hover,
 .chunithm-button:active {