Simplify generation controls with task navigation and settings drawer

2026-09-07 08:36:33 -05:00
parent 7a2069462e
commit 174d40a7dc
7 changed files with 177 additions and 13 deletions
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <button v-if="!advanced" type="button" class="rounded-xl border border-white/20 px-4 py-3 text-sm text-zinc-200 hover:border-amber-300" @click="show">Generation settings</button>
+    <div v-if="advanced" class="space-y-5"><slot /></div>
+    <dialog v-else ref="panel" aria-label="Generation settings" class="settings-drawer fixed inset-y-0 left-auto right-0 m-0 h-dvh max-h-none w-full max-w-lg overflow-y-auto border-l border-white/15 bg-zinc-950 p-5 text-zinc-100 shadow-2xl backdrop:bg-black/60" @click="backdrop" @close="restoreFocus">
+      <div class="mb-6 flex items-center justify-between gap-4">
+        <h2 class="font-display text-xl font-bold">Generation settings</h2>
+        <button type="button" class="rounded-xl border border-white/20 px-4 py-2" @click="panel?.close()">Close</button>
+      </div>
+      <div class="space-y-5"><slot /></div>
+    </dialog>
+  </div>
+</template>
+<script setup lang="ts">
+defineProps<{ advanced: boolean }>()
+const panel = ref<HTMLDialogElement | null>(null)
+let opener: HTMLElement | null = null
+function show() { opener = document.activeElement as HTMLElement; panel.value?.showModal() }
+function restoreFocus() { opener?.focus() }
+function backdrop(event: MouseEvent) {
+  if (event.target !== panel.value) return
+  const rect = panel.value.getBoundingClientRect()
+  if (event.clientX < rect.left || event.clientX > rect.right) panel.value.close()
+}
+</script>