From 09bdeb2b91bb85be29f5954b333ddc05f89386e2 Mon Sep 17 00:00:00 2001
From: MerryDreambound <italiyankin0@gmail.com>
Date: Sat, 14 Sep 2024 22:44:29 +0100
Subject: [PATCH 1/2] add delete profiles

---
 src/renderer/src/api/api.ts                   |  6 ++++
 .../components/navigation/GameManager.svelte  | 36 +++++++++++++++++--
 src/renderer/src/stores/active-profile.ts     | 15 ++++++++
 3 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/api/api.ts b/src/renderer/src/api/api.ts
index 37a6a81..d7848fc 100644
--- a/src/renderer/src/api/api.ts
+++ b/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);
+}
\ No newline at end of file
diff --git a/src/renderer/src/components/navigation/GameManager.svelte b/src/renderer/src/components/navigation/GameManager.svelte
index ce42abb..5fc52b5 100644
--- a/src/renderer/src/components/navigation/GameManager.svelte
+++ b/src/renderer/src/components/navigation/GameManager.svelte
@@ -4,7 +4,8 @@
   import { db } from '../../db/db'
   import { liveQuery } from 'dexie'
   import { activeProfileStore } from '../../stores/active-profile'
-
+  import { X } from 'lucide-svelte'
+  import { deleteProfile } from '../../api/api'
   $: activeProfileId = $userStore.activeProfileId
   const profiles = liveQuery(async () => await db.profiles.toArray())
 
@@ -54,6 +55,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">
@@ -69,8 +87,22 @@
             <ListBoxItem
               bind:group={$userStore.activeProfileId}
               name={`${profile.id}`}
-              value={profile.id}>{profile.label}</ListBoxItem
+              value={profile.id}
             >
+              <div class="flex justify-between items-center w-full">
+                <p>{profile.label}</p>
+                <!-- if profile id 1 or 2, skip delete button, they are default profiles -->
+                {#if profile.id !== 1 && profile.id !== 2}
+                <button
+                  class="hover:bg-red-300 rounded-full"
+                  style="padding: 2px;"
+                  on:click={() => promptConfirmDeleteProfile(profile.id)}
+                >
+                  <X color="#ff0000" size={22} />
+                </button>
+                {/if}
+              </div>
+            </ListBoxItem>
           {/each}
         </ListBox>
       {/if}
diff --git a/src/renderer/src/stores/active-profile.ts b/src/renderer/src/stores/active-profile.ts
index 3e475f0..32bb1c1 100644
--- a/src/renderer/src/stores/active-profile.ts
+++ b/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

From 2051c12c1020d56c5753c89ae396efe4208d82f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=BDan=20Pukmajster?=
 <45610204+pukmajster@users.noreply.github.com>
Date: Tue, 17 Sep 2024 00:17:22 +0200
Subject: [PATCH 2/2] rework playlist selection UI

---
 .../components/navigation/GameManager.svelte  | 70 +++++++++++--------
 1 file changed, 39 insertions(+), 31 deletions(-)

diff --git a/src/renderer/src/components/navigation/GameManager.svelte b/src/renderer/src/components/navigation/GameManager.svelte
index 5fc52b5..c7770c2 100644
--- a/src/renderer/src/components/navigation/GameManager.svelte
+++ b/src/renderer/src/components/navigation/GameManager.svelte
@@ -1,10 +1,10 @@
 <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 { X } from 'lucide-svelte'
+  import { Trash, Pencil } from 'lucide-svelte'
   import { deleteProfile } from '../../api/api'
   $: activeProfileId = $userStore.activeProfileId
   const profiles = liveQuery(async () => await db.profiles.toArray())
@@ -35,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 },
@@ -63,7 +62,7 @@
 
     modalStore.trigger({
       type: 'confirm',
-      title: 'Delete Playlist ' + profileName + '?',
+      title: `Delete Playlist "${profileName}"?`,
       body: 'Are you sure you wish to proceed?',
       response: (r: boolean) => {
         if (r) {
@@ -82,42 +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}
+            {@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"
             >
-              <div class="flex justify-between items-center w-full">
-                <p>{profile.label}</p>
-                <!-- if profile id 1 or 2, skip delete button, they are default profiles -->
-                {#if profile.id !== 1 && profile.id !== 2}
+              <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
-                  class="hover:bg-red-300 rounded-full"
-                  style="padding: 2px;"
+                  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)}
                 >
-                  <X color="#ff0000" size={22} />
+                  <Trash color="#d4163c" size={18} />
                 </button>
-                {/if}
-              </div>
-            </ListBoxItem>
+              {/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>