turnstone/web/src/views/LogSearchView.vue

<template>
  <div class="flex h-[calc(100vh-49px)]">
    <!-- Sidebar: filters -->
    <aside class="w-56 shrink-0 border-r border-surface-border bg-surface-raised p-4 flex flex-col gap-5 overflow-y-auto">
      <div>
        <h3 class="text-text-dim text-xs uppercase tracking-widest mb-2">Source</h3>
        <div class="flex flex-col gap-1">
          <button
            class="text-left px-2 py-1 rounded text-sm transition-colors"
            :class="!store.sourceFilter ? 'text-accent bg-accent-muted' : 'text-text-muted hover:text-text-primary hover:bg-surface-border'"
            @click="store.sourceFilter = undefined"
          >All sources</button>
          <button
            v-for="src in store.sources"
            :key="src.source_id"
            class="text-left px-2 py-1 rounded text-xs transition-colors truncate"
            :class="store.sourceFilter === src.source_id ? 'text-accent bg-accent-muted' : 'text-text-muted hover:text-text-primary hover:bg-surface-border'"
            :title="src.source_id"
            @click="store.sourceFilter = src.source_id"
          >
            {{ src.source_id }}
            <span v-if="src.error_count" class="text-sev-error ml-1">{{ src.error_count }}e</span>
          </button>
        </div>
      </div>

      <div>
        <h3 class="text-text-dim text-xs uppercase tracking-widest mb-2">Severity</h3>
        <div class="flex flex-col gap-1">
          <button
            class="text-left px-2 py-1 rounded text-sm transition-colors"
            :class="!store.severityFilter ? 'text-accent bg-accent-muted' : 'text-text-muted hover:text-text-primary hover:bg-surface-border'"
            @click="store.severityFilter = undefined"
          >All</button>
          <button
            v-for="sev in store.severityOptions"
            :key="sev"
            class="text-left px-2 py-1 rounded text-xs transition-colors"
            :class="store.severityFilter === sev ? 'text-accent bg-accent-muted' : 'text-text-muted hover:text-text-primary hover:bg-surface-border'"
            @click="store.severityFilter = sev"
          >{{ sev }}</button>
        </div>
      </div>

      <div>
        <h3 class="text-text-dim text-xs uppercase tracking-widest mb-2">Limit</h3>
        <select
          v-model.number="store.limit"
          class="w-full bg-surface border border-surface-border rounded px-2 py-1 text-sm text-text-primary"
        >
          <option v-for="n in [20, 50, 100, 200]" :key="n" :value="n">{{ n }}</option>
        </select>
      </div>

      <button
        class="mt-auto text-text-dim text-xs hover:text-text-muted transition-colors"
        @click="store.clearFilters()"
      >Clear filters</button>
    </aside>

    <!-- Main: search + results -->
    <main class="flex-1 flex flex-col min-w-0">
      <!-- Search bar -->
      <div class="border-b border-surface-border p-4 flex gap-3">
        <input
          v-model="store.query"
          type="text"
          placeholder="Search logs… (e.g. 'EAE timeout' or 'auth failed')"
          class="flex-1 bg-surface-raised border border-surface-border rounded px-4 py-2 text-sm text-text-primary placeholder-text-dim focus:outline-none focus:border-accent transition-colors"
          @keydown.enter="store.runSearch()"
        />
        <button
          class="px-5 py-2 rounded bg-accent text-white text-sm font-semibold hover:bg-blue-400 transition-colors disabled:opacity-50"
          :disabled="store.loading || !store.query.trim()"
          @click="store.runSearch()"
        >
          <span v-if="store.loading">…</span>
          <span v-else>Search</span>
        </button>
      </div>

      <!-- Results header -->
      <div v-if="store.hasResults || store.error" class="border-b border-surface-border px-4 py-2 flex items-center gap-3 text-xs text-text-dim">
        <span v-if="store.error" class="text-sev-error">{{ store.error }}</span>
        <span v-else>{{ store.total }} result{{ store.total !== 1 ? 's' : '' }}</span>
      </div>

      <!-- Empty / zero states -->
      <div v-if="!store.loading && !store.hasResults && !store.error" class="flex-1 flex flex-col items-center justify-center text-text-dim gap-3">
        <div v-if="!store.query" class="text-center">
          <p class="text-lg mb-1">Search your log corpus</p>
          <p class="text-sm">Type a query and press Enter or click Search.</p>
        </div>
        <div v-else class="text-center">
          <p class="text-base mb-1">No results for "{{ store.query }}"</p>
          <p class="text-sm">Try broader terms or check the Sources tab to confirm data is ingested.</p>
        </div>
      </div>

      <!-- Results list -->
      <div v-else class="flex-1 overflow-y-auto">
        <LogEntryRow
          v-for="entry in store.results"
          :key="entry.entry_id"
          :entry="entry"
        />
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useSearchStore } from '@/stores/search'
import LogEntryRow from '@/components/LogEntryRow.vue'

const store = useSearchStore()
onMounted(() => store.loadSources())
</script>