fix: Improve socials and wave visibility condition

Author: Ushie

src/lib/components/Wave.svelte

@@ -1,13 +1,21 @@
-<svg viewBox="0 0 1440 500" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
+<script>
+	export let bottom = 0;
+</script>
+
+<svg
+	viewBox="0 0 1440 500"
+	xmlns="http://www.w3.org/2000/svg"
+	preserveAspectRatio="none"
+	style="bottom: {-bottom}; height: {bottom / 5 + 35}vh"
+>
 	<path class="wave" />
 </svg>
 
 <style>
 	svg {
+		transition: height 1s var(--bezier-one);
 		position: absolute;
 		z-index: -999;
-		bottom: 0;
-		height: 35vh;
 		width: 100%;
 	}
 

src/routes/+page.svelte

@@ -5,11 +5,33 @@
 	import Wave from '$lib/components/Wave.svelte';
 	import Footer from '$layout/Footer/FooterHost.svelte';
 	import Head from '$lib/components/Head.svelte';
+	import { onMount } from 'svelte';
 
 	let scrollY = 0;
 	let footerVisible = false;
 
-	$: footerVisible = scrollY >= 10;
+	// temporary fix until rewrite is out
+	function checkVisibility() {
+		if (scrollY === 0) return (footerVisible = false);
+
+		const el = document.querySelector('#skiptab > main > div.hide-on-scroll.s-y_bCXRrkrYfP > div');
+		const buffer = 24; // 1.5rem gap
+
+		if (!el) return (footerVisible = scrollY >= 24);
+
+		const rect = el.getBoundingClientRect();
+		footerVisible = rect.bottom + buffer <= window.innerHeight;
+	}
+
+	onMount(() => {
+		window.addEventListener('scroll', checkVisibility, { passive: true });
+		window.addEventListener('resize', checkVisibility);
+
+		return () => {
+			window.removeEventListener('scroll', checkVisibility);
+			window.removeEventListener('resize', checkVisibility);
+		};
+	});
 </script>
 
 <svelte:window bind:scrollY />
@@ -133,7 +155,7 @@
 		</div>
 	</div>
 	<div class="hide-on-scroll" class:hidden={footerVisible}>
-		<Wave />
+		<Wave bottom={scrollY} />
 		<SocialHost />
 	</div>
 </main>