front:fix playlist page

front/src/views/playlists/Detail.vue

@@ -2,7 +2,7 @@
 import type { PlaylistTrack, Playlist, Track } from '~/types'
 
 import { useI18n } from 'vue-i18n'
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useStore } from '~/store'
 
 import axios from 'axios'
@@ -44,16 +44,12 @@ const store = useStore()
 const edit = ref(props.defaultEdit)
 const playlist = ref<Playlist | null>(null)
 const playlistTracks = ref<PlaylistTrack[]>([])
-
 const showEmbedModal = ref(false)
 
-// TODO: Compute `tracks` with `track`. In the new types, `track` is just a string.
-// We probably have to load each track before loading it into `tracks`.
-// Original line: const tracks = computed(() => playlistTracks.value.map(({ track }, index) => ({ ...track, position: index + 1 })))
-const tracks = computed(() => playlistTracks.value.map(({ track }, index) => (
-  // @i-would-expect-ts-to-error because this typecasting is evil
-  { position: index + 1 } as Track
-)))
+type FullPlaylistTrack = Omit<PlaylistTrack, 'track'> & { track: Track }
+const fullPlaylistTracks = ref<FullPlaylistTrack[]>([])
+
+const tracks = computed(() => fullPlaylistTracks.value.map(({ track }, index) => ({ ...track as Track, position: index + 1 })))
 
 const { t } = useI18n()
 const labels = computed(() => ({
@@ -71,7 +67,7 @@ const fetchData = async () => {
     ])
 
     playlist.value = playlistResponse.data
-    playlistTracks.value = tracksResponse.data.results
+    fullPlaylistTracks.value = tracksResponse.data.results
   } catch (error) {
     useErrorHandler(error as Error)
   }