From eb37e7a8440f44fb5b906078abe341ab36c6bf48 Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Tue, 5 May 2026 11:53:01 +0200
Subject: [PATCH 1/8] Added icons to souce chips to show if they are an album
 or playlist

---
 src/components/CassetteActionsBar.vue | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/CassetteActionsBar.vue b/src/components/CassetteActionsBar.vue
index 2f2736a..b8aeef5 100644
--- a/src/components/CassetteActionsBar.vue
+++ b/src/components/CassetteActionsBar.vue
@@ -33,7 +33,8 @@ function removeSource(sourceId: string) {
 const sources = computed(() => {
   return Object.entries(projectStore.sources).map(([id, source]) => ({
     id,
-    name: source.name
+    name: source.name,
+    icon: source.type === "playlist" ? "mdi-playlist-music" : source.type === "album" ? "mdi-album" : "mdi-file",
   }))
 })
 
@@ -43,9 +44,11 @@ const menuBadgeContent = computed(() => trackStore.unavailableTrackIds.length >
 
 <template>
   <v-app-bar class="included pa-1" flat color="transparent">
+    <!-- Open side menu button -->
     <template v-slot:append>
       <v-btn @click="projectStore.drawerOpen = !projectStore.drawerOpen" stacked>
-        <v-badge v-if="menuBadgeContent" color="secondary" :content="menuBadgeContent" location="top left" :offset-x="-5">
+        <v-badge v-if="menuBadgeContent" color="secondary" :content="menuBadgeContent" location="top left"
+          :offset-x="-5">
           <v-icon :icon="menuIcon" />
         </v-badge>
         <v-icon v-else :icon="menuIcon" />
@@ -60,10 +63,15 @@ const menuBadgeContent = computed(() => trackStore.unavailableTrackIds.length >
         <!-- Add items -->
         <add-source-dialog />
 
-        <!-- Remove items -->
+        <!-- Sources -->
         <v-select :items="sources" item-value="id" item-title="name" label="Sources" chips multiple density="compact"
           variant="outlined" hide-details v-model="projectStore.selectedSources"
-          @update:modelValue="layoutStore.calculateLayoutDebounced" :disabled="!projectStore.hasSources">
+          @update:modelValue="layoutStore.calculateLayoutDebounced" :disabled="!projectStore.hasSources"
+          min-width="200">
+          <template v-slot:chip="{ props: itemProps, item }">
+            <v-chip v-bind="itemProps" :title="item.raw.name" size="small" class="text-truncate"
+              :prepend-icon="item.raw.icon" max-width="100" />
+          </template>
           <template v-slot:item="{ props: itemProps, item }">
             <v-list-item v-bind="itemProps" :title="item.raw.name">
               <template v-slot:prepend="{ isSelected, select }">
@@ -72,7 +80,7 @@ const menuBadgeContent = computed(() => trackStore.unavailableTrackIds.length >
                 </v-list-item-action>
               </template>
               <template v-slot:append>
-                <v-btn icon="mdi-playlist-remove" size="small" variant="text" @click.stop="removeSource(item.raw.id)" />
+                <v-btn icon="mdi-trash-can-outline" size="small" variant="text" @click.stop="removeSource(item.raw.id)" />
               </template>
             </v-list-item>
           </template>

From 24da83b0bba454f6ac202b2b2bed49bb4488d891 Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Tue, 5 May 2026 12:14:00 +0200
Subject: [PATCH 2/8] Remove unsused buttons

---
 src/components/CassetteActionsBar.vue | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/components/CassetteActionsBar.vue b/src/components/CassetteActionsBar.vue
index b8aeef5..184c4d9 100644
--- a/src/components/CassetteActionsBar.vue
+++ b/src/components/CassetteActionsBar.vue
@@ -88,11 +88,6 @@ const menuBadgeContent = computed(() => trackStore.unavailableTrackIds.length >
 
         <v-divider vertical />
 
-        <v-btn icon="mdi-cassette" size="small" variant="text" @click="addCassette"
-          :disabled="!projectStore.hasSources" />
-
-        <v-divider vertical />
-
         <!-- Sorting select -->
         <v-select v-model="selectedSortType" :items="layoutStore.getAvailableSorters()" item-value="type"
           density="compact" label="Sorting Algorithm" item-title="name" hide-details min-width="200" variant="outlined"
@@ -101,15 +96,11 @@ const menuBadgeContent = computed(() => trackStore.unavailableTrackIds.length >
             <v-list-item v-bind="itemProps" :subtitle="item.raw.description" :title="item.raw.name" />
           </template>
         </v-select>
-
+        
         <v-divider vertical />
 
-
-        <v-btn icon="mdi-import" size="small" variant="text" />
-        <v-btn icon="mdi-export" size="small" variant="text" :disabled="!projectStore.hasSources" />
-
-        <v-divider vertical />
-        <upload-cassette-dialog />
+        <v-btn icon="mdi-cassette" size="small" variant="text" @click="addCassette"
+          :disabled="!projectStore.hasSources" />
       </template>
     </v-card>
     <v-spacer />

From 321dd40a5e09cb52f2fc08cea40cfa48fb689abc Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Tue, 5 May 2026 13:51:51 +0200
Subject: [PATCH 3/8] Make side navigation drawer transparent

---
 src/components/CassetteInfoDrawer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CassetteInfoDrawer.vue b/src/components/CassetteInfoDrawer.vue
index 29b4b71..a12a157 100644
--- a/src/components/CassetteInfoDrawer.vue
+++ b/src/components/CassetteInfoDrawer.vue
@@ -5,7 +5,7 @@ const projectStore = useProjectStore()
 </script>
 
 <template>
-    <v-navigation-drawer floating v-model="projectStore.drawerOpen" location="right">
+    <v-navigation-drawer floating v-model="projectStore.drawerOpen" location="right" color="transparent">
         <unavailable-tracks-list />
     </v-navigation-drawer>
 </template>

From 848490a6d5a82dcf57bd96a7605d1c4b43828901 Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Tue, 5 May 2026 14:01:54 +0200
Subject: [PATCH 4/8] Add plus character to add cassette button

---
 src/components/CassetteActionsBar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/CassetteActionsBar.vue b/src/components/CassetteActionsBar.vue
index 184c4d9..4d6cc35 100644
--- a/src/components/CassetteActionsBar.vue
+++ b/src/components/CassetteActionsBar.vue
@@ -99,8 +99,8 @@ const menuBadgeContent = computed(() => trackStore.unavailableTrackIds.length >
         
         <v-divider vertical />
 
-        <v-btn icon="mdi-cassette" size="small" variant="text" @click="addCassette"
-          :disabled="!projectStore.hasSources" />
+        <v-btn append-icon="mdi-cassette" size="small" variant="text" @click="addCassette"
+          :disabled="!projectStore.hasSources" text="+"/>
       </template>
     </v-card>
     <v-spacer />

From e57e829ecc5194559c9dce8e76422af5a76dab51 Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Tue, 5 May 2026 14:39:25 +0200
Subject: [PATCH 5/8] Disable clear all button when unavailable track list is
 empty

---
 src/components/UnavailableTracksList.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/UnavailableTracksList.vue b/src/components/UnavailableTracksList.vue
index 39e2c7b..e3a6438 100644
--- a/src/components/UnavailableTracksList.vue
+++ b/src/components/UnavailableTracksList.vue
@@ -49,10 +49,9 @@ function clearUnavailableTracks() {
                     :track-id="trackId" />
             </draggable>
         </v-list>
-        <v-divider class="mb-2" />
 
         <template v-slot:actions>
-            <v-btn variant="text" @click="clearUnavailableTracks">Clear List</v-btn>
+            <v-btn variant="text" @click="clearUnavailableTracks" :disabled="tracksStore.unavailableTrackIds.length === 0">Clear List</v-btn>
         </template>
     </v-card>
 </template>

From 763632b2af867fde6f759171c0eff253cf76916d Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Tue, 5 May 2026 14:40:20 +0200
Subject: [PATCH 6/8] Include owner in sources list

---
 src/components/CassetteActionsBar.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/CassetteActionsBar.vue b/src/components/CassetteActionsBar.vue
index 4d6cc35..621a068 100644
--- a/src/components/CassetteActionsBar.vue
+++ b/src/components/CassetteActionsBar.vue
@@ -35,6 +35,9 @@ const sources = computed(() => {
     id,
     name: source.name,
     icon: source.type === "playlist" ? "mdi-playlist-music" : source.type === "album" ? "mdi-album" : "mdi-file",
+    url: source.original_item_url,
+    owner: source.owner_display_name,
+    owner_url: source.owner_url,
   }))
 })
 
@@ -70,17 +73,21 @@ const menuBadgeContent = computed(() => trackStore.unavailableTrackIds.length >
           min-width="200">
           <template v-slot:chip="{ props: itemProps, item }">
             <v-chip v-bind="itemProps" :title="item.raw.name" size="small" class="text-truncate"
-              :prepend-icon="item.raw.icon" max-width="100" />
+              :prepend-icon="item.raw.icon" max-width="100"/>
           </template>
           <template v-slot:item="{ props: itemProps, item }">
-            <v-list-item v-bind="itemProps" :title="item.raw.name">
+            <v-list-item v-bind="itemProps">
+              <v-list-item-subtitle class="text-truncate">
+                <a :href="item.raw.owner_url" target="_blank" @click.stop="" style="text-decoration: underline; color: black;">{{ item.raw.owner }}</a>
+              </v-list-item-subtitle>
               <template v-slot:prepend="{ isSelected, select }">
                 <v-list-item-action start>
                   <v-checkbox-btn :model-value="isSelected" @update:model-value="select"></v-checkbox-btn>
                 </v-list-item-action>
               </template>
               <template v-slot:append>
-                <v-btn icon="mdi-trash-can-outline" size="small" variant="text" @click.stop="removeSource(item.raw.id)" />
+                <v-btn icon="mdi-open-in-new" size="small" variant="text" :href="item.raw.url" target="_blank" tabindex="-1" @click.stop=""/>
+                <v-btn icon="mdi-trash-can" size="small" variant="text" @click.stop="removeSource(item.raw.id)"/>
               </template>
             </v-list-item>
           </template>

From 744dff96c85275a68e26894d4007911cfb924bd3 Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Tue, 5 May 2026 14:43:07 +0200
Subject: [PATCH 7/8] Move margins to text field

---
 src/components/cassette/Cassette.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/cassette/Cassette.vue b/src/components/cassette/Cassette.vue
index 66393d1..cf16f1f 100644
--- a/src/components/cassette/Cassette.vue
+++ b/src/components/cassette/Cassette.vue
@@ -66,7 +66,7 @@ const name = computed<string>({
 
 <template>
   <v-card class="cassette-card">
-    <v-toolbar color="primary" class="pl-2 pr-4">
+    <v-toolbar color="primary">
       <template v-slot:prepend>
         <v-icon icon="mdi-cassette" size="30" class="mr-2" />
         <v-select v-model="capacityMinutes" :items="cassetteStore.possibleLengthsMin" density="compact" hide-details
@@ -75,7 +75,7 @@ const name = computed<string>({
 
       <template v-slot:title>
         <v-text-field v-model="name" density="compact" hide-details placeholder="Cassette name"
-          class="cassette-title-field" />
+          class="mr-4"/>
       </template>
 
       <v-menu v-if="!props.disableControls">

From 886ea79304eef0d2df71a4d856c749cb6d73d14e Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Tue, 5 May 2026 14:44:42 +0200
Subject: [PATCH 8/8] Remove tabindex

---
 src/components/CassetteActionsBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CassetteActionsBar.vue b/src/components/CassetteActionsBar.vue
index 621a068..08ce3a5 100644
--- a/src/components/CassetteActionsBar.vue
+++ b/src/components/CassetteActionsBar.vue
@@ -86,7 +86,7 @@ const menuBadgeContent = computed(() => trackStore.unavailableTrackIds.length >
                 </v-list-item-action>
               </template>
               <template v-slot:append>
-                <v-btn icon="mdi-open-in-new" size="small" variant="text" :href="item.raw.url" target="_blank" tabindex="-1" @click.stop=""/>
+                <v-btn icon="mdi-open-in-new" size="small" variant="text" :href="item.raw.url" target="_blank" @click.stop=""/>
                 <v-btn icon="mdi-trash-can" size="small" variant="text" @click.stop="removeSource(item.raw.id)"/>
               </template>
             </v-list-item>