From 14fcefbefea6b182d0a1172b61078f20e7438e72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Sat, 21 Feb 2026 13:46:21 +0100
Subject: [PATCH] feat: supabase + pinia + pagination

---
 app/assets/css/main.css          |  12 +-
 app/components/HeroItem.vue      |  22 ++-
 app/components/SearchItem.vue    | 161 ++++++++++++++++++++-
 app/pages/entites/[id].vue       |  48 +++++++
 app/pages/genealogie.vue         |   7 +
 app/stores/entites.store.ts      | 108 +++++++++++++++
 app/types/database.types.ts      |  18 +++
 content.config.ts                |   1 +
 content/pages/home.json          |   5 +
 eslint.config.mjs                |  12 ++
 nuxt.config.ts                   |   7 +
 package-lock.json                | 231 ++++++++++++++++++++++++++++++-
 package.json                     |   2 +
 server/api/entites/[id].get.ts   |  24 ++++
 server/api/entites/index.get.ts  |  38 +++++
 server/api/entites/search.get.ts |  25 ++++
 tailwind.config.ts               |  31 +++--
 17 files changed, 728 insertions(+), 24 deletions(-)
 create mode 100644 app/pages/entites/[id].vue
 create mode 100644 app/pages/genealogie.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..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 {
@@ -13,10 +14,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/HeroItem.vue b/app/components/HeroItem.vue
index 3f7e4b6..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>
@@ -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 13d02b2..5fb37fe 100644
--- a/app/components/SearchItem.vue
+++ b/app/components/SearchItem.vue
@@ -1,7 +1,162 @@
 <template>
-  <div class="p-20">
-    <p>La recherche</p>
+  <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">
+      <input
+        v-model="searchValue"
+        type="text"
+        placeholder="Rechercher..."
+        class="border px-4 py-2 rounded w-full"
+      />
+
+      <div class="flex gap-2">
+        <UButton
+          :color="typeFilter === 'tous' ? 'primary' : 'secondary'"
+          class="text-white px-4 py-2 rounded"
+          @click="typeFilter = 'tous'"
+        >
+          Tous
+        </UButton>
+        <UButton
+          :color="typeFilter === 'personnage' ? 'primary' : 'secondary'"
+          class="text-white px-4 py-2 rounded"
+          @click="typeFilter = 'personnage'"
+        >
+          Personnages
+        </UButton>
+        <UButton
+          :color="typeFilter === 'lieu' ? 'primary' : 'secondary'"
+          class="text-white px-4 py-2 rounded"
+          @click="typeFilter = 'lieu'"
+        >
+          Lieux
+        </UButton>
+        <UButton
+          :color="typeFilter === 'creature' ? 'primary' : 'secondary'"
+          class="text-white px-4 py-2 rounded"
+          @click="typeFilter = 'creature'"
+        >
+          Créatures
+        </UButton>
+        <UButton
+          :color="typeFilter === 'peuple' ? 'primary' : 'secondary'"
+          class="text-white px-4 py-2 rounded"
+          @click="typeFilter = 'peuple'"
+        >
+          Peuples
+        </UButton>
+      </div>
+    </div>
+
+    <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">
+          <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.resetAndLoad()"
+        >
+          Réessayer
+        </button>
+      </div>
+    </div>
+
+    <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-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 hover:bg-white 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 ref="loadMoreTrigger" class="h-20 flex items-center justify-center">
+      <UIcon
+        v-if="isLoading"
+        name="i-heroicons-arrow-path"
+        class="w-8 h-8 animate-spin text-primary"
+      />
+    </div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { useEntitesStore } from '../stores/entites.store'
+  import { storeToRefs } from 'pinia'
+
+  const entitesStore = useEntitesStore()
+  const { typeFilter, searchValue, entitesFilter, isLoading, isError, errorMessage } =
+    storeToRefs(entitesStore)
+
+  const loadMoreTrigger = ref<HTMLElement | null>(null)
+  const isVisible = ref(false)
+
+  let observer: IntersectionObserver | null = null
+
+  onMounted(async () => {
+    await entitesStore.loadEntites()
+
+    observer = new IntersectionObserver((entries) => {
+      const entry = entries[0]
+      if (entry) {
+        isVisible.value = entry.isIntersecting
+      }
+    })
+
+    if (loadMoreTrigger.value) {
+      observer.observe(loadMoreTrigger.value)
+    }
+  })
+
+  onUnmounted(() => {
+    observer?.disconnect()
+  })
+
+  watch(isVisible, async (visible) => {
+    if (visible && !isLoading.value) {
+      await entitesStore.loadMore()
+    }
+  })
+
+  watch(typeFilter, async () => {
+    await entitesStore.resetAndLoad()
+  })
+
+  const formateLink = (id: string) => `/entites/${id}`
+
+  const hasNoResults = computed(() => {
+    return !isLoading.value && !isError.value && entitesFilter.value.length === 0
+  })
+</script>
diff --git a/app/pages/entites/[id].vue b/app/pages/entites/[id].vue
new file mode 100644
index 0000000..acb0768
--- /dev/null
+++ b/app/pages/entites/[id].vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="mx-auto w-[75%] max-w-7xl">
+    <p v-if="pending">Chargement...</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èce dangeureuse</p>
+      <p v-if="entite.hostile">Espèce hostile</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>
+    <UButton
+      aria-label="Retourner sur la page précédente"
+      class="mt-10 mx-auto"
+      @click="$router.back()"
+    >
+      <p>Retour</p>
+    </UButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useEntitesStore } from '../../stores/entites.store'
+  import type { Entite } from '../../types/database.types'
+
+  const route = useRoute()
+  const idEntite = route.params.id
+  const entitesStore = useEntitesStore()
+
+  const {
+    data: entite,
+    error,
+    pending,
+  } = await useAsyncData<Entite>(`entite-${idEntite}`, () =>
+    entitesStore.getEntiteById(idEntite as string)
+  )
+</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
new file mode 100644
index 0000000..ae22380
--- /dev/null
+++ b/app/stores/entites.store.ts
@@ -0,0 +1,108 @@
+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' | 'peuple'>('tous')
+  const searchValue = ref<string>('')
+  const isLoading = ref(true)
+  const isError = ref(false)
+  const errorMessage = ref('')
+  const currentPage = ref(1)
+  const hasMore = ref(true)
+
+  const loadEntites = async () => {
+    if (!hasMore.value) return
+    isError.value = false
+    errorMessage.value = ''
+    isLoading.value = true
+    try {
+      const response = await $fetch('/api/entites', {
+        params: {
+          type: typeFilter.value !== 'tous' ? typeFilter.value : undefined,
+          page: currentPage.value,
+        },
+      })
+
+      entites.value = [...entites.value, ...(response.data || [])]
+      hasMore.value = currentPage.value < response.totalPages
+    } catch (e) {
+      const err = e as Error
+      isError.value = true
+      errorMessage.value = err.message || 'Une erreur est survenue'
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  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}`)
+    } catch (e) {
+      const err = e as Error
+      isError.value = true
+      errorMessage.value = err.message
+      throw err
+    }
+  }
+
+  const searchEntites = async (terme: string) => {
+    if (!terme) {
+      await loadEntites()
+      return
+    }
+
+    isLoading.value = true
+    errorMessage.value = ''
+
+    try {
+      entites.value = await $fetch<Entite[]>('/api/entites/search', {
+        params: { q: terme },
+      })
+    } catch (e) {
+      const err = e as Error
+      isError.value = true
+      errorMessage.value = err.message
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  const entitesFilter = computed(() => {
+    if (!searchValue.value) return entites.value
+
+    return entites.value.filter((e) =>
+      e.nom.toLowerCase().includes(searchValue.value.toLowerCase())
+    )
+  })
+
+  return {
+    entites,
+    typeFilter,
+    searchValue,
+    isLoading,
+    isError,
+    errorMessage,
+    entitesFilter,
+    loadMore,
+    loadEntites,
+    resetAndLoad,
+    getEntiteById,
+    searchEntites,
+  }
+})
diff --git a/app/types/database.types.ts b/app/types/database.types.ts
new file mode 100644
index 0000000..079c61a
--- /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
+  tomes?: string[]
+  relations?: string[]
+  lieu_id?: string
+}
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": "..."
     }
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/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..1558003
--- /dev/null
+++ b/server/api/entites/index.get.ts
@@ -0,0 +1,38 @@
+import { serverSupabaseClient } from '#supabase/server'
+
+export default defineEventHandler(async (event) => {
+  const supabase = await serverSupabaseClient(event)
+  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('*', { count: 'exact' })
+    .range(from, to)
+    .order('nom')
+
+  if (type && type !== 'tous') {
+    supabaseQuery = supabaseQuery.eq('type', type)
+  }
+
+  const { data, error, count } = await supabaseQuery
+
+  if (error) {
+    throw createError({
+      statusCode: 500,
+      message: error.message,
+    })
+  }
+
+  return {
+    data: data || [],
+    total: count ?? 0,
+    page,
+    pageSize,
+    totalPages: Math.ceil((count ?? 0) / pageSize),
+  }
+})
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'],
       },
     },
   },