yhy/chatpapers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Fix item pane section button icons in light and dark themes.

Browse Source 
Wire stroke context properties for Lucide SVG toolbar icons and set light/dark icon URLs on open-in-window and adaptive-height buttons.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
yhy
2026-08-29 23:54:45 +08:00
co-authored by Cursor
parent 36b806378f
commit 54f004a56c
4 changed files with 75 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/ui/itemPaneSection.ts
+43 -25
View File
@@ -37,6 +37,48 @@ export function isAdaptiveHeight(kind: ItemPaneKind): boolean {
return val !== false;
}
function setSectionButtonIcons(btn: HTMLElement, icon: string): void {
const url = `url('${icon}')`;
btn.style.setProperty("--custom-button-icon-light", url);
btn.style.setProperty("--custom-button-icon-dark", url);
}
function applyOpenInWindowButtonIcon(body: HTMLElement): void {
const section = resolveCollapsibleSection(body);
const btn = section?.querySelector(
".open-in-window.section-custom-button",
) as HTMLElement | null;
if (!btn) return;
setSectionButtonIcons(btn, OPEN_WINDOW_ICON);
}
export function updateAdaptiveButtonState(
body: HTMLElement,
adaptive: boolean,
): void {
const section = resolveCollapsibleSection(body);
const btn = section?.querySelector(
".adaptive-height.section-custom-button",
) as HTMLElement | null;
if (!btn) return;
btn.setAttribute("aria-pressed", adaptive ? "true" : "false");
btn.classList.toggle("chatpapers-adaptive-active", adaptive);
setSectionButtonIcons(btn, adaptive ? ADAPTIVE_ICON : ADAPTIVE_ICON_OFF);
btn.title = getString(
adaptive ? "item-pane-adaptive-height-on" : "item-pane-adaptive-height-off",
);
}
export function applyItemPaneSectionButtonIcons(
body: HTMLElement,
adaptive = isAdaptiveHeight(
(body.dataset.chatpapersPaneKind || "chat") as ItemPaneKind,
),
): void {
applyOpenInWindowButtonIcon(body);
updateAdaptiveButtonState(body, adaptive);
}
export function applyAdaptiveHeight(
body: HTMLElement,
kind: ItemPaneKind,
@@ -49,7 +91,7 @@ export function applyAdaptiveHeight(
const section = resolveCollapsibleSection(body);
section?.classList.toggle("chatpapers-adaptive-height", adaptive);
section?.classList.toggle("chatpapers-fixed-height", !adaptive);
updateAdaptiveButtonState(body, adaptive);
applyItemPaneSectionButtonIcons(body, adaptive);
}
export function toggleAdaptiveHeight(
@@ -81,30 +123,6 @@ export function refreshSectionOpenHeight(body: HTMLElement): void {
section.style.setProperty("--open-height", `${maxH}px`);
}
export function updateAdaptiveButtonState(
body: HTMLElement,
adaptive: boolean,
): void {
const section = resolveCollapsibleSection(body);
const btn = section?.querySelector(
".adaptive-height.section-custom-button",
) as HTMLElement | null;
if (!btn) return;
btn.setAttribute("aria-pressed", adaptive ? "true" : "false");
btn.classList.toggle("chatpapers-adaptive-active", adaptive);
btn.style.setProperty(
"--custom-button-icon-light",
`url('${adaptive ? ADAPTIVE_ICON : ADAPTIVE_ICON_OFF}')`,
);
btn.style.setProperty(
"--custom-button-icon-dark",
`url('${adaptive ? ADAPTIVE_ICON : ADAPTIVE_ICON_OFF}')`,
);
btn.title = getString(
adaptive ? "item-pane-adaptive-height-on" : "item-pane-adaptive-height-off",
);
}
export function onItemPaneSectionToggle(options: {
body: HTMLElement;
event?: Event;