nntrivi2001
865c6c1d1e
Moves FileViewer, EditorModal, ConfirmDeleteModal, ToastNotice, MdItemList, ScopeBadge, and the shared atoms (Empty/SkeletonRows/CopyButton/formatBytes) into client/src/components/config/ so the upcoming Codex config panel can reuse them. EditorModal now takes a fetchContent callback instead of calling api.ccConfig.file itself; CcConfig.tsx supplies the Claude-specific fetcher. The moved EditorState/ConfirmDeleteState type field widens from CcArtifactType to string so non-Claude callers can use them too, with a cast at the two remaining Claude-specific call sites in CcConfig.tsx.
33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
/**
|
|
* @file ScopeBadge.tsx
|
|
* @description Small colored badge for a config artifact's scope (user /
|
|
* project / project-local). Tool-agnostic — takes a plain string so it works
|
|
* for Claude Code and Codex scopes alike.
|
|
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
|
*/
|
|
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export function ScopeBadge({ scope }: { scope: string }) {
|
|
const { t } = useTranslation("ccConfig");
|
|
const color =
|
|
scope === "user"
|
|
? "bg-sky-500/10 text-sky-300 border-sky-500/30"
|
|
: scope === "project"
|
|
? "bg-status-success/10 text-status-success border-status-success/30"
|
|
: scope === "project-local"
|
|
? "bg-violet-500/10 text-violet-300 border-violet-500/30"
|
|
: "bg-surface-3 text-fg-secondary border-border";
|
|
const label =
|
|
scope === "project-local"
|
|
? t("scope.projectLocal")
|
|
: scope === "user"
|
|
? t("scope.user")
|
|
: scope === "project"
|
|
? t("scope.project")
|
|
: scope;
|
|
return (
|
|
<span className={`text-[10px] font-mono px-1.5 py-0.5 rounded border ${color}`}>{label}</span>
|
|
);
|
|
}
|