fix(frontend): harden the streaming ui and extract copy and constants

frontend/src/components/TrackCard.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { formatMessage, messages } from '../lib/messages'
 import type { TrackEvent } from '../lib/types'
 
 const props = defineProps<{ event: TrackEvent }>()
 const artworkFailed = ref(false)
 const artists = computed(() => props.event.track.artists.join(', '))
+const spotifyUrl = computed(() => props.event.track.external_url)
+const artworkAlt = computed(() =>
+  formatMessage('trackCardArtworkAlt', { album: props.event.track.album_name }),
+)
 </script>
 
 <template>
@@ -14,7 +19,7 @@ const artists = computed(() => props.event.track.artists.join(', '))
       <img
         v-if="event.track.album_art_url && !artworkFailed"
         :src="event.track.album_art_url"
-        :alt="`${event.track.album_name} album artwork`"
+        :alt="artworkAlt"
         @error="artworkFailed = true"
       />
     </div>
@@ -26,14 +31,8 @@ const artists = computed(() => props.event.track.artists.join(', '))
       <div class="album">{{ event.track.album_name }}</div>
       <div class="why">{{ event.justification }}</div>
     </div>
-    <a
-      v-if="event.track.external_url"
-      class="link"
-      :href="event.track.external_url"
-      target="_blank"
-      rel="noreferrer"
-    >
-      Open in Spotify
+    <a v-if="spotifyUrl" class="link" :href="spotifyUrl" target="_blank" rel="noreferrer">
+      {{ messages.trackCardOpenSpotify }}
       <span aria-hidden="true">&nearr;</span>
     </a>
   </article>