feat: the other profile buttons

src/components/ProfileListEntry.vue

@@ -4,6 +4,7 @@ import Button from 'primevue/button';
 import InputText from 'primevue/inputtext';
 import * as path from '@tauri-apps/api/path';
 import { open } from '@tauri-apps/plugin-shell';
+import { invoke } from '../invoke';
 import { useGeneralStore, usePrfStore } from '../stores';
 import { ProfileMeta } from '../types';
 
@@ -19,7 +20,7 @@ if (props.p === undefined) {
     throw new Error('Invalid ProfileListEntry');
 }
 
-const rename = async (event: KeyboardEvent) => {
+const renameProfile = async (event: KeyboardEvent) => {
     if (event.key !== 'Enter') {
         return;
     }
@@ -32,14 +33,28 @@ const rename = async (event: KeyboardEvent) => {
         typeof event.target.value === 'string'
     ) {
         const value = event.target.value
+            .trim()
+            .replaceAll(' ', '-')
             .replaceAll('..', '')
             .replaceAll('\\', '')
             .replaceAll('/', '');
+
         if (value.length > 0) {
             await prf.rename(props.p!, value);
         }
     }
 };
+
+const duplicateProfile = async () => {
+    await invoke('duplicate_profile', { profile: props.p });
+    await prf.reloadList();
+};
+
+const deleteProfile = async () => {
+    await invoke('delete_profile', { profile: props.p });
+    await prf.reloadList();
+    await prf.reload();
+};
 </script>
 
 <template>
@@ -60,7 +75,7 @@ const rename = async (event: KeyboardEvent) => {
                 <InputText
                     :model-value="p!.name"
                     @vue:mounted="$event?.el?.focus()"
-                    @keyup="rename"
+                    @keyup="renameProfile"
                     @focusout="isEditing = false"
                 >
                 </InputText></div
@@ -73,7 +88,7 @@ const rename = async (event: KeyboardEvent) => {
             size="small"
             class="self-center ml-2"
             style="width: 2rem; height: 2rem"
-            :disabled="true"
+            @click="deleteProfile"
         />
         <Button
             rounded
@@ -83,7 +98,7 @@ const rename = async (event: KeyboardEvent) => {
             size="small"
             class="self-center"
             style="width: 2rem; height: 2rem"
-            :disabled="true"
+            @click="duplicateProfile"
         />
         <Button
             rounded

src/main.ts

@@ -5,6 +5,7 @@ import Theme from '@primevue/themes/aura';
 import PrimeVue from 'primevue/config';
 import Tooltip from 'primevue/tooltip';
 import App from './components/App.vue';
+import { changePrimaryColor } from './util';
 
 const pinia = createPinia();
 const app = createApp(App);
@@ -17,5 +18,6 @@ app.use(PrimeVue, {
         preset: Preset,
     },
 });
+changePrimaryColor(null);
 app.directive('tooltip', Tooltip);
 app.mount('#app');

src/stores.ts

@@ -114,12 +114,16 @@ export const usePrfStore = defineStore('prf', () => {
         );
 
     const reload = async () => {
-        const p: any = await invoke('get_current_profile');
-        if (p['OngekiProfile'] !== undefined) {
+        const p = (await invoke('get_current_profile')) as any;
+        if (p != null && 'OngekiProfile' in p) {
             current.value = { ...p.OngekiProfile, game: 'ongeki' };
+        } else {
+            current.value = null;
         }
         if (current.value !== null) {
             changePrimaryColor(current.value.game);
+        } else {
+            changePrimaryColor(null);
         }
     };
 
@@ -167,9 +171,7 @@ export const usePrfStore = defineStore('prf', () => {
     };
 
     const reloadList = async () => {
-        // list.value.splice(0, list.value.length);
         list.value = (await invoke('list_profiles')) as ProfileMeta[];
-        console.log(list.value);
     };
 
     const togglePkg = async (pkg: Package | undefined, enable: boolean) => {

src/util.ts

@@ -1,8 +1,13 @@
 import { updatePrimaryPalette } from '@primevue/themes';
-import { Package } from './types';
+import { Game, Package } from './types';
 
-export const changePrimaryColor = (game: 'ongeki' | 'chunithm') => {
-    const color = game === 'ongeki' ? 'pink' : 'yellow';
+export const changePrimaryColor = (game: Game | null) => {
+    const color =
+        game === 'ongeki'
+            ? 'pink'
+            : game === 'chunithm'
+              ? 'yellow'
+              : 'bluegray';
 
     updatePrimaryPalette({
         50: `{${color}.50}`,