From 47a48b18c5e304ef740f295df0a8f211d429d565 Mon Sep 17 00:00:00 2001
From: Adam Maly <amaly@redhat.com>
Date: Wed, 4 Feb 2026 15:51:24 +0100
Subject: [PATCH] Add a better empty state for Kale LeftPanel

Signed-off-by: Adam Maly <amaly@redhat.com>
---
 labextension/src/widgets/LeftPanel.tsx | 44 ++++++++++++++++++++++++--
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/labextension/src/widgets/LeftPanel.tsx b/labextension/src/widgets/LeftPanel.tsx
index b09655d5..140f2928 100644
--- a/labextension/src/widgets/LeftPanel.tsx
+++ b/labextension/src/widgets/LeftPanel.tsx
@@ -26,10 +26,12 @@ import {
 import { JupyterFrontEnd } from '@jupyterlab/application';
 import { IDocumentManager } from '@jupyterlab/docmanager';
 import { ThemeProvider } from '@mui/material/styles';
+import { Switch } from '@mui/material';
 import { theme } from '../Theme';
 import { Input } from '../components/Input';
 import Commands from '../lib/Commands';
 import { PageConfig } from '@jupyterlab/coreutils';
+import kaleIconSvg from '../../style/icons/kale.svg';
 
 const KALE_NOTEBOOK_METADATA_KEY = 'kubeflow_notebook';
 const DEFAULT_UI_URL = 'http://localhost:8080';
@@ -556,19 +558,57 @@ export class KubeflowKaleLeftPanel extends React.Component<IProps, IState> {
                 style={{
                   fontSize: 'var(--jp-ui-font-size3)',
                   color: theme.kale.headers.main,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  gap: '8px',
                 }}
                 className="kale-header"
               >
-                Kale Deployment Panel {this.state.isEnabled}
+                Kale
+                <span
+                  style={{
+                    width: '24px',
+                    height: '24px',
+                    display: 'inline-flex',
+                  }}
+                  dangerouslySetInnerHTML={{ __html: kaleIconSvg }}
+                />
               </p>
             </div>
 
             <div className="kale-component">
-              {activeNotebook && (
+              {activeNotebook ? (
                 <InlineCellsMetadata
                   onMetadataEnable={this.onMetadataEnable}
                   notebook={activeNotebook}
                 />
+              ) : (
+                <div>
+                  <div className="toolbar input-container">
+                    <div className={'switch-label'} style={{ opacity: 0.5 }}>
+                      Enable
+                    </div>
+                    <Switch
+                      checked={false}
+                      disabled={true}
+                      color="primary"
+                      name="enableKale"
+                      classes={{ root: 'material-switch' }}
+                    />
+                  </div>
+                  <p
+                    style={{
+                      color: theme.kale.headers.main,
+                      fontSize: 'var(--jp-ui-font-size1)',
+                      textAlign: 'center',
+                      marginTop: '16px',
+                      opacity: 0.7,
+                    }}
+                  >
+                    Please open a notebook to start working with Kale
+                  </p>
+                </div>
               )}
             </div>