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
+    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
-      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="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
+    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
-      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"
-    >
       {/* 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>
   )
 }
 

components/dashboard/SiteNav.tsx

@@ -2,6 +2,7 @@
 
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
+import { motion } from 'framer-motion'
 import { useTabListKeyboard } from '@/lib/hooks/useTabListKeyboard'
 import { useAuth } from '@/lib/auth/context'
 
@@ -39,13 +40,20 @@ export default function SiteNav({ siteId }: SiteNavProps) {
             role="tab"
             aria-selected={isActive(tab.href)}
             tabIndex={isActive(tab.href) ? 0 : -1}
-            className={`px-3 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange rounded-t cursor-pointer border-b-2 -mb-px ${
+            className={`relative px-3 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange rounded-t cursor-pointer -mb-px ${
               isActive(tab.href)
-                ? 'border-brand-orange text-neutral-900 dark:text-white'
+                ? 'text-neutral-900 dark:text-white'
-                : 'border-transparent text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
+                : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
             }`}
           >
             {tab.label}
+            {isActive(tab.href) && (
+              <motion.div
+                layoutId="activeTab"
+                className="absolute inset-x-0 -bottom-px h-0.5 bg-brand-orange"
+                transition={{ type: 'spring', stiffness: 500, damping: 35 }}
+              />
+            )}
           </Link>
         ))}
       </nav>