Merge pull request #17 from MerryDreambound/deleteProfile

Good stuff! I reworked the playlist selection UI with some tighter UI and now every individual playlist will have the edit button next to it in order to match the delete buttons. Appreciate the work.

src/renderer/src/api/api.ts

@@ -115,3 +115,9 @@ export async function uninstallMods(addonIds: AddonId[]) {
     })
   }
 }
+
+export async function deleteProfile(id: number){
+  activeProfileStore.deleteProfile(id);
+  // After a succesful delete, change to default profile
+  userStore.setActiveProfileId(1);
+}

src/renderer/src/components/navigation/GameManager.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-  import { ListBox, ListBoxItem, modalStore } from '@skeletonlabs/skeleton'
+  import { modalStore } from '@skeletonlabs/skeleton'
   import { userStore } from '../../stores/user'
   import { db } from '../../db/db'
   import { liveQuery } from 'dexie'
   import { activeProfileStore } from '../../stores/active-profile'
-
+  import { Trash, Pencil } from 'lucide-svelte'
+  import { deleteProfile } from '../../api/api'
   $: activeProfileId = $userStore.activeProfileId
   const profiles = liveQuery(async () => await db.profiles.toArray())
 
@@ -34,15 +35,14 @@
     })
   }
 
-  function promptEditProfileModal() {
-    const profileId = activeProfileId
+  function promptEditProfileModal(profileId) {
     const profileName = $profiles.find((p) => p.id === profileId)?.label
 
     if (!profileName) return console.error('No profile name found')
 
     modalStore.trigger({
       type: 'prompt',
-      title: 'Edit Playlist: ' + profileName,
+      title: `Edit Playlist "${profileName}"`,
       body: 'Rename the playlist',
       value: profileName,
       valueAttr: { type: 'text', minlength: 1, maxlength: 64, required: true },
@@ -54,6 +54,23 @@
       }
     })
   }
+
+  function promptConfirmDeleteProfile(profileId) {
+    const profileName = $profiles.find((p) => p.id === profileId)?.label
+
+    if (!profileName) return console.error('No profile name found')
+
+    modalStore.trigger({
+      type: 'confirm',
+      title: `Delete Playlist "${profileName}"?`,
+      body: 'Are you sure you wish to proceed?',
+      response: (r: boolean) => {
+        if (r) {
+          deleteProfile(profileId)
+        }
+      }
+    })
+  }
 </script>
 
 <div data-popup="gameManagerPopup">
@@ -64,28 +81,51 @@
       <h4 class="h4">Playlists</h4>
 
       {#if !!$profiles}
-        <ListBox>
+        <div class="grid grid-cols-1 bg-surface-500 overflow-hidden rounded-lg">
           {#each $profiles as profile}
-            <ListBoxItem
-              bind:group={$userStore.activeProfileId}
-              name={`${profile.id}`}
-              value={profile.id}>{profile.label}</ListBoxItem
+            {@const isEnabled = $userStore.activeProfileId === profile.id}
+            <div
+              data-enabled={isEnabled}
+              class="flex overflow-hidden [&:not(:last-child)]:border-b border-surface-800 data-[enabled=true]:bg-slate-200 data-[enabled=true]:text-black data-[enabled=false]:hover:bg-surface-600"
             >
+              <button
+                on:click={() => ($userStore.activeProfileId = profile.id)}
+                class="flex-1 h-[42px] pl-3 flex justify-between items-center"
+              >
+                <span class=" max-w-[200px] text text-ellipsis whitespace-nowrap overflow-hidden"
+                  >{profile.label}
+                </span>
+              </button>
+
+              {#if profile.id !== 1 && profile.id !== 2}
+                <button
+                  data-enabled={isEnabled}
+                  class="hover:bg-white/10 data-[enabled=true]:hover:bg-black/20 h-full aspect-square grid place-items-center"
+                  on:click={() => promptConfirmDeleteProfile(profile.id)}
+                >
+                  <Trash color="#d4163c" size={18} />
+                </button>
+              {/if}
+
+              <button
+                data-enabled={isEnabled}
+                class="hover:bg-white/10 data-[enabled=true]:hover:bg-black/20 h-full aspect-square grid place-items-center"
+                on:click={() => promptEditProfileModal(profile.id)}
+              >
+                <Pencil size={18} />
+              </button>
+            </div>
           {/each}
-        </ListBox>
+        </div>
       {/if}
 
-      <div class="pb-3" />
+      <div class="pb-1" />
 
       <div class="space-y-2">
-        <div class="flex justify-between gap-2">
-          <button class="btn btn-sm variant-ghost" on:click={promptEditProfileModal}
-            >Edit Playlist</button
-          >
-
-          <button class="btn btn-sm variant-filled" on:click={promptNewProfileModal}
-            >New Playlist</button
-          >
+        <div class="flex justify-end gap-2">
+          <button class="btn btn-sm variant-filled" on:click={promptNewProfileModal}>
+            New Playlist
+          </button>
         </div>
       </div>
     </div>

src/renderer/src/stores/active-profile.ts

@@ -19,6 +19,20 @@ function createProfileStore() {
     })
   }
 
+  async function deleteProfile(id: number) {
+    try {
+      if (id == 1 || id == 2) {
+        // Ensure that user somehow doesn't delete Default/No mod profiles
+        return
+      } else {
+        await db.profiles.delete(id)
+        // console.log('Profile id ' + id + ' has been succesfully deleted')
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
   function toggleAddonEnabled(addonId: string) {
     const list = get(store).enabledAddonIds
     if (list.includes(addonId)) {
@@ -49,6 +63,7 @@ function createProfileStore() {
     set,
     subscribe,
 
+    deleteProfile,
     renameProfile,
     toggleAddonEnabled,
     toggleShuffleEnabled