thread-master/apps/web/src/components/ui/AppIcons.tsx

import type { ReactNode, SVGProps } from "react";
import type { NavKey } from "../../lib/nav";

export type AppIconName = NavKey | "more" | "spark";

type Props = {
  name: AppIconName;
  size?: number;
  className?: string;
} & Omit<SVGProps<SVGSVGElement>, "name">;

/**
 * 精緻線稿 icon：圓潤端點、雙層深度、細微星芒（魔法感但不吵）
 * 可隨 currentColor 換色，適配 light / dark。
 */
export function AppIcon({ name, size = 22, className = "", ...rest }: Props) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      className={`hb-app-icon ${className}`.trim()}
      aria-hidden
      {...rest}
    >
      {glyphs[name]}
    </svg>
  );
}

const stroke = {
  stroke: "currentColor",
  strokeWidth: 1.5,
  strokeLinecap: "round" as const,
  strokeLinejoin: "round" as const,
};

/** 小星芒 */
function Spark({ x = 18, y = 5, s = 1 }: { x?: number; y?: number; s?: number }) {
  return (
    <g opacity={0.85} transform={`translate(${x} ${y}) scale(${s})`}>
      <path d="M0-2.2V2.2M-2.2 0H2.2" {...stroke} strokeWidth={1.35} />
    </g>
  );
}

const glyphs: Record<AppIconName, ReactNode> = {
  // 今日：圓角日曆 + 星
  today: (
    <>
      <rect x="3.5" y="5" width="17" height="15" rx="3.5" {...stroke} />
      <path d="M8 3.75v3.1M16 3.75v3.1M3.5 10.25h17" {...stroke} />
      <circle cx="9.2" cy="14.6" r="1.05" fill="currentColor" opacity={0.9} />
      <Spark x={16.2} y={14.4} s={0.72} />
    </>
  ),
  // 帳號：雙圓 + 柔弧（島民）
  crew: (
    <>
      <circle cx="9" cy="8.6" r="3" {...stroke} />
      <path d="M4 18.2c.55-2.9 2.7-4.35 5-4.35 2.3 0 4.45 1.45 5 4.35" {...stroke} />
      <circle cx="16.6" cy="9.4" r="2.35" {...stroke} opacity={0.85} />
      <path d="M14.2 18.2c.35-1.85 1.55-2.85 3.15-2.85 1.35 0 2.45.7 3.05 1.9" {...stroke} opacity={0.85} />
      <Spark x={18.8} y={5.2} s={0.55} />
    </>
  ),
  // 創作：羽毛筆 + 星
  studio: (
    <>
      <path
        d="M5.2 19.2 14.6 5.4a1.7 1.7 0 0 1 2.45-.15l1.9 1.9a1.7 1.7 0 0 1-.15 2.45L9.3 19.2H5.2z"
        {...stroke}
      />
      <path d="M12.7 7.9 16.1 11.3" {...stroke} />
      <path d="M5.2 19.2 8.1 18.3" {...stroke} opacity={0.7} />
      <Spark x={18.5} y={5.5} s={0.7} />
    </>
  ),
  // 海巡：水晶球 / 羅盤弧 + 十字光
  scout: (
    <>
      <circle cx="11.2" cy="11.2" r="6.4" {...stroke} />
      <circle cx="11.2" cy="11.2" r="2.15" {...stroke} opacity={0.55} />
      <path d="M11.2 6.4v9.6M6.4 11.2h9.6" {...stroke} opacity={0.55} />
      <path d="M15.8 15.8 20.2 20.2" {...stroke} />
      <Spark x={18.2} y={6.2} s={0.62} />
    </>
  ),
  // 發送：紙飛機 + 軌跡星
  outbox: (
    <>
      <path d="M4.2 11.1 19.6 4.6 12.2 19.8l-1.7-6.3z" {...stroke} />
      <path d="M10.5 13.5 19.6 4.6" {...stroke} opacity={0.65} />
      <Spark x={7.2} y={7.5} s={0.5} />
    </>
  ),
  // 任務：魔法卷軸／手提袋簡化
  jobs: (
    <>
      <rect x="4.2" y="7.2" width="15.6" height="12.2" rx="2.6" {...stroke} />
      <path d="M9 7.2V5.9a2.1 2.1 0 0 1 2.1-2.1h1.8A2.1 2.1 0 0 1 15 5.9v1.3" {...stroke} />
      <path d="M4.2 12.1h15.6" {...stroke} opacity={0.55} />
      <Spark x={17.5} y={15.8} s={0.55} />
    </>
  ),
  // 品牌：旗幟堡壘簡化 + 星
  brands: (
    <>
      <path d="M6.2 20V9.1L12 5.2 17.8 9.1V20" {...stroke} />
      <path d="M10.2 20v-4.6h3.6V20" {...stroke} />
      <path d="M12 9.6v2.4" {...stroke} opacity={0.55} />
      <Spark x={17.8} y={6.4} s={0.58} />
    </>
  ),
  more: (
    <>
      <circle cx="6.5" cy="12" r="1.45" fill="currentColor" />
      <circle cx="12" cy="12" r="1.45" fill="currentColor" />
      <circle cx="17.5" cy="12" r="1.45" fill="currentColor" />
    </>
  ),
  spark: (
    <>
      <Spark x={12} y={12} s={1.35} />
      <circle cx="12" cy="12" r="1.1" fill="currentColor" opacity={0.35} />
    </>
  ),
};