doocus first ver

ui/meetus-app/src/components/RunPicker.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useStore } from '@/store'
+
+const { state, loadRuns, openRun } = useStore()
+
+onMounted(loadRuns)
+
+function onChange(e: Event) {
+  const id = (e.target as HTMLSelectElement).value
+  if (id) openRun(id)
+}
+</script>
+
+<template>
+  <div class="run-picker">
+    <label class="lbl">Meeting</label>
+    <select :value="state.currentRunId ?? ''" @change="onChange">
+      <option value="" disabled>Select a run…</option>
+      <option v-for="r in state.runs" :key="r.id" :value="r.id">
+        {{ r.name }} · {{ r.frameCount }} frames{{ r.hasVideo ? '' : ' · no video' }}
+      </option>
+    </select>
+    <span v-if="state.loading" class="hint">loading…</span>
+    <span v-else-if="state.error" class="hint err">{{ state.error }}</span>
+    <span v-else-if="!state.runs.length" class="hint" :title="state.outputDir ?? ''">
+      no runs found in {{ state.outputDir ?? '(unknown)' }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.run-picker {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.lbl {
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+select {
+  padding: var(--space-1) var(--space-2);
+  min-width: 280px;
+}
+.hint {
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+.hint.err {
+  color: var(--status-error);
+}
+</style>