From 11a16a663a53148b9c895c78b8660ff8182ed7e5 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Tue, 2 Jun 2026 12:01:12 +0200
Subject: [PATCH 1/5] feat: add topic page

---
 pages/topics/[id].vue | 185 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 185 insertions(+)
 create mode 100644 pages/topics/[id].vue

diff --git a/pages/topics/[id].vue b/pages/topics/[id].vue
new file mode 100644
index 000000000..65cd5698a
--- /dev/null
+++ b/pages/topics/[id].vue
@@ -0,0 +1,185 @@
+<template>
+  <div>
+    <div class="container">
+      <Breadcrumb
+        v-if="topic"
+        class="mt-4 md:mb-0"
+      >
+        <BreadcrumbItem to="/">
+          {{ $t('Accueil') }}
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          {{ topic.name }}
+        </BreadcrumbItem>
+      </Breadcrumb>
+    </div>
+
+    <LoadingBlock
+      v-if="topic"
+      v-slot="{ data: topic }"
+      :status
+      :data="topic"
+    >
+      <div class="container py-10 min-h-32 space-y-8">
+        <header class="space-y-3">
+          <div
+            v-if="topic.organization"
+            class="flex gap-2 items-center"
+          >
+            <div class="bg-white p-1 rounded-xs border border-gray-default object-contain">
+              <OrganizationLogo
+                :organization="topic.organization"
+                size-class="size-8"
+              />
+            </div>
+            <CdataLink
+              class="link block"
+              :to="topic.organization.page"
+            >
+              <OrganizationNameWithCertificate
+                :organization="topic.organization"
+                as="h2"
+              />
+            </CdataLink>
+          </div>
+          <div
+            v-else-if="topic.owner"
+            class="flex gap-2 items-center"
+          >
+            <Avatar
+              :user="topic.owner"
+              :size="24"
+              :rounded="true"
+            />
+            <CdataLink
+              class="link block"
+              :to="topic.owner.page"
+            >
+              {{ topic.owner.first_name }} {{ topic.owner.last_name }}
+            </CdataLink>
+          </div>
+
+          <h1 class="text-2xl font-extrabold text-gray-title mb-0">
+            {{ topic.name }}
+          </h1>
+
+          <p class="text-sm text-gray-medium m-0">
+            {{ $t('Mis à jour {date}', { date: formatDate(topic.last_modified) }) }}
+          </p>
+
+          <div
+            v-if="topic.tags.length"
+            class="flex flex-wrap gap-0.5"
+          >
+            <span
+              v-for="tag in topic.tags"
+              :key="tag"
+              class="text-xs px-2 py-1 rounded-xl bg-gray-default"
+            >
+              {{ tag }}
+            </span>
+          </div>
+        </header>
+
+        <MarkdownViewer
+          v-if="topic.description"
+          class="w-full min-w-0"
+          :content="topic.description"
+          :min-heading="3"
+        />
+
+        <section v-if="datasets && datasets.total">
+          <h2 class="uppercase text-sm mb-2.5">
+            {{ $t('aucun jeu de données associé | {n} jeu de données associé | {n} jeux de données associés', { n: datasets.total }) }}
+          </h2>
+          <div
+            class="grid gap-5"
+            :class="{ 'lg:grid-cols-2': datasets.total > 1 }"
+          >
+            <DatasetCardLg
+              v-for="dataset in datasets.data"
+              :key="dataset.id"
+              :dataset="dataset"
+              :show-description="datasets.total === 1"
+              class="m-0 min-w-0"
+            />
+          </div>
+          <Pagination
+            class="mt-4"
+            :page="datasetsPage"
+            :page-size="datasetsPageSize"
+            :total-results="datasets.total"
+            @change="(changedPage: number) => datasetsPage = changedPage"
+          />
+        </section>
+
+        <section v-if="reuses && reuses.total">
+          <h2 class="uppercase text-sm mb-2.5">
+            {{ $t('aucune réutilisation associée | {n} réutilisation associée | {n} réutilisations associées', { n: reuses.total }) }}
+          </h2>
+          <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            <ReuseCard
+              v-for="reuse in reuses.data"
+              :key="reuse.id"
+              class="min-w-0"
+              :reuse="reuse"
+            />
+          </div>
+          <Pagination
+            class="mt-4"
+            :page="reusesPage"
+            :page-size="reusesPageSize"
+            :total-results="reuses.total"
+            @change="(changedPage: number) => reusesPage = changedPage"
+          />
+        </section>
+      </div>
+    </LoadingBlock>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Avatar, getDescriptionShort, LoadingBlock, MarkdownViewer, OrganizationLogo, OrganizationNameWithCertificate, Pagination, useFormatDate, type DatasetV2, type Reuse, type TopicV2 } from '@datagouv/components-next'
+import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
+import ReuseCard from '~/components/Reuses/ReuseCard.vue'
+import type { PaginatedArray } from '~/types/types'
+
+const route = useRoute()
+const config = useRuntimeConfig()
+
+const { formatDate } = useFormatDate()
+
+const url = computed(() => `/api/2/topics/${route.params.id}/`)
+const { data: topic, status } = await useAPI<TopicV2>(url, { redirectOn404: true, redirectOnSlug: 'id' })
+
+const datasetsPage = ref(1)
+const datasetsPageSize = ref(10)
+const datasetsQuery = computed(() => ({
+  page: datasetsPage.value,
+  page_size: datasetsPageSize.value,
+  // Filter by the topic id: the datasets endpoint rejects the slug, and route.params.id
+  // is replaced by the slug after redirectOnSlug.
+  topic: topic.value?.id,
+}))
+const { data: datasets } = await useAPI<PaginatedArray<DatasetV2>>('/api/2/datasets/', { query: datasetsQuery })
+
+const reusesPage = ref(1)
+const reusesPageSize = ref(9)
+const reusesQuery = computed(() => ({
+  page: reusesPage.value,
+  page_size: reusesPageSize.value,
+  topic: topic.value?.id,
+}))
+const { data: reuses } = await useAPI<PaginatedArray<Reuse>>('/api/2/reuses/search/', {
+  headers: { 'X-Fields': reusesXFields },
+  query: reusesQuery,
+})
+
+const title = computed(() => `${topic.value?.name} | ${config.public.title}`)
+const description = computed(() => topic.value ? getDescriptionShort(topic.value) : '')
+
+useSeoMeta({
+  title,
+  description,
+})
+</script>

From 5d74167ffd48cf3c764170156300a87e6361a534 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Tue, 2 Jun 2026 12:51:20 +0200
Subject: [PATCH 2/5] add discussions to topics page

---
 components/Buttons/EditButton.vue |   3 +-
 pages/topics/[id].vue             | 125 ++++++++++--------------------
 pages/topics/[id]/discussions.vue |  16 ++++
 pages/topics/[id]/index.vue       |  87 +++++++++++++++++++++
 types/discussions.ts              |   4 +-
 utils/discussions.ts              |   8 ++
 6 files changed, 156 insertions(+), 87 deletions(-)
 create mode 100644 pages/topics/[id]/discussions.vue
 create mode 100644 pages/topics/[id]/index.vue

diff --git a/components/Buttons/EditButton.vue b/components/Buttons/EditButton.vue
index 201f9bdd2..45d4ad751 100644
--- a/components/Buttons/EditButton.vue
+++ b/components/Buttons/EditButton.vue
@@ -14,7 +14,7 @@ import { BrandedButton, throwOnNever } from '@datagouv/components-next'
 import { RiEdit2Line } from '@remixicon/vue'
 
 const props = defineProps<{
-  type: 'organizations' | 'users' | 'posts' | 'reuses' | 'dataservices' | 'datasets'
+  type: 'organizations' | 'users' | 'posts' | 'reuses' | 'dataservices' | 'datasets' | 'topics'
   id: string
 }>()
 
@@ -31,6 +31,7 @@ const link = computed(() => {
     case 'reuses':
     case 'dataservices':
     case 'datasets':
+    case 'topics':
       return base
     default:
       return throwOnNever(props.type as never, t('Aucun autre type défini'))
diff --git a/pages/topics/[id].vue b/pages/topics/[id].vue
index 65cd5698a..8bcaeb654 100644
--- a/pages/topics/[id].vue
+++ b/pages/topics/[id].vue
@@ -1,17 +1,24 @@
 <template>
   <div>
     <div class="container">
-      <Breadcrumb
+      <div
         v-if="topic"
-        class="mt-4 md:mb-0"
+        class="mt-4 flex gap-4 flex-wrap md:flex-nowrap items-center justify-between"
       >
-        <BreadcrumbItem to="/">
-          {{ $t('Accueil') }}
-        </BreadcrumbItem>
-        <BreadcrumbItem>
-          {{ topic.name }}
-        </BreadcrumbItem>
-      </Breadcrumb>
+        <Breadcrumb class="md:my-0">
+          <BreadcrumbItem to="/">
+            {{ $t('Accueil') }}
+          </BreadcrumbItem>
+          <BreadcrumbItem>
+            {{ topic.name }}
+          </BreadcrumbItem>
+        </Breadcrumb>
+        <EditButton
+          v-if="isMeAdmin()"
+          :id="topic.id"
+          type="topics"
+        />
+      </div>
     </div>
 
     <LoadingBlock
@@ -20,7 +27,7 @@
       :status
       :data="topic"
     >
-      <div class="container py-10 min-h-32 space-y-8">
+      <div class="container py-10 min-h-32">
         <header class="space-y-3">
           <div
             v-if="topic.organization"
@@ -80,70 +87,38 @@
             </span>
           </div>
         </header>
+      </div>
 
-        <MarkdownViewer
-          v-if="topic.description"
-          class="w-full min-w-0"
-          :content="topic.description"
-          :min-heading="3"
+      <FullPageTabs
+        :links="[
+          { label: $t('Description'), href: `/topics/${route.params.id}` },
+          { label: $t('Discussions'), href: `/topics/${route.params.id}/discussions`, count: discussionsCount },
+        ]"
+      />
+      <div
+        id="page"
+        class="bg-white pt-5 pb-8"
+      >
+        <NuxtPage
+          class="container"
+          :topic
         />
-
-        <section v-if="datasets && datasets.total">
-          <h2 class="uppercase text-sm mb-2.5">
-            {{ $t('aucun jeu de données associé | {n} jeu de données associé | {n} jeux de données associés', { n: datasets.total }) }}
-          </h2>
-          <div
-            class="grid gap-5"
-            :class="{ 'lg:grid-cols-2': datasets.total > 1 }"
-          >
-            <DatasetCardLg
-              v-for="dataset in datasets.data"
-              :key="dataset.id"
-              :dataset="dataset"
-              :show-description="datasets.total === 1"
-              class="m-0 min-w-0"
-            />
-          </div>
-          <Pagination
-            class="mt-4"
-            :page="datasetsPage"
-            :page-size="datasetsPageSize"
-            :total-results="datasets.total"
-            @change="(changedPage: number) => datasetsPage = changedPage"
-          />
-        </section>
-
-        <section v-if="reuses && reuses.total">
-          <h2 class="uppercase text-sm mb-2.5">
-            {{ $t('aucune réutilisation associée | {n} réutilisation associée | {n} réutilisations associées', { n: reuses.total }) }}
-          </h2>
-          <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-            <ReuseCard
-              v-for="reuse in reuses.data"
-              :key="reuse.id"
-              class="min-w-0"
-              :reuse="reuse"
-            />
-          </div>
-          <Pagination
-            class="mt-4"
-            :page="reusesPage"
-            :page-size="reusesPageSize"
-            :total-results="reuses.total"
-            @change="(changedPage: number) => reusesPage = changedPage"
-          />
-        </section>
       </div>
     </LoadingBlock>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Avatar, getDescriptionShort, LoadingBlock, MarkdownViewer, OrganizationLogo, OrganizationNameWithCertificate, Pagination, useFormatDate, type DatasetV2, type Reuse, type TopicV2 } from '@datagouv/components-next'
+import { Avatar, getDescriptionShort, LoadingBlock, OrganizationLogo, OrganizationNameWithCertificate, useFormatDate, type TopicV2 } from '@datagouv/components-next'
 import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
-import ReuseCard from '~/components/Reuses/ReuseCard.vue'
+import EditButton from '~/components/Buttons/EditButton.vue'
+import type { Thread } from '~/types/discussions'
 import type { PaginatedArray } from '~/types/types'
 
+definePageMeta({
+  keepScroll: true,
+})
+
 const route = useRoute()
 const config = useRuntimeConfig()
 
@@ -152,28 +127,10 @@ const { formatDate } = useFormatDate()
 const url = computed(() => `/api/2/topics/${route.params.id}/`)
 const { data: topic, status } = await useAPI<TopicV2>(url, { redirectOn404: true, redirectOnSlug: 'id' })
 
-const datasetsPage = ref(1)
-const datasetsPageSize = ref(10)
-const datasetsQuery = computed(() => ({
-  page: datasetsPage.value,
-  page_size: datasetsPageSize.value,
-  // Filter by the topic id: the datasets endpoint rejects the slug, and route.params.id
-  // is replaced by the slug after redirectOnSlug.
-  topic: topic.value?.id,
-}))
-const { data: datasets } = await useAPI<PaginatedArray<DatasetV2>>('/api/2/datasets/', { query: datasetsQuery })
-
-const reusesPage = ref(1)
-const reusesPageSize = ref(9)
-const reusesQuery = computed(() => ({
-  page: reusesPage.value,
-  page_size: reusesPageSize.value,
-  topic: topic.value?.id,
-}))
-const { data: reuses } = await useAPI<PaginatedArray<Reuse>>('/api/2/reuses/search/', {
-  headers: { 'X-Fields': reusesXFields },
-  query: reusesQuery,
+const { data: discussions } = await useAPI<PaginatedArray<Thread>>('/api/1/discussions/', {
+  query: { for: topic.value?.id, page_size: 1 },
 })
+const discussionsCount = computed(() => discussions.value?.total ?? 0)
 
 const title = computed(() => `${topic.value?.name} | ${config.public.title}`)
 const description = computed(() => topic.value ? getDescriptionShort(topic.value) : '')
diff --git a/pages/topics/[id]/discussions.vue b/pages/topics/[id]/discussions.vue
new file mode 100644
index 000000000..64ee949e2
--- /dev/null
+++ b/pages/topics/[id]/discussions.vue
@@ -0,0 +1,16 @@
+<template>
+  <DiscussionsList
+    :subject="topic"
+    type="Topic"
+  />
+</template>
+
+<script setup lang="ts">
+import type { TopicV2 } from '@datagouv/components-next'
+
+defineProps<{
+  topic: TopicV2
+}>()
+
+useSeoMeta({ robots: 'noindex' })
+</script>
diff --git a/pages/topics/[id]/index.vue b/pages/topics/[id]/index.vue
new file mode 100644
index 000000000..5041f1d0b
--- /dev/null
+++ b/pages/topics/[id]/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="space-y-8">
+    <MarkdownViewer
+      v-if="topic.description"
+      class="w-full min-w-0"
+      :content="topic.description"
+      :min-heading="3"
+    />
+
+    <section v-if="datasets && datasets.total">
+      <h2 class="uppercase text-sm mb-2.5">
+        {{ $t('aucun jeu de données associé | {n} jeu de données associé | {n} jeux de données associés', { n: datasets.total }) }}
+      </h2>
+      <div
+        class="grid gap-5"
+        :class="{ 'lg:grid-cols-2': datasets.total > 1 }"
+      >
+        <DatasetCardLg
+          v-for="dataset in datasets.data"
+          :key="dataset.id"
+          :dataset="dataset"
+          :show-description="datasets.total === 1"
+          class="m-0 min-w-0"
+        />
+      </div>
+      <Pagination
+        class="mt-4"
+        :page="datasetsPage"
+        :page-size="datasetsPageSize"
+        :total-results="datasets.total"
+        @change="(changedPage: number) => datasetsPage = changedPage"
+      />
+    </section>
+
+    <section v-if="reuses && reuses.total">
+      <h2 class="uppercase text-sm mb-2.5">
+        {{ $t('aucune réutilisation associée | {n} réutilisation associée | {n} réutilisations associées', { n: reuses.total }) }}
+      </h2>
+      <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <ReuseCard
+          v-for="reuse in reuses.data"
+          :key="reuse.id"
+          class="min-w-0"
+          :reuse="reuse"
+        />
+      </div>
+      <Pagination
+        class="mt-4"
+        :page="reusesPage"
+        :page-size="reusesPageSize"
+        :total-results="reuses.total"
+        @change="(changedPage: number) => reusesPage = changedPage"
+      />
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MarkdownViewer, Pagination, type DatasetV2, type Reuse, type TopicV2 } from '@datagouv/components-next'
+import ReuseCard from '~/components/Reuses/ReuseCard.vue'
+import type { PaginatedArray } from '~/types/types'
+
+const props = defineProps<{
+  topic: TopicV2
+}>()
+
+const datasetsPage = ref(1)
+const datasetsPageSize = ref(10)
+const datasetsQuery = computed(() => ({
+  page: datasetsPage.value,
+  page_size: datasetsPageSize.value,
+  topic: props.topic.id,
+}))
+const { data: datasets } = await useAPI<PaginatedArray<DatasetV2>>('/api/2/datasets/', { query: datasetsQuery })
+
+const reusesPage = ref(1)
+const reusesPageSize = ref(9)
+const reusesQuery = computed(() => ({
+  page: reusesPage.value,
+  page_size: reusesPageSize.value,
+  topic: props.topic.id,
+}))
+const { data: reuses } = await useAPI<PaginatedArray<Reuse>>('/api/2/reuses/search/', {
+  headers: { 'X-Fields': reusesXFields },
+  query: reusesQuery,
+})
+</script>
diff --git a/types/discussions.ts b/types/discussions.ts
index b3899d4ad..17efcad20 100644
--- a/types/discussions.ts
+++ b/types/discussions.ts
@@ -1,4 +1,4 @@
-import type { Dataservice, DatasetV2, OrganizationReference, Reuse, UserReference } from '@datagouv/components-next'
+import type { Dataservice, DatasetV2, OrganizationReference, Reuse, TopicV2, UserReference } from '@datagouv/components-next'
 import type { Post } from './posts'
 
 export type DiscussionSortedBy = 'title' | 'created' | 'closed'
@@ -12,7 +12,7 @@ export type Subject = {
   class: string
 }
 
-export type DiscussionSubjectTypes = Dataservice | DatasetV2 | Reuse | Post
+export type DiscussionSubjectTypes = Dataservice | DatasetV2 | Reuse | Post | TopicV2
 
 export type DiscussionSubject = {
   class: 'Dataservice' | 'Dataset' | 'Reuse' | 'Post' | 'Topic' | 'Organization'
diff --git a/utils/discussions.ts b/utils/discussions.ts
index 2d881c90b..b077106f7 100644
--- a/utils/discussions.ts
+++ b/utils/discussions.ts
@@ -23,6 +23,10 @@ export function getSubjectTitle(subject: DiscussionSubjectTypes) {
   if ('title' in subject) {
     return subject.title
   }
+  // Topics use `name` instead of `title`.
+  if ('name' in subject) {
+    return subject.name
+  }
 
   return throwOnNever(subject as never, `Unknown type ${subject}`)
 };
@@ -31,6 +35,10 @@ export function getSubjectPage(subject: DiscussionSubjectTypes) {
   if (subject === null) {
     return ''
   }
+  // Topics expose their front URL through `page` like other subjects.
+  if ('elements' in subject) {
+    return subject.page
+  }
   if ('page' in subject) {
     return subject.page
   }

From 83236d38d54e540b329870bdb00f9983710c8d6e Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Tue, 2 Jun 2026 13:01:38 +0200
Subject: [PATCH 3/5] remove comments

---
 utils/discussions.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/utils/discussions.ts b/utils/discussions.ts
index b077106f7..e120b0e5b 100644
--- a/utils/discussions.ts
+++ b/utils/discussions.ts
@@ -23,7 +23,6 @@ export function getSubjectTitle(subject: DiscussionSubjectTypes) {
   if ('title' in subject) {
     return subject.title
   }
-  // Topics use `name` instead of `title`.
   if ('name' in subject) {
     return subject.name
   }
@@ -35,7 +34,6 @@ export function getSubjectPage(subject: DiscussionSubjectTypes) {
   if (subject === null) {
     return ''
   }
-  // Topics expose their front URL through `page` like other subjects.
   if ('elements' in subject) {
     return subject.page
   }

From 03eefd32d46a7a9f9283ad52041350bd7c698e82 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Wed, 3 Jun 2026 08:57:17 +0200
Subject: [PATCH 4/5] add comment

---
 utils/discussions.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/utils/discussions.ts b/utils/discussions.ts
index e120b0e5b..432b0717c 100644
--- a/utils/discussions.ts
+++ b/utils/discussions.ts
@@ -34,6 +34,10 @@ export function getSubjectPage(subject: DiscussionSubjectTypes) {
   if (subject === null) {
     return ''
   }
+  // TODO: remove once udata#3765 is merged. Until then the topic API doesn't
+  // return `page`, so the `'page' in subject` check below fails at runtime and
+  // we'd hit throwOnNever. Matching on `elements` (always present on topics)
+  // avoids the crash while the field is missing.
   if ('elements' in subject) {
     return subject.page
   }

From 15216c641a223791ab59f2c583487613bcddbef2 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Wed, 3 Jun 2026 09:05:21 +0200
Subject: [PATCH 5/5] add comment

---
 pages/topics/[id]/index.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/pages/topics/[id]/index.vue b/pages/topics/[id]/index.vue
index 5041f1d0b..e4c4d47c6 100644
--- a/pages/topics/[id]/index.vue
+++ b/pages/topics/[id]/index.vue
@@ -80,6 +80,12 @@ const reusesQuery = computed(() => ({
   page_size: reusesPageSize.value,
   topic: props.topic.id,
 }))
+// We use the search endpoint for reuses because there is no v2 reuses index
+// filtered by topic yet. Once udata#3800 is merged we can switch to the faster
+// v2 index, like we already do for datasets above.
+// If we ever need the TopicElement data (title/description/extras attached to
+// the element), we could instead query /api/2/topics/{id}/elements/ for both
+// datasets and reuses.
 const { data: reuses } = await useAPI<PaginatedArray<Reuse>>('/api/2/reuses/search/', {
   headers: { 'X-Fields': reusesXFields },
   query: reusesQuery,