From c7b21aeb01c188706882f4af82e118b56257a252 Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Sun, 3 May 2026 12:36:57 +0200
Subject: [PATCH 01/13] Added project page

---
 src/auto-imports.d.ts                 |   2 +-
 src/components.d.ts                   |   2 +-
 src/components/AlbumList.vue          |  15 +--
 src/components/CassetteActionsBar.vue | 129 ++++++++++++++++++++++----
 src/components/PlaylistList.vue       |  15 +--
 src/components/SearchAlbumsTab.vue    |  37 --------
 src/components/SearchPlaylistsTab.vue |  38 --------
 src/components/cassette/Cassette.vue  |   9 --
 src/layouts/cassetteControls.vue      |   3 +-
 src/pages/project.vue                 |  39 ++++++++
 src/parsers/episodeDtoParser.ts       |   5 +-
 src/parsers/trackDtoParser.ts         |  10 +-
 src/stores/album.ts                   |  17 ++--
 src/stores/cassette.ts                |  10 +-
 src/stores/layout.ts                  |   9 +-
 src/stores/playlists.ts               |  18 ++--
 src/stores/project.ts                 |  24 +++++
 src/stores/tracks.ts                  |   8 ++
 src/typed-router.d.ts                 |  15 ++-
 src/types/tapeify/models.ts           |  19 ++--
 20 files changed, 261 insertions(+), 163 deletions(-)
 create mode 100644 src/pages/project.vue
 create mode 100644 src/stores/project.ts

diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
index 00281ab..417365e 100644
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -1,4 +1,4 @@
- 
+/* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
diff --git a/src/components.d.ts b/src/components.d.ts
index b0e8fcb..4c94616 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -1,4 +1,4 @@
- 
+/* eslint-disable */
 // @ts-nocheck
 // biome-ignore lint: disable
 // oxlint-disable
diff --git a/src/components/AlbumList.vue b/src/components/AlbumList.vue
index d39445b..4bde27c 100644
--- a/src/components/AlbumList.vue
+++ b/src/components/AlbumList.vue
@@ -1,8 +1,12 @@
 <script lang="ts" setup>
-import router from '@/router';
 import type { Album } from '@/types/tapeify/models';
 import type { InfiniteScrollSide, InfiniteScrollStatus } from 'vuetify/lib/components/VInfiniteScroll/VInfiniteScroll.mjs';
 import { VInfiniteScroll } from 'vuetify/components';
+import { useAlbumsStore } from '@/stores/album';
+import { useLayoutStore } from '@/stores/layout';
+
+const albumsStore = useAlbumsStore()
+const layoutStore = useLayoutStore()
 
 const props = defineProps<{
   albums: Album[]
@@ -11,12 +15,9 @@ const props = defineProps<{
 
 const infiniteScrollRef = useTemplateRef<InstanceType<typeof VInfiniteScroll>>('albumsScroll')
 
-function SelectItem(id: string) {
-  router.push({
-    name: '/cassette/[spotify_id]',
-    params: { spotify_id: id },
-    query: { type: 'album' }
-  })
+async function SelectItem(id: string) {
+  await albumsStore.FetchAlbumTracks(id)
+  layoutStore.calculateLayout()
 }
 
 function reset() {
diff --git a/src/components/CassetteActionsBar.vue b/src/components/CassetteActionsBar.vue
index 5859fd1..9df0c53 100644
--- a/src/components/CassetteActionsBar.vue
+++ b/src/components/CassetteActionsBar.vue
@@ -1,31 +1,126 @@
 <script lang="ts" setup>
+import { useCassettesStore } from '@/stores/cassette';
 import { useLayoutStore } from '@/stores/layout';
+import { useProjectStore } from '@/stores/project';
+import { useTracksStore } from '@/stores/tracks';
 
 const layoutStore = useLayoutStore()
+const projectStore = useProjectStore()
+const cassetteStore = useCassettesStore()
+const trackStore = useTracksStore()
 
 const selectedSortType = computed({
   get: () => layoutStore.selectedSortType,
   set: (val: string) => layoutStore.setSortType(val)
 })
+
+function addCassette() {
+  cassetteStore.addCassette()
+  layoutStore.calculateLayout()
+}
+
+function removeOrigin(originId: string) {
+  projectStore.removeOrigin(originId)
+  trackStore.RemoveTracksByOrigin(originId)
+  layoutStore.calculateLayout()
+}
+
+const selectedTab = ref('user_playlists')
+
+const origins = computed(() => {
+  return Object.entries(projectStore.origins).map(([id, origin]) => ({
+    id,
+    name: origin.name
+  }))
+})
+
 </script>
 
 <template>
-  <v-app-bar class="included pa-1">
-    <template v-slot:prepend>
-      <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">
-        <template v-slot:item="{ props: itemProps, item }">
-          <v-list-item v-bind="itemProps" :subtitle="item.raw.description" :title="item.raw.name" />
-        </template>
-      </v-select>
-    </template>
-
-    <template v-slot:append>
-      <v-btn block variant="outlined">
-        Upload Cassette
-        <upload-cassette-dialog />
-      </v-btn>
-
-    </template>
+  <v-app-bar class="included pa-1" flat color="transparent">
+    <v-spacer />
+    <v-card>
+      <template v-slot:actions>
+
+        <!-- Add items -->
+        <v-dialog max-width="800">
+          <template v-slot:activator="{ props: activatorProps }">
+            <v-btn v-bind="activatorProps" icon="mdi-playlist-plus" size="small" variant="text" />
+          </template>
+
+          <template v-slot:default>
+            <v-card class="cassette-card">
+              <v-toolbar color="primary" title="Select Playlist or Album">
+                <template v-slot:extension>
+                  <v-tabs v-model="selectedTab" align-tabs="center">
+                    <v-tab value="user_playlists">My Playlists</v-tab>
+                    <v-tab value="search_albums">Search Albums</v-tab>
+                    <v-tab value="search_playlists">Search Playlists</v-tab>
+                  </v-tabs>
+                </template>
+              </v-toolbar>
+              <v-tabs-window v-model="selectedTab" class="pa-3">
+                <v-tabs-window-item value="user_playlists">
+                  <user-playlists-tab />
+                </v-tabs-window-item>
+                <v-tabs-window-item value="search_albums">
+                  <SearchAlbumsTab />
+                </v-tabs-window-item>
+                <v-tabs-window-item value="search_playlists">
+                  <SearchPlaylistsTab />
+                </v-tabs-window-item>
+              </v-tabs-window>
+            </v-card>
+          </template>
+        </v-dialog>
+
+        <!-- Remove items -->
+        <v-select :items="origins" item-value="id" item-title="name" label="Origins" chips multiple density="compact"
+          variant="outlined" hide-details v-model="projectStore.selectedOrigins"
+          @update:modelValue="layoutStore.calculateLayout" :disabled="!projectStore.hasOrigins">
+          <template v-slot:item="{ props: itemProps, item }">
+            <v-list-item v-bind="itemProps" :title="item.raw.name">
+              <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-playlist-remove" size="small" variant="text" @click.stop="removeOrigin(item.raw.id)" />
+              </template>
+            </v-list-item>
+          </template>
+        </v-select>
+
+        <v-divider vertical />
+
+        <v-btn icon="mdi-cassette" size="small" variant="text" @click="addCassette" />
+
+        <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"
+          :disabled="!projectStore.hasOrigins">
+          <template v-slot:item="{ props: itemProps, item }">
+            <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" />
+
+        <v-divider vertical />
+
+        <v-btn size="small" variant="text">
+          <v-icon icon="mdi-upload-multiple" />
+          <upload-cassette-dialog />
+        </v-btn>
+      </template>
+    </v-card>
+    <v-spacer />
   </v-app-bar>
 </template>
diff --git a/src/components/PlaylistList.vue b/src/components/PlaylistList.vue
index 5c1e198..7f5e2ee 100644
--- a/src/components/PlaylistList.vue
+++ b/src/components/PlaylistList.vue
@@ -1,8 +1,12 @@
 <script lang="ts" setup>
-import router from '@/router';
 import type { Playlist } from '@/types/tapeify/models';
 import type { InfiniteScrollSide, InfiniteScrollStatus } from 'vuetify/lib/components/VInfiniteScroll/VInfiniteScroll.mjs';
 import { VInfiniteScroll } from 'vuetify/components';
+import { usePlaylistsStore } from '@/stores/playlists';
+import { useLayoutStore } from '@/stores/layout';
+
+const playlistStore = usePlaylistsStore()
+const layoutStore = useLayoutStore()
 
 const props = defineProps<{
   playlists: Playlist[]
@@ -11,12 +15,9 @@ const props = defineProps<{
 
 const infiniteScrollRef = useTemplateRef<InstanceType<typeof VInfiniteScroll>>('playlistScroll')
 
-function SelectItem(id: string) {
-  router.push({
-    name: '/cassette/[spotify_id]',
-    params: { spotify_id: id },
-    query: { type: 'playlist' }
-  })
+async function SelectItem(id: string) {
+  await playlistStore.FetchPlaylistTracks(id)
+  layoutStore.calculateLayout()
 }
 
 function reset() {
diff --git a/src/components/SearchAlbumsTab.vue b/src/components/SearchAlbumsTab.vue
index 0ff24d8..ac21359 100644
--- a/src/components/SearchAlbumsTab.vue
+++ b/src/components/SearchAlbumsTab.vue
@@ -15,14 +15,12 @@ const albums = ref<AlbumSearchResult>({
   next: false,
   previous: false
 })
-const TAB_NAME = 'search_albums'
 const DEBOUNCE_DELAY_MS = 200
 
 let query = ref('')
 watch(query, (newQuery) => {
   if (newQuery.length === 0) {
     albums.value.albums = []
-    updateUrl()
     return
   }
   loading.value = true
@@ -30,25 +28,8 @@ watch(query, (newQuery) => {
   loading.value = false
 })
 
-onMounted(async () => {
-  const url = new URL(location.href)
-
-  const queryParam = url.searchParams.get('query')
-  const tabParam = url.searchParams.get('tab')
-
-  if (queryParam !== null && tabParam === TAB_NAME) {
-    query.value = queryParam
-    albums.value = await albumsStore.searchAlbums(
-      query.value,
-      limit.value,
-      offset.value
-    )
-  }
-})
-
 const searchAlbums = debounce(async (query: string, limit: number = 10, offset: number = 0) => {
   {
-    updateUrl()
     if (query === '') {
       albums.value.albums = []
     } else {
@@ -67,7 +48,6 @@ async function LoadMoreAlbums({ side, done }: { side: InfiniteScrollSide; done:
     albums.value.albums = []
     return
   }
-  updateUrl()
   offset.value += limit.value
   done('loading')
   await albumsStore.searchAlbums(
@@ -88,23 +68,6 @@ function ClearSearchBar() {
   albums.value.albums = []
   query.value = ''
   offset.value = 0
-  updateUrl()
-}
-
-function updateUrl() {
-  if (query.value === '') {
-    router.push({
-      name: '/search',
-    });
-  } else {
-    router.push({
-      name: '/search',
-      query: {
-        query: query.value,
-        tab: TAB_NAME
-      }
-    });
-  }
 }
 
 </script>
diff --git a/src/components/SearchPlaylistsTab.vue b/src/components/SearchPlaylistsTab.vue
index a8841ad..03670a9 100644
--- a/src/components/SearchPlaylistsTab.vue
+++ b/src/components/SearchPlaylistsTab.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import router from '@/router'
 import { usePlaylistsStore } from '@/stores/playlists';
 import type { PlaylistSearchResult } from '@/types/tapeify/models';
 import debounce from 'lodash-es/debounce'
@@ -16,14 +15,12 @@ const playlists = ref<PlaylistSearchResult>({
   previous: false
 })
 
-const TAB_NAME = 'search_playlists'
 const DEBOUNCE_DELAY_MS = 200
 
 let query = ref('')
 watch(query, (newQuery) => {
   if (newQuery.length === 0) {
     playlists.value.playlists = []
-    updateUrl()
     return
   }
   loading.value = true
@@ -31,24 +28,7 @@ watch(query, (newQuery) => {
   loading.value = false
 })
 
-onMounted(async () => {
-  const url = new URL(location.href)
-
-  const queryParam = url.searchParams.get('query')
-  const tabParam = url.searchParams.get('tab')
-
-  if (queryParam !== null && tabParam === TAB_NAME) {
-    query.value = queryParam
-    playlists.value = await playlistsStore.searchPlaylists(
-      query.value,
-      limit.value,
-      offset.value
-    )
-  }
-})
-
 const searchPlaylists = debounce(async (query: string, limit: number = 10, offset: number = 0) => {
-  updateUrl()
   if (query === '') {
     playlists.value.playlists = []
   } else {
@@ -68,7 +48,6 @@ async function LoadMorePlaylists({ side, done }: { side: InfiniteScrollSide; don
     playlists.value.playlists = []
     return
   }
-  updateUrl()
   offset.value += limit.value
   done('loading')
   await playlistsStore.searchPlaylists(
@@ -89,23 +68,6 @@ function ClearSearchBar() {
   playlists.value.playlists = []
   offset.value = 0
   query.value = ''
-  updateUrl()
-}
-
-function updateUrl() {
-  if (query.value === '') {
-    router.push({
-      name: '/search',
-    });
-  } else {
-    router.push({
-      name: '/search',
-      query: {
-        query: query.value,
-        tab: TAB_NAME
-      }
-    });
-  }
 }
 </script>
 
diff --git a/src/components/cassette/Cassette.vue b/src/components/cassette/Cassette.vue
index f32ba4e..9127c17 100644
--- a/src/components/cassette/Cassette.vue
+++ b/src/components/cassette/Cassette.vue
@@ -21,11 +21,6 @@ const topAlert = computed(() => {
   return cassetteStore.alertForCassette(props.cassetteId)
 })
 
-function addCassette() {
-  cassetteStore.addCassette()
-  layoutStore.calculateLayout()
-}
-
 function removeCassette() {
   cassetteStore.removeCassette(props.cassetteId)
   anchorsStore.removeAnchoresByCassetteId(props.cassetteId)
@@ -88,11 +83,7 @@ const name = computed<string>({
         </template>
 
         <v-list>
-          <v-list-subheader>Cassette</v-list-subheader>
-          <v-divider />
-          <v-list-item title="Add cassette" @click="addCassette" />
           <v-list-item title="Remove this cassette" @click="removeCassette" />
-          <v-list-subheader>Sides</v-list-subheader>
           <v-divider />
           <v-list-item title="Add side" @click="addSide" />
           <v-list-item title="Remove side" @click="removeSide" :disabled="cassette!.sidesCount <= 1" />
diff --git a/src/layouts/cassetteControls.vue b/src/layouts/cassetteControls.vue
index a27deb6..a6d311b 100644
--- a/src/layouts/cassetteControls.vue
+++ b/src/layouts/cassetteControls.vue
@@ -1,5 +1,4 @@
 <template>
-  <cassette-info-drawer />
   <cassette-actions-bar />
-    <router-view class="pa-10"/>
+  <router-view class="pa-10" />
 </template>
diff --git a/src/pages/project.vue b/src/pages/project.vue
new file mode 100644
index 0000000..216ddcc
--- /dev/null
+++ b/src/pages/project.vue
@@ -0,0 +1,39 @@
+<route>
+{
+  "meta": {
+    "layout": "cassetteControls"
+  }
+}
+</route>
+
+<script setup lang="ts">
+import { useCassettesStore } from '@/stores/cassette';
+import { useKeyboardTrapFactory } from '@pdanpdan/vue-keyboard-trap'
+import { resetStores } from '@/utils/reset.stores';
+import { useProjectStore } from '@/stores/project';
+
+const gridRef = ref<HTMLElement | null>(null)
+const useKeyboardTrap = useKeyboardTrapFactory({})
+useKeyboardTrap(gridRef, { roving: true, grid: true }, true)
+
+const cassetteStore = useCassettesStore()
+const projectStore = useProjectStore()
+
+onMounted(() => cassetteStore.initAlerts())
+onUnmounted(() => resetStores())
+</script>
+
+<template>
+    {{ projectStore.origins }}
+    {{ projectStore.hasOrigins }}
+    <div v-if="projectStore.hasOrigins" :key="Object.keys(projectStore.origins).join()">
+
+        <div ref="gridRef" v-kbd-trap.roving.grid aria-label="item grid">
+            <v-row justify="center">
+                <v-col v-for="cassette in cassetteStore.cassettes" :key="cassette.id" cols="12" sm="6">
+                    <cassette :cassetteId="cassette.id" class="included" />
+                </v-col>
+            </v-row>
+        </div>
+    </div>
+</template>
diff --git a/src/parsers/episodeDtoParser.ts b/src/parsers/episodeDtoParser.ts
index 43274ed..ad534dd 100644
--- a/src/parsers/episodeDtoParser.ts
+++ b/src/parsers/episodeDtoParser.ts
@@ -3,7 +3,7 @@ import type { Track } from "@/types/tapeify/models";
 import { GetSmallestImage } from "@/utils/images/imageUtils";
 import { v4 as uuidv4 } from 'uuid';
 
-export function ParsePlaylistEpisodeDTO(episodeDTO: EpisodeDTO): Track {
+export function ParsePlaylistEpisodeDTO(episodeDTO: EpisodeDTO, playlistId: string): Track {
     return {
         name: episodeDTO.name,
         spotifyId: episodeDTO.id,
@@ -12,6 +12,7 @@ export function ParsePlaylistEpisodeDTO(episodeDTO: EpisodeDTO): Track {
         explicit: episodeDTO.explicit,
         durationMs: episodeDTO.duration_ms,
         artists: episodeDTO.album.artists.map(a => a.type),
-        image: GetSmallestImage(episodeDTO.album.images)
+        image: GetSmallestImage(episodeDTO.album.images),
+        origin: playlistId
     }
 }
\ No newline at end of file
diff --git a/src/parsers/trackDtoParser.ts b/src/parsers/trackDtoParser.ts
index 63ec546..12830e4 100644
--- a/src/parsers/trackDtoParser.ts
+++ b/src/parsers/trackDtoParser.ts
@@ -3,7 +3,7 @@ import type { Track } from "@/types/tapeify/models";
 import { GetSmallestImage } from "@/utils/images/imageUtils";
 import { v4 as uuidv4 } from 'uuid';
 
-export function ParsePlaylistTrackDTO(track: PlaylistTrackDTO): Track {
+export function ParsePlaylistTrackDTO(track: PlaylistTrackDTO, playlistId: string): Track {
     return {
         name: track.name,
         spotifyId: track.id,
@@ -12,11 +12,12 @@ export function ParsePlaylistTrackDTO(track: PlaylistTrackDTO): Track {
         explicit: track.explicit,
         durationMs: track.duration_ms,
         artists: track.artists.map(a => a.name),
-        image: GetSmallestImage(track.album.images)
+        image: GetSmallestImage(track.album.images),
+        origin: playlistId
     }
 }
 
-export function ParseAlbumTrackDTO(track: TrackDTO, albumImage: URL | undefined): Track {
+export function ParseAlbumTrackDTO(track: TrackDTO, albumImage: URL | undefined, albumId: string): Track {
     return {
         name: track.name,
         spotifyId: track.id,
@@ -25,6 +26,7 @@ export function ParseAlbumTrackDTO(track: TrackDTO, albumImage: URL | undefined)
         explicit: track.explicit,
         durationMs: track.duration_ms,
         artists: track.artists.map(a => a.name),
-        image: albumImage
+        image: albumImage,
+        origin: albumId
     }
 }  
diff --git a/src/stores/album.ts b/src/stores/album.ts
index 2f7414c..33b286e 100644
--- a/src/stores/album.ts
+++ b/src/stores/album.ts
@@ -8,12 +8,14 @@ import { apiClient } from '@/api/clients'
 import { useProfileStore } from './profile'
 import type { AlbumDTO } from '@/types/spotify/dto'
 import { ParseAlbumDTO } from '@/parsers/albumDtoParser'
+import { useProjectStore } from './project'
 
 export const useAlbumsStore = defineStore('albums', {
   actions: {
     async FetchAlbumTracks(albumId: string) {
       const tracksStore = useTracksStore()
       const cassetteStore = useCassettesStore()
+      const projectStore = useProjectStore()
 
       const response = await apiClient.get<GetAlbumResponse>('/albums/' + albumId)
       const album = response.data
@@ -34,21 +36,20 @@ export const useAlbumsStore = defineStore('albums', {
         })
 
         for (const item of tracksResponse.data.items) {
-          tracksStore.AddTrack(ParseAlbumTrackDTO(item, imageUrl))
+          tracksStore.AddTrack(ParseAlbumTrackDTO(item, imageUrl, albumId))
         }
 
         offset += limit
       }
 
-      cassetteStore.updateName('default', album.name)
-      cassetteStore.updateMetadata({
+      projectStore.addOrigin({
+        name: album.name,
+        type: 'album',
         owner_display_name: album.artists[0].name,
-        owner_url: album.artists[0].external_urls.spotify,
-        description: '',
-        image_url: new URL(album.images[0].url),
         original_item_url: album.external_urls.spotify,
-        item_name: album.name,
-      })
+        owner_url: album.artists[0].external_urls.spotify,
+        description: ""
+      }, album.id)
     },
     async searchAlbums(query: string, limit: number = 10, offset: number = 0) {
       const profileStore = useProfileStore()
diff --git a/src/stores/cassette.ts b/src/stores/cassette.ts
index 819c06c..b98bf86 100644
--- a/src/stores/cassette.ts
+++ b/src/stores/cassette.ts
@@ -2,7 +2,6 @@ import { defineStore } from 'pinia'
 import type {
   Cassette,
   CassetteAlert,
-  CassetteMetadata,
   TapeSideLayout,
 } from '@/types/tapeify/models'
 import { v4 as uuidv4 } from 'uuid'
@@ -14,9 +13,8 @@ import { useLayoutStore } from './layout'
 export const useCassettesStore = defineStore('cassettes', {
   state: () => ({
     possibleLengthsMin: [30, 45, 60, 90, 120],
-    metadata: {} as CassetteMetadata,
     cassettes: [
-      { id: 'default', name: 'My First Cassette', capacityMs: 90 * 60000, sidesCount: 2 },
+      { id: 'default', name: 'Cassette', capacityMs: 90 * 60000, sidesCount: 2 },
     ] as Cassette[],
     alerts: {} as Record<string, CassetteAlert>,
   }),
@@ -34,7 +32,7 @@ export const useCassettesStore = defineStore('cassettes', {
     addCassette() {
       this.cassettes.push({
         id: uuidv4(),
-        name: `${this.metadata.item_name} ${this.cassettes.length + 1}`,
+        name: `Cassette ${this.cassettes.length + 1}`,
         capacityMs: 90 * 60000,
         sidesCount: 2
       })
@@ -68,10 +66,6 @@ export const useCassettesStore = defineStore('cassettes', {
         cassette.sidesCount = newSidesCount
       }
     },
-
-    updateMetadata(newMetadata: CassetteMetadata) {
-      this.metadata = newMetadata
-    },
     initAlerts() {
       const layoutStore = useLayoutStore()
 
diff --git a/src/stores/layout.ts b/src/stores/layout.ts
index 0911818..049676d 100644
--- a/src/stores/layout.ts
+++ b/src/stores/layout.ts
@@ -5,6 +5,7 @@ import { useCassettesStore } from "./cassette";
 import { useTracksStore } from "./tracks";
 import { useAnchorsStore } from "./anchor";
 import { TapeSide } from "@/sorting/tapeSideLayout";
+import { useProjectStore } from "./project";
 
 export const useLayoutStore = defineStore('layout', {
     state: () => ({
@@ -63,6 +64,7 @@ export const useLayoutStore = defineStore('layout', {
             const cassetteStore = useCassettesStore()
             const trackStore = useTracksStore()
             const anchorsStore = useAnchorsStore()
+            const projectStore = useProjectStore()
 
             this.orderedTracks = []
             this.trackLocations = {}
@@ -79,10 +81,11 @@ export const useLayoutStore = defineStore('layout', {
 
             const trackSorter = trackSorterRegistry.create(this.selectedSortType, sides)
 
-            const tracks = trackStore.availableTracks
+            const availableTracks = trackStore.availableTracks
+            const tracksInSelectedOrigins = availableTracks.filter(track => projectStore.selectedOrigins.includes(track.origin))
 
-            const anchored_tracks = trackSorter.prepackAnchoredTracks(tracks, anchorsStore.anchors)
-            const unanchored_tracks = tracks.filter(t => !anchored_tracks.includes(t))
+            const anchored_tracks = trackSorter.prepackAnchoredTracks(tracksInSelectedOrigins, anchorsStore.anchors)
+            const unanchored_tracks = tracksInSelectedOrigins.filter(t => !anchored_tracks.includes(t))
             trackSorter.sortTracks(sides, unanchored_tracks)
 
             this._calculate_cassette_layout(sides)
diff --git a/src/stores/playlists.ts b/src/stores/playlists.ts
index 9d07013..9a4abc8 100644
--- a/src/stores/playlists.ts
+++ b/src/stores/playlists.ts
@@ -9,7 +9,7 @@ import { apiClient } from '@/api/clients'
 import { ParsePlaylistDTO } from '@/parsers/playlistDtoParser'
 import type { Playlist, PlaylistSearchResult, Track } from '@/types/tapeify/models'
 import { useProfileStore } from './profile'
-import { GetSmallestImage } from '@/utils/images/imageUtils'
+import { useProjectStore } from './project'
 
 export const usePlaylistsStore = defineStore('playlists', {
   actions: {
@@ -56,6 +56,7 @@ export const usePlaylistsStore = defineStore('playlists', {
     async FetchPlaylistTracks(playlistId: string) {
       const cassetteStore = useCassettesStore()
       const tracksStore = useTracksStore()
+      const projectStore = useProjectStore()
 
       const playlistResponse = await apiClient.get<GetPlaylistsResponse>('/playlists/' + playlistId)
       const playlist = playlistResponse.data
@@ -77,25 +78,24 @@ export const usePlaylistsStore = defineStore('playlists', {
         for (const item of tracks.items) {
           const track = item.track
           if (track.type === 'track') {
-            tracksStore.AddTrack(ParsePlaylistTrackDTO(track as PlaylistTrackDTO))
+            tracksStore.AddTrack(ParsePlaylistTrackDTO(track as PlaylistTrackDTO, playlistId))
           }
           if (track.type === 'episode') {
-            tracksStore.AddTrack(ParsePlaylistEpisodeDTO(track as EpisodeDTO))
+            tracksStore.AddTrack(ParsePlaylistEpisodeDTO(track as EpisodeDTO, playlistId))
           }
         }
 
         offset += limit
       }
 
-      cassetteStore.updateName('default', playlist.name)
-      cassetteStore.updateMetadata({
+      projectStore.addOrigin({
+        name: playlist.name,
+        type: 'playlist',
         owner_display_name: playlist.owner.display_name,
+        original_item_url: playlist.external_urls.spotify,
         owner_url: playlist.owner.external_urls.spotify,
         description: playlist.description,
-        image_url: new URL(playlist.images[0].url),
-        original_item_url: playlist.external_urls.spotify,
-        item_name: playlist.name,
-      })
+      }, playlist.id)
     },
     async UploadNewPlaylist(name: string, description: string, isPublic: boolean): Promise<Playlist> {
       const profileStore = useProfileStore()
diff --git a/src/stores/project.ts b/src/stores/project.ts
new file mode 100644
index 0000000..0ace4bf
--- /dev/null
+++ b/src/stores/project.ts
@@ -0,0 +1,24 @@
+import type { Origin } from "@/types/tapeify/models";
+import { defineStore } from "pinia";
+
+export const useProjectStore = defineStore('project', {
+    state: () => ({
+        origins: {} as Record<string, Origin>,
+        selectedOrigins: [] as string[],
+    }),
+    getters: {
+        hasOrigins: (state) => Object.keys(state.origins).length > 0,
+    },
+    actions: {
+        addOrigin(origin: Origin, id: string) {
+            this.origins[id] = origin;
+            if (!this.selectedOrigins.includes(id)) {
+                this.selectedOrigins.push(id);
+            }
+        },
+        removeOrigin(id: string) {
+            delete this.origins[id];
+            this.selectedOrigins = this.selectedOrigins.filter(originId => originId !== id);
+        }
+    }
+})
\ No newline at end of file
diff --git a/src/stores/tracks.ts b/src/stores/tracks.ts
index 0c0943f..82b4dd8 100644
--- a/src/stores/tracks.ts
+++ b/src/stores/tracks.ts
@@ -42,6 +42,14 @@ export const useTracksStore = defineStore('tracks', {
     },
     ClearSelectedTracks() {
       this.selectedTracks = []
+    },
+    RemoveTracksByOrigin(originId: string) {
+      const tracksToRemove = this._masterTrackList.filter(track => track.origin === originId)
+      const trackIdsToRemove = tracksToRemove.map(t => t.id)
+
+      this._masterTrackList = this._masterTrackList.filter(track => track.origin !== originId)
+      this.unavailableTrackIds = this.unavailableTrackIds.filter(id => !trackIdsToRemove.includes(id))
+      this.selectedTracks = this.selectedTracks.filter(id => !trackIdsToRemove.includes(id))
     }
   }
 })
diff --git a/src/typed-router.d.ts b/src/typed-router.d.ts
index 43541d4..c79862e 100644
--- a/src/typed-router.d.ts
+++ b/src/typed-router.d.ts
@@ -1,4 +1,4 @@
- 
+/* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
 // noinspection ES6UnusedImports
@@ -44,6 +44,13 @@ declare module 'vue-router/auto-routes' {
       { spotify_id: ParamValue<false> },
       | never
     >,
+    '/project': RouteRecordInfo<
+      '/project',
+      '/project',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     '/search': RouteRecordInfo<
       '/search',
       '/search',
@@ -82,6 +89,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/pages/project.vue': {
+      routes:
+        | '/project'
+      views:
+        | never
+    }
     'src/pages/search.vue': {
       routes:
         | '/search'
diff --git a/src/types/tapeify/models.ts b/src/types/tapeify/models.ts
index 24049e3..247e7a6 100644
--- a/src/types/tapeify/models.ts
+++ b/src/types/tapeify/models.ts
@@ -58,6 +58,7 @@ export interface Track {
   explicit: boolean
   durationMs: number
   artists: string[]
+  origin: string
 }
 
 export interface TrackLocation {
@@ -77,15 +78,6 @@ export interface CassetteLayout {
   sides: Array<TapeSideLayout>
 }
 
-export interface CassetteMetadata {
-  owner_display_name: string
-  item_name: string
-  original_item_url: string
-  owner_url: string
-  description: string
-  image_url?: URL
-}
-
 export interface CassetteAlert {
   message: string
   priority: number
@@ -119,3 +111,12 @@ export type AlertRule<TPayload = any> = {
     payload?: TPayload
   ) => CassetteAlert['action']
 }
+
+export interface Origin {
+  type: 'playlist' | 'album',
+  name: string
+  owner_display_name: string
+  original_item_url: string
+  owner_url: string
+  description: string
+}

From 4268403a4c33d85b0461752f86dd57b24baa0c4c Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Mon, 4 May 2026 11:41:16 +0200
Subject: [PATCH 02/13] Fix reference error

---
 src/components/CassetteActionsBar.vue | 15 ++++++++++-----
 src/components/PlaylistList.vue       |  2 +-
 src/components/SearchAlbumsTab.vue    |  1 -
 src/pages/project.vue                 | 17 ++++++-----------
 src/stores/playlists.ts               |  2 --
 src/stores/tracks.ts                  |  3 ++-
 6 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/components/CassetteActionsBar.vue b/src/components/CassetteActionsBar.vue
index 9df0c53..1ca9a6f 100644
--- a/src/components/CassetteActionsBar.vue
+++ b/src/components/CassetteActionsBar.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useAnchorsStore } from '@/stores/anchor';
 import { useCassettesStore } from '@/stores/cassette';
 import { useLayoutStore } from '@/stores/layout';
 import { useProjectStore } from '@/stores/project';
@@ -8,6 +9,7 @@ const layoutStore = useLayoutStore()
 const projectStore = useProjectStore()
 const cassetteStore = useCassettesStore()
 const trackStore = useTracksStore()
+const anchorStore = useAnchorsStore()
 
 const selectedSortType = computed({
   get: () => layoutStore.selectedSortType,
@@ -21,7 +23,10 @@ function addCassette() {
 
 function removeOrigin(originId: string) {
   projectStore.removeOrigin(originId)
-  trackStore.RemoveTracksByOrigin(originId)
+  const removedTracks = trackStore.RemoveTracksByOrigin(originId)
+  removedTracks.forEach(trackId => {
+    anchorStore.removeAnchor(trackId)
+  })
   layoutStore.calculateLayout()
 }
 
@@ -49,7 +54,7 @@ const origins = computed(() => {
           </template>
 
           <template v-slot:default>
-            <v-card class="cassette-card">
+            <v-card style="border-radius: 12px;">
               <v-toolbar color="primary" title="Select Playlist or Album">
                 <template v-slot:extension>
                   <v-tabs v-model="selectedTab" align-tabs="center">
@@ -94,7 +99,7 @@ const origins = computed(() => {
 
         <v-divider vertical />
 
-        <v-btn icon="mdi-cassette" size="small" variant="text" @click="addCassette" />
+        <v-btn icon="mdi-cassette" size="small" variant="text" @click="addCassette" :disabled="!projectStore.hasOrigins" />
 
         <v-divider vertical />
 
@@ -111,11 +116,11 @@ const origins = computed(() => {
 
 
         <v-btn icon="mdi-import" size="small" variant="text" />
-        <v-btn icon="mdi-export" size="small" variant="text" />
+        <v-btn icon="mdi-export" size="small" variant="text" :disabled="!projectStore.hasOrigins" />
 
         <v-divider vertical />
 
-        <v-btn size="small" variant="text">
+        <v-btn size="small" variant="text" :disabled="!projectStore.hasOrigins" >
           <v-icon icon="mdi-upload-multiple" />
           <upload-cassette-dialog />
         </v-btn>
diff --git a/src/components/PlaylistList.vue b/src/components/PlaylistList.vue
index 7f5e2ee..e022884 100644
--- a/src/components/PlaylistList.vue
+++ b/src/components/PlaylistList.vue
@@ -17,7 +17,7 @@ const infiniteScrollRef = useTemplateRef<InstanceType<typeof VInfiniteScroll>>('
 
 async function SelectItem(id: string) {
   await playlistStore.FetchPlaylistTracks(id)
-  layoutStore.calculateLayout()
+    layoutStore.calculateLayout()
 }
 
 function reset() {
diff --git a/src/components/SearchAlbumsTab.vue b/src/components/SearchAlbumsTab.vue
index ac21359..3c08b74 100644
--- a/src/components/SearchAlbumsTab.vue
+++ b/src/components/SearchAlbumsTab.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import router from '@/router'
 import { useAlbumsStore } from '@/stores/album';
 import type { AlbumSearchResult } from '@/types/tapeify/models';
 import type { InfiniteScrollSide, InfiniteScrollStatus } from 'vuetify/lib/components/VInfiniteScroll/VInfiniteScroll.mjs';
diff --git a/src/pages/project.vue b/src/pages/project.vue
index 216ddcc..3f39f14 100644
--- a/src/pages/project.vue
+++ b/src/pages/project.vue
@@ -24,16 +24,11 @@ onUnmounted(() => resetStores())
 </script>
 
 <template>
-    {{ projectStore.origins }}
-    {{ projectStore.hasOrigins }}
-    <div v-if="projectStore.hasOrigins" :key="Object.keys(projectStore.origins).join()">
-
-        <div ref="gridRef" v-kbd-trap.roving.grid aria-label="item grid">
-            <v-row justify="center">
-                <v-col v-for="cassette in cassetteStore.cassettes" :key="cassette.id" cols="12" sm="6">
-                    <cassette :cassetteId="cassette.id" class="included" />
-                </v-col>
-            </v-row>
-        </div>
+    <div ref="gridRef" v-kbd-trap.roving.grid aria-label="item grid">
+        <v-row justify="center" v-if="projectStore.hasOrigins">
+            <v-col v-for="cassette in cassetteStore.cassettes" :key="cassette.id" cols="12" sm="6">
+                <cassette :cassetteId="cassette.id" class="included" />
+            </v-col>
+        </v-row>
     </div>
 </template>
diff --git a/src/stores/playlists.ts b/src/stores/playlists.ts
index 9a4abc8..7805ec2 100644
--- a/src/stores/playlists.ts
+++ b/src/stores/playlists.ts
@@ -4,7 +4,6 @@ import type { CreatePlaylistResponse, GetPlaylistsResponse, GetPlaylistTracksRes
 import type { EpisodeDTO, PlaylistDTO, PlaylistTrackDTO } from '@/types/spotify/dto'
 import { ParsePlaylistTrackDTO } from '@/parsers/trackDtoParser'
 import { ParsePlaylistEpisodeDTO } from '@/parsers/episodeDtoParser'
-import { useCassettesStore } from './cassette'
 import { apiClient } from '@/api/clients'
 import { ParsePlaylistDTO } from '@/parsers/playlistDtoParser'
 import type { Playlist, PlaylistSearchResult, Track } from '@/types/tapeify/models'
@@ -54,7 +53,6 @@ export const usePlaylistsStore = defineStore('playlists', {
 
     },
     async FetchPlaylistTracks(playlistId: string) {
-      const cassetteStore = useCassettesStore()
       const tracksStore = useTracksStore()
       const projectStore = useProjectStore()
 
diff --git a/src/stores/tracks.ts b/src/stores/tracks.ts
index 82b4dd8..37f7cd9 100644
--- a/src/stores/tracks.ts
+++ b/src/stores/tracks.ts
@@ -43,13 +43,14 @@ export const useTracksStore = defineStore('tracks', {
     ClearSelectedTracks() {
       this.selectedTracks = []
     },
-    RemoveTracksByOrigin(originId: string) {
+    RemoveTracksByOrigin(originId: string): string[] {
       const tracksToRemove = this._masterTrackList.filter(track => track.origin === originId)
       const trackIdsToRemove = tracksToRemove.map(t => t.id)
 
       this._masterTrackList = this._masterTrackList.filter(track => track.origin !== originId)
       this.unavailableTrackIds = this.unavailableTrackIds.filter(id => !trackIdsToRemove.includes(id))
       this.selectedTracks = this.selectedTracks.filter(id => !trackIdsToRemove.includes(id))
+      return trackIdsToRemove
     }
   }
 })

From 146c907aa4a3257a701bfab2f9c30bea36c6f5b6 Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Mon, 4 May 2026 11:45:00 +0200
Subject: [PATCH 03/13] Added dialogs subfolder

---
 src/components.d.ts                           |  3 +-
 src/components/CassetteActionsBar.vue         | 38 ++-----------------
 src/components/dialogs/AddSourceDialog.vue    | 36 ++++++++++++++++++
 .../{ => dialogs}/UploadCassetteDialog.vue    |  0
 src/main.ts                                   |  4 +-
 5 files changed, 45 insertions(+), 36 deletions(-)
 create mode 100644 src/components/dialogs/AddSourceDialog.vue
 rename src/components/{ => dialogs}/UploadCassetteDialog.vue (100%)

diff --git a/src/components.d.ts b/src/components.d.ts
index 4c94616..0386c36 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -11,6 +11,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AddSourceDialog: typeof import('./components/dialogs/AddSourceDialog.vue')['default']
     AlbumList: typeof import('./components/AlbumList.vue')['default']
     AppFooter: typeof import('./components/AppFooter.vue')['default']
     Cassette: typeof import('./components/cassette/Cassette.vue')['default']
@@ -25,7 +26,7 @@ declare module 'vue' {
     SearchPlaylistsTab: typeof import('./components/SearchPlaylistsTab.vue')['default']
     UnavailableCassetteItem: typeof import('./components/UnavailableCassetteItem.vue')['default']
     UnavailableTracksList: typeof import('./components/UnavailableTracksList.vue')['default']
-    UploadCassetteDialog: typeof import('./components/UploadCassetteDialog.vue')['default']
+    UploadCassetteDialog: typeof import('./components/dialogs/UploadCassetteDialog.vue')['default']
     UserPlaylistsTab: typeof import('./components/UserPlaylistsTab.vue')['default']
   }
 }
diff --git a/src/components/CassetteActionsBar.vue b/src/components/CassetteActionsBar.vue
index 1ca9a6f..38145fa 100644
--- a/src/components/CassetteActionsBar.vue
+++ b/src/components/CassetteActionsBar.vue
@@ -30,8 +30,6 @@ function removeOrigin(originId: string) {
   layoutStore.calculateLayout()
 }
 
-const selectedTab = ref('user_playlists')
-
 const origins = computed(() => {
   return Object.entries(projectStore.origins).map(([id, origin]) => ({
     id,
@@ -48,36 +46,7 @@ const origins = computed(() => {
       <template v-slot:actions>
 
         <!-- Add items -->
-        <v-dialog max-width="800">
-          <template v-slot:activator="{ props: activatorProps }">
-            <v-btn v-bind="activatorProps" icon="mdi-playlist-plus" size="small" variant="text" />
-          </template>
-
-          <template v-slot:default>
-            <v-card style="border-radius: 12px;">
-              <v-toolbar color="primary" title="Select Playlist or Album">
-                <template v-slot:extension>
-                  <v-tabs v-model="selectedTab" align-tabs="center">
-                    <v-tab value="user_playlists">My Playlists</v-tab>
-                    <v-tab value="search_albums">Search Albums</v-tab>
-                    <v-tab value="search_playlists">Search Playlists</v-tab>
-                  </v-tabs>
-                </template>
-              </v-toolbar>
-              <v-tabs-window v-model="selectedTab" class="pa-3">
-                <v-tabs-window-item value="user_playlists">
-                  <user-playlists-tab />
-                </v-tabs-window-item>
-                <v-tabs-window-item value="search_albums">
-                  <SearchAlbumsTab />
-                </v-tabs-window-item>
-                <v-tabs-window-item value="search_playlists">
-                  <SearchPlaylistsTab />
-                </v-tabs-window-item>
-              </v-tabs-window>
-            </v-card>
-          </template>
-        </v-dialog>
+        <v-btn icon="mdi-playlist-plus" size="small" variant="text" > <add-source-dialog /> </v-btn>
 
         <!-- Remove items -->
         <v-select :items="origins" item-value="id" item-title="name" label="Origins" chips multiple density="compact"
@@ -99,7 +68,8 @@ const origins = computed(() => {
 
         <v-divider vertical />
 
-        <v-btn icon="mdi-cassette" size="small" variant="text" @click="addCassette" :disabled="!projectStore.hasOrigins" />
+        <v-btn icon="mdi-cassette" size="small" variant="text" @click="addCassette"
+          :disabled="!projectStore.hasOrigins" />
 
         <v-divider vertical />
 
@@ -120,7 +90,7 @@ const origins = computed(() => {
 
         <v-divider vertical />
 
-        <v-btn size="small" variant="text" :disabled="!projectStore.hasOrigins" >
+        <v-btn size="small" variant="text" :disabled="!projectStore.hasOrigins">
           <v-icon icon="mdi-upload-multiple" />
           <upload-cassette-dialog />
         </v-btn>
diff --git a/src/components/dialogs/AddSourceDialog.vue b/src/components/dialogs/AddSourceDialog.vue
new file mode 100644
index 0000000..9c58c67
--- /dev/null
+++ b/src/components/dialogs/AddSourceDialog.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+const selectedTab = ref('user_playlists')
+</script>
+
+<template>
+    <v-dialog max-width="800">
+        <template v-slot:activator="{ props: activatorProps }">
+            <v-btn v-bind="activatorProps" icon="mdi-playlist-plus" size="small" variant="text" />
+        </template>
+
+        <template v-slot:default>
+            <v-card style="border-radius: 12px;">
+                <v-toolbar color="primary" title="Select Playlist or Album">
+                    <template v-slot:extension>
+                        <v-tabs v-model="selectedTab" align-tabs="center">
+                            <v-tab value="user_playlists">My Playlists</v-tab>
+                            <v-tab value="search_albums">Search Albums</v-tab>
+                            <v-tab value="search_playlists">Search Playlists</v-tab>
+                        </v-tabs>
+                    </template>
+                </v-toolbar>
+                <v-tabs-window v-model="selectedTab" class="pa-3">
+                    <v-tabs-window-item value="user_playlists">
+                        <user-playlists-tab />
+                    </v-tabs-window-item>
+                    <v-tabs-window-item value="search_albums">
+                        <SearchAlbumsTab />
+                    </v-tabs-window-item>
+                    <v-tabs-window-item value="search_playlists">
+                        <SearchPlaylistsTab />
+                    </v-tabs-window-item>
+                </v-tabs-window>
+            </v-card>
+        </template>
+    </v-dialog>
+</template>
\ No newline at end of file
diff --git a/src/components/UploadCassetteDialog.vue b/src/components/dialogs/UploadCassetteDialog.vue
similarity index 100%
rename from src/components/UploadCassetteDialog.vue
rename to src/components/dialogs/UploadCassetteDialog.vue
diff --git a/src/main.ts b/src/main.ts
index d539397..8846124 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -25,7 +25,8 @@ import UnavailableTracksList from './components/UnavailableTracksList.vue'
 import CassetteItem from './components/cassette/CassetteItem.vue'
 import CassetteActionsBar from './components/CassetteActionsBar.vue'
 import UnavailableCassetteItem from './components/UnavailableCassetteItem.vue'
-import UploadCassetteDialog from './components/UploadCassetteDialog.vue'
+import UploadCassetteDialog from './components/dialogs/UploadCassetteDialog.vue'
+import AddSourceDialog from "./components/dialogs/AddSourceDialog.vue";
 import Cassette from "./components/cassette/Cassette.vue";
 
 // Composables
@@ -49,6 +50,7 @@ app.component('cassette-item', CassetteItem)
 app.component('unavailable-cassette-item', UnavailableCassetteItem)
 app.component('cassette-actions-bar', CassetteActionsBar)
 app.component('upload-cassette-dialog', UploadCassetteDialog)
+app.component('add-source-dialog', AddSourceDialog)
 app.component('cassette', Cassette)
 
 app.mount('#app')

From 5b631e9a6fef0fd5da88079ddf8bbf6d41d2723b Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Mon, 4 May 2026 11:48:20 +0200
Subject: [PATCH 04/13] Rename origin to source

---
 src/auto-imports.d.ts                 |  2 +-
 src/components.d.ts                   |  2 +-
 src/components/CassetteActionsBar.vue | 28 +++++++++++++--------------
 src/pages/project.vue                 |  2 +-
 src/stores/album.ts                   |  2 +-
 src/stores/layout.ts                  |  2 +-
 src/stores/playlists.ts               |  2 +-
 src/stores/project.ts                 | 22 ++++++++++-----------
 src/stores/tracks.ts                  |  6 +++---
 src/typed-router.d.ts                 |  2 +-
 src/types/tapeify/models.ts           |  2 +-
 11 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
index 417365e..00281ab 100644
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -1,4 +1,4 @@
-/* eslint-disable */
+ 
 /* prettier-ignore */
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
diff --git a/src/components.d.ts b/src/components.d.ts
index 0386c36..ff0cf3b 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -1,4 +1,4 @@
-/* eslint-disable */
+ 
 // @ts-nocheck
 // biome-ignore lint: disable
 // oxlint-disable
diff --git a/src/components/CassetteActionsBar.vue b/src/components/CassetteActionsBar.vue
index 38145fa..ae18f65 100644
--- a/src/components/CassetteActionsBar.vue
+++ b/src/components/CassetteActionsBar.vue
@@ -21,19 +21,19 @@ function addCassette() {
   layoutStore.calculateLayout()
 }
 
-function removeOrigin(originId: string) {
-  projectStore.removeOrigin(originId)
-  const removedTracks = trackStore.RemoveTracksByOrigin(originId)
+function removeSource(sourceId: string) {
+  projectStore.removeSource(sourceId)
+  const removedTracks = trackStore.RemoveTracksBySource(sourceId)
   removedTracks.forEach(trackId => {
     anchorStore.removeAnchor(trackId)
   })
   layoutStore.calculateLayout()
 }
 
-const origins = computed(() => {
-  return Object.entries(projectStore.origins).map(([id, origin]) => ({
+const sources = computed(() => {
+  return Object.entries(projectStore.sources).map(([id, source]) => ({
     id,
-    name: origin.name
+    name: source.name
   }))
 })
 
@@ -49,9 +49,9 @@ const origins = computed(() => {
         <v-btn icon="mdi-playlist-plus" size="small" variant="text" > <add-source-dialog /> </v-btn>
 
         <!-- Remove items -->
-        <v-select :items="origins" item-value="id" item-title="name" label="Origins" chips multiple density="compact"
-          variant="outlined" hide-details v-model="projectStore.selectedOrigins"
-          @update:modelValue="layoutStore.calculateLayout" :disabled="!projectStore.hasOrigins">
+        <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.calculateLayout" :disabled="!projectStore.hasSources">
           <template v-slot:item="{ props: itemProps, item }">
             <v-list-item v-bind="itemProps" :title="item.raw.name">
               <template v-slot:prepend="{ isSelected, select }">
@@ -60,7 +60,7 @@ const origins = computed(() => {
                 </v-list-item-action>
               </template>
               <template v-slot:append>
-                <v-btn icon="mdi-playlist-remove" size="small" variant="text" @click.stop="removeOrigin(item.raw.id)" />
+                <v-btn icon="mdi-playlist-remove" size="small" variant="text" @click.stop="removeSource(item.raw.id)" />
               </template>
             </v-list-item>
           </template>
@@ -69,14 +69,14 @@ const origins = computed(() => {
         <v-divider vertical />
 
         <v-btn icon="mdi-cassette" size="small" variant="text" @click="addCassette"
-          :disabled="!projectStore.hasOrigins" />
+          :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"
-          :disabled="!projectStore.hasOrigins">
+          :disabled="!projectStore.hasSources">
           <template v-slot:item="{ props: itemProps, item }">
             <v-list-item v-bind="itemProps" :subtitle="item.raw.description" :title="item.raw.name" />
           </template>
@@ -86,11 +86,11 @@ const origins = computed(() => {
 
 
         <v-btn icon="mdi-import" size="small" variant="text" />
-        <v-btn icon="mdi-export" size="small" variant="text" :disabled="!projectStore.hasOrigins" />
+        <v-btn icon="mdi-export" size="small" variant="text" :disabled="!projectStore.hasSources" />
 
         <v-divider vertical />
 
-        <v-btn size="small" variant="text" :disabled="!projectStore.hasOrigins">
+        <v-btn size="small" variant="text" :disabled="!projectStore.hasSources">
           <v-icon icon="mdi-upload-multiple" />
           <upload-cassette-dialog />
         </v-btn>
diff --git a/src/pages/project.vue b/src/pages/project.vue
index 3f39f14..c6577c3 100644
--- a/src/pages/project.vue
+++ b/src/pages/project.vue
@@ -25,7 +25,7 @@ onUnmounted(() => resetStores())
 
 <template>
     <div ref="gridRef" v-kbd-trap.roving.grid aria-label="item grid">
-        <v-row justify="center" v-if="projectStore.hasOrigins">
+        <v-row justify="center" v-if="projectStore.hasSources">
             <v-col v-for="cassette in cassetteStore.cassettes" :key="cassette.id" cols="12" sm="6">
                 <cassette :cassetteId="cassette.id" class="included" />
             </v-col>
diff --git a/src/stores/album.ts b/src/stores/album.ts
index 33b286e..5aa4dbb 100644
--- a/src/stores/album.ts
+++ b/src/stores/album.ts
@@ -42,7 +42,7 @@ export const useAlbumsStore = defineStore('albums', {
         offset += limit
       }
 
-      projectStore.addOrigin({
+      projectStore.addSource({
         name: album.name,
         type: 'album',
         owner_display_name: album.artists[0].name,
diff --git a/src/stores/layout.ts b/src/stores/layout.ts
index 049676d..655babe 100644
--- a/src/stores/layout.ts
+++ b/src/stores/layout.ts
@@ -82,7 +82,7 @@ export const useLayoutStore = defineStore('layout', {
             const trackSorter = trackSorterRegistry.create(this.selectedSortType, sides)
 
             const availableTracks = trackStore.availableTracks
-            const tracksInSelectedOrigins = availableTracks.filter(track => projectStore.selectedOrigins.includes(track.origin))
+            const tracksInSelectedOrigins = availableTracks.filter(track => projectStore.selectedSources.includes(track.origin))
 
             const anchored_tracks = trackSorter.prepackAnchoredTracks(tracksInSelectedOrigins, anchorsStore.anchors)
             const unanchored_tracks = tracksInSelectedOrigins.filter(t => !anchored_tracks.includes(t))
diff --git a/src/stores/playlists.ts b/src/stores/playlists.ts
index 7805ec2..6a75def 100644
--- a/src/stores/playlists.ts
+++ b/src/stores/playlists.ts
@@ -86,7 +86,7 @@ export const usePlaylistsStore = defineStore('playlists', {
         offset += limit
       }
 
-      projectStore.addOrigin({
+      projectStore.addSource({
         name: playlist.name,
         type: 'playlist',
         owner_display_name: playlist.owner.display_name,
diff --git a/src/stores/project.ts b/src/stores/project.ts
index 0ace4bf..1b15e0f 100644
--- a/src/stores/project.ts
+++ b/src/stores/project.ts
@@ -1,24 +1,24 @@
-import type { Origin } from "@/types/tapeify/models";
+import type { Source } from "@/types/tapeify/models";
 import { defineStore } from "pinia";
 
 export const useProjectStore = defineStore('project', {
     state: () => ({
-        origins: {} as Record<string, Origin>,
-        selectedOrigins: [] as string[],
+        sources: {} as Record<string, Source>,
+        selectedSources: [] as string[],
     }),
     getters: {
-        hasOrigins: (state) => Object.keys(state.origins).length > 0,
+        hasSources: (state) => Object.keys(state.sources).length > 0,
     },
     actions: {
-        addOrigin(origin: Origin, id: string) {
-            this.origins[id] = origin;
-            if (!this.selectedOrigins.includes(id)) {
-                this.selectedOrigins.push(id);
+        addSource(source: Source, id: string) {
+            this.sources[id] = source;
+            if (!this.selectedSources.includes(id)) {
+                this.selectedSources.push(id);
             }
         },
-        removeOrigin(id: string) {
-            delete this.origins[id];
-            this.selectedOrigins = this.selectedOrigins.filter(originId => originId !== id);
+        removeSource(id: string) {
+            delete this.sources[id];
+            this.selectedSources = this.selectedSources.filter(sourceId => sourceId !== id);
         }
     }
 })
\ No newline at end of file
diff --git a/src/stores/tracks.ts b/src/stores/tracks.ts
index 37f7cd9..50e436c 100644
--- a/src/stores/tracks.ts
+++ b/src/stores/tracks.ts
@@ -43,11 +43,11 @@ export const useTracksStore = defineStore('tracks', {
     ClearSelectedTracks() {
       this.selectedTracks = []
     },
-    RemoveTracksByOrigin(originId: string): string[] {
-      const tracksToRemove = this._masterTrackList.filter(track => track.origin === originId)
+    RemoveTracksBySource(sourceId: string): string[] {
+      const tracksToRemove = this._masterTrackList.filter(track => track.origin === sourceId)
       const trackIdsToRemove = tracksToRemove.map(t => t.id)
 
-      this._masterTrackList = this._masterTrackList.filter(track => track.origin !== originId)
+      this._masterTrackList = this._masterTrackList.filter(track => track.origin !== sourceId)
       this.unavailableTrackIds = this.unavailableTrackIds.filter(id => !trackIdsToRemove.includes(id))
       this.selectedTracks = this.selectedTracks.filter(id => !trackIdsToRemove.includes(id))
       return trackIdsToRemove
diff --git a/src/typed-router.d.ts b/src/typed-router.d.ts
index c79862e..42d4f72 100644
--- a/src/typed-router.d.ts
+++ b/src/typed-router.d.ts
@@ -1,4 +1,4 @@
-/* eslint-disable */
+ 
 /* prettier-ignore */
 // @ts-nocheck
 // noinspection ES6UnusedImports
diff --git a/src/types/tapeify/models.ts b/src/types/tapeify/models.ts
index 247e7a6..68fbc6a 100644
--- a/src/types/tapeify/models.ts
+++ b/src/types/tapeify/models.ts
@@ -112,7 +112,7 @@ export type AlertRule<TPayload = any> = {
   ) => CassetteAlert['action']
 }
 
-export interface Origin {
+export interface Source {
   type: 'playlist' | 'album',
   name: string
   owner_display_name: string

From 36141ae36de3e5e30452dff72f8efc56c986f5c5 Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Mon, 4 May 2026 13:08:02 +0200
Subject: [PATCH 05/13] Add unused tracks drawer

---
 src/components.d.ts                      |  2 +-
 src/components/CassetteActionsBar.vue    |  6 +++-
 src/components/CassetteInfoDrawer.vue    | 40 +++---------------------
 src/components/UnavailableTracksList.vue | 31 ++++++++++++++----
 src/layouts/cassetteControls.vue         |  1 +
 src/stores/project.ts                    |  1 +
 6 files changed, 37 insertions(+), 44 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index ff0cf3b..0386c36 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -1,4 +1,4 @@
- 
+/* eslint-disable */
 // @ts-nocheck
 // biome-ignore lint: disable
 // oxlint-disable
diff --git a/src/components/CassetteActionsBar.vue b/src/components/CassetteActionsBar.vue
index ae18f65..080e5f0 100644
--- a/src/components/CassetteActionsBar.vue
+++ b/src/components/CassetteActionsBar.vue
@@ -41,12 +41,16 @@ const sources = computed(() => {
 
 <template>
   <v-app-bar class="included pa-1" flat color="transparent">
+    <template v-slot:prepend>
+      <v-btn @click="projectStore.drawerOpen = !projectStore.drawerOpen" icon="mdi-page-layout-sidebar-left"/>
+    </template>
+
     <v-spacer />
     <v-card>
       <template v-slot:actions>
 
         <!-- Add items -->
-        <v-btn icon="mdi-playlist-plus" size="small" variant="text" > <add-source-dialog /> </v-btn>
+        <v-btn icon="mdi-playlist-plus" size="small" variant="text"> <add-source-dialog /> </v-btn>
 
         <!-- Remove items -->
         <v-select :items="sources" item-value="id" item-title="name" label="Sources" chips multiple density="compact"
diff --git a/src/components/CassetteInfoDrawer.vue b/src/components/CassetteInfoDrawer.vue
index de7267e..74be7cb 100644
--- a/src/components/CassetteInfoDrawer.vue
+++ b/src/components/CassetteInfoDrawer.vue
@@ -1,43 +1,11 @@
-<script setup lang="ts">
-import { useCassettesStore } from '@/stores/cassette';
-import { useTracksStore } from '@/stores/tracks';
-import { formatDuration } from '@/utils/duration/durationHelper';
-
-const cassetteStore = useCassettesStore()
-const tracksStore = useTracksStore()
+<script lang="ts" setup>
+import { useProjectStore } from '@/stores/project';
 
+const projectStore = useProjectStore()
 </script>
 
 <template>
-    <v-navigation-drawer location="left" class="pa-4" color="primary" permanent>
-        <v-img :src="cassetteStore.metadata.image_url?.toString()" aspect-ratio="1" cover class="rounded-lg" />
-        <a :href="cassetteStore.metadata.original_item_url?.toString()" class="text-h5 clickable" target="_blank"
-            v-text="cassetteStore.metadata.item_name"></a>
-        <br />
-        <a :href="cassetteStore.metadata.owner_url?.toString()" class="text-subtitle-1 clickable" target="_blank"
-            v-text="cassetteStore.metadata.owner_display_name"></a>
-        <v-divider class="my-4" />
-        <div class="text-body-1"><strong>Cassettes:</strong> {{ cassetteStore.cassettes.length }}</div>
-        <div class="text-body-1"><strong>Tracks:</strong> {{ tracksStore.availableTracks.length }}</div>
-        <div class="text-body-1"><strong>Total Duration:</strong> {{ formatDuration(tracksStore.availableTracksTotalDuration) }}</div>
-        <v-divider class="my-4" />
+    <v-navigation-drawer floating v-model="projectStore.drawerOpen">
         <unavailable-tracks-list />
     </v-navigation-drawer>
 </template>
-
-<style scoped>
-.clickable {
-    text-decoration: none;
-    color: inherit;
-}
-
-.clickable:visited,
-.clickable:hover,
-.clickable:active {
-    color: inherit;
-}
-
-.clickable:hover {
-    text-decoration: underline;
-}
-</style>
diff --git a/src/components/UnavailableTracksList.vue b/src/components/UnavailableTracksList.vue
index bce92c3..8a463ac 100644
--- a/src/components/UnavailableTracksList.vue
+++ b/src/components/UnavailableTracksList.vue
@@ -1,9 +1,11 @@
 <script lang="ts" setup>
 import { useAnchorsStore } from '@/stores/anchor';
+import { useLayoutStore } from '@/stores/layout';
 import { useTracksStore } from '@/stores/tracks';
 
 const tracksStore = useTracksStore()
 const anchorsStore = useAnchorsStore()
+const layoutStore = useLayoutStore()
 
 function onChanged(changeEvent: any) {
     const eventType = Object.keys(changeEvent)[0]
@@ -22,20 +24,37 @@ function onChanged(changeEvent: any) {
             break
     }
 }
+
+function clearUnavailableTracks() {
+    if (tracksStore.unavailableTrackIds.length === 0) {
+        return;
+    }
+    for (const trackId of tracksStore.unavailableTrackIds) {
+        tracksStore.MarkTrackAsAvailable(trackId)
+    }
+    layoutStore.calculateLayout()
+}
 </script>
 
 <template>
-    <v-sheet color="secondary":rounded="true" class="pa-1">
+    <v-card class="ml-4 mt-4 mr-2" style="border-radius: 12px;" subtitle="Drag unwanted tracks here">
+        <template v-slot:title>
+            <span class="font-weight-black">Unused Tracks</span>
+        </template>
+        <v-divider class="mb-2" />
         <v-list select-strategy="leaf" v-model:selected="tracksStore.unavailableTracks" color="secondary">
-            <v-list-subheader class="text-subtitle-1" style="color: inherit">
-                Unused Tracks
-            </v-list-subheader>
             <draggable :list="tracksStore.unavailableTrackIds" group="tracks" item-key="id" animation="200"
                 @change="onChanged" :sort="false" class="drag-container">
-                <unavailable-cassette-item v-for="trackId in tracksStore.unavailableTrackIds" :key="trackId" :track-id="trackId"/>
+                <unavailable-cassette-item v-for="trackId in tracksStore.unavailableTrackIds" :key="trackId"
+                    :track-id="trackId" />
             </draggable>
         </v-list>
-    </v-sheet>
+        <v-divider class="mb-2" />
+
+        <template v-slot:actions>
+            <v-btn text @click="clearUnavailableTracks">Clear List</v-btn>
+        </template>
+    </v-card>
 </template>
 
 <style scoped>
diff --git a/src/layouts/cassetteControls.vue b/src/layouts/cassetteControls.vue
index a6d311b..c674a97 100644
--- a/src/layouts/cassetteControls.vue
+++ b/src/layouts/cassetteControls.vue
@@ -1,4 +1,5 @@
 <template>
   <cassette-actions-bar />
+  <cassette-info-drawer />
   <router-view class="pa-10" />
 </template>
diff --git a/src/stores/project.ts b/src/stores/project.ts
index 1b15e0f..234a2b1 100644
--- a/src/stores/project.ts
+++ b/src/stores/project.ts
@@ -5,6 +5,7 @@ export const useProjectStore = defineStore('project', {
     state: () => ({
         sources: {} as Record<string, Source>,
         selectedSources: [] as string[],
+        drawerOpen: false
     }),
     getters: {
         hasSources: (state) => Object.keys(state.sources).length > 0,

From 9e3774121335e5c03477875a4d1f07c8bc490671 Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Mon, 4 May 2026 13:36:49 +0200
Subject: [PATCH 06/13] Moved unused tracks drawer to right and added button
 badge to show number of unused tracks

---
 src/components/CassetteActionsBar.vue         | 20 +++++++++++--------
 src/components/CassetteInfoDrawer.vue         |  2 +-
 src/components/UnavailableTracksList.vue      |  2 +-
 .../dialogs/UploadCassetteDialog.vue          |  4 ++++
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/CassetteActionsBar.vue b/src/components/CassetteActionsBar.vue
index 080e5f0..9988886 100644
--- a/src/components/CassetteActionsBar.vue
+++ b/src/components/CassetteActionsBar.vue
@@ -37,12 +37,20 @@ const sources = computed(() => {
   }))
 })
 
+const menuIcon = computed(() => projectStore.drawerOpen ? "mdi-menu-close" : "mdi-menu-open")
+const menuBadgeContent = computed(() => trackStore.unavailableTrackIds.length > 0 ? trackStore.unavailableTrackIds.length : undefined)
 </script>
 
 <template>
   <v-app-bar class="included pa-1" flat color="transparent">
-    <template v-slot:prepend>
-      <v-btn @click="projectStore.drawerOpen = !projectStore.drawerOpen" icon="mdi-page-layout-sidebar-left"/>
+    <template v-slot:append>
+      <v-btn @click="projectStore.drawerOpen = !projectStore.drawerOpen" stacked>
+        <v-badge v-if="menuBadgeContent" color="secondary" :content="menuBadgeContent" location="top left">
+          <v-icon :icon="menuIcon" />
+        </v-badge>
+        <v-icon v-else :icon="menuIcon" />
+      </v-btn>
+
     </template>
 
     <v-spacer />
@@ -50,7 +58,7 @@ const sources = computed(() => {
       <template v-slot:actions>
 
         <!-- Add items -->
-        <v-btn icon="mdi-playlist-plus" size="small" variant="text"> <add-source-dialog /> </v-btn>
+        <add-source-dialog />
 
         <!-- Remove items -->
         <v-select :items="sources" item-value="id" item-title="name" label="Sources" chips multiple density="compact"
@@ -93,11 +101,7 @@ const sources = computed(() => {
         <v-btn icon="mdi-export" size="small" variant="text" :disabled="!projectStore.hasSources" />
 
         <v-divider vertical />
-
-        <v-btn size="small" variant="text" :disabled="!projectStore.hasSources">
-          <v-icon icon="mdi-upload-multiple" />
-          <upload-cassette-dialog />
-        </v-btn>
+        <upload-cassette-dialog />
       </template>
     </v-card>
     <v-spacer />
diff --git a/src/components/CassetteInfoDrawer.vue b/src/components/CassetteInfoDrawer.vue
index 74be7cb..29b4b71 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">
+    <v-navigation-drawer floating v-model="projectStore.drawerOpen" location="right">
         <unavailable-tracks-list />
     </v-navigation-drawer>
 </template>
diff --git a/src/components/UnavailableTracksList.vue b/src/components/UnavailableTracksList.vue
index 8a463ac..62390f6 100644
--- a/src/components/UnavailableTracksList.vue
+++ b/src/components/UnavailableTracksList.vue
@@ -37,7 +37,7 @@ function clearUnavailableTracks() {
 </script>
 
 <template>
-    <v-card class="ml-4 mt-4 mr-2" style="border-radius: 12px;" subtitle="Drag unwanted tracks here">
+    <v-card class="ma-5" style="border-radius: 12px;" subtitle="Drag unwanted tracks here">
         <template v-slot:title>
             <span class="font-weight-black">Unused Tracks</span>
         </template>
diff --git a/src/components/dialogs/UploadCassetteDialog.vue b/src/components/dialogs/UploadCassetteDialog.vue
index 9210a85..48eaafd 100644
--- a/src/components/dialogs/UploadCassetteDialog.vue
+++ b/src/components/dialogs/UploadCassetteDialog.vue
@@ -9,6 +9,10 @@ const projectHasAlerts = computed(() => Object.keys(cassetteStore.alerts).length
 
 <template>
     <v-dialog activator="parent" max-width="420">
+        <template v-slot:activator="{ props: activatorProps }">
+            <v-btn v-bind="activatorProps" icon="mdi-upload-multiple" size="small" variant="text" />
+        </template>
+
         <template v-slot:default="{ isActive }">
             <v-card elevation="6">
                 <v-card-title class="text-h6">

From 9a1fe4ec2d21d530d316cf7e39227fee7f574870 Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Mon, 4 May 2026 13:38:18 +0200
Subject: [PATCH 07/13] Remove parent activator

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

diff --git a/src/components/dialogs/UploadCassetteDialog.vue b/src/components/dialogs/UploadCassetteDialog.vue
index 48eaafd..e1287ac 100644
--- a/src/components/dialogs/UploadCassetteDialog.vue
+++ b/src/components/dialogs/UploadCassetteDialog.vue
@@ -8,7 +8,7 @@ const projectHasAlerts = computed(() => Object.keys(cassetteStore.alerts).length
 </script>
 
 <template>
-    <v-dialog activator="parent" max-width="420">
+    <v-dialog max-width="420">
         <template v-slot:activator="{ props: activatorProps }">
             <v-btn v-bind="activatorProps" icon="mdi-upload-multiple" size="small" variant="text" />
         </template>

From 83958edfa57c26b9e9aacc9b405e0a2dbb2daece Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Mon, 4 May 2026 13:39:16 +0200
Subject: [PATCH 08/13] Remove search and cassette page

---
 src/pages/callback.vue              |  2 +-
 src/pages/cassette/[spotify_id].vue | 66 -----------------------------
 src/pages/search.vue                | 51 ----------------------
 src/typed-router.d.ts               | 28 +-----------
 4 files changed, 2 insertions(+), 145 deletions(-)
 delete mode 100644 src/pages/cassette/[spotify_id].vue
 delete mode 100644 src/pages/search.vue

diff --git a/src/pages/callback.vue b/src/pages/callback.vue
index 44fc364..56f0683 100644
--- a/src/pages/callback.vue
+++ b/src/pages/callback.vue
@@ -14,7 +14,7 @@ onMounted(async () => {
   await authStore.requestAccessToken(String(code))
 
   profileStore.FetchProfile()
-  router.push({ name: '/search' })
+  router.push({ name: '/project' })
 })
 </script>
 
diff --git a/src/pages/cassette/[spotify_id].vue b/src/pages/cassette/[spotify_id].vue
deleted file mode 100644
index 822d199..0000000
--- a/src/pages/cassette/[spotify_id].vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<route>
-{
-  "meta": {
-    "layout": "cassetteControls"
-  }
-}
-</route>
-
-<script setup lang="ts">
-import { useTracksStore } from '@/stores/tracks';
-import { useAlbumsStore } from '@/stores/album'
-import { usePlaylistsStore } from '@/stores/playlists';
-import { useCassettesStore } from '@/stores/cassette';
-import { useKeyboardTrapFactory } from '@pdanpdan/vue-keyboard-trap'
-import { useLayoutStore } from '@/stores/layout';
-import { resetStores } from '@/utils/reset.stores';
-
-const gridRef = ref<HTMLElement | null>(null)
-const useKeyboardTrap = useKeyboardTrapFactory({})
-useKeyboardTrap(gridRef, { roving: true, grid: true }, true)
-
-const layoutStore = useLayoutStore()
-const tracksStore = useTracksStore()
-const albumStore = useAlbumsStore()
-const playlistsStore = usePlaylistsStore()
-const cassetteStore = useCassettesStore()
-
-onMounted(async () => {
-  cassetteStore.initAlerts()
-  tracksStore.ClearTracks()
-  const url = new URL(location.href)
-
-  const route = useRoute()
-
-  const params = route.params
-  const id = params.spotify_id
-  const type = url.searchParams.get('type')
-
-  if (id && type) {
-    switch (type) {
-      case 'album':
-        await albumStore.FetchAlbumTracks(id)
-        layoutStore.setSortType('keep-order')
-        break
-      case 'playlist':
-        await playlistsStore.FetchPlaylistTracks(id)
-        layoutStore.setSortType('greedy')
-        break
-    }
-  }
-
-  layoutStore.calculateLayout()
-})
-
-onUnmounted(() => resetStores())
-</script>
-
-<template>
-  <div ref="gridRef" v-kbd-trap.roving.grid aria-label="item grid">
-    <v-row justify="center">
-      <v-col v-for="cassette in cassetteStore.cassettes" :key="cassette.id" cols="12" sm="6">
-        <cassette :cassetteId="cassette.id" class="included" />
-      </v-col>
-    </v-row>
-  </div>
-</template>
diff --git a/src/pages/search.vue b/src/pages/search.vue
deleted file mode 100644
index 449417d..0000000
--- a/src/pages/search.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import { onMounted } from 'vue'
-import { ref } from 'vue'
-
-const selectedTab = ref('user_playlists')
-
-onMounted(async () => {
-  const url = new URL(location.href)
-
-  const tabParam = url.searchParams.get('tab')
-  if (tabParam !== null) {
-    selectedTab.value = tabParam
-  }
-})
-</script>
-
-<template>
-  <v-card class="cassette-card">
-    <v-toolbar color="primary" title="Select Playlist or Album">
-      <template v-slot:extension>
-        <v-tabs v-model="selectedTab" align-tabs="center">
-          <v-tab value="user_playlists">My Playlists</v-tab>
-          <v-tab value="search_albums">Search Albums</v-tab>
-          <v-tab value="search_playlists">Search Playlists</v-tab>
-        </v-tabs>
-      </template>
-    </v-toolbar>
-    <v-tabs-window v-model="selectedTab" class="pa-3">
-      <v-tabs-window-item value="user_playlists">
-        <user-playlists-tab />
-      </v-tabs-window-item>
-      <v-tabs-window-item value="search_albums">
-        <SearchAlbumsTab />
-      </v-tabs-window-item>
-      <v-tabs-window-item value="search_playlists">
-        <SearchPlaylistsTab />
-      </v-tabs-window-item>
-    </v-tabs-window>
-  </v-card>
-</template>
-
-<style scoped>
-.cassette-card {
-  margin: 16px auto;
-  max-width: 900px;
-  width: 100%;
-  background-color: #fff;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-}
-</style>
diff --git a/src/typed-router.d.ts b/src/typed-router.d.ts
index 42d4f72..6b4dbb8 100644
--- a/src/typed-router.d.ts
+++ b/src/typed-router.d.ts
@@ -1,4 +1,4 @@
- 
+/* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
 // noinspection ES6UnusedImports
@@ -37,13 +37,6 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
-    '/cassette/[spotify_id]': RouteRecordInfo<
-      '/cassette/[spotify_id]',
-      '/cassette/:spotify_id',
-      { spotify_id: ParamValue<true> },
-      { spotify_id: ParamValue<false> },
-      | never
-    >,
     '/project': RouteRecordInfo<
       '/project',
       '/project',
@@ -51,13 +44,6 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
-    '/search': RouteRecordInfo<
-      '/search',
-      '/search',
-      Record<never, never>,
-      Record<never, never>,
-      | never
-    >,
   }
 
   /**
@@ -83,24 +69,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
-    'src/pages/cassette/[spotify_id].vue': {
-      routes:
-        | '/cassette/[spotify_id]'
-      views:
-        | never
-    }
     'src/pages/project.vue': {
       routes:
         | '/project'
       views:
         | never
     }
-    'src/pages/search.vue': {
-      routes:
-        | '/search'
-      views:
-        | never
-    }
   }
 
   /**

From 7491b2a9bf6e014e2f3c2bd500e20eca1aa2564e Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Mon, 4 May 2026 13:41:56 +0200
Subject: [PATCH 09/13] Update text and disable button

---
 src/components/dialogs/AddSourceDialog.vue      | 2 +-
 src/components/dialogs/UploadCassetteDialog.vue | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/dialogs/AddSourceDialog.vue b/src/components/dialogs/AddSourceDialog.vue
index 9c58c67..715d5de 100644
--- a/src/components/dialogs/AddSourceDialog.vue
+++ b/src/components/dialogs/AddSourceDialog.vue
@@ -10,7 +10,7 @@ const selectedTab = ref('user_playlists')
 
         <template v-slot:default>
             <v-card style="border-radius: 12px;">
-                <v-toolbar color="primary" title="Select Playlist or Album">
+                <v-toolbar color="primary" title="Add Playlist or Album as source">
                     <template v-slot:extension>
                         <v-tabs v-model="selectedTab" align-tabs="center">
                             <v-tab value="user_playlists">My Playlists</v-tab>
diff --git a/src/components/dialogs/UploadCassetteDialog.vue b/src/components/dialogs/UploadCassetteDialog.vue
index e1287ac..cc559c7 100644
--- a/src/components/dialogs/UploadCassetteDialog.vue
+++ b/src/components/dialogs/UploadCassetteDialog.vue
@@ -1,8 +1,10 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useCassettesStore } from '@/stores/cassette'
+import { useProjectStore } from '@/stores/project'
 
 const cassetteStore = useCassettesStore()
+const projectStore = useProjectStore()
 
 const projectHasAlerts = computed(() => Object.keys(cassetteStore.alerts).length > 0)
 </script>
@@ -10,7 +12,7 @@ const projectHasAlerts = computed(() => Object.keys(cassetteStore.alerts).length
 <template>
     <v-dialog max-width="420">
         <template v-slot:activator="{ props: activatorProps }">
-            <v-btn v-bind="activatorProps" icon="mdi-upload-multiple" size="small" variant="text" />
+            <v-btn v-bind="activatorProps" icon="mdi-upload-multiple" size="small" variant="text" :disabled="!projectStore.hasSources" />
         </template>
 
         <template v-slot:default="{ isActive }">

From 34569826e2f014e3a04a5e242edf528dfc638aea Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Mon, 4 May 2026 13:44:46 +0200
Subject: [PATCH 10/13] Update badge position

---
 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 9988886..bcc660e 100644
--- a/src/components/CassetteActionsBar.vue
+++ b/src/components/CassetteActionsBar.vue
@@ -45,7 +45,7 @@ const menuBadgeContent = computed(() => trackStore.unavailableTrackIds.length >
   <v-app-bar class="included pa-1" flat color="transparent">
     <template v-slot:append>
       <v-btn @click="projectStore.drawerOpen = !projectStore.drawerOpen" stacked>
-        <v-badge v-if="menuBadgeContent" color="secondary" :content="menuBadgeContent" location="top left">
+        <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" />

From e29d93ff11653580e3a2c08665d75464420ba110 Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Mon, 4 May 2026 14:09:06 +0200
Subject: [PATCH 11/13] Rename origin to source in track object

---
 src/components/cassette/Cassette.vue | 3 ++-
 src/parsers/episodeDtoParser.ts      | 2 +-
 src/parsers/trackDtoParser.ts        | 4 ++--
 src/stores/layout.ts                 | 2 +-
 src/stores/tracks.ts                 | 4 ++--
 src/types/tapeify/models.ts          | 2 +-
 6 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/cassette/Cassette.vue b/src/components/cassette/Cassette.vue
index 9127c17..ad5f4be 100644
--- a/src/components/cassette/Cassette.vue
+++ b/src/components/cassette/Cassette.vue
@@ -66,8 +66,9 @@ const name = computed<string>({
 
 <template>
   <v-card class="cassette-card">
-    <v-toolbar color="primary">
+    <v-toolbar color="primary" class="pl-2 pr-4">
       <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
           class="ma-0" style="min-width:150px" label="Capacity (min)" />
       </template>
diff --git a/src/parsers/episodeDtoParser.ts b/src/parsers/episodeDtoParser.ts
index ad534dd..94833de 100644
--- a/src/parsers/episodeDtoParser.ts
+++ b/src/parsers/episodeDtoParser.ts
@@ -13,6 +13,6 @@ export function ParsePlaylistEpisodeDTO(episodeDTO: EpisodeDTO, playlistId: stri
         durationMs: episodeDTO.duration_ms,
         artists: episodeDTO.album.artists.map(a => a.type),
         image: GetSmallestImage(episodeDTO.album.images),
-        origin: playlistId
+        source: playlistId
     }
 }
\ No newline at end of file
diff --git a/src/parsers/trackDtoParser.ts b/src/parsers/trackDtoParser.ts
index 12830e4..ef2b4eb 100644
--- a/src/parsers/trackDtoParser.ts
+++ b/src/parsers/trackDtoParser.ts
@@ -13,7 +13,7 @@ export function ParsePlaylistTrackDTO(track: PlaylistTrackDTO, playlistId: strin
         durationMs: track.duration_ms,
         artists: track.artists.map(a => a.name),
         image: GetSmallestImage(track.album.images),
-        origin: playlistId
+        source: playlistId
     }
 }
 
@@ -27,6 +27,6 @@ export function ParseAlbumTrackDTO(track: TrackDTO, albumImage: URL | undefined,
         durationMs: track.duration_ms,
         artists: track.artists.map(a => a.name),
         image: albumImage,
-        origin: albumId
+        source: albumId
     }
 }  
diff --git a/src/stores/layout.ts b/src/stores/layout.ts
index 655babe..8386b0d 100644
--- a/src/stores/layout.ts
+++ b/src/stores/layout.ts
@@ -82,7 +82,7 @@ export const useLayoutStore = defineStore('layout', {
             const trackSorter = trackSorterRegistry.create(this.selectedSortType, sides)
 
             const availableTracks = trackStore.availableTracks
-            const tracksInSelectedOrigins = availableTracks.filter(track => projectStore.selectedSources.includes(track.origin))
+            const tracksInSelectedOrigins = availableTracks.filter(track => projectStore.selectedSources.includes(track.source))
 
             const anchored_tracks = trackSorter.prepackAnchoredTracks(tracksInSelectedOrigins, anchorsStore.anchors)
             const unanchored_tracks = tracksInSelectedOrigins.filter(t => !anchored_tracks.includes(t))
diff --git a/src/stores/tracks.ts b/src/stores/tracks.ts
index 50e436c..274b9d5 100644
--- a/src/stores/tracks.ts
+++ b/src/stores/tracks.ts
@@ -44,10 +44,10 @@ export const useTracksStore = defineStore('tracks', {
       this.selectedTracks = []
     },
     RemoveTracksBySource(sourceId: string): string[] {
-      const tracksToRemove = this._masterTrackList.filter(track => track.origin === sourceId)
+      const tracksToRemove = this._masterTrackList.filter(track => track.source === sourceId)
       const trackIdsToRemove = tracksToRemove.map(t => t.id)
 
-      this._masterTrackList = this._masterTrackList.filter(track => track.origin !== sourceId)
+      this._masterTrackList = this._masterTrackList.filter(track => track.source !== sourceId)
       this.unavailableTrackIds = this.unavailableTrackIds.filter(id => !trackIdsToRemove.includes(id))
       this.selectedTracks = this.selectedTracks.filter(id => !trackIdsToRemove.includes(id))
       return trackIdsToRemove
diff --git a/src/types/tapeify/models.ts b/src/types/tapeify/models.ts
index 68fbc6a..def990b 100644
--- a/src/types/tapeify/models.ts
+++ b/src/types/tapeify/models.ts
@@ -58,7 +58,7 @@ export interface Track {
   explicit: boolean
   durationMs: number
   artists: string[]
-  origin: string
+  source: string
 }
 
 export interface TrackLocation {

From c3b8ec43aa351ef8e3c1a49b9aee0b3d0cc384ce Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Mon, 4 May 2026 14:09:15 +0200
Subject: [PATCH 12/13] Add source

---
 src/pages/index.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index 146dce2..9d3b39c 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -2,6 +2,7 @@
 import { useAuthStore } from '@/stores/auth'
 import { useCassettesStore } from '@/stores/cassette'
 import { useLayoutStore } from '@/stores/layout'
+import { useProjectStore } from '@/stores/project'
 import { useTracksStore } from '@/stores/tracks'
 import type { Track } from '@/types/tapeify/models'
 import { resetStores } from '@/utils/reset.stores'
@@ -10,13 +11,14 @@ const authStore = useAuthStore()
 const trackStore = useTracksStore()
 const layoutStore = useLayoutStore()
 const cassetteStore = useCassettesStore()
+const projectStore = useProjectStore()
 
 async function AuthorizeUser() {
   const authUrl = await authStore.generateUserAuthorizationUrl()
   window.location.href = authUrl.toString()
 }
 
-const INIT_TRACKS = [{ "name": "Nu Moon", "spotifyId": "0o2vx3lJwK3BZMKl2vqtYM", "id": "ba5f6d65-1869-4330-bfba-9aebdea29746", "uri": "spotify:track:0o2vx3lJwK3BZMKl2vqtYM", "explicit": false, "durationMs": 141693, "artists": ["Discovery Zone"], "image": "https://i.scdn.co/image/ab67616d000048517507a5adb06f2936b86b0e20" }, { "name": "Dance II", "spotifyId": "5iPyzbAvw84pJBJsFu05P4", "id": "5d5a594c-393b-4cd5-a392-f1bb1967c847", "uri": "spotify:track:5iPyzbAvw84pJBJsFu05P4", "explicit": false, "durationMs": 271431, "artists": ["Discovery Zone"], "image": "https://i.scdn.co/image/ab67616d000048517507a5adb06f2936b86b0e20" }, { "name": "Nights", "spotifyId": "7eqoqGkKwgOaWNNHx90uEZ", "id": "ef94b849-4a71-4059-85eb-b4f26bb9d3bb", "uri": "spotify:track:7eqoqGkKwgOaWNNHx90uEZ", "explicit": true, "durationMs": 307151, "artists": ["Frank Ocean"], "image": "https://i.scdn.co/image/ab67616d00004851c5649add07ed3720be9d5526" }, { "name": "Abusey Junction", "spotifyId": "3W4IoNW4011i8qfCwN75Va", "id": "8158e6a7-4f07-445e-a78b-cb0ed43bbaf4", "uri": "spotify:track:3W4IoNW4011i8qfCwN75Va", "explicit": false, "durationMs": 424080, "artists": ["Kokoroko"], "image": "https://i.scdn.co/image/ab67616d0000485144d198c8f86d7e2d05864bd0" }, { "name": "Swept Away", "spotifyId": "2tuk3PezhFMV8fBB433tV0", "id": "5cd7a1e5-1afb-4735-a86f-b25d674c93f1", "uri": "spotify:track:2tuk3PezhFMV8fBB433tV0", "explicit": false, "durationMs": 239952, "artists": ["Vanilla"], "image": "https://i.scdn.co/image/ab67616d000048516fa3da33a574843e86988d98" }, { "name": "bedroom community", "spotifyId": "4HJc004qYXE9zsG6PfTFFj", "id": "56245bb5-8591-4f0d-972f-72663399153e", "uri": "spotify:track:4HJc004qYXE9zsG6PfTFFj", "explicit": true, "durationMs": 361328, "artists": ["glass beach"], "image": "https://i.scdn.co/image/ab67616d00004851713370162839b17d761da70e" }, { "name": "yoshi's island", "spotifyId": "0VRQADlw43O3JTGp5KkEn7", "id": "7de4962e-15bd-4375-89e5-6a07a3a7b229", "uri": "spotify:track:0VRQADlw43O3JTGp5KkEn7", "explicit": true, "durationMs": 378813, "artists": ["glass beach"], "image": "https://i.scdn.co/image/ab67616d00004851713370162839b17d761da70e" }, { "name": "Ivy", "spotifyId": "2ZWlPOoWh0626oTaHrnl2a", "id": "58c3567c-54eb-4cb8-b480-db67f227c97b", "uri": "spotify:track:2ZWlPOoWh0626oTaHrnl2a", "explicit": true, "durationMs": 249191, "artists": ["Frank Ocean"], "image": "https://i.scdn.co/image/ab67616d00004851c5649add07ed3720be9d5526" }, { "name": "Borderline", "spotifyId": "5hM5arv9KDbCHS0k9uqwjr", "id": "3c6a6fcd-ff02-4d80-9f92-29d166afad6e", "uri": "spotify:track:5hM5arv9KDbCHS0k9uqwjr", "explicit": false, "durationMs": 237800, "artists": ["Tame Impala"], "image": "https://i.scdn.co/image/ab67616d0000485158267bd34420a00d5cf83a49" }, { "name": "Summer", "spotifyId": "5DnVR3FYEj7wcpPCWrFfYo", "id": "2f10a51c-e97a-47ec-a689-1b3576d01c9f", "uri": "spotify:track:5DnVR3FYEj7wcpPCWrFfYo", "explicit": false, "durationMs": 280250, "artists": ["Vanilla"], "image": "https://i.scdn.co/image/ab67616d000048516fa3da33a574843e86988d98" }, { "name": "Should Have Known Better", "spotifyId": "3AyuigFWbuirWHvidbMz8O", "id": "71dcf13e-f943-483a-9276-b2ff9c536114", "uri": "spotify:track:3AyuigFWbuirWHvidbMz8O", "explicit": false, "durationMs": 307697, "artists": ["Sufjan Stevens"], "image": "https://i.scdn.co/image/ab67616d00004851820e2ac14772ae3162c6d479" }, { "name": "The Dress", "spotifyId": "0YMe6PHRbeDcN7KJdCG0bW", "id": "925cdb38-c870-4738-9e00-5ebdb872dd7e", "uri": "spotify:track:0YMe6PHRbeDcN7KJdCG0bW", "explicit": false, "durationMs": 184767, "artists": ["Dijon"], "image": "https://i.scdn.co/image/ab67616d00004851708bfbe1855174ebc9a0f225" }, { "name": "Biking", "spotifyId": "2q0VexHJirnUPnEOhr2DxK", "id": "5e66789c-1b25-4d08-9357-31b6eb50b2bb", "uri": "spotify:track:2q0VexHJirnUPnEOhr2DxK", "explicit": true, "durationMs": 277520, "artists": ["Frank Ocean", "JAŸ-Z", "Tyler, The Creator"], "image": "https://i.scdn.co/image/ab67616d0000485169a8328489e5e485514a8667" }, { "name": "Nervous", "spotifyId": "113xf7t4qNM7038YJvauik", "id": "2bd1b8e8-c91a-4ddc-bc52-4a4709128a81", "uri": "spotify:track:113xf7t4qNM7038YJvauik", "explicit": false, "durationMs": 245000, "artists": ["The Neighbourhood"], "image": "https://i.scdn.co/image/ab67616d000048519b6ac98a52f62d5cb473da40" }, { "name": "Pink + White", "spotifyId": "3xKsf9qdS1CyvXSMEid6g8", "id": "654f17ef-2325-45db-bba7-f022209f8039", "uri": "spotify:track:3xKsf9qdS1CyvXSMEid6g8", "explicit": false, "durationMs": 184516, "artists": ["Frank Ocean"], "image": "https://i.scdn.co/image/ab67616d00004851c5649add07ed3720be9d5526" }, { "name": "Boredom (feat. Rex Orange County & Anna of the North)", "spotifyId": "5WNYg3usc6H8N3MBEp4zVk", "id": "15d30e93-3fba-4977-8d7e-f437e5709e37", "uri": "spotify:track:5WNYg3usc6H8N3MBEp4zVk", "explicit": true, "durationMs": 320720, "artists": ["Tyler, The Creator", "Rex Orange County", "Anna of the North"], "image": "https://i.scdn.co/image/ab67616d000048518940ac99f49e44f59e6f7fb3" }]
+const INIT_TRACKS = [ { "name": "Nu Moon", "spotifyId": "0o2vx3lJwK3BZMKl2vqtYM", "id": "7f446860-44ca-4439-bb3e-588557e69876", "uri": "spotify:track:0o2vx3lJwK3BZMKl2vqtYM", "explicit": false, "durationMs": 141693, "artists": [ "Discovery Zone" ], "image": "https://i.scdn.co/image/ab67616d000048517507a5adb06f2936b86b0e20", "source": "3tuD3ViZQFjDATCIplJePd" }, { "name": "Dance II", "spotifyId": "5iPyzbAvw84pJBJsFu05P4", "id": "9fe189d1-94ec-4c1b-95d6-c8554b5c5e51", "uri": "spotify:track:5iPyzbAvw84pJBJsFu05P4", "explicit": false, "durationMs": 271431, "artists": [ "Discovery Zone" ], "image": "https://i.scdn.co/image/ab67616d000048517507a5adb06f2936b86b0e20", "source": "3tuD3ViZQFjDATCIplJePd" }, { "name": "Nights", "spotifyId": "7eqoqGkKwgOaWNNHx90uEZ", "id": "89f534d4-8af7-4a7d-8847-8fbb29c86a27", "uri": "spotify:track:7eqoqGkKwgOaWNNHx90uEZ", "explicit": true, "durationMs": 307151, "artists": [ "Frank Ocean" ], "image": "https://i.scdn.co/image/ab67616d00004851c5649add07ed3720be9d5526", "source": "3tuD3ViZQFjDATCIplJePd" }, { "name": "Abusey Junction", "spotifyId": "3W4IoNW4011i8qfCwN75Va", "id": "172bd5ef-d6fa-4791-ad29-0290a8a31156", "uri": "spotify:track:3W4IoNW4011i8qfCwN75Va", "explicit": false, "durationMs": 424080, "artists": [ "Kokoroko" ], "image": "https://i.scdn.co/image/ab67616d0000485144d198c8f86d7e2d05864bd0", "source": "3tuD3ViZQFjDATCIplJePd" }, { "name": "Swept Away", "spotifyId": "2tuk3PezhFMV8fBB433tV0", "id": "9ed04062-508f-47e7-8f3c-07bfd8e4f137", "uri": "spotify:track:2tuk3PezhFMV8fBB433tV0", "explicit": false, "durationMs": 239952, "artists": [ "Vanilla" ], "image": "https://i.scdn.co/image/ab67616d000048516fa3da33a574843e86988d98", "source": "3tuD3ViZQFjDATCIplJePd" }, { "name": "bedroom community", "spotifyId": "4HJc004qYXE9zsG6PfTFFj", "id": "6e1f789a-6265-4bb8-89ec-5a694e8c3c24", "uri": "spotify:track:4HJc004qYXE9zsG6PfTFFj", "explicit": true, "durationMs": 361328, "artists": [ "glass beach" ], "image": "https://i.scdn.co/image/ab67616d00004851713370162839b17d761da70e", "source": "3tuD3ViZQFjDATCIplJePd" }, { "name": "yoshi's island", "spotifyId": "0VRQADlw43O3JTGp5KkEn7", "id": "b92cb291-ce2b-4364-a704-792b8b2c958b", "uri": "spotify:track:0VRQADlw43O3JTGp5KkEn7", "explicit": true, "durationMs": 378813, "artists": [ "glass beach" ], "image": "https://i.scdn.co/image/ab67616d00004851713370162839b17d761da70e", "source": "3tuD3ViZQFjDATCIplJePd" }, { "name": "Ivy", "spotifyId": "2ZWlPOoWh0626oTaHrnl2a", "id": "a40c27c1-c55a-455b-b885-4fec8061868e", "uri": "spotify:track:2ZWlPOoWh0626oTaHrnl2a", "explicit": true, "durationMs": 249191, "artists": [ "Frank Ocean" ], "image": "https://i.scdn.co/image/ab67616d00004851c5649add07ed3720be9d5526", "source": "3tuD3ViZQFjDATCIplJePd" }, { "name": "Borderline", "spotifyId": "5hM5arv9KDbCHS0k9uqwjr", "id": "e695f339-3121-42fa-b296-2159612168b6", "uri": "spotify:track:5hM5arv9KDbCHS0k9uqwjr", "explicit": false, "durationMs": 237800, "artists": [ "Tame Impala" ], "image": "https://i.scdn.co/image/ab67616d0000485158267bd34420a00d5cf83a49", "source": "3tuD3ViZQFjDATCIplJePd" }, { "name": "Summer", "spotifyId": "5DnVR3FYEj7wcpPCWrFfYo", "id": "002ae7f2-43d4-44e0-9ca8-67b2914fa7f8", "uri": "spotify:track:5DnVR3FYEj7wcpPCWrFfYo", "explicit": false, "durationMs": 280250, "artists": [ "Vanilla" ], "image": "https://i.scdn.co/image/ab67616d000048516fa3da33a574843e86988d98", "source": "3tuD3ViZQFjDATCIplJePd" }, { "name": "Should Have Known Better", "spotifyId": "3AyuigFWbuirWHvidbMz8O", "id": "418cb860-fe8e-4b72-92c1-6b2dae629ecf", "uri": "spotify:track:3AyuigFWbuirWHvidbMz8O", "explicit": false, "durationMs": 307697, "artists": [ "Sufjan Stevens" ], "image": "https://i.scdn.co/image/ab67616d00004851820e2ac14772ae3162c6d479", "source": "3tuD3ViZQFjDATCIplJePd" }, { "name": "The Dress", "spotifyId": "0YMe6PHRbeDcN7KJdCG0bW", "id": "152fa8b7-36a5-4cb5-89e2-d1fbeb627923", "uri": "spotify:track:0YMe6PHRbeDcN7KJdCG0bW", "explicit": false, "durationMs": 184767, "artists": [ "Dijon" ], "image": "https://i.scdn.co/image/ab67616d00004851708bfbe1855174ebc9a0f225", "source": "3tuD3ViZQFjDATCIplJePd" }, { "name": "Biking", "spotifyId": "2q0VexHJirnUPnEOhr2DxK", "id": "77f2506f-714d-4955-a88b-d8441a3eb72e", "uri": "spotify:track:2q0VexHJirnUPnEOhr2DxK", "explicit": true, "durationMs": 277520, "artists": [ "Frank Ocean", "JAŸ-Z", "Tyler, The Creator" ], "image": "https://i.scdn.co/image/ab67616d0000485169a8328489e5e485514a8667", "source": "3tuD3ViZQFjDATCIplJePd" }, { "name": "Nervous", "spotifyId": "113xf7t4qNM7038YJvauik", "id": "1c70402c-bf4d-4ce4-a93d-c74e3705c9b3", "uri": "spotify:track:113xf7t4qNM7038YJvauik", "explicit": false, "durationMs": 245000, "artists": [ "The Neighbourhood" ], "image": "https://i.scdn.co/image/ab67616d000048519b6ac98a52f62d5cb473da40", "source": "3tuD3ViZQFjDATCIplJePd" }, { "name": "Pink + White", "spotifyId": "3xKsf9qdS1CyvXSMEid6g8", "id": "522ceb4a-0438-4e8c-bb36-0de6b11b2341", "uri": "spotify:track:3xKsf9qdS1CyvXSMEid6g8", "explicit": false, "durationMs": 184516, "artists": [ "Frank Ocean" ], "image": "https://i.scdn.co/image/ab67616d00004851c5649add07ed3720be9d5526", "source": "3tuD3ViZQFjDATCIplJePd" }, { "name": "Boredom (feat. Rex Orange County & Anna of the North)", "spotifyId": "5WNYg3usc6H8N3MBEp4zVk", "id": "96712ba2-eea4-42b4-87ae-70635f865dfc", "uri": "spotify:track:5WNYg3usc6H8N3MBEp4zVk", "explicit": true, "durationMs": 320720, "artists": [ "Tyler, The Creator", "Rex Orange County", "Anna of the North" ], "image": "https://i.scdn.co/image/ab67616d000048518940ac99f49e44f59e6f7fb3", "source": "3tuD3ViZQFjDATCIplJePd" } ]  
 
 onMounted(() => {
   cassetteStore.initAlerts()
@@ -30,11 +32,21 @@ onMounted(() => {
     explicit: item.explicit,
     durationMs: item.durationMs,
     artists: item.artists,
+    source: item.source
   }))
   tracks.forEach((track) => trackStore.AddTrack(track))
+  projectStore
+
   layoutStore.calculateLayout()
 })
-
+projectStore.addSource({
+  type: 'playlist',
+  name: 'demo',
+  owner_display_name: 'demo',
+  original_item_url: 'demo',
+  owner_url: 'demo',
+  description: 'demo'
+}, "3tuD3ViZQFjDATCIplJePd")
 onUnmounted(() => resetStores())
 </script>
 

From b1eee9f12d6eb6b95d25ba283159417db15f138c Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Mon, 4 May 2026 14:16:40 +0200
Subject: [PATCH 13/13] fix lint

---
 src/components.d.ts                      | 2 +-
 src/components/UnavailableTracksList.vue | 2 +-
 src/pages/index.vue                      | 2 --
 src/typed-router.d.ts                    | 2 +-
 4 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index 0386c36..ff0cf3b 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -1,4 +1,4 @@
-/* eslint-disable */
+ 
 // @ts-nocheck
 // biome-ignore lint: disable
 // oxlint-disable
diff --git a/src/components/UnavailableTracksList.vue b/src/components/UnavailableTracksList.vue
index 62390f6..ee4b4c2 100644
--- a/src/components/UnavailableTracksList.vue
+++ b/src/components/UnavailableTracksList.vue
@@ -52,7 +52,7 @@ function clearUnavailableTracks() {
         <v-divider class="mb-2" />
 
         <template v-slot:actions>
-            <v-btn text @click="clearUnavailableTracks">Clear List</v-btn>
+            <v-btn variant="text" @click="clearUnavailableTracks">Clear List</v-btn>
         </template>
     </v-card>
 </template>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 9d3b39c..0e81b4c 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -35,8 +35,6 @@ onMounted(() => {
     source: item.source
   }))
   tracks.forEach((track) => trackStore.AddTrack(track))
-  projectStore
-
   layoutStore.calculateLayout()
 })
 projectStore.addSource({
diff --git a/src/typed-router.d.ts b/src/typed-router.d.ts
index 6b4dbb8..8d179c7 100644
--- a/src/typed-router.d.ts
+++ b/src/typed-router.d.ts
@@ -1,4 +1,4 @@
-/* eslint-disable */
+ 
 /* prettier-ignore */
 // @ts-nocheck
 // noinspection ES6UnusedImports