chore: update dependencies

- Replace `next lint` with `eslint .` (next lint removed in v16)
- Migrate to ESLint flat config format
- Fix React 19 purity errors in FeatureImage and TopFade components
- Update components for Next.js 16 compatibility

components/FeatureImage.tsx

@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import { useId } from 'react';
 
 export default function FeatureImage({
   src,
@@ -11,13 +12,16 @@ export default function FeatureImage({
   height: number | `${number}`;
   alt: string;
 }) {
+  const id = useId();
+  const delay = (id.charCodeAt(1) % 5) + 0.5;
+
   return (
     <div className="relative rounded-[18px] p-px shadow-2xl">
       <div
         className="fade-in-out absolute top-0 right-0 bottom-0 left-0 z-0 rounded-[17px] bg-linear-to-tr from-[#4d094e] to-pink-500/70 p-[2px]"
         style={{
           WebkitMask: 'linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0))',
-          animationDelay: `${Math.floor(Math.random() * 5) + 1 * 0.5}s`,
+          animationDelay: `${delay}s`,
         }}
       ></div>
 

components/TopFade.tsx

@@ -1,42 +1,23 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useSyncExternalStore } from 'react';
 
-const calculatedBrightnessValue = () => {
-  if (typeof window === 'undefined') return null;
+const calculateBrightness = () => {
   if (window.scrollY > 200) return 0.5;
   const amountToDecrease = (window.scrollY / 200) * 0.5;
   return 1 - amountToDecrease;
 };
 
+const subscribe = (callback: () => void) => {
+  document.addEventListener('scroll', callback, true);
+  return () => document.removeEventListener('scroll', callback, true);
+};
+
+const getSnapshot = () => calculateBrightness();
+const getServerSnapshot = () => 1;
+
 export default function TopFade() {
-  const [brightness, setBrightness] = useState<number | null>(null);
+  const brightness = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 
-  useEffect(() => {
-    // Always set correct value when first render on client side
-    setBrightness(calculatedBrightnessValue());
-
-    const handleScroll = (event: Event) => {
-      if (window.scrollY > 200 && brightness === 0.5) return;
-      setBrightness(calculatedBrightnessValue());
-    };
-
-    document.addEventListener('scroll', handleScroll, true);
-    return () => {
-      document.removeEventListener('scroll', handleScroll, true);
-    };
-  }, [brightness]);
-
-  return (
-    <div
-      className="top-fade pointer-events-none"
-      style={
-        brightness
-          ? {
-              filter: `brightness(${brightness})`,
-            }
-          : {}
-      }
-    ></div>
-  );
+  return <div className="top-fade pointer-events-none" style={{ filter: `brightness(${brightness})` }}></div>;
 }