@nwire/studio 0.12.1 → 0.13.0

package/src/pages/Queries.vue

@@ -1,148 +0,0 @@
-<script setup lang="ts">
-/**
- * Queries — read endpoints over the CQRS surface. Each query reads from
- * a projection (eventually consistent over events) or runs a handler
- * (anything outside the projection store).
- */
-import { computed, onMounted, ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { useCache } from "@/lib/cache";
-import { Search, Database, Globe, Lock } from "lucide-vue-next";
-import {
-  PageHeader,
-  FilterInput,
-  KindBadge,
-  EmptyState,
-  MasterDetail,
-  SourcePill,
-  SourceDrawer,
-  ListRow,
-} from "@/components";
-
-const route = useRoute();
-const router = useRouter();
-const { cache } = useCache();
-const filter = ref("");
-const selected = ref<string | null>(null);
-const sourcePreview = ref<{ file: string; line: number; column?: number } | null>(null);
-
-function applyQueryPreselect(): void {
-  const name = route.query.name;
-  if (typeof name !== "string" || name.length === 0) return;
-  const found = cache.value?.queries.find((q) => q.name === name);
-  if (found) selected.value = `${found.app}::${found.name}`;
-}
-
-onMounted(applyQueryPreselect);
-watch(() => route.query.name, applyQueryPreselect);
-watch(() => cache.value, applyQueryPreselect);
-
-const filtered = computed(() => {
-  if (!cache.value) return [];
-  const q = filter.value.toLowerCase();
-  return cache.value.queries.filter(
-    (qe) =>
-      !q ||
-      qe.name.toLowerCase().includes(q) ||
-      qe.app.toLowerCase().includes(q) ||
-      (qe.projection ?? "").toLowerCase().includes(q),
-  );
-});
-
-const key = (q: { app: string; name: string }) => `${q.app}::${q.name}`;
-const detail = computed(() => filtered.value.find((q) => key(q) === selected.value) ?? null);
-</script>
-
-<template>
-  <div v-if="cache" class="h-full flex flex-col" data-testid="queries-page">
-    <div class="p-6 pb-3 border-b border-zinc-800">
-      <PageHeader
-        title="Queries"
-        subtitle="Read endpoints — projection-backed or direct-handler."
-        :icon="Search"
-        icon-color="text-emerald-400"
-        :count="filtered.length"
-        :total="cache.queries.length"
-      />
-    </div>
-
-    <EmptyState
-      v-if="cache.queries.length === 0"
-      title="No queries in cache"
-      hint="Queries are declared via defineQuery(projection, { name, input, execute }) or defineQuery({ name, input, handler })."
-      :icon="Search"
-    />
-
-    <MasterDetail v-else class="flex-1">
-      <template #listHeader>
-        <FilterInput v-model="filter" placeholder="filter by name, app, projection…" />
-      </template>
-
-      <template #list>
-        <ListRow
-          v-for="q in filtered"
-          :key="key(q)"
-          :selected="selected === key(q)"
-          @click="selected = key(q)"
-        >
-          <template #title>
-            <Search class="w-3 h-3 text-emerald-400 shrink-0" />
-            <span class="font-mono text-sm truncate">{{ q.name }}</span>
-          </template>
-          <template #meta>
-            <component
-              :is="q.public ? Globe : Lock"
-              class="w-3 h-3"
-              :class="q.public ? 'text-emerald-400' : 'text-zinc-500'"
-              :title="q.public ? 'public — exposed across the system' : 'private'"
-            />
-            <span class="text-[10px] text-zinc-500">{{ q.app }}</span>
-          </template>
-          <template v-if="q.projection" #description>
-            <div>
-              <span class="text-zinc-500">reads</span>
-              <span class="font-mono ml-1">{{ q.projection }}</span>
-            </div>
-          </template>
-        </ListRow>
-      </template>
-
-      <template #empty>Select a query to view its projection and source.</template>
-
-      <template v-if="detail" #detail>
-        <div class="p-6 space-y-5" data-testid="query-detail">
-          <div>
-            <div class="text-[10px] uppercase tracking-wide text-zinc-500">{{ detail.app }}</div>
-            <h2 class="font-mono text-xl mt-1">{{ detail.name }}</h2>
-            <p v-if="detail.description" class="text-sm text-zinc-400 mt-2 max-w-2xl">
-              {{ detail.description }}
-            </p>
-          </div>
-
-          <div class="flex flex-wrap gap-2">
-            <KindBadge :variant="detail.public ? 'public' : 'private'">
-              {{ detail.public ? "public" : "private" }}
-            </KindBadge>
-          </div>
-
-          <div v-if="detail.projection" class="space-y-3">
-            <h3 class="text-xs uppercase tracking-wide text-zinc-500">Reads from</h3>
-            <button
-              type="button"
-              class="flex items-center gap-2 font-mono text-sm text-left hover:text-cyan-300"
-              @click="router.push({ path: '/projections', query: { name: detail.projection } })"
-            >
-              <Database class="w-3.5 h-3.5 text-cyan-400" />
-              <span class="underline-offset-2 hover:underline">{{ detail.projection }}</span>
-            </button>
-          </div>
-
-          <div v-if="detail.source" class="pt-2">
-            <SourcePill :source="detail.source" @click="sourcePreview = detail.source!" />
-          </div>
-        </div>
-      </template>
-    </MasterDetail>
-    <SourceDrawer :source="sourcePreview" @close="sourcePreview = null" />
-  </div>
-</template>