Restyle Studio task rail and bind Classic task to the same mode ref.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Towsty
2026-09-18 13:10:44 -05:00
co-authored by Cursor
parent d9743dd8c9
commit bdc1ab6c2d
+9 -3
View File
@@ -28,13 +28,18 @@
</div> </div>
</header> </header>
<nav class="flex flex-wrap gap-2" aria-label="Tasks"> <div class="min-w-0 space-y-3" style="gap: var(--chrome-gap)">
<label v-if="isClassic" class="block text-sm text-zinc-300">Task
<select :value="form.mode" class="mt-1 w-full max-w-xs rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 capitalize outline-none ring-amber-300/40 focus:ring-2" @change="chooseTask(($event.target as HTMLSelectElement).value)">
<option v-for="task in tasks" :key="task" :value="task" class="capitalize">{{ task }}</option>
</select>
</label>
<nav v-else class="display-rail" aria-label="Tasks">
<button <button
v-for="task in tasks" v-for="task in tasks"
:key="task" :key="task"
type="button" type="button"
class="rounded-full border px-4 py-2 capitalize outline-none ring-amber-300/50 focus-visible:ring-2" class="display-rail__seg capitalize"
:class="form.mode===task ? 'border-amber-300 bg-amber-300 text-black' : 'border-white/15 text-zinc-200 hover:border-white/30'"
:aria-pressed="form.mode===task" :aria-pressed="form.mode===task"
@click="chooseTask(task)" @click="chooseTask(task)"
>{{ task }}</button> >{{ task }}</button>
@@ -64,6 +69,7 @@
</div> </div>
</div> </div>
<p v-else class="text-sm text-zinc-400">Model · YuE2</p> <p v-else class="text-sm text-zinc-400">Model · YuE2</p>
</div>
<div class="grid min-w-0 gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(24rem,2fr)] 2xl:gap-8"> <div class="grid min-w-0 gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(24rem,2fr)] 2xl:gap-8">
<section class="min-w-0 space-y-4"> <section class="min-w-0 space-y-4">