feat: misc improvements

src/components/ModTitlecard.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import Chip from 'primevue/chip';
 import { convertFileSrc } from '@tauri-apps/api/core';
 import { Feature, Package } from '../types';
@@ -13,8 +14,8 @@ const props = defineProps({
     showIcon: Boolean,
 });
 
-const iconSrc = () => {
-    const icon = props.pkg?.icon;
+const iconSrc = computed(() => {
+    const icon = props.pkg?.loc?.icon ?? props.pkg?.rmt?.icon;
 
     if (icon === undefined) {
         return '';
@@ -23,13 +24,13 @@ const iconSrc = () => {
     } else {
         return convertFileSrc(icon);
     }
-};
+});
 </script>
 
 <template>
     <img
         v-if="showIcon"
-        :src="iconSrc()"
+        :src="iconSrc"
         class="self-center rounded-sm"
         width="32px"
         height="32px"
@@ -66,7 +67,7 @@ const iconSrc = () => {
             <span
                 v-if="hasFeature(pkg, Feature.Aime)"
                 v-tooltip="'Aime'"
-                class="pi pi-wrench ml-1 text-purple-400"
+                class="pi pi-credit-card ml-1 text-purple-400"
             >
             </span>
             <span

src/components/OptionList.vue

@@ -29,24 +29,48 @@ const displayList: Ref<{ title: string; value: string }[]> = ref([
     },
 ]);
 
-invoke('list_platform_capabilities')
-    .then(async (v: unknown) => {
-        if (Array.isArray(v)) {
-            capabilities.value.push(...v);
-        }
-
-        if (capabilities.value.includes('display')) {
-            for (const [devName, devString] of (await invoke(
-                'list_displays'
-            )) as Array<[string, string]>) {
-                displayList.value.push({
-                    title: `${devName.replace('\\\\.\\', '')} (${devString})`,
-                    value: devName,
-                });
+const loadDisplays = () => {
+    const newList = [
+        {
+            title: 'Primary',
+            value: 'default',
+        },
+    ];
+    invoke('list_platform_capabilities')
+        .then(async (v: unknown) => {
+            let different = false;
+            if (Array.isArray(v)) {
+                capabilities.value.push(...v);
             }
-        }
-    })
-    .catch(() => {});
+            if (capabilities.value.includes('display')) {
+                for (const [devName, devString] of (await invoke(
+                    'list_displays'
+                )) as Array<[string, string]>) {
+                    newList.push({
+                        title: `${devName.replace('\\\\.\\', '')} (${devString})`,
+                        value: devName,
+                    });
+                    if (
+                        displayList.value.find(
+                            (item) => item.value === devName
+                        ) === undefined
+                    ) {
+                        different = true;
+                    }
+                }
+            }
+            if (displayList.value.length !== newList.length) {
+                different = true;
+            }
+            if (different) {
+                displayList.value = newList;
+            }
+        })
+        .catch(() => {});
+};
+
+loadDisplays();
+prf.reload();
 
 const aimeCodeModel = computed({
     get() {
@@ -145,6 +169,8 @@ const extraDisplayOptionsDisabled = computed(() => {
                 :options="displayList"
                 option-label="title"
                 option-value="value"
+                placeholder="(Disconnected)"
+                @show="loadDisplays"
             ></Select>
         </OptionRow>
         <OptionRow class="number-input" title="Game resolution">
@@ -212,8 +238,9 @@ const extraDisplayOptionsDisabled = computed(() => {
             />
         </OptionRow>
         <OptionRow
-            title="Match display resolution with the game"
+            title="Borderless fullscreen"
             v-if="capabilities.includes('display')"
+            tooltip="Match display resolution with the game."
         >
             <ToggleSwitch
                 :disabled="
@@ -305,7 +332,7 @@ const extraDisplayOptionsDisabled = computed(() => {
             <Select
                 v-model="prf.current!.sgt.aime"
                 :options="[
-                    { title: 'disabled', value: null },
+                    { title: 'none', value: 'Disabled' },
                     { title: 'segatools built-in', value: 'BuiltIn' },
                     ...pkgs.aimes.map((p) => {
                         return {
@@ -325,7 +352,7 @@ const extraDisplayOptionsDisabled = computed(() => {
             <InputText
                 class="shrink"
                 size="small"
-                :disabled="prf.current!.sgt.aime === null"
+                :disabled="prf.current!.sgt.aime === 'Disabled'"
                 :maxlength="20"
                 placeholder="00000000000000000000"
                 v-model="aimeCodeModel"
@@ -350,7 +377,10 @@ const extraDisplayOptionsDisabled = computed(() => {
                     v-model="prf.current!.sgt.amnet.addr"
                 />
             </OptionRow>
-            <OptionRow title="Use AiMeDB for physical cards">
+            <OptionRow
+                title="Use AiMeDB for physical cards"
+                tooltip="Whether physical cards should use AiMeDB to retrieve access codes. If the game is using a hosted network, enable this option to load the same account data/profile as you would get on a physical cab."
+            >
                 <ToggleSwitch v-model="prf.current!.sgt.amnet.physical" />
             </OptionRow>
         </div>
@@ -383,6 +413,11 @@ const extraDisplayOptionsDisabled = computed(() => {
 }
 
 .p-inputtext {
-    font-family: monospace;
+    width: 40vw;
+    font-family: monospace !important;
+}
+
+.p-select {
+    width: 40vw;
 }
 </style>

src/components/OptionRow.vue

@@ -7,6 +7,7 @@ const category = getCurrentInstance()?.parent?.parent?.parent?.parent; // yes in
 
 const props = defineProps({
     title: String,
+    tooltip: String,
 });
 
 const searched = computed(() => {
@@ -24,7 +25,15 @@ const searched = computed(() => {
 
 <template>
     <div v-if="searched" class="flex flex-row w-full p-2 gap-2 items-center">
-        <div class="grow">{{ title }}</div>
+        <div class="grow">
+            <span>{{ title }}</span>
+            <span
+                v-if="tooltip"
+                class="pi pi-question-circle ml-2"
+                v-tooltip="tooltip"
+            ></span>
+        </div>
+
         <slot />
     </div>
 </template>

src/components/StartButton.vue

@@ -45,6 +45,7 @@ const startline = async (force: boolean) => {
         }
     }
     try {
+        await invoke('save_current_profile');
         await invoke('startline');
     } catch (_) {
         startStatus.value = 'ready';

src/stores.ts

@@ -182,6 +182,7 @@ export const usePkgStore = defineStore('pkg', {
 export const usePrfStore = defineStore('prf', () => {
     const current: Ref<Profile | null> = ref(null);
     const list: Ref<ProfileMeta[]> = ref([]);
+    let timeout: NodeJS.Timeout | null = null;
 
     const isPkgEnabled = (pkg: Package | undefined) =>
         computed(
@@ -281,9 +282,13 @@ export const usePrfStore = defineStore('prf', () => {
 
     watchEffect(async () => {
         if (current.value !== null) {
-            await invoke('save_current_profile', {
+            await invoke('sync_current_profile', {
                 profile: { OngekiProfile: current.value },
             });
+            if (timeout !== null) {
+                clearTimeout(timeout);
+            }
+            timeout = setTimeout(() => invoke('save_current_profile'), 2000);
         }
     });
 

src/types.ts

@@ -2,12 +2,12 @@ export interface Package {
     namespace: string;
     name: string;
     description: string;
-    icon: string;
     loc: {
         version: string;
         path: string;
         dependencies: string[];
         status: Status;
+        icon: string;
     } | null;
     rmt: {
         version: string;
@@ -16,6 +16,7 @@ export interface Package {
         deprecated: boolean;
         nsfw: boolean;
         categories: string[];
+        icon: string;
     } | null;
     js: {
         busy: boolean;
@@ -51,7 +52,7 @@ export interface SegatoolsConfig {
     amfs: string;
     option: string;
     appdata: string;
-    aime: { AMNet: string } | { Other: string } | null;
+    aime: { AMNet: string } | { Other: string } | 'BuiltIn' | 'Disabled';
     intel: boolean;
     amnet: {
         name: string;