apps/web/app/reader/_components/offline-banner.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

"use client"

import { useSyncExternalStore } from "react"
import { TIER_LIMITS, type SubscriptionTier } from "@asa-news/shared"
import { useUserProfile } from "@/lib/queries/use-user-profile"

function subscribe(callback: () => void) {
  window.addEventListener("online", callback)
  window.addEventListener("offline", callback)
  return () => {
    window.removeEventListener("online", callback)
    window.removeEventListener("offline", callback)
  }
}

function getSnapshot() {
  return navigator.onLine
}

function getServerSnapshot() {
  return true
}

export function OfflineBanner() {
  const isOnline = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
  const { data: userProfile } = useUserProfile()

  if (isOnline) return null

  const tier = (userProfile?.tier ?? "free") as SubscriptionTier
  const allowsOffline = TIER_LIMITS[tier]?.allowsOfflineReading ?? false

  return (
    <div className="border-b border-border bg-background-tertiary px-3 py-1.5 text-center text-text-dim">
      {allowsOffline
        ? "you are offline \u2014 showing cached content"
        : "you are offline \u2014 offline reading is available on pro and developer plans"}
    </div>
  )
}