Simplify generation controls with task navigation and settings drawer

components/StudioKindCards.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="mb-4 grid grid-cols-3 gap-3">
+  <nav v-if="!advanced" aria-label="Generation type" class="grid grid-cols-3 gap-2 rounded-2xl border border-white/10 bg-zinc-950/50 p-2">
+    <button v-for="kind in ['image', 'video'] as const" :key="kind" type="button" :aria-pressed="current === kind" class="rounded-xl px-3 py-3 font-semibold capitalize" :class="current === kind ? 'bg-amber-400 text-zinc-950' : 'text-zinc-300 hover:bg-white/5'" @click="emit('select', kind)">{{ kind }}</button>
+    <NuxtLink to="/music" class="rounded-xl px-3 py-3 text-center font-semibold" :aria-current="current === 'music' ? 'page' : undefined" :class="current === 'music' ? 'bg-amber-400 text-zinc-950' : 'text-zinc-300 hover:bg-white/5'">Music</NuxtLink>
+  </nav>
+  <div v-else class="mb-4 grid grid-cols-3 gap-3">
     <div
       class="overflow-hidden rounded-3xl border transition"
       :class="current === 'video' ? 'border-amber-300 bg-amber-400/10 text-amber-50' : 'border-white/10 text-zinc-400'"
@@ -122,6 +126,7 @@
 <script setup lang="ts">
 const props = withDefaults(defineProps<{
   current: 'video' | 'image' | 'music'
+  advanced?: boolean
   ltxEnabled?: boolean
   videoEngine?: 'minimax' | 'ltx'
   videoStart?: 'still' | 'text'