feat: misc improvements

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>