Function SettingsMenu

web/components/SettingsMenu.tsx:53–111

()

}

export function SettingsMenu() {
  const t = useT();
  const { locale, setLocale } = useLocale();
  const { show, setShow } = useSelfRefs();
  const { open, toggle, ref } = usePopover();

  return (
    <div className="relative" ref={ref}>
      <Button
        variant="ghost"
        size="sm"
        onClick={toggle}
        title={t("settings.title")}
        aria-label={t("settings.title")}
        aria-haspopup="dialog"
        aria-expanded={open}
        className="px-2"
      >
        <Settings className="h-4 w-4" />
      </Button>

      {open && (
        <div
          role="dialog"
          aria-label={t("settings.title")}
          className="absolute right-0 top-full mt-1.5 w-64 rounded-lg border bg-popover text-popover-foreground shadow-lg p-3 z-50"
        >
          <SectionLabel>{t("settings.section.display")}</SectionLabel>

          {/* 界面语言 */}
          <div className="flex items-center justify-between mb-2.5">
            <span className="text-sm">{t("settings.language")}</span>
            <div className="flex gap-0.5 rounded-md bg-muted p-0.5">
              <Segment active={locale === "zh"} onClick={() => locale !== "zh" && setLocale("zh")}>
                {t("locale.toggle_to_zh")}
              </Segment>
              <Segment active={locale === "en"} onClick={() => locale !== "en" && setLocale("en")}>
                {t("locale.toggle_to_en")}
              </Segment>
            </div>
          </div>

          {/* § 段落引用 */}
          <div className="flex items-center justify-between">
            <span className="text-sm">{t("settings.self_refs")}</span>
            <div className="flex gap-0.5 rounded-md bg-muted p-0.5">
              <Segment active={show} onClick={() => !show && setShow(true)}>
                {t("common.on")}
              </Segment>
              <Segment active={!show} onClick={() => show && setShow(false)}>
                {t("common.off")}
              </Segment>
            </div>
          </div>
        </div>
      )}
    </div>
  );