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

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>

src/modules/lecture/ui/registerLecturePane.ts

@@ -4,6 +4,7 @@ import { findPdfAttachment } from "../../pdf/extractor";
 import { ensureChatPapersStyles } from "../../ui/readerPane";
 import {
   applyAdaptiveHeight,
+  applyItemPaneSectionButtonIcons,
   buildItemPaneSectionButtons,
   onItemPaneSectionToggle,
   prepareItemPaneBody,
@@ -71,6 +72,7 @@ export function registerLecturePane() {
         body.append(err);
       }
       applyAdaptiveHeight(body, "lecture");
+      applyItemPaneSectionButtonIcons(body);
       const section = body.closest("collapsible-section");
       if (section?.hasAttribute("open")) {
         refreshSectionOpenHeight(body);

src/modules/ui/itemPaneSection.ts

@@ -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;

src/modules/ui/readerPane.ts

@@ -3,6 +3,7 @@ import { getLocaleID, getString } from "../../utils/locale";
 import { ChatView } from "./chatView";
 import {
   applyAdaptiveHeight,
+  applyItemPaneSectionButtonIcons,
   buildItemPaneSectionButtons,
   onItemPaneSectionToggle,
   prepareItemPaneBody,
@@ -62,6 +63,7 @@ export function registerChatPane() {
       views.set(body, view);
       await view.mount();
       applyAdaptiveHeight(body, "chat");
+      applyItemPaneSectionButtonIcons(body);
       const section = body.closest("collapsible-section");
       if (section?.hasAttribute("open")) {
         refreshSectionOpenHeight(body);