From 48a0626150652bfca1717faa7dfb25865c5b1432 Mon Sep 17 00:00:00 2001
From: Yahiewi <yahiahenien@gmail.com>
Date: Tue, 30 Jun 2026 14:44:33 +0200
Subject: [PATCH 1/2] Add custom settings icon API

---
 src/document/factory.tsx     |  3 +++
 src/token.ts                 |  3 +++
 src/topbar/index.tsx         |  2 ++
 src/topbar/menuComponent.tsx | 31 ++++++++++++++++++++++++++++---
 src/topbar/settingDialog.tsx |  2 +-
 src/topbar/topbarWidget.tsx  | 16 ++++++++++++++++
 6 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/src/document/factory.tsx b/src/document/factory.tsx
index 1dea786..2357578 100644
--- a/src/document/factory.tsx
+++ b/src/document/factory.tsx
@@ -66,6 +66,7 @@ export class NotebookGridWidgetFactory extends ABCWidgetFactory<
         } else {
           topbarWidget = this._spectaTopbar;
         }
+        const topbar = topbarWidget as TopbarWidget | undefined;
 
         const menu = (
           <MenuComponent
@@ -75,6 +76,8 @@ export class NotebookGridWidgetFactory extends ABCWidgetFactory<
             uiSwitcher={this._uiSwitcher}
             currentPath={path}
             currentUi={isSpecta ? 'specta' : 'lab'}
+            settingsIconChanged={topbar?.settingsIconChanged}
+            customIcon={topbarWidget?.customIcon}
           />
         );
 
diff --git a/src/token.ts b/src/token.ts
index 2225a39..9400a79 100644
--- a/src/token.ts
+++ b/src/token.ts
@@ -74,6 +74,7 @@ export type ISpectaUrlFactory = (path: string, ui?: string) => string;
 export interface ISpectaUiSwitcher {
   uis: IUiOption[];
   switchTo: (path: string, ui: string) => void;
+  label?: string;
 }
 export const ISpectaLayoutRegistry = new Token<ISpectaLayoutRegistry>(
   'specta:ISpectaLayoutRegistry'
@@ -108,6 +109,8 @@ export interface ISpectaTopbarWidget {
   ) => Widget;
   addSettingsWidget?: (widget: ISpectaWidget) => void;
   settingsWidgets?: ISpectaWidget[];
+  setSettingsIcon?: (icon: JSX.Element) => void;
+  customIcon?: JSX.Element;
 }
 export const ISpectaTopbarWidgetToken = new Token<ISpectaTopbarWidget>(
   'specta:ISpectaTopbarWidget'
diff --git a/src/topbar/index.tsx b/src/topbar/index.tsx
index 5aec8b6..69382a4 100644
--- a/src/topbar/index.tsx
+++ b/src/topbar/index.tsx
@@ -74,6 +74,8 @@ export const topbarPlugin: JupyterFrontEndPlugin<
         uiSwitcher={uiSwitcher}
         currentPath={path}
         currentUi={isSpecta ? 'specta' : 'lab'}
+        settingsIconChanged={widget.settingsIconChanged}
+        customIcon={widget.customIcon}
       />
     );
     widget.addReactWidget(menu, 'right', 10000);
diff --git a/src/topbar/menuComponent.tsx b/src/topbar/menuComponent.tsx
index a7a75c5..f5a9c9b 100644
--- a/src/topbar/menuComponent.tsx
+++ b/src/topbar/menuComponent.tsx
@@ -1,5 +1,6 @@
 import { IThemeManager } from '@jupyterlab/apputils';
 import React, { useState, useRef, useEffect } from 'react';
+import { ISignal } from '@lumino/signaling';
 
 import { GearIcon } from '../components/icon/gear';
 import { IconButton } from '../components/iconButton';
@@ -13,12 +14,19 @@ interface IProps {
   uiSwitcher?: ISpectaUiSwitcher | null;
   currentPath?: string | null;
   currentUi?: string;
+  settingsIconChanged?: ISignal<any, JSX.Element>;
+  customIcon?: JSX.Element;
 }
 
 export function MenuComponent(props: IProps): JSX.Element {
   const [open, setOpen] = useState(false);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const dialogRef = useRef<HTMLDivElement>(null);
+  const [customIcon, setCustomIcon] = useState<JSX.Element | undefined>(props.customIcon);
+
+  useEffect(() => {
+    setCustomIcon(props.customIcon);
+  }, [props.customIcon]);
 
   useEffect(() => {
     const handleClickOutside = (e: any) => {
@@ -34,14 +42,31 @@ export function MenuComponent(props: IProps): JSX.Element {
     document.addEventListener('mousedown', handleClickOutside);
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
+
+  useEffect(() => {
+    const signal = props.settingsIconChanged;
+    if (!signal) {
+      return;
+    }
+    const handler = (_sender: any, icon: JSX.Element) => {
+      setCustomIcon(icon);
+    };
+    signal.connect(handler);
+    return () => {
+      signal.disconnect(handler);
+    };
+  }, [props.settingsIconChanged]);
+
+  const menuIcon = customIcon || (
+    <GearIcon fill="var(--jp-ui-font-color2)" height={23} width={23} />
+  );
+
   return (
     <div className="specta-topbar-right">
       <IconButton
         ref={buttonRef}
         onClick={() => setOpen(!open)}
-        icon={
-          <GearIcon fill="var(--jp-ui-font-color2)" height={23} width={23} />
-        }
+        icon={menuIcon}
       />
 
       {open && (
diff --git a/src/topbar/settingDialog.tsx b/src/topbar/settingDialog.tsx
index 67b51b9..e5b9218 100644
--- a/src/topbar/settingDialog.tsx
+++ b/src/topbar/settingDialog.tsx
@@ -198,7 +198,7 @@ export const SettingContent = (props: {
         )}
       {currentPath && uiSwitcher && uiSwitcher.uis.length > 0 && (
         <div>
-          <label htmlFor="">Select UI</label>
+          <label htmlFor="">{uiSwitcher.label ?? 'Select UI'}</label>
           <div className="jp-select-wrapper">
             <select
               className=" jp-mod-styled specta-topbar-theme"
diff --git a/src/topbar/topbarWidget.tsx b/src/topbar/topbarWidget.tsx
index f2380a7..f079707 100644
--- a/src/topbar/topbarWidget.tsx
+++ b/src/topbar/topbarWidget.tsx
@@ -1,5 +1,6 @@
 import { ReactWidget } from '@jupyterlab/apputils';
 import { Panel, Widget } from '@lumino/widgets';
+import { Signal, ISignal } from '@lumino/signaling';
 
 import { ITopbarConfig, ISpectaWidget } from '../token';
 import { RankedPanel } from './rankedPanel';
@@ -55,9 +56,24 @@ export class TopbarWidget extends Panel {
     return this._settingsWidgets;
   }
 
+  setSettingsIcon(icon: JSX.Element): void {
+    this._customIcon = icon;
+    this._settingsIconChanged.emit(icon);
+  }
+
+  get settingsIconChanged(): ISignal<this, JSX.Element> {
+    return this._settingsIconChanged;
+  }
+
+  get customIcon(): JSX.Element | undefined {
+    return this._customIcon;
+  }
+
   private _leftSide = new RankedPanel();
   private _rightSide = new RankedPanel();
   private _settingsWidgets: ISpectaWidget[] = [];
+  private _settingsIconChanged = new Signal<this, JSX.Element>(this);
+  private _customIcon: JSX.Element | undefined;
 
   private _config: ITopbarConfig;
 }

From c6593bcb80a9fb8c60c1f8b5d990ee064c4b3b65 Mon Sep 17 00:00:00 2001
From: Yahiewi <yahiahenien@gmail.com>
Date: Tue, 30 Jun 2026 14:54:23 +0200
Subject: [PATCH 2/2] Lint

---
 src/topbar/menuComponent.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/topbar/menuComponent.tsx b/src/topbar/menuComponent.tsx
index f5a9c9b..6915144 100644
--- a/src/topbar/menuComponent.tsx
+++ b/src/topbar/menuComponent.tsx
@@ -22,7 +22,9 @@ export function MenuComponent(props: IProps): JSX.Element {
   const [open, setOpen] = useState(false);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const dialogRef = useRef<HTMLDivElement>(null);
-  const [customIcon, setCustomIcon] = useState<JSX.Element | undefined>(props.customIcon);
+  const [customIcon, setCustomIcon] = useState<JSX.Element | undefined>(
+    props.customIcon
+  );
 
   useEffect(() => {
     setCustomIcon(props.customIcon);