trungleduc · Dec 21, 2025 · Dec 21, 2025 · Dec 21, 2025
diff --git a/demo/files/blog.ipynb b/demo/files/blog.ipynb
@@ -389,23 +389,22 @@
   }
  ],
  "metadata": {
-  "kernelspec": {
-   "display_name": "Python 3 (ipykernel)",
-   "language": "python",
-   "name": "python3"
-  },
-  "language_info": {
-   "codemirror_mode": {
-    "name": "ipython",
-    "version": 3
-   },
-   "file_extension": ".py",
-   "mimetype": "text/x-python",
-   "name": "python",
-   "nbconvert_exporter": "python",
-   "pygments_lexer": "ipython3",
-   "version": "3.13.5"
-  }
+    "kernelspec": {
+      "name": "xpython",
+      "display_name": "Python 3.13 (XPython)",
+      "language": "python"
+    },
+    "language_info": {
+      "file_extension": ".py",
+      "mimetype": "text/x-python",
+      "name": "python",
+      "version": "3.13.1"
+    },
+    "specta": {
+      "hideTopbar": "No",
+      "slidesTheme": null,
+      "defaultLayout": "article"
+    }
  },
  "nbformat": 4,
  "nbformat_minor": 5

diff --git a/demo/jupyter-lite.json b/demo/jupyter-lite.json
@@ -9,12 +9,8 @@
       "defaultLayout": "default",
       "perFileConfig": {
         "blog.ipynb": {
-          "hideTopbar": true,
-          "defaultLayout": "article",
-          "topBar": {
-            "title": "ipecharts blog",
-            "themeToggle": false
-          }
+          "hideTopbar": false,
+          "defaultLayout": "article"
         },
         "slides.ipynb": {
           "hideTopbar": true,

diff --git a/schema/app-meta.json b/schema/app-meta.json
@@ -9,6 +9,17 @@
       "metadataSchema": {
         "type": "object",
         "properties": {
+          "/specta/topbarTitle": {
+            "title": "Top Bar Title",
+            "type": "string",
+            "default": ""
+          },
+          "/specta/topbarThemeToggle": {
+            "title": "Top Bar Theme Toggle",
+            "type": "string",
+            "enum": ["Yes", "No"],
+            "default": "Yes"
+          },
           "/specta/defaultLayout": {
             "title": "Page layout",
             "type": "string",
@@ -55,6 +66,14 @@
         "/specta/slidesTheme": {
           "metadataLevel": "notebook",
           "writeDefault": false
+        },
+        "/specta/topbarTitle": {
+          "metadataLevel": "notebook",
+          "writeDefault": false
+        },
+        "/specta/topbarThemeToggle": {
+          "metadataLevel": "notebook",
+          "writeDefault": false
         }
       }
     }

diff --git a/src/components/icon/gear.tsx b/src/components/icon/gear.tsx
@@ -3,11 +3,18 @@ import React from 'react';
 export const GearIcon = ({ ...props }: React.SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    height="24px"
-    viewBox="0 -960 960 960"
-    width="24px"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
     {...props}
   >
-    <path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" />
+    <path d="M4 5h16" />
+    <path d="M4 12h16" />
+    <path d="M4 19h16" />
   </svg>
 );
diff --git a/src/document/factory.tsx b/src/document/factory.tsx
@@ -59,7 +59,7 @@ export class NotebookGridWidgetFactory extends ABCWidgetFactory<
         } else {
           // Specta app, add topbar to layout
           topbar.id = 'specta-topbar-widget';
-          this._shell.add(topbar, 'top');
+          this._shell.add(topbar, 'top', { rank: 100 });
         }
       } else if (isSpecta) {
         this._shell.hideTopBar();

diff --git a/src/document/plugin.ts b/src/document/plugin.ts
@@ -91,12 +91,11 @@ export const spectaOpener: JupyterFrontEndPlugin<void, ILabShell> = {
     defaultBrowser: IDefaultFileBrowser
   ): Promise<void> => {
     const urlParams = new URLSearchParams(window.location.search);
-    const path = urlParams.get('path');
     if (!isSpectaApp()) {
+      // Not a specta app
+      const path = urlParams.get('specta-path');
+
       if (!path) {
-        app.restored.then(async () => {
-          await app.commands.execute('application:reset-layout');
-        });
         return;
       }
       app.restored.then(async () => {
@@ -105,7 +104,7 @@ export const spectaOpener: JupyterFrontEndPlugin<void, ILabShell> = {
         if (PathExt.extname(path) === '.ipynb') {
           const commands = app.commands;
           const spectaConfig = readSpectaConfig({});
-
+          console.log('spectaConfig', spectaConfig);
           await configLabLayout({
             config: spectaConfig.labConfig,
             labShell,
@@ -117,9 +116,10 @@ export const spectaOpener: JupyterFrontEndPlugin<void, ILabShell> = {
           }
         }
       });
-      // Not a specta app
       return;
     } else {
+      //  Specta app
+      const path = urlParams.get('path');
       if (!path) {
         const browser = createFileBrowser({ defaultBrowser });
         app.shell.add(browser, 'main', { rank: 100 });

diff --git a/src/tool.ts b/src/tool.ts
@@ -130,6 +130,7 @@ export function mergeObjects(
   for (const obj of objects) {
     for (const [key, value] of Object.entries(obj)) {
       if (value !== null && value !== undefined) {
+        console.log('setting', key, value);
         result[key] = value;
       }
     }
@@ -165,11 +166,16 @@ export function readSpectaConfig({
     pathWithoutDrive = paths[1];
   }
   const { perFileConfig, ...globalConfig } = JSON.parse(rawConfig);
+
   let spectaConfig: ISpectaAppConfig = { ...(globalConfig ?? {}) };
+  let fileConfig: ISpectaAppConfig = {};
   if (perFileConfig && pathWithoutDrive && perFileConfig[pathWithoutDrive]) {
-    spectaConfig = { ...spectaConfig, ...perFileConfig[pathWithoutDrive] };
+    fileConfig = perFileConfig[pathWithoutDrive];
+    spectaConfig = { ...spectaConfig, ...fileConfig };
   }
+
   const spectaMetadata = JSON.parse(JSON.stringify(nbMetadata?.specta ?? {}));
+
   if (spectaMetadata.hideTopbar === 'Yes') {
     spectaMetadata.hideTopbar = true;
   } else if (spectaMetadata.hideTopbar === 'No') {
@@ -179,11 +185,28 @@ export function readSpectaConfig({
       spectaConfig.hideTopbar === null ||
       spectaConfig.hideTopbar === undefined
     ) {
-      // Hide topbar by default if not specified in the global config
+      // Show topbar by default if not specified in the global config
       // and notebook metadata
-      spectaMetadata.hideTopbar = true;
+      spectaMetadata.hideTopbar = false;
+    }
+  }
+  if (!spectaMetadata.hideTopbar) {
+    spectaMetadata.topBar = {};
+    if (spectaMetadata.topbarTitle && spectaMetadata.topbarTitle !== '') {
+      spectaMetadata.topBar.title = spectaMetadata.topbarTitle;
+      delete spectaMetadata.topbarTitle;
+    } else if (!fileConfig?.topBar?.title) {
+      spectaMetadata.topBar.title = pathWithoutDrive;
+    }
+    if (spectaMetadata.topbarThemeToggle === 'No') {
+      spectaMetadata.topBar.themeToggle = false;
+    } else {
+      spectaMetadata.topBar.themeToggle = true;
     }
+    delete spectaMetadata.topbarThemeToggle;
   }
+
+  // merge spectaConfig and spectaMetadata (spectaMetadata has higher priority
   return mergeObjects(spectaConfig, spectaMetadata);
 }
 

diff --git a/src/topbar/widget.tsx b/src/topbar/widget.tsx
@@ -15,7 +15,7 @@ interface IProps {
 export function TopbarElement(props: IProps): JSX.Element {
   const config = React.useMemo((): ITopbarConfig => {
     return {
-      background: props.config?.background ?? 'var(--jp-layout-color2)',
+      background: props.config?.background ?? 'var(--jp-layout-color1)',
       title: props.config?.title ?? 'Specta',
       themeToggle: Boolean(props.config?.themeToggle),
       kernelActivity: Boolean(props.config?.kernelActivity),
@@ -42,11 +42,11 @@ export function TopbarElement(props: IProps): JSX.Element {
     document.addEventListener('mousedown', handleClickOutside);
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
-
+  console.log('config.background ', config.background);
   return (
     <div
       className="specta-topbar"
-      style={{ background: config.background ?? 'var(--jp-layout-color2)' }}
+      style={{ background: config.background ?? 'var(--jp-layout-color1)' }}
     >
       <div className="specta-topbar-left">
         <div className="specta-topbar-icon-container">

diff --git a/style/base.css b/style/base.css
@@ -69,11 +69,13 @@
 }
 
 #specta-top-panel {
-  min-height: 36px;
+  min-height: 28px;
   display: flex;
   box-shadow: unset !important;
   z-index: 100;
   contain: unset !important;
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color0);
+  background: var(--jp-layout-color1);
 }
 
 .specta-topbar-element {
@@ -84,7 +86,7 @@
 .specta-topbar {
   display: flex;
   flex-direction: row;
-  height: 36px;
+  height: 28px;
   width: calc(100% + 20px);
   border-bottom: solid 0.5px var(--jp-border-color1);
   gap: 10px;
@@ -128,7 +130,9 @@
   border-radius: 50% !important;
   transition: background 0.2s ease;
   background: transparent;
+  padding: 0 !important;
 }
+
 .specta-icon-button:hover {
   background-color: var('--jp-layout-color3');
 }

diff --git a/style/style.css b/style/style.css
@@ -6,6 +6,7 @@
 
 .specta-document-viewer #jp-main-content-panel jp-toolbar:first-of-type {
   display: none;
+  height: 0px !important;
 }
 
 .specta-file-browser {
@@ -28,6 +29,6 @@
 }
 
 .specta-main-content-panel {
-  padding-left: 5px;
-  padding-right: 5px;
+  padding-left: 0px;
+  padding-right: 0px;
 }