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

frontend/src/components/ResultActions.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { formatMessage, messages } from '../lib/messages'
 import type { PlaylistState } from '../lib/models'
 
 const props = defineProps<{
@@ -10,10 +11,11 @@ const props = defineProps<{
 defineEmits<{ save: [] }>()
 
 const buttonLabel = computed(() => {
-  if (props.state.status === 'saving') return 'Saving...'
-  if (props.state.status === 'error') return 'Try saving again'
-  return 'Save as playlist'
+  if (props.state.status === 'saving') return messages.resultActionsSaving
+  if (props.state.status === 'error') return messages.resultActionsTryAgain
+  return messages.resultActionsSavePlaylist
 })
+const summary = computed(() => formatMessage('resultActionsSummary', { count: props.trackCount }))
 </script>
 
 <template>
@@ -27,8 +29,8 @@ const buttonLabel = computed(() => {
     >
       {{ buttonLabel }}
     </button>
-    <a v-else class="connect" href="/api/auth/login">Connect Spotify to save</a>
-    <span class="summary">{{ trackCount }} verified tracks ready for a private playlist</span>
+    <a v-else class="connect" href="/api/auth/login">{{ messages.resultActionsConnectSpotify }}</a>
+    <span class="summary">{{ summary }}</span>
   </div>
 </template>