From 0afbcf40884f4111c353a2fc41ce2d86f7f001a1 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Wed, 1 Apr 2026 19:16:58 +0200
Subject: [PATCH] footer : fix show/hide logic, transition and scroll throttle.
 related to #51

- Fix scroll listener (cleanup, local querySelector, scrollHeight calc)
- Fix media query syntax in variables.css (missing space in `and (`)
- Use transform: translateY instead of bottom for GPU-accelerated transition
- Throttle scroll handler with requestAnimationFrame
- Move Footer to App.svelte (global), remove per-view imports

refs #51

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.svelte                      |  3 ++
 src/components/layout/Footer.svelte | 71 ++++++++++++++---------------
 src/styles/layout.css               |  4 ++
 src/styles/variables.css            |  8 ++++
 src/views/About.svelte              |  3 --
 src/views/Article.svelte            |  3 --
 src/views/Blog.svelte               |  3 --
 src/views/Privacy.svelte            |  3 --
 src/views/WhitePapers.svelte        |  3 --
 9 files changed, 48 insertions(+), 53 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 9ceb7af..911daab 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -5,6 +5,7 @@
 
   import Header from '@components/layout/Header.svelte'
   import Cursor from '@components/layout/Cursor.svelte'
+  import Footer from '@components/layout/Footer.svelte'
   import LanguageSwitcher from '@components/ui/LanguageSwitcher.svelte'
 
   import Home from '@views/Home.svelte'
@@ -173,6 +174,8 @@
 </main>
 <LanguageSwitcher />
 
+<Footer />
+
 <style>
   :global(#app) {
     height: 100vh;
diff --git a/src/components/layout/Footer.svelte b/src/components/layout/Footer.svelte
index 2c91970..bdff816 100644
--- a/src/components/layout/Footer.svelte
+++ b/src/components/layout/Footer.svelte
@@ -2,38 +2,45 @@
   import { site } from '@state/site.svelte'
   import { locale } from '@state/locale.svelte'
   import { t } from '@i18n'
+  import { slides } from '@state/slides.svelte'
 
   const logo    = $derived(site.logo)
   const title   = $derived(site.title || 'World Game')
   const contact = $derived(site.contact || {})
   const socials = $derived(contact.socials ?? [])
   const year    = new Date().getFullYear()
+  let isHidden = $state(true)
 
-  let email  = $state('')
-  let status = $state(null)
+  $effect(() => {
+    const activeSlide = document.querySelector('.slide[data-slide="' + slides.active?.id + '"]')
+    const scrollableContainer = activeSlide?.querySelector('.page-scrollable')
 
-  async function handleSubscribe(e) {
-    e.preventDefault()
-    if (!email) return
-    try {
-      const res = await fetch('/newsletter.json', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email })
+    isHidden = true
+
+    if (!scrollableContainer) return
+
+    let rafId = null
+    function onScroll() {
+      if (rafId) return
+      rafId = requestAnimationFrame(() => {
+        const threshold = window.innerWidth > 800 ? 100 : 200
+        const atBottom = scrollableContainer.scrollTop >= scrollableContainer.scrollHeight - scrollableContainer.clientHeight - threshold
+        isHidden = !atBottom
+        rafId = null
       })
-      if (res.ok) {
-        status = { type: 'success', message: t('newsletter_success') }
-        email = ''
-      } else {
-        status = { type: 'error', message: t('newsletter_error') }
-      }
-    } catch {
-      status = { type: 'error', message: t('newsletter_error') }
     }
-  }
+
+    scrollableContainer.addEventListener('scroll', onScroll)
+    onScroll()
+
+    return () => {
+      scrollableContainer.removeEventListener('scroll', onScroll)
+      if (rafId) cancelAnimationFrame(rafId)
+    }
+  })
 </script>
 
-<footer class="page-scrollable-footer">
+<footer class={["page-scrollable-footer", {hidden: isHidden}]}>
   <div class="footer-main">
 
     <!-- Logo -->
@@ -98,18 +105,17 @@
 
 <style>
   footer {
+    position: absolute;
     width: 100vw;
+    bottom: 0;
     background: #0d0e22;
     z-index: 2;
-  }
-  
-  :global(.collection .page-scrollable-footer) {
-    margin-left: -10.3rem;
-    margin-top: 5rem;
+
+    transition: transform .3s var(--ease-standard);
   }
 
-  :global(.article-wrapper .page-scrollable-footer) {
-    margin-left: -3.3rem;
+  footer.hidden {
+    transform: translateY(var(--footer-height));
   }
 
   /* --- Main row --- */
@@ -222,17 +228,6 @@
       width: 7%;
       height: 2px;
     }
-
-    :global(.collection .page-scrollable-footer) {
-      margin-left: -1.5rem;
-    }
-    :global(.article-wrapper .page-scrollable-footer) {
-      margin-left: -1.3rem;
-    }
-
-    :global(.about .page-scrollable-footer) {
-      margin-left: 0;
-    }
   }
 
   /* --- Tablet (701px–912px) --- */
diff --git a/src/styles/layout.css b/src/styles/layout.css
index fd43171..3c2adbe 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -20,6 +20,10 @@
   overflow-x: hidden;
 }
 
+.page-scrollable:not(.white-paper) .page-container > *:last-child {
+  padding-bottom: calc(var(--footer-height) + 5rem);
+}
+
 /* Vertical Lines — utilisées dans Menu.svelte (golden-grid) */
 .vertical-line {
   grid-area: auto;
diff --git a/src/styles/variables.css b/src/styles/variables.css
index 28a1db8..25bade1 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -62,4 +62,12 @@
   --font-size-expertise: 22px;
   --font-size-expertise-mobile: 18px;
   --font-size-expertise-tablet: 20px;
+
+  --footer-height: 13rem;
+}
+
+@media screen and (max-width: 800px) {
+  :root {
+    --footer-height: 29rem;
+  }
 }
diff --git a/src/views/About.svelte b/src/views/About.svelte
index 0251e07..11e2233 100644
--- a/src/views/About.svelte
+++ b/src/views/About.svelte
@@ -4,7 +4,6 @@
   import { navigation } from '@state/navigation.svelte'
 
   import { t } from '@i18n'
-  import Footer from '@components/layout/Footer.svelte'
 
   let { data } = $props()
 
@@ -168,8 +167,6 @@
         </div>
       </section>
     {/if}
-
-    <Footer />
   </div>
 </div>
 
diff --git a/src/views/Article.svelte b/src/views/Article.svelte
index 3c0da24..0d76a17 100644
--- a/src/views/Article.svelte
+++ b/src/views/Article.svelte
@@ -6,7 +6,6 @@
 
   import { t } from '@i18n'
   import { onMount } from 'svelte'
-  import Footer from '@components/layout/Footer.svelte'
   import WhitePaperDialog from '@components/WhitePaperDialog.svelte'
   import ShareButtons from '@components/blocks/ShareButtons.svelte'
   import ArticleRelated from '@components/blocks/ArticleRelated.svelte'
@@ -144,8 +143,6 @@
     <ArticleRelated related={data.related} />
   {/if}
 </article>
-
-<Footer />
 </div>
 
 <WhitePaperDialog uri={activeWhitePaperUri} onClose={() => activeWhitePaperUri = null} />
diff --git a/src/views/Blog.svelte b/src/views/Blog.svelte
index 7624b41..7dc8cbd 100644
--- a/src/views/Blog.svelte
+++ b/src/views/Blog.svelte
@@ -5,7 +5,6 @@
 
   import Article from '@views/Article.svelte'
   import { t } from '@i18n'
-  import Footer from '@components/layout/Footer.svelte'
 
   let { data } = $props()
 
@@ -183,8 +182,6 @@
       {#if articleLoading}
         <p class="collection-loading">{t('loading')}</p>
       {/if}
-
-      <Footer />
     </div>
 
   {/if}
diff --git a/src/views/Privacy.svelte b/src/views/Privacy.svelte
index c29c00d..e0f24d6 100644
--- a/src/views/Privacy.svelte
+++ b/src/views/Privacy.svelte
@@ -1,6 +1,5 @@
 <script>
   import { navigation } from '@state/navigation.svelte'
-  import Footer from '@components/layout/Footer.svelte'
 
   let { data } = $props()
 
@@ -28,8 +27,6 @@
         {/each}
       </section>
     {/if}
-
-    <Footer />
   </div>
 </div>
 
diff --git a/src/views/WhitePapers.svelte b/src/views/WhitePapers.svelte
index d6e87ca..8ff8708 100644
--- a/src/views/WhitePapers.svelte
+++ b/src/views/WhitePapers.svelte
@@ -4,7 +4,6 @@
   import { locale } from '@state/locale.svelte'
   import WhitePaper from '@views/WhitePaper.svelte'
   import { t } from '@i18n'
-  import Footer from '@components/layout/Footer.svelte'
 
   let { data } = $props()
 
@@ -154,8 +153,6 @@
       {#if itemLoading}
         <p class="collection-loading">{t('loading')}</p>
       {/if}
-
-      <Footer class="page-scrollable-footer" />
     </div>
   {/if}
 </section>