From ba6995e2790673649b0218d75fb8ec5b06677af4 Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Mon, 11 May 2026 09:16:33 -0700
Subject: [PATCH] feat: add QuickCaptureBar and QuickCaptureFab entry point
 components

---
 web/src/components/QuickCaptureBar.vue | 31 +++++++++++++
 web/src/components/QuickCaptureFab.vue | 60 ++++++++++++++++++++++++++
 2 files changed, 91 insertions(+)
 create mode 100644 web/src/components/QuickCaptureBar.vue
 create mode 100644 web/src/components/QuickCaptureFab.vue

diff --git a/web/src/components/QuickCaptureBar.vue b/web/src/components/QuickCaptureBar.vue
new file mode 100644
index 0000000..1fa80cf
--- /dev/null
+++ b/web/src/components/QuickCaptureBar.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="border-b border-surface-border bg-surface px-6 py-2 flex items-center gap-3">
+    <span class="text-text-dim text-xs whitespace-nowrap">Quick diagnose</span>
+    <input
+      v-model="query"
+      type="text"
+      placeholder='Describe what broke (e.g. "plex audio dropped around 2pm")'
+      class="flex-1 bg-surface-raised border border-surface-border rounded px-3 py-1.5 text-sm text-text-primary placeholder-text-dim focus:outline-none focus:border-accent transition-colors"
+      @keydown.enter="submit"
+    />
+    <button
+      :disabled="!query.trim()"
+      @click="submit"
+      class="px-4 py-1.5 rounded bg-accent text-white text-xs font-semibold hover:bg-blue-400 transition-colors disabled:opacity-50 whitespace-nowrap"
+    >Go</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const query  = ref('')
+
+function submit() {
+  if (!query.value.trim()) return
+  router.push({ path: '/diagnose', query: { q: query.value, tab: 'quick' } })
+  query.value = ''
+}
+</script>
diff --git a/web/src/components/QuickCaptureFab.vue b/web/src/components/QuickCaptureFab.vue
new file mode 100644
index 0000000..90306b6
--- /dev/null
+++ b/web/src/components/QuickCaptureFab.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <button
+      @click="open = true"
+      class="fixed bottom-6 right-6 w-12 h-12 rounded-full bg-accent text-white shadow-lg flex items-center justify-center text-xl hover:bg-blue-400 transition-colors z-50"
+      aria-label="Quick diagnose"
+      title="Quick diagnose"
+    >⚡</button>
+
+    <Teleport to="body">
+      <div
+        v-if="open"
+        class="fixed inset-0 z-40 flex items-end justify-end pb-24 pr-6"
+        @click.self="open = false"
+      >
+        <div class="bg-surface border border-surface-border rounded-xl shadow-xl p-4 w-80 space-y-3">
+          <p class="text-text-dim text-xs">Describe what broke:</p>
+          <input
+            ref="inputRef"
+            v-model="query"
+            type="text"
+            placeholder='e.g. "plex audio dropped around 2pm"'
+            class="w-full bg-surface-raised border border-surface-border rounded px-3 py-2 text-sm text-text-primary placeholder-text-dim focus:outline-none focus:border-accent"
+            @keydown.enter="submit"
+            @keydown.esc="open = false"
+          />
+          <div class="flex gap-2 justify-end">
+            <button @click="open = false" class="px-3 py-1.5 text-xs text-text-dim hover:text-text-primary">Cancel</button>
+            <button
+              :disabled="!query.trim()"
+              @click="submit"
+              class="px-4 py-1.5 rounded bg-accent text-white text-xs font-semibold hover:bg-blue-400 disabled:opacity-50"
+            >Go</button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router   = useRouter()
+const open     = ref(false)
+const query    = ref('')
+const inputRef = ref<HTMLInputElement | null>(null)
+
+watch(open, (val) => {
+  if (val) nextTick(() => inputRef.value?.focus())
+})
+
+function submit() {
+  if (!query.value.trim()) return
+  router.push({ path: '/diagnose', query: { q: query.value, tab: 'quick' } })
+  query.value = ''
+  open.value  = false
+}
+</script>