feat: add sliding tab indicator and content crossfade animations

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/sites/[id]/SiteLayoutShell.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import { usePathname } from 'next/navigation'
+import { AnimatePresence, motion } from 'framer-motion'
 import SiteNav from '@/components/dashboard/SiteNav'
 
 export default function SiteLayoutShell({
@@ -9,12 +11,24 @@ export default function SiteLayoutShell({
   siteId: string
   children: React.ReactNode
 }) {
+  const pathname = usePathname()
+
   return (
     <>
       <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pt-8">
         <SiteNav siteId={siteId} />
       </div>
-      {children}
+      <AnimatePresence mode="wait">
+        <motion.div
+          key={pathname}
+          initial={{ opacity: 0, y: 6 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -6 }}
+          transition={{ duration: 0.15, ease: 'easeInOut' }}
+        >
+          {children}
+        </motion.div>
+      </AnimatePresence>
     </>
   )
 }

app/sites/[id]/page.tsx

@@ -4,7 +4,6 @@
 import { logger } from '@/lib/utils/logger'
 import { useCallback, useEffect, useState, useMemo } from 'react'
 import { useParams, useRouter, useSearchParams } from 'next/navigation'
-import { motion } from 'framer-motion'
 import {
   getPerformanceByPage,
   getTopPages,
@@ -432,12 +431,7 @@ export default function SiteDashboardPage() {
   }
 
   return (
-    <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{ duration: 0.2 }}
-      className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8"
-    >
+    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
       <div className="mb-8">
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-4">
@@ -649,6 +643,6 @@ export default function SiteDashboardPage() {
         topReferrers={referrers?.top_referrers}
         campaigns={campaigns}
       />
-    </motion.div>
+    </div>
   )
 }

app/sites/[id]/uptime/page.tsx

@@ -688,12 +688,7 @@ export default function UptimePage() {
   const overallStatus = uptimeData?.status ?? 'operational'
 
   return (
-    <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{ duration: 0.2 }}
-      className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8"
-    >
+    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
@@ -813,7 +808,7 @@ export default function UptimePage() {
           siteDomain={site.domain}
         />
       </Modal>
-    </motion.div>
+    </div>
   )
 }