Added "home" button and tooltips

packages/web/components/page_navigator.tsx

@@ -30,6 +30,8 @@ export function PageNavigator({
   if (currentPage && currentPage.includes("/")) {
     const pieces = currentPage.split("/");
     completePrefix = pieces.slice(0, pieces.length - 1).join("/") + "/";
+  } else if (currentPage && currentPage.includes(" ")) {
+    completePrefix = currentPage.split(" ")[0] + " ";
   }
   return (
     <FilterList

packages/web/components/top_bar.tsx

@@ -1,4 +1,4 @@
-import { faRunning } from "@fortawesome/free-solid-svg-icons";
+import { faRunning, faHome } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Notification } from "../types";
 
@@ -14,6 +14,7 @@ export function TopBar({
   unsavedChanges,
   notifications,
   onClick,
+  onHomeClick,
   onActionClick,
   lhs,
   rhs,
@@ -22,6 +23,7 @@ export function TopBar({
   unsavedChanges: boolean;
   notifications: Notification[];
   onClick: () => void;
+  onHomeClick: () => void;
   onActionClick: () => void;
   lhs?: React.ReactNode;
   rhs?: React.ReactNode;
@@ -46,10 +48,19 @@ export function TopBar({
           <div className="actions">
             <button
               onClick={(e) => {
-                // setMenuExpanded(!menuExpanded);
+                onHomeClick();
+                e.stopPropagation();
+              }}
+              title="Navigate to the 'index' page"
+            >
+              <FontAwesomeIcon icon={faHome} />
+            </button>
+            <button
+              onClick={(e) => {
                 onActionClick();
                 e.stopPropagation();
               }}
+              title="Open the command palette"
             >
               <FontAwesomeIcon icon={faRunning} />
             </button>

packages/web/editor.tsx

@@ -656,6 +656,9 @@ export class Editor {
           onClick={() => {
             dispatch({ type: "start-navigate" });
           }}
+          onHomeClick={() => {
+            editor.navigate("index");
+          }}
           onActionClick={() => {
             dispatch({ type: "show-palette" });
           }}

packages/web/styles/main.scss

@@ -112,35 +112,13 @@ body {
     }
     .actions {
       text-align: right;
-      width: 40px;
 
-      ul {
-        list-style: none;
-        margin-left: 0;
-        padding-left: 0;
-        margin-top: 0;
-        list-style: none;
-        background: #fff;
-        border: #000 1px solid;
-        text-align: left;
-
-        a {
-          padding: 3px;
-          font-family: var(--ui-font);
-          font-size: 50%;
-          text-decoration: none;
-          color: #000;
-        }
-
-        li {
-          padding-left: 10px;
-          padding-right: 10px;
-          padding-bottom: 5px;
-        }
-
-        li:hover {
-          background-color: #4d8dff12;
-        }
+      button {
+        border: 1px solid #7897d0;
+        border-radius: 3px;
+        margin: 3px;
+        padding: 5px;
+        background-color: #e6e6e6;
       }
     }
   }