@revenexx/studio-integrations 0.5.1 → 0.7.0

package/dist/runtime/pages/integrations/templates/index.vue

@@ -1,41 +1,48 @@
 <script setup>
 import { computed, ref, watch } from "vue";
-import { Magnifier as Search, RefreshCircle as Loader2, Layers, DangerTriangle as AlertTriangle, Bolt as Zap, ClockCircle as Clock, Global as Webhook, Play } from "#solar-icons";
+import { Magnifier as Search, Layers, DangerTriangle as AlertTriangle } from "#solar-icons";
 import { Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@revenexx/studio";
-import TemplateFlowPreview from "../../../components/Integrations/TemplateFlowPreview.vue";
-import { TEMPLATE_CATEGORIES } from "../../../data/integrationTemplates";
-useHead({ title: "Templates \xB7 Integration Studio" });
+import TemplateCard from "../../../components/Integrations/TemplateCard.vue";
+import { templateCategoryLabel, templatePackageLabel } from "../../../data/integrationTemplates";
+const t = useIntegrationsT();
+useHead({ title: () => t("integration.templates.gallery.head.title") });
 const { templates, loading, error, loaded, load, ensureDetails } = useIntegrationsTemplates();
 const { load: loadNodeCatalog } = useIntegrationsNodes();
 onMounted(async () => {
   await Promise.all([load(true), loadNodeCatalog()]);
-  void ensureDetails(templates.value.map((t) => t.slug));
+  void ensureDetails(templates.value.map((t2) => t2.slug));
 });
 const search = ref("");
 const activeCategory = ref("all");
 const activeLevel = ref("all");
 const sortBy = ref("name");
-const CATEGORY_LABELS = Object.fromEntries(
-  TEMPLATE_CATEGORIES.map((c) => [c.key, c.label])
-);
-function categoryLabel(key) {
-  return CATEGORY_LABELS[key] ?? key.charAt(0).toUpperCase() + key.slice(1);
-}
 const categories = computed(() => {
   const counts = /* @__PURE__ */ new Map();
-  for (const t of templates.value) counts.set(t.category, (counts.get(t.category) ?? 0) + 1);
-  return [...counts.entries()].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).map(([key, count]) => ({ key, label: categoryLabel(key), count }));
+  for (const t2 of templates.value) {
+    if (!t2.category) continue;
+    counts.set(t2.category, (counts.get(t2.category) ?? 0) + 1);
+  }
+  return [...counts.entries()].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).map(([key, count]) => ({ key, label: templateCategoryLabel(key), count }));
 });
 const LEVELS = ["beginner", "intermediate", "advanced"];
 const LEVEL_RANK = { beginner: 0, intermediate: 1, advanced: 2 };
+const levelOptions = computed(() => LEVELS.map((l) => ({
+  value: l,
+  label: t(`integration.templates.gallery.filter.level.${l}`)
+})));
+const sortOptions = computed(() => [
+  { value: "name", label: t("integration.templates.gallery.sort.name") },
+  { value: "level", label: t("integration.templates.gallery.sort.level") },
+  { value: "nodes", label: t("integration.templates.gallery.sort.nodes") }
+]);
 const filtered = computed(() => {
   const q = search.value.trim().toLowerCase();
   let items = templates.value;
-  if (activeCategory.value !== "all") items = items.filter((t) => t.category === activeCategory.value);
-  if (activeLevel.value !== "all") items = items.filter((t) => t.level === activeLevel.value);
+  if (activeCategory.value !== "all") items = items.filter((t2) => t2.category === activeCategory.value);
+  if (activeLevel.value !== "all") items = items.filter((t2) => t2.level === activeLevel.value);
   if (q) {
     items = items.filter(
-      (t) => t.name.toLowerCase().includes(q) || t.description.toLowerCase().includes(q) || t.vendors.some((v) => v.includes(q)) || (packageLabel(t) ?? "").toLowerCase().includes(q) || t.industries.some((i) => i.includes(q))
+      (t2) => t2.name.toLowerCase().includes(q) || t2.description.toLowerCase().includes(q) || t2.vendors.some((v) => v.toLowerCase().includes(q)) || (templatePackageLabel(t2) ?? "").toLowerCase().includes(q) || t2.industries.some((i) => i.toLowerCase().includes(q))
     );
   }
   const sorted = [...items];
@@ -45,23 +52,10 @@ const filtered = computed(() => {
   return sorted;
 });
 watch(() => templates.value.length, () => {
-  if (templates.value.length) void ensureDetails(templates.value.map((t) => t.slug));
+  if (templates.value.length) void ensureDetails(templates.value.map((t2) => t2.slug));
 });
-const TRIGGER_ICON = { schedule: Clock, webhook: Webhook, manual: Play, event: Zap };
-const TRIGGER_LABEL = { schedule: "Scheduled", webhook: "Webhook", manual: "Run on demand", event: "Event-driven" };
-function levelDot(level) {
-  return level === "beginner" ? "bg-emerald-500" : level === "intermediate" ? "bg-amber-500" : "bg-rose-500";
-}
-function bannerFor(tpl) {
-  return tpl.images.find((i) => i.category === "banner")?.src ?? null;
-}
-function packageLabel(tpl) {
-  const pkg = tpl.package;
-  if (!pkg) return null;
-  const tail = (pkg.name.split("/").pop() ?? pkg.name).replace(/^integrations-nodes-/, "");
-  if (tail === "core") return null;
-  return pkg.label ?? tail.split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(" ");
-}
+const awaitingCatalogue = computed(() => loading.value && !templates.value.length);
+const statusText = computed(() => awaitingCatalogue.value ? t("integration.templates.gallery.state.loading") : "");
 </script>
 
 <template>
@@ -69,8 +63,8 @@ function packageLabel(tpl) {
     <!-- The toolbar lives in the header's #tabs slot: PageHeader is the
          sticky element (top-0 z-20), so filters + search stay pinned. -->
     <PageHeader
-      title="Templates"
-      description="Pre-built workflows you can clone, then tweak. Wired by revenexx and our partners."
+      :title="t('integration.templates.gallery.header.title')"
+      :description="t('integration.templates.gallery.header.description')"
     >
       <template #tabs>
         <div class="-mx-3 w-[calc(100%+1.5rem)] flex items-center gap-3 border-t border-black/[0.06] px-4 pt-2.5 pb-1">
@@ -81,7 +75,7 @@ function packageLabel(tpl) {
             :class="activeCategory === 'all' ? 'border-primary/30 bg-primary/10 text-primary font-medium' : 'border-black/[0.08] text-muted-foreground hover:border-black/20'"
             @click="activeCategory = 'all'"
           >
-            All <span class="opacity-70">({{ templates.length }})</span>
+            {{ t("integration.templates.gallery.filter.all") }} <span class="opacity-70">({{ templates.length }})</span>
           </button>
           <button
             v-for="cat in categories"
@@ -96,35 +90,58 @@ function packageLabel(tpl) {
         </div>
 
         <Select v-model="activeLevel">
-          <SelectTrigger class="h-7 data-[size=default]:h-7 min-h-0 py-0 w-36 rounded-full bg-white text-sm">
+          <SelectTrigger :aria-label="t('integration.templates.gallery.filter.levelAria')" class="h-7 data-[size=default]:h-7 min-h-0 py-0 w-36 rounded-full bg-white text-sm">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="all">All levels</SelectItem>
-            <SelectItem v-for="l in LEVELS" :key="l" :value="l">{{ l.charAt(0).toUpperCase() + l.slice(1) }}</SelectItem>
+            <SelectItem value="all">{{ t("integration.templates.gallery.filter.levelAllOption") }}</SelectItem>
+            <SelectItem v-for="opt in levelOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</SelectItem>
           </SelectContent>
         </Select>
         <Select v-model="sortBy">
-          <SelectTrigger class="h-7 data-[size=default]:h-7 min-h-0 py-0 w-40 rounded-full bg-white text-sm">
+          <SelectTrigger :aria-label="t('integration.templates.gallery.sort.aria')" class="h-7 data-[size=default]:h-7 min-h-0 py-0 w-40 rounded-full bg-white text-sm">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="name">Sort: A–Z</SelectItem>
-            <SelectItem value="level">Sort: Simplest first</SelectItem>
-            <SelectItem value="nodes">Sort: Most steps</SelectItem>
+            <SelectItem v-for="opt in sortOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</SelectItem>
           </SelectContent>
         </Select>
         <div class="relative w-60">
           <Search :size="12" class="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
-          <Input v-model="search" placeholder="Search templates, vendors…" class="h-7 min-h-0 py-0 rounded-full pl-7 text-sm bg-white" />
+          <Input v-model="search" :aria-label="t('integration.templates.gallery.search.aria')" :placeholder="t('integration.templates.gallery.search.placeholder')" class="h-7 min-h-0 py-0 rounded-full pl-7 text-sm bg-white" />
           </div>
         </div>
       </template>
     </PageHeader>
 
     <div class="p-4">
-      <!-- Loading (first fetch) -->
-      <div v-if="loading && !templates.length" class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+      <!-- What the page is doing, in words (specs/templates.md AC-9).
+           The shimmer says "still working" only to somebody who can see it, and
+           six blank tiles carry no text, no name and no state — so waiting and
+           "nothing is registered" were the same silence, which are the two states
+           that ask for opposite reactions.
+
+           The region is OUTSIDE the v-if chain below and always in the DOM, with
+           only its text changing. A live region that appears together with its
+           content is a region assistive technology may never have been watching:
+           what is announced is a change inside an existing region.
+
+           Named, because it is not the only `role="status"` on this page: every
+           card draws one while its flow miniature loads ("Loading the flow"). Two
+           unnamed status regions on one page are two things a reader — and a test —
+           cannot tell apart, and this one is about the gallery rather than a card. -->
+      <p role="status" aria-live="polite" :aria-label="t('integration.templates.gallery.state.regionLabel')" class="sr-only">{{ statusText }}</p>
+
+      <!-- The placeholders are taken out of the accessibility tree rather than
+           marked busy. `aria-busy` only asks assistive technology to defer
+           exposing changes, and on a role-less div that is not a live region NVDA
+           and JAWS effectively ignore it — it would have expressed the state
+           without keeping anything from being walked. A placeholder carries no
+           information, so there is nothing to lose by removing it, and the region
+           above says in words what this area means. Which is also why the named
+           "Templates" group below is absent while this branch renders: the set of
+           cards does not exist yet, rather than existing and being empty. -->
+      <div v-if="awaitingCatalogue" aria-hidden="true" class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
         <div v-for="n in 6" :key="`sk-${n}`" class="rounded-lg border border-black/[0.06] bg-white p-0 overflow-hidden">
           <div class="h-36 bg-black/[0.04] animate-pulse" />
           <div class="p-4 space-y-2">
@@ -135,11 +152,18 @@ function packageLabel(tpl) {
         </div>
       </div>
 
-      <!-- Fetch failed -->
-      <div v-else-if="error && !templates.length" class="rounded-lg border border-rose-500/20 bg-rose-500/5 p-4 text-sm text-rose-700 flex items-start gap-2">
+      <!-- Fetch failed. `role="alert"` because this block is how the wait ends for
+           somebody who was told through the region above to hold on: it is
+           announced when it is inserted, so the sequence is "Loading templates…"
+           then the reason, rather than "Loading templates…" then silence. An alert
+           rather than a copy of the text in the status region, which would put the
+           same sentence in the page twice and read it out twice to anybody walking
+           it. The other two empty states are not alerts: nothing had spoken before
+           them, and their copy is where the reader is going anyway. -->
+      <div v-else-if="error && !templates.length" role="alert" class="rounded-lg border border-rose-500/20 bg-rose-500/5 p-4 text-sm text-rose-700 flex items-start gap-2">
         <AlertTriangle :size="15" class="mt-0.5 shrink-0" />
         <div>
-          <div class="font-medium">Couldn't load templates.</div>
+          <div class="font-medium">{{ t("integration.templates.gallery.error.title") }}</div>
           <div class="text-rose-700/80">{{ error }}</div>
         </div>
       </div>
@@ -149,71 +173,26 @@ function packageLabel(tpl) {
         <span class="mx-auto mb-3 flex size-10 items-center justify-center rounded-lg bg-slate-100 text-slate-400">
           <Layers :size="18" />
         </span>
-        <div class="text-sm font-semibold text-foreground">No templates registered yet</div>
+        <div class="text-sm font-semibold text-foreground">{{ t("integration.templates.gallery.empty.registered.title") }}</div>
         <p class="mx-auto mt-1 max-w-sm text-sm text-muted-foreground">
-          Templates ship with node packages. Once a package that publishes templates is installed, they show up here.
+          {{ t("integration.templates.gallery.empty.registered.description") }}
         </p>
       </div>
 
-      <!-- Cards -->
-      <div v-else class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-        <NuxtLink
+      <!-- The group is named so the cards can be addressed as a set; a card names
+           itself from what it shows, which TemplateCard says more about. -->
+      <div v-else role="group" :aria-label="t('integration.templates.gallery.cards.ariaLabel')" class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+        <TemplateCard
           v-for="tpl in filtered"
           :key="tpl.slug"
+          :template="tpl"
+          density="full"
           :to="`/integrations/templates/${tpl.slug}`"
-          class="group flex flex-col overflow-hidden rounded-lg border border-black/[0.06] bg-white transition hover:border-black/20 hover:shadow-sm"
-        >
-          <!-- Live workflow preview (or the registry banner, when one ships) -->
-          <div class="relative h-36 shrink-0 border-b border-black/[0.06] bg-slate-50/70 [background-image:radial-gradient(circle,rgba(15,23,42,0.07)_1px,transparent_1px)] [background-size:14px_14px]">
-            <img
-              v-if="bannerFor(tpl)"
-              :src="bannerFor(tpl)"
-              alt=""
-              class="h-full w-full object-cover"
-            >
-            <TemplateFlowPreview v-else-if="tpl.detailLoaded" :blob="tpl.blob" :height="144" class="px-2" />
-            <div v-else class="flex h-full items-center justify-center">
-              <Loader2 :size="16" class="animate-spin text-muted-foreground/50" />
-            </div>
-            <div class="absolute left-2 top-2 flex items-center gap-1.5">
-              <span class="inline-flex items-center whitespace-nowrap rounded-full bg-slate-100 px-2 py-0.5 uppercase text-xs font-medium text-slate-700">
-                {{ categoryLabel(tpl.category) }}
-              </span>
-              <span
-                v-if="packageLabel(tpl)"
-                class="inline-flex items-center whitespace-nowrap rounded-full bg-violet-100 px-2 py-0.5 uppercase text-xs font-medium text-violet-700"
-              >
-                {{ packageLabel(tpl) }}
-              </span>
-            </div>
-          </div>
-
-          <div class="flex min-h-0 flex-1 flex-col p-4">
-            <div class="text-sm font-semibold text-foreground line-clamp-1">{{ tpl.name }}</div>
-            <p class="mt-1 flex-1 text-sm text-muted-foreground line-clamp-2">{{ tpl.description }}</p>
-
-            <div class="mt-3 flex items-center gap-2 text-xs text-muted-foreground">
-              <span
-                v-for="t in tpl.triggerTypes"
-                :key="t"
-                class="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-slate-100 px-2 py-0.5 uppercase"
-              >
-                <component :is="TRIGGER_ICON[t] ?? Zap" :size="10" />
-                {{ TRIGGER_LABEL[t] ?? t }}
-              </span>
-              <span class="flex-1" />
-              <span class="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-slate-100 px-2 py-0.5 uppercase">
-                <span class="size-1.5 rounded-full" :class="levelDot(tpl.level)" />
-                {{ tpl.level }}
-              </span>
-              <span v-if="tpl.publisher.kind !== 'revenexx'" class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 uppercase">{{ tpl.publisher.name }}</span>
-            </div>
-          </div>
-        </NuxtLink>
+        />
       </div>
 
       <div v-if="templates.length && !filtered.length" class="mt-4 rounded-lg border border-black/[0.06] bg-white p-8 text-center text-sm text-muted-foreground">
-        No templates match these filters.
+        {{ t("integration.templates.gallery.empty.filtered") }}
       </div>
     </div>
   </IntegrationsLayout>