Popup menus for tracks and releases

Making things a bit less easy to delete feels like a good idea, as does not having bins everywhere

Author: frederickobrien

dashboard/src/lib/components/icons/ThreeDotsIcon.svelte

@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="16"
+  fill="currentColor"
+  class="bi bi-three-dots"
+  viewBox="0 0 16 16"
+>
+  <path
+    d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3"
+  />
+</svg>

dashboard/src/lib/components/layout/PopupWrapper.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  let {
+    children,
+    popupMenuOpen = $bindable(),
+  }: { children: Snippet; popupMenuOpen: boolean } = $props();
+</script>
+
+<div class="popup-menu-wrapper">
+  {@render children()}
+  <button onclick={() => (popupMenuOpen = false)}>Close</button>
+</div>
+
+<style>
+  .popup-menu-wrapper {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border: 1px solid gray;
+    padding: 1rem;
+    border-radius: 4px;
+    background-color: var(--color-background);
+    box-shadow: var(--box-shadow);
+    width: 90%;
+    max-width: 400px;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+</style>

dashboard/src/lib/components/views/music/ReleaseInfo.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import ThreeDotsIcon from "$lib/components/icons/ThreeDotsIcon.svelte";
+  import PopupWrapper from "$lib/components/layout/PopupWrapper.svelte";
   import { deleteRelease } from "$lib/remote-functions/music.remote";
   import { makeImageLink } from "$lib/utils";
   import type { ReleaseHydrated } from "../../../../../../shared/types/hydrated";
@@ -11,6 +13,8 @@
   }: {
     release: ReleaseHydrated;
   } = $props();
+
+  let popupMenuOpen = $state(false);
 </script>
 
 <div class="release-info">
@@ -35,11 +39,20 @@
       {/each}
     </ol>
   </div>
-  <ButtonWrapper onClickFunction={() => deleteRelease(release.id)}>
-    <BinIcon />
+  <ButtonWrapper onClickFunction={() => (popupMenuOpen = !popupMenuOpen)}>
+    <ThreeDotsIcon />
   </ButtonWrapper>
 </div>
 
+{#if popupMenuOpen}
+  <PopupWrapper bind:popupMenuOpen>
+    <div>{release.title}</div>
+    <ButtonWrapper onClickFunction={() => deleteRelease(release.id)}>
+      <div class="delete">Delete Release <BinIcon /></div>
+    </ButtonWrapper>
+  </PopupWrapper>
+{/if}
+
 <style>
   .release-info {
     display: flex;
@@ -60,4 +73,9 @@
     aspect-ratio: 1 / 1;
     box-shadow: var(--box-shadow);
   }
+  .delete {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
 </style>

dashboard/src/lib/components/views/music/TrackInfo.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
+  import ThreeDotsIcon from "$lib/components/icons/ThreeDotsIcon.svelte";
+  import PopupWrapper from "$lib/components/layout/PopupWrapper.svelte";
   import { deleteTrack } from "$lib/remote-functions/music.remote";
   import type { Track } from "../../../../../../shared/types/core";
   import { prettifyDuration } from "../../../../../../shared/utils";
   import BinIcon from "../../icons/BinIcon.svelte";
   import ButtonWrapper from "../../layout/ButtonWrapper.svelte";
 
   const { song }: { song: Track } = $props();
+
+  let popupMenuOpen = $state(false);
 </script>
 
 <div class="song-wrapper">
@@ -15,11 +19,20 @@
       <small>{prettifyDuration(song.duration_seconds)}</small>
     </div>
   </div>
-  <ButtonWrapper onClickFunction={() => deleteTrack(song.id)}>
-    <BinIcon />
+  <ButtonWrapper onClickFunction={() => (popupMenuOpen = !popupMenuOpen)}>
+    <ThreeDotsIcon />
   </ButtonWrapper>
 </div>
 
+{#if popupMenuOpen}
+  <PopupWrapper bind:popupMenuOpen>
+    <div>{song.title}</div>
+    <ButtonWrapper onClickFunction={() => deleteTrack(song.id)}>
+      <div class="delete">Delete Track <BinIcon /></div>
+    </ButtonWrapper>
+  </PopupWrapper>
+{/if}
+
 <style>
   .song-wrapper {
     display: flex;
@@ -37,4 +50,9 @@
     font-weight: 500;
     font-size: 70%;
   }
+  .delete {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
 </style>

dashboard/src/routes/+layout.svelte

@@ -8,7 +8,7 @@
 
   let { children, data } = $props();
 
-  let { supabase, session } = $state(data);
+  let { supabase, session } = $derived(data);
 
   const artists = $derived(data.artists);