Add clickable keep-prompt snippets for video and image.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/PromptDrawer.vue

@@ -5,7 +5,16 @@
       class="fixed inset-0 z-50 flex flex-col bg-zinc-950 px-4 pb-4 pt-[max(1rem,env(safe-area-inset-top))]"
     >
       <div class="mb-3 flex items-center justify-between gap-3">
-        <h2 class="min-w-0 truncate font-display text-lg font-bold">{{ title }}</h2>
+        <div class="flex min-w-0 items-center gap-2">
+          <h2 class="min-w-0 truncate font-display text-lg font-bold">{{ title }}</h2>
+          <KeepPromptMenu
+            v-if="editable"
+            :items="keepItems"
+            :heading="keepHeading"
+            align="left"
+            @insert="onKeepInsert"
+          />
+        </div>
         <button
           type="button"
           class="shrink-0 rounded-full border border-white/15 px-3 py-1 text-sm text-zinc-300 hover:text-white"
@@ -30,17 +39,23 @@
 </template>
 
 <script setup lang="ts">
+import { insertKeepSnippet, type KeepPrompt } from '~/utils/keepPrompts'
+
 const props = withDefaults(defineProps<{
   open: boolean
   title?: string
   text?: string
   editable?: boolean
   placeholder?: string
+  keepItems?: KeepPrompt[]
+  keepHeading?: string
 }>(), {
   title: 'Prompt',
   text: '',
   editable: true,
-  placeholder: ''
+  placeholder: '',
+  keepItems: () => [],
+  keepHeading: 'Saved prompts'
 })
 
 const emit = defineEmits<{
@@ -52,6 +67,10 @@ function onInput(event: Event) {
   emit('update:text', (event.target as HTMLTextAreaElement).value)
 }
 
+function onKeepInsert(item: KeepPrompt) {
+  emit('update:text', insertKeepSnippet(props.text || '', item.text))
+}
+
 function close() {
   emit('update:open', false)
 }