summaryrefslogtreecommitdiff
path: root/apps/web/src/components/ui/font-picker.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/src/components/ui/font-picker.tsx')
-rw-r--r--apps/web/src/components/ui/font-picker.tsx516
1 files changed, 258 insertions, 258 deletions
diff --git a/apps/web/src/components/ui/font-picker.tsx b/apps/web/src/components/ui/font-picker.tsx
index 77d8ab7f..016bbaf4 100644
--- a/apps/web/src/components/ui/font-picker.tsx
+++ b/apps/web/src/components/ui/font-picker.tsx
@@ -1,258 +1,258 @@
-"use client";
-
-import { useState, useMemo, useRef, useEffect, useCallback, type CSSProperties } from "react";
-import { List, type RowComponentProps } from "react-window";
-import {
- Popover,
- PopoverContent,
- PopoverTrigger,
-} from "@/components/ui/popover";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { loadFullFont } from "@/lib/fonts/google-fonts";
-import { SYSTEM_FONTS } from "@/constants/font-constants";
-import type { FontAtlas, FontAtlasEntry } from "@/lib/fonts/types";
-import { useFontAtlas } from "@/hooks/use-font-atlas";
-import { cn } from "@/utils/ui";
-import { ChevronDown, Search } from "lucide-react";
-import { HugeiconsIcon } from "@hugeicons/react";
-import { TextIcon } from "@hugeicons/core-free-icons";
-
-const FONT_TABS = [
- { key: "all", label: "All fonts" },
- { key: "my-fonts", label: "My fonts" },
- { key: "favorites", label: "Favorites" },
-] as const;
-
-type FontTab = (typeof FONT_TABS)[number]["key"];
-
-const ROW_HEIGHT = 40;
-const PREVIEW_SCALE = 0.8;
-const LIST_WIDTH = 288;
-const MAX_LIST_HEIGHT = 288;
-const OVERSCAN = 15;
-
-interface FontPickerProps {
- defaultValue?: string;
- onValueChange?: (value: string) => void;
- className?: string;
-}
-
-export function FontPicker({
- defaultValue,
- onValueChange,
- className,
-}: FontPickerProps) {
- const [open, setOpen] = useState(false);
- const [search, setSearch] = useState("");
- const [activeTab, setActiveTab] = useState<FontTab>("all");
- const searchInputRef = useRef<HTMLInputElement>(null);
- const { atlas, status, fontNames, retry: handleRetry } = useFontAtlas({ open });
-
- const filteredFonts = useMemo(() => {
- if (!search) return fontNames;
- const query = search.toLowerCase();
- return fontNames.filter((name) => name.toLowerCase().includes(query));
- }, [fontNames, search]);
-
- const listHeight = Math.min(
- MAX_LIST_HEIGHT,
- filteredFonts.length * ROW_HEIGHT,
- );
-
- const handleSelect = useCallback(
- async ({ family }: { family: string }) => {
- if (!SYSTEM_FONTS.has(family)) {
- try {
- await loadFullFont({ family });
- } catch {
- // ignore load failure, font will fall back to system default
- }
- }
- onValueChange?.(family);
- setOpen(false);
- },
- [onValueChange],
- );
-
- useEffect(() => {
- if (!open) {
- setSearch("");
- setActiveTab("all");
- }
- }, [open]);
-
- const activeTabLabel =
- FONT_TABS.find((t) => t.key === activeTab)?.label.toLowerCase() ?? "";
-
- return (
- <Popover open={open} onOpenChange={setOpen}>
- <PopoverTrigger
- className={cn(
- "border-border bg-accent flex h-7 w-full cursor-pointer items-center justify-between gap-1 rounded-md border px-2.5 text-sm whitespace-nowrap focus-visible:border-primary focus-visible:ring-0 focus:outline-hidden",
- className,
- )}
- >
- <div className="flex min-w-0 items-center gap-1.5">
- <span className="text-muted-foreground [&_svg]:size-3.5 shrink-0">
- <HugeiconsIcon icon={TextIcon} />
- </span>
- <span className="truncate" style={{ fontFamily: defaultValue }}>
- {defaultValue ?? "Select a font"}
- </span>
- </div>
- <ChevronDown className="size-3 shrink-0 opacity-50" />
- </PopoverTrigger>
- <PopoverContent
- className="w-72 p-0 overflow-hidden"
- align="start"
- side="left"
- onOpenAutoFocus={(event) => {
- event.preventDefault();
- searchInputRef.current?.focus();
- }}
- onCloseAutoFocus={(event) => {
- event.preventDefault();
- event.stopPropagation();
- }}
- >
- <div className="relative px-3 py-1.5">
- <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-3.5 shrink-0 opacity-50" />
- <Input
- ref={searchInputRef}
- placeholder={`Search ${activeTabLabel}...`}
- value={search}
- onChange={(event) => setSearch(event.target.value)}
- size="xs"
- className="w-full pl-5 bg-transparent border-none! shadow-none!"
- />
- </div>
- <div className="flex border-b px-3">
- {FONT_TABS.map((tab) => (
- <button
- key={tab.key}
- type="button"
- className={cn(
- "px-3 py-1.5 text-xs border-b-2 -mb-px",
- activeTab === tab.key
- ? "border-foreground text-foreground"
- : "border-transparent text-muted-foreground hover:text-foreground",
- )}
- onClick={() => setActiveTab(tab.key)}
- >
- {tab.label}
- </button>
- ))}
- </div>
- {status === "loading" && (
- <div className="py-8 text-center text-sm text-muted-foreground">
- Loading fonts...
- </div>
- )}
- {status === "error" && (
- <div className="flex flex-col items-center gap-3 py-8 px-4">
- <p className="text-sm text-muted-foreground text-center">
- Failed to load font previews.
- </p>
- <Button variant="outline" size="sm" onClick={handleRetry}>
- Retry
- </Button>
- </div>
- )}
- {status === "idle" &&
- fontNames.length > 0 &&
- filteredFonts.length === 0 && (
- <div className="py-6 text-center text-sm text-muted-foreground">
- No fonts found.
- </div>
- )}
- {status === "idle" && atlas && filteredFonts.length > 0 && (
- <List
- rowCount={filteredFonts.length}
- rowHeight={ROW_HEIGHT}
- overscanCount={OVERSCAN}
- rowComponent={FontRow}
- rowProps={{
- atlas,
- filteredFonts,
- selectedFont: defaultValue,
- onFontSelect: handleSelect,
- }}
- style={{ height: listHeight, width: LIST_WIDTH }}
- />
- )}
- </PopoverContent>
- </Popover>
- );
-}
-
-function FontSpritePreview({ entry }: { entry: FontAtlasEntry }) {
- return (
- <div
- className="shrink-0"
- style={{
- width: entry.w,
- height: ROW_HEIGHT,
- backgroundColor: "currentColor",
- WebkitMaskImage: `url(/fonts/font-chunk-${entry.ch}.avif)`,
- WebkitMaskPosition: `-${entry.x}px -${entry.y}px`,
- WebkitMaskRepeat: "no-repeat",
- maskImage: `url(/fonts/font-chunk-${entry.ch}.avif)`,
- maskPosition: `-${entry.x}px -${entry.y}px`,
- maskRepeat: "no-repeat",
- transform: `scale(${PREVIEW_SCALE})`,
- transformOrigin: "left center",
- }}
- />
- );
-}
-
-type FontRowProps = {
- atlas: FontAtlas;
- filteredFonts: string[];
- selectedFont: string | undefined;
- onFontSelect: (params: { family: string }) => void;
-};
-
-function FontRow({
- index,
- style,
- atlas,
- filteredFonts,
- selectedFont,
- onFontSelect,
-}: RowComponentProps<FontRowProps>) {
- const fontName = filteredFonts[index];
- const entry = atlas.fonts[fontName];
- const isSelected = fontName === selectedFont;
- const isSystemFont = SYSTEM_FONTS.has(fontName);
-
- return (
- <button
- type="button"
- style={style as CSSProperties}
- className={cn(
- "flex w-full cursor-pointer items-center gap-2 px-3 outline-hidden hover:bg-popover-hover",
- isSelected && "bg-popover-hover",
- )}
- onClick={() => onFontSelect({ family: fontName })}
- onKeyDown={(event) => {
- if (event.key === "Enter" || event.key === " ") {
- event.preventDefault();
- onFontSelect({ family: fontName });
- }
- }}
- aria-label={fontName}
- >
- <div className="min-w-0 overflow-hidden">
- {isSystemFont ? (
- <span className="text-xl text-foreground/85" style={{ fontFamily: fontName }}>
- {fontName}
- </span>
- ) : (
- <FontSpritePreview entry={entry} />
- )}
- </div>
- </button>
- );
-}
+"use client";
+
+import { useState, useMemo, useRef, useEffect, useCallback, type CSSProperties } from "react";
+import { List, type RowComponentProps } from "react-window";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { loadFullFont } from "@/lib/fonts/google-fonts";
+import { SYSTEM_FONTS } from "@/constants/font-constants";
+import type { FontAtlas, FontAtlasEntry } from "@/lib/fonts/types";
+import { useFontAtlas } from "@/hooks/use-font-atlas";
+import { cn } from "@/utils/ui";
+import { ChevronDown, Search } from "lucide-react";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { TextIcon } from "@hugeicons/core-free-icons";
+
+const FONT_TABS = [
+ { key: "all", label: "All fonts" },
+ { key: "my-fonts", label: "My fonts" },
+ { key: "favorites", label: "Favorites" },
+] as const;
+
+type FontTab = (typeof FONT_TABS)[number]["key"];
+
+const ROW_HEIGHT = 40;
+const PREVIEW_SCALE = 0.8;
+const LIST_WIDTH = 288;
+const MAX_LIST_HEIGHT = 288;
+const OVERSCAN = 15;
+
+interface FontPickerProps {
+ defaultValue?: string;
+ onValueChange?: (value: string) => void;
+ className?: string;
+}
+
+export function FontPicker({
+ defaultValue,
+ onValueChange,
+ className,
+}: FontPickerProps) {
+ const [open, setOpen] = useState(false);
+ const [search, setSearch] = useState("");
+ const [activeTab, setActiveTab] = useState<FontTab>("all");
+ const searchInputRef = useRef<HTMLInputElement>(null);
+ const { atlas, status, fontNames, retry: handleRetry } = useFontAtlas({ open });
+
+ const filteredFonts = useMemo(() => {
+ if (!search) return fontNames;
+ const query = search.toLowerCase();
+ return fontNames.filter((name) => name.toLowerCase().includes(query));
+ }, [fontNames, search]);
+
+ const listHeight = Math.min(
+ MAX_LIST_HEIGHT,
+ filteredFonts.length * ROW_HEIGHT,
+ );
+
+ const handleSelect = useCallback(
+ async ({ family }: { family: string }) => {
+ if (!SYSTEM_FONTS.has(family)) {
+ try {
+ await loadFullFont({ family });
+ } catch {
+ // ignore load failure, font will fall back to system default
+ }
+ }
+ onValueChange?.(family);
+ setOpen(false);
+ },
+ [onValueChange],
+ );
+
+ useEffect(() => {
+ if (!open) {
+ setSearch("");
+ setActiveTab("all");
+ }
+ }, [open]);
+
+ const activeTabLabel =
+ FONT_TABS.find((t) => t.key === activeTab)?.label.toLowerCase() ?? "";
+
+ return (
+ <Popover open={open} onOpenChange={setOpen}>
+ <PopoverTrigger
+ className={cn(
+ "border-border bg-accent flex h-7 w-full cursor-pointer items-center justify-between gap-1 rounded-md border px-2.5 text-sm whitespace-nowrap focus-visible:border-primary focus-visible:ring-0 focus:outline-hidden",
+ className,
+ )}
+ >
+ <div className="flex min-w-0 items-center gap-1.5">
+ <span className="text-muted-foreground [&_svg]:size-3.5 shrink-0">
+ <HugeiconsIcon icon={TextIcon} />
+ </span>
+ <span className="truncate" style={{ fontFamily: defaultValue }}>
+ {defaultValue ?? "Select a font"}
+ </span>
+ </div>
+ <ChevronDown className="size-3 shrink-0 opacity-50" />
+ </PopoverTrigger>
+ <PopoverContent
+ className="w-72 p-0 overflow-hidden"
+ align="start"
+ side="left"
+ onOpenAutoFocus={(event) => {
+ event.preventDefault();
+ searchInputRef.current?.focus();
+ }}
+ onCloseAutoFocus={(event) => {
+ event.preventDefault();
+ event.stopPropagation();
+ }}
+ >
+ <div className="relative px-3 py-1.5">
+ <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-3.5 shrink-0 opacity-50" />
+ <Input
+ ref={searchInputRef}
+ placeholder={`Search ${activeTabLabel}...`}
+ value={search}
+ onChange={(event) => setSearch(event.target.value)}
+ size="xs"
+ className="w-full pl-5 bg-transparent border-none! shadow-none!"
+ />
+ </div>
+ <div className="flex border-b px-3">
+ {FONT_TABS.map((tab) => (
+ <button
+ key={tab.key}
+ type="button"
+ className={cn(
+ "px-3 py-1.5 text-xs border-b-2 -mb-px",
+ activeTab === tab.key
+ ? "border-foreground text-foreground"
+ : "border-transparent text-muted-foreground hover:text-foreground",
+ )}
+ onClick={() => setActiveTab(tab.key)}
+ >
+ {tab.label}
+ </button>
+ ))}
+ </div>
+ {status === "loading" && (
+ <div className="py-8 text-center text-sm text-muted-foreground">
+ Loading fonts...
+ </div>
+ )}
+ {status === "error" && (
+ <div className="flex flex-col items-center gap-3 py-8 px-4">
+ <p className="text-sm text-muted-foreground text-center">
+ Failed to load font previews.
+ </p>
+ <Button variant="outline" size="sm" onClick={handleRetry}>
+ Retry
+ </Button>
+ </div>
+ )}
+ {status === "idle" &&
+ fontNames.length > 0 &&
+ filteredFonts.length === 0 && (
+ <div className="py-6 text-center text-sm text-muted-foreground">
+ No fonts found.
+ </div>
+ )}
+ {status === "idle" && atlas && filteredFonts.length > 0 && (
+ <List
+ rowCount={filteredFonts.length}
+ rowHeight={ROW_HEIGHT}
+ overscanCount={OVERSCAN}
+ rowComponent={FontRow}
+ rowProps={{
+ atlas,
+ filteredFonts,
+ selectedFont: defaultValue,
+ onFontSelect: handleSelect,
+ }}
+ style={{ height: listHeight, width: LIST_WIDTH }}
+ />
+ )}
+ </PopoverContent>
+ </Popover>
+ );
+}
+
+function FontSpritePreview({ entry }: { entry: FontAtlasEntry }) {
+ return (
+ <div
+ className="shrink-0"
+ style={{
+ width: entry.w,
+ height: ROW_HEIGHT,
+ backgroundColor: "currentColor",
+ WebkitMaskImage: `url(/fonts/font-chunk-${entry.ch}.avif)`,
+ WebkitMaskPosition: `-${entry.x}px -${entry.y}px`,
+ WebkitMaskRepeat: "no-repeat",
+ maskImage: `url(/fonts/font-chunk-${entry.ch}.avif)`,
+ maskPosition: `-${entry.x}px -${entry.y}px`,
+ maskRepeat: "no-repeat",
+ transform: `scale(${PREVIEW_SCALE})`,
+ transformOrigin: "left center",
+ }}
+ />
+ );
+}
+
+type FontRowProps = {
+ atlas: FontAtlas;
+ filteredFonts: string[];
+ selectedFont: string | undefined;
+ onFontSelect: (params: { family: string }) => void;
+};
+
+function FontRow({
+ index,
+ style,
+ atlas,
+ filteredFonts,
+ selectedFont,
+ onFontSelect,
+}: RowComponentProps<FontRowProps>) {
+ const fontName = filteredFonts[index];
+ const entry = atlas.fonts[fontName];
+ const isSelected = fontName === selectedFont;
+ const isSystemFont = SYSTEM_FONTS.has(fontName);
+
+ return (
+ <button
+ type="button"
+ style={style as CSSProperties}
+ className={cn(
+ "flex w-full cursor-pointer items-center gap-2 px-3 outline-hidden hover:bg-popover-hover",
+ isSelected && "bg-popover-hover",
+ )}
+ onClick={() => onFontSelect({ family: fontName })}
+ onKeyDown={(event) => {
+ if (event.key === "Enter" || event.key === " ") {
+ event.preventDefault();
+ onFontSelect({ family: fontName });
+ }
+ }}
+ aria-label={fontName}
+ >
+ <div className="min-w-0 overflow-hidden">
+ {isSystemFont ? (
+ <span className="text-xl text-foreground/85" style={{ fontFamily: fontName }}>
+ {fontName}
+ </span>
+ ) : (
+ <FontSpritePreview entry={entry} />
+ )}
+ </div>
+ </button>
+ );
+}
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-17 07:44:22 +0000