fix(glossaire): align reading follow top actions with glossary navigation

Reviewed-on: #303

package.json

@@ -10,7 +10,8 @@
     "clean": "rm -rf dist",
     "build": "astro build",
     "build:clean": "npm run clean && npm run build",
-    "postbuild": "node scripts/inject-anchor-aliases.mjs && node scripts/dedupe-ids-dist.mjs && node scripts/build-para-index.mjs && node scripts/build-annotations-index.mjs && node scripts/purge-dist-dev-whoami.mjs && npx pagefind --site dist",
+    "build:search": "pagefind --site dist",
+    "postbuild": "node scripts/inject-anchor-aliases.mjs && node scripts/dedupe-ids-dist.mjs && node scripts/build-para-index.mjs && node scripts/build-annotations-index.mjs && node scripts/purge-dist-dev-whoami.mjs && npm run build:search",
     "import": "node scripts/import-docx.mjs",
     "apply:ticket": "node scripts/apply-ticket.mjs",
     "audit:dist": "node scripts/audit-dist.mjs",

src/components/GlossaryEntryHero.astro

@@ -91,31 +91,44 @@ const hasScholarlyMeta =
   }
 
   .glossary-entry-head__title{
-    padding: 18px 18px 16px;
+    padding:
+      var(--entry-hero-pad-top, 18px)
+      var(--entry-hero-pad-x, 18px)
+      calc(var(--entry-hero-pad-top, 18px) - 2px);
+    transition: padding 180ms ease;
   }
-
+  
   .glossary-entry-head h1{
     margin: 0;
-    font-size: clamp(2.2rem, 4vw, 3.15rem);
+    font-size: var(--entry-hero-h1-size, clamp(2.2rem, 4vw, 3.15rem));
     line-height: 1.02;
     letter-spacing: -.04em;
     font-weight: 850;
+    transition: font-size 180ms ease;
   }
 
   .glossary-entry-summary{
     display: grid;
-    gap: 14px;
+    gap: var(--entry-hero-gap, 14px);
-    padding: 16px 18px 18px;
+    padding:
+      calc(var(--entry-hero-pad-bottom, 18px) - 2px)
+      var(--entry-hero-pad-x, 18px)
+      var(--entry-hero-pad-bottom, 18px);
     border-top: 1px solid rgba(127,127,127,0.14);
     background: rgba(255,255,255,0.02);
+    transition: gap 180ms ease, padding 180ms ease;
   }
 
   .glossary-entry-dek{
     margin: 0;
-    max-width: 76ch;
+    max-width: var(--entry-hero-dek-maxw, 76ch);
-    font-size: 1.04rem;
+    font-size: var(--entry-hero-dek-size, 1.04rem);
-    line-height: 1.55;
+    line-height: var(--entry-hero-dek-lh, 1.55);
     opacity: .94;
+    transition:
+      max-width 180ms ease,
+      font-size 180ms ease,
+      line-height 180ms ease;
   }
 
   .glossary-entry-signals{
@@ -123,6 +136,7 @@ const hasScholarlyMeta =
     flex-wrap: wrap;
     gap: 8px;
     margin: 0;
+    transition: gap 180ms ease;
   }
 
   .glossary-pill{
@@ -135,6 +149,11 @@ const hasScholarlyMeta =
     background: rgba(127,127,127,0.05);
     font-size: 13px;
     line-height: 1.35;
+    transition:
+      padding 180ms ease,
+      font-size 180ms ease,
+      background 120ms ease,
+      border-color 120ms ease;
   }
 
   .glossary-pill--family{
@@ -148,6 +167,14 @@ const hasScholarlyMeta =
     border: 1px solid rgba(127,127,127,0.18);
     border-radius: 12px;
     background: rgba(127,127,127,0.04);
+    max-height: var(--entry-hero-meta-max-h, 12rem);
+    opacity: var(--entry-hero-meta-opacity, 1);
+    overflow: hidden;
+    transition:
+      max-height 180ms ease,
+      opacity 140ms ease,
+      padding 180ms ease,
+      border-color 180ms ease;
   }
 
   .glossary-entry-meta p{

src/components/GlossaryEntryStickySync.astro

@@ -114,6 +114,10 @@
     z-index: 10;
   }
 
+  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-signals){
+    gap: 6px;
+  }
+
   :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-head){
     margin-bottom: 0;
     border-bottom-left-radius: 0;
@@ -126,12 +130,21 @@
     padding-bottom: 10px;
   }
 
-  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-signals){
+  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-dek){
-    gap: 6px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+
+  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-pill){
+    padding: 4px 8px;
+    font-size: 12px;
   }
 
   :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-meta){
-    padding: 8px 10px;
+    padding: 0;
+    border-color: transparent;
   }
 
   :global(body.is-glossary-entry-page.glossary-entry-follow-on #reading-follow){

src/components/GlossaryRelationCards.astro

@@ -7,12 +7,15 @@ interface Props {
 }
 
 const { relationBlocks = [] } = Astro.props;
+const relationsHeadingId = "relations-conceptuelles";
 ---
 
 {relationBlocks.length > 0 && (
-  <section class="glossary-relations" aria-label="Relations conceptuelles">
+  <section
-    <h2>Relations conceptuelles</h2>
+    class="glossary-relations"
-
+    aria-labelledby={relationsHeadingId}
+  >
+    <h2 id={relationsHeadingId}>Relations conceptuelles</h2>
     <div class="glossary-relations-grid">
       {relationBlocks.map((block) => (
         <section class={`glossary-relations-card ${block.className}`}>

src/layouts/EditionLayout.astro

@@ -1478,6 +1478,33 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
 
     const h1 = reading.querySelector("h1");
 
+    const topChapterLabel =
+      isGlossaryEntryMode
+        ? "Haut de la fiche"
+        : isGlossaryEdition
+          ? "Haut de la page"
+          : "Haut du chapitre";
+
+    if (btnTopChapter) {
+      btnTopChapter.setAttribute("aria-label", topChapterLabel);
+      btnTopChapter.setAttribute("title", topChapterLabel);
+    }
+
+    function scrollToTopChapter(behavior = "smooth") {
+      if (isGlossaryEdition) {
+        window.scrollTo({ top: 0, behavior });
+        return;
+      }
+
+      if (h1) {
+        scrollToElWithOffset(h1, 12, behavior);
+      }
+    }
+
+    function getH2ScrollTarget(item) {
+      return item?.h2 || item?.anchor || item?.marker || null;
+    }
+
     const h2Anchors = Array.from(reading.querySelectorAll(".details-anchor[id]"))
       .map((s) => {
         const d = (s.nextElementSibling && s.nextElementSibling.tagName === "DETAILS")
@@ -1500,6 +1527,7 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
       .filter(Boolean);
 
     const h2Plain = Array.from(reading.querySelectorAll("h2[id]"))
+      .filter((h2) => !h2.closest("details.details-section"))
       .map((h2) => ({
         id: h2.id,
         anchor: h2,
@@ -1508,7 +1536,7 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
         h2,
       }));
 
-    const H2 = (h2Anchors.length ? h2Anchors : h2Plain)
+    const H2 = [...h2Anchors, ...h2Plain]
       .slice()
       .sort((a, b) => absTop(a.marker) - absTop(b.marker));
 
@@ -1700,7 +1728,12 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
       syncGlossaryFollowState(followEl.classList.contains("is-on") && followH > 0);
 
       if (btnTopChapter) {
-        btnTopChapter.hidden = !(rfH1 && !rfH1.hidden);
+        const showTopChapter =
+          isGlossaryEdition
+            ? Boolean(followEl.classList.contains("is-on"))
+            : Boolean(rfH1 && !rfH1.hidden);
+
+        btnTopChapter.hidden = !showTopChapter;
       }
 
       if (btnTopSection) {
@@ -1736,8 +1769,11 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     if (rfH2) {
       rfH2.addEventListener("click", () => {
         if (!curH2) return;
-        openDetailsIfNeeded(curH2.anchor || curH2.h2 || curH2.marker);
+        const target = getH2ScrollTarget(curH2);
-        scrollToElWithOffset(curH2.marker, 12, "smooth");
+        if (!target) return;
+
+        openDetailsIfNeeded(target);
+        scrollToElWithOffset(target, 12, "smooth");
         history.replaceState(null, "", `${window.location.pathname}#${curH2.id}`);
       });
     }
@@ -1753,15 +1789,18 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
 
     if (btnTopChapter) {
       btnTopChapter.addEventListener("click", () => {
-        if (h1) scrollToElWithOffset(h1, 12, "smooth");
+        scrollToTopChapter("smooth");
       });
     }
 
     if (btnTopSection) {
       btnTopSection.addEventListener("click", () => {
         if (!curH2) return;
-        openDetailsIfNeeded(curH2.anchor || curH2.h2 || curH2.marker);
+        const target = getH2ScrollTarget(curH2);
-        scrollToElWithOffset(curH2.marker, 12, "smooth");
+        if (!target) return;
+
+        openDetailsIfNeeded(target);
+        scrollToElWithOffset(target, 12, "smooth");
         history.replaceState(null, "", `${window.location.pathname}#${curH2.id}`);
       });
     }

src/layouts/GlossaryLayout.astro

@@ -26,6 +26,38 @@ const {
 </EditionLayout>
 
 <style is:global>
+  body[data-edition-key="glossaire"][data-sticky-mode="glossary-entry"]{
+    --entry-hero-pad-top: 18px;
+    --entry-hero-pad-x: 18px;
+    --entry-hero-pad-bottom: 18px;
+    --entry-hero-gap: 14px;
+
+    --entry-hero-h1-size: clamp(2.2rem, 4vw, 3.15rem);
+
+    --entry-hero-dek-size: 1.04rem;
+    --entry-hero-dek-lh: 1.55;
+    --entry-hero-dek-maxw: 76ch;
+
+    --entry-hero-meta-max-h: 12rem;
+    --entry-hero-meta-opacity: 1;
+  }
+
+  body[data-edition-key="glossaire"][data-sticky-mode="glossary-entry"].glossary-entry-follow-on{
+    --entry-hero-pad-top: 8px;
+    --entry-hero-pad-x: 14px;
+    --entry-hero-pad-bottom: 6px;
+    --entry-hero-gap: 6px;
+
+    --entry-hero-h1-size: clamp(1.45rem, 2.4vw, 1.9rem);
+
+    --entry-hero-dek-size: .90rem;
+    --entry-hero-dek-lh: 1.32;
+    --entry-hero-dek-maxw: 56ch;
+
+    --entry-hero-meta-max-h: 0px;
+    --entry-hero-meta-opacity: 0;
+  }
+
   body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"]{
     --portal-hero-pad-top: 18px;
     --portal-hero-pad-x: 18px;

src/lib/glossary.ts

@@ -201,6 +201,36 @@ export function uniqueGlossaryEntries(
   return out;
 }
 
+export function slugsOfGlossaryEntries(
+    entries: GlossaryEntry[] = [],
+  ): Set<string> {
+    const slugs = new Set<string>();
+  
+    for (const entry of entries) {
+      const slug = slugOfGlossaryEntry(entry);
+      if (!slug) continue;
+      slugs.add(slug);
+    }
+  
+    return slugs;
+  }
+  
+  export function excludeGlossaryEntries(
+    entries: GlossaryEntry[] = [],
+    excluded: Iterable<string> = [],
+  ): GlossaryEntry[] {
+    const excludedSlugs = new Set(
+      Array.from(excluded)
+        .map((value) => normalizeGlossarySlug(value))
+        .filter(Boolean),
+    );
+  
+    return entries.filter((entry) => {
+      const slug = slugOfGlossaryEntry(entry);
+      return Boolean(slug) && !excludedSlugs.has(slug);
+    });
+  }
+
 export function resolveGlossaryEntriesInSourceOrder(
   slugs: string[] = [],
   allEntries: GlossaryEntry[] = [],
@@ -504,11 +534,27 @@ export function getGlossaryEntryAsideData(
   allEntries: GlossaryEntry[] = [],
 ): GlossaryEntryAsideData {
   const currentFamily = familyOf(currentEntry);
+  const currentSlug = slugOfGlossaryEntry(currentEntry);
+
   const fondamentaux = getFondamentaux(allEntries);
-  const sameFamilyEntries = getEntriesOfSameFamily(currentEntry, allEntries);
   const sameFamilyTitle = getSameFamilyTitle(currentEntry);
   const relationSections = getRelationSections(currentEntry, allEntries);
-  const contextualTheory = getContextualTheory(currentEntry, allEntries);
+
+  const relationEntries = uniqueGlossaryEntries(
+    relationSections.flatMap((section) => section.items),
+  );
+  const relationSlugs = slugsOfGlossaryEntries(relationEntries);
+
+  const contextualTheory = excludeGlossaryEntries(
+    getContextualTheory(currentEntry, allEntries),
+    new Set([currentSlug, ...relationSlugs]),
+  ).slice(0, 6);
+  const contextualTheorySlugs = slugsOfGlossaryEntries(contextualTheory);
+
+  const sameFamilyEntries = excludeGlossaryEntries(
+    getEntriesOfSameFamily(currentEntry, allEntries),
+    new Set([currentSlug, ...relationSlugs, ...contextualTheorySlugs]),
+  ).slice(0, 8);
 
   const showNoyau =
     currentFamily !== "concept-fondamental" &&