crema-app-aifirst-template/app/lib/notifications.ts

// Notifications — small reactive store for in-app toasts/inbox items.
// Pair with @crema/notification-ui's <ToastProvider /> for transient toasts;
// this store is for the appbar bell's persistent inbox.

import { useEffect, useSyncExternalStore } from "react"

export type NotificationKind = "info" | "success" | "warning" | "error"

export type AppNotification = {
  id: string
  kind: NotificationKind
  title: string
  body?: string
  // Optional href to open when the row is clicked.
  href?: string
  createdAt: number
  readAt?: number
}

const STORAGE_KEY = "crema.notifications"
const CHANGE_EVENT = "crema:notifications-change"
const MAX_ITEMS = 200

function newId(): string {
  return `n-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`
}

function readFromStorage(): AppNotification[] {
  if (typeof window === "undefined") return []
  try {
    const raw = localStorage.getItem(STORAGE_KEY)
    if (!raw) return []
    const parsed = JSON.parse(raw)
    if (!Array.isArray(parsed)) return []
    return parsed.filter(
      (n): n is AppNotification =>
        n &&
        typeof n.id === "string" &&
        typeof n.title === "string" &&
        typeof n.createdAt === "number" &&
        ["info", "success", "warning", "error"].includes(n.kind),
    )
  } catch {
    return []
  }
}

function writeToStorage(items: AppNotification[]) {
  if (typeof window === "undefined") return
  const trimmed = items.slice(0, MAX_ITEMS)
  try {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(trimmed))
    window.dispatchEvent(new CustomEvent(CHANGE_EVENT))
  } catch {
    /* quota — drop silently */
  }
}

export function loadNotifications(): AppNotification[] {
  return readFromStorage()
}

export function addNotification(
  n: Omit<AppNotification, "id" | "createdAt">,
): AppNotification {
  const next: AppNotification = {
    ...n,
    id: newId(),
    createdAt: Date.now(),
  }
  writeToStorage([next, ...readFromStorage()])
  return next
}

export function markRead(id: string) {
  const items = readFromStorage().map((n) =>
    n.id === id ? { ...n, readAt: Date.now() } : n,
  )
  writeToStorage(items)
}

export function markAllRead() {
  const now = Date.now()
  const items = readFromStorage().map((n) =>
    n.readAt ? n : { ...n, readAt: now },
  )
  writeToStorage(items)
}

export function dismiss(id: string) {
  writeToStorage(readFromStorage().filter((n) => n.id !== id))
}

export function dismissAll() {
  writeToStorage([])
}

let cached: AppNotification[] | null = null

function subscribe(cb: () => void): () => void {
  const onChange = () => {
    cached = null
    cb()
  }
  window.addEventListener(CHANGE_EVENT, onChange)
  window.addEventListener("storage", (e) => {
    if (e.key === STORAGE_KEY) onChange()
  })
  return () => window.removeEventListener(CHANGE_EVENT, onChange)
}
function getSnapshot(): AppNotification[] {
  if (!cached) cached = readFromStorage()
  return cached
}
function getServerSnapshot(): AppNotification[] {
  return []
}

export function useNotifications(): AppNotification[] {
  const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
  useEffect(() => {
    cached = null
  }, [])
  return value
}

export function unreadCount(items: AppNotification[]): number {
  return items.filter((n) => !n.readAt).length
}

/** Seed a few demo notifications on first load so the bell isn't empty. */
export function seedIfEmpty() {
  if (typeof window === "undefined") return
  if (localStorage.getItem(STORAGE_KEY)) return
  const now = Date.now()
  const seed: AppNotification[] = [
    {
      id: newId(),
      kind: "info",
      title: "Welcome",
      body: "Tag elements with data-action and the assistant can drive them.",
      href: "/assistant",
      createdAt: now - 60_000,
    },
    {
      id: newId(),
      kind: "success",
      title: "Profile saved",
      body: "Your display name and avatar are live across the app.",
      href: "/profile",
      createdAt: now - 5 * 60_000,
    },
  ]
  writeToStorage(seed)
}