feat: groundwork for multi-profile support

src/components/ProfileList.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import Button from 'primevue/button';
+import { usePrfStore } from '../stores';
+
+const prf = usePrfStore();
+</script>
+
+<template>
+    <div class="mt-4 flex flex-wrap align-middle gap-4">
+        <Button
+            :disabled="prf.list.length > 0"
+            label="Create profile"
+            icon="pi pi-plus"
+            aria-label="open-executable"
+            class="create-button"
+            @click="prf.prompt"
+        />
+
+        <div v-for="p in prf.list">
+            <Button
+                :disabled="
+                    prf.current?.game === p.game && prf.current?.name === p.name
+                "
+                :label="p.name"
+                :class="
+                    (p.game === 'chunithm'
+                        ? 'chunithm-button'
+                        : 'ongeki-button') +
+                    ' ' +
+                    'self-center grow'
+                "
+                @click="prf.switchTo(p.game, p.name)"
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.create-button {
+    background-color: var(--p-green-400);
+    border-color: var(--p-green-400);
+    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: 10em;
+}
+
+.ongeki-button:hover,
+.ongeki-button:active {
+    background-color: var(--p-pink-300) !important;
+    border-color: var(--p-pink-300) !important;
+}
+
+.chunithm-button {
+    background-color: var(--p-yellow-400);
+    border-color: var(--p-yellow-400);
+    width: 10em;
+}
+.chunithm-button:hover,
+.chunithm-button:active {
+    background-color: var(--p-yellow-300) !important;
+    border-color: var(--p-yellow-300) !important;
+}
+</style>