From 48773b80f4aa18cbc3c99dff0934b281a31393f7 Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Mon, 29 Jul 2024 14:51:28 +0200
Subject: [PATCH] chore: Hide introduction panel when current panel is set in
 ZenSidebarManager

---
 .../base/content/ZenSidebarManager.mjs        | 11 ++++----
 .../base/content/zen-sidebar-panel.inc.xhtml  |  4 +++
 .../en-US/browser/zen-web-side-panels.ftl     |  3 +++
 .../themes/shared/zen-sidebar-panels.css      | 26 +++++++++++++++++++
 4 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/browser/base/content/ZenSidebarManager.mjs b/src/browser/base/content/ZenSidebarManager.mjs
index d8a61320f..fa89e8934 100644
--- a/src/browser/base/content/ZenSidebarManager.mjs
+++ b/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;
diff --git a/src/browser/base/content/zen-sidebar-panel.inc.xhtml b/src/browser/base/content/zen-sidebar-panel.inc.xhtml
index 9bc557311..1e718452b 100644
--- a/src/browser/base/content/zen-sidebar-panel.inc.xhtml
+++ b/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">
diff --git a/src/browser/locales/en-US/browser/zen-web-side-panels.ftl b/src/browser/locales/en-US/browser/zen-web-side-panels.ftl
index 34c6a7840..b624c9eea 100644
--- a/src/browser/locales/en-US/browser/zen-web-side-panels.ftl
+++ b/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.
diff --git a/src/browser/themes/shared/zen-sidebar-panels.css b/src/browser/themes/shared/zen-sidebar-panels.css
index 4028dc05b..c6a579ba7 100644
--- a/src/browser/themes/shared/zen-sidebar-panels.css
+++ b/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%;
 }