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,76 +1,77 @@
-html, body {
-    padding: 0;
-    margin: 0;
-    height: 100%;
-    width: 100%;
-    min-height: 100%;
+html,
+body {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  min-height: 100%;
 }
 
 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-dark: 1px solid var(--spectrum-global-color-gray-400);
-    --ink: var(--spectrum-alias-text-color);
-    --grey-1: var(--spectrum-global-color-gray-100);
-    --grey-2: var(--spectrum-global-color-gray-200);
-    --grey-3: var(--spectrum-global-color-gray-300);
-    --grey-4: var(--spectrum-global-color-gray-400);
-    --grey-5: var(--spectrum-global-color-gray-500);
-    --grey-6: var(--spectrum-global-color-gray-600);
-    --grey-7: var(--spectrum-global-color-gray-700);
-    --grey-8: var(--spectrum-global-color-gray-800);
-    --grey-9: var(--spectrum-global-color-gray-900);
+  --background: var(--spectrum-alias-background-color-primary);
+  --background-alt: var(--spectrum-alias-background-color-secondary);
+  --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);
+  --grey-2: var(--spectrum-global-color-gray-200);
+  --grey-3: var(--spectrum-global-color-gray-300);
+  --grey-4: var(--spectrum-global-color-gray-400);
+  --grey-5: var(--spectrum-global-color-gray-500);
+  --grey-6: var(--spectrum-global-color-gray-600);
+  --grey-7: var(--spectrum-global-color-gray-700);
+  --grey-8: var(--spectrum-global-color-gray-800);
+  --grey-9: var(--spectrum-global-color-gray-900);
 
-    font-family: var(--font-sans);
-    color: var(--ink);
-    background-color: var(--background-alt);
+  font-family: var(--font-sans);
+  color: var(--ink);
+  background-color: var(--background-alt);
 }
 
 #app {
-    height: 100%;
-    box-sizing: border-box;
-    overflow: hidden;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
 }
 
 .hoverable:hover {
-    cursor: pointer;
+  cursor: pointer;
 }
 a {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 /* Top bottom spacing */
 .bb-margin-m {
-    margin-bottom: var(--spacing-m);
+  margin-bottom: var(--spacing-m);
 }
 * + .bb-margin-m {
-    margin-top: var(--spacing-m);
+  margin-top: var(--spacing-m);
 }
 .bb-margin-xl {
-    margin-bottom: var(--spacing-xl);
+  margin-bottom: var(--spacing-xl);
 }
 * + .bb-margin-xl {
-    margin-top: var(--spacing-xl);
+  margin-top: var(--spacing-xl);
 }
 
 /* Custom scrollbars */
 ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+  width: 8px;
+  height: 8px;
 }
 ::-webkit-scrollbar-track {
-    background: var(--spectrum-alias-background-color-default);
+  background: var(--spectrum-alias-background-color-default);
 }
 ::-webkit-scrollbar-thumb {
-    background-color: var(--spectrum-global-color-gray-400);
-    border-radius: 4px;
+  background-color: var(--spectrum-global-color-gray-400);
+  border-radius: 4px;
 }
 ::-webkit-scrollbar-corner {
-    background: var(--spectrum-alias-background-color-default);
+  background: var(--spectrum-alias-background-color-default);
 }
 html * {
-    scrollbar-width: thin;
-    scrollbar-color: var(--spectrum-global-color-gray-400)
+  scrollbar-width: thin;
+  scrollbar-color: var(--spectrum-global-color-gray-400)
     var(--spectrum-alias-background-color-default);
-}
+}

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,37 +88,43 @@
   <div class="root">
     <div class="top-nav">
       <div class="topleftnav">
-        <button class="home-logo">
-          <img
-            src={Logo}
-            alt="budibase icon"
-            on:click={() => $goto(`../../portal/`)}
-          />
-        </button>
-
-        <div class="tabs">
-          <Tabs {selected}>
-            {#each $layout.children as { path, title }}
-              <Tab
-                quiet
-                selected={$isActive(path)}
-                on:click={topItemNavigate(path)}
-                title={capitalise(title)}
-              />
-            {/each}
-          </Tabs>
-        </div>
-
-        <!-- This gets all indexable subroutes and sticks them in the top nav. -->
-        <ActionGroup />
+        <Icon
+          size="M"
+          name="ArrowLeft"
+          hoverable
+          on:click={() => $goto("../")}
+        />
+        <Heading size="S">{$store.name || "App"}</Heading>
+      </div>
+      <div class="topcenternav">
+        <Tabs {selected} size="M">
+          {#each $layout.children as { path, title }}
+            <Tab
+              quiet
+              selected={$isActive(path)}
+              on:click={topItemNavigate(path)}
+              title={capitalise(title)}
+            />
+          {/each}
+        </Tabs>
       </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 /> -->