Update top bar with back arrow, app name, centered large tabs, new icons, tooltips on right icons and removal of version and self-host icons

packages/builder/src/components/deploy/RevertModal.svelte

@@ -28,7 +28,12 @@
   }
 </script>
 
-<Icon name="Revert" hoverable on:click={revertModal.show} />
+<Icon
+  name="Revert"
+  hoverable
+  on:click={revertModal.show}
+  tooltip="Revert changes"
+/>
 <Modal bind:this={revertModal}>
   <ModalContent
     title="Revert Changes"

packages/builder/src/global.css

@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
   padding: 0;
   margin: 0;
   height: 100%;
@@ -9,7 +10,7 @@ html, body {
 body {
   --background: var(--spectrum-alias-background-color-primary);
   --background-alt: var(--spectrum-alias-background-color-secondary);
-    --border-light: 1px solid var(--spectrum-global-color-gray-300);
+  --border-light: 2px solid var(--spectrum-global-color-gray-200);
   --border-dark: 1px solid var(--spectrum-global-color-gray-400);
   --ink: var(--spectrum-alias-text-color);
   --grey-1: var(--spectrum-global-color-gray-100);

packages/builder/src/pages/builder/app/[application]/_layout.svelte

@@ -1,16 +1,13 @@
 <script>
   import { store, automationStore } from "builderStore"
   import { roles, flags } from "stores/backend"
-  import { Icon, ActionGroup, Tabs, Tab, notifications } from "@budibase/bbui"
+  import { Icon, Tabs, Tab, notifications, Heading } from "@budibase/bbui"
   import DeployModal from "components/deploy/DeployModal.svelte"
   import RevertModal from "components/deploy/RevertModal.svelte"
-  import VersionModal from "components/deploy/VersionModal.svelte"
   import { API } from "api"
-  import { auth, admin } from "stores/portal"
+  import { apps } from "stores/portal"
   import { isActive, goto, layout, redirect } from "@roxi/routify"
-  import Logo from "assets/bb-emblem.svg"
   import { capitalise } from "helpers"
-  import UpgradeModal from "components/upgrade/UpgradeModal.svelte"
   import { onMount, onDestroy } from "svelte"
 
   export let application
@@ -20,14 +17,21 @@
 
   // Sync once when you load the app
   let hasSynced = false
+
   $: selected = capitalise(
     $layout.children.find(layout => $isActive(layout.path))?.title ?? "data"
   )
+  $: appInfo = $apps?.find(app => app.devId === application)
+  $: published = appInfo?.status === "published"
 
-  function previewApp() {
+  const viewPreviewApp = () => {
     window.open(`/${application}`)
   }
 
+  const viewPublishedApp = () => {
+    window.open(`/app${appInfo?.url}`)
+  }
+
   async function getPackage() {
     try {
       const pkg = await API.fetchAppPackage(application)
@@ -67,6 +71,9 @@
       }
       hasSynced = true
     }
+    if (!$apps?.length) {
+      apps.load()
+    }
   })
 
   onDestroy(() => {
@@ -81,16 +88,16 @@
   <div class="root">
     <div class="top-nav">
       <div class="topleftnav">
-        <button class="home-logo">
-          <img
-            src={Logo}
-            alt="budibase icon"
-            on:click={() => $goto(`../../portal/`)}
+        <Icon
+          size="M"
+          name="ArrowLeft"
+          hoverable
+          on:click={() => $goto("../")}
         />
-        </button>
-
-        <div class="tabs">
-          <Tabs {selected}>
+        <Heading size="S">{$store.name || "App"}</Heading>
+      </div>
+      <div class="topcenternav">
+        <Tabs {selected} size="M">
           {#each $layout.children as { path, title }}
             <Tab
               quiet
@@ -101,17 +108,23 @@
           {/each}
         </Tabs>
       </div>
-
-        <!-- This gets all indexable subroutes and sticks them in the top nav. -->
-        <ActionGroup />
-      </div>
       <div class="toprightnav">
-        {#if $admin.cloud && $auth.user.account}
-          <UpgradeModal />
-        {/if}
-        <VersionModal />
         <RevertModal />
-        <Icon name="Play" hoverable on:click={previewApp} />
+        <Icon
+          name="Visibility"
+          hoverable
+          on:click={viewPreviewApp}
+          tooltip="View app preview"
+        />
+        <Icon
+          name={published ? "Globe" : "GlobeStrike"}
+          hoverable
+          disabled={!published}
+          on:click={viewPublishedApp}
+          tooltip={published
+            ? "View published app"
+            : "Your app is not published"}
+        />
         <DeployModal />
       </div>
     </div>
@@ -138,16 +151,37 @@
   }
 
   .top-nav {
-    flex: 0 0 auto;
+    flex: 0 0 60px;
     background: var(--background);
     padding: 0 var(--spacing-xl);
     display: flex;
+    flex-direction: row;
     box-sizing: border-box;
     justify-content: space-between;
-    align-items: center;
+    align-items: stretch;
     border-bottom: var(--border-light);
   }
 
+  .topleftnav {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+  .topleftnav :global(.spectrum-Heading) {
+    font-weight: 600;
+  }
+
+  .topcenternav {
+    display: flex;
+    position: relative;
+    margin-bottom: -2px;
+  }
+  .topcenternav :global(.spectrum-Tabs-itemLabel) {
+    font-weight: bold !important;
+  }
+
   .toprightnav {
     display: flex;
     flex-direction: row;
@@ -155,35 +189,4 @@
     align-items: center;
     gap: var(--spacing-xl);
   }
-
-  .topleftnav {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-  }
-
-  .tabs {
-    display: flex;
-    position: relative;
-    margin-bottom: -1px;
-  }
-
-  .home-logo {
-    border-style: none;
-    background-color: rgba(0, 0, 0, 0);
-    cursor: pointer;
-    outline: none;
-    padding: 0 10px 0 0;
-    align-items: center;
-    height: 32px;
-  }
-
-  .home-logo:active {
-    outline: none;
-  }
-
-  .home-logo img {
-    height: 30px;
-  }
 </style>

packages/builder/src/pages/builder/app/[application]/data/_layout.svelte

@@ -18,7 +18,7 @@
   }
 </script>
 
-<!-- routify:options index=0 -->
+<!-- routify:options index=2 -->
 <div class="root">
   <div class="nav">
     <Tabs {selected} on:select={selectFirstDatasource}>

packages/builder/src/pages/builder/app/[application]/data/index.svelte

@@ -20,4 +20,3 @@
 </script>
 
 <CreateDatasourceModal bind:modal />
-<!-- routify:options index=false -->

packages/builder/src/pages/builder/app/[application]/design/index.svelte

@@ -4,5 +4,3 @@
 
   $goto(`./${FrontendTypes.SCREEN}`)
 </script>
-
-<!-- routify:options index=1 -->

packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte

@@ -1,2 +1,2 @@
-<!-- routify:options index=false -->
+<!-- routify:options index=4 -->
 <slot />

packages/builder/src/pages/builder/app/[application]/settings/index.svelte

@@ -1 +1,6 @@
 Settings
+
+<!--  {#if $admin.cloud && $auth.user.account}
+  <UpgradeModal />
+{/if}
+<VersionModal /> -->