feat(frontend): assemble accessible application shell

frontend/src/components/EmptyState.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import SuggestionChips from './SuggestionChips.vue'
+
+defineProps<{ suggestions: readonly string[] }>()
+defineEmits<{ pick: [suggestion: string] }>()
+</script>
+
+<template>
+  <div class="empty">
+    <h1>What should be playing<span class="accent"> right now?</span></h1>
+    <p class="lede">
+      Describe the moment, not the genre. The assistant reads the request, proposes candidates,
+      verifies each one on Spotify and explains why it picked them.
+    </p>
+    <template v-if="suggestions.length">
+      <div class="label">Try one of these</div>
+      <SuggestionChips :suggestions="suggestions" @pick="$emit('pick', $event)" />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.empty {
+  padding: var(--s-5) 0 var(--s-3);
+}
+
+h1 {
+  max-width: 16ch;
+  margin: 0 0 var(--s-5);
+  font-family: var(--f-display);
+  font-size: var(--t-hero);
+  font-weight: 600;
+  line-height: var(--lh-hero);
+  letter-spacing: var(--ls-hero);
+}
+
+.accent {
+  color: var(--c-accent);
+}
+
+.lede {
+  max-width: 52ch;
+  margin: 0 0 var(--s-9);
+  color: var(--c-text-muted);
+  text-wrap: pretty;
+}
+
+.label {
+  margin-bottom: var(--s-5);
+  color: var(--c-text-faint);
+  font-family: var(--f-mono);
+  font-size: var(--t-caps);
+  letter-spacing: var(--ls-caps);
+  text-transform: uppercase;
+}
+
+@media (max-width: 760px) {
+  h1 {
+    font-size: 38px;
+  }
+}
+
+@media (max-width: 560px) {
+  .empty {
+    padding-top: var(--s-1);
+  }
+
+  h1 {
+    font-size: 32px;
+  }
+}
+</style>