Merge pull request #41 from ciphera-net/staging

fix: add Cache-Control no-cache for HTML pages to prevent stale CDN content
2026-03-07 22:04:22 +01:00
parent 985978dd8f 2f5bcf479a
commit 831fd86f67
9 changed files with 119 additions and 63 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),

 ## [Unreleased]

+### Improved
+
+- **Cleaner site navigation.** Dashboard, Uptime, Funnels, and Settings now use an underline tab bar instead of floating buttons. The active section is highlighted with an orange underline, making it easy to see where you are and switch between views.
+
+### Fixed
+
+- **Login no longer gets stuck after updates.** If you happened to have Pulse open when a new version was deployed, logging back in could get stuck on a loading screen. The app now automatically refreshes itself to pick up the latest version.
+- **City and region data is now accurate.** Location data was incorrectly showing the CDN server's location (e.g. Paris, Villeurbanne) instead of the visitor's actual city. Fixed by reading the correct visitor IP header from Bunny CDN.
+- **"Reset Data" now clears everything.** Previously, resetting a site's data in Settings only removed pageviews and daily stats. Uptime check history, uptime daily stats, and cached dashboard data were left behind. All collected data is now properly cleared when you reset, while your site configuration, goals, funnels, and uptime monitors are kept.
+
 ## [0.13.0-alpha] - 2026-03-07

 ### Added
--- a/app/auth/callback/page.tsx
+++ b/app/auth/callback/page.tsx
@@ -22,7 +22,14 @@ function AuthCallbackContent() {
    const codeVerifier = localStorage.getItem('oauth_code_verifier')
    const redirectUri = typeof window !== 'undefined' ? window.location.origin + '/auth/callback' : ''
    if (!code) return
-    const result = await exchangeAuthCode(code, codeVerifier, redirectUri)
+    let result: Awaited<ReturnType<typeof exchangeAuthCode>>
+    try {
+      result = await exchangeAuthCode(code, codeVerifier, redirectUri)
+    } catch {
+      // * Stale build or network error — show error so user can retry via full navigation
+      setError('Something went wrong. Please try logging in again.')
+      return
+    }
    if (result.success && result.user) {
      // * Fetch full profile (including display_name) before navigating so header shows correct name on first paint
      try {
--- a/app/sites/[id]/funnels/page.tsx
+++ b/app/sites/[id]/funnels/page.tsx
@@ -6,6 +6,7 @@ import { listFunnels, deleteFunnel, type Funnel } from '@/lib/api/funnels'
 import { toast, PlusIcon, ArrowRightIcon, ChevronLeftIcon, TrashIcon, Button } from '@ciphera-net/ui'
 import { FunnelsListSkeleton, useMinimumLoading } from '@/components/skeletons'
 import Link from 'next/link'
+import SiteNav from '@/components/dashboard/SiteNav'

 export default function FunnelsPage() {
  const params = useParams()
@@ -52,14 +53,10 @@ export default function FunnelsPage() {

  return (
    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
+      <SiteNav siteId={siteId} />
+
      <div className="mb-8">
-        <div className="flex items-center gap-4 mb-6">
-          <Link 
-            href={`/sites/${siteId}`}
-            className="p-2 -ml-2 text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
-          >
-            <ChevronLeftIcon className="w-5 h-5" />
-          </Link>
+        <div className="flex items-center justify-between mb-6">
          <div>
            <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
              Funnels
@@ -68,14 +65,12 @@ export default function FunnelsPage() {
              Track user journeys and identify drop-off points
            </p>
          </div>
-          <div className="ml-auto">
-            <Link href={`/sites/${siteId}/funnels/new`}>
-              <Button variant="primary" className="inline-flex items-center gap-2">
-                <PlusIcon className="w-4 h-4" />
-                <span>Create Funnel</span>
-              </Button>
-            </Link>
-          </div>
+          <Link href={`/sites/${siteId}/funnels/new`}>
+            <Button variant="primary" className="inline-flex items-center gap-2">
+              <PlusIcon className="w-4 h-4" />
+              <span>Create Funnel</span>
+            </Button>
+          </Link>
        </div>

        {funnels.length === 0 ? (
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -1,6 +1,6 @@
 'use client'

-import { useAuth } from '@/lib/auth/context'
+
 import { logger } from '@/lib/utils/logger'
 import { useCallback, useEffect, useState, useMemo } from 'react'
 import { useParams, useRouter, useSearchParams } from 'next/navigation'
@@ -34,6 +34,7 @@ import PerformanceStats from '@/components/dashboard/PerformanceStats'
 import GoalStats from '@/components/dashboard/GoalStats'
 import ScrollDepth from '@/components/dashboard/ScrollDepth'
 import Campaigns from '@/components/dashboard/Campaigns'
+import SiteNav from '@/components/dashboard/SiteNav'
 import FilterBar from '@/components/dashboard/FilterBar'
 import AddFilterDropdown, { type FilterSuggestion, type FilterSuggestions } from '@/components/dashboard/AddFilterDropdown'
 import EventProperties from '@/components/dashboard/EventProperties'
@@ -79,8 +80,8 @@ function getInitialDateRange(): { start: string; end: string } {
 }

 export default function SiteDashboardPage() {
-  const { user } = useAuth()
-  const canEdit = user?.role === 'owner' || user?.role === 'admin'
+
+

  const params = useParams()
  const router = useRouter()
@@ -494,39 +495,12 @@ export default function SiteDashboardPage() {
                  ]}
                />
              </div>
-              <div
-                className="h-6 w-px bg-neutral-200 dark:bg-neutral-700 flex-shrink-0"
-                aria-hidden
-              />
-              <div className="flex items-center gap-1">
-                <Button
-                  onClick={() => router.push(`/sites/${siteId}/uptime`)}
-                  variant="ghost"
-                  className="text-sm"
-                >
-                  Uptime
-                </Button>
-                <Button
-                  onClick={() => router.push(`/sites/${siteId}/funnels`)}
-                  variant="ghost"
-                  className="text-sm"
-                >
-                  Funnels
-                </Button>
-                {canEdit && (
-                  <Button
-                    onClick={() => router.push(`/sites/${siteId}/settings`)}
-                    variant="ghost"
-                    className="text-sm"
-                  >
-                    Settings
-                  </Button>
-                )}
-              </div>
            </div>
        </div>
      </div>

+      <SiteNav siteId={siteId} />
+
      {/* Dimension Filters */}
      <div className="flex items-center gap-2 flex-wrap mb-2">
        <AddFilterDropdown onAdd={handleAddFilter} suggestions={filterSuggestions} onFetchSuggestions={handleFetchSuggestions} />
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -15,6 +15,7 @@ import { APP_URL } from '@/lib/api/client'
 import { generatePrivacySnippet } from '@/lib/utils/privacySnippet'
 import { useUnsavedChanges } from '@/lib/hooks/useUnsavedChanges'
 import { getSubscription, type SubscriptionDetails } from '@/lib/api/billing'
+import SiteNav from '@/components/dashboard/SiteNav'
 import { getRetentionOptionsForPlan, formatRetentionMonths } from '@/lib/plans'
 import { motion, AnimatePresence } from 'framer-motion'
 import { useAuth } from '@/lib/auth/context'
@@ -403,6 +404,8 @@ export default function SiteSettingsPage() {

  return (
    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
+      <SiteNav siteId={siteId} />
+
      <div className="space-y-8">
        <div>
          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">Site Settings</h1>
--- a/app/sites/[id]/uptime/page.tsx
+++ b/app/sites/[id]/uptime/page.tsx
@@ -21,6 +21,7 @@ import { toast } from '@ciphera-net/ui'
 import { useTheme } from '@ciphera-net/ui'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { Button, Modal } from '@ciphera-net/ui'
+import SiteNav from '@/components/dashboard/SiteNav'
 import { UptimeSkeleton, ChecksSkeleton, useMinimumLoading } from '@/components/skeletons'
 import {
  AreaChart,
@@ -723,21 +724,14 @@ export default function UptimePage() {
      transition={{ duration: 0.2 }}
      className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8"
    >
+      <SiteNav siteId={siteId} />
+
      {/* Header */}
      <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
-          <div className="flex items-center gap-2 mb-1">
-            <button
-              onClick={() => router.push(`/sites/${siteId}`)}
-              className="text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 transition-colors"
-            >
-              {site.name}
-            </button>
-            <span className="text-neutral-300 dark:text-neutral-600">/</span>
-            <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
-              Uptime
-            </h1>
-          </div>
+          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
+            Uptime
+          </h1>
          <p className="text-sm text-neutral-500 dark:text-neutral-400">
            Monitor your endpoints and track availability over time
          </p>
--- a/components/dashboard/SiteNav.tsx
+++ b/components/dashboard/SiteNav.tsx
@@ -0,0 +1,54 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useTabListKeyboard } from '@/lib/hooks/useTabListKeyboard'
+import { useAuth } from '@/lib/auth/context'
+
+interface SiteNavProps {
+  siteId: string
+}
+
+export default function SiteNav({ siteId }: SiteNavProps) {
+  const pathname = usePathname()
+  const handleTabKeyDown = useTabListKeyboard()
+  const { user } = useAuth()
+  const canEdit = user?.role === 'owner' || user?.role === 'admin'
+
+  const tabs = [
+    { label: 'Dashboard', href: `/sites/${siteId}` },
+    { label: 'Uptime', href: `/sites/${siteId}/uptime` },
+    { label: 'Funnels', href: `/sites/${siteId}/funnels` },
+    ...(canEdit ? [{ label: 'Settings', href: `/sites/${siteId}/settings` }] : []),
+  ]
+
+  const isActive = (href: string) => {
+    if (href === `/sites/${siteId}`) {
+      return pathname === href || pathname === `${href}/realtime`
+    }
+    return pathname.startsWith(href)
+  }
+
+  return (
+    <div className="border-b border-neutral-200 dark:border-neutral-800 mb-6">
+      <nav className="flex gap-1" role="tablist" aria-label="Site navigation" onKeyDown={handleTabKeyDown}>
+        {tabs.map((tab) => (
+          <Link
+            key={tab.href}
+            href={tab.href}
+            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 ${
+              isActive(tab.href)
+                ? 'border-brand-orange text-neutral-900 dark:text-white'
+                : 'border-transparent text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
+            }`}
+          >
+            {tab.label}
+          </Link>
+        ))}
+      </nav>
+    </div>
+  )
+}
--- a/lib/auth/context.tsx
+++ b/lib/auth/context.tsx
@@ -90,7 +90,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {

  const logout = useCallback(async () => {
    setIsLoggingOut(true)
-    await logoutAction()
+    try { await logoutAction() } catch { /* stale build — continue with client-side cleanup */ }
    localStorage.removeItem('user')
    localStorage.removeItem('ciphera_token_refreshed_at')
    localStorage.removeItem('ciphera_last_activity')
@@ -132,7 +132,14 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    const init = async () => {
        // * 1. Check server-side session (cookies)
-        let session = await getSessionAction()
+        let session: Awaited<ReturnType<typeof getSessionAction>> = null
+        try {
+          session = await getSessionAction()
+        } catch {
+          // * Stale build — treat as no session. The login page will redirect
+          // * to the auth service via window.location.href (full navigation),
+          // * which fetches fresh HTML/JS from the server on return.
+        }

        // * 2. If no access_token but refresh_token may exist, try refresh (fixes 15-min inactivity logout)
        if (!session && typeof window !== 'undefined') {
@@ -142,7 +149,11 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
            credentials: 'include',
          })
          if (refreshRes.ok) {
-            session = await getSessionAction()
+            try {
+              session = await getSessionAction()
+            } catch {
+              // * Stale build — fall through as no session
+            }
          }
        }

--- a/next.config.ts
+++ b/next.config.ts
@@ -47,6 +47,14 @@ const nextConfig: NextConfig = {
  },
  async headers() {
    return [
+      {
+        // * Prevent CDN/browser from serving stale HTML after deploys.
+        // * Static assets (/_next/static/*) are content-hashed and cached separately by Next.js.
+        source: '/((?!_next/static|_next/image).*)',
+        headers: [
+          { key: 'Cache-Control', value: 'no-cache, must-revalidate' },
+        ],
+      },
      {
        source: '/(.*)',
        headers: [