Repository: manusa/electronim
Pull request #93 (2022-09-03 15:17:26)

♻️ Help has top bar (consistent UX)
Signed-off-by: Marc Nuri <marc@marcnuri.com>

sonarcloud[bot]: Kudos, SonarCloud Quality Gate passed!&nbsp; &nbsp; [![Quality Gate passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/passed-16px.png 'Quality Gate passed')](https://sonarcloud.io/dashboard?id=manusa_electronim&pullRequest=93)

[![Bug](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/bug-16px.png 'Bug')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=93&resolved=false&types=BUG) [![A](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/RatingBadge/A-16px.png 'A')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=93&resolved=false&types=BUG) [0 Bugs](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=93&resolved=false&types=BUG)  
[![Vulnerability](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/vulnerability-16px.png 'Vulnerability')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=93&resolved=false&types=VULNERABILITY) [![A](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/RatingBadge/A-16px.png 'A')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=93&resolved=false&types=VULNERABILITY) [0 Vulnerabilities](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=93&resolved=false&types=VULNERABILITY)  
[![Security Hotspot](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/security_hotspot-16px.png 'Security Hotspot')](https://sonarcloud.io/project/security_hotspots?id=manusa_electronim&pullRequest=93&resolved=false&types=SECURITY_HOTSPOT) [![A](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/RatingBadge/A-16px.png 'A')](https://sonarcloud.io/project/security_hotspots?id=manusa_electronim&pullRequest=93&resolved=false&types=SECURITY_HOTSPOT) [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=manusa_electronim&pullRequest=93&resolved=false&types=SECURITY_HOTSPOT)  
[![Code Smell](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/code_smell-16px.png 'Code Smell')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=93&resolved=false&types=CODE_SMELL) [![A](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/RatingBadge/A-16px.png 'A')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=93&resolved=false&types=CODE_SMELL) [0 Code Smells](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=93&resolved=false&types=CODE_SMELL)

[![100.0%](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/CoverageChart/100-16px.png '100.0%')](https://sonarcloud.io/component_measures?id=manusa_electronim&pullRequest=93&metric=new_coverage&view=list) [100.0% Coverage](https://sonarcloud.io/component_measures?id=manusa_electronim&pullRequest=93&metric=new_coverage&view=list)  
[![0.0%](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/Duplications/3-16px.png '0.0%')](https://sonarcloud.io/component_measures?id=manusa_electronim&pullRequest=93&metric=new_duplicated_lines_density&view=list) [0.0% Duplication](https://sonarcloud.io/component_measures?id=manusa_electronim&pullRequest=93&metric=new_duplicated_lines_density&view=list)



Patch:
diff --git a/src/help/browser-help.css b/src/help/browser-help.css
index 28875fe..6cbf38c 100644
--- a/src/help/browser-help.css
+++ b/src/help/browser-help.css
@@ -19,7 +19,7 @@
   --color-gray-lighter: #dbdbdb;
   --color-gray: #7d7d7d;
   --border-color: var(--color-gray-lighter);
-  --toolbar-height: 60px;
+  --top-bar-height: 60px;
   --toc-min-width: 250px;
   --code-background-color: rgba(27, 31,35, 0.05);
   --code-border-radius: 6px;
@@ -30,22 +30,10 @@
   overflow: hidden;
 }
 
-.toolbar {
-  position: absolute;
-  top: 0;
-  left: calc(var(--default-spacing) * 3);
-  right: calc(var(--default-spacing) * 3);
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: var(--default-spacing);
-  height: var(--toolbar-height);
-}
 
 .help-root {
   position: fixed;
-  top: 0;
+  top: var(--top-bar-height);
   left: 0;
   bottom: 0;
   right: 0;
diff --git a/src/help/browser-help.js b/src/help/browser-help.js
index c55c6c9..8ca5fa1 100644
--- a/src/help/browser-help.js
+++ b/src/help/browser-help.js
@@ -13,11 +13,10 @@
    See the License for the specific language governing permissions and
    limitations under the License.
  */
-const {APP_EVENTS, ELECTRONIM_VERSION, ipcRenderer, docs} = window;
-const {h, render} = window.preact;
-// const {useReducer} = window.preactHooks;
-const html = window.htm.bind(h);
+const {APP_EVENTS, ELECTRONIM_VERSION, docs, html, ipcRenderer, preact: {render}, TopBar} = window;
+
 const helpRoot = () => document.querySelector('.help-root');
+const close = () => ipcRenderer.send(APP_EVENTS.closeDialog);
 
 const Document = ({id}) => html`
   <a id=${id} />
@@ -52,24 +51,18 @@ const Content = () => html`
   </div>
 `;
 
-const Toolbar = () => {
-  const close = () => ipcRenderer.send(APP_EVENTS.closeDialog);
-  return html`
-    <div class="toolbar">
-      <button class="button is-link is-light" onclick=${close}>
-        Close
-      </button>
-    </div>
-`;
-};
-
-
 const Help = () => html`
+    <${TopBar} fixed=${true} title='Help'
+      endComponents=${html`
+        <div class='navbar-item'>
+          <button class="button is-link is-light" onclick=${close}>Close</button>
+        </div>
+      `}
+    />
     <div class="help-content">
       <${Toc} />
       <${Content} />
     </div>
-    <${Toolbar} />
   `;
 
 render(html`<${Help} />`, helpRoot());
diff --git a/src/help/preload.js b/src/help/preload.js
index f95b79a..58670ef 100644
--- a/src/help/preload.js
+++ b/src/help/preload.js
@@ -22,6 +22,7 @@ components.addStylesheet('./browser-help.css');
 
 window.preact = require('preact');
 window.preactHooks = require('preact/hooks');
-window.htm = require('htm');
+window.html = require('htm').bind(window.preact.h);
+window.TopBar = components.topBar(window.html);
 
 window.docs = require('./').loadDocs();
diff --git a/src/settings/browser-settings.js b/src/settings/browser-settings.js
index 738e603..340d520 100644
--- a/src/settings/browser-settings.js
+++ b/src/settings/browser-settings.js
@@ -271,8 +271,7 @@ const Settings = () => {
   });
   const cancel = () => ipcRenderer.send(APP_EVENTS.closeDialog);
   return html`
-  <${TopBar}
-    fixed=${true} title='Settings'
+  <${TopBar} fixed=${true} title='Settings'
     endComponents=${html`
       <div class="navbar-item field is-grouped">
         <div class="control">


Test patch:
diff --git a/src/help/__tests/browser-help.test.js b/src/help/__tests/browser-help.test.js
index 528bee1..6003b7f 100644
--- a/src/help/__tests/browser-help.test.js
+++ b/src/help/__tests/browser-help.test.js
@@ -29,8 +29,8 @@ describe('Help in Browser test suite', () => {
       send: jest.fn()
     };
     window.preact = require('preact');
-    window.preactHooks = require('preact/hooks');
-    window.htm = require('htm');
+    window.html = require('htm').bind(window.preact.h);
+    window.TopBar = require('../../components').topBar(window.html);
     window.APP_EVENTS = {closeDialog: 'close the dialog'};
     window.ELECTRONIM_VERSION = '1.33.7';
     window.docs = {