From d863bf25fce1e3b1ce3dcfbec5cbb71933575697 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Fri, 13 Feb 2026 13:25:13 +0100
Subject: [PATCH 01/14] feat: supabase + api + pinia

---
 app/assets/css/main.css          |  11 +-
 app/components/SearchItem.vue    |  92 +++++++++++-
 app/pages/[id].vue               |  14 ++
 app/stores/entites.store.ts      | 134 ++++++++++++++++++
 app/types/database.types.ts      |  18 +++
 nuxt.config.ts                   |   7 +
 package-lock.json                | 231 ++++++++++++++++++++++++++++++-
 package.json                     |   2 +
 server/api/entites/[id].get.ts   |  24 ++++
 server/api/entites/index.get.ts  |  27 ++++
 server/api/entites/search.get.ts |  25 ++++
 tailwind.config.ts               |  31 +++--
 12 files changed, 593 insertions(+), 23 deletions(-)
 create mode 100644 app/pages/[id].vue
 create mode 100644 app/stores/entites.store.ts
 create mode 100644 app/types/database.types.ts
 create mode 100644 server/api/entites/[id].get.ts
 create mode 100644 server/api/entites/index.get.ts
 create mode 100644 server/api/entites/search.get.ts

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 253a174..8993501 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -13,10 +13,13 @@ body {
 @layer base {
   :root {
     /* Couleurs */
-    --primary: 59 130 246;
-    --secondary: 139 92 246;
-    --accent: 236 72 153;
-    --depth: #dadada;
+    --ui-primary: var(--color-indigo-900);
+    --ui-secondary: var(--color-indigo-400);
+    --depth: var(--color-slate-200);
+    --ui-success: var(--color-indigo-900);
+    --ui-info: var(--ui-color-teal-500);
+    --ui-warning: var(--ui-color-rose-500);
+    --ui-error: var(--ui-color-red-700);
 
     /* Spacing */
     --spacing-sm: 0.5rem;
diff --git a/app/components/SearchItem.vue b/app/components/SearchItem.vue
index 13d02b2..5d47794 100644
--- a/app/components/SearchItem.vue
+++ b/app/components/SearchItem.vue
@@ -1,7 +1,91 @@
+<script setup lang="ts">
+  import { useEntitesStore } from '../stores/entites.store'
+  import { storeToRefs } from 'pinia'
+  const entitesStore = useEntitesStore()
+  const { typeFilter } = storeToRefs(entitesStore)
+
+  onMounted(() => {
+    entitesStore.loadEntites()
+  })
+
+  watch(typeFilter, () => {
+    entitesStore.loadEntites()
+  })
+
+  const formateLink = (id: string) => `/${id}`
+</script>
+
 <template>
-  <div class="p-20">
-    <p>La recherche</p>
+  <div class="p-8">
+    <h1 class="text-3xl font-bold mb-6">Encyclopédie</h1>
+
+    <div class="mb-6 space-y-4">
+      <input
+        v-model="entitesStore.searchValue"
+        type="text"
+        placeholder="Rechercher..."
+        class="border px-4 py-2 rounded w-full"
+      >
+
+      <div class="flex gap-2">
+        <UButton
+          :color="entitesStore.typeFilter === 'tous' ? 'primary' : 'secondary'"
+          class="text-white px-4 py-2 rounded"
+          @click="entitesStore.typeFilter = 'tous'"
+        >
+          Tous
+        </UButton>
+        <UButton
+          :color="entitesStore.typeFilter === 'personnage' ? 'primary' : 'secondary'"
+          class="text-white px-4 py-2 rounded"
+          @click="entitesStore.typeFilter = 'personnage'"
+        >
+          Personnages
+        </UButton>
+        <UButton
+          :color="entitesStore.typeFilter === 'lieu' ? 'primary' : 'secondary'"
+          class="text-white px-4 py-2 rounded"
+          @click="entitesStore.typeFilter = 'lieu'"
+        >
+          Lieux
+        </UButton>
+        <UButton
+          :color="entitesStore.typeFilter === 'creature' ? 'primary' : 'secondary'"
+          class="text-white px-4 py-2 rounded"
+          @click="entitesStore.typeFilter = 'creature'"
+        >
+          Créatures
+        </UButton>
+      </div>
+    </div>
+
+    <!-- Liste des entités -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <NuxtLink
+        v-for="entite in entitesStore.entitesFilter"
+        :key="entite.id"
+        :to="formateLink(entite.id)"
+        class="border rounded-lg p-4 hover:shadow-lg transition"
+      >
+        <div class="flex justify-between items-start mb-2">
+          <h3 class="font-bold text-lg">{{ entite.nom }}</h3>
+          <span class="text-xs bg-indigo-400 text-white px-2 py-1 rounded">
+            {{ entite.type }}
+          </span>
+        </div>
+
+        <p class="text-gray-600 text-sm mb-3">{{ entite.description }}</p>
+
+        <div class="flex flex-wrap gap-1">
+          <span
+            v-for="tag in entite.tags"
+            :key="tag"
+            class="text-xs bg-cyan-100 text-cyan-800 px-2 py-1 rounded"
+          >
+            {{ tag }}
+          </span>
+        </div>
+      </NuxtLink>
+    </div>
   </div>
 </template>
-
-<script setup lang="ts"></script>
diff --git a/app/pages/[id].vue b/app/pages/[id].vue
new file mode 100644
index 0000000..6184e8e
--- /dev/null
+++ b/app/pages/[id].vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <p>id: {{ idEntite }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // import { useEntitesStore } from '../stores/entites.store'
+  const route = useRoute()
+  const idEntite = ref<string>(route.params.id as string)
+  // const entitesStore = useEntitesStore()
+
+  // console.log(entitesStore.getEntiteById(idEntite))
+</script>
diff --git a/app/stores/entites.store.ts b/app/stores/entites.store.ts
new file mode 100644
index 0000000..a2c4f85
--- /dev/null
+++ b/app/stores/entites.store.ts
@@ -0,0 +1,134 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import type { Entite } from '~/types/database.types'
+
+export const useEntitesStore = defineStore('entites', () => {
+  const entites = ref<Entite[]>([])
+  const typeFilter = ref<'tous' | 'personnage' | 'lieu' | 'creature'>('tous')
+  const searchValue = ref('')
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  //TODO rework types and error types
+  const loadEntites = async () => {
+    loading.value = true
+    error.value = null
+
+    try {
+      const data = await $fetch<Entite[]>('/api/entites', {
+        params: typeFilter.value !== 'tous' ? { type: typeFilter.value } : {},
+      })
+
+      entites.value = data || []
+      //@ts-except-error
+    } catch (e) {
+      const err = e as Error
+      error.value = err.message
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // Récupérer une entité par ID
+  const getEntiteById = async (id: string) => {
+    try {
+      return await $fetch(`/api/entites/${id}`)
+    } catch (e) {
+      const err = e as Error
+      error.value = err.message
+      throw error
+    }
+  }
+
+  // Rechercher
+  const searchEntites = async (terme: string) => {
+    if (!terme) {
+      await loadEntites()
+      return
+    }
+
+    loading.value = true
+    error.value = null
+
+    try {
+      entites.value = await $fetch('/api/entites/search', {
+        params: { q: terme },
+      })
+    } catch (e) {
+      const err = e as Error
+      error.value = err.message
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // Entités filtrées par recherche locale
+  const entitesFilter = computed(() => {
+    if (!searchValue.value) return entites.value
+
+    return entites.value.filter((e) =>
+      e.nom.toLowerCase().includes(searchValue.value.toLowerCase())
+    )
+  })
+
+  // // Ajouter une entité
+  // const ajouterEntite = async (entite: Partial<Entite>) => {
+  //   try {
+  //     const nouvelleEntite = await $fetch('/api/entites', {
+  //       method: 'POST',
+  //       body: entite
+  //     })
+
+  //     await loadEntites() // Recharger la liste
+  //     return nouvelleEntite
+  //   } catch (e: any) {
+  //     error.value = e.message
+  //     throw e
+  //   }
+  // }
+
+  // // Mettre à jour
+  // const mettreAJourEntite = async (id: string, updates: Partial<Entite>) => {
+  //   try {
+  //     const entiteMaj = await $fetch(`/api/entites/${id}`, {
+  //       method: 'PATCH',
+  //       body: updates
+  //     })
+
+  //     await loadEntites() // Recharger la liste
+  //     return entiteMaj
+  //   } catch (e: any) {
+  //     error.value = e.message
+  //     throw e
+  //   }
+  // }
+
+  // // Supprimer
+  // const supprimerEntite = async (id: string) => {
+  //   try {
+  //     await $fetch(`/api/entites/${id}`, {
+  //       method: 'DELETE'
+  //     })
+
+  //     await loadEntites() // Recharger la liste
+  //   } catch (e: any) {
+  //     error.value = e.message
+  //     throw e
+  //   }
+  // }
+
+  return {
+    entites,
+    typeFilter,
+    searchValue,
+    loading,
+    error,
+    entitesFilter,
+    loadEntites,
+    getEntiteById,
+    searchEntites,
+    // ajouterEntite,
+    // mettreAJourEntite,
+    // supprimerEntite
+  }
+})
diff --git a/app/types/database.types.ts b/app/types/database.types.ts
new file mode 100644
index 0000000..42347fc
--- /dev/null
+++ b/app/types/database.types.ts
@@ -0,0 +1,18 @@
+export type EntiteType = 'personnage' | 'lieu' | 'creature'
+
+export type Entite = {
+  id: string
+  created_at: string
+  nom: string
+  type: EntiteType
+  description?: string
+  image_url?: string
+  tags?: string[]
+  espece?: string
+  vivant?: boolean
+  dangereux?: boolean
+  hostile?: boolean
+  tome?: string
+  relations?: string[]
+  lieu_id?: string
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 98c35a5..509f9d5 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -10,6 +10,8 @@ export default defineNuxtConfig({
     'nuxt-security',
     '@nuxt/ui',
     '@nuxt/fonts',
+    '@nuxtjs/supabase',
+    '@pinia/nuxt',
   ],
   vite: {
     server: {
@@ -41,6 +43,11 @@ export default defineNuxtConfig({
       branch: 'content',
     },
   },
+  supabase: {
+    redirect: false,
+    url: process.env.SUPABASE_URL,
+    key: process.env.SUPABASE_KEY,
+  },
   app: {
     head: {
       script:
diff --git a/package-lock.json b/package-lock.json
index bf20ff7..352d6ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,8 @@
         "@nuxt/fonts": "^0.13.0",
         "@nuxt/image": "^2.0.0",
         "@nuxt/ui": "^4.4.0",
+        "@nuxtjs/supabase": "^2.0.3",
+        "@pinia/nuxt": "^0.11.3",
         "better-sqlite3": "^12.6.2",
         "nuxt": "^4.3.0",
         "nuxt-security": "^2.5.1",
@@ -4016,6 +4018,18 @@
         "vfile": "^6.0.3"
       }
     },
+    "node_modules/@nuxtjs/supabase": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/supabase/-/supabase-2.0.3.tgz",
+      "integrity": "sha512-zfhuOqhbQUijMd5rXS9qzzuVqBMU00gcJyvxFuTBXdS9TAk/gboQZxxX7EQp6eAi5asvtJNM+mwBKqzQwtZi7g==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/ssr": "^0.8.0",
+        "@supabase/supabase-js": "^2.86.0",
+        "defu": "^6.1.4",
+        "pathe": "^2.0.3"
+      }
+    },
     "node_modules/@oxc-minify/binding-android-arm-eabi": {
       "version": "0.110.0",
       "resolved": "https://registry.npmjs.org/@oxc-minify/binding-android-arm-eabi/-/binding-android-arm-eabi-0.110.0.tgz",
@@ -5306,6 +5320,21 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@pinia/nuxt": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.11.3.tgz",
+      "integrity": "sha512-7WVNHpWx4qAEzOlnyrRC88kYrwnlR/PrThWT0XI1dSNyUAXu/KBv9oR37uCgYkZroqP5jn8DfzbkNF3BtKvE9w==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "pinia": "^3.0.4"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -6028,6 +6057,98 @@
         "eslint": ">=9.0.0"
       }
     },
+    "node_modules/@supabase/auth-js": {
+      "version": "2.95.3",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.95.3.tgz",
+      "integrity": "sha512-vD2YoS8E2iKIX0F7EwXTmqhUpaNsmbU6X2R0/NdFcs02oEfnHyNP/3M716f3wVJ2E5XHGiTFXki6lRckhJ0Thg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/functions-js": {
+      "version": "2.95.3",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.95.3.tgz",
+      "integrity": "sha512-uTuOAKzs9R/IovW1krO0ZbUHSJnsnyJElTXIRhjJTqymIVGcHzkAYnBCJqd7468Fs/Foz1BQ7Dv6DCl05lr7ig==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/postgrest-js": {
+      "version": "2.95.3",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.95.3.tgz",
+      "integrity": "sha512-LTrRBqU1gOovxRm1vRXPItSMPBmEFqrfTqdPTRtzOILV4jPSueFz6pES5hpb4LRlkFwCPRmv3nQJ5N625V2Xrg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/realtime-js": {
+      "version": "2.95.3",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.95.3.tgz",
+      "integrity": "sha512-D7EAtfU3w6BEUxDACjowWNJo/ZRo7sDIuhuOGKHIm9FHieGeoJV5R6GKTLtga/5l/6fDr2u+WcW/m8I9SYmaIw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/phoenix": "^1.6.6",
+        "@types/ws": "^8.18.1",
+        "tslib": "2.8.1",
+        "ws": "^8.18.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/ssr": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@supabase/ssr/-/ssr-0.8.0.tgz",
+      "integrity": "sha512-/PKk8kNFSs8QvvJ2vOww1mF5/c5W8y42duYtXvkOSe+yZKRgTTZywYG2l41pjhNomqESZCpZtXuWmYjFRMV+dw==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.2"
+      },
+      "peerDependencies": {
+        "@supabase/supabase-js": "^2.76.1"
+      }
+    },
+    "node_modules/@supabase/storage-js": {
+      "version": "2.95.3",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.95.3.tgz",
+      "integrity": "sha512-4GxkJiXI3HHWjxpC3sDx1BVrV87O0hfX+wvJdqGv67KeCu+g44SPnII8y0LL/Wr677jB7tpjAxKdtVWf+xhc9A==",
+      "license": "MIT",
+      "dependencies": {
+        "iceberg-js": "^0.8.1",
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/supabase-js": {
+      "version": "2.95.3",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.95.3.tgz",
+      "integrity": "sha512-Fukw1cUTQ6xdLiHDJhKKPu6svEPaCEDvThqCne3OaQyZvuq2qjhJAd91kJu3PXLG18aooCgYBaB6qQz35hhABg==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/auth-js": "2.95.3",
+        "@supabase/functions-js": "2.95.3",
+        "@supabase/postgrest-js": "2.95.3",
+        "@supabase/realtime-js": "2.95.3",
+        "@supabase/storage-js": "2.95.3"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.18",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
@@ -7046,7 +7167,6 @@
       "version": "25.0.10",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.0.10.tgz",
       "integrity": "sha512-zWW5KPngR/yvakJgGOmZ5vTBemDoSqF3AcV/LrO5u5wTWyEAVVh+IT39G4gtyAkh3CtTZs8aX/yRM82OfzHJRg==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~7.16.0"
@@ -7058,6 +7178,12 @@
       "integrity": "sha512-LriObC2+KYZD3FzCrgWGv/qufdUy4eXrxcLgQMfYXgPbLIecKIsVBaQgUPmxSSLcjmYbDTQbMgr6qr6l/eb7Bg==",
       "license": "MIT"
     },
+    "node_modules/@types/phoenix": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.7.tgz",
+      "integrity": "sha512-oN9ive//QSBkf19rfDv45M7eZPi0eEXylht2OLEXicu5b4KoQ1OzXIw+xDSGWxSxe1JmepRR/ZH283vsu518/Q==",
+      "license": "MIT"
+    },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -7076,6 +7202,15 @@
       "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
       "license": "MIT"
     },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.53.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.53.1.tgz",
@@ -9448,6 +9583,19 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/cookie-es": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-2.0.0.tgz",
@@ -12944,6 +13092,15 @@
         "url": "https://github.com/sponsors/typicode"
       }
     },
+    "node_modules/iceberg-js": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
+      "integrity": "sha512-1dhVQZXhcHje7798IVM+xoo/1ZdVfzOMIc8/rgVSijRK38EDqOJoGula9N/8ZI5RD8QTxNQtK/Gozpr+qUqRRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -15750,9 +15907,9 @@
       }
     },
     "node_modules/nanotar": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/nanotar/-/nanotar-0.2.0.tgz",
-      "integrity": "sha512-9ca1h0Xjvo9bEkE4UOxgAzLV0jHKe6LMaxo37ND2DAhhAtd0j8pR1Wxz+/goMrZO8AEZTWCmyaOsFI/W5AdpCQ==",
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/nanotar/-/nanotar-0.2.1.tgz",
+      "integrity": "sha512-MUrzzDUcIOPbv7ubhDV/L4CIfVTATd9XhDE2ixFeCrM5yp9AlzUpn91JrnN0HD6hksdxvz9IW9aKANz0Bta0GA==",
       "license": "MIT"
     },
     "node_modules/napi-build-utils": {
@@ -16838,6 +16995,71 @@
         "node": ">=6"
       }
     },
+    "node_modules/pinia": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
+      "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.5.0",
+        "vue": "^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-api": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.9.tgz",
+      "integrity": "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.9"
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-kit": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.9.tgz",
+      "integrity": "sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.9",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-shared": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz",
+      "integrity": "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
+    "node_modules/pinia/node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/pkg-types": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz",
@@ -19795,7 +20017,6 @@
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
       "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/unenv": {
diff --git a/package.json b/package.json
index 8763ed7..e819c36 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,8 @@
     "@nuxt/fonts": "^0.13.0",
     "@nuxt/image": "^2.0.0",
     "@nuxt/ui": "^4.4.0",
+    "@nuxtjs/supabase": "^2.0.3",
+    "@pinia/nuxt": "^0.11.3",
     "better-sqlite3": "^12.6.2",
     "nuxt": "^4.3.0",
     "nuxt-security": "^2.5.1",
diff --git a/server/api/entites/[id].get.ts b/server/api/entites/[id].get.ts
new file mode 100644
index 0000000..a9e0237
--- /dev/null
+++ b/server/api/entites/[id].get.ts
@@ -0,0 +1,24 @@
+import { serverSupabaseClient } from '#supabase/server'
+
+export default defineEventHandler(async (event) => {
+  const supabase = await serverSupabaseClient(event)
+  const id = getRouterParam(event, 'id')
+
+  if (!id) {
+    throw createError({
+      statusCode: 400,
+      message: 'ID manquant',
+    })
+  }
+
+  const { data, error } = await supabase.from('entites').select('*').eq('id', id).single()
+
+  if (error) {
+    throw createError({
+      statusCode: 404,
+      message: 'Entité non trouvée',
+    })
+  }
+
+  return data
+})
diff --git a/server/api/entites/index.get.ts b/server/api/entites/index.get.ts
new file mode 100644
index 0000000..2daa976
--- /dev/null
+++ b/server/api/entites/index.get.ts
@@ -0,0 +1,27 @@
+import { serverSupabaseClient } from '#supabase/server'
+
+export default defineEventHandler(async (event) => {
+  const supabase = await serverSupabaseClient(event)
+
+  // Récupérer les paramètres de query (?type=personnage)
+  const query = getQuery(event)
+  const type = query.type as string | undefined
+
+  let supabaseQuery = supabase.from('entites').select('*').order('created_at', { ascending: false })
+
+  // Filtrer par type si fourni
+  if (type && type !== 'tous') {
+    supabaseQuery = supabaseQuery.eq('type', type)
+  }
+
+  const { data, error } = await supabaseQuery
+
+  if (error) {
+    throw createError({
+      statusCode: 500,
+      message: error.message,
+    })
+  }
+
+  return data
+})
diff --git a/server/api/entites/search.get.ts b/server/api/entites/search.get.ts
new file mode 100644
index 0000000..36f71de
--- /dev/null
+++ b/server/api/entites/search.get.ts
@@ -0,0 +1,25 @@
+import { serverSupabaseClient } from '#supabase/server'
+
+export default defineEventHandler(async (event) => {
+  const supabase = await serverSupabaseClient(event)
+  const query = getQuery(event)
+  const searchTerm = query.q as string
+
+  if (!searchTerm) {
+    throw createError({
+      statusCode: 400,
+      message: 'Terme de recherche manquant',
+    })
+  }
+
+  const { data, error } = await supabase.from('entites').select('*').ilike('nom', `%${searchTerm}%`)
+
+  if (error) {
+    throw createError({
+      statusCode: 500,
+      message: error.message,
+    })
+  }
+
+  return data
+})
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 514adcc..6d66a74 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -4,18 +4,29 @@ export default <Partial<Config>>{
   theme: {
     extend: {
       colors: {
-        primary: 'rgb(var(--primary) / <alpha-value>)',
-        secondary: 'rgb(var(--secondary) / <alpha-value>)',
-        accent: 'rgb(var(--accent) / <alpha-value>)',
+        primary: {
+          50: '#f5f3ff',
+          100: '#ede9fe',
+          200: '#ddd6fe',
+          300: '#c4b5fd',
+          400: '#a78bfa',
+          500: '#624e88', // Votre couleur principale
+          600: '#7c3aed',
+          700: '#6d28d9',
+          800: '#5b21b6',
+          900: '#4c1d95',
+          950: '#2e1065',
+        },
+        secondary: {
+          500: '#7b7bf7',
+        },
+        accent: {
+          500: '#ff7444',
+        },
       },
       fontFamily: {
-        main: ['var(--font-main)'],
-        heading: ['var(--font-heading)'],
-      },
-      spacing: {
-        sm: 'var(--spacing-sm)',
-        md: 'var(--spacing-md)',
-        lg: 'var(--spacing-lg)',
+        main: ['Montserrat', 'sans-serif'],
+        heading: ['Birthstone Bounce', 'sans-serif'],
       },
     },
   },

From 9ea97abd09bdd60d65cf725ecb781a9a0b9d8caa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Fri, 13 Feb 2026 13:26:07 +0100
Subject: [PATCH 02/14] fix: type Entite

---
 app/stores/entites.store.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/stores/entites.store.ts b/app/stores/entites.store.ts
index a2c4f85..4873797 100644
--- a/app/stores/entites.store.ts
+++ b/app/stores/entites.store.ts
@@ -51,7 +51,7 @@ export const useEntitesStore = defineStore('entites', () => {
     error.value = null
 
     try {
-      entites.value = await $fetch('/api/entites/search', {
+      entites.value = await $fetch<Entite[]>('/api/entites/search', {
         params: { q: terme },
       })
     } catch (e) {

From 37f51df1a0ff346ac16e7c206902d0123806aef5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Fri, 13 Feb 2026 13:26:53 +0100
Subject: [PATCH 03/14] fix: types

---
 app/stores/entites.store.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/stores/entites.store.ts b/app/stores/entites.store.ts
index 4873797..aad2ef7 100644
--- a/app/stores/entites.store.ts
+++ b/app/stores/entites.store.ts
@@ -20,7 +20,6 @@ export const useEntitesStore = defineStore('entites', () => {
       })
 
       entites.value = data || []
-      //@ts-except-error
     } catch (e) {
       const err = e as Error
       error.value = err.message
@@ -29,10 +28,9 @@ export const useEntitesStore = defineStore('entites', () => {
     }
   }
 
-  // Récupérer une entité par ID
   const getEntiteById = async (id: string) => {
     try {
-      return await $fetch(`/api/entites/${id}`)
+      return await $fetch<Entite>(`/api/entites/${id}`)
     } catch (e) {
       const err = e as Error
       error.value = err.message
@@ -40,7 +38,6 @@ export const useEntitesStore = defineStore('entites', () => {
     }
   }
 
-  // Rechercher
   const searchEntites = async (terme: string) => {
     if (!terme) {
       await loadEntites()
@@ -62,7 +59,6 @@ export const useEntitesStore = defineStore('entites', () => {
     }
   }
 
-  // Entités filtrées par recherche locale
   const entitesFilter = computed(() => {
     if (!searchValue.value) return entites.value
 

From 6512cd73ffbe7a174c60eace91f5e84a2c37c57c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Fri, 13 Feb 2026 13:47:07 +0100
Subject: [PATCH 04/14] fix: prettier

---
 app/components/SearchItem.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/SearchItem.vue b/app/components/SearchItem.vue
index 5d47794..acd0208 100644
--- a/app/components/SearchItem.vue
+++ b/app/components/SearchItem.vue
@@ -59,7 +59,6 @@
       </div>
     </div>
 
-    <!-- Liste des entités -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
       <NuxtLink
         v-for="entite in entitesStore.entitesFilter"

From 11f3249fd8d04076f01ea189846657f8340a98c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Fri, 13 Feb 2026 18:08:08 +0100
Subject: [PATCH 05/14] fix: loading + error

---
 app/components/SearchItem.vue   | 67 ++++++++++++++++++++++++++-------
 app/stores/entites.store.ts     | 37 ++++++++++--------
 eslint.config.mjs               | 12 ++++++
 server/api/entites/index.get.ts |  3 +-
 4 files changed, 88 insertions(+), 31 deletions(-)

diff --git a/app/components/SearchItem.vue b/app/components/SearchItem.vue
index acd0208..f6fe393 100644
--- a/app/components/SearchItem.vue
+++ b/app/components/SearchItem.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
   import { useEntitesStore } from '../stores/entites.store'
   import { storeToRefs } from 'pinia'
+
   const entitesStore = useEntitesStore()
-  const { typeFilter } = storeToRefs(entitesStore)
+  const { typeFilter, entitesFilter, searchValue, isLoading, isError, errorMessage } =
+    storeToRefs(entitesStore)
 
   onMounted(() => {
     entitesStore.loadEntites()
@@ -13,55 +15,92 @@
   })
 
   const formateLink = (id: string) => `/${id}`
+
+  const hasNoResults = computed(() => {
+    return !isLoading.value && !isError.value && entitesFilter.value.length === 0
+  })
+
+  //TODO infinite scroll
 </script>
 
 <template>
-  <div class="p-8">
+  <div class="p-10 max-w-7xl mx-auto">
     <h1 class="text-3xl font-bold mb-6">Encyclopédie</h1>
 
     <div class="mb-6 space-y-4">
       <input
-        v-model="entitesStore.searchValue"
+        v-model="searchValue"
         type="text"
         placeholder="Rechercher..."
         class="border px-4 py-2 rounded w-full"
-      >
+      />
 
       <div class="flex gap-2">
         <UButton
-          :color="entitesStore.typeFilter === 'tous' ? 'primary' : 'secondary'"
+          :color="typeFilter === 'tous' ? 'primary' : 'secondary'"
           class="text-white px-4 py-2 rounded"
-          @click="entitesStore.typeFilter = 'tous'"
+          @click="typeFilter = 'tous'"
         >
           Tous
         </UButton>
         <UButton
-          :color="entitesStore.typeFilter === 'personnage' ? 'primary' : 'secondary'"
+          :color="typeFilter === 'personnage' ? 'primary' : 'secondary'"
           class="text-white px-4 py-2 rounded"
-          @click="entitesStore.typeFilter = 'personnage'"
+          @click="typeFilter = 'personnage'"
         >
           Personnages
         </UButton>
         <UButton
-          :color="entitesStore.typeFilter === 'lieu' ? 'primary' : 'secondary'"
+          :color="typeFilter === 'lieu' ? 'primary' : 'secondary'"
           class="text-white px-4 py-2 rounded"
-          @click="entitesStore.typeFilter = 'lieu'"
+          @click="typeFilter = 'lieu'"
         >
           Lieux
         </UButton>
         <UButton
-          :color="entitesStore.typeFilter === 'creature' ? 'primary' : 'secondary'"
+          :color="typeFilter === 'creature' ? 'primary' : 'secondary'"
           class="text-white px-4 py-2 rounded"
-          @click="entitesStore.typeFilter = 'creature'"
+          @click="typeFilter = 'creature'"
         >
           Créatures
         </UButton>
       </div>
     </div>
 
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+    <!-- Loading State -->
+    <div v-if="isLoading" class="flex flex-col items-center justify-center py-20">
+      <UIcon name="i-heroicons-arrow-path" class="w-12 h-12 animate-spin text-primary mb-4" />
+      <p class="text-gray-600">Chargement des entités...</p>
+    </div>
+
+    <!-- Error State -->
+    <div v-else-if="isError" class="border border-red-300 bg-red-50 rounded-lg p-4 mb-6">
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-exclamation-triangle" class="w-6 h-6 text-red-600 shrink-0" />
+        <div class="flex-1">
+          <h3 class="font-bold text-red-800">Erreur de chargement</h3>
+          <p class="text-red-700 text-sm mt-1">{{ errorMessage }}</p>
+        </div>
+        <button
+          class="bg-red-600 text-white px-3 py-1 rounded text-sm hover:bg-red-700"
+          @click="entitesStore.loadEntites()"
+        >
+          Réessayer
+        </button>
+      </div>
+    </div>
+
+    <!-- Empty State -->
+    <div v-else-if="hasNoResults" class="flex flex-col items-center justify-center py-20">
+      <UIcon name="i-heroicons-magnifying-glass" class="w-16 h-16 text-gray-400 mb-4" />
+      <h3 class="text-xl font-semibold text-gray-700 mb-2">Aucun résultat</h3>
+      <p class="text-gray-500">Aucune entité ne correspond à vos critères de recherche.</p>
+    </div>
+
+    <!-- Content -->
+    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
       <NuxtLink
-        v-for="entite in entitesStore.entitesFilter"
+        v-for="entite in entitesFilter"
         :key="entite.id"
         :to="formateLink(entite.id)"
         class="border rounded-lg p-4 hover:shadow-lg transition"
diff --git a/app/stores/entites.store.ts b/app/stores/entites.store.ts
index aad2ef7..3f9f8ac 100644
--- a/app/stores/entites.store.ts
+++ b/app/stores/entites.store.ts
@@ -5,14 +5,17 @@ import type { Entite } from '~/types/database.types'
 export const useEntitesStore = defineStore('entites', () => {
   const entites = ref<Entite[]>([])
   const typeFilter = ref<'tous' | 'personnage' | 'lieu' | 'creature'>('tous')
-  const searchValue = ref('')
-  const loading = ref(false)
-  const error = ref<string | null>(null)
+  const searchValue = ref<string>('')
+  const isLoading = ref(true)
+  const isError = ref(false)
+  const errorMessage = ref('')
 
   //TODO rework types and error types
+
   const loadEntites = async () => {
-    loading.value = true
-    error.value = null
+    isLoading.value = true
+    isError.value = false
+    errorMessage.value = ''
 
     try {
       const data = await $fetch<Entite[]>('/api/entites', {
@@ -22,9 +25,10 @@ export const useEntitesStore = defineStore('entites', () => {
       entites.value = data || []
     } catch (e) {
       const err = e as Error
-      error.value = err.message
+      isError.value = true
+      errorMessage.value = err.message || 'Une erreur est survenue'
     } finally {
-      loading.value = false
+      isLoading.value = false
     }
   }
 
@@ -33,8 +37,9 @@ export const useEntitesStore = defineStore('entites', () => {
       return await $fetch<Entite>(`/api/entites/${id}`)
     } catch (e) {
       const err = e as Error
-      error.value = err.message
-      throw error
+      isError.value = true
+      errorMessage.value = err.message
+      throw err
     }
   }
 
@@ -44,8 +49,8 @@ export const useEntitesStore = defineStore('entites', () => {
       return
     }
 
-    loading.value = true
-    error.value = null
+    isLoading.value = true
+    errorMessage.value = ''
 
     try {
       entites.value = await $fetch<Entite[]>('/api/entites/search', {
@@ -53,9 +58,10 @@ export const useEntitesStore = defineStore('entites', () => {
       })
     } catch (e) {
       const err = e as Error
-      error.value = err.message
+      isError.value = true
+      errorMessage.value = err.message
     } finally {
-      loading.value = false
+      isLoading.value = false
     }
   }
 
@@ -117,8 +123,9 @@ export const useEntitesStore = defineStore('entites', () => {
     entites,
     typeFilter,
     searchValue,
-    loading,
-    error,
+    isLoading,
+    isError,
+    errorMessage,
     entitesFilter,
     loadEntites,
     getEntiteById,
diff --git a/eslint.config.mjs b/eslint.config.mjs
index f963e40..a73f038 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -4,5 +4,17 @@ import withNuxt from './.nuxt/eslint.config.mjs'
 export default withNuxt({
   rules: {
     'no-console': ['error'],
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          void: 'always',
+          normal: 'always',
+          component: 'always',
+        },
+        svg: 'always',
+        math: 'always',
+      },
+    ],
   },
 })
diff --git a/server/api/entites/index.get.ts b/server/api/entites/index.get.ts
index 2daa976..ea404fb 100644
--- a/server/api/entites/index.get.ts
+++ b/server/api/entites/index.get.ts
@@ -3,13 +3,12 @@ import { serverSupabaseClient } from '#supabase/server'
 export default defineEventHandler(async (event) => {
   const supabase = await serverSupabaseClient(event)
 
-  // Récupérer les paramètres de query (?type=personnage)
+  //TODO pagination
   const query = getQuery(event)
   const type = query.type as string | undefined
 
   let supabaseQuery = supabase.from('entites').select('*').order('created_at', { ascending: false })
 
-  // Filtrer par type si fourni
   if (type && type !== 'tous') {
     supabaseQuery = supabaseQuery.eq('type', type)
   }

From 5950c62a3479408ad31220e55995e16c51196f8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Sun, 15 Feb 2026 15:55:20 +0100
Subject: [PATCH 06/14] feat: search

---
 app/components/HeroItem.vue   | 20 +++++++++++-
 app/components/SearchItem.vue | 59 ++++++++++++++++++++---------------
 app/pages/genealogie.vue      |  7 +++++
 app/stores/entites.store.ts   |  2 +-
 content.config.ts             |  1 +
 content/pages/home.json       |  5 +++
 6 files changed, 66 insertions(+), 28 deletions(-)
 create mode 100644 app/pages/genealogie.vue

diff --git a/app/components/HeroItem.vue b/app/components/HeroItem.vue
index 3f7e4b6..84e51ce 100644
--- a/app/components/HeroItem.vue
+++ b/app/components/HeroItem.vue
@@ -11,8 +11,9 @@
       <NuxtLink
         v-for="(feature, index) in data.features"
         :key="feature.title"
-        :to="`#${feature?.title.toLowerCase()}`"
+        :to="searchItem(feature?.search)"
         :class="getGridClass(index)"
+        @click="addTypeFilter(feature?.search)"
       >
         <div class="absolute inset-0">
           <NuxtImg
@@ -31,6 +32,10 @@
 </template>
 
 <script setup="ts">
+  import { useEntitesStore } from '../stores/entites.store'
+
+  const entitesStore = useEntitesStore()
+
   const { data } = await useAsyncData('home-hero', () => queryCollection('pages').first())
 
   const getGridClass = (index) => {
@@ -44,4 +49,17 @@
     }
     return `${baseClass} ${gridClasses[index] || ''}`
   }
+
+  const addTypeFilter = async (filterToAdd) => {
+    entitesStore.typeFilter = filterToAdd
+    await entitesStore.searchEntites()
+  }
+
+  const searchItem = (item) => {
+    if (item === 'genealogie') {
+      return '/genealogie'
+    }
+
+    return '#search'
+  }
 </script>
diff --git a/app/components/SearchItem.vue b/app/components/SearchItem.vue
index f6fe393..ecc4d34 100644
--- a/app/components/SearchItem.vue
+++ b/app/components/SearchItem.vue
@@ -1,30 +1,5 @@
-<script setup lang="ts">
-  import { useEntitesStore } from '../stores/entites.store'
-  import { storeToRefs } from 'pinia'
-
-  const entitesStore = useEntitesStore()
-  const { typeFilter, entitesFilter, searchValue, isLoading, isError, errorMessage } =
-    storeToRefs(entitesStore)
-
-  onMounted(() => {
-    entitesStore.loadEntites()
-  })
-
-  watch(typeFilter, () => {
-    entitesStore.loadEntites()
-  })
-
-  const formateLink = (id: string) => `/${id}`
-
-  const hasNoResults = computed(() => {
-    return !isLoading.value && !isError.value && entitesFilter.value.length === 0
-  })
-
-  //TODO infinite scroll
-</script>
-
 <template>
-  <div class="p-10 max-w-7xl mx-auto">
+  <div id="search" class="p-10 max-w-7xl mx-auto">
     <h1 class="text-3xl font-bold mb-6">Encyclopédie</h1>
 
     <div class="mb-6 space-y-4">
@@ -64,6 +39,13 @@
         >
           Créatures
         </UButton>
+        <UButton
+          :color="typeFilter === 'peuple' ? 'primary' : 'secondary'"
+          class="text-white px-4 py-2 rounded"
+          @click="typeFilter = 'peuple'"
+        >
+          Peuples
+        </UButton>
       </div>
     </div>
 
@@ -127,3 +109,28 @@
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+  import { useEntitesStore } from '../stores/entites.store'
+  import { storeToRefs } from 'pinia'
+
+  const entitesStore = useEntitesStore()
+  const { typeFilter, entitesFilter, searchValue, isLoading, isError, errorMessage } =
+    storeToRefs(entitesStore)
+
+  onMounted(() => {
+    entitesStore.loadEntites()
+  })
+
+  watch(typeFilter, () => {
+    entitesStore.loadEntites()
+  })
+
+  const formateLink = (id: string) => `/${id}`
+
+  const hasNoResults = computed(() => {
+    return !isLoading.value && !isError.value && entitesFilter.value.length === 0
+  })
+
+  //TODO infinite scroll
+</script>
diff --git a/app/pages/genealogie.vue b/app/pages/genealogie.vue
new file mode 100644
index 0000000..a4da928
--- /dev/null
+++ b/app/pages/genealogie.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <p>La généalogie du personnage principal</p>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/app/stores/entites.store.ts b/app/stores/entites.store.ts
index 3f9f8ac..63de83f 100644
--- a/app/stores/entites.store.ts
+++ b/app/stores/entites.store.ts
@@ -4,7 +4,7 @@ import type { Entite } from '~/types/database.types'
 
 export const useEntitesStore = defineStore('entites', () => {
   const entites = ref<Entite[]>([])
-  const typeFilter = ref<'tous' | 'personnage' | 'lieu' | 'creature'>('tous')
+  const typeFilter = ref<'tous' | 'personnage' | 'lieu' | 'creature' | 'peuple'>('tous')
   const searchValue = ref<string>('')
   const isLoading = ref(true)
   const isError = ref(false)
diff --git a/content.config.ts b/content.config.ts
index 55506b2..710568b 100644
--- a/content.config.ts
+++ b/content.config.ts
@@ -38,6 +38,7 @@ export default defineContentConfig({
         features: z.array(
           z.object({
             title: z.string(),
+            search: z.string(),
             img: z.string(),
             text: z.string(),
           })
diff --git a/content/pages/home.json b/content/pages/home.json
index 26643ed..fc882a7 100644
--- a/content/pages/home.json
+++ b/content/pages/home.json
@@ -3,26 +3,31 @@
   "features": [
     {
       "title": "Créatures",
+      "search": "creature",
       "img": "/images/creatures.png",
       "text": "..."
     },
     {
       "title": "Personnages",
+      "search": "personnage",
       "img": "/images/personnages.png",
       "text": "..."
     },
     {
       "title": "Peuples",
+      "search": "peuple",
       "img": "/images/peuples.png",
       "text": "..."
     },    
     {
       "title": "Lieux",
+      "search": "lieu",
       "img": "/images/lieux.png",
       "text": "..."
     },
     {
       "title": "Généalogie",
+      "search": "genealogie",
       "img": "/images/test.png",
       "text": "..."
     }

From d03c7d51ad1dddd0e3101f3cfc99d1483ec21e8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Tue, 17 Feb 2026 15:41:27 +0100
Subject: [PATCH 07/14] feat: id page with entite

---
 app/pages/[id].vue | 36 +++++++++++++++++++++++++++++++-----
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/app/pages/[id].vue b/app/pages/[id].vue
index 6184e8e..345dc91 100644
--- a/app/pages/[id].vue
+++ b/app/pages/[id].vue
@@ -1,14 +1,40 @@
 <template>
   <div>
-    <p>id: {{ idEntite }}</p>
+    <p v-if="pending">Chargement...</p>
+    <div v-else-if="entite">
+      <p>id : {{ entite.id }}</p>
+      <p>nom : {{ entite.nom }}</p>
+      <p>type : {{ entite.type }}</p>
+      <p>description : {{ entite.description }}</p>
+      <p>espece : {{ entite.espece }}</p>
+      <p v-if="entite.vivant">Espèce vivante</p>
+      <p v-if="entite.dangereux">Espère dangeureux</p>
+      <p v-if="entite.hostile">Espèce hostile</p>
+      <p v-if="entite.tome">apparait dans les tomes : {{ entite.tome }}</p>
+      <p v-for="(relation, index) in entite.relations" :key="index">
+        {{ relation }}
+      </p>
+      <p v-if="entite.lieu_id">lieu : {{ entite.lieu_id }}</p>
+    </div>
+    <div v-else-if="error">"Entitée non trouvée"</div>
+    <div>
+      <UButton aria-label="Retourner sur la page précédente" @click="$router.back()">
+        <p>Retour</p>
+      </UButton>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  // import { useEntitesStore } from '../stores/entites.store'
+  import { useEntitesStore } from '../stores/entites.store'
+  import type { Entite } from '../types/database.types'
   const route = useRoute()
-  const idEntite = ref<string>(route.params.id as string)
-  // const entitesStore = useEntitesStore()
+  const idEntite = route.params.id
+  const entitesStore = useEntitesStore()
 
-  // console.log(entitesStore.getEntiteById(idEntite))
+  const {
+    data: entite,
+    error,
+    pending,
+  } = await useAsyncData<Entite>(() => entitesStore.getEntiteById(idEntite as string))
 </script>

From 93f74b9007c507f9c2066e1c94dbe068882a5b75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Tue, 17 Feb 2026 15:47:16 +0100
Subject: [PATCH 08/14] feat: improve index

---
 app/assets/css/main.css       |  1 +
 app/components/SearchItem.vue |  6 +----
 app/stores/entites.store.ts   | 51 -----------------------------------
 3 files changed, 2 insertions(+), 56 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 8993501..2a46800 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -4,6 +4,7 @@
 body {
   font-family: var(--font-main);
   background-color: var(--depth);
+  scroll-behavior: smooth;
 }
 
 .font-heading {
diff --git a/app/components/SearchItem.vue b/app/components/SearchItem.vue
index ecc4d34..6432697 100644
--- a/app/components/SearchItem.vue
+++ b/app/components/SearchItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="search" class="p-10 max-w-7xl mx-auto">
+  <div id="search" class="pt-30 pb-50 max-w-7xl mx-auto">
     <h1 class="text-3xl font-bold mb-6">Encyclopédie</h1>
 
     <div class="mb-6 space-y-4">
@@ -49,13 +49,11 @@
       </div>
     </div>
 
-    <!-- Loading State -->
     <div v-if="isLoading" class="flex flex-col items-center justify-center py-20">
       <UIcon name="i-heroicons-arrow-path" class="w-12 h-12 animate-spin text-primary mb-4" />
       <p class="text-gray-600">Chargement des entités...</p>
     </div>
 
-    <!-- Error State -->
     <div v-else-if="isError" class="border border-red-300 bg-red-50 rounded-lg p-4 mb-6">
       <div class="flex items-start gap-3">
         <UIcon name="i-heroicons-exclamation-triangle" class="w-6 h-6 text-red-600 shrink-0" />
@@ -72,14 +70,12 @@
       </div>
     </div>
 
-    <!-- Empty State -->
     <div v-else-if="hasNoResults" class="flex flex-col items-center justify-center py-20">
       <UIcon name="i-heroicons-magnifying-glass" class="w-16 h-16 text-gray-400 mb-4" />
       <h3 class="text-xl font-semibold text-gray-700 mb-2">Aucun résultat</h3>
       <p class="text-gray-500">Aucune entité ne correspond à vos critères de recherche.</p>
     </div>
 
-    <!-- Content -->
     <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
       <NuxtLink
         v-for="entite in entitesFilter"
diff --git a/app/stores/entites.store.ts b/app/stores/entites.store.ts
index 63de83f..9b005d8 100644
--- a/app/stores/entites.store.ts
+++ b/app/stores/entites.store.ts
@@ -10,8 +10,6 @@ export const useEntitesStore = defineStore('entites', () => {
   const isError = ref(false)
   const errorMessage = ref('')
 
-  //TODO rework types and error types
-
   const loadEntites = async () => {
     isLoading.value = true
     isError.value = false
@@ -73,52 +71,6 @@ export const useEntitesStore = defineStore('entites', () => {
     )
   })
 
-  // // Ajouter une entité
-  // const ajouterEntite = async (entite: Partial<Entite>) => {
-  //   try {
-  //     const nouvelleEntite = await $fetch('/api/entites', {
-  //       method: 'POST',
-  //       body: entite
-  //     })
-
-  //     await loadEntites() // Recharger la liste
-  //     return nouvelleEntite
-  //   } catch (e: any) {
-  //     error.value = e.message
-  //     throw e
-  //   }
-  // }
-
-  // // Mettre à jour
-  // const mettreAJourEntite = async (id: string, updates: Partial<Entite>) => {
-  //   try {
-  //     const entiteMaj = await $fetch(`/api/entites/${id}`, {
-  //       method: 'PATCH',
-  //       body: updates
-  //     })
-
-  //     await loadEntites() // Recharger la liste
-  //     return entiteMaj
-  //   } catch (e: any) {
-  //     error.value = e.message
-  //     throw e
-  //   }
-  // }
-
-  // // Supprimer
-  // const supprimerEntite = async (id: string) => {
-  //   try {
-  //     await $fetch(`/api/entites/${id}`, {
-  //       method: 'DELETE'
-  //     })
-
-  //     await loadEntites() // Recharger la liste
-  //   } catch (e: any) {
-  //     error.value = e.message
-  //     throw e
-  //   }
-  // }
-
   return {
     entites,
     typeFilter,
@@ -130,8 +82,5 @@ export const useEntitesStore = defineStore('entites', () => {
     loadEntites,
     getEntiteById,
     searchEntites,
-    // ajouterEntite,
-    // mettreAJourEntite,
-    // supprimerEntite
   }
 })

From d2ff6c024e0a7a6613ecb2e7414cca3eb65ddc56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Tue, 17 Feb 2026 15:48:57 +0100
Subject: [PATCH 09/14] fix: max-w-7xl on hero

---
 app/components/HeroItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/HeroItem.vue b/app/components/HeroItem.vue
index 84e51ce..d31968a 100644
--- a/app/components/HeroItem.vue
+++ b/app/components/HeroItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="data"
-    class="mx-auto w-[75%] flex flex-row gap-4 rounded-4xl bg-white/30 p-10 shadow-lg items-center mt-15 h-150"
+    class="mx-auto w-[75%] max-w-7xl flex flex-row gap-4 rounded-4xl bg-white/30 p-10 shadow-lg items-center mt-15 h-150"
   >
     <div class="w-[30%] h-full flex flex-col gap-4 text-center justify-center mx-12">
       <h1 class="text-4xl font-heading">{{ data?.hero?.heading }}</h1>

From a4ab232282f883f58c490d6fe92ed1bb04c48af3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Tue, 17 Feb 2026 15:53:58 +0100
Subject: [PATCH 10/14] fix: key on useAsyncData for cache

---
 app/pages/[id].vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/pages/[id].vue b/app/pages/[id].vue
index 345dc91..d655594 100644
--- a/app/pages/[id].vue
+++ b/app/pages/[id].vue
@@ -36,5 +36,7 @@
     data: entite,
     error,
     pending,
-  } = await useAsyncData<Entite>(() => entitesStore.getEntiteById(idEntite as string))
+  } = await useAsyncData<Entite>(`entite-${idEntite}`, () =>
+    entitesStore.getEntiteById(idEntite as string)
+  )
 </script>

From a455df74cd3535bc7e62bc4c83b06f5c90f65743 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Tue, 17 Feb 2026 16:41:16 +0100
Subject: [PATCH 11/14] feat: routes /entites/id

---
 app/components/SearchItem.vue    | 2 +-
 app/pages/{ => entites}/[id].vue | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)
 rename app/pages/{ => entites}/[id].vue (90%)

diff --git a/app/components/SearchItem.vue b/app/components/SearchItem.vue
index 6432697..2ba6bc4 100644
--- a/app/components/SearchItem.vue
+++ b/app/components/SearchItem.vue
@@ -122,7 +122,7 @@
     entitesStore.loadEntites()
   })
 
-  const formateLink = (id: string) => `/${id}`
+  const formateLink = (id: string) => `/entites/${id}`
 
   const hasNoResults = computed(() => {
     return !isLoading.value && !isError.value && entitesFilter.value.length === 0
diff --git a/app/pages/[id].vue b/app/pages/entites/[id].vue
similarity index 90%
rename from app/pages/[id].vue
rename to app/pages/entites/[id].vue
index d655594..0eb4477 100644
--- a/app/pages/[id].vue
+++ b/app/pages/entites/[id].vue
@@ -26,8 +26,9 @@
 </template>
 
 <script setup lang="ts">
-  import { useEntitesStore } from '../stores/entites.store'
-  import type { Entite } from '../types/database.types'
+  import { useEntitesStore } from '../../stores/entites.store'
+  import type { Entite } from '../../types/database.types'
+
   const route = useRoute()
   const idEntite = route.params.id
   const entitesStore = useEntitesStore()

From 8294e700d94494ccc9c634a38855a84f8c4a77a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Wed, 18 Feb 2026 10:39:17 +0100
Subject: [PATCH 12/14] fix: tome with tomes Array

---
 app/pages/entites/[id].vue  | 37 +++++++++++++++++++++----------------
 app/types/database.types.ts |  2 +-
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/app/pages/entites/[id].vue b/app/pages/entites/[id].vue
index 0eb4477..acb0768 100644
--- a/app/pages/entites/[id].vue
+++ b/app/pages/entites/[id].vue
@@ -1,27 +1,32 @@
 <template>
-  <div>
+  <div class="mx-auto w-[75%] max-w-7xl">
     <p v-if="pending">Chargement...</p>
-    <div v-else-if="entite">
-      <p>id : {{ entite.id }}</p>
-      <p>nom : {{ entite.nom }}</p>
-      <p>type : {{ entite.type }}</p>
-      <p>description : {{ entite.description }}</p>
-      <p>espece : {{ entite.espece }}</p>
+    <div v-else-if="entite" class="flex flex-col gap-1.5">
+      <p>Nom : {{ entite.nom }}</p>
+      <p>Type : {{ entite.type }}</p>
+      <p>Description : {{ entite.description }}</p>
+      <p v-if="entite.espece">Espèce : {{ entite.espece }}</p>
       <p v-if="entite.vivant">Espèce vivante</p>
-      <p v-if="entite.dangereux">Espère dangeureux</p>
+      <p v-if="entite.dangereux">Espèce dangeureuse</p>
       <p v-if="entite.hostile">Espèce hostile</p>
-      <p v-if="entite.tome">apparait dans les tomes : {{ entite.tome }}</p>
+      <div v-if="entite.tomes" class="flex flex-row gap-1.5">
+        <p v-if="entite.tomes.length > 1">Apparait dans les :</p>
+        <p v-if="entite.tomes.length == 1">Apparait dans le :</p>
+        <p v-for="(tome, index) in entite.tomes" :key="index">Tome {{ tome }}</p>
+      </div>
       <p v-for="(relation, index) in entite.relations" :key="index">
         {{ relation }}
       </p>
-      <p v-if="entite.lieu_id">lieu : {{ entite.lieu_id }}</p>
-    </div>
-    <div v-else-if="error">"Entitée non trouvée"</div>
-    <div>
-      <UButton aria-label="Retourner sur la page précédente" @click="$router.back()">
-        <p>Retour</p>
-      </UButton>
+      <p v-if="entite.lieu_id">Lieu : {{ entite.lieu_id }}</p>
     </div>
+    <div v-else-if="error">"Entitée non trouvée !"</div>
+    <UButton
+      aria-label="Retourner sur la page précédente"
+      class="mt-10 mx-auto"
+      @click="$router.back()"
+    >
+      <p>Retour</p>
+    </UButton>
   </div>
 </template>
 
diff --git a/app/types/database.types.ts b/app/types/database.types.ts
index 42347fc..079c61a 100644
--- a/app/types/database.types.ts
+++ b/app/types/database.types.ts
@@ -12,7 +12,7 @@ export type Entite = {
   vivant?: boolean
   dangereux?: boolean
   hostile?: boolean
-  tome?: string
+  tomes?: string[]
   relations?: string[]
   lieu_id?: string
 }

From 35d1bc5fdfba1844fe4ceb56d5154e8ac364d2de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Wed, 18 Feb 2026 17:54:27 +0100
Subject: [PATCH 13/14] feat: pagination on index

---
 app/components/SearchItem.vue   | 62 +++++++++++++++++++++++++++------
 app/stores/entites.store.ts     | 32 ++++++++++++++---
 server/api/entites/index.get.ts | 22 +++++++++---
 3 files changed, 96 insertions(+), 20 deletions(-)

diff --git a/app/components/SearchItem.vue b/app/components/SearchItem.vue
index 2ba6bc4..a3a161c 100644
--- a/app/components/SearchItem.vue
+++ b/app/components/SearchItem.vue
@@ -49,7 +49,8 @@
       </div>
     </div>
 
-    <div v-if="isLoading" class="flex flex-col items-center justify-center py-20">
+    <!-- Loading initial -->
+    <div v-if="isInitialLoading" class="flex flex-col items-center justify-center py-20">
       <UIcon name="i-heroicons-arrow-path" class="w-12 h-12 animate-spin text-primary mb-4" />
       <p class="text-gray-600">Chargement des entités...</p>
     </div>
@@ -63,7 +64,7 @@
         </div>
         <button
           class="bg-red-600 text-white px-3 py-1 rounded text-sm hover:bg-red-700"
-          @click="entitesStore.loadEntites()"
+          @click="entitesStore.resetAndLoad()"
         >
           Réessayer
         </button>
@@ -103,6 +104,14 @@
         </div>
       </NuxtLink>
     </div>
+
+    <div ref="loadMoreTrigger" class="h-20 flex items-center justify-center">
+      <UIcon
+        v-if="isLoadingMore"
+        name="i-heroicons-arrow-path"
+        class="w-8 h-8 animate-spin text-primary"
+      />
+    </div>
   </div>
 </template>
 
@@ -111,22 +120,55 @@
   import { storeToRefs } from 'pinia'
 
   const entitesStore = useEntitesStore()
-  const { typeFilter, entitesFilter, searchValue, isLoading, isError, errorMessage } =
+  const { typeFilter, searchValue, entitesFilter, isError, errorMessage } =
     storeToRefs(entitesStore)
 
-  onMounted(() => {
-    entitesStore.loadEntites()
+  const loadMoreTrigger = ref<HTMLElement | null>(null)
+  const isVisible = ref(false)
+  const isInitialLoading = ref(true)
+  const isLoadingMore = ref(false)
+
+  let observer: IntersectionObserver | null = null
+
+  onMounted(async () => {
+    await entitesStore.loadEntites()
+    isInitialLoading.value = false
+
+    observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
+      const entry = entries[0]
+      if (entry) {
+        isVisible.value = entry.isIntersecting
+      }
+    })
+
+    if (loadMoreTrigger.value) {
+      observer.observe(loadMoreTrigger.value)
+    }
+  })
+
+  onUnmounted(() => {
+    if (observer) {
+      observer.disconnect()
+    }
   })
 
-  watch(typeFilter, () => {
-    entitesStore.loadEntites()
+  watch(isVisible, async (visible) => {
+    if (visible && !isLoadingMore.value && !isInitialLoading.value) {
+      isLoadingMore.value = true
+      await entitesStore.loadMore()
+      isLoadingMore.value = false
+    }
+  })
+
+  watch(typeFilter, async () => {
+    isInitialLoading.value = true
+    await entitesStore.resetAndLoad()
+    isInitialLoading.value = false
   })
 
   const formateLink = (id: string) => `/entites/${id}`
 
   const hasNoResults = computed(() => {
-    return !isLoading.value && !isError.value && entitesFilter.value.length === 0
+    return !isInitialLoading.value && !isError.value && entitesFilter.value.length === 0
   })
-
-  //TODO infinite scroll
 </script>
diff --git a/app/stores/entites.store.ts b/app/stores/entites.store.ts
index 9b005d8..ae22380 100644
--- a/app/stores/entites.store.ts
+++ b/app/stores/entites.store.ts
@@ -9,18 +9,24 @@ export const useEntitesStore = defineStore('entites', () => {
   const isLoading = ref(true)
   const isError = ref(false)
   const errorMessage = ref('')
+  const currentPage = ref(1)
+  const hasMore = ref(true)
 
   const loadEntites = async () => {
-    isLoading.value = true
+    if (!hasMore.value) return
     isError.value = false
     errorMessage.value = ''
-
+    isLoading.value = true
     try {
-      const data = await $fetch<Entite[]>('/api/entites', {
-        params: typeFilter.value !== 'tous' ? { type: typeFilter.value } : {},
+      const response = await $fetch('/api/entites', {
+        params: {
+          type: typeFilter.value !== 'tous' ? typeFilter.value : undefined,
+          page: currentPage.value,
+        },
       })
 
-      entites.value = data || []
+      entites.value = [...entites.value, ...(response.data || [])]
+      hasMore.value = currentPage.value < response.totalPages
     } catch (e) {
       const err = e as Error
       isError.value = true
@@ -30,6 +36,20 @@ export const useEntitesStore = defineStore('entites', () => {
     }
   }
 
+  const loadMore = () => {
+    if (hasMore.value && !isLoading.value) {
+      currentPage.value++
+      loadEntites()
+    }
+  }
+
+  const resetAndLoad = () => {
+    entites.value = []
+    currentPage.value = 1
+    hasMore.value = true
+    loadEntites()
+  }
+
   const getEntiteById = async (id: string) => {
     try {
       return await $fetch<Entite>(`/api/entites/${id}`)
@@ -79,7 +99,9 @@ export const useEntitesStore = defineStore('entites', () => {
     isError,
     errorMessage,
     entitesFilter,
+    loadMore,
     loadEntites,
+    resetAndLoad,
     getEntiteById,
     searchEntites,
   }
diff --git a/server/api/entites/index.get.ts b/server/api/entites/index.get.ts
index ea404fb..1558003 100644
--- a/server/api/entites/index.get.ts
+++ b/server/api/entites/index.get.ts
@@ -2,18 +2,24 @@ import { serverSupabaseClient } from '#supabase/server'
 
 export default defineEventHandler(async (event) => {
   const supabase = await serverSupabaseClient(event)
-
-  //TODO pagination
   const query = getQuery(event)
   const type = query.type as string | undefined
+  const page = parseInt(query.page as string) || 1
+  const pageSize = 9
+  const from = (page - 1) * pageSize
+  const to = from + pageSize - 1
 
-  let supabaseQuery = supabase.from('entites').select('*').order('created_at', { ascending: false })
+  let supabaseQuery = supabase
+    .from('entites')
+    .select('*', { count: 'exact' })
+    .range(from, to)
+    .order('nom')
 
   if (type && type !== 'tous') {
     supabaseQuery = supabaseQuery.eq('type', type)
   }
 
-  const { data, error } = await supabaseQuery
+  const { data, error, count } = await supabaseQuery
 
   if (error) {
     throw createError({
@@ -22,5 +28,11 @@ export default defineEventHandler(async (event) => {
     })
   }
 
-  return data
+  return {
+    data: data || [],
+    total: count ?? 0,
+    page,
+    pageSize,
+    totalPages: Math.ceil((count ?? 0) / pageSize),
+  }
 })

From 678a274913d86d6ef3a2a33306ea3563b8e96faf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Wed, 18 Feb 2026 18:27:09 +0100
Subject: [PATCH 14/14] fix: isLoading

---
 app/components/SearchItem.vue | 38 ++++++++++++-----------------------
 1 file changed, 13 insertions(+), 25 deletions(-)

diff --git a/app/components/SearchItem.vue b/app/components/SearchItem.vue
index a3a161c..5fb37fe 100644
--- a/app/components/SearchItem.vue
+++ b/app/components/SearchItem.vue
@@ -49,13 +49,7 @@
       </div>
     </div>
 
-    <!-- Loading initial -->
-    <div v-if="isInitialLoading" class="flex flex-col items-center justify-center py-20">
-      <UIcon name="i-heroicons-arrow-path" class="w-12 h-12 animate-spin text-primary mb-4" />
-      <p class="text-gray-600">Chargement des entités...</p>
-    </div>
-
-    <div v-else-if="isError" class="border border-red-300 bg-red-50 rounded-lg p-4 mb-6">
+    <div v-if="isError" class="border border-red-300 bg-red-50 rounded-lg p-4 mb-6">
       <div class="flex items-start gap-3">
         <UIcon name="i-heroicons-exclamation-triangle" class="w-6 h-6 text-red-600 shrink-0" />
         <div class="flex-1">
@@ -71,18 +65,21 @@
       </div>
     </div>
 
-    <div v-else-if="hasNoResults" class="flex flex-col items-center justify-center py-20">
+    <div v-if="hasNoResults" class="flex flex-col items-center justify-center py-20">
       <UIcon name="i-heroicons-magnifying-glass" class="w-16 h-16 text-gray-400 mb-4" />
       <h3 class="text-xl font-semibold text-gray-700 mb-2">Aucun résultat</h3>
       <p class="text-gray-500">Aucune entité ne correspond à vos critères de recherche.</p>
     </div>
 
-    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+    <div
+      v-if="entitesFilter.length > 0"
+      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
+    >
       <NuxtLink
         v-for="entite in entitesFilter"
         :key="entite.id"
         :to="formateLink(entite.id)"
-        class="border rounded-lg p-4 hover:shadow-lg transition"
+        class="border rounded-lg p-4 hover:shadow-lg hover:bg-white transition"
       >
         <div class="flex justify-between items-start mb-2">
           <h3 class="font-bold text-lg">{{ entite.nom }}</h3>
@@ -107,7 +104,7 @@
 
     <div ref="loadMoreTrigger" class="h-20 flex items-center justify-center">
       <UIcon
-        v-if="isLoadingMore"
+        v-if="isLoading"
         name="i-heroicons-arrow-path"
         class="w-8 h-8 animate-spin text-primary"
       />
@@ -120,21 +117,18 @@
   import { storeToRefs } from 'pinia'
 
   const entitesStore = useEntitesStore()
-  const { typeFilter, searchValue, entitesFilter, isError, errorMessage } =
+  const { typeFilter, searchValue, entitesFilter, isLoading, isError, errorMessage } =
     storeToRefs(entitesStore)
 
   const loadMoreTrigger = ref<HTMLElement | null>(null)
   const isVisible = ref(false)
-  const isInitialLoading = ref(true)
-  const isLoadingMore = ref(false)
 
   let observer: IntersectionObserver | null = null
 
   onMounted(async () => {
     await entitesStore.loadEntites()
-    isInitialLoading.value = false
 
-    observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
+    observer = new IntersectionObserver((entries) => {
       const entry = entries[0]
       if (entry) {
         isVisible.value = entry.isIntersecting
@@ -147,28 +141,22 @@
   })
 
   onUnmounted(() => {
-    if (observer) {
-      observer.disconnect()
-    }
+    observer?.disconnect()
   })
 
   watch(isVisible, async (visible) => {
-    if (visible && !isLoadingMore.value && !isInitialLoading.value) {
-      isLoadingMore.value = true
+    if (visible && !isLoading.value) {
       await entitesStore.loadMore()
-      isLoadingMore.value = false
     }
   })
 
   watch(typeFilter, async () => {
-    isInitialLoading.value = true
     await entitesStore.resetAndLoad()
-    isInitialLoading.value = false
   })
 
   const formateLink = (id: string) => `/entites/${id}`
 
   const hasNoResults = computed(() => {
-    return !isInitialLoading.value && !isError.value && entitesFilter.value.length === 0
+    return !isLoading.value && !isError.value && entitesFilter.value.length === 0
   })
 </script>