gerbeur/src/hooks/useDocumentTitle.ts

import { useEffect } from "react";

// The server injects the configured site name into both <title> and this meta
// tag (see api/lib/static.ts / api/middleware/og.ts). Read it once at startup.
// In the Vite dev server the placeholder isn't substituted, so fall back.
function readSiteName(): string {
  const meta = document.querySelector('meta[name="site-name"]')
    ?.getAttribute("content")?.trim();
  if (meta && meta !== "__SITE_NAME__") return meta;
  return "gerbeur";
}

export const SITE_NAME = readSiteName();

// The server injects the configured emoji into a <meta name="site-emoji"> tag.
// In the Vite dev server it's substituted too; fall back to the default truck.
function readSiteEmoji(): string {
  const meta = document.querySelector('meta[name="site-emoji"]')
    ?.getAttribute("content")?.trim();
  if (meta && meta !== "__SITE_EMOJI__") return meta;
  return "🚚";
}

export const SITE_EMOJI = readSiteEmoji();

// The page title and the unread badge are set from different places (each
// page, and the live-updates provider), so both are kept here and composed.
// `null` base means no page has set one yet: keep the server-rendered title.
let baseTitle: string | null = null;
let badge = 0;

function applyTitle() {
  const base = baseTitle ?? document.title.replace(/^\(\d+\+?\) /, "");
  document.title = badge > 0
    ? `(${badge > 99 ? "99+" : badge}) ${base}`
    : base;
}

/**
 * Keeps document.title in sync with the current page during client-side
 * navigation. Without this the tab title only ever reflects the server-rendered
 * <title> from the initial page load and goes stale on every SPA navigation.
 *
 * - Pass a non-empty string to show `<title> · <site name>`.
 * - Pass `null` to show just the site name (home / generic pages).
 * - Pass `undefined` while the page-specific title is still loading: the title
 *   is left untouched, so a server-rendered OG title survives until data
 *   arrives (avoids a flash to the bare site name on direct loads).
 */
export function useDocumentTitle(title: string | null | undefined): void {
  useEffect(() => {
    if (title === undefined) return;
    baseTitle = title ? `${title} · ${SITE_NAME}` : SITE_NAME;
    applyTitle();
  }, [title]);
}

/** Prefixes the tab title with an unread count, e.g. "(3) Chat · gerbeur". */
export function setTitleBadge(count: number): void {
  if (count === badge) return;
  badge = count;
  applyTitle();
}