diff --git a/apps/web/src/components/dialogs/ShareNoteImageDialog.tsx b/apps/web/src/components/dialogs/ShareNoteImageDialog.tsx index 9135a832..f9af85df 100644 --- a/apps/web/src/components/dialogs/ShareNoteImageDialog.tsx +++ b/apps/web/src/components/dialogs/ShareNoteImageDialog.tsx @@ -31,7 +31,7 @@ import { type NoteImageTheme, type PreparedNoteImage, } from "@/lib/note-image-export"; -import { NOTE_IMAGE_THEME_OPTIONS, buildNoteImageCardMarkup, escapeCardHtml, generateCardCss } from "@edgeever/shared/note-image-card"; +import { NOTE_IMAGE_BUNDLED_FONTS, NOTE_IMAGE_TEMPLATE_TYPOGRAPHY, resolveTheme, NOTE_IMAGE_THEME_OPTIONS, buildNoteImageCardMarkup, escapeCardHtml, generateCardCss } from "@edgeever/shared/note-image-card"; import { getHtmlImageEmbedNoticeKind } from "@/lib/note-html-export"; import { readNoteImagePreferences, writeNoteImagePreferences, type NoteImagePreferences } from "@/lib/note-image-preference"; import { cn } from "@/lib/utils"; @@ -148,6 +148,16 @@ export const ShareNoteImageDialog = ({ const [retry, setRetry] = useState(0); const [copyState, setCopyState] = useState<"idle" | "copying" | "copied" | "failed">("idle"); const [contentFontStatus, setContentFontStatus] = useState("loading"); + const themeFontLabel = NOTE_IMAGE_TEMPLATE_TYPOGRAPHY[resolveTheme(undefined, theme)].body + .map(font => t(NOTE_IMAGE_BUNDLED_FONTS[font].labelKey)) + .join(" / "); + const selectedFontLabel = fontStyle === "auto" + ? themeFontLabel + : t(FONT_OPTIONS.find(item => item.id === fontStyle)!.labelKey); + const fontOptionLabel = (item: (typeof FONT_OPTIONS)[number]) => item.id === "auto" + ? `${t(item.labelKey)} (${themeFontLabel})` + : t(item.labelKey); + const { status: selectedFontStatus, onPreviewStatus } = useFontPreviewStatus(`${fontStyle}:${theme}:${retry}`, contentFontStatus); const generationRef = useRef(0); const copyAttemptRef = useRef(0); @@ -358,13 +368,13 @@ export const ShareNoteImageDialog = ({