feat: add magic footer

Author: Flo0806

app/app.vue

@@ -50,15 +50,17 @@ onUnmounted(() => {
 
     <AppHeader :show-logo="!isHomepage" />
 
-    <div id="main-content" class="flex-1">
+    <div id="main-content" class="flex-1 flex flex-col">
       <NuxtPage />
     </div>
 
     <AppFooter />
+
+    <ScrollToTop />
   </div>
 </template>
 
-<style>
+<style lang="postcss">
 /* Base reset and defaults */
 *,
 *::before,
@@ -77,6 +79,7 @@ body {
   background-color: #0a0a0a;
   color: #fafafa;
   line-height: 1.6;
+  padding-bottom: var(--footer-height, 0);
 }
 
 /* Default link styling for accessibility on dark background */

app/components/AppFooter.vue

@@ -1,6 +1,79 @@
+<script setup lang="ts">
+const isVisible = ref(false)
+const isScrollable = ref(true)
+const lastScrollY = ref(0)
+const footerRef = ref<HTMLElement>()
+
+function checkScrollable() {
+  const mainContent = document.getElementById('main-content')
+  if (!mainContent) return true
+  return mainContent.scrollHeight > window.innerHeight
+}
+
+function onScroll() {
+  const currentY = window.scrollY
+  const diff = lastScrollY.value - currentY
+  const nearBottom = currentY + window.innerHeight >= document.documentElement.scrollHeight - 50
+
+  // Scrolling UP or near bottom -> show
+  if (Math.abs(diff) > 10) {
+    isVisible.value = diff > 0 || nearBottom
+    lastScrollY.value = currentY
+  }
+
+  // At top -> hide
+  if (currentY < 100) {
+    isVisible.value = false
+  }
+
+  // Near bottom -> always show
+  if (nearBottom) {
+    isVisible.value = true
+  }
+}
+
+function updateFooterPadding() {
+  const height = isScrollable.value && footerRef.value ? footerRef.value.offsetHeight : 0
+  document.documentElement.style.setProperty('--footer-height', `${height}px`)
+}
+
+onMounted(() => {
+  nextTick(() => {
+    lastScrollY.value = window.scrollY
+    isScrollable.value = checkScrollable()
+    updateFooterPadding()
+  })
+
+  window.addEventListener('scroll', onScroll, { passive: true })
+  window.addEventListener(
+    'resize',
+    () => {
+      isScrollable.value = checkScrollable()
+      updateFooterPadding()
+    },
+    { passive: true },
+  )
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', onScroll)
+})
+</script>
+
 <template>
-  <footer class="border-t border-border mt-auto">
-    <div class="container py-8 flex flex-col gap-4 text-fg-subtle text-sm">
+  <footer
+    ref="footerRef"
+    class="border-t border-border bg-bg"
+    :class="
+      isScrollable
+        ? [
+            'fixed bottom-0 left-0 right-0 z-40 transition-transform duration-300 ease-out',
+            isVisible ? 'translate-y-0' : 'translate-y-full',
+          ]
+        : 'mt-auto'
+    "
+  >
+    <div class="container py-6 flex flex-col gap-3 text-fg-subtle text-sm">
       <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
         <p class="font-mono m-0">a better browser for the npm registry</p>
         <div class="flex items-center gap-6">

app/pages/index.vue

@@ -20,11 +20,9 @@ defineOgImageComponent('Default')
 </script>
 
 <template>
-  <main class="container">
-    <!-- Hero section with dramatic vertical centering -->
-    <header
-      class="min-h-[calc(100vh-12rem)] flex flex-col items-center justify-center text-center py-20"
-    >
+  <main class="container min-h-screen flex flex-col">
+    <!-- Hero section with vertical centering -->
+    <header class="flex-1 flex flex-col items-center justify-center text-center py-20">
       <!-- Animated title -->
       <h1
         class="font-mono text-5xl sm:text-7xl md:text-8xl font-medium tracking-tight mb-4 animate-fade-in animate-fill-both"