From bf2c9ae4fbc0513153c3959e3dbc10fc1b77e3ff Mon Sep 17 00:00:00 2001
From: gilles <gillesalbert99@gmail.com>
Date: Tue, 22 Sep 2026 10:22:10 +0200
Subject: [PATCH] feat(ui): afficher les tags dans la liste des cartes

---
 src/components/card-list.test.tsx | 10 +++++++++-
 src/components/card-list.tsx      | 18 +++++++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/components/card-list.test.tsx b/src/components/card-list.test.tsx
index 02178a4..46907c7 100644
--- a/src/components/card-list.test.tsx
+++ b/src/components/card-list.test.tsx
@@ -27,7 +27,7 @@ const CARDS = [
     question: 'Cest quoi un commit ?',
     response: 'Un snapshot du projet',
     theme: 'git',
-    tags: [],
+    tags: ['commit', 'repo'],
     createdAt: new Date('2026-01-01T08:00:00Z'),
     updatedAt: new Date('2026-01-01T08:00:00Z'),
   },
@@ -68,6 +68,14 @@ it('affiche le thème de chaque carte', async () => {
   expect(within(item as HTMLElement).getByText('git')).toBeInTheDocument()
 })
 
+it('affiche les tags de chaque carte', async () => {
+  vi.mocked(cardsApi.list).mockResolvedValue(CARDS)
+  render(<CardList />)
+  const item = (await screen.findByText('Cest quoi un commit ?')).closest('li')
+  expect(within(item as HTMLElement).getByText('#commit')).toBeInTheDocument()
+  expect(within(item as HTMLElement).getByText('#repo')).toBeInTheDocument()
+})
+
 it('affiche un message si aucune carte', async () => {
   vi.mocked(cardsApi.list).mockResolvedValue([])
   render(<CardList />)
diff --git a/src/components/card-list.tsx b/src/components/card-list.tsx
index 575b6e9..1ed1337 100644
--- a/src/components/card-list.tsx
+++ b/src/components/card-list.tsx
@@ -8,6 +8,7 @@ interface ListedCard {
   id: string
   question: string
   theme: string
+  tags: string[]
 }
 
 export function CardList() {
@@ -25,6 +26,7 @@ export function CardList() {
               id: card.id,
               question: card.question,
               theme: card.theme,
+              tags: card.tags,
             })),
           )
         }
@@ -62,7 +64,21 @@ export function CardList() {
             href={`/cards/${card.id}`}
             className="flex items-center justify-between px-4 py-3 hover:bg-slate-50"
           >
-            <span className="font-medium">{card.question}</span>
+            <span className="flex flex-col gap-1">
+              <span className="font-medium">{card.question}</span>
+              {card.tags.length > 0 && (
+                <span className="flex flex-wrap gap-1.5">
+                  {card.tags.map((tag) => (
+                    <span
+                      key={tag}
+                      className="rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-600"
+                    >
+                      #{tag}
+                    </span>
+                  ))}
+                </span>
+              )}
+            </span>
             <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-600">
               {card.theme}
             </span>