chore: Hide introduction panel when current panel is set in ZenSidebarManager

src/browser/base/content/ZenSidebarManager.mjs

@@ -149,10 +149,6 @@ var gZenBrowserManagerSidebar = {
   toggle() {
     if (!this._currentPanel) {
       this._currentPanel = this._lastOpenedPanel;
-      if (!this._currentPanel) {
-        let data = this.sidebarData;
-        this._currentPanel = data.index[0];
-      }
       this.update();
       return;
     } 
@@ -293,14 +289,19 @@ var gZenBrowserManagerSidebar = {
     }
   },
 
+  get introductionPanel() {
+    return document.getElementById("zen-sidebar-introduction-panel");
+  },
+
   _updateWebPanel() {
     this._updateButtons();
     let sidebar = this._openAndGetWebPanelWrapper();
     this._hideAllWebPanels();
     if (!this._currentPanel) {
-      sidebar.setAttribute("hidden", "true");
+      this.introductionPanel.removeAttribute("hidden");
       return;
     }
+    this.introductionPanel.setAttribute("hidden", "true");
     let existantWebview = this._getCurrentBrowser();
     if (existantWebview) {
       existantWebview.docShellIsActive = true;

src/browser/base/content/zen-sidebar-panel.inc.xhtml

@@ -15,6 +15,10 @@
       </hbox>
     </toolbar>
     <vbox id="zen-sidebar-web-panel-browser-containers">
+      <vbox id="zen-sidebar-introduction-panel" hidden="true">
+        <html:h1 data-l10n-id="zen-sidebar-introduction-title"/>
+        <html:p data-l10n-id="zen-sidebar-introduction-description"/>
+      </vbox>
     </vbox>
     <toolbar mode="icons" flex="1" id="zen-sidebar-panels-wrapper">
       <toolbar mode="icons" flex="1" id="zen-sidebar-panels-sites">

src/browser/locales/en-US/browser/zen-web-side-panels.ftl

@@ -26,3 +26,6 @@ zen-web-side-panel-open-in-new-tab =
 zen-web-side-panel-context-add-to-panel =
     .label = Add to Web Panels
     .accesskey = A
+
+zen-sidebar-introduction-title = Welcome to Zen Sidebar
+zen-sidebar-introduction-description = Zen Sidebar is a new way to browse the web. Click on any of the icons to open a web panel.

src/browser/themes/shared/zen-sidebar-panels.css

@@ -227,6 +227,32 @@
   position: relative;
 }
 
+#zen-sidebar-introduction-panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+  width: 70%;
+}
+
+#zen-sidebar-introduction-panel[hidden="true"] {
+  display: none;
+}
+
+#zen-sidebar-introduction-panel h1 {
+  font-size: 1.5em;
+  font-weight: 600;
+  margin: 0;
+  margin-bottom: 5px;
+}
+
+#zen-sidebar-introduction-panel p {
+  opacity: 0.7;
+  text-align: center;
+}
+
 #zen-sidebar-web-panel browser[zen-sidebar-id] {
   height: 100%;
 }