feat: simplify rating icon picker to 5 curated icons and remove icon search

Author: 1457dys

package.json

@@ -41,7 +41,6 @@
 		"fastify": "^5.7.4",
 		"highlight.js": "^11.11.1",
 		"lucide-react": "^0.562.0",
-		"lucide-static": "^0.574.0",
 		"marked": "^17.0.3",
 		"pnpm": "^10.30.0",
 		"react": "^19.2.4",

pnpm-lock.yaml

@@ -22,14 +22,26 @@
 	max-height: 14rem;
 }
 
-.iconSearchWrapper {
+.iconSelected {
+	margin-top: 0.75rem;
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
+	font-size: 0.875rem;
+	color: var(--color-caption);
 }
 
-.iconSearchIcon {
-	color: var(--color-caption);
+.iconSelectedPreview {
+	max-width: 1rem;
+	max-height: 1rem;
+}
+
+.iconSelectedName {
+	font-size: 0.75rem;
+	padding: 0.0625rem 0.25rem;
+	border-radius: 0.25rem;
+	background-color: var(--background-color-secondary);
+	color: var(--foreground);
 }
 
 .iconGrid {

src/features/form/components/AdminFormDetailPages/components/SectionEditor/RangeQuestion.module.css

@@ -1,10 +1,10 @@
 import type { Question } from "@/features/form/components/AdminFormDetailPages/types/question";
 import { InlineSvg, Input } from "@/shared/components";
-import { Search } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
 import { OptionsInput } from "./OptionsInput";
 import styles from "./RangeQuestion.module.css";
 
+const ADMIN_RATING_ICON_OPTIONS = ["star", "heart", "thumbs-up", "smile", "trophy"] as const;
+
 export interface RangeQuestionProps {
 	start: number;
 	end: number;
@@ -20,36 +20,10 @@ export interface RangeQuestionProps {
 }
 
 export const RangeQuestion = (props: RangeQuestionProps) => {
-	const [iconKeyword, setIconKeyword] = useState("");
-	const [iconNames, setIconNames] = useState<string[]>([]);
-
-	useEffect(() => {
-		let isMounted = true;
-		fetch("/icons/lucide/names.json")
-			.then(res => (res.ok ? res.json() : []))
-			.then((names: unknown) => {
-				if (!isMounted) return;
-				if (Array.isArray(names)) {
-					setIconNames(names.filter((name): name is string => typeof name === "string"));
-				}
-			})
-			.catch(() => {
-				if (isMounted) setIconNames([]);
-			});
-
-		return () => {
-			isMounted = false;
-		};
-	}, []);
-
-	const filteredIcons = useMemo(() => {
-		const keyword = iconKeyword.trim().toLowerCase();
-		if (!keyword) return iconNames;
-		return iconNames.filter(icon => icon.includes(keyword));
-	}, [iconKeyword, iconNames]);
 	const rangeWarning = props.start >= props.end ? "開始值必須小於結束值" : null;
 	const startWarning = props.start < 0 || props.start > 1 ? "開始值需為 0 或 1" : null;
 	const endWarning = props.end < 2 || props.end > 10 ? "結束值需介於 2 到 10" : null;
+	const selectedIconName = props.icon ?? ADMIN_RATING_ICON_OPTIONS[0];
 
 	return (
 		<>
@@ -61,12 +35,13 @@ export const RangeQuestion = (props: RangeQuestionProps) => {
 			{(rangeWarning || startWarning || endWarning) && <p className={styles.warning}>{rangeWarning ?? startWarning ?? endWarning}</p>}
 			{props.hasIcon && (
 				<div className={styles.iconPickerSection}>
-					<div className={styles.iconSearchWrapper}>
-						<Search size={16} className={styles.iconSearchIcon} />
-						<Input value={iconKeyword} onChange={event => setIconKeyword(event.target.value)} placeholder="搜尋圖示" variant="flushed" themeColor="--comment" />
+					<div className={styles.iconSelected}>
+						<span>選擇圖示：</span>
+						<InlineSvg name={selectedIconName} filled size={18} className={styles.iconSelectedPreview} />
+						<code className={styles.iconSelectedName}>{selectedIconName}</code>
 					</div>
 					<div className={styles.iconGrid}>
-						{filteredIcons.map(iconName => (
+						{ADMIN_RATING_ICON_OPTIONS.map(iconName => (
 							<button
 								key={iconName}
 								type="button"

src/features/form/components/AdminFormDetailPages/components/SectionEditor/RangeQuestion.tsx

@@ -1,7 +1,8 @@
-import { useEffect, useState } from "react";
+import type { LucideIcon } from "lucide-react";
+import { Heart, Smile, Star, ThumbsUp, Trophy } from "lucide-react";
 import styles from "./InlineSvg.module.css";
 
-const svgCache = new Map<string, string>();
+const iconComponentCache = new Map<string, LucideIcon | null>();
 
 interface InlineSvgProps {
 	name: string;
@@ -10,32 +11,31 @@ interface InlineSvgProps {
 	className?: string;
 }
 
-export const InlineSvg = ({ name, filled, size = 24, className }: InlineSvgProps) => {
-	const [svg, setSvg] = useState<string>(() => svgCache.get(name) || "");
-
-	useEffect(() => {
-		if (svgCache.has(name)) {
-			return;
-		}
-
-		let mounted = true;
-
-		fetch(`/icons/lucide/${name}.svg`)
-			.then(res => res.text())
-			.then(data => {
-				if (!mounted) return;
-				svgCache.set(name, data);
-				setSvg(data);
-			});
-
-		return () => {
-			mounted = false;
-		};
-	}, [name]);
-
-	if (!svg) return null;
-
-	const processed = svg.replace("<svg", `<svg width="${size}" height="${size}" fill="${filled ? "currentColor" : "none"}" stroke="currentColor" class="${className ?? ""}"`);
+const ICON_MAP = {
+	star: Star,
+	heart: Heart,
+	"thumbs-up": ThumbsUp,
+	smile: Smile,
+	trophy: Trophy
+} as const;
+
+const resolveIconComponent = (name: string): LucideIcon | null => {
+	if (iconComponentCache.has(name)) {
+		return iconComponentCache.get(name) ?? null;
+	}
+
+	const component = (ICON_MAP as Record<string, LucideIcon | undefined>)[name] ?? null;
+	iconComponentCache.set(name, component);
+	return component;
+};
 
-	return <span dangerouslySetInnerHTML={{ __html: processed }} className={styles.wrapper} />;
+export const InlineSvg = ({ name, filled, size = 24, className }: InlineSvgProps) => {
+	const Icon = resolveIconComponent(name);
+	if (!Icon) return null;
+
+	return (
+		<span className={styles.wrapper}>
+			<Icon size={size} fill={filled ? "currentColor" : "none"} stroke="currentColor" className={className} />
+		</span>
+	);
 };