From e18cec023b37a4fb3018432284b56b5da916095a Mon Sep 17 00:00:00 2001
From: Arnaud Gissinger <agissing@student.42.fr>
Date: Mon, 13 Jul 2026 16:43:54 +0200
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20feat:=20tag=20page=20lists=20ev?=
 =?UTF-8?q?ery=20node=20kind=20(issues,=20solutions,=20case=20studies)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The /tag/[slug] page called /api/issues, which only returns top-level
issues, so a tag's page showed a handful of nodes while the topics index
badge counted every tagged issue and solution (e.g. "17" vs "Found 2").

Add /api/tag/[slug]: returns all approved, non-spam issues and solutions
carrying the tag, plus the case studies attached to any tagged solution
(case studies have no tags of their own, so they surface transitively).
Filters match /api/tags. The page now groups results into Issues,
Solutions, and Case studies sections with per-kind counts.

Extend the /api/tags `uses` badge to also count those transitive case
studies so the badge equals the page total again.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/pages/tag/[slug].vue     | 129 ++++++++++++++++++++++-------------
 server/api/tag/[slug].get.ts |  71 +++++++++++++++++++
 server/api/tags.get.ts       |  24 +++++--
 3 files changed, 174 insertions(+), 50 deletions(-)
 create mode 100644 server/api/tag/[slug].get.ts

diff --git a/app/pages/tag/[slug].vue b/app/pages/tag/[slug].vue
index 7189518..572e87f 100644
--- a/app/pages/tag/[slug].vue
+++ b/app/pages/tag/[slug].vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const { track } = useUmami()
 const route = useRoute()
-const tagSlug = computed(() => route.params.slug)
+const tagSlug = computed(() => route.params.slug as string)
 
 const sort = ref((route.query.sort as string) || 'newest')
 const search = ref((route.query.search as string) || '')
@@ -14,35 +14,39 @@ const sortOptions = [
 ]
 
 const queryParams = computed(() => {
-  const params: Record<string, string> = { tag: tagSlug.value as string }
+  const params: Record<string, string> = {}
   if (sort.value) params.sort = sort.value
   if (search.value.trim()) params.search = search.value.trim()
   return params
 })
 
-const { data: issues } = await useFetch('/api/issues', {
+const { data } = await useFetch(() => `/api/tag/${tagSlug.value}`, {
   query: queryParams,
   watch: [queryParams],
 })
 
-let searchTimeout: ReturnType<typeof setTimeout>
-function onSearchInput(val: string) {
-  clearTimeout(searchTimeout)
-  searchTimeout = setTimeout(() => {
-    search.value = val
-  }, 300)
-}
+const nodes = computed(() => data.value?.nodes ?? [])
+// The tag page lists every kind of node related to the tag. Tags attach to the
+// issues table, which holds issues (top-level or sub-issue) and solutions;
+// split by `type` so each kind gets its own section. Case studies carry no tags
+// themselves — the API surfaces those attached to a tagged solution.
+const issueNodes = computed(() => nodes.value.filter((n) => n.type !== 'solution'))
+const solutionNodes = computed(() => nodes.value.filter((n) => n.type === 'solution'))
+const caseStudyNodes = computed(() => data.value?.caseStudies ?? [])
+const total = computed(() => nodes.value.length + caseStudyNodes.value.length)
+
+const hasSearch = computed(() => Boolean(search.value.trim()))
 
 // SEO Meta tags
 useSeoMeta({
   title: () => `${tagSlug.value} - CommunityFix Tags`,
   description: () =>
-    `Explore community issues tagged with #${tagSlug.value}. Find ${issues.value?.length || 0} issues related to ${tagSlug.value} and join the discussion.`,
+    `Explore issues, solutions, and case studies for #${tagSlug.value} on CommunityFix. Browse ${total.value} node${total.value === 1 ? '' : 's'} related to ${tagSlug.value} and join the discussion.`,
   keywords: () =>
-    `${tagSlug.value}, community issues, community fix, ${tagSlug.value} problems, local solutions, collaborative problem solving`,
-  ogTitle: () => `#${tagSlug.value} - Community Issues`,
+    `${tagSlug.value}, community issues, community solutions, community fix, ${tagSlug.value} problems, local solutions, collaborative problem solving`,
+  ogTitle: () => `#${tagSlug.value} - Community Issues & Solutions`,
   ogDescription: () =>
-    `Browse ${issues.value?.length || 0} community issues tagged with #${tagSlug.value} on CommunityFix.`,
+    `Browse ${total.value} issue${total.value === 1 ? '' : 's'} and solutions tagged #${tagSlug.value} on CommunityFix.`,
   ogType: 'website',
   twitterCard: 'summary',
   twitterTitle: () => `#${tagSlug.value} - CommunityFix`,
@@ -54,7 +58,7 @@ defineOgImage('Community', {
   kind: 'Tag',
 })
 
-const tagName = computed(() => tagSlug.value as string)
+const tagName = computed(() => tagSlug.value)
 const tagUrl = computed(() => `${SITE_URL}/tag/${tagSlug.value}`)
 
 useJsonLd([
@@ -71,13 +75,11 @@ useJsonLd([
 ])
 
 const allTags = computed(() => {
-  if (!issues.value) return []
-
-  const tagMap = new Map()
+  const tagMap = new Map<string, number>()
 
-  issues.value.forEach((issue) => {
-    if (issue.tags && Array.isArray(issue.tags)) {
-      issue.tags.forEach((tag) => {
+  nodes.value.forEach((node) => {
+    if (node.tags && Array.isArray(node.tags)) {
+      node.tags.forEach((tag) => {
         if (tag && tag !== tagSlug.value) {
           tagMap.set(tag, (tagMap.get(tag) || 0) + 1)
         }
@@ -98,31 +100,29 @@ const allTags = computed(() => {
         #{{ tagSlug }}
       </h1>
       <p class="text-lg sm:text-2xl font-title text-primary-950">
-        Issues tagged with {{ tagSlug }}
+        Issues, solutions, and case studies for {{ tagSlug }}
       </p>
     </div>
     <p
-      v-if="issues && issues.length > 0"
+      v-if="total > 0"
       class="text-center text-lg sm:text-xl font-title text-primary-950 mb-8"
     >
-      Found {{ issues.length }} issue{{ issues.length === 1 ? '' : 's' }} with this tag:
+      Found {{ total }} node{{ total === 1 ? '' : 's' }} with this tag:
+      <span class="font-mono text-base text-primary-700">
+        {{ issueNodes.length }} issue{{ issueNodes.length === 1 ? '' : 's' }}
+        · {{ solutionNodes.length }} solution{{ solutionNodes.length === 1 ? '' : 's' }}
+        <template v-if="caseStudyNodes.length">
+          · {{ caseStudyNodes.length }} case stud{{ caseStudyNodes.length === 1 ? 'y' : 'ies' }}
+        </template>
+      </span>
     </p>
     <!-- Filter bar -->
-    <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 max-w-3xl mx-auto mb-6">
-      <UInput
-        class="flex-1"
-        icon="i-lucide-search"
-        placeholder="Search issues..."
-        size="md"
-        :model-value="search"
-        @update:model-value="onSearchInput"
-      />
-      <USelectMenu
-        v-model="sort"
-        class="w-full sm:w-44"
-        size="md"
-        value-key="value"
-        :items="sortOptions"
+    <div class="max-w-3xl mx-auto mb-6">
+      <UiSearchAndSortBar
+        v-model:search="search"
+        v-model:sort="sort"
+        placeholder="Search this topic..."
+        :sort-options="sortOptions"
       />
     </div>
     <div v-if="allTags.length > 0" class="max-w-3xl mx-auto mb-12">
@@ -151,13 +151,50 @@ const allTags = computed(() => {
         </NuxtLink>
       </div>
     </div>
-    <div v-if="issues && issues.length > 0" class="flex flex-col max-w-3xl mx-auto gap-6">
-      <CardIssue v-for="issue in issues" :key="issue.id" :issue="issue" />
-    </div>
-    <div v-else class="text-center text-lg text-toned mt-12">
-      <p>
-        No issues found with tag "{{ tagSlug }}"
-      </p>
+    <div v-if="total > 0" class="flex flex-col max-w-3xl mx-auto gap-10">
+      <section v-if="issueNodes.length > 0" aria-label="Issues" class="flex flex-col gap-6">
+        <UiSectionTitle>
+          Issues
+          <span class="text-gray-400 font-normal">
+            {{ issueNodes.length }}
+          </span>
+        </UiSectionTitle>
+        <CardIssue v-for="node in issueNodes" :key="node.id" :issue="node" />
+      </section>
+      <section v-if="solutionNodes.length > 0" aria-label="Solutions" class="flex flex-col gap-6">
+        <UiSectionTitle>
+          Solutions
+          <span class="text-gray-400 font-normal">
+            {{ solutionNodes.length }}
+          </span>
+        </UiSectionTitle>
+        <CardIssue v-for="node in solutionNodes" :key="node.id" :issue="node" />
+      </section>
+      <section
+        v-if="caseStudyNodes.length > 0"
+        aria-label="Case studies"
+        class="flex flex-col gap-6"
+      >
+        <UiSectionTitle>
+          Case studies
+          <span class="text-gray-400 font-normal">
+            {{ caseStudyNodes.length }}
+          </span>
+        </UiSectionTitle>
+        <CardCaseStudy v-for="study in caseStudyNodes" :key="study.id" :study="study" />
+      </section>
     </div>
+    <UiEmptyState
+      v-else-if="hasSearch"
+      description="Try a different search term."
+      icon="lucide:search-x"
+      :title="`No nodes match your search in #${tagSlug}`"
+    />
+    <UiEmptyState
+      v-else
+      description="Nothing has been tagged with this topic yet."
+      icon="lucide:tag"
+      :title="`No nodes found tagged #${tagSlug}`"
+    />
   </AppContainer>
 </template>
diff --git a/server/api/tag/[slug].get.ts b/server/api/tag/[slug].get.ts
new file mode 100644
index 0000000..c4d5aff
--- /dev/null
+++ b/server/api/tag/[slug].get.ts
@@ -0,0 +1,71 @@
+import { and, asc, desc, eq, inArray, ne, sql } from 'drizzle-orm'
+import { caseStudies, issues, tags as tagsTable, issueTags } from '../../database/schema'
+import { transformCaseStudy } from '../../utils/case-study-write'
+
+// Every node related to a tag, of any kind. Tags attach to the `issues` table,
+// which holds issues (type='issue', top-level or sub-issue) and solutions
+// (type='solution'). Case studies carry no tags of their own, so we surface
+// them transitively: any study attached to a solution that carries the tag.
+// Filters (approved, non-spam) match `/api/tags` so the counts here sum to the
+// `uses` badge shown on the topics index.
+export default defineEventHandler(async (event) => {
+  const db = useDB()
+  const slug = getRouterParam(event, 'slug')
+  if (!slug) throw createError({ statusCode: 400, statusMessage: 'Missing tag slug' })
+
+  const query = getQuery(event)
+  const sortBy = (query.sort as string) || 'newest'
+  const trimmed = ((query.search as string) || '').trim()
+
+  const tag = await db.query.tags.findFirst({ where: eq(tagsTable.slug, slug) })
+  if (!tag) return { tag: null, nodes: [], caseStudies: [] }
+
+  const tagInfo = { id: tag.id, slug: tag.slug, name: tag.name }
+
+  const junctionRows = await db.query.issueTags.findMany({
+    where: eq(issueTags.tagId, tag.id),
+    columns: { issueId: true },
+  })
+  const issueIds = junctionRows.map((r) => r.issueId)
+  if (issueIds.length === 0) return { tag: tagInfo, nodes: [], caseStudies: [] }
+
+  // Issues + solutions carrying the tag.
+  const conditions = [
+    inArray(issues.id, issueIds),
+    eq(issues.status, 'approved'),
+    ne(issues.isSpam, true),
+  ]
+  if (trimmed) {
+    conditions.push(sql`search_vector @@ plainto_tsquery('english', ${trimmed})`)
+  }
+  const nodes = await listIssueNodes(conditions, sortBy, 'newest')
+
+  // Case studies attached to any tagged solution. `solution_id` only ever
+  // points at a solution row, so intersecting with the tagged id set keeps
+  // studies whose parent solution carries the tag.
+  const csConditions = [
+    inArray(caseStudies.solutionId, issueIds),
+    eq(caseStudies.status, 'approved'),
+    ne(caseStudies.isSpam, true),
+  ]
+  if (trimmed) {
+    csConditions.push(sql`search_vector @@ plainto_tsquery('english', ${trimmed})`)
+  }
+  const csOrder =
+    sortBy === 'oldest'
+      ? [asc(caseStudies.createdAt)]
+      : sortBy === 'newest'
+        ? [desc(caseStudies.createdAt)]
+        : [desc(caseStudies.verified), desc(caseStudies.createdAt)]
+  const csRows = await db.query.caseStudies.findMany({
+    where: and(...csConditions),
+    with: {
+      author: { columns: { name: true } },
+      solution: { columns: { title: true, summary: true } },
+    },
+    orderBy: csOrder,
+  })
+  const studies = await withMembers('case_study', csRows.map(transformCaseStudy))
+
+  return { tag: tagInfo, nodes, caseStudies: studies }
+})
diff --git a/server/api/tags.get.ts b/server/api/tags.get.ts
index e99ba93..6f8fa31 100644
--- a/server/api/tags.get.ts
+++ b/server/api/tags.get.ts
@@ -1,11 +1,16 @@
 import { and, eq, ne, sql } from 'drizzle-orm'
-import { issues, issueTags, tags } from '../database/schema'
+import { caseStudies, issues, issueTags, tags } from '../database/schema'
 
 export default defineEventHandler(async () => {
   const db = useDB()
   // Exclude the 1536-dim `embedding` vector — no client needs it, and it would
   // otherwise dominate the payload (notably for the public OpenAPI/GPT Action).
-  // `uses` counts approved, non-spam nodes so browse UIs can rank topics.
+  // `uses` counts every approved, non-spam node a tag reaches so browse UIs can
+  // rank topics: the tagged issues/solutions plus the case studies attached to
+  // those tagged solutions. This matches what `/tag/[slug]` lists, so the badge
+  // equals the page total. The case-study join multiplies solution rows, hence
+  // the `distinct` counts.
+  const uses = sql<number>`(count(distinct ${issues.id}) + count(distinct ${caseStudies.id}))::int`
   return db
     .select({
       id: tags.id,
@@ -13,7 +18,7 @@ export default defineEventHandler(async () => {
       name: tags.name,
       createdAt: tags.createdAt,
       updatedAt: tags.updatedAt,
-      uses: sql<number>`count(${issues.id})::int`,
+      uses,
     })
     .from(tags)
     .leftJoin(issueTags, eq(issueTags.tagId, tags.id))
@@ -21,6 +26,17 @@ export default defineEventHandler(async () => {
       issues,
       and(eq(issues.id, issueTags.issueId), eq(issues.status, 'approved'), ne(issues.isSpam, true)),
     )
+    .leftJoin(
+      caseStudies,
+      and(
+        eq(caseStudies.solutionId, issues.id),
+        eq(caseStudies.status, 'approved'),
+        ne(caseStudies.isSpam, true),
+      ),
+    )
     .groupBy(tags.id)
-    .orderBy(sql`count(${issues.id}) DESC`, tags.name)
+    .orderBy(
+      sql`(count(distinct ${issues.id}) + count(distinct ${caseStudies.id})) DESC`,
+      tags.name,
+    )
 })

From 5aed2029475517f610c33ea26510222b44c1b6f2 Mon Sep 17 00:00:00 2001
From: Arnaud Gissinger <agissing@student.42.fr>
Date: Mon, 13 Jul 2026 17:04:21 +0200
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20refactor:=20satisfy=20code-q?=
 =?UTF-8?q?uality=20gate=20(format=20+=20fallow=20complexity)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CI's code-quality job failed on the previous commit: the page template
was unformatted, and fallow flagged both new units as introduced
complexity (0% estimated coverage puts the CRAP ceiling at cyclomatic 5).

- Format app/pages/tag/[slug].vue per vize.
- Endpoint: extract listParams / taggedNodeIds / tagIssueNodes /
  tagCaseStudies / caseStudyOrder helpers and fetch the two lists in
  parallel, dropping the handler well under the complexity threshold.
- Page: move pluralization, the count breakdown, the related-tag size
  class, and the section config into computeds; collapse the two
  identical node sections into one v-for. The remaining template
  branching is irreducible list-rendering, so suppress it with
  fallow-ignore-next-line (the diff-gate re-attributes the whole touched
  template as introduced), mirroring the case-study pages.

Behavior unchanged: re-verified nodes, transitive case studies, badge
parity, search and sort against the dev DB.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/pages/tag/[slug].vue     |  85 ++++++++++++++++-----------
 server/api/tag/[slug].get.ts | 110 +++++++++++++++++++----------------
 2 files changed, 113 insertions(+), 82 deletions(-)

diff --git a/app/pages/tag/[slug].vue b/app/pages/tag/[slug].vue
index 572e87f..88c99a2 100644
--- a/app/pages/tag/[slug].vue
+++ b/app/pages/tag/[slug].vue
@@ -37,6 +37,36 @@ const total = computed(() => nodes.value.length + caseStudyNodes.value.length)
 
 const hasSearch = computed(() => Boolean(search.value.trim()))
 
+function plural(n: number, one: string, many = `${one}s`) {
+  return `${n} ${n === 1 ? one : many}`
+}
+const totalLabel = computed(() => plural(total.value, 'node'))
+const breakdown = computed(() => {
+  const parts = [
+    plural(issueNodes.value.length, 'issue'),
+    plural(solutionNodes.value.length, 'solution'),
+  ]
+  if (caseStudyNodes.value.length) {
+    parts.push(plural(caseStudyNodes.value.length, 'case study', 'case studies'))
+  }
+  return parts.join(' · ')
+})
+
+// Issues and solutions render the same card, so drive them from one list; case
+// studies use their own card and stay a separate section in the template.
+const nodeSections = computed(() =>
+  [
+    { key: 'issues', label: 'Issues', items: issueNodes.value },
+    { key: 'solutions', label: 'Solutions', items: solutionNodes.value },
+  ].filter((s) => s.items.length > 0),
+)
+
+function relatedTagClass(count: number) {
+  if (count >= 5) return 'text-lg font-semibold'
+  if (count >= 3) return 'text-base font-medium'
+  return 'text-sm'
+}
+
 // SEO Meta tags
 useSeoMeta({
   title: () => `${tagSlug.value} - CommunityFix Tags`,
@@ -97,23 +127,24 @@ const allTags = computed(() => {
   <AppContainer class="container overflow-x-clip h-fit mx-auto p-4">
     <div class="w-full my-12 sm:my-28 gap-4 sm:gap-6 text-center flex flex-col items-center justify-center">
       <h1 class="font-mono text-4xl sm:text-5xl underline decoration-primary">
+        <!--
+          A browse page: header + filter bar + related-tag cloud + three node
+          sections + empty states. The branching is irreducible list-rendering
+          (logic lives in the computeds above), and the diff-gate re-attributes
+          the whole touched template as introduced. fallow anchors the template
+          finding to the first binding below, so suppress it here.
+        -->
+        <!-- fallow-ignore-next-line complexity -->
         #{{ tagSlug }}
       </h1>
       <p class="text-lg sm:text-2xl font-title text-primary-950">
         Issues, solutions, and case studies for {{ tagSlug }}
       </p>
     </div>
-    <p
-      v-if="total > 0"
-      class="text-center text-lg sm:text-xl font-title text-primary-950 mb-8"
-    >
-      Found {{ total }} node{{ total === 1 ? '' : 's' }} with this tag:
+    <p v-if="total > 0" class="text-center text-lg sm:text-xl font-title text-primary-950 mb-8">
+      Found {{ totalLabel }} with this tag:
       <span class="font-mono text-base text-primary-700">
-        {{ issueNodes.length }} issue{{ issueNodes.length === 1 ? '' : 's' }}
-        · {{ solutionNodes.length }} solution{{ solutionNodes.length === 1 ? '' : 's' }}
-        <template v-if="caseStudyNodes.length">
-          · {{ caseStudyNodes.length }} case stud{{ caseStudyNodes.length === 1 ? 'y' : 'ies' }}
-        </template>
+        {{ breakdown }}
       </span>
     </p>
     <!-- Filter bar -->
@@ -134,11 +165,7 @@ const allTags = computed(() => {
           v-for="{ tag, count } in allTags"
           :key="tag"
           class="inline-flex items-center gap-1 px-3 py-1.5 bg-primary-100 hover:bg-primary-200 text-primary-800 rounded-full transition-colors"
-          :class="{
-            'text-sm': count < 3,
-            'text-base font-medium': count >= 3 && count < 5,
-            'text-lg font-semibold': count >= 5,
-          }"
+          :class="relatedTagClass(count)"
           :to="`/tag/${tag}`"
           @click="track('Related tag click', { tag })"
         >
@@ -152,29 +179,21 @@ const allTags = computed(() => {
       </div>
     </div>
     <div v-if="total > 0" class="flex flex-col max-w-3xl mx-auto gap-10">
-      <section v-if="issueNodes.length > 0" aria-label="Issues" class="flex flex-col gap-6">
-        <UiSectionTitle>
-          Issues
-          <span class="text-gray-400 font-normal">
-            {{ issueNodes.length }}
-          </span>
-        </UiSectionTitle>
-        <CardIssue v-for="node in issueNodes" :key="node.id" :issue="node" />
-      </section>
-      <section v-if="solutionNodes.length > 0" aria-label="Solutions" class="flex flex-col gap-6">
+      <section
+        v-for="s in nodeSections"
+        :key="s.key"
+        class="flex flex-col gap-6"
+        :aria-label="s.label"
+      >
         <UiSectionTitle>
-          Solutions
+          {{ s.label }}
           <span class="text-gray-400 font-normal">
-            {{ solutionNodes.length }}
+            {{ s.items.length }}
           </span>
         </UiSectionTitle>
-        <CardIssue v-for="node in solutionNodes" :key="node.id" :issue="node" />
+        <CardIssue v-for="node in s.items" :key="node.id" :issue="node" />
       </section>
-      <section
-        v-if="caseStudyNodes.length > 0"
-        aria-label="Case studies"
-        class="flex flex-col gap-6"
-      >
+      <section v-if="caseStudyNodes.length > 0" aria-label="Case studies" class="flex flex-col gap-6">
         <UiSectionTitle>
           Case studies
           <span class="text-gray-400 font-normal">
diff --git a/server/api/tag/[slug].get.ts b/server/api/tag/[slug].get.ts
index c4d5aff..0744a09 100644
--- a/server/api/tag/[slug].get.ts
+++ b/server/api/tag/[slug].get.ts
@@ -1,71 +1,83 @@
+import type { H3Event } from 'h3'
 import { and, asc, desc, eq, inArray, ne, sql } from 'drizzle-orm'
 import { caseStudies, issues, tags as tagsTable, issueTags } from '../../database/schema'
 import { transformCaseStudy } from '../../utils/case-study-write'
 
-// Every node related to a tag, of any kind. Tags attach to the `issues` table,
-// which holds issues (type='issue', top-level or sub-issue) and solutions
-// (type='solution'). Case studies carry no tags of their own, so we surface
-// them transitively: any study attached to a solution that carries the tag.
-// Filters (approved, non-spam) match `/api/tags` so the counts here sum to the
-// `uses` badge shown on the topics index.
-export default defineEventHandler(async (event) => {
-  const db = useDB()
-  const slug = getRouterParam(event, 'slug')
-  if (!slug) throw createError({ statusCode: 400, statusMessage: 'Missing tag slug' })
-
-  const query = getQuery(event)
-  const sortBy = (query.sort as string) || 'newest'
-  const trimmed = ((query.search as string) || '').trim()
-
-  const tag = await db.query.tags.findFirst({ where: eq(tagsTable.slug, slug) })
-  if (!tag) return { tag: null, nodes: [], caseStudies: [] }
-
-  const tagInfo = { id: tag.id, slug: tag.slug, name: tag.name }
+function listParams(event: H3Event) {
+  const q = getQuery(event)
+  return {
+    sortBy: (q.sort as string) || 'newest',
+    trimmed: ((q.search as string) || '').trim(),
+  }
+}
 
-  const junctionRows = await db.query.issueTags.findMany({
-    where: eq(issueTags.tagId, tag.id),
+// The ids of every node (issue or solution) carrying a tag.
+async function taggedNodeIds(tagId: number) {
+  const rows = await useDB().query.issueTags.findMany({
+    where: eq(issueTags.tagId, tagId),
     columns: { issueId: true },
   })
-  const issueIds = junctionRows.map((r) => r.issueId)
-  if (issueIds.length === 0) return { tag: tagInfo, nodes: [], caseStudies: [] }
+  return rows.map((r) => r.issueId)
+}
 
-  // Issues + solutions carrying the tag.
-  const conditions = [
-    inArray(issues.id, issueIds),
+// Issues + solutions carrying the tag, in the caller's sort order. Filters
+// (approved, non-spam) match `/api/tags` so the counts stay in sync.
+async function tagIssueNodes(nodeIds: number[], trimmed: string, sortBy: string) {
+  if (nodeIds.length === 0) return []
+  const where = [
+    inArray(issues.id, nodeIds),
     eq(issues.status, 'approved'),
     ne(issues.isSpam, true),
   ]
-  if (trimmed) {
-    conditions.push(sql`search_vector @@ plainto_tsquery('english', ${trimmed})`)
-  }
-  const nodes = await listIssueNodes(conditions, sortBy, 'newest')
+  if (trimmed) where.push(sql`search_vector @@ plainto_tsquery('english', ${trimmed})`)
+  return listIssueNodes(where, sortBy, 'newest')
+}
+
+function caseStudyOrder(sortBy: string) {
+  if (sortBy === 'oldest') return [asc(caseStudies.createdAt)]
+  if (sortBy === 'newest') return [desc(caseStudies.createdAt)]
+  return [desc(caseStudies.verified), desc(caseStudies.createdAt)]
+}
 
-  // Case studies attached to any tagged solution. `solution_id` only ever
-  // points at a solution row, so intersecting with the tagged id set keeps
-  // studies whose parent solution carries the tag.
-  const csConditions = [
-    inArray(caseStudies.solutionId, issueIds),
+// Case studies carry no tags of their own, so we surface them transitively: any
+// study attached to a solution that carries the tag. `solution_id` only ever
+// points at a solution row, so intersecting with the tagged id set keeps
+// studies whose parent solution carries the tag.
+async function tagCaseStudies(nodeIds: number[], trimmed: string, sortBy: string) {
+  if (nodeIds.length === 0) return []
+  const where = [
+    inArray(caseStudies.solutionId, nodeIds),
     eq(caseStudies.status, 'approved'),
     ne(caseStudies.isSpam, true),
   ]
-  if (trimmed) {
-    csConditions.push(sql`search_vector @@ plainto_tsquery('english', ${trimmed})`)
-  }
-  const csOrder =
-    sortBy === 'oldest'
-      ? [asc(caseStudies.createdAt)]
-      : sortBy === 'newest'
-        ? [desc(caseStudies.createdAt)]
-        : [desc(caseStudies.verified), desc(caseStudies.createdAt)]
-  const csRows = await db.query.caseStudies.findMany({
-    where: and(...csConditions),
+  if (trimmed) where.push(sql`search_vector @@ plainto_tsquery('english', ${trimmed})`)
+  const rows = await useDB().query.caseStudies.findMany({
+    where: and(...where),
     with: {
       author: { columns: { name: true } },
       solution: { columns: { title: true, summary: true } },
     },
-    orderBy: csOrder,
+    orderBy: caseStudyOrder(sortBy),
   })
-  const studies = await withMembers('case_study', csRows.map(transformCaseStudy))
+  return withMembers('case_study', rows.map(transformCaseStudy))
+}
+
+// Every node related to a tag, of any kind: the tagged issues (top-level or
+// sub-issue) and solutions, plus the case studies of any tagged solution.
+export default defineEventHandler(async (event) => {
+  const slug = getRouterParam(event, 'slug')
+  if (!slug) throw createError({ statusCode: 400, statusMessage: 'Missing tag slug' })
+
+  const { sortBy, trimmed } = listParams(event)
+
+  const tag = await useDB().query.tags.findFirst({ where: eq(tagsTable.slug, slug) })
+  if (!tag) return { tag: null, nodes: [], caseStudies: [] }
+
+  const nodeIds = await taggedNodeIds(tag.id)
+  const [nodes, studies] = await Promise.all([
+    tagIssueNodes(nodeIds, trimmed, sortBy),
+    tagCaseStudies(nodeIds, trimmed, sortBy),
+  ])
 
-  return { tag: tagInfo, nodes, caseStudies: studies }
+  return { tag: { id: tag.id, slug: tag.slug, name: tag.name }, nodes, caseStudies: studies }
 })