1 files changed, 53 insertions, 0 deletions
diff --git a/apps/web/src/fonts/use-font-atlas.ts b/apps/web/src/fonts/use-font-atlas.ts
new file mode 100644
index 00000000..153eebd4
--- /dev/null
+++ b/apps/web/src/fonts/use-font-atlas.ts
@@ -0,0 +1,53 @@
+import { useState, useMemo, useCallback, useEffect } from "react";
+import {
+	getCachedFontAtlas,
+	loadFontAtlas,
+	clearFontAtlasCache,
+} from "@/fonts/google-fonts";
+import type { FontAtlas } from "@/fonts/types";
+import { SYSTEM_FONTS } from "@/fonts/system-fonts";
+
+type Status = "idle" | "loading" | "error";
+
+export function useFontAtlas({ open }: { open: boolean }) {
+	const [atlas, setAtlas] = useState<FontAtlas | null>(() =>
+		getCachedFontAtlas(),
+	);
+	const [status, setStatus] = useState<Status>(() =>
+		getCachedFontAtlas() ? "idle" : "loading",
+	);
+
+	useEffect(() => {
+		if (!open || atlas) return;
+
+		setStatus("loading");
+		loadFontAtlas().then((data) => {
+			if (data) {
+				setAtlas(data);
+				setStatus("idle");
+			} else {
+				setStatus("error");
+			}
+		});
+	}, [open, atlas]);
+
+	const retry = useCallback(() => {
+		clearFontAtlasCache();
+		setStatus("loading");
+		loadFontAtlas().then((data) => {
+			if (data) {
+				setAtlas(data);
+				setStatus("idle");
+			} else {
+				setStatus("error");
+			}
+		});
+	}, []);
+
+	const fontNames = useMemo(() => {
+		if (!atlas) return [];
+		return [...Object.keys(atlas.fonts), ...SYSTEM_FONTS].sort();
+	}, [atlas]);
+
+	return { atlas, status, fontNames, retry };
+}