60 lines
2 KiB
Vue
60 lines
2 KiB
Vue
<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>
|