feat: ship blog platform admin and deploy stack

frontend/src/components/interactive/BackToTop.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { fade } from 'svelte/transition';
 
   let showButton = false;
   const scrollThreshold = 300;
 
-  onMount(() => {
-    const handleScroll = () => {
-      showButton = window.scrollY > scrollThreshold;
-    };
+  function handleScroll() {
+    showButton = (window.scrollY || document.documentElement.scrollTop) > scrollThreshold;
+  }
 
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
+  onMount(() => {
+    handleScroll();
+    window.addEventListener('scroll', handleScroll, { passive: true });
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
   });
 
   function scrollToTop() {
@@ -22,17 +25,12 @@
   }
 </script>
 
-{#if showButton}
-  <div 
-    class="fixed bottom-5 right-5 z-50"
-    transition:fade={{ duration: 200 }}
-  >
-    <button
-      on:click={scrollToTop}
-      class="flex items-center gap-1.5 px-3 py-2 rounded-lg border border-[var(--primary)] bg-[var(--primary-light)] text-[var(--primary)] hover:bg-[var(--primary)] hover:text-[var(--terminal-bg)] transition-all text-sm font-mono"
-    >
-      <i class="fas fa-arrow-up"></i>
-      <span>top</span>
-    </button>
-  </div>
-{/if}
+<button
+  class={`fixed bottom-8 right-8 z-50 flex h-12 w-12 items-center justify-center rounded-full border border-[var(--border-color)] bg-[var(--header-bg)] text-[var(--text-secondary)] shadow-lg transition-all hover:border-[var(--primary)] hover:text-[var(--primary)] ${
+    showButton ? 'translate-y-0 opacity-100' : 'pointer-events-none translate-y-4 opacity-0'
+  }`}
+  aria-label="Back to top"
+  on:click={scrollToTop}
+>
+  <i class="fas fa-chevron-up"></i>
+</button>