fix: make it work with worse motions

This fixes:

1. The inability to scroll down to 'contacts' and other lower sections.
   We just expand the second-to-last section to allow the browser to
   scroll.
2. Updating the currently active section - this now uses a global view
   of all visible sections that is updated by the observer diff, thereby
   fixing the logic.

src/components/landing-page.tsx

@@ -51,7 +51,7 @@ function NewSection({
   after?: ReactElement;
 }) {
   return (<section id={id} className="bg-background">
-    <div className="container mx-auto px-4 gap-6 flex flex-col">
+    <div className="container mx-auto px-4 gap-8 flex flex-col">
       {children}
       {after}
     </div>

src/components/nav.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { useColorSections } from "@/hooks/color-sections"
-import { type translations } from "@/i18n/translations"
+import { Sections, type translations } from "@/i18n/translations"
 import { cn } from "@/lib/utils"
 import { useRef } from "react"
 import { MobileNav } from "./mobile-nav"
@@ -20,7 +20,19 @@ export function MainpageNav({
   t: typeof translations.pl
 }) {
   const parent = useRef<HTMLDivElement>(null);
-  useColorSections(parent);
+  const previous = useRef<Sections>(linksOrder[0])
+  const forceIgnore = useRef<boolean>(false);
+  useColorSections(parent, previous, forceIgnore);
+
+  function setCurrentUnderline(id: typeof linksOrder[number]) {
+    forceIgnore.current = true;
+    previous.current = id;
+
+    document.querySelectorAll('[data-sub]').forEach(x => x.classList.remove('scale-x-100'));
+    document.querySelectorAll('[data-link]').forEach(x => x.classList.remove('text-primary'));
+    document.querySelector(`[data-sub="${id}"]`)?.classList.add('scale-x-100');
+    document.querySelector(`[data-link="${id}"]`)?.classList.add('text-primary');
+  }
 
   return (
     <NavContainer title={t.nav.title}>
@@ -31,7 +43,11 @@ export function MainpageNav({
             <a
               key={value}
               href={`#${value}`}
+              onClick={(e) => {
+                setCurrentUnderline(value)
+              }}
               className="text-sm md:text-md hover:text-primary transition-colors relative group will-change-[color]"
+              data-link={value}
             >
               {t.nav[value]}
               <span data-sub={value} className={cn("absolute inset-x-0 -bottom-1 h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform will-change-transform", {

src/globals.css

@@ -142,9 +142,6 @@
   body {
     @apply bg-background text-foreground;
   }
-  html {
-    scroll-behavior: smooth;
-  }
 }
 
 .parallax-video {
@@ -156,6 +153,7 @@
   z-index: 10000;
 }
 
+/* Fix scrolling to section by fragment, making sure it shows in the right spot and not behind the navbar. */
 section {
   scroll-margin-top: calc(var(--spacing) * 16 + var(--spacing) * 4);
 }

src/hooks/color-sections.tsx

@@ -1,24 +1,34 @@
 import { Sections } from "@/i18n/translations";
-import { useLayoutEffect, useRef } from "react";
+import { useLayoutEffect } from "react";
 
 export const linksOrder: Array<Sections> = [
   "about",
   "tickets",
   "cfp",
   "details",
-  "contact"
+  "contact",
 ]
 
-export function useColorSections(parent: React.RefObject<HTMLDivElement | null>) {
+/**
-  const previous = useRef<Sections>(linksOrder[0])
+ * Those links need to be reverted to account for the smallest section at the bottom.
+ * This way the intersection still pops the event at correct time, but now
+ * we account for 'contact' too!
+ */
+const reversedLinks = linksOrder.toReversed();
+
+export function useColorSections(parent: React.RefObject<HTMLDivElement | null>, previous: React.RefObject<typeof linksOrder[number]>, forceIgnore: React.MutableRefObject<boolean>) {
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
 
   useLayoutEffect(() => {
+    if (prefersReducedMotion.matches) {
+      return;
+    }
     if (parent.current === null) return;
 
     const options = {
       root: null,
-      rootMargin: "-10px",
+      rootMargin: "80px 0px 0px 0px", // Top 60% of viewport should matter
-      threshold: 0.5, // Adjust the visibility threshold as needed
+      threshold: 0.4, // Adjust the visibility threshold as needed
     };
 
 
@@ -32,27 +42,48 @@ export function useColorSections(parent: React.RefObject<HTMLDivElement | null>)
       return acc;
     }, {} as Record<Sections, HTMLAnchorElement>);
 
-    console.log(links)
+
+    // Set of currently intersecting sections by ID.
+    let intersecting: Set<string> = new Set;
+
+    function setCurrentUnderline(id: typeof linksOrder[number]) {
+      for (const sub of Object.values(subs)) {
+        sub.classList.remove('scale-x-100');
+      }
+      for (const link of Object.values(links)) {
+        link.classList.remove('text-primary');
+      }
+      previous.current = id;
+
+      subs[previous.current]?.classList.add('scale-x-100');
+      links[previous.current]?.classList.add('text-primary');
+    }
 
     const observer = new IntersectionObserver((entries) => {
-
+      if (forceIgnore.current) {
+        window.onscrollend = () => {
+          forceIgnore.current = false
+        }
+        return;
+      }
+      // Update intersection set based on diff.
+      const startedIntersecting: Set<string> = new Set;
+      const stoppedIntersecting: Set<string> = new Set;
       for (const entry of entries) {
-        const target = entry.target.id as Sections
         if (entry.isIntersecting) {
-          // FIXME: This seems to be VERY broken on firefox.
+          startedIntersecting.add(entry.target.id);
-          // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1250972
+        } else {
-          // It basically spikes up CPU usage to some enormous values just to update the hash, like WTF firefox.
+          stoppedIntersecting.add(entry.target.id);
-          // if (history.replaceState) {
+        }
-          //   timeout = setTimeout(() => {
+      }
-          //     history.replaceState(null, "", `#${target}`)
+      intersecting = intersecting.difference(stoppedIntersecting);
-          //   }, 150)
+      intersecting = intersecting.union(startedIntersecting);
-          // }
-          subs[previous.current]?.classList.remove('scale-x-100');
-          links[previous.current]?.classList.remove('text-primary');
-          previous.current = target;
 
-          subs[previous.current]?.classList.add('scale-x-100');
+      // Act upon intersection set to find the lowest intersecting section -
-          links[previous.current]?.classList.add('text-primary');
+      // that's our 'active' section.
+      for (const id of reversedLinks) {
+        if (intersecting.has(id)) {
+          setCurrentUnderline(id);
           break;
         }
       }
@@ -67,6 +98,19 @@ export function useColorSections(parent: React.RefObject<HTMLDivElement | null>)
     return () => {
       observer.disconnect()
     };
-  }, [parent]);
+  }, [forceIgnore, parent, prefersReducedMotion.matches, previous]);
+
+  // Initialize the colors once
+  useLayoutEffect(() => {
+    if (prefersReducedMotion.matches) {
+      return;
+    }
+    const sub = document.querySelector('[data-sub="' + linksOrder[0] + '"]');
+    const link = document.querySelector('[href="#' + linksOrder[0] + '"]');
+    if (sub && link) {
+      sub.classList.add('scale-x-100');
+      link.classList.add('text-primary');
+    }
+  }, [prefersReducedMotion.matches]);
 
 }