From aad0c7eace797e7498212bd47bdd328312274ecc Mon Sep 17 00:00:00 2001
From: jacquesfize <jacques.fize@gmail.com>
Date: Mon, 8 Dec 2025 21:27:12 +0100
Subject: [PATCH 1/3] add description in the detailed view

---
 .../core/taxonList/TaxonDetailed.vue          | 44 ++++++++++++++++++-
 src/components/core/taxonList/TaxonView.vue   | 11 +++++
 src/lib/connectors/connector.ts               | 12 +++++
 src/lib/connectors/gbif.ts                    | 40 ++++++++++++++++-
 src/lib/media/Wikidata.ts                     |  2 +-
 5 files changed, 105 insertions(+), 4 deletions(-)

diff --git a/src/components/core/taxonList/TaxonDetailed.vue b/src/components/core/taxonList/TaxonDetailed.vue
index 0c02be4a..e844c1d5 100644
--- a/src/components/core/taxonList/TaxonDetailed.vue
+++ b/src/components/core/taxonList/TaxonDetailed.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
     import Credits from '@/components/commons/Credits.vue';
     import { Media } from '@/lib/models';
+    import { ref, useTemplateRef } from 'vue';
 
     const props = defineProps<{
         picture: Media;
@@ -10,7 +11,13 @@
         urlDetailPage: string;
         nbObservations: number;
         lastSeenDate: Date;
+        description?: string;
     }>();
+
+    const descriptionShown = ref(false);
+    function toggleDescription() {
+        descriptionShown.value = !descriptionShown.value;
+    }
 </script>
 <template>
     <div class="col" data-testid="Taxon detailed view">
@@ -64,6 +71,26 @@
                             props.nbObservations
                         }}</span>
                     </small>
+                    <br />
+                    <small class="text-body-secondary">
+                        <strong
+                            >Description
+                            <button
+                                class="description-button"
+                                @click="toggleDescription"
+                            >
+                                +
+                            </button></strong
+                        >
+
+                        <span
+                            class="description"
+                            :class="{ active: descriptionShown }"
+                        >
+                            {{ description }}
+                        </span>
+                    </small>
+
                     <br />
 
                     <small class="text-body-secondary">
@@ -71,7 +98,7 @@
                         <a
               :href="props.urlDetailPage"
               target="_blank"
-               data-testid="Taxon detail redirect link"
+              data-testid="Taxon detail redirect link"
               class="badge bg-light text-secondary border border-secondary text-decoration-none"
               ><strong>{{ $t("taxon.learnMore") }} <i class="bi bi-arrow-right"></i> </strong>
             </a>
@@ -123,4 +150,19 @@
         margin-top: 0.5rem;
         width: 100%;
     }
+    .description {
+        display: none;
+    }
+    .description.active {
+        display: block;
+        transform: fadeIn 1s ease;
+    }
+    .description-button {
+        background-color: #efefef;
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        border: none;
+        cursor: pointer;
+    }
 </style>
diff --git a/src/components/core/taxonList/TaxonView.vue b/src/components/core/taxonList/TaxonView.vue
index b9706d99..2a6a1fa9 100644
--- a/src/components/core/taxonList/TaxonView.vue
+++ b/src/components/core/taxonList/TaxonView.vue
@@ -20,6 +20,7 @@
     const speciesPhoto = ref([]);
     const speciesAudio = ref(null);
     const vernacularName = ref(taxon.vernacularName);
+    const description = ref('');
 
     function fetchDetailUrl(taxonID) {
         if (customDetailPage.value) {
@@ -67,9 +68,18 @@
         });
     }
 
+    const fetchDescription = async () => {
+        const descriptionfetched = await connector.value.fetchDescription(
+            taxon.taxonId,
+            lang.value
+        );
+        description.value = descriptionfetched;
+    };
+
     fetchTaxonImage();
     fetchTaxonAudio();
     refreshVernacularName();
+    fetchDescription();
 
     watch(lang, () => {
         refreshVernacularName();
@@ -95,5 +105,6 @@
         :url-detail-page="fetchDetailUrl(taxon.taxonId)"
         :nb-observations="taxon?.nbObservations"
         :last-seen-date="taxon?.lastSeenDate"
+        :description="description"
     />
 </template>
diff --git a/src/lib/connectors/connector.ts b/src/lib/connectors/connector.ts
index d2355862..58aec6ed 100644
--- a/src/lib/connectors/connector.ts
+++ b/src/lib/connectors/connector.ts
@@ -225,4 +225,16 @@ export class Connector {
     searchOnAPI(searchString: string): Promise<any> {
         throw new Error('Not implemented');
     }
+
+    /**
+     * Fetches the description of a taxon.
+     * @param taxonID - The ID of the taxon.
+     * @returns A promise that resolves to the description of the taxon if found.
+     */
+    fetchDescription(
+        taxonID: string | number,
+        lang: string = 'en'
+    ): Promise<string> {
+        throw new Error('Not implemented');
+    }
 }
diff --git a/src/lib/connectors/gbif.ts b/src/lib/connectors/gbif.ts
index d2ec4fa9..07bb02b5 100644
--- a/src/lib/connectors/gbif.ts
+++ b/src/lib/connectors/gbif.ts
@@ -9,6 +9,7 @@ import { CONNECTORS } from './connectors';
 import { GBIFSearchScoring } from './search/gbif';
 import { removeHoles } from './utils';
 import { parse, stringify } from 'wellknown';
+import { fetchWikidataEntityByProperty } from '../media/Wikidata';
 
 const GBIF_ENDPOINT_DEFAULT = 'https://api.gbif.org/v1';
 // const GBIF_ENDPOINT_DEFAULT = 'https://api.gbif-uat.org/v1';
@@ -199,8 +200,9 @@ export class GbifConnector extends Connector {
                                 };
                             }
 
-                            taxonsData[observation.taxonKey].nbObservations +=
-                                1;
+                            taxonsData[
+                                observation.taxonKey
+                            ].nbObservations += 1;
                             taxonsData[observation.taxonKey].lastSeenDate =
                                 new Date(
                                     Math.max(
@@ -296,4 +298,38 @@ export class GbifConnector extends Connector {
             .then((response) => response.json())
             .then((json) => json.results);
     }
+
+    fetchDescription(taxonID: string | number, lang: string): Promise<string> {
+        return fetchWikidataEntityByProperty('P846', taxonID.toString()).then(
+            (wikidataID) => {
+                if (!wikidataID) return ''; // nothing found → resolve with empty string
+
+                return fetch(
+                    `https://www.wikidata.org/wiki/Special:EntityData/${wikidataID}.json`
+                )
+                    .then((res) => res.json())
+                    .then((entityJson) => {
+                        const langSelected =
+                            `${lang}wiki` in
+                            entityJson.entities[wikidataID].sitelinks
+                                ? lang
+                                : 'en';
+
+                        const title = entityJson.entities[wikidataID].sitelinks[
+                            `${langSelected}wiki`
+                        ].title
+                            .replace(/ /g, '_')
+                            .replace(/:/g, '%3A')
+                            .replace(/#/g, '%23')
+                            .replace(/"/g, '%22');
+
+                        return fetch(
+                            `https://${lang}.wikipedia.org/api/rest_v1/page/summary/${title}`
+                        )
+                            .then((res) => res.json())
+                            .then((summaryJson) => summaryJson.extract || '');
+                    });
+            }
+        );
+    }
 }
diff --git a/src/lib/media/Wikidata.ts b/src/lib/media/Wikidata.ts
index f6246a03..253fe431 100644
--- a/src/lib/media/Wikidata.ts
+++ b/src/lib/media/Wikidata.ts
@@ -209,4 +209,4 @@ class WikiDataImageSource extends MediaSource {
     }
 }
 
-export { WikiDataImageSource };
+export { WikiDataImageSource, fetchWikidataEntityByProperty };

From 291792ed2c5703da28a1e0a819d85517a933d132 Mon Sep 17 00:00:00 2001
From: jacquesfize <jacques.fize@gmail.com>
Date: Mon, 8 Dec 2025 22:44:39 +0100
Subject: [PATCH 2/3] add first proto on thumbnail

---
 .../core/taxonList/TaxonDetailed.vue          |   6 +-
 .../core/taxonList/TaxonThumbnail.vue         | 191 ++++++++++++++++--
 src/components/core/taxonList/TaxonView.vue   |   1 +
 3 files changed, 184 insertions(+), 14 deletions(-)

diff --git a/src/components/core/taxonList/TaxonDetailed.vue b/src/components/core/taxonList/TaxonDetailed.vue
index e844c1d5..6dd34475 100644
--- a/src/components/core/taxonList/TaxonDetailed.vue
+++ b/src/components/core/taxonList/TaxonDetailed.vue
@@ -72,7 +72,11 @@
                         }}</span>
                     </small>
                     <br />
-                    <small class="text-body-secondary">
+                    <small
+                        class="text-body-secondary"
+                        data-testid="Description"
+                        v-if="description"
+                    >
                         <strong
                             >Description
                             <button
diff --git a/src/components/core/taxonList/TaxonThumbnail.vue b/src/components/core/taxonList/TaxonThumbnail.vue
index 9ec61400..d2a5f432 100644
--- a/src/components/core/taxonList/TaxonThumbnail.vue
+++ b/src/components/core/taxonList/TaxonThumbnail.vue
@@ -2,22 +2,30 @@
     import { Media } from '@/lib/models';
     import { computed, onMounted, ref, watch } from 'vue';
     import ParameterStore from '@/lib/parameterStore';
-
     const { isMobile } = ParameterStore.getInstance();
-
     const props = defineProps<{
         picture: Media;
         audio: Media;
         vernacularName: string;
         acceptedScientificName: string;
         urlDetailPage: string;
+        description?: string;
     }>();
 
+    const showModal = ref(false);
+
+    const openModal = () => {
+        showModal.value = true;
+    };
+
+    const closeModal = () => {
+        showModal.value = false;
+    };
+
     const sizeIcon = computed(() => {
         return isMobile.value ? 50 : 30;
     });
 </script>
-
 <template>
     <div class="col card thumbnail" data-testid="Taxon thumbnail view">
         <Image :image-url="props.picture?.url" :alt="props.picture?.url" />
@@ -38,6 +46,13 @@
                             props.vernacularName
                         }}</span>
                     </a>
+                    <button
+                        class="btn-plus"
+                        @click.stop="openModal"
+                        aria-label="Plus d'informations"
+                    >
+                        <i class="bi bi-plus-lg"></i>
+                    </button>
                 </div>
 
                 <!-- Bottom Controls (audio + copyright) -->
@@ -75,31 +90,80 @@
                 </div>
             </div>
         </FullScreenImage>
+        <!-- Modal -->
+        <div v-if="showModal" class="modal-overlay" @click="closeModal">
+            <div class="modal-container" @click.stop>
+                <div class="modal-header">
+                    <button
+                        class="modal-close"
+                        @click="closeModal"
+                        aria-label="Fermer"
+                    >
+                        <i class="bi bi-x"></i>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <p v-if="props.description" class="modal-text">
+                        {{ props.description }}
+                    </p>
+                    <a
+                        :href="props.urlDetailPage"
+                        target="_blank"
+                        class="detail-link"
+                    >
+                        Voir la page détaillée →
+                    </a>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
-
 <style scoped>
     .card {
         border: 0;
         align-content: space-around;
         position: relative;
+        overflow: hidden;
     }
-
     .card-img {
         object-fit: cover;
         width: 100%;
         aspect-ratio: 1/1;
         display: block;
     }
-
     .card-title {
         color: #fff;
         font-size: 1rem;
         font-weight: 600;
         z-index: 2;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .btn-plus {
+        background: #efefef;
+        backdrop-filter: blur(8px);
+        border: none;
+        color: #afafaf;
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        line-height: 0;
+        cursor: pointer;
+        padding: 0;
+        margin: 0;
+        flex-shrink: 0;
+    }
+
+    .btn-plus:hover {
+        background: rgba(255, 255, 255, 0.3);
     }
 
-    /* Overlay covers the image */
     .card-img-overlay {
         position: absolute;
         inset: 0;
@@ -107,20 +171,18 @@
         flex-direction: column;
         justify-content: space-between;
         padding: 16px 20px;
+        overflow: hidden;
     }
-
     .vernacularName {
         text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
         font-size: 1rem;
         font-weight: 600;
     }
-
     .bottom-controls {
         display: flex;
         justify-content: space-between;
         align-items: center;
     }
-
     .player,
     .copyright-icon {
         display: flex;
@@ -128,26 +190,129 @@
         justify-content: center;
         color: #fff;
     }
-
     .copyright-icon i {
         color: #fff;
         line-height: 1;
     }
 
+    /* Modal Styles */
+    .modal-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.3);
+        backdrop-filter: blur(8px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 100;
+        padding: 15px;
+    }
+
+    .modal-container {
+        background: #fff;
+        border-radius: 8px;
+        width: 100%;
+        max-height: 100%;
+        display: flex;
+        flex-direction: column;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+    }
+
+    .modal-header {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        padding: 10px;
+        flex-shrink: 0;
+        position: sticky;
+        top: 0;
+        z-index: 10;
+    }
+
+    .modal-close {
+        background: rgba(255, 255, 255, 0.95);
+        border: none;
+        font-size: 28px;
+        line-height: 0;
+        color: #333;
+        cursor: pointer;
+        padding: 0;
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        flex-shrink: 0;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    }
+
+    .modal-close:hover {
+        background: #fff;
+        color: #000;
+    }
+
+    .modal-body {
+        padding: 15px;
+        padding-top: 0;
+        overflow-y: auto;
+        flex: 1;
+    }
+
+    .modal-text {
+        margin: 0 0 12px 0;
+        color: #444;
+        line-height: 1.5;
+        font-size: 0.95rem;
+    }
+
+    .modal-text strong {
+        color: #222;
+    }
+
+    .detail-link {
+        display: inline-block;
+        margin-top: 8px;
+        color: #0066cc;
+        text-decoration: none;
+        font-weight: 500;
+        font-size: 0.95rem;
+    }
+
+    .detail-link:hover {
+        text-decoration: underline;
+    }
+
     @media screen and (max-width: 1200px) {
         .card-title span {
             font-size: 1rem;
         }
     }
-
     /* --- Mobile --- */
     @media screen and (max-width: 768px) {
         .card-title span {
             font-size: 2rem;
         }
-
         .bottom-controls {
             padding: 0 5px;
         }
+
+        .btn-plus {
+            width: 40px;
+            height: 40px;
+            font-size: 24px;
+        }
+
+        .modal-overlay {
+            padding: 30px;
+        }
+
+        .modal-text {
+            font-size: 1.1rem;
+        }
+
+        .detail-link {
+            font-size: 1.1rem;
+        }
     }
 </style>
diff --git a/src/components/core/taxonList/TaxonView.vue b/src/components/core/taxonList/TaxonView.vue
index 2a6a1fa9..33dc7c2f 100644
--- a/src/components/core/taxonList/TaxonView.vue
+++ b/src/components/core/taxonList/TaxonView.vue
@@ -94,6 +94,7 @@
         :vernacular-name="vernacularName || taxon.acceptedScientificName"
         :url-detail-page="fetchDetailUrl(taxon.taxonId)"
         :accepted-scientific-name="taxon.acceptedScientificName"
+        :description="description"
     >
     </TaxonThumbnail>
     <TaxonDetailed

From 79cb9d0490ae10b2a1f35fd02f3497505011e553 Mon Sep 17 00:00:00 2001
From: jacquesfize <jacques.fize@gmail.com>
Date: Sun, 21 Dec 2025 14:02:59 +0100
Subject: [PATCH 3/3] fix lint

---
 src/lib/connectors/gbif.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/lib/connectors/gbif.ts b/src/lib/connectors/gbif.ts
index 07bb02b5..e9252fe8 100644
--- a/src/lib/connectors/gbif.ts
+++ b/src/lib/connectors/gbif.ts
@@ -200,9 +200,8 @@ export class GbifConnector extends Connector {
                                 };
                             }
 
-                            taxonsData[
-                                observation.taxonKey
-                            ].nbObservations += 1;
+                            taxonsData[observation.taxonKey].nbObservations +=
+                                1;
                             taxonsData[observation.taxonKey].lastSeenDate =
                                 new Date(
                                     Math.max(