github/openclaw
1
1
Fork 0
mirror of https://github.com/openclaw/openclaw.git synced 2026-02-19 18:39:20 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor(tui): share select list theme styles

Browse Source
This commit is contained in:
Peter Steinberger
2026-02-18 22:31:35 +00:00
parent f054cd6709
commit bc38d9b844
2 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/tui/theme/theme.test.ts
View File

@@ -7,7 +7,8 @@ const cliHighlightMocks = vi.hoisted(() => ({
vi.mock("cli-highlight", () => cliHighlightMocks);
const { markdownTheme, theme } = await import("./theme.js");
const { markdownTheme, searchableSelectListTheme, selectListTheme, theme } =
await import("./theme.js");
const stripAnsi = (str: string) =>
str.replace(new RegExp(`${String.fromCharCode(27)}\\[[0-9;]*m`, "g"), "");
@@ -59,3 +60,23 @@ describe("theme", () => {
expect(stripAnsi(theme.assistantText("hello"))).toBe("hello");
});
});
describe("list themes", () => {
it("reuses shared select-list styles in searchable list theme", () => {
expect(searchableSelectListTheme.selectedPrefix(">")).toBe(selectListTheme.selectedPrefix(">"));
expect(searchableSelectListTheme.selectedText("entry")).toBe(
selectListTheme.selectedText("entry"),
);
expect(searchableSelectListTheme.description("desc")).toBe(selectListTheme.description("desc"));
expect(searchableSelectListTheme.scrollInfo("scroll")).toBe(
selectListTheme.scrollInfo("scroll"),
);
expect(searchableSelectListTheme.noMatch("none")).toBe(selectListTheme.noMatch("none"));
});
it("keeps searchable list specific renderers readable", () => {
expect(stripAnsi(searchableSelectListTheme.searchPrompt("Search:"))).toBe("Search:");
expect(stripAnsi(searchableSelectListTheme.searchInput("query"))).toBe("query");
expect(stripAnsi(searchableSelectListTheme.matchHighlight("match"))).toBe("match");
});
});

12
src/tui/theme/theme.ts
View File

@@ -99,7 +99,7 @@ export const markdownTheme: MarkdownTheme = {
highlightCode,
};
export const selectListTheme: SelectListTheme = {
const baseSelectListTheme: SelectListTheme = {
selectedPrefix: (text) => fg(palette.accent)(text),
selectedText: (text) => chalk.bold(fg(palette.accent)(text)),
description: (text) => fg(palette.dim)(text),
@@ -107,8 +107,10 @@ export const selectListTheme: SelectListTheme = {
noMatch: (text) => fg(palette.dim)(text),
};
export const selectListTheme: SelectListTheme = baseSelectListTheme;
export const filterableSelectListTheme = {
...selectListTheme,
...baseSelectListTheme,
filterLabel: (text: string) => fg(palette.dim)(text),
};
@@ -127,11 +129,7 @@ export const editorTheme: EditorTheme = {
};
export const searchableSelectListTheme: SearchableSelectListTheme = {
selectedPrefix: (text) => fg(palette.accent)(text),
selectedText: (text) => chalk.bold(fg(palette.accent)(text)),
description: (text) => fg(palette.dim)(text),
scrollInfo: (text) => fg(palette.dim)(text),
noMatch: (text) => fg(palette.dim)(text),
...baseSelectListTheme,
searchPrompt: (text) => fg(palette.accentSoft)(text),
searchInput: (text) => fg(palette.text)(text),
matchHighlight: (text) => chalk.bold(fg(palette.accent)(text)),