66 lines
4.0 KiB
TypeScript
66 lines
4.0 KiB
TypeScript
import type { CSSProperties } from "react";
|
|
import { BookOpen, Keyboard, Puzzle, Settings2 } from "lucide-react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler";
|
|
import { GitHubLink } from "@/components/layout/github-link";
|
|
import { VersionReleaseModal } from "@/components/layout/version-release-modal";
|
|
import { DOCS_URL } from "@/constant/env";
|
|
import { changeAppLocale, type AppLocale } from "@/i18n";
|
|
import { cn } from "@/lib/utils";
|
|
import { canvasThemes } from "@/lib/canvas-theme";
|
|
import { useConfigStore } from "@/stores/use-config-store";
|
|
import { useThemeStore } from "@/stores/use-theme-store";
|
|
|
|
type UserStatusActionsProps = {
|
|
showConfig?: boolean;
|
|
variant?: "default" | "canvas";
|
|
onOpenShortcuts?: () => void;
|
|
onOpenPlugins?: () => void;
|
|
};
|
|
|
|
export function UserStatusActions({ showConfig = true, variant = "default", onOpenShortcuts, onOpenPlugins }: UserStatusActionsProps) {
|
|
const { i18n, t } = useTranslation();
|
|
const theme = useThemeStore((state) => state.theme);
|
|
const setTheme = useThemeStore((state) => state.setTheme);
|
|
const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
|
|
const canvasTheme = canvasThemes[theme];
|
|
const naturalIconClass = "inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-stone-600 transition-colors hover:bg-black/5 hover:text-stone-950 dark:text-stone-300 dark:hover:bg-white/10 dark:hover:text-white [&_svg]:size-4";
|
|
const iconStyle: CSSProperties | undefined = variant === "canvas" ? { color: canvasTheme.node.text } : undefined;
|
|
const versionStyle = iconStyle;
|
|
const gitHubClassName = "size-7 text-base";
|
|
const gitHubStyle = iconStyle;
|
|
const locale = i18n.resolvedLanguage as AppLocale;
|
|
const nextLocale = locale === "zh-CN" ? "en-US" : "zh-CN";
|
|
const languageLabel = t("topNav.switchLanguage", { language: t(nextLocale === "zh-CN" ? "locale.zhCN" : "locale.enUS") });
|
|
|
|
return (
|
|
<div className="inline-flex shrink-0 items-center gap-1">
|
|
{onOpenPlugins ? (
|
|
<button type="button" className={naturalIconClass} style={iconStyle} onClick={onOpenPlugins} aria-label={t("topNav.plugins")} title={t("topNav.plugins")}>
|
|
<Puzzle className="size-4" />
|
|
</button>
|
|
) : null}
|
|
<a href={DOCS_URL} target="_blank" rel="noopener noreferrer" className={naturalIconClass} style={iconStyle} aria-label={t("topNav.docs")} title={t("topNav.docs")}>
|
|
<BookOpen className="size-4" />
|
|
</a>
|
|
{showConfig ? (
|
|
<button type="button" className={naturalIconClass} style={iconStyle} onClick={() => openConfigDialog(false)} aria-label={t("navigation.config")} title={t("navigation.config")}>
|
|
<Settings2 className="size-4" />
|
|
</button>
|
|
) : null}
|
|
<button type="button" className={`${naturalIconClass} text-[11px] font-semibold tracking-tight`} style={iconStyle} onClick={() => void changeAppLocale(nextLocale)} aria-label={languageLabel} title={languageLabel}>
|
|
{locale === "zh-CN" ? "中" : "EN"}
|
|
</button>
|
|
<AnimatedThemeToggler theme={theme} onThemeChange={setTheme} className={naturalIconClass} style={iconStyle} aria-label={t(theme === "dark" ? "topNav.lightTheme" : "topNav.darkTheme")} title={t(theme === "dark" ? "topNav.lightTheme" : "topNav.darkTheme")} />
|
|
<VersionReleaseModal style={versionStyle} />
|
|
<GitHubLink className={cn("bg-transparent hover:bg-transparent dark:hover:bg-transparent", gitHubClassName)} style={gitHubStyle} />
|
|
{onOpenShortcuts ? (
|
|
<button type="button" className={naturalIconClass} style={iconStyle} onClick={onOpenShortcuts} aria-label={t("topNav.shortcuts")} title={t("topNav.shortcuts")}>
|
|
<Keyboard className="size-4" />
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|