- fix: too narrow sidebar without clusters #755 (#765)

- fix: navigate to landing on workspace switch

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/+landing-page/landing-page.scss

@@ -9,7 +9,7 @@
     background-position: 0 35%;
     background-size: 85%;
     background-clip: content-box;
-    opacity: 1;
+    opacity: .75;
     top: 0;
     left: 0;
     bottom: 0;
@@ -21,4 +21,39 @@
       opacity: 0.2;
     }
   }
+
+  .startup-hint {
+    $bgc: $mainBackground;
+    $arrowSize: 10px;
+
+    position: absolute;
+    left: 0;
+    top: 25px;
+    margin: $padding;
+    padding: $padding * 2;
+    width: 320px;
+    background: $bgc;
+    color: $textColorAccent;
+    filter: drop-shadow(0 0px 2px #ffffff33);
+
+    &:before {
+      content: "";
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-top: $arrowSize solid transparent;
+      border-bottom: $arrowSize solid transparent;
+      border-right: $arrowSize solid $bgc;
+      right: 100%;
+    }
+
+    .theme-light & {
+      filter: drop-shadow(0 0px 2px #777);
+      background: white;
+
+      &:before {
+        border-right-color: white;
+      }
+    }
+  }
 }

src/renderer/components/+landing-page/landing-page.tsx

@@ -1,5 +1,6 @@
 import "./landing-page.scss"
 import React from "react";
+import { observable } from "mobx";
 import { observer } from "mobx-react";
 import { Trans } from "@lingui/macro";
 import { clusterStore } from "../../../common/cluster-store";
@@ -7,11 +8,24 @@ import { workspaceStore } from "../../../common/workspace-store";
 
 @observer
 export class LandingPage extends React.Component {
+  @observable showHint = true;
+
   render() {
     const clusters = clusterStore.getByWorkspaceId(workspaceStore.currentWorkspaceId);
     const noClustersInScope = !clusters.length;
+    const showStartupHint = this.showHint && noClustersInScope;
     return (
       <div className="LandingPage flex">
+        {showStartupHint && (
+          <div className="startup-hint flex column gaps" onMouseEnter={() => this.showHint = false}>
+            <p><Trans>This is the quick launch menu.</Trans></p>
+            <p>
+              <Trans>
+                Associate clusters and choose the ones you want to access via quick launch menu by clicking the + button.
+              </Trans>
+            </p>
+          </div>
+        )}
         {noClustersInScope && (
           <div className="no-clusters flex column gaps box center">
             <h1>