Portal redesign (#9336)

* Update BB logo to black

* Update top nav bar and core layout

* Add redesign for apps pages

* Update user and groups pages

* More WIP portal redesign!

* Fix top nav colours and fix selected tab not updating

* Remove log

* Update copy on settings pages

* Update and standardise page headers and subtitles, and remove side nav titles

* Update font styles to allow for easy customisation

* Update button styles to always use newStyles, update auth page styles

* Update settings pages to new designs

* Update structure for account pages

* Add initial rewrite of app overview section

* Update config checklist to properly center

* Update app overview version and name/url screens

* Add tooltip to explain why URL cannot be changed until unpublishing

* Update overview automation history tab

* Update overview backups page

* Rewrite app overview access tab

* Update table hover colours

* Remove scrolling from tables when not required and stop selects from updating their own state locally

* Update table styles to support flexible column widths much better

* Fix extremely long strings in breadcrumbs not wrapping

* Fix multiple issues with long text overflow

* Fix flashing in version settings page

* Fix loading bugs in app backups page

* Add sidebar for portal and use it for automation history. Fix multiple overflow and scrolling issues

* Tidy up

* Update user details page to use tables and match designs

* Update users detail page

* Update user and group details pages with new tables

* Fix automation error linking from apps page and improve automation fetching logic in automation history

* Move theme and API key into user profile dropdown instead of settings

* Move settings before account and show plugins for devs

* Convert plugins page to table and update components and modals

* Update links when going back from the builder

* Update plugin search placeholder

* Fix URLs in app overview

* Properly handle text overflow in plugins table

* Remove getting started checklist

* Fix checklist removal and fix profile modal

* Update email details page to match new designs

* Cleanup

* Add licensing and env logic to determine which account links to show

* Update upgrade button URL for cloud accounts

* Update app list to use a more compact style

* Make core page layout responsive and update apps list to be responsive

* Update mobile design of apps page

* Update more pages to be responsive and add mobile specific components

* Refactor main portal page into multiple components

* Update multiple pages to be responsive and improve loading experience

* Make automation history page responsive

* Update backups page to be responsive

* Update pickers to use absolutely positioned root popover so that overflow does not matter

* Fix some responsive styles

* Fix update link in app overview

* Improve dropdown logic

* Lint

* Update click outside handler to handle modals properly

* Remove log

* Fix mobile menu upgrade button not closing menu

* Hide groups page if disabled at tenant level

* Centralise menu logic and show full menu on mobile

* Update app access assignment and fix backups table

* Ensure avatars cannot be squished

* Standardise disabled field text colour

* Allow developer users to access users, groups and usage pages

* Allow readonly access to users and groups for developer users

* Remove logs

* Improve users page loading experience

* Improve responsiveness on apps list page and fix discussions link styles

* Update spacing on user and group detail page and fix usage page showing wrong copy

* Fix logo override not working

* Pin minio version to an old one that supports the fs backend in dev

* Shrink upgrade button

* Shrink user dropdown

* Update assignment modal text

* Remove clickable visual styles from plugins

* Always show groups section in app access page

* Update app overview button styles to include more CTAs

* Hide edit and view links in more menu on overview page unless on mobile

* Make usage stats responsive and fix layout issues

* Add comment to docker-compose config

hosting/docker-compose.dev.yaml

@@ -6,7 +6,8 @@ services:
   minio-service:
     container_name: budi-minio-dev
     restart: on-failure
-    image: minio/minio
+    # Last version that supports the "fs" backend
+    image: minio/minio:RELEASE.2022-10-24T18-35-07Z
     volumes:
       - minio_data:/data
     ports:

packages/bbui/src/Actions/click_outside.js

@@ -1,11 +1,11 @@
-const ignoredClasses = [".flatpickr-calendar", ".modal-container"]
+const ignoredClasses = [".flatpickr-calendar"]
 let clickHandlers = []
 
 /**
  * Handle a body click event
  */
 const handleClick = event => {
-  // Ignore click if needed
+  // Ignore click if this is an ignored class
   for (let className of ignoredClasses) {
     if (event.target.closest(className)) {
       return
@@ -14,9 +14,18 @@ const handleClick = event => {
 
   // Process handlers
   clickHandlers.forEach(handler => {
-    if (!handler.element.contains(event.target)) {
-      handler.callback?.(event)
+    if (handler.element.contains(event.target)) {
+      return
     }
+
+    // Ignore clicks for modals, unless the handler is registered from a modal
+    const sourceInModal = handler.element.closest(".spectrum-Modal") != null
+    const clickInModal = event.target.closest(".spectrum-Modal") != null
+    if (clickInModal && !sourceInModal) {
+      return
+    }
+
+    handler.callback?.(event)
   })
 }
 document.documentElement.addEventListener("click", handleClick, true)

packages/bbui/src/Actions/position_dropdown.js

@@ -1,75 +1,68 @@
-export default function positionDropdown(element, { anchor, align, maxWidth }) {
-  let positionSide = "top"
-  let maxHeight = 0
-  let dimensions = getDimensions(anchor)
+export default function positionDropdown(
+  element,
+  { anchor, align, maxWidth, useAnchorWidth }
+) {
+  const update = () => {
+    const anchorBounds = anchor.getBoundingClientRect()
+    const elementBounds = element.getBoundingClientRect()
+    let styles = {
+      maxHeight: null,
+      minWidth: null,
+      maxWidth,
+      left: null,
+      top: null,
+    }
 
-  function getDimensions() {
-    const {
-      bottom,
-      top: spaceAbove,
-      left,
-      width,
-    } = anchor.getBoundingClientRect()
-    const spaceBelow = window.innerHeight - bottom
-    const containerRect = element.getBoundingClientRect()
-
-    let y
-
-    if (spaceAbove > spaceBelow) {
-      positionSide = "bottom"
-      maxHeight = spaceAbove - 20
-      y = window.innerHeight - spaceAbove + 5
+    // Determine vertical styles
+    if (window.innerHeight - anchorBounds.bottom < 100) {
+      styles.top = anchorBounds.top - elementBounds.height - 5
     } else {
-      positionSide = "top"
-      y = bottom + 5
-      maxHeight = spaceBelow - 20
+      styles.top = anchorBounds.bottom + 5
+      styles.maxHeight = window.innerHeight - anchorBounds.bottom - 20
     }
 
-    return {
-      [positionSide]: y,
-      left,
-      width,
-      containerWidth: containerRect.width,
+    // Determine horizontal styles
+    if (!maxWidth && useAnchorWidth) {
+      styles.maxWidth = anchorBounds.width
     }
+    if (useAnchorWidth) {
+      styles.minWidth = anchorBounds.width
+    }
+    if (align === "right") {
+      styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width
+    } else if (align === "right-side") {
+      styles.left = anchorBounds.left + anchorBounds.width
+    } else {
+      styles.left = anchorBounds.left
+    }
+
+    // Apply styles
+    Object.entries(styles).forEach(([style, value]) => {
+      if (value) {
+        element.style[style] = `${value.toFixed(0)}px`
+      } else {
+        element.style[style] = null
+      }
+    })
   }
 
-  function calcLeftPosition() {
-    let left
-
-    if (align == "right") {
-      left = dimensions.left + dimensions.width - dimensions.containerWidth
-    } else if (align == "right-side") {
-      left = dimensions.left + dimensions.width
-    } else {
-      left = dimensions.left
-    }
-
-    return left
-  }
-
+  // Apply initial styles which don't need to change
   element.style.position = "absolute"
   element.style.zIndex = "9999"
-  if (maxWidth) {
-    element.style.maxWidth = `${maxWidth}px`
-  }
-  element.style.minWidth = `${dimensions.width}px`
-  element.style.maxHeight = `${maxHeight.toFixed(0)}px`
-  element.style.transformOrigin = `center ${positionSide}`
-  element.style[positionSide] = `${dimensions[positionSide]}px`
-  element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
 
+  // Observe both anchor and element and resize the popover as appropriate
   const resizeObserver = new ResizeObserver(entries => {
-    entries.forEach(() => {
-      dimensions = getDimensions()
-      element.style[positionSide] = `${dimensions[positionSide]}px`
-      element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
-    })
+    entries.forEach(update)
   })
   resizeObserver.observe(anchor)
   resizeObserver.observe(element)
+
+  document.addEventListener("scroll", update, true)
+
   return {
     destroy() {
       resizeObserver.disconnect()
+      document.removeEventListener("scroll", update, true)
     },
   }
 }

packages/bbui/src/Avatar/Avatar.svelte

@@ -58,5 +58,6 @@
     overflow: hidden;
     user-select: none;
     text-transform: uppercase;
+    flex-shrink: 0;
   }
 </style>

packages/bbui/src/Button/Button.svelte

@@ -14,7 +14,7 @@
   export let active = false
   export let tooltip = undefined
   export let dataCy
-  export let newStyles = false
+  export let newStyles = true
 
   let showTooltip = false
 </script>
@@ -28,6 +28,7 @@
   class:spectrum-Button--quiet={quiet}
   class:new-styles={newStyles}
   class:active
+  class:disabled
   class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
   {disabled}
   data-cy={dataCy}
@@ -108,7 +109,10 @@
     border-color: transparent;
     color: var(--spectrum-global-color-gray-900);
   }
-  .spectrum-Button--secondary.new-styles:hover {
+  .spectrum-Button--secondary.new-styles:not(.disabled):hover {
     background: var(--spectrum-global-color-gray-300);
   }
+  .spectrum-Button--secondary.new-styles.disabled {
+    color: var(--spectrum-global-color-gray-500);
+  }
 </style>

packages/bbui/src/Drawer/DrawerContent.svelte

@@ -34,7 +34,6 @@
     display: none;
   }
   .main {
-    font-family: var(--font-sans);
     padding: var(--spacing-xl);
   }
   .main :global(textarea) {

packages/bbui/src/Form/Core/DatePicker.svelte

@@ -264,7 +264,7 @@
     max-height: 100%;
   }
   :global(.flatpickr-calendar) {
-    font-family: "Source Sans Pro", sans-serif;
+    font-family: var(--font-sans);
   }
   .is-disabled {
     pointer-events: none !important;

packages/bbui/src/Form/Core/Picker.svelte

@@ -2,12 +2,12 @@
   import "@spectrum-css/picker/dist/index-vars.css"
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
-  import { fly } from "svelte/transition"
   import { createEventDispatcher } from "svelte"
   import clickOutside from "../../Actions/click_outside"
   import Search from "./Search.svelte"
   import Icon from "../../Icon/Icon.svelte"
   import StatusLight from "../../StatusLight/StatusLight.svelte"
+  import Popover from "../../Popover/Popover.svelte"
 
   export let id = null
   export let disabled = false
@@ -33,7 +33,10 @@
   export let sort = false
 
   const dispatch = createEventDispatcher()
+
   let searchTerm = null
+  let button
+  let popover
 
   $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
   $: filteredOptions = getFilteredOptions(
@@ -76,77 +79,117 @@
   }
 </script>
 
-<div use:clickOutside={() => (open = false)}>
-  <button
-    {id}
-    class="spectrum-Picker spectrum-Picker--sizeM"
-    class:spectrum-Picker--quiet={quiet}
-    {disabled}
-    class:is-invalid={!!error}
-    class:is-open={open}
-    aria-haspopup="listbox"
-    on:click={onClick}
-  >
-    {#if fieldIcon}
-      <span class="option-extra">
-        <Icon name={fieldIcon} />
-      </span>
-    {/if}
-    {#if fieldColour}
-      <span class="option-extra">
-        <StatusLight square color={fieldColour} />
-      </span>
-    {/if}
-    <span
-      class="spectrum-Picker-label"
-      class:is-placeholder={isPlaceholder}
-      class:auto-width={autoWidth}
-    >
-      {fieldText}
+<button
+  {id}
+  class="spectrum-Picker spectrum-Picker--sizeM"
+  class:spectrum-Picker--quiet={quiet}
+  {disabled}
+  class:is-invalid={!!error}
+  class:is-open={open}
+  aria-haspopup="listbox"
+  on:click={onClick}
+  use:clickOutside={() => (open = false)}
+  bind:this={button}
+>
+  {#if fieldIcon}
+    <span class="option-extra icon">
+      <Icon size="S" name={fieldIcon} />
     </span>
-    {#if error}
-      <svg
-        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
-        focusable="false"
-        aria-hidden="true"
-        aria-label="Folder"
-      >
-        <use xlink:href="#spectrum-icon-18-Alert" />
-      </svg>
-    {/if}
+  {/if}
+  {#if fieldColour}
+    <span class="option-extra">
+      <StatusLight square color={fieldColour} />
+    </span>
+  {/if}
+  <span
+    class="spectrum-Picker-label"
+    class:is-placeholder={isPlaceholder}
+    class:auto-width={autoWidth}
+  >
+    {fieldText}
+  </span>
+  {#if error}
     <svg
-      class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
+      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
       focusable="false"
       aria-hidden="true"
+      aria-label="Folder"
     >
-      <use xlink:href="#spectrum-css-icon-Chevron100" />
+      <use xlink:href="#spectrum-icon-18-Alert" />
     </svg>
-  </button>
-  {#if open}
-    <div
-      transition:fly|local={{ y: -20, duration: 200 }}
-      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
-      class:auto-width={autoWidth}
-    >
-      {#if autocomplete}
-        <Search
-          value={searchTerm}
-          on:change={event => (searchTerm = event.detail)}
-          {disabled}
-          placeholder="Search"
-        />
+  {/if}
+  <svg
+    class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
+    focusable="false"
+    aria-hidden="true"
+  >
+    <use xlink:href="#spectrum-css-icon-Chevron100" />
+  </svg>
+</button>
+
+<Popover
+  anchor={button}
+  align="left"
+  portalTarget={document.documentElement}
+  bind:this={popover}
+  {open}
+  on:close={() => (open = false)}
+  useAnchorWidth={!autoWidth}
+  maxWidth={autoWidth ? 400 : null}
+>
+  <div class="popover-content" class:auto-width={autoWidth}>
+    {#if autocomplete}
+      <Search
+        value={searchTerm}
+        on:change={event => (searchTerm = event.detail)}
+        {disabled}
+        placeholder="Search"
+      />
+    {/if}
+    <ul class="spectrum-Menu" role="listbox">
+      {#if placeholderOption}
+        <li
+          class="spectrum-Menu-item placeholder"
+          class:is-selected={isPlaceholder}
+          role="option"
+          aria-selected="true"
+          tabindex="0"
+          on:click={() => onSelectOption(null)}
+        >
+          <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
+          <svg
+            class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <use xlink:href="#spectrum-css-icon-Checkmark100" />
+          </svg>
+        </li>
       {/if}
-      <ul class="spectrum-Menu" role="listbox">
-        {#if placeholderOption}
+      {#if filteredOptions.length}
+        {#each filteredOptions as option, idx}
           <li
-            class="spectrum-Menu-item placeholder"
-            class:is-selected={isPlaceholder}
+            class="spectrum-Menu-item"
+            class:is-selected={isOptionSelected(getOptionValue(option, idx))}
             role="option"
             aria-selected="true"
             tabindex="0"
-            on:click={() => onSelectOption(null)}
+            on:click={() => onSelectOption(getOptionValue(option, idx))}
+            class:is-disabled={!isOptionEnabled(option)}
           >
-            <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
+            {#if getOptionIcon(option, idx)}
+              <span class="option-extra icon">
+                <Icon size="S" name={getOptionIcon(option, idx)} />
+              </span>
+            {/if}
+            {#if getOptionColour(option, idx)}
+              <span class="option-extra">
+                <StatusLight square color={getOptionColour(option, idx)} />
+              </span>
+            {/if}
+            <span class="spectrum-Menu-itemLabel">
+              {getOptionLabel(option, idx)}
+            </span>
             <svg
               class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
               focusable="false"
@@ -155,61 +198,13 @@
               <use xlink:href="#spectrum-css-icon-Checkmark100" />
             </svg>
           </li>
-        {/if}
-        {#if filteredOptions.length}
-          {#each filteredOptions as option, idx}
-            <li
-              class="spectrum-Menu-item"
-              class:is-selected={isOptionSelected(getOptionValue(option, idx))}
-              role="option"
-              aria-selected="true"
-              tabindex="0"
-              on:click={() => onSelectOption(getOptionValue(option, idx))}
-              class:is-disabled={!isOptionEnabled(option)}
-            >
-              {#if getOptionIcon(option, idx)}
-                <span class="option-extra">
-                  <Icon name={getOptionIcon(option, idx)} />
-                </span>
-              {/if}
-              {#if getOptionColour(option, idx)}
-                <span class="option-extra">
-                  <StatusLight square color={getOptionColour(option, idx)} />
-                </span>
-              {/if}
-              <span class="spectrum-Menu-itemLabel">
-                {getOptionLabel(option, idx)}
-              </span>
-              <svg
-                class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-                focusable="false"
-                aria-hidden="true"
-              >
-                <use xlink:href="#spectrum-css-icon-Checkmark100" />
-              </svg>
-            </li>
-          {/each}
-        {/if}
-      </ul>
-    </div>
-  {/if}
-</div>
+        {/each}
+      {/if}
+    </ul>
+  </div>
+</Popover>
 
 <style>
-  .spectrum-Popover {
-    max-height: 240px;
-    z-index: 999;
-    top: 100%;
-  }
-  .spectrum-Popover:not(.auto-width) {
-    width: 100%;
-  }
-  .spectrum-Popover.auto-width :global(.spectrum-Menu-itemLabel) {
-    max-width: 400px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
   .spectrum-Picker {
     width: 100%;
     box-shadow: none;
@@ -229,9 +224,6 @@
   .spectrum-Picker-label.auto-width.is-placeholder {
     padding-right: 2px;
   }
-  .auto-width .spectrum-Menu-item {
-    padding-right: var(--spacing-xl);
-  }
 
   /* Icon and colour alignment */
   .spectrum-Menu-checkmark {
@@ -241,27 +233,48 @@
   .option-extra {
     padding-right: 8px;
   }
+  .option-extra.icon {
+    margin: 0 -1px;
+  }
 
-  .spectrum-Popover :global(.spectrum-Search) {
+  /* Popover */
+  .popover-content {
+    display: contents;
+  }
+  .popover-content.auto-width .spectrum-Menu-itemLabel {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .popover-content:not(.auto-width) .spectrum-Menu-itemLabel {
+    width: 0;
+    flex: 1 1 auto;
+  }
+  .popover-content.auto-width .spectrum-Menu-item {
+    padding-right: var(--spacing-xl);
+  }
+  .spectrum-Menu-item.is-disabled {
+    pointer-events: none;
+  }
+
+  /* Search styles inside popover */
+  .popover-content :global(.spectrum-Search) {
     margin-top: -1px;
     margin-left: -1px;
     width: calc(100% + 2px);
   }
-  .spectrum-Popover :global(.spectrum-Search input) {
+  .popover-content :global(.spectrum-Search input) {
     height: auto;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     padding-top: var(--spectrum-global-dimension-size-100);
     padding-bottom: var(--spectrum-global-dimension-size-100);
   }
-  .spectrum-Popover :global(.spectrum-Search .spectrum-ClearButton) {
+  .popover-content :global(.spectrum-Search .spectrum-ClearButton) {
     right: 1px;
     top: 2px;
   }
-  .spectrum-Popover :global(.spectrum-Search .spectrum-Textfield-icon) {
+  .popover-content :global(.spectrum-Search .spectrum-Textfield-icon) {
     top: 9px;
   }
-  .spectrum-Menu-item.is-disabled {
-    pointer-events: none;
-  }
 </style>

packages/bbui/src/Form/Core/TextField.svelte

@@ -112,8 +112,4 @@
   .spectrum-Textfield {
     width: 100%;
   }
-  input:disabled {
-    color: var(--spectrum-global-color-gray-600) !important;
-    -webkit-text-fill-color: var(--spectrum-global-color-gray-600) !important;
-  }
 </style>

packages/bbui/src/Icon/IconAvatar.svelte

@@ -19,6 +19,7 @@
   .icon {
     width: 28px;
     height: 28px;
+    flex: 0 0 28px;
     display: grid;
     place-items: center;
     border-radius: 50%;
@@ -34,6 +35,7 @@
   .icon.size--S {
     width: 22px;
     height: 22px;
+    flex: 0 0 22px;
   }
   .icon.size--S :global(.spectrum-Icon) {
     width: 16px;
@@ -46,6 +48,7 @@
   .icon.size--L {
     width: 40px;
     height: 40px;
+    flex: 0 0 40px;
   }
   .icon.size--L :global(.spectrum-Icon) {
     width: 28px;

packages/bbui/src/InlineAlert/InlineAlert.svelte

@@ -56,5 +56,6 @@
     --spectrum-semantic-positive-icon-color: #2d9d78;
     --spectrum-semantic-negative-icon-color: #e34850;
     min-width: 100px;
+    margin: 0;
   }
 </style>

packages/bbui/src/Label/Label.svelte

@@ -21,6 +21,7 @@
   label {
     padding: 0;
     white-space: nowrap;
+    color: var(--spectrum-global-color-gray-600);
   }
 
   .muted {

packages/bbui/src/Layout/Page.svelte

@@ -1,32 +1,95 @@
 <script>
+  import { setContext } from "svelte"
+  import clickOutside from "../Actions/click_outside"
+
   export let wide = false
-  export let maxWidth = "80ch"
+  export let narrow = false
   export let noPadding = false
+
+  let sidePanelVisble = false
+
+  setContext("side-panel", {
+    open: () => (sidePanelVisble = true),
+    close: () => (sidePanelVisble = false),
+  })
 </script>
 
-<div style="--max-width: {maxWidth}" class:wide class:noPadding>
-  <slot />
+<div class="page">
+  <div class="main">
+    <div class="content" class:wide class:noPadding class:narrow>
+      <slot />
+    </div>
+  </div>
+  <div
+    id="side-panel"
+    class:visible={sidePanelVisble}
+    use:clickOutside={() => {
+      sidePanelVisble = false
+    }}
+  >
+    <slot name="side-panel" />
+  </div>
 </div>
 
 <style>
-  div {
+  .page {
+    position: relative;
+  }
+  .page,
+  .main {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    flex: 1 1 auto;
+    overflow-x: hidden;
+  }
+  .main {
+    overflow: auto;
+  }
+  .content {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    max-width: var(--max-width);
+    max-width: 1080px;
     margin: 0 auto;
-    padding: calc(var(--spacing-xl) * 2);
-    min-height: calc(100% - var(--spacing-xl) * 4);
+    flex: 1 1 auto;
+    padding: 50px;
+    z-index: 1;
   }
-
-  .wide {
+  .content.wide {
     max-width: none;
-    margin: 0;
+  }
+  .content.narrow {
+    max-width: 840px;
+  }
+  #side-panel {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 24px;
+    background: var(--background);
+    border-left: var(--border-light);
+    width: 320px;
+    max-width: calc(100vw - 48px - 48px);
+    overflow: auto;
+    overflow-x: hidden;
+    transform: translateX(100%);
+    transition: transform 130ms ease-out;
+    height: calc(100% - 48px);
+    z-index: 2;
+  }
+  #side-panel.visible {
+    transform: translateX(0);
   }
 
-  .noPadding {
-    padding: 0px;
-    margin: 0px;
+  @media (max-width: 640px) {
+    .content {
+      padding: 24px;
+      max-width: calc(100vw - 48px) !important;
+      width: calc(100vw - 48px) !important;
+      overflow: auto;
+    }
   }
 </style>

packages/bbui/src/List/ListItem.svelte

@@ -30,9 +30,11 @@
       <Label>{subtitle}</Label>
     {/if}
   </div>
-  <div class="right">
-    <slot />
-  </div>
+  {#if $$slots.default}
+    <div class="right">
+      <slot />
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -45,6 +47,7 @@
     justify-content: space-between;
     border: 1px solid var(--spectrum-global-color-gray-300);
     transition: background 130ms ease-out;
+    gap: var(--spacing-m);
   }
   .list-item:not(:first-child) {
     border-top: none;

packages/bbui/src/Modal/CustomContent.svelte

@@ -26,7 +26,6 @@
     padding: 40px;
     background-color: var(--purple);
     color: white;
-    font-family: var(--font-sans);
     font-weight: bold;
     text-align: center;
     user-select: none;

packages/bbui/src/Modal/Modal.svench

@@ -19,7 +19,6 @@
 
 <style>
   p, span {
-    font-family: var(--font-sans);
     font-size: var(--font-size-s);
   }
 

packages/bbui/src/Modal/ModalContent.svelte

@@ -104,7 +104,7 @@
         {/if}
 
         {#if showCancelButton}
-          <Button group secondary newStyles on:click={close}>
+          <Button group secondary on:click={close}>
             {cancelText}
           </Button>
         {/if}
@@ -151,7 +151,8 @@
     overflow: visible;
   }
   .spectrum-Dialog-heading {
-    font-family: var(--font-sans);
+    font-family: var(--font-accent);
+    font-weight: 600;
   }
   .spectrum-Dialog-heading.noDivider {
     margin-bottom: 12px;

packages/bbui/src/Modal/QuizModal.svelte

@@ -42,7 +42,6 @@
 <style>
   p {
     margin: 0;
-    font-family: var(--font-sans);
     font-size: var(--font-size-s);
   }
   p.error {

packages/bbui/src/Popover/Popover.svelte

@@ -4,6 +4,7 @@
   import { createEventDispatcher } from "svelte"
   import positionDropdown from "../Actions/position_dropdown"
   import clickOutside from "../Actions/click_outside"
+  import { fly } from "svelte/transition"
 
   const dispatch = createEventDispatcher()
 
@@ -12,9 +13,10 @@
   export let portalTarget
   export let dataCy
   export let maxWidth
-
   export let direction = "bottom"
   export let showTip = false
+  export let open = false
+  export let useAnchorWidth = false
 
   let tipSvg =
     '<svg xmlns="http://www.w3.org/svg/2000" width="23" height="12" class="spectrum-Popover-tip" > <path class="spectrum-Popover-tip-triangle" d="M 0.7071067811865476 0 L 11.414213562373096 10.707106781186548 L 22.121320343559645 0" /> </svg>'
@@ -35,13 +37,22 @@
 
   const handleOutsideClick = e => {
     if (open) {
-      e.stopPropagation()
+      // Stop propagation if the source is the anchor
+      let node = e.target
+      let fromAnchor = false
+      while (!fromAnchor && node && node.parentNode) {
+        fromAnchor = node === anchor
+        node = node.parentNode
+      }
+      if (fromAnchor) {
+        e.stopPropagation()
+      }
+
+      // Hide the popover
       hide()
     }
   }
 
-  let open = null
-
   function handleEscape(e) {
     if (open && e.key === "Escape") {
       hide()
@@ -53,12 +64,13 @@
   <Portal target={portalTarget}>
     <div
       tabindex="0"
-      use:positionDropdown={{ anchor, align, maxWidth }}
+      use:positionDropdown={{ anchor, align, maxWidth, useAnchorWidth }}
       use:clickOutside={handleOutsideClick}
       on:keydown={handleEscape}
       class={"spectrum-Popover is-open " + (tooltipClasses || "")}
       role="presentation"
       data-cy={dataCy}
+      transition:fly|local={{ y: -20, duration: 200 }}
     >
       {#if showTip}
         {@html tipSvg}

packages/bbui/src/Popover/Popover.svench

@@ -29,7 +29,6 @@
     font-size: var(--font-size-m);
     margin: 0 0 var(--spacing-l) 0;
     font-weight: 600;
-    font-family: var(--font-sans);
   }
 
   .input-group-column {

packages/bbui/src/Table/StringRenderer.svelte

@@ -1,8 +1,11 @@
 <script>
   export let value
+  export let schema
 </script>
 
-<div>{typeof value === "object" ? JSON.stringify(value) : value}</div>
+<div class:capitalise={schema?.capitalise}>
+  {typeof value === "object" ? JSON.stringify(value) : value}
+</div>
 
 <style>
   div {
@@ -10,5 +13,10 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     max-width: var(--max-cell-width);
+    width: 0;
+    flex: 1 1 auto;
+  }
+  div.capitalise {
+    text-transform: capitalize;
   }
 </style>

packages/bbui/src/Table/Table.svelte

@@ -21,6 +21,8 @@
    * template: a HBS or JS binding to use as the value
    * background: the background color
    * color: the text color
+   * borderLeft: show a left border
+   * borderRight: show a right border
    */
   export let data = []
   export let schema = {}
@@ -31,6 +33,7 @@
   export let allowSelectRows
   export let allowEditRows = true
   export let allowEditColumns = true
+  export let allowClickRows = true
   export let selectedRows = []
   export let customRenderers = []
   export let disableSorting = false
@@ -270,6 +273,17 @@
       if (schema[field].align === "Right") {
         styles[field] += "justify-content: flex-end; text-align: right;"
       }
+      if (schema[field].borderLeft) {
+        styles[field] +=
+          "border-left: 1px solid var(--spectrum-global-color-gray-200);"
+      }
+      if (schema[field].borderLeft) {
+        styles[field] +=
+          "border-right: 1px solid var(--spectrum-global-color-gray-200);"
+      }
+      if (schema[field].minWidth) {
+        styles[field] += `min-width: ${schema[field].minWidth};`
+      }
     })
     return styles
   }
@@ -290,7 +304,11 @@
         </slot>
       </div>
     {:else}
-      <div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}>
+      <div
+        class="spectrum-Table"
+        class:no-scroll={!rowCount}
+        style={`${heightStyle}${gridStyle}`}
+      >
         {#if fields.length}
           <div class="spectrum-Table-head">
             {#if showEditColumn}
@@ -356,7 +374,7 @@
         {/if}
         {#if sortedRows?.length}
           {#each sortedRows as row, idx}
-            <div class="spectrum-Table-row">
+            <div class="spectrum-Table-row" class:clickable={allowClickRows}>
               {#if showEditColumn}
                 <div
                   class:noBorderCheckbox={!showHeaderBorder}
@@ -433,10 +451,10 @@
   /* Wrapper */
   .wrapper {
     position: relative;
-    z-index: 0;
     --table-bg: var(--spectrum-global-color-gray-50);
     --table-border: 1px solid var(--spectrum-alias-border-color-mid);
     --cell-padding: var(--spectrum-global-dimension-size-250);
+    overflow: auto;
   }
   .wrapper--quiet {
     --table-bg: var(--spectrum-alias-background-color-transparent);
@@ -460,6 +478,9 @@
     display: grid;
     overflow: auto;
   }
+  .spectrum-Table.no-scroll {
+    overflow: visible;
+  }
 
   /* Header */
   .spectrum-Table-head {
@@ -546,12 +567,13 @@
   /* Table rows */
   .spectrum-Table-row {
     display: contents;
+    cursor: auto;
   }
-  .spectrum-Table-row:hover .spectrum-Table-cell {
-    /*background-color: var(--hover-bg) !important;*/
+  .spectrum-Table-row.clickable {
+    cursor: pointer;
   }
-  .spectrum-Table-row:hover .spectrum-Table-cell:after {
-    background-color: var(--spectrum-alias-highlight-hover);
+  .spectrum-Table-row.clickable:hover .spectrum-Table-cell {
+    background-color: var(--spectrum-global-color-gray-100);
   }
   .wrapper--quiet .spectrum-Table-row {
     border-left: none;
@@ -584,24 +606,13 @@
     border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
     background-color: var(--table-bg);
     z-index: auto;
+    transition: background-color 130ms ease-out;
   }
   .spectrum-Table-cell--edit {
     position: sticky;
     left: 0;
     z-index: 2;
   }
-  .spectrum-Table-cell:after {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-color: transparent;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-    transition: background-color
-      var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out;
-  }
 
   /* Placeholder  */
   .placeholder {

packages/bbui/src/Tabs/Tab.svelte

@@ -82,7 +82,8 @@
   .spectrum-Tabs-item {
     color: var(--spectrum-global-color-gray-600);
   }
-  .spectrum-Tabs-item.is-selected {
+  .spectrum-Tabs-item.is-selected,
+  .spectrum-Tabs-item:hover {
     color: var(--spectrum-global-color-gray-900);
   }
 </style>

packages/bbui/src/Tags/Tag.svelte

@@ -37,7 +37,7 @@
 
 <style>
   .spectrum-Tags-item {
-    margin-top: 0;
     margin-bottom: 0;
+    margin-top: 0;
   }
 </style>

packages/bbui/src/Tags/Tags.svelte

@@ -5,3 +5,13 @@
 <div class="spectrum-Tags" role="list" aria-label="list">
   <slot />
 </div>
+
+<style>
+  .spectrum-Tags {
+    margin-top: -8px;
+    margin-left: -4px;
+  }
+  .spectrum-Tags :global(.spectrum-Tags-item) {
+    margin: 8px 0 0 4px !important;
+  }
+</style>

packages/bbui/src/Typography/Heading.svelte

@@ -15,3 +15,9 @@
 >
   <slot />
 </h1>
+
+<style>
+  h1 {
+    font-family: var(--font-accent);
+  }
+</style>

packages/bbui/src/bbui.css

@@ -40,12 +40,14 @@
   --rounded-medium: 8px;
   --rounded-large: 16px;
 
-  --font-sans: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
-    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  --font-accent: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
   --font-serif: "Georgia", Cambria, Times New Roman, Times, serif;
   --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
     monospace;
+  --spectrum-alias-body-text-font-family: var(--font-sans);
 
   font-size: 16px;
   --font-size-xs: 0.75rem;
@@ -89,6 +91,8 @@
   --border-light-2: 2px var(--grey-3) solid;
   --border-blue: 2px var(--blue) solid;
   --border-transparent: 2px transparent solid;
+
+  --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-600);
 }
 
 a {

packages/builder/assets/bb-emblem.svg

@@ -3,7 +3,7 @@
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#393C44;}
+	.st0{fill:#000000;}
 	.st1{fill:#FFFFFF;}
 	.st2{fill:#4285F4;}
 </style>

packages/builder/package.json

@@ -87,7 +87,7 @@
     "shortid": "2.2.15",
     "svelte-dnd-action": "^0.9.8",
     "svelte-loading-spinners": "^0.1.1",
-    "svelte-portal": "0.1.0",
+    "svelte-portal": "1.0.0",
     "uuid": "8.3.1",
     "yup": "0.29.2"
   },

packages/builder/src/App.svelte

@@ -11,11 +11,8 @@
 
 <div class="banner-container" />
 <BannerDisplay />
-
 <NotificationDisplay />
-
 <LicensingOverlays />
-
 <Router {routes} config={{ queryHandler }} />
 <div class="modal-container" />
 <HelpIcon />

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -25,7 +25,6 @@
   export let loading = false
   export let hideAutocolumns
   export let rowCount
-  export let type
   export let disableSorting = false
   export let customPlaceholder = false
 

packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte

@@ -174,7 +174,6 @@
   }
 
   label {
-    font-family: var(--font-sans);
     cursor: pointer;
     font-weight: 600;
     box-sizing: border-box;

packages/builder/src/components/common/AppLockModal.svelte

@@ -8,6 +8,7 @@
     ProgressCircle,
     Layout,
     Body,
+    Icon,
   } from "@budibase/bbui"
   import { auth, apps } from "stores/portal"
   import { processStringSync } from "@budibase/string-templates"
@@ -56,85 +57,77 @@
   }
 </script>
 
-<div class="lock-status">
-  {#if lockedBy}
-    <Button
-      quiet
-      secondary
-      icon="LockClosed"
+{#if lockedBy}
+  <div class="lock-status">
+    <Icon
+      name="LockClosed"
+      hoverable
       size={buttonSize}
-      on:click={() => {
+      on:click={e => {
+        e.stopPropagation()
         appLockModal.show()
       }}
-    >
-      <span class="lock-status-text">
-        {lockedByHeading}
-      </span>
-    </Button>
-  {/if}
-</div>
-
-{#key app}
-  <div>
-    <Modal bind:this={appLockModal}>
-      <ModalContent
-        title={lockedByHeading}
-        dataCy={"app-lock-modal"}
-        showConfirmButton={false}
-        showCancelButton={false}
-      >
-        <Layout noPadding>
-          <Body size="S">
-            Apps are locked to prevent work from being lost from overlapping
-            changes between your team.
-          </Body>
-          {#if lockedByYou && getExpiryDuration(app) > 0}
-            <span class="lock-expiry-body">
-              {processStringSync(
-                "This lock will expire in {{ duration time 'millisecond' }} from now. This lock will expire in This lock will expire in ",
-                {
-                  time: getExpiryDuration(app),
-                }
-              )}
-            </span>
-          {/if}
-          <div class="lock-modal-actions">
-            <ButtonGroup>
-              <Button
-                secondary
-                quiet={lockedBy && lockedByYou}
-                disabled={processing}
-                on:click={() => {
-                  appLockModal.hide()
-                }}
-              >
-                <span class="cancel"
-                  >{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
-                >
-              </Button>
-              {#if lockedByYou}
-                <Button
-                  secondary
-                  disabled={processing}
-                  on:click={() => {
-                    releaseLock()
-                    appLockModal.hide()
-                  }}
-                >
-                  {#if processing}
-                    <ProgressCircle overBackground={true} size="S" />
-                  {:else}
-                    <span class="unlock">Release Lock</span>
-                  {/if}
-                </Button>
-              {/if}
-            </ButtonGroup>
-          </div>
-        </Layout>
-      </ModalContent>
-    </Modal>
+    />
   </div>
-{/key}
+{/if}
+
+<Modal bind:this={appLockModal}>
+  <ModalContent
+    title={lockedByHeading}
+    dataCy={"app-lock-modal"}
+    showConfirmButton={false}
+    showCancelButton={false}
+  >
+    <Layout noPadding>
+      <Body size="S">
+        Apps are locked to prevent work being lost from overlapping changes
+        between your team.
+      </Body>
+      {#if lockedByYou && getExpiryDuration(app) > 0}
+        <span class="lock-expiry-body">
+          {processStringSync(
+            "This lock will expire in {{ duration time 'millisecond' }} from now.",
+            {
+              time: getExpiryDuration(app),
+            }
+          )}
+        </span>
+      {/if}
+      <div class="lock-modal-actions">
+        <ButtonGroup>
+          <Button
+            secondary
+            quiet={lockedBy && lockedByYou}
+            disabled={processing}
+            on:click={() => {
+              appLockModal.hide()
+            }}
+          >
+            <span class="cancel"
+              >{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
+            >
+          </Button>
+          {#if lockedByYou}
+            <Button
+              cta
+              disabled={processing}
+              on:click={() => {
+                releaseLock()
+                appLockModal.hide()
+              }}
+            >
+              {#if processing}
+                <ProgressCircle overBackground={true} size="S" />
+              {:else}
+                <span class="unlock">Release Lock</span>
+              {/if}
+            </Button>
+          {/if}
+        </ButtonGroup>
+      </div>
+    </Layout>
+  </ModalContent>
+</Modal>
 
 <style>
   .lock-modal-actions {
@@ -148,8 +141,4 @@
     gap: var(--spacing-s);
     max-width: 175px;
   }
-  .lock-status-text {
-    font-weight: 400;
-    color: var(--spectrum-global-color-gray-800);
-  }
 </style>

packages/builder/src/components/common/CodeMirrorEditor.svelte

@@ -135,7 +135,7 @@
   div :global(.CodeMirror) {
     height: var(--code-mirror-height);
     min-height: var(--code-mirror-height);
-    font-family: monospace;
+    font-family: var(--font-mono);
     line-height: 1.3;
     border: var(--spectrum-alias-border-size-thin) solid;
     border-color: var(--spectrum-alias-border-color);

packages/builder/src/components/common/ConfigChecklist.svelte

@@ -1,64 +0,0 @@
-<script>
-  import {
-    ActionMenu,
-    Checkbox,
-    MenuItem,
-    Heading,
-    ProgressCircle,
-  } from "@budibase/bbui"
-  import { admin } from "stores/portal"
-  import { goto } from "@roxi/routify"
-  import { onMount } from "svelte"
-
-  let width = window.innerWidth
-  $: side = width < 500 ? "right" : "left"
-
-  const resizeObserver = new ResizeObserver(entries => {
-    if (entries?.[0]) {
-      width = entries[0].contentRect?.width
-    }
-  })
-
-  onMount(() => {
-    const doc = document.documentElement
-    resizeObserver.observe(doc)
-
-    return () => {
-      resizeObserver.unobserve(doc)
-    }
-  })
-</script>
-
-<ActionMenu align={side}>
-  <div slot="control" class="icon">
-    <ProgressCircle size="S" value={$admin.onboardingProgress} />
-  </div>
-  <MenuItem disabled>
-    <header class="item">
-      <Heading size="XXS">Get Started Checklist</Heading>
-      <ProgressCircle size="S" value={$admin.onboardingProgress} />
-    </header>
-  </MenuItem>
-  {#each Object.keys($admin.checklist) as checklistItem, idx}
-    <MenuItem>
-      <div
-        class="item"
-        on:click={() => $goto($admin.checklist[checklistItem].link)}
-      >
-        <span>{idx + 1}. {$admin.checklist[checklistItem].label}</span>
-        <Checkbox value={$admin.checklist[checklistItem].checked} />
-      </div>
-    </MenuItem>
-  {/each}
-</ActionMenu>
-
-<style>
-  .item {
-    display: grid;
-    align-items: center;
-    grid-template-columns: 175px 20px;
-  }
-  .icon {
-    cursor: pointer;
-  }
-</style>

packages/builder/src/components/common/EditableIcon.svelte

@@ -1,47 +1,46 @@
 <script>
-  import { Icon } from "@budibase/bbui"
+  import { Icon, Modal } from "@budibase/bbui"
   import ChooseIconModal from "components/start/ChooseIconModal.svelte"
 
   export let name
-  export let size
+  export let size = "M"
   export let app
+  export let color
+  export let autoSave = false
 
-  let iconModal
+  let modal
 </script>
 
 <div class="editable-icon">
-  <div
-    class="edit-hover"
-    on:click={() => {
-      iconModal.show()
-    }}
-  >
-    <Icon name={"Edit"} size={"L"} />
+  <div class="hover" on:click={modal.show}>
+    <Icon name="Edit" {size} color="var(--spectrum-global-color-gray-600)" />
   </div>
-  <div class="app-icon">
-    <Icon {name} {size} />
+  <div class="normal">
+    <Icon {name} {size} {color} />
   </div>
 </div>
-<ChooseIconModal {app} bind:this={iconModal} />
+
+<Modal bind:this={modal}>
+  <ChooseIconModal {name} {color} {app} {autoSave} on:change />
+</Modal>
 
 <style>
-  .editable-icon:hover .app-icon {
-    opacity: 0;
-  }
   .editable-icon {
     position: relative;
+    display: flex;
+    justify-content: flex-start;
   }
-  .editable-icon:hover .edit-hover {
-    opacity: 1;
+  .normal {
+    display: block;
   }
-  .edit-hover {
-    color: var(--spectrum-global-color-gray-600);
+  .hover {
+    display: none;
     cursor: pointer;
-    z-index: 100;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    opacity: 0;
-    /* transition: opacity var(--spectrum-global-animation-duration-100) ease; */
+  }
+  .editable-icon:hover .normal {
+    display: none;
+  }
+  .editable-icon:hover .hover {
+    display: block;
   }
 </style>

packages/builder/src/components/common/HelpIcon.svelte

@@ -31,6 +31,7 @@
     bottom: var(--spacing-m);
     right: var(--spacing-m);
     border-radius: 55%;
+    z-index: 99999;
   }
   .hidden {
     display: none;

packages/builder/src/components/common/RoleSelect.svelte

@@ -2,6 +2,7 @@
   import { Select } from "@budibase/bbui"
   import { roles } from "stores/backend"
   import { Constants, RoleUtils } from "@budibase/frontend-core"
+  import { createEventDispatcher } from "svelte"
 
   export let value
   export let error
@@ -9,26 +10,62 @@
   export let autoWidth = false
   export let quiet = false
   export let allowPublic = true
+  export let allowRemove = false
 
-  $: options = getOptions($roles, allowPublic)
+  const dispatch = createEventDispatcher()
+  const RemoveID = "remove"
+
+  $: options = getOptions($roles, allowPublic, allowRemove)
 
   const getOptions = (roles, allowPublic) => {
+    if (allowRemove) {
+      roles = [
+        ...roles,
+        {
+          _id: RemoveID,
+          name: "Remove",
+        },
+      ]
+    }
     if (allowPublic) {
       return roles
     }
     return roles.filter(role => role._id !== Constants.Roles.PUBLIC)
   }
+
+  const getColor = role => {
+    if (allowRemove && role._id === RemoveID) {
+      return null
+    }
+    return RoleUtils.getRoleColour(role._id)
+  }
+
+  const getIcon = role => {
+    if (allowRemove && role._id === RemoveID) {
+      return "Close"
+    }
+    return null
+  }
+
+  const onChange = e => {
+    if (allowRemove && e.detail === RemoveID) {
+      dispatch("remove")
+    } else {
+      dispatch("change", e.detail)
+    }
+  }
 </script>
 
 <Select
   {autoWidth}
   {quiet}
   bind:value
-  on:change
+  on:change={onChange}
   {options}
   getOptionLabel={role => role.name}
   getOptionValue={role => role._id}
-  getOptionColour={role => RoleUtils.getRoleColour(role._id)}
+  getOptionColour={getColor}
+  getOptionIcon={getIcon}
   {placeholder}
   {error}
 />

packages/builder/src/components/common/TemplateDisplay.svelte

@@ -1,128 +1,110 @@
 <script>
-  import {
-    Layout,
-    Detail,
-    Heading,
-    Button,
-    Modal,
-    ActionGroup,
-    ActionButton,
-  } from "@budibase/bbui"
+  import { Layout, Detail, Button, Modal } from "@budibase/bbui"
   import TemplateCard from "components/common/TemplateCard.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import { licensing } from "stores/portal"
+  import { Content, SideNav, SideNavItem } from "components/portal/page"
 
   export let templates
 
-  let selectedTemplateCategory
+  let selectedCategory
   let creationModal
   let template
 
-  const groupTemplatesByCategory = (templates, categoryFilter) => {
-    let grouped = templates.reduce((acc, template) => {
-      if (
-        typeof categoryFilter === "string" &&
-        [categoryFilter].indexOf(template.category) < 0
-      ) {
-        return acc
+  $: categories = getCategories(templates)
+  $: filteredCategories = getFilteredCategories(categories, selectedCategory)
+
+  const getCategories = templates => {
+    let categories = {}
+    templates?.forEach(template => {
+      if (!categories[template.category]) {
+        categories[template.category] = []
       }
-
-      acc[template.category] = !acc[template.category]
-        ? []
-        : acc[template.category]
-      acc[template.category].push(template)
-
-      return acc
-    }, {})
-    return grouped
+      categories[template.category].push(template)
+    })
+    categories = Object.entries(categories).map(
+      ([category, categoryTemplates]) => {
+        return {
+          name: category,
+          templates: categoryTemplates,
+        }
+      }
+    )
+    categories.sort((a, b) => {
+      return a.name < b.name ? -1 : 1
+    })
+    return categories
   }
 
-  $: filteredTemplates = groupTemplatesByCategory(
-    templates,
-    selectedTemplateCategory
-  )
-
-  $: filteredTemplateCategories = filteredTemplates
-    ? Object.keys(filteredTemplates).sort()
-    : []
-
-  $: templateCategories = templates
-    ? Object.keys(groupTemplatesByCategory(templates)).sort()
-    : []
+  const getFilteredCategories = (categories, selectedCategory) => {
+    if (!selectedCategory) {
+      return categories
+    }
+    return categories.filter(x => x.name === selectedCategory)
+  }
 
   const stopAppCreation = () => {
     template = null
   }
 </script>
 
-<div class="template-header">
-  <Layout noPadding gap="S">
-    <Heading size="S">Templates</Heading>
-    <div class="template-category-filters spectrum-ActionGroup">
-      <ActionGroup>
-        <ActionButton
-          selected={!selectedTemplateCategory}
-          on:click={() => {
-            selectedTemplateCategory = null
-          }}
-        >
-          All
-        </ActionButton>
-        {#each templateCategories as templateCategoryKey}
-          <ActionButton
-            dataCy={templateCategoryKey}
-            selected={templateCategoryKey == selectedTemplateCategory}
-            on:click={() => {
-              selectedTemplateCategory = templateCategoryKey
-            }}
-          >
-            {templateCategoryKey}
-          </ActionButton>
-        {/each}
-      </ActionGroup>
-    </div>
-  </Layout>
-</div>
-
-<div class="template-categories">
-  <Layout gap="XL" noPadding>
-    {#each filteredTemplateCategories as templateCategoryKey}
-      <div class="template-category" data-cy={templateCategoryKey}>
-        <Detail size="M">{templateCategoryKey}</Detail>
-        <div class="template-grid">
-          {#each filteredTemplates[templateCategoryKey] as templateEntry}
-            <TemplateCard
-              name={templateEntry.name}
-              imageSrc={templateEntry.image}
-              backgroundColour={templateEntry.background}
-              icon={templateEntry.icon}
-            >
-              {#if !($licensing?.usageMetrics?.apps >= 100)}
-                <Button
-                  cta
-                  on:click={() => {
-                    template = templateEntry
-                    creationModal.show()
-                  }}
-                >
-                  Use template
-                </Button>
-              {/if}
-              <a
-                href={templateEntry.url}
-                target="_blank"
-                class="overlay-preview-link spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary"
-                on:click|stopPropagation
+<Content>
+  <div slot="side-nav">
+    <SideNav>
+      <SideNavItem
+        on:click={() => (selectedCategory = null)}
+        text="All"
+        active={selectedCategory == null}
+      />
+      {#each categories as category}
+        <SideNavItem
+          on:click={() => (selectedCategory = category.name)}
+          text={category.name}
+          active={selectedCategory === category.name}
+        />
+      {/each}
+    </SideNav>
+  </div>
+  <div class="template-categories">
+    <Layout gap="XL" noPadding>
+      {#each filteredCategories as category}
+        <div class="template-category" data-cy={category.name}>
+          <Detail size="M">{category.name}</Detail>
+          <div class="template-grid">
+            {#each category.templates as templateEntry}
+              <TemplateCard
+                name={templateEntry.name}
+                imageSrc={templateEntry.image}
+                backgroundColour={templateEntry.background}
+                icon={templateEntry.icon}
               >
-                Details
-              </a>
-            </TemplateCard>
-          {/each}
+                {#if !($licensing?.usageMetrics?.apps >= 100)}
+                  <Button
+                    cta
+                    on:click={() => {
+                      template = templateEntry
+                      creationModal.show()
+                    }}
+                  >
+                    Use template
+                  </Button>
+                {/if}
+                <a
+                  href={templateEntry.url}
+                  target="_blank"
+                  class="overlay-preview-link spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary"
+                  on:click|stopPropagation
+                >
+                  Details
+                </a>
+              </TemplateCard>
+            {/each}
+          </div>
         </div>
-      </div>
-    {/each}
-  </Layout>
-</div>
+      {/each}
+    </Layout>
+  </div>
+</Content>
 
 <Modal
   bind:this={creationModal}

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -469,7 +469,7 @@
   }
 
   .binding__type {
-    font-family: monospace;
+    font-family: var(--font-mono);
     background-color: var(--spectrum-global-color-gray-200);
     border-radius: var(--border-radius-s);
     padding: 2px 4px;

packages/builder/src/components/common/inputs/CopyInput.svelte

@@ -12,7 +12,7 @@
     dummy.select()
     document.execCommand("copy")
     document.body.removeChild(dummy)
-    notifications.success(`URL copied to clipboard`)
+    notifications.success(`Copied to clipboard`)
   }
 </script>
 

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

@@ -57,15 +57,13 @@
 <Button cta on:click={publishModal.show}>Publish</Button>
 <Modal bind:this={publishModal}>
   <ModalContent
-    title="Publish to Production"
+    title="Publish to production"
     confirmText="Publish"
     onConfirm={publishApp}
     dataCy={"deploy-app-modal"}
   >
-    <span
-      >The changes you have made will be published to the production version of
-      the application.</span
-    >
+    The changes you have made will be published to the production version of the
+    application.
   </ModalContent>
 </Modal>
 

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

@@ -179,7 +179,7 @@
 </ConfirmDialog>
 
 <div class="buttons">
-  <Button on:click={previewApp} newStyles secondary>Preview</Button>
+  <Button on:click={previewApp} secondary>Preview</Button>
   <DeployModal onOk={completePublish} />
 </div>
 

packages/builder/src/components/integration/QueryEditor.svelte

@@ -185,7 +185,7 @@
   div :global(.CodeMirror) {
     height: var(--code-mirror-height) !important;
     border-radius: var(--border-radius-s);
-    font-family: monospace !important;
+    font-family: var(--font-mono);
     line-height: 1.3;
   }
 </style>

packages/builder/src/components/portal/overview/automation/HistoryDetailsPanel.svelte

@@ -1,106 +0,0 @@
-<script>
-  import { Layout, Icon, ActionButton, InlineAlert } from "@budibase/bbui"
-  import StatusRenderer from "./StatusRenderer.svelte"
-  import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
-  import TestDisplay from "components/automation/AutomationBuilder/TestDisplay.svelte"
-  import { goto } from "@roxi/routify"
-  import { automationStore } from "builderStore"
-
-  export let history
-  export let appId
-  export let close
-  const STOPPED_ERROR = "stopped_error"
-
-  $: exists = $automationStore.automations?.find(
-    auto => auto._id === history?.automationId
-  )
-</script>
-
-{#if history}
-  <div class="body">
-    <div class="top">
-      <div class="controls">
-        <StatusRenderer value={history.status} />
-        <ActionButton noPadding size="S" icon="Close" quiet on:click={close} />
-      </div>
-    </div>
-    <Layout paddingY="XL" paddingX="XL" gap="S">
-      <div class="icon">
-        <Icon name="Clock" />
-        <DateTimeRenderer value={history.createdAt} />
-      </div>
-      <div class="icon">
-        <Icon name="JourneyVoyager" />
-        <div>{history.automationName}</div>
-      </div>
-      {#if history.status === STOPPED_ERROR}
-        <div class="cron-error">
-          <InlineAlert
-            type="error"
-            header="CRON automation disabled"
-            message="Fix the error and re-publish your app to re-activate."
-          />
-        </div>
-      {/if}
-      <div>
-        {#if exists}
-          <ActionButton
-            icon="Edit"
-            fullWidth={false}
-            on:click={() =>
-              $goto(`../../../app/${appId}/automate/${history.automationId}`)}
-            >Edit automation</ActionButton
-          >
-        {/if}
-      </div>
-    </Layout>
-    <div class="bottom">
-      {#key history}
-        <TestDisplay testResults={history} width="100%" />
-      {/key}
-    </div>
-  </div>
-{:else}
-  <div>No details found</div>
-{/if}
-
-<style>
-  .body {
-    right: 0;
-    background-color: var(--background);
-    border-left: var(--border-light);
-    width: 420px;
-    height: calc(100vh - 240px);
-    position: fixed;
-    overflow: auto;
-  }
-
-  .top {
-    padding: var(--spacing-m) 0 var(--spacing-m) 0;
-    border-bottom: var(--border-light);
-  }
-
-  .bottom {
-    border-top: var(--border-light);
-    padding-top: calc(var(--spacing-xl) * 2);
-    padding-bottom: calc(var(--spacing-xl) * 2);
-  }
-
-  .icon {
-    display: flex;
-    gap: var(--spacing-m);
-  }
-
-  .controls {
-    padding: 0 var(--spacing-l) 0 var(--spacing-l);
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: var(--spacing-s);
-  }
-
-  .cron-error {
-    display: flex;
-    width: 100%;
-    justify-content: center;
-  }
-</style>

packages/builder/src/components/portal/overview/automation/StatusRenderer.svelte

@@ -1,39 +0,0 @@
-<script>
-  import { Icon } from "@budibase/bbui"
-  export let value
-
-  $: isError = !value || value.toLowerCase() === "error"
-  $: isStoppedError = value?.toLowerCase() === "stopped_error"
-  $: isStopped = value?.toLowerCase() === "stopped" || isStoppedError
-  $: status = getStatus(isError, isStopped)
-
-  function getStatus(error, stopped) {
-    if (error) {
-      return { color: "var(--red)", message: "Error", icon: "Alert" }
-    } else if (stopped) {
-      return { color: "var(--yellow)", message: "Stopped", icon: "StopCircle" }
-    } else {
-      return {
-        color: "var(--green)",
-        message: "Success",
-        icon: "CheckmarkCircle",
-      }
-    }
-  }
-</script>
-
-<div class="cell">
-  <Icon color={status.color} name={status.icon} />
-  <div style={`color: ${status.color};`}>
-    {status.message}
-  </div>
-</div>
-
-<style>
-  .cell {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-m);
-    align-items: center;
-  }
-</style>

packages/builder/src/components/portal/page/Breadcrumb.svelte

@@ -0,0 +1,37 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+
+  export let url
+  export let text
+</script>
+
+<div>
+  <a href={url}>
+    {text}
+  </a>
+  <Icon name="ChevronRight" />
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    color: var(--spectrum-global-color-gray-700);
+    gap: var(--spacing-m);
+    font-size: 16px;
+    font-weight: 600;
+  }
+  div :global(.spectrum-Icon),
+  a {
+    color: inherit;
+    transition: color 130ms ease-out;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  a:hover {
+    color: var(--spectrum-global-color-gray-900);
+  }
+</style>

packages/builder/src/components/portal/page/Breadcrumbs.svelte

@@ -0,0 +1,22 @@
+<div>
+  <slot />
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+
+  div :global(> *:last-child .spectrum-Icon) {
+    display: none;
+  }
+  div :global(> *:last-child) {
+    color: var(--spectrum-global-color-gray-900);
+    flex: 1 1 auto;
+    width: 0;
+  }
+</style>

packages/builder/src/components/portal/page/Content.svelte

@@ -0,0 +1,46 @@
+<script>
+  export let narrow = false
+  export let showMobileNav = false
+</script>
+
+<div class="content">
+  <div class="side-nav" class:show-mobile={showMobileNav}>
+    <slot name="side-nav" />
+  </div>
+  <div class="main" class:narrow>
+    <slot />
+  </div>
+</div>
+
+<style>
+  .content {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 40px;
+  }
+  .side-nav {
+    flex: 0 0 200px;
+  }
+  .main {
+    flex: 1 1 auto;
+  }
+  .main.narrow {
+    max-width: 600px;
+  }
+
+  @media (max-width: 640px) {
+    .content {
+      flex-direction: column;
+    }
+    .side-nav:not(.show-mobile) {
+      display: none;
+    }
+    .side-nav.show-mobile :global(.side-nav) {
+      border-bottom: var(--border-light);
+      margin: 0 -24px;
+      padding: 0 24px 32px 24px;
+    }
+  }
+</style>

packages/builder/src/components/portal/page/Header.svelte

@@ -0,0 +1,52 @@
+<script>
+  import { Heading } from "@budibase/bbui"
+
+  export let title
+  export let wrap = true
+</script>
+
+<div class="header" class:wrap>
+  <slot name="icon" />
+  <Heading size="L">{title}</Heading>
+  <div class="buttons">
+    <slot name="buttons" />
+  </div>
+</div>
+
+<style>
+  .header {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+  .header.wrap {
+    flex-wrap: wrap;
+  }
+  .header :global(.spectrum-Heading) {
+    flex: 1 1 auto;
+    margin-top: -2px;
+  }
+  .header:not(.wrap) :global(.spectrum-Heading) {
+    overflow: hidden;
+    width: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+  .buttons :global(> div) {
+    display: contents;
+  }
+  @media (max-width: 640px) {
+    .wrap .buttons {
+      margin-bottom: var(--spacing-m);
+    }
+  }
+</style>

packages/builder/src/components/portal/page/SideNav.svelte

@@ -0,0 +1,26 @@
+<script>
+  export let title
+</script>
+
+<div class="side-nav">
+  {#if title}
+    <div class="title">{title}</div>
+  {/if}
+  <slot />
+</div>
+
+<style>
+  .side-nav {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 4px;
+  }
+  .title {
+    margin-left: var(--spacing-m);
+    font-size: 12px;
+    color: var(--spectrum-global-color-gray-700);
+    margin-bottom: var(--spacing-m);
+  }
+</style>

packages/builder/src/components/portal/page/SideNavItem.svelte

@@ -0,0 +1,23 @@
+<script>
+  export let text
+  export let url
+  export let active = false
+</script>
+
+<a on:click href={url} class:active>
+  {text}
+</a>
+
+<style>
+  a {
+    padding: var(--spacing-s) var(--spacing-m);
+    color: var(--spectrum-global-color-gray-900);
+    border-radius: 4px;
+    transition: background 130ms ease-out;
+  }
+  .active,
+  a:hover {
+    background-color: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
+</style>

packages/builder/src/components/portal/page/index.js

@@ -0,0 +1,6 @@
+export { default as Breadcrumb } from "./Breadcrumb.svelte"
+export { default as Breadcrumbs } from "./Breadcrumbs.svelte"
+export { default as Header } from "./Header.svelte"
+export { default as Content } from "./Content.svelte"
+export { default as SideNavItem } from "./SideNavItem.svelte"
+export { default as SideNav } from "./SideNav.svelte"

packages/builder/src/components/settings/APIKeyModal.svelte

@@ -1,5 +1,6 @@
 <script>
-  import { ModalContent, Body, notifications } from "@budibase/bbui"
+  import { ModalContent } from "@budibase/bbui"
+  import { Body, notifications } from "@budibase/bbui"
   import { auth } from "stores/portal"
   import { onMount } from "svelte"
   import CopyInput from "components/common/inputs/CopyInput.svelte"
@@ -27,15 +28,13 @@
 </script>
 
 <ModalContent
-  title="Developer information"
-  showConfirmButton={false}
-  showSecondaryButton={true}
-  secondaryButtonText="Re-generate key"
+  title="API Key"
+  showSecondaryButton
+  secondaryButtonText="Regenerate key"
   secondaryAction={generateAPIKey}
+  showCancelButton={false}
+  confirmText="Close"
 >
-  <Body size="S">
-    You can find information about your developer account here, such as the API
-    key used to access the Budibase API.
-  </Body>
-  <CopyInput bind:value={apiKey} label="API key" />
+  <Body size="S">Your API key for accessing the Budibase public API:</Body>
+  <CopyInput bind:value={apiKey} />
 </ModalContent>

packages/builder/src/components/settings/ProfileModal.svelte

@@ -18,11 +18,7 @@
   }
 </script>
 
-<ModalContent
-  title="Update user information"
-  confirmText="Update information"
-  onConfirm={updateInfo}
->
+<ModalContent title="My profile" confirmText="Save" onConfirm={updateInfo}>
   <Body size="S">
     Personalise the platform by adding your first name and last name.
   </Body>

packages/builder/src/components/settings/ThemeModal.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { ModalContent } from "@budibase/bbui"
+  import { Select } from "@budibase/bbui"
+  import { themeStore } from "builderStore"
+  import { Constants } from "@budibase/frontend-core"
+</script>
+
+<ModalContent title="Theme">
+  <Select
+    options={Constants.Themes}
+    bind:value={$themeStore.theme}
+    placeholder={null}
+    getOptionLabel={x => x.name}
+    getOptionValue={x => x.class}
+  />
+</ModalContent>

packages/builder/src/components/start/AppRow.svelte

@@ -1,85 +1,126 @@
 <script>
-  import { Heading, Button, Icon } from "@budibase/bbui"
+  import { Heading, Body, Button, Icon, notifications } from "@budibase/bbui"
   import AppLockModal from "../common/AppLockModal.svelte"
   import { processStringSync } from "@budibase/string-templates"
+  import { goto } from "@roxi/routify"
 
   export let app
-  export let editApp
-  export let appOverview
+
+  const handleDefaultClick = () => {
+    if (window.innerWidth < 640) {
+      goToOverview()
+    } else {
+      goToBuilder()
+    }
+  }
+
+  const goToBuilder = () => {
+    if (app.lockedOther) {
+      notifications.error(
+        `App locked by ${app.lockedBy.email}. Please allow lock to expire or have them unlock this app.`
+      )
+      return
+    }
+    $goto(`../../app/${app.devId}`)
+  }
+
+  const goToOverview = () => {
+    $goto(`../overview/${app.devId}`)
+  }
 </script>
 
-<div class="title" data-cy={`${app.devId}`}>
-  <div>
-    <div class="app-icon" style="color: {app.icon?.color || ''}">
-      <Icon size="XL" name={app.icon?.name || "Apps"} />
+<div class="app-row" on:click={handleDefaultClick}>
+  <div class="title" data-cy={`${app.devId}`}>
+    <div class="app-icon">
+      <Icon size="L" name={app.icon?.name || "Apps"} color={app.icon?.color} />
     </div>
-    <div class="name" data-cy="app-name-link" on:click={() => editApp(app)}>
-      <Heading size="XS">
+    <div class="name" data-cy="app-name-link">
+      <Heading size="S">
         {app.name}
       </Heading>
     </div>
   </div>
-</div>
-<div class="desktop">
-  {#if app.updatedAt}
-    {processStringSync("Updated {{ duration time 'millisecond' }} ago", {
-      time: new Date().getTime() - new Date(app.updatedAt).getTime(),
-    })}
-  {:else}
-    Never updated
-  {/if}
-</div>
-<div class="desktop">
-  <span><AppLockModal {app} buttonSize="M" /></span>
-</div>
-<div class="desktop">
-  <div class="app-status">
-    {#if app.deployed}
-      <Icon name="Globe" disabled={false} />
-      Published
+
+  <div class="updated">
+    {#if app.updatedAt}
+      {processStringSync("Updated {{ duration time 'millisecond' }} ago", {
+        time: new Date().getTime() - new Date(app.updatedAt).getTime(),
+      })}
     {:else}
-      <Icon name="GlobeStrike" disabled={true} />
-      <span class="disabled"> Unpublished </span>
+      Never updated
     {/if}
   </div>
-</div>
-<div data-cy={`row_actions_${app.appId}`}>
-  <div class="app-row-actions">
-    <Button size="S" secondary newStyles on:click={() => appOverview(app)}>
-      Manage
-    </Button>
-    <Button
-      size="S"
-      primary
-      newStyles
-      disabled={app.lockedOther}
-      on:click={() => editApp(app)}
-    >
+
+  <div class="title app-status" class:deployed={app.deployed}>
+    <Icon size="L" name={app.deployed ? "GlobeCheck" : "GlobeStrike"} />
+    <Body size="S">{app.deployed ? "Published" : "Unpublished"}</Body>
+  </div>
+
+  <div class="app-row-actions" data-cy={`row_actions_${app.appId}`}>
+    <AppLockModal {app} buttonSize="M" />
+    <Button size="S" secondary on:click={goToOverview}>Manage</Button>
+    <Button size="S" primary disabled={app.lockedOther} on:click={goToBuilder}>
       Edit
     </Button>
   </div>
 </div>
 
 <style>
-  div.title,
-  div.title > div {
-    display: flex;
-    max-width: 100%;
+  .app-row {
+    background: var(--background);
+    padding: 24px 32px;
+    border-radius: 8px;
+    display: grid;
+    grid-template-columns: 35% 25% 15% auto;
+    align-items: center;
+    gap: var(--spacing-m);
+    transition: border 130ms ease-out;
+    border: 1px solid transparent;
   }
+  .app-row:hover {
+    cursor: pointer;
+    border-color: var(--spectrum-global-color-gray-300);
+  }
+
+  .updated {
+    color: var(--spectrum-global-color-gray-700);
+  }
+
+  .title,
+  .name {
+    flex: 1 1 auto;
+  }
+  .name {
+    width: 0;
+  }
+  .title,
+  .app-status {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .title :global(.spectrum-Heading),
+  .title :global(.spectrum-Icon),
+  .title :global(.spectrum-Body) {
+    color: var(--spectrum-global-color-gray-900);
+  }
+
+  .app-status:not(.deployed) :global(.spectrum-Icon),
+  .app-status:not(.deployed) :global(.spectrum-Body) {
+    color: var(--spectrum-global-color-gray-600);
+  }
+
   .app-row-actions {
-    grid-gap: var(--spacing-s);
+    gap: var(--spacing-m);
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
+    align-items: center;
   }
-  .app-status {
-    display: grid;
-    grid-gap: var(--spacing-s);
-    grid-template-columns: 24px 100px;
-  }
-  .app-status span.disabled {
-    opacity: 0.3;
-  }
+
   .name {
     text-decoration: none;
     overflow: hidden;
@@ -88,17 +129,30 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    margin-left: calc(1.5 * var(--spacing-xl));
-  }
-  .title :global(h1:hover) {
-    color: var(--spectrum-global-color-blue-600);
-    cursor: pointer;
-    transition: color 130ms ease;
   }
 
+  @media (max-width: 1000px) {
+    .app-row {
+      grid-template-columns: 45% 30% auto;
+    }
+    .updated {
+      display: none;
+    }
+  }
+  @media (max-width: 800px) {
+    .app-row {
+      grid-template-columns: 1fr auto;
+    }
+    .app-status {
+      display: none;
+    }
+  }
   @media (max-width: 640px) {
-    .desktop {
-      display: none !important;
+    .app-row {
+      padding: 20px;
+    }
+    .app-row-actions {
+      display: none;
     }
   }
 </style>

packages/builder/src/components/start/ChooseIconModal.svelte

@@ -1,18 +1,20 @@
 <script>
   import {
     ModalContent,
-    Modal,
     Icon,
     ColorPicker,
     Label,
     notifications,
   } from "@budibase/bbui"
   import { apps } from "stores/portal"
+  import { createEventDispatcher } from "svelte"
 
   export let app
-  let modal
-  $: selectedIcon = app?.icon?.name || "Apps"
-  $: selectedColor = app?.icon?.color
+  export let name
+  export let color
+  export let autoSave = false
+
+  const dispatch = createEventDispatcher()
 
   let iconsList = [
     "Apps",
@@ -40,30 +42,15 @@
     "GraphBarHorizontal",
     "Demographic",
   ]
-  export const show = () => {
-    modal.show()
-  }
-  export const hide = () => {
-    modal.hide()
-  }
-
-  const onCancel = () => {
-    selectedIcon = ""
-    selectedColor = ""
-    hide()
-  }
-
-  const changeColor = val => {
-    selectedColor = val
-  }
 
   const save = async () => {
+    if (!autoSave) {
+      dispatch("change", { color, name })
+      return
+    }
     try {
       await apps.update(app.instance._id, {
-        icon: {
-          name: selectedIcon,
-          color: selectedColor,
-        },
+        icon: { name, color },
       })
     } catch (error) {
       notifications.error("Error updating app")
@@ -71,41 +58,32 @@
   }
 </script>
 
-<Modal bind:this={modal} on:hide={onCancel}>
-  <ModalContent
-    title={"Edit Icon"}
-    confirmText={"Save"}
-    onConfirm={() => save()}
-  >
-    <div class="scrollable-icons">
-      <div class="title-spacing">
-        <Label>Select an icon</Label>
-      </div>
-      <div class="grid">
-        {#each iconsList as item}
-          <div
-            class="icon-item"
-            class:selected={item === selectedIcon}
-            on:click={() => (selectedIcon = item)}
-          >
-            <Icon name={item} />
-          </div>
-        {/each}
-      </div>
+<ModalContent title="Edit Icon" confirmText="Save" onConfirm={save}>
+  <div class="scrollable-icons">
+    <div class="title-spacing">
+      <Label>Select an icon</Label>
     </div>
-    <div class="color-selection">
-      <div>
-        <Label>Select a color</Label>
-      </div>
-      <div class="color-selection-item">
-        <ColorPicker
-          bind:value={selectedColor}
-          on:change={e => changeColor(e.detail)}
-        />
-      </div>
+    <div class="grid">
+      {#each iconsList as item}
+        <div
+          class="icon-item"
+          class:selected={item === name}
+          on:click={() => (name = item)}
+        >
+          <Icon name={item} />
+        </div>
+      {/each}
     </div>
-  </ModalContent>
-</Modal>
+  </div>
+  <div class="color-selection">
+    <div>
+      <Label>Select a color</Label>
+    </div>
+    <div class="color-selection-item">
+      <ColorPicker bind:value={color} on:change={e => (color = e.detail)} />
+    </div>
+  </div>
+</ModalContent>
 
 <style>
   .scrollable-icons {

packages/builder/src/components/start/CreateAppModal.svelte

@@ -138,6 +138,7 @@
       }
 
       $goto(`/builder/app/${createdApp.instance._id}`)
+      // apps.load()
     } catch (error) {
       creating = false
       console.error(error)

packages/builder/src/components/start/UpdateAppModal.svelte

@@ -1,22 +1,29 @@
 <script>
   import { writable, get as svelteGet } from "svelte/store"
-  import { notifications, Input, ModalContent, Body } from "@budibase/bbui"
+  import {
+    notifications,
+    Input,
+    ModalContent,
+    Layout,
+    Label,
+  } from "@budibase/bbui"
   import { apps } from "stores/portal"
   import { onMount } from "svelte"
   import { createValidationStore } from "helpers/validation/yup"
   import * as appValidation from "helpers/validation/yup/app"
+  import EditableIcon from "../common/EditableIcon.svelte"
 
   export let app
 
-  const values = writable({ name: "", url: null })
-  const validation = createValidationStore()
-  $: validation.check($values)
-
-  onMount(async () => {
-    $values.name = app.name
-    $values.url = app.url
-    setupValidation()
+  const values = writable({
+    name: app.name,
+    url: app.url,
+    iconName: app.icon?.name,
+    iconColor: app.icon?.color,
   })
+  const validation = createValidationStore()
+
+  $: validation.check($values)
 
   const setupValidation = async () => {
     const applications = svelteGet(apps)
@@ -28,14 +35,14 @@
 
   async function updateApp() {
     try {
-      // Update App
-      const body = {
-        name: $values.name.trim(),
-      }
-      if ($values.url) {
-        body.url = $values.url.trim()
-      }
-      await apps.update(app.instance._id, body)
+      await apps.update(app.instance._id, {
+        name: $values.name?.trim(),
+        url: $values.url?.trim(),
+        icon: {
+          name: $values.iconName,
+          color: $values.iconColor,
+        },
+      })
     } catch (error) {
       console.error(error)
       notifications.error("Error updating app")
@@ -68,15 +75,22 @@
     let resolvedUrl = resolveAppUrl(null, appName)
     tidyUrl(resolvedUrl)
   }
+
+  const updateIcon = e => {
+    const { name, color } = e.detail
+    $values.iconColor = color
+    $values.iconName = name
+  }
+
+  onMount(setupValidation)
 </script>
 
 <ModalContent
-  title={"Edit app"}
-  confirmText={"Save"}
+  title="Edit name and URL"
+  confirmText="Save"
   onConfirm={updateApp}
   disabled={!$validation.valid}
 >
-  <Body size="S">Update the name of your app.</Body>
   <Input
     bind:value={$values.name}
     error={$validation.touched.name && $validation.errors.name}
@@ -84,6 +98,16 @@
     on:change={nameToUrl($values.name)}
     label="Name"
   />
+  <Layout noPadding gap="XS">
+    <Label>Icon</Label>
+    <EditableIcon
+      {app}
+      size="XL"
+      name={$values.iconName}
+      color={$values.iconColor}
+      on:change={updateIcon}
+    />
+  </Layout>
   <Input
     bind:value={$values.url}
     error={$validation.touched.url && $validation.errors.url}

packages/builder/src/components/usage/Usage.svelte

@@ -39,15 +39,21 @@
       {#if showWarning}
         <Icon name="Alert" />
       {/if}
-      <div class="heading header-item">
-        <Heading size="XS" weight="light">{usage.name}</Heading>
-      </div>
+      <Heading size="XS" weight="light">
+        <span class="nowrap">
+          {usage.name}
+        </span>
+      </Heading>
     </div>
-    {#if unlimited}
-      <Body size="S">{usage.used} / Unlimited</Body>
-    {:else}
-      <Body size="S">{usage.used} / {usage.total}</Body>
-    {/if}
+    <Body size="S">
+      <span class="nowrap">
+        {#if unlimited}
+          {usage.used} / Unlimited
+        {:else}
+          {usage.used} / {usage.total}
+        {/if}
+      </span>
+    </Body>
   </div>
   <div>
     {#if unlimited}
@@ -89,13 +95,14 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    align-items: flex-end;
     margin-bottom: 12px;
+    gap: var(--spacing-m);
   }
   .header-container {
     display: flex;
   }
-  .heading {
-    margin-top: 3px;
-    margin-left: 5px;
+  .nowrap {
+    white-space: nowrap;
   }
 </style>

packages/builder/src/components/usage/UsageDashCard.svelte

@@ -47,7 +47,7 @@
     <div class="header-actions">
       {#if secondaryDefined}
         <div>
-          <Button newStyles secondary on:click={secondaryAction}
+          <Button secondary on:click={secondaryAction}
             >{secondaryActionText}</Button
           >
         </div>

packages/builder/src/global.css

@@ -23,7 +23,6 @@ body {
   --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);
 }

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

@@ -105,32 +105,34 @@
           </MenuItem>
           <MenuItem
             on:click={() =>
-              $goto(`../../portal/overview/${application}?tab=Access`)}
+              $goto(`../../portal/overview/${application}/access`)}
           >
             Access
           </MenuItem>
           <MenuItem
             on:click={() =>
-              $goto(
-                `../../portal/overview/${application}?tab=${encodeURIComponent(
-                  "Automation History"
-                )}`
-              )}
+              $goto(`../../portal/overview/${application}/automation-history`)}
           >
             Automation history
           </MenuItem>
           <MenuItem
             on:click={() =>
-              $goto(`../../portal/overview/${application}?tab=Backups`)}
+              $goto(`../../portal/overview/${application}/backups`)}
           >
             Backups
           </MenuItem>
 
           <MenuItem
             on:click={() =>
-              $goto(`../../portal/overview/${application}?tab=Settings`)}
+              $goto(`../../portal/overview/${application}/name-and-url`)}
           >
-            Settings
+            Name and URL
+          </MenuItem>
+          <MenuItem
+            on:click={() =>
+              $goto(`../../portal/overview/${application}/version`)}
+          >
+            Version
           </MenuItem>
         </ActionMenu>
         <Heading size="XS">{$store.name || "App"}</Heading>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte

@@ -263,6 +263,7 @@
                     orderMap[component.component]}
                   on:click={() => addComponent(component.component)}
                   on:mouseover={() => (selectedIndex = null)}
+                  on:focus
                 >
                   <Icon name={component.icon} />
                   <Body size="XS">{component.name}</Body>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte

@@ -20,6 +20,7 @@
   class="container"
   on:mouseover={() => (showTooltip = true)}
   on:mouseleave={() => (showTooltip = false)}
+  on:focus
   style="--color: {color};"
 >
   <StatusLight square {color} />

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte

@@ -172,7 +172,7 @@
         {bindings}
       />
     {/each}
-    <Button secondary newStyles on:click={() => $goto("../components")}>
+    <Button secondary on:click={() => $goto("../components")}>
       View components
     </Button>
   </Layout>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ButtonRoundnessSelect.svelte

@@ -17,7 +17,7 @@
 <div class="container">
   <Slider min={0} max={3} step={1} value={index} on:change={onChange} />
   <div class="button" style="--radius: {customTheme.buttonBorderRadius};">
-    <Button primary newStyles>Button</Button>
+    <Button primary>Button</Button>
   </div>
 </div>
 

packages/builder/src/pages/builder/apps/index.svelte

@@ -17,7 +17,7 @@
   import { goto } from "@roxi/routify"
   import { AppStatus } from "constants"
   import { gradient } from "actions"
-  import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte"
+  import ProfileModal from "components/settings/ProfileModal.svelte"
   import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
   import { processStringSync } from "@budibase/string-templates"
   import Spaceman from "assets/bb-space-man.svg"
@@ -89,7 +89,7 @@
 
 {#if $auth.user && loaded}
   <div class="container">
-    <Page>
+    <Page narrow>
       <div class="content">
         <Layout noPadding>
           <div class="header">
@@ -104,7 +104,7 @@
                 <Icon size="XL" name="ChevronDown" />
               </div>
               <MenuItem icon="UserEdit" on:click={() => userInfoModal.show()}>
-                Update user information
+                My profile
               </MenuItem>
               <MenuItem
                 icon="LockClosed"
@@ -185,7 +185,7 @@
     </Page>
   </div>
   <Modal bind:this={userInfoModal}>
-    <UpdateUserInfoModal />
+    <ProfileModal />
   </Modal>
   <Modal bind:this={changePasswordModal}>
     <ChangePasswordModal />
@@ -196,6 +196,11 @@
   .container {
     height: 100%;
     overflow: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 80px;
   }
   .content {
     width: 100%;

packages/builder/src/pages/builder/portal/_components/Logo.svelte

@@ -0,0 +1,18 @@
+<script>
+  import Logo from "assets/bb-emblem.svg"
+  import { goto } from "@roxi/routify"
+  import { organisation } from "stores/portal"
+</script>
+
+<img
+  src={$organisation.logoUrl || Logo}
+  alt="Budibase Logo"
+  on:click={() => $goto("./apps")}
+/>
+
+<style>
+  img {
+    width: 30px;
+    height: 30px;
+  }
+</style>

packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte

@@ -0,0 +1,101 @@
+<script>
+  import { Layout } from "@budibase/bbui"
+  import { SideNav, SideNavItem } from "components/portal/page"
+  import { createEventDispatcher } from "svelte"
+  import { isActive } from "@roxi/routify"
+  import UpgradeButton from "./UpgradeButton.svelte"
+  import { fade } from "svelte/transition"
+  import Logo from "./Logo.svelte"
+  import { menu } from "stores/portal"
+
+  export let visible = false
+
+  const dispatch = createEventDispatcher()
+
+  const close = () => dispatch("close")
+</script>
+
+{#if visible}
+  <div
+    class="mobile-nav-underlay"
+    transition:fade={{ duration: 130 }}
+    on:click={close}
+  />
+{/if}
+<div class="mobile-nav" class:visible>
+  <Layout noPadding gap="M">
+    <div on:click={close}>
+      <Logo />
+    </div>
+    <SideNav>
+      {#each $menu as { title, href, subPages }}
+        {#if !subPages?.length}
+          <SideNavItem
+            text={title}
+            url={href}
+            active={$isActive(href)}
+            on:click={close}
+          />
+        {/if}
+      {/each}
+      {#each $menu as { title, href, subPages }}
+        {#if subPages?.length}
+          <div class="category">{title}</div>
+          {#each subPages as { title, href }}
+            <SideNavItem
+              text={title}
+              url={href}
+              active={$isActive(href)}
+              on:click={close}
+            />
+          {/each}
+        {/if}
+      {/each}
+    </SideNav>
+    <div>
+      <UpgradeButton on:click={close} />
+    </div>
+  </Layout>
+</div>
+
+<style>
+  .mobile-nav {
+    display: none;
+  }
+  .category {
+    color: var(--spectrum-global-color-gray-600);
+    font-size: var(--font-size-s);
+    margin-left: var(--spacing-m);
+    margin-top: 24px;
+    margin-bottom: 4px;
+  }
+
+  @media (max-width: 640px) {
+    .mobile-nav-underlay {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+      background: rgba(0, 0, 0, 0.5);
+    }
+    .mobile-nav {
+      transform: translateX(-100%);
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      padding: 16px 24px;
+      height: 100%;
+      width: 240px;
+      background: var(--background);
+      z-index: 2;
+      transition: transform 130ms ease-out;
+    }
+    .mobile-nav.visible {
+      transform: translateX(0);
+    }
+  }
+</style>

packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte

@@ -0,0 +1,26 @@
+<script>
+  import { Button } from "@budibase/bbui"
+  import { goto } from "@roxi/routify"
+  import { auth, admin } from "stores/portal"
+</script>
+
+{#if $admin.cloud && $auth?.user?.accountPortalAccess}
+  <Button
+    cta
+    on:click
+    on:click={() => {
+      $goto($admin.accountPortalUrl + "/portal/upgrade")
+    }}
+  >
+    Upgrade
+  </Button>
+{:else if !$admin.cloud && $auth.isAdmin}
+  <Button
+    cta
+    size="S"
+    on:click={() => $goto("/builder/portal/account/upgrade")}
+    on:click
+  >
+    Upgrade
+  </Button>
+{/if}

packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte

@@ -0,0 +1,78 @@
+<script>
+  import { auth } from "stores/portal"
+  import { ActionMenu, Avatar, MenuItem, Icon, Modal } from "@budibase/bbui"
+  import { goto } from "@roxi/routify"
+  import ProfileModal from "components/settings/ProfileModal.svelte"
+  import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
+  import ThemeModal from "components/settings/ThemeModal.svelte"
+  import APIKeyModal from "components/settings/APIKeyModal.svelte"
+
+  let themeModal
+  let profileModal
+  let updatePasswordModal
+  let apiKeyModal
+
+  const logout = async () => {
+    try {
+      await auth.logout()
+    } catch (error) {
+      // Swallow error and do nothing
+    }
+  }
+</script>
+
+<ActionMenu align="right" dataCy="user-menu">
+  <div slot="control" class="user-dropdown">
+    <Avatar size="M" initials={$auth.initials} url={$auth.user.pictureUrl} />
+    <Icon size="XL" name="ChevronDown" />
+  </div>
+  <MenuItem icon="Moon" on:click={() => themeModal.show()} dataCy="theme">
+    Theme
+  </MenuItem>
+  <MenuItem
+    icon="UserEdit"
+    on:click={() => profileModal.show()}
+    dataCy="user-info"
+  >
+    My profile
+  </MenuItem>
+  <MenuItem icon="LockClosed" on:click={() => updatePasswordModal.show()}>
+    Update password
+  </MenuItem>
+  <MenuItem icon="Key" on:click={() => apiKeyModal.show()} dataCy="api-key">
+    View API key
+  </MenuItem>
+  <MenuItem icon="UserDeveloper" on:click={() => $goto("../apps")}>
+    Close developer mode
+  </MenuItem>
+  <MenuItem dataCy="user-logout" icon="LogOut" on:click={logout}>
+    Log out
+  </MenuItem>
+</ActionMenu>
+
+<Modal bind:this={themeModal}>
+  <ThemeModal />
+</Modal>
+<Modal bind:this={profileModal}>
+  <ProfileModal />
+</Modal>
+<Modal bind:this={updatePasswordModal}>
+  <ChangePasswordModal />
+</Modal>
+<Modal bind:this={apiKeyModal}>
+  <APIKeyModal />
+</Modal>
+
+<style>
+  .user-dropdown {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--spacing-s);
+  }
+  .user-dropdown:hover {
+    cursor: pointer;
+    filter: brightness(110%);
+  }
+</style>

packages/builder/src/pages/builder/portal/_layout.svelte

@@ -1,154 +1,27 @@
 <script>
-  import { isActive, redirect, goto } from "@roxi/routify"
-  import {
-    Icon,
-    Avatar,
-    Layout,
-    SideNavigation as Navigation,
-    SideNavigationItem as Item,
-    ActionMenu,
-    MenuItem,
-    Modal,
-    clickOutside,
-    notifications,
-  } from "@budibase/bbui"
-  import ConfigChecklist from "components/common/ConfigChecklist.svelte"
-  import { organisation, auth, admin as adminStore } from "stores/portal"
+  import { isActive, redirect, goto, url } from "@roxi/routify"
+  import { Icon, notifications, Tabs, Tab } from "@budibase/bbui"
+  import { organisation, auth, menu } from "stores/portal"
   import { onMount } from "svelte"
-  import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte"
-  import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
-  import UpdateAPIKeyModal from "components/settings/UpdateAPIKeyModal.svelte"
-  import Logo from "assets/bb-emblem.svg"
-  import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags"
+  import UpgradeButton from "./_components/UpgradeButton.svelte"
+  import MobileMenu from "./_components/MobileMenu.svelte"
+  import Logo from "./_components/Logo.svelte"
+  import UserDropdown from "./_components/UserDropdown.svelte"
 
   let loaded = false
-  let userInfoModal
-  let changePasswordModal
-  let apiKeyModal
   let mobileMenuVisible = false
+  let activeTab = "Apps"
 
-  $: menu = buildMenu($auth.isAdmin)
+  $: $url(), updateActiveTab($menu)
 
-  const buildMenu = admin => {
-    let menu = [
-      {
-        title: "Apps",
-        href: "/builder/portal/apps",
-      },
-    ]
-
-    if (admin) {
-      menu = menu.concat([
-        {
-          title: "Users",
-          href: "/builder/portal/manage/users",
-          heading: "Manage",
-        },
-        isEnabled(TENANT_FEATURE_FLAGS.USER_GROUPS)
-          ? {
-              title: "User Groups",
-              href: "/builder/portal/manage/groups",
-            }
-          : undefined,
-        { title: "Auth", href: "/builder/portal/manage/auth" },
-        { title: "Email", href: "/builder/portal/manage/email" },
-        {
-          title: "Plugins",
-          href: "/builder/portal/manage/plugins",
-        },
-
-        {
-          title: "Organisation",
-          href: "/builder/portal/settings/organisation",
-          heading: "Settings",
-        },
-        {
-          title: "Theming",
-          href: "/builder/portal/settings/theming",
-        },
-      ])
-
-      if (!$adminStore.cloud) {
-        menu = menu.concat([
-          {
-            title: "Update",
-            href: "/builder/portal/settings/update",
-          },
-        ])
+  const updateActiveTab = menu => {
+    for (let entry of menu) {
+      if ($isActive(entry.href)) {
+        if (activeTab !== entry.title) {
+          activeTab = entry.title
+        }
+        break
       }
-    } else {
-      menu = menu.concat([
-        {
-          title: "Theming",
-          href: "/builder/portal/settings/theming",
-          heading: "Settings",
-        },
-      ])
-    }
-
-    // add link to account portal if the user has access
-    let accountSectionAdded = false
-
-    // link out to account-portal if account holder in cloud or always in self-host
-    if ($auth?.user?.accountPortalAccess || (!$adminStore.cloud && admin)) {
-      accountSectionAdded = true
-      menu = menu.concat([
-        {
-          title: "Account",
-          href: $adminStore.accountPortalUrl,
-          heading: "Account",
-        },
-      ])
-    }
-
-    if (isEnabled(TENANT_FEATURE_FLAGS.LICENSING)) {
-      // always show usage in self-host or cloud if licensing enabled
-      menu = menu.concat([
-        {
-          title: "Usage",
-          href: "/builder/portal/settings/usage",
-          heading: accountSectionAdded ? "" : "Account",
-        },
-      ])
-
-      // show the relevant hosting upgrade page
-      if ($adminStore.cloud && $auth?.user?.accountPortalAccess) {
-        menu = menu.concat([
-          {
-            title: "Upgrade",
-            href: $adminStore.accountPortalUrl + "/portal/upgrade",
-          },
-        ])
-      } else if (!$adminStore.cloud && admin) {
-        menu = menu.concat({
-          title: "Upgrade",
-          href: "/builder/portal/settings/upgrade",
-        })
-      }
-
-      // show the billing page to licensed account holders in cloud
-      if (
-        $auth?.user?.accountPortalAccess &&
-        $auth.user.account.stripeCustomerId
-      ) {
-        menu = menu.concat([
-          {
-            title: "Billing",
-            href: $adminStore.accountPortalUrl + "/portal/billing",
-          },
-        ])
-      }
-    }
-
-    menu = menu.filter(item => !!item)
-    return menu
-  }
-
-  const logout = async () => {
-    try {
-      await auth.logout()
-    } catch (error) {
-      // Swallow error and do nothing
     }
   }
 
@@ -174,212 +47,102 @@
 
 {#if $auth.user && loaded}
   <div class="container">
-    <div
-      class="nav"
-      class:visible={mobileMenuVisible}
-      use:clickOutside={hideMobileMenu}
-    >
-      <Layout paddingX="L" paddingY="L">
-        <div class="branding">
-          <div class="name" on:click={() => $goto("./apps")}>
-            <img src={$organisation?.logoUrl || Logo} alt="Logotype" />
-            <span>{$organisation?.company || "Budibase"}</span>
-          </div>
-          <div class="onboarding">
-            {#if $auth.user?.admin?.global}
-              <ConfigChecklist />
-            {/if}
-          </div>
-        </div>
-        <div class="menu">
-          <Navigation>
-            {#each menu as { title, href, heading, badge }}
-              <Item
-                on:click={hideMobileMenu}
-                selected={$isActive(href)}
-                {href}
-                {badge}
-                {heading}>{title}</Item
-              >
-            {/each}
-          </Navigation>
-        </div>
-      </Layout>
+    <div class="nav">
+      <div class="branding">
+        <Logo />
+      </div>
+      <div class="desktop">
+        <Tabs selected={activeTab}>
+          {#each $menu as { title, href }}
+            <Tab {title} on:click={() => $goto(href)} />
+          {/each}
+        </Tabs>
+      </div>
+      <div class="mobile">
+        <Icon hoverable name="ShowMenu" on:click={showMobileMenu} />
+      </div>
+      <div class="desktop">
+        <UpgradeButton />
+      </div>
+      <div class="dropdown">
+        <UserDropdown />
+      </div>
     </div>
     <div class="main">
-      <div class="toolbar">
-        <div class="mobile-toggle">
-          <Icon hoverable name="ShowMenu" on:click={showMobileMenu} />
-        </div>
-        <div class="mobile-logo">
-          <img
-            src={$organisation?.logoUrl || Logo}
-            alt={$organisation?.company || "Budibase"}
-          />
-        </div>
-        <div class="user-dropdown">
-          <ActionMenu align="right" dataCy="user-menu">
-            <div slot="control" class="avatar">
-              <Avatar
-                size="M"
-                initials={$auth.initials}
-                url={$auth.user.pictureUrl}
-              />
-              <Icon size="XL" name="ChevronDown" />
-            </div>
-            <MenuItem
-              icon="UserEdit"
-              on:click={() => userInfoModal.show()}
-              dataCy={"user-info"}
-            >
-              Update user information
-            </MenuItem>
-            {#if $auth.isBuilder}
-              <MenuItem icon="Key" on:click={() => apiKeyModal.show()}>
-                View API key
-              </MenuItem>
-            {/if}
-            <MenuItem
-              icon="LockClosed"
-              on:click={() => changePasswordModal.show()}
-            >
-              Update password
-            </MenuItem>
-            <MenuItem icon="UserDeveloper" on:click={() => $goto("../apps")}>
-              Close developer mode
-            </MenuItem>
-            <MenuItem dataCy="user-logout" icon="LogOut" on:click={logout}
-              >Log out
-            </MenuItem>
-          </ActionMenu>
-        </div>
-      </div>
-      <div class="content">
-        <slot />
-      </div>
+      <slot />
     </div>
+    <MobileMenu visible={mobileMenuVisible} on:close={hideMobileMenu} />
   </div>
-  <Modal bind:this={userInfoModal}>
-    <UpdateUserInfoModal />
-  </Modal>
-  <Modal bind:this={changePasswordModal}>
-    <ChangePasswordModal />
-  </Modal>
-  <Modal bind:this={apiKeyModal}>
-    <UpdateAPIKeyModal />
-  </Modal>
 {/if}
 
 <style>
   .container {
     height: 100%;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
   }
   .nav {
     background: var(--background);
-    border-right: var(--border-light);
-    overflow: auto;
-    flex: 0 0 auto;
-    width: 250px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    border-bottom: var(--border-light);
+    padding: 0 24px;
+    gap: 24px;
+    position: relative;
+  }
+
+  /* Customise tabs appearance*/
+  .nav :global(.spectrum-Tabs) {
+    margin-bottom: -2px;
+    padding: 7px 0;
+    flex: 1 1 auto;
+  }
+  .nav :global(.spectrum-Tabs-content) {
+    display: none;
+  }
+  .nav :global(.spectrum-Tabs-itemLabel) {
+    font-weight: 600;
+  }
+
+  .branding {
+    display: grid;
+    place-items: center;
   }
   .main {
     flex: 1 1 auto;
-    display: grid;
-    grid-template-rows: auto 1fr;
-    overflow: hidden;
-  }
-  .branding {
-    display: grid;
-    grid-gap: var(--spacing-s);
-    grid-template-columns: auto auto;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .name {
-    display: grid;
-    grid-template-columns: auto auto;
-    grid-gap: var(--spacing-m);
-    align-items: center;
-  }
-  .name:hover {
-    cursor: pointer;
-  }
-  .avatar {
-    display: grid;
-    grid-template-columns: auto auto;
-    place-items: center;
-    grid-gap: var(--spacing-xs);
-  }
-  .avatar:hover {
-    cursor: pointer;
-    filter: brightness(110%);
-  }
-  .toolbar {
-    background: var(--background);
-    border-bottom: var(--border-light);
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: var(--spacing-m) calc(var(--spacing-xl) * 2);
+    justify-content: center;
+    align-items: stretch;
+    overflow: auto;
   }
-  .mobile-toggle,
-  .mobile-logo {
+  .mobile {
     display: none;
   }
-  .user-dropdown {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-  }
-  img {
-    width: 28px;
-    height: 28px;
-  }
-  span {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-weight: 600;
-  }
-  .content {
-    overflow: auto;
+  .desktop {
+    display: contents;
   }
 
   @media (max-width: 640px) {
-    .toolbar {
-      background: var(--background);
-      border-bottom: var(--border-light);
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      padding: var(--spacing-m) calc(var(--spacing-xl) * 1.5);
+    .mobile {
+      display: contents;
+    }
+    .desktop {
+      display: none;
     }
-
     .nav {
+      flex: 0 0 52px;
+      justify-content: space-between;
+    }
+    .branding {
       position: absolute;
-      left: -250px;
-      height: 100%;
-      transition: left ease-in-out 230ms;
-      z-index: 100;
-    }
-    .nav.visible {
-      left: 0;
-      box-shadow: 0 0 80px 20px rgba(0, 0, 0, 0.3);
-    }
-
-    .mobile-toggle,
-    .mobile-logo {
-      display: block;
-    }
-
-    .mobile-toggle,
-    .user-dropdown {
-      flex: 0 1 0;
+      left: 50%;
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%);
     }
   }
 </style>

packages/builder/src/pages/builder/portal/account/_layout.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { isActive } from "@roxi/routify"
+  import { Page } from "@budibase/bbui"
+  import { Content, SideNav, SideNavItem } from "components/portal/page"
+  import { menu } from "stores/portal"
+
+  $: pages = $menu.find(x => x.title === "Account").subPages
+</script>
+
+<Page narrow>
+  <Content>
+    <div slot="side-nav">
+      <SideNav>
+        {#each pages as { title, href }}
+          <SideNavItem text={title} url={href} active={$isActive(href)} />
+        {/each}
+      </SideNav>
+    </div>
+    <slot />
+  </Content>
+</Page>

packages/builder/src/pages/builder/portal/account/index.svelte

@@ -0,0 +1,4 @@
+<script>
+  import { redirect } from "@roxi/routify"
+  $redirect("./usage")
+</script>

packages/builder/src/pages/builder/portal/account/upgrade.svelte

@@ -8,6 +8,7 @@
     Button,
     Input,
     Label,
+    ButtonGroup,
     notifications,
   } from "@budibase/bbui"
   import { auth, admin } from "stores/portal"
@@ -103,10 +104,10 @@
         {#if license.plan.type === "free"}
           Upgrade your Budibase installation to unlock additional features. To
           subscribe to a plan visit your
-          <Link size="L" href={upgradeUrl}>Account</Link>.
+          <Link size="L" href={upgradeUrl}>account</Link>.
         {:else}
           To manage your plan visit your
-          <Link size="L" href={upgradeUrl}>Account</Link>.
+          <Link size="L" href={upgradeUrl}>account</Link>
         {/if}
       </Body>
     </Layout>
@@ -127,44 +128,33 @@
           />
         </div>
       </div>
-      <div class="button-container">
-        <div class="action-button">
-          <Button cta on:click={activate} disabled={activateDisabled}
-            >Activate</Button
-          >
-        </div>
-        <div class="action-button">
-          {#if licenseInfo?.licenseKey}
-            <Button warning on:click={() => deleteLicenseKeyModal.show()}
-              >Delete</Button
-            >
-          {/if}
-        </div>
-      </div>
+      <ButtonGroup>
+        <Button cta on:click={activate} disabled={activateDisabled}>
+          Activate
+        </Button>
+        {#if licenseInfo?.licenseKey}
+          <Button warning on:click={() => deleteLicenseKeyModal.show()}>
+            Delete
+          </Button>
+        {/if}
+      </ButtonGroup>
     </Layout>
     <Divider />
-    <Layout gap="L" noPadding>
-      <Layout gap="S" noPadding>
-        <Heading size="S">Plan</Heading>
-        <Layout noPadding gap="XXS">
-          <Body size="S">You are currently on the {license.plan.type} plan</Body
-          >
-          <Body size="XS">
-            {processStringSync(
-              "Updated {{ duration time 'millisecond' }} ago",
-              {
-                time:
-                  new Date().getTime() -
-                  new Date(license.refreshedAt).getTime(),
-              }
-            )}
-          </Body>
-        </Layout>
+    <Layout gap="XS" noPadding>
+      <Heading size="S">Plan</Heading>
+      <Layout noPadding gap="XXS">
+        <Body size="S">You are currently on the {license.plan.type} plan</Body>
+        <Body size="XS">
+          {processStringSync("Updated {{ duration time 'millisecond' }} ago", {
+            time:
+              new Date().getTime() - new Date(license.refreshedAt).getTime(),
+          })}
+        </Body>
       </Layout>
-      <div>
-        <Button secondary on:click={refresh}>Refresh</Button>
-      </div>
     </Layout>
+    <div>
+      <Button secondary on:click={refresh}>Refresh</Button>
+    </div>
   </Layout>
 {/if}
 
@@ -179,10 +169,4 @@
     grid-gap: var(--spacing-l);
     align-items: center;
   }
-  .action-button {
-    margin-right: 10px;
-  }
-  .button-container {
-    display: flex;
-  }
 </style>

packages/builder/src/pages/builder/portal/account/usage.svelte

@@ -10,9 +10,9 @@
     TooltipWrapper,
   } from "@budibase/bbui"
   import { onMount } from "svelte"
-  import { admin, auth, licensing } from "../../../../stores/portal"
+  import { admin, auth, licensing } from "stores/portal"
   import { Constants } from "@budibase/frontend-core"
-  import { DashCard, Usage } from "../../../../components/usage"
+  import { DashCard, Usage } from "components/usage"
 
   let staticUsage = []
   let monthlyUsage = []
@@ -32,6 +32,8 @@
   $: license = $auth.user?.license
   $: accountPortalAccess = $auth?.user?.accountPortalAccess
   $: quotaReset = quotaUsage?.quotaReset
+  $: canManagePlan =
+    ($admin.cloud && accountPortalAccess) || (!$admin.cloud && $auth.isAdmin)
 
   const setMonthlyUsage = () => {
     monthlyUsage = []
@@ -180,18 +182,19 @@
     <Layout noPadding gap="XS">
       <Heading>Usage</Heading>
       <Body>
-        Get information about your current usage within Budibase.
-        {#if accountPortalAccess}
-          To upgrade your plan and usage limits visit your <Link
-            on:click={goToAccountPortal}
-            size="L">Account</Link
-          >
-        {:else}
-          To upgrade your plan and usage limits contact your account holder.
-        {/if}
+        <div>Get information about your current usage within Budibase</div>
       </Body>
     </Layout>
     <Divider />
+    {#if canManagePlan}
+      <Body>
+        To upgrade your plan and usage limits visit your
+        <Link size="L" on:click={goToAccountPortal}>account</Link>.
+      </Body>
+    {:else}
+      <Body>Contact your account holder to upgrade your plan.</Body>
+    {/if}
+
     <DashCard
       description="YOUR CURRENT PLAN"
       title={planTitle()}
@@ -199,58 +202,61 @@
       primaryAction={accountPortalAccess ? goToAccountPortal : undefined}
       {textRows}
     >
-      <Layout gap="S" noPadding>
-        <Layout gap="S">
-          <div class="usages">
-            <Layout noPadding>
-              {#each staticUsage as usage}
-                <div class="usage">
+      <div class="content">
+        <div class="column">
+          <Layout noPadding>
+            {#each staticUsage as usage}
+              <div class="usage">
+                <Usage {usage} warnWhenFull={WARN_USAGE.includes(usage.name)} />
+              </div>
+            {/each}
+          </Layout>
+        </div>
+
+        {#if monthlyUsage.length}
+          <div class="column">
+            <Layout noPadding gap="M">
+              <Layout gap="XS" noPadding>
+                <Heading size="S">Monthly limits</Heading>
+                <div class="detail">
+                  <TooltipWrapper tooltip={new Date(quotaReset)}>
+                    <Detail size="M">
+                      Resets in {daysRemainingInMonth} days
+                    </Detail>
+                  </TooltipWrapper>
+                </div>
+              </Layout>
+              <Layout noPadding gap="M">
+                {#each monthlyUsage as usage}
                   <Usage
                     {usage}
                     warnWhenFull={WARN_USAGE.includes(usage.name)}
                   />
-                </div>
-              {/each}
-            </Layout>
-          </div>
-        </Layout>
-        {#if monthlyUsage.length}
-          <div class="monthly-container">
-            <Layout gap="S">
-              <Heading size="S" weight="light">Monthly</Heading>
-              <div class="detail">
-                <TooltipWrapper tooltip={new Date(quotaReset)}>
-                  <Detail size="M">Resets in {daysRemainingInMonth} days</Detail
-                  >
-                </TooltipWrapper>
-              </div>
-              <div class="usages">
-                <Layout noPadding>
-                  {#each monthlyUsage as usage}
-                    <div class="usage">
-                      <Usage
-                        {usage}
-                        warnWhenFull={WARN_USAGE.includes(usage.name)}
-                      />
-                    </div>
-                  {/each}
-                </Layout>
-              </div>
+                {/each}
+              </Layout>
             </Layout>
           </div>
         {/if}
-      </Layout>
+      </div>
     </DashCard>
   </Layout>
 {/if}
 
 <style>
-  .usages {
+  .content {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 40px;
+    flex-wrap: wrap;
+  }
+  .column {
+    flex: 1 1 0;
   }
   .detail :global(.spectrum-Detail) {
     color: var(--spectrum-global-color-gray-700);
+    margin-bottom: 5px;
   }
   .detail :global(.icon) {
     margin-bottom: 0;

packages/builder/src/pages/builder/portal/apps/_components/AcessFilter.svelte

@@ -1,49 +0,0 @@
-<script>
-  import { PickerDropdown } from "@budibase/bbui"
-  import { groups } from "stores/portal"
-  import { createEventDispatcher } from "svelte"
-
-  const dispatch = createEventDispatcher()
-
-  let filter = null
-  $: filteredGroups = !filter
-    ? $groups
-    : $groups.filter(group =>
-        group.name?.toLowerCase().includes(filter.toLowerCase())
-      )
-
-  $: optionSections = {
-    groups: {
-      data: filteredGroups,
-      getLabel: group => group.name,
-      getValue: group => group._id,
-      getIcon: group => group.icon,
-      getColour: group => group.color,
-    },
-  }
-
-  $: onChange = selected => {
-    const { detail } = selected
-    if (!detail || Object.keys(detail).length == 0) {
-      dispatch("change", null)
-      return
-    }
-
-    const groupSelected = $groups.find(x => x._id === detail)
-    const appRoleIds = groupSelected?.roles
-      ? Object.keys(groupSelected?.roles)
-      : []
-    dispatch("change", appRoleIds)
-  }
-</script>
-
-<PickerDropdown
-  autocomplete
-  bind:searchTerm={filter}
-  primaryOptions={optionSections}
-  placeholder={"Filter by access"}
-  on:pickprimary={onChange}
-  on:closed={() => {
-    filter = null
-  }}
-/>

packages/builder/src/pages/builder/portal/apps/_layout.svelte

@@ -0,0 +1,38 @@
+<script>
+  import { notifications } from "@budibase/bbui"
+  import { apps, templates, licensing, groups } from "stores/portal"
+  import { onMount } from "svelte"
+  import { goto } from "@roxi/routify"
+
+  // Don't block loading if we've already hydrated state
+  let loaded = $apps.length > 0
+
+  onMount(async () => {
+    try {
+      // Always load latest
+      await apps.load()
+      await licensing.init()
+      await templates.load()
+
+      if ($licensing.groupsEnabled) {
+        await groups.actions.init()
+      }
+
+      if ($templates?.length === 0) {
+        notifications.error("There was a problem loading quick start templates")
+      }
+
+      // Go to new app page if no apps exists
+      if (!$apps.length) {
+        $goto("./create")
+      }
+    } catch (error) {
+      notifications.error("Error loading apps and templates")
+    }
+    loaded = true
+  })
+</script>
+
+{#if loaded}
+  <slot />
+{/if}

packages/builder/src/pages/builder/portal/apps/create.svelte

@@ -1,49 +1,17 @@
 <script>
-  import { goto } from "@roxi/routify"
-  import {
-    Layout,
-    Page,
-    notifications,
-    Button,
-    Heading,
-    Body,
-    Modal,
-    Divider,
-    ActionButton,
-  } from "@budibase/bbui"
+  import { url } from "@roxi/routify"
+  import { Layout, Page, Button, Modal } from "@budibase/bbui"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import TemplateDisplay from "components/common/TemplateDisplay.svelte"
   import AppLimitModal from "components/portal/licensing/AppLimitModal.svelte"
-  import { onMount } from "svelte"
-  import { templates, licensing } from "stores/portal"
+  import { apps, templates, licensing } from "stores/portal"
+  import { Breadcrumbs, Breadcrumb, Header } from "components/portal/page"
 
-  let loaded = $templates?.length
   let template
   let creationModal = false
   let appLimitModal
   let creatingApp = false
 
-  const welcomeBody =
-    "Start from scratch or get a head start with one of our templates"
-  const createAppTitle = "Create new app"
-  const createAppButtonText = "Start from scratch"
-
-  onMount(async () => {
-    try {
-      await templates.load()
-      // always load latest
-      await licensing.init()
-      if ($templates?.length === 0) {
-        notifications.error(
-          "There was a problem loading quick start templates."
-        )
-      }
-    } catch (error) {
-      notifications.error("Error loading apps and templates")
-    }
-    loaded = true
-  })
-
   const initiateAppCreation = () => {
     if ($licensing?.usageMetrics?.apps >= 100) {
       appLimitModal.show()
@@ -70,58 +38,33 @@
   }
 </script>
 
-<Page wide>
-  <Layout noPadding gap="XL">
-    <span>
-      <ActionButton
-        secondary
-        icon={"ArrowLeft"}
-        on:click={() => {
-          $goto("../")
-        }}
-      >
-        Back
-      </ActionButton>
-    </span>
-
-    <div class="title">
-      <div class="welcome">
-        <Layout noPadding gap="XS">
-          <Heading size="L">{createAppTitle}</Heading>
-          <Body size="M">
-            {welcomeBody}
-          </Body>
-        </Layout>
-
-        <div class="buttons">
-          <Button
-            dataCy="create-app-btn"
-            size="M"
-            icon="Add"
-            cta
-            on:click={initiateAppCreation}
-          >
-            {createAppButtonText}
-          </Button>
-          <Button
-            dataCy="import-app-btn"
-            icon="Import"
-            size="M"
-            quiet
-            secondary
-            on:click={initiateAppImport}
-          >
-            Import app
-          </Button>
-        </div>
+<Page>
+  <Layout noPadding gap="L">
+    <Breadcrumbs>
+      <Breadcrumb url={$url("./")} text="Apps" />
+      <Breadcrumb text="Create new app" />
+    </Breadcrumbs>
+    <Header title={$apps.length ? "Create new app" : "Create your first app"}>
+      <div slot="buttons">
+        <Button
+          dataCy="import-app-btn"
+          size="M"
+          secondary
+          on:click={initiateAppImport}
+        >
+          Import app
+        </Button>
+        <Button
+          dataCy="create-app-btn"
+          size="M"
+          cta
+          on:click={initiateAppCreation}
+        >
+          Start from scratch
+        </Button>
       </div>
-    </div>
-
-    <Divider />
-
-    {#if loaded && $templates?.length}
-      <TemplateDisplay templates={$templates} />
-    {/if}
+    </Header>
+    <TemplateDisplay templates={$templates} />
   </Layout>
 </Page>
 
@@ -134,31 +77,3 @@
   <CreateAppModal {template} />
 </Modal>
 <AppLimitModal bind:this={appLimitModal} />
-
-<style>
-  .title .welcome > .buttons {
-    padding-top: 30px;
-  }
-  .title {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    gap: var(--spacing-xl);
-    flex-wrap: wrap;
-  }
-  .buttons {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-xl);
-    flex-wrap: wrap;
-  }
-  @media (max-width: 640px) {
-    .buttons {
-      flex-direction: row-reverse;
-      justify-content: flex-end;
-    }
-  }
-</style>

packages/builder/src/pages/builder/portal/apps/index.svelte

@@ -9,60 +9,34 @@
     notifications,
     Notification,
     Body,
+    Icon,
     Search,
   } from "@budibase/bbui"
-  import TemplateDisplay from "components/common/TemplateDisplay.svelte"
   import Spinner from "components/common/Spinner.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
-  import UpdateAppModal from "components/start/UpdateAppModal.svelte"
   import AppLimitModal from "components/portal/licensing/AppLimitModal.svelte"
 
   import { store, automationStore } from "builderStore"
   import { API } from "api"
   import { onMount } from "svelte"
-  import {
-    apps,
-    auth,
-    admin,
-    templates,
-    licensing,
-    groups,
-  } from "stores/portal"
+  import { apps, auth, admin, licensing } from "stores/portal"
   import { goto } from "@roxi/routify"
   import AppRow from "components/start/AppRow.svelte"
   import { AppStatus } from "constants"
   import Logo from "assets/bb-space-man.svg"
-  import AccessFilter from "./_components/AcessFilter.svelte"
 
   let sortBy = "name"
   let template
-  let selectedApp
   let creationModal
-  let updatingModal
   let appLimitModal
   let creatingApp = false
-  let loaded = $apps?.length || $templates?.length
   let searchTerm = ""
   let cloud = $admin.cloud
   let creatingFromTemplate = false
   let automationErrors
   let accessFilterList = null
 
-  const resolveWelcomeMessage = (auth, apps) => {
-    const userWelcome = auth?.user?.firstName
-      ? `Welcome ${auth?.user?.firstName}!`
-      : "Welcome back!"
-    return apps?.length ? userWelcome : "Let's create your first app!"
-  }
-  $: welcomeHeader = resolveWelcomeMessage($auth, $apps)
-  $: welcomeBody = $apps?.length
-    ? "Manage your apps and get a head start with templates"
-    : "Start from scratch or get a head start with one of our templates"
-
-  $: createAppButtonText = $apps?.length
-    ? "Create new app"
-    : "Start from scratch"
-
+  $: welcomeHeader = `Welcome ${$auth?.user?.firstName || "back"}`
   $: enrichedApps = enrichApps($apps, $auth.user, sortBy)
   $: filteredApps = enrichedApps.filter(
     app =>
@@ -75,8 +49,6 @@
           )
         : true)
   )
-  $: lockedApps = filteredApps.filter(app => app?.lockedYou || app?.lockedOther)
-  $: unlocked = lockedApps?.length === 0
   $: automationErrors = getAutomationErrors(enrichedApps)
 
   const enrichApps = (apps, user, sortBy) => {
@@ -121,10 +93,9 @@
 
   const goToAutomationError = appId => {
     const params = new URLSearchParams({
-      tab: "Automation History",
       open: "error",
     })
-    $goto(`../overview/${appId}?${params.toString()}`)
+    $goto(`../overview/${appId}/automation-history?${params.toString()}`)
   }
 
   const errorCount = errors => {
@@ -207,24 +178,6 @@
     creatingApp = false
   }
 
-  const appOverview = app => {
-    $goto(`../overview/${app.devId}`)
-  }
-
-  const editApp = app => {
-    if (app.lockedOther) {
-      notifications.error(
-        `App locked by ${app.lockedBy.email}. Please allow lock to expire or have them unlock this app.`
-      )
-      return
-    }
-    $goto(`../../app/${app.devId}`)
-  }
-
-  const accessFilterAction = accessFilter => {
-    accessFilterList = accessFilter.detail
-  }
-
   function createAppFromTemplateUrl(templateKey) {
     // validate the template key just to make sure
     const templateParts = templateKey.split("/")
@@ -240,37 +193,21 @@
 
   onMount(async () => {
     try {
-      await apps.load()
-      await templates.load()
-      // always load latest
-      await licensing.init()
-
-      if ($licensing.groupsEnabled) {
-        await groups.actions.init()
-      }
-
-      if ($templates?.length === 0) {
-        notifications.error(
-          "There was a problem loading quick start templates."
-        )
-      }
       // If the portal is loaded from an external URL with a template param
       const initInfo = await auth.getInitInfo()
       if (initInfo?.init_template) {
         creatingFromTemplate = true
         createAppFromTemplateUrl(initInfo.init_template)
-        return
       }
     } catch (error) {
-      notifications.error("Error loading apps and templates")
+      notifications.error("Error getting init info")
     }
-    loaded = true
   })
 </script>
 
-<Page wide>
-  <Layout noPadding gap="M">
-    {#if loaded}
+{#if $apps.length}
+  <Page>
+    <Layout noPadding gap="L">
       {#each Object.keys(automationErrors || {}) as appId}
         <Notification
           wide
@@ -290,42 +227,15 @@
       {/each}
       <div class="title">
         <div class="welcome">
-          <Layout noPadding gap="XS">
+          <Layout noPadding gap="S">
             <Heading size="L">{welcomeHeader}</Heading>
             <Body size="M">
-              {welcomeBody}
+              Manage your apps and get a head start with templates
             </Body>
           </Layout>
-          {#if !$apps?.length}
-            <div class="buttons">
-              <Button
-                dataCy="create-app-btn"
-                size="M"
-                icon="Add"
-                cta
-                on:click={initiateAppCreation}
-              >
-                {createAppButtonText}
-              </Button>
-              <Button
-                dataCy="import-app-btn"
-                icon="Import"
-                size="L"
-                quiet
-                secondary
-                on:click={initiateAppImport}
-              >
-                Import app
-              </Button>
-            </div>
-          {/if}
         </div>
       </div>
 
-      {#if !$apps?.length && $templates?.length}
-        <TemplateDisplay templates={$templates} />
-      {/if}
-
       {#if enrichedApps.length}
         <Layout noPadding gap="L">
           <div class="title">
@@ -333,27 +243,23 @@
               <Button
                 dataCy="create-app-btn"
                 size="M"
-                icon="Add"
                 cta
                 on:click={initiateAppCreation}
               >
-                {createAppButtonText}
+                Create new app
               </Button>
               {#if $apps?.length > 0}
                 <Button
-                  icon="Experience"
                   size="M"
-                  quiet
                   secondary
                   on:click={$goto("/builder/portal/apps/templates")}
                 >
-                  Templates
+                  View templates
                 </Button>
               {/if}
               {#if !$apps?.length}
                 <Button
                   dataCy="import-app-btn"
-                  icon="Import"
                   size="L"
                   quiet
                   secondary
@@ -366,55 +272,45 @@
             {#if enrichedApps.length > 1}
               <div class="app-actions">
                 {#if cloud}
-                  <Button
-                    size="M"
-                    icon="Export"
-                    quiet
-                    secondary
+                  <Icon
+                    name="Download"
+                    hoverable
                     on:click={initiateAppsExport}
-                  >
-                    Export apps
-                  </Button>
-                {/if}
-                <div class="filter">
-                  {#if $licensing.groupsEnabled}
-                    <AccessFilter on:change={accessFilterAction} />
-                  {/if}
-                  <Select
-                    quiet
-                    autoWidth
-                    bind:value={sortBy}
-                    placeholder={null}
-                    options={[
-                      { label: "Sort by name", value: "name" },
-                      { label: "Sort by recently updated", value: "updated" },
-                      { label: "Sort by status", value: "status" },
-                    ]}
                   />
-                  <Search placeholder="Search" bind:value={searchTerm} />
-                </div>
+                {/if}
+                <Select
+                  autoWidth
+                  bind:value={sortBy}
+                  placeholder={null}
+                  options={[
+                    { label: "Sort by name", value: "name" },
+                    { label: "Sort by recently updated", value: "updated" },
+                    { label: "Sort by status", value: "status" },
+                  ]}
+                />
+                <Search placeholder="Search" bind:value={searchTerm} />
               </div>
             {/if}
           </div>
 
-          <div class="appTable" class:unlocked>
+          <div class="app-table">
             {#each filteredApps as app (app.appId)}
-              <AppRow {app} {editApp} {appOverview} />
+              <AppRow {app} />
             {/each}
           </div>
         </Layout>
       {/if}
-    {/if}
 
-    {#if creatingFromTemplate}
-      <div class="empty-wrapper">
-        <img class="img-logo img-size" alt="logo" src={Logo} />
-        <p>Creating your Budibase app from your selected template...</p>
-        <Spinner size="10" />
-      </div>
-    {/if}
-  </Layout>
-</Page>
+      {#if creatingFromTemplate}
+        <div class="empty-wrapper">
+          <img class="img-logo img-size" alt="logo" src={Logo} />
+          <p>Creating your Budibase app from your selected template...</p>
+          <Spinner size="10" />
+        </div>
+      {/if}
+    </Layout>
+  </Page>
+{/if}
 
 <Modal
   bind:this={creationModal}
@@ -425,25 +321,9 @@
   <CreateAppModal {template} />
 </Modal>
 
-<Modal bind:this={updatingModal} padding={false} width="600px">
-  <UpdateAppModal app={selectedApp} />
-</Modal>
-
 <AppLimitModal bind:this={appLimitModal} />
 
 <style>
-  .appTable {
-    border-top: var(--border-light);
-  }
-  .app-actions {
-    display: flex;
-  }
-  .app-actions :global(> button) {
-    margin-right: 10px;
-  }
-  .title .welcome > .buttons {
-    padding-top: var(--spacing-l);
-  }
   .title {
     display: flex;
     flex-direction: row;
@@ -460,46 +340,27 @@
     gap: var(--spacing-xl);
     flex-wrap: wrap;
   }
-  @media (max-width: 1000px) {
-    .img-logo {
-      display: none;
-    }
-  }
-  .filter {
+  .app-actions {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
     gap: var(--spacing-xl);
+    flex-wrap: wrap;
   }
-  .appTable {
-    display: grid;
-    grid-template-rows: auto;
-    grid-template-columns: 1fr 1fr 1fr 1fr auto;
-    align-items: center;
+  .app-actions :global(.spectrum-Textfield) {
+    max-width: 180px;
   }
 
-  .appTable.unlocked {
-    grid-template-columns: 1fr 1fr auto 1fr auto;
-  }
-
-  .appTable :global(> div) {
-    height: 70px;
-    display: grid;
-    align-items: center;
-    white-space: nowrap;
+  .app-table {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-xl);
     overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .appTable :global(> div) {
-    border-bottom: var(--border-light);
   }
 
-  @media (max-width: 640px) {
-    .appTable {
-      grid-template-columns: 1fr auto !important;
-    }
-  }
   .empty-wrapper {
     flex: 1 1 auto;
     height: 100%;
@@ -512,4 +373,26 @@
     width: 160px;
     height: 160px;
   }
+
+  @media (max-width: 1000px) {
+    .img-logo {
+      display: none;
+    }
+  }
+  @media (max-width: 640px) {
+    .app-actions {
+      margin-top: var(--spacing-xl);
+      margin-bottom: calc(-1 * var(--spacing-m));
+    }
+    .app-actions :global(.spectrum-Textfield) {
+      max-width: none;
+    }
+    /*  Hide download apps icon */
+    .app-actions :global(> .spectrum-Icon) {
+      display: none;
+    }
+    .app-actions > :global(*) {
+      flex: 1 1 auto;
+    }
+  }
 </style>

packages/builder/src/pages/builder/portal/apps/templates.svelte

@@ -1,42 +1,18 @@
 <script>
-  import { goto } from "@roxi/routify"
-  import { Layout, Page, notifications, ActionButton } from "@budibase/bbui"
+  import { url } from "@roxi/routify"
+  import { Layout, Page } from "@budibase/bbui"
   import TemplateDisplay from "components/common/TemplateDisplay.svelte"
-  import { onMount } from "svelte"
   import { templates } from "stores/portal"
-
-  let loaded = $templates?.length
-
-  onMount(async () => {
-    try {
-      await templates.load()
-      if ($templates?.length === 0) {
-        notifications.error(
-          "There was a problem loading quick start templates."
-        )
-      }
-    } catch (error) {
-      notifications.error("Error loading apps and templates")
-    }
-    loaded = true
-  })
+  import { Breadcrumbs, Breadcrumb, Header } from "components/portal/page"
 </script>
 
-<Page wide>
-  <Layout noPadding gap="XL">
-    <span>
-      <ActionButton
-        secondary
-        icon={"ArrowLeft"}
-        on:click={() => {
-          $goto("../")
-        }}
-      >
-        Back
-      </ActionButton>
-    </span>
-    {#if loaded && $templates?.length}
-      <TemplateDisplay templates={$templates} />
-    {/if}
+<Page>
+  <Layout noPadding gap="L">
+    <Breadcrumbs>
+      <Breadcrumb url={$url("./")} text="Apps" />
+      <Breadcrumb text="Templates" />
+    </Breadcrumbs>
+    <Header title="Templates" />
+    <TemplateDisplay templates={$templates} />
   </Layout>
 </Page>

packages/builder/src/pages/builder/portal/manage/_layout.svelte

@@ -1,20 +0,0 @@
-<script>
-  import { Page } from "@budibase/bbui"
-  import { auth } from "stores/portal"
-  import { page, redirect } from "@roxi/routify"
-
-  // Only admins allowed here
-  $: {
-    if (!$auth.isAdmin) {
-      $redirect("../")
-    }
-  }
-
-  $: wide = $page.path.includes("email/:template")
-</script>
-
-{#if $auth.isAdmin}
-  <Page maxWidth="90ch" {wide}>
-    <slot />
-  </Page>
-{/if}

packages/builder/src/pages/builder/portal/manage/email/_components/TemplateBindings.svelte

@@ -1,15 +0,0 @@
-<script>
-  import { Body, Menu, MenuItem, Detail } from "@budibase/bbui"
-
-  export let bindings
-  export let onBindingClick = () => {}
-</script>
-
-<Menu>
-  {#each bindings as binding}
-    <MenuItem on:click={() => onBindingClick(binding)}>
-      <Detail size="M">{binding.name}</Detail>
-      <Body size="XS">{binding.description}</Body>
-    </MenuItem>
-  {/each}
-</Menu>

packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte

@@ -1,264 +0,0 @@
-<script>
-  import { goto } from "@roxi/routify"
-  import {
-    ActionButton,
-    Button,
-    Layout,
-    Heading,
-    Icon,
-    Popover,
-    notifications,
-    List,
-    ListItem,
-    StatusLight,
-    Divider,
-    ActionMenu,
-    MenuItem,
-    Modal,
-  } from "@budibase/bbui"
-  import UserGroupPicker from "components/settings/UserGroupPicker.svelte"
-  import { createPaginationStore } from "helpers/pagination"
-  import { users, apps, groups } from "stores/portal"
-  import { onMount } from "svelte"
-  import { RoleUtils } from "@budibase/frontend-core"
-  import { roles } from "stores/backend"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import CreateEditGroupModal from "./_components/CreateEditGroupModal.svelte"
-  import GroupIcon from "./_components/GroupIcon.svelte"
-  import AppAddModal from "./_components/AppAddModal.svelte"
-
-  export let groupId
-
-  let popoverAnchor
-  let popover
-  let searchTerm = ""
-  let prevSearch = undefined
-  let pageInfo = createPaginationStore()
-  let loaded = false
-  let editModal, deleteModal, appAddModal
-
-  $: page = $pageInfo.page
-  $: fetchUsers(page, searchTerm)
-  $: group = $groups.find(x => x._id === groupId)
-  $: filtered = $users.data
-  $: groupApps = $apps.filter(app =>
-    groups.actions.getGroupAppIds(group).includes(apps.getProdAppID(app.devId))
-  )
-  $: {
-    if (loaded && !group?._id) {
-      $goto("./")
-    }
-  }
-
-  async function fetchUsers(page, search) {
-    if ($pageInfo.loading) {
-      return
-    }
-    // need to remove the page if they've started searching
-    if (search && !prevSearch) {
-      pageInfo.reset()
-      page = undefined
-    }
-    prevSearch = search
-    try {
-      pageInfo.loading()
-      await users.search({ page, email: search })
-      pageInfo.fetched($users.hasNextPage, $users.nextPage)
-    } catch (error) {
-      notifications.error("Error getting user list")
-    }
-  }
-
-  const getRoleLabel = appId => {
-    const roleId = group?.roles?.[apps.getProdAppID(appId)]
-    const role = $roles.find(x => x._id === roleId)
-    return role?.name || "Custom role"
-  }
-
-  async function deleteGroup() {
-    try {
-      await groups.actions.delete(group)
-      notifications.success("User group deleted successfully")
-      $goto("./")
-    } catch (error) {
-      notifications.error(`Failed to delete user group`)
-    }
-  }
-
-  async function saveGroup(group) {
-    try {
-      await groups.actions.save(group)
-    } catch (error) {
-      notifications.error(`Failed to save user group`)
-    }
-  }
-
-  onMount(async () => {
-    try {
-      await Promise.all([groups.actions.init(), apps.load(), roles.fetch()])
-      loaded = true
-    } catch (error) {
-      notifications.error("Error fetching user group data")
-    }
-  })
-</script>
-
-{#if loaded}
-  <Layout noPadding gap="XL">
-    <div>
-      <ActionButton on:click={() => $goto("../groups")} icon="ArrowLeft">
-        Back
-      </ActionButton>
-    </div>
-
-    <Layout noPadding gap="M">
-      <div class="header">
-        <div class="title">
-          <GroupIcon {group} size="L" />
-          <div class="text-padding">
-            <Heading>{group?.name}</Heading>
-          </div>
-        </div>
-        <div>
-          <ActionMenu align="right">
-            <span slot="control">
-              <Icon hoverable name="More" />
-            </span>
-            <MenuItem icon="Refresh" on:click={() => editModal.show()}>
-              Edit
-            </MenuItem>
-            <MenuItem icon="Delete" on:click={() => deleteModal.show()}>
-              Delete
-            </MenuItem>
-          </ActionMenu>
-        </div>
-      </div>
-
-      <Divider />
-
-      <Layout noPadding gap="S">
-        <div class="header">
-          <Heading size="S">Users</Heading>
-          <div bind:this={popoverAnchor}>
-            <Button on:click={popover.show()} icon="UserAdd" cta>
-              Add user
-            </Button>
-          </div>
-          <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
-            <UserGroupPicker
-              bind:searchTerm
-              labelKey="email"
-              selected={group.users?.map(user => user._id)}
-              list={$users.data}
-              on:select={e => groups.actions.addUser(groupId, e.detail)}
-              on:deselect={e => groups.actions.removeUser(groupId, e.detail)}
-            />
-          </Popover>
-        </div>
-        <List>
-          {#if group?.users.length}
-            {#each group.users as user}
-              <ListItem
-                title={user.email}
-                on:click={() => $goto(`../users/${user._id}`)}
-                hoverable
-              >
-                <Icon
-                  on:click={e => {
-                    groups.actions.removeUser(groupId, user._id)
-                    e.stopPropagation()
-                  }}
-                  hoverable
-                  size="S"
-                  name="Close"
-                />
-              </ListItem>
-            {/each}
-          {:else}
-            <ListItem icon="UserGroup" title="This user group has no users" />
-          {/if}
-        </List>
-      </Layout>
-    </Layout>
-
-    <Layout noPadding gap="S">
-      <div class="header">
-        <Heading size="S">Apps</Heading>
-        <div>
-          <Button on:click={appAddModal.show()} icon="ExperienceAdd" cta>
-            Add app
-          </Button>
-        </div>
-      </div>
-      <List>
-        {#if groupApps.length}
-          {#each groupApps as app}
-            <ListItem
-              title={app.name}
-              icon={app?.icon?.name || "Apps"}
-              iconColor={app?.icon?.color || ""}
-              on:click={() => $goto(`../../overview/${app.devId}`)}
-              hoverable
-            >
-              <div class="title ">
-                <StatusLight
-                  square
-                  color={RoleUtils.getRoleColour(
-                    group.roles[apps.getProdAppID(app.devId)]
-                  )}
-                >
-                  {getRoleLabel(app.devId)}
-                </StatusLight>
-              </div>
-              <Icon
-                on:click={e => {
-                  groups.actions.removeApp(
-                    groupId,
-                    apps.getProdAppID(app.devId)
-                  )
-                  e.stopPropagation()
-                }}
-                hoverable
-                size="S"
-                name="Close"
-              />
-            </ListItem>
-          {/each}
-        {:else}
-          <ListItem icon="Apps" title="This user group has access to no apps" />
-        {/if}
-      </List>
-    </Layout>
-  </Layout>
-{/if}
-
-<Modal bind:this={editModal}>
-  <CreateEditGroupModal {group} {saveGroup} />
-</Modal>
-
-<Modal bind:this={appAddModal}>
-  <AppAddModal {group} />
-</Modal>
-
-<ConfirmDialog
-  bind:this={deleteModal}
-  title="Delete user group"
-  okText="Delete user group"
-  onOk={deleteGroup}
->
-  Are you sure you wish to delete <b>{group?.name}?</b>
-</ConfirmDialog>
-
-<style>
-  .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-  }
-  .title {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-m);
-  }
-</style>

packages/builder/src/pages/builder/portal/manage/groups/_layout.svelte

@@ -1,3 +0,0 @@
-<div style="float: right;">
-  <slot />
-</div>

packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte

@@ -0,0 +1,275 @@
+<script>
+  import { url, isActive, goto } from "@roxi/routify"
+  import {
+    Page,
+    Layout,
+    Button,
+    Icon,
+    ActionMenu,
+    MenuItem,
+    Helpers,
+    Input,
+    Modal,
+    notifications,
+  } from "@budibase/bbui"
+  import {
+    Content,
+    SideNav,
+    SideNavItem,
+    Breadcrumbs,
+    Breadcrumb,
+    Header,
+  } from "components/portal/page"
+  import { apps, auth, overview } from "stores/portal"
+  import { AppStatus } from "constants"
+  import analytics, { Events, EventSource } from "analytics"
+  import { store } from "builderStore"
+  import AppLockModal from "components/common/AppLockModal.svelte"
+  import EditableIcon from "components/common/EditableIcon.svelte"
+  import { API } from "api"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import ExportAppModal from "components/start/ExportAppModal.svelte"
+  import { syncURLToState } from "helpers/urlStateSync"
+  import * as routify from "@roxi/routify"
+  import { onDestroy } from "svelte"
+
+  // Keep URL and state in sync for selected screen ID
+  const stopSyncing = syncURLToState({
+    urlParam: "appId",
+    stateKey: "selectedAppId",
+    validate: id => $apps.some(app => app.devId === id),
+    fallbackUrl: "../../",
+    store: overview,
+    routify,
+  })
+
+  let exportModal
+  let deletionModal
+  let exportPublishedVersion = false
+  let deletionConfirmationAppName
+
+  $: app = $overview.selectedApp
+  $: appId = $overview.selectedAppId
+  $: initialiseApp(appId)
+  $: isPublished = app?.status === AppStatus.DEPLOYED
+  $: appLocked = !!app?.lockedBy
+  $: lockedByYou = $auth.user.email === app?.lockedBy?.email
+
+  const initialiseApp = async appId => {
+    try {
+      const pkg = await API.fetchAppPackage(appId)
+      await store.actions.initialise(pkg)
+      await API.syncApp(appId)
+    } catch (error) {
+      notifications.error("Error initialising app overview")
+      $goto("../../")
+    }
+  }
+
+  const viewApp = () => {
+    if (isPublished) {
+      analytics.captureEvent(Events.APP_VIEW_PUBLISHED, {
+        appId: $store.appId,
+        eventSource: EventSource.PORTAL,
+      })
+      window.open(`/app${app?.url}`, "_blank")
+    }
+  }
+
+  const editApp = () => {
+    if (appLocked && !lockedByYou) {
+      const identifier = app?.lockedBy?.firstName || app?.lockedBy?.email
+      notifications.warning(
+        `App locked by ${identifier}. Please allow lock to expire or have them unlock this app.`
+      )
+      return
+    }
+    $goto(`../../../app/${app.devId}`)
+  }
+
+  const exportApp = opts => {
+    exportPublishedVersion = !!opts?.published
+    exportModal.show()
+  }
+
+  const copyAppId = async () => {
+    await Helpers.copyToClipboard(app.prodId)
+    notifications.success("App ID copied to clipboard")
+  }
+
+  const deleteApp = async () => {
+    try {
+      await API.deleteApp(app?.devId)
+      notifications.success("App deleted successfully")
+      $goto("../")
+    } catch (err) {
+      notifications.error("Error deleting app")
+    }
+  }
+
+  onDestroy(() => {
+    stopSyncing()
+    store.actions.reset()
+  })
+</script>
+
+{#key appId}
+  <Page>
+    <Layout noPadding gap="L">
+      <Breadcrumbs>
+        <Breadcrumb url={$url("../")} text="Apps" />
+        <Breadcrumb text={app?.name} />
+      </Breadcrumbs>
+      <Header title={app?.name} wrap={false}>
+        <div slot="icon">
+          <EditableIcon
+            {app}
+            autoSave
+            size="XL"
+            name={app?.icon?.name || "Apps"}
+            color={app?.icon?.color}
+          />
+        </div>
+        <div slot="buttons">
+          <AppLockModal {app} />
+          <span class="desktop">
+            <Button
+              size="M"
+              quiet
+              secondary
+              disabled={!isPublished}
+              on:click={viewApp}
+              dataCy="view-app"
+            >
+              View
+            </Button>
+          </span>
+          <span class="desktop">
+            <Button
+              size="M"
+              cta
+              disabled={appLocked && !lockedByYou}
+              on:click={editApp}
+            >
+              Edit
+            </Button>
+          </span>
+          <ActionMenu align="right" dataCy="app-overview-menu-popover">
+            <span slot="control" class="app-overview-actions-icon">
+              <Icon hoverable name="More" />
+            </span>
+            <span class="mobile">
+              <MenuItem icon="Globe" disabled={!isPublished} on:click={viewApp}>
+                View
+              </MenuItem>
+            </span>
+            <span class="mobile">
+              <MenuItem
+                icon="Edit"
+                disabled={appLocked && !lockedByYou}
+                on:click={editApp}
+              >
+                Edit
+              </MenuItem>
+            </span>
+            <MenuItem
+              on:click={() => exportApp({ published: false })}
+              icon="DownloadFromCloud"
+            >
+              Export latest
+            </MenuItem>
+            {#if isPublished}
+              <MenuItem
+                on:click={() => exportApp({ published: true })}
+                icon="DownloadFromCloudOutline"
+              >
+                Export published
+              </MenuItem>
+              <MenuItem on:click={copyAppId} icon="Copy">Copy app ID</MenuItem>
+            {/if}
+            {#if !isPublished}
+              <MenuItem on:click={deletionModal.show} icon="Delete">
+                Delete
+              </MenuItem>
+            {/if}
+          </ActionMenu>
+        </div>
+      </Header>
+      <Content showMobileNav>
+        <SideNav slot="side-nav">
+          <SideNavItem
+            text="Overview"
+            url={$url("./overview")}
+            active={$isActive("./overview")}
+          />
+          <SideNavItem
+            text="Access"
+            url={$url("./access")}
+            active={$isActive("./access")}
+          />
+          <SideNavItem
+            text="Automation History"
+            url={$url("./automation-history")}
+            active={$isActive("./automation-history")}
+          />
+          <SideNavItem
+            text="Backups"
+            url={$url("./backups")}
+            active={$isActive("./backups")}
+          />
+          <SideNavItem
+            text="Name and URL"
+            url={$url("./name-and-url")}
+            active={$isActive("./name-and-url")}
+          />
+          <SideNavItem
+            text="Version"
+            url={$url("./version")}
+            active={$isActive("./version")}
+          />
+        </SideNav>
+        <slot />
+      </Content>
+    </Layout>
+  </Page>
+
+  <Modal bind:this={exportModal} padding={false}>
+    <ExportAppModal {app} published={exportPublishedVersion} />
+  </Modal>
+  <ConfirmDialog
+    bind:this={deletionModal}
+    title="Delete app"
+    okText="Delete"
+    onOk={deleteApp}
+    onCancel={() => (deletionConfirmationAppName = null)}
+    disabled={deletionConfirmationAppName !== app?.name}
+  >
+    Are you sure you want to delete <b>{app?.name}</b>?
+    <br />
+    Please enter the app name below to confirm.
+    <br /><br />
+    <Input
+      bind:value={deletionConfirmationAppName}
+      data-cy="delete-app-confirmation"
+      placeholder={app?.name}
+    />
+  </ConfirmDialog>
+{/key}
+
+<style>
+  .desktop {
+    display: contents;
+  }
+  .mobile {
+    display: none;
+  }
+
+  @media (max-width: 640px) {
+    .desktop {
+      display: none;
+    }
+    .mobile {
+      display: contents;
+    }
+  }
+</style>

packages/builder/src/pages/builder/portal/overview/[appId]/access/_components/AssignmentModal.svelte

@@ -14,6 +14,8 @@
 
   export let app
   export let appUsers = []
+  export let showUsers = false
+  export let showGroups = false
 
   const dispatch = createEventDispatcher()
   const usersFetch = fetchData({
@@ -41,7 +43,8 @@
   $: availableGroups = getAvailableGroups($groups, app.appId, search, data)
   $: valid = data?.length && !data?.some(x => !x.id?.length || !x.role?.length)
   $: optionSections = {
-    ...($licensing.groupsEnabled &&
+    ...(showGroups &&
+      $licensing.groupsEnabled &&
       availableGroups.length && {
         ["User groups"]: {
           data: availableGroups,
@@ -51,13 +54,15 @@
           getColour: group => group.color,
         },
       }),
-    users: {
-      data: availableUsers,
-      getLabel: user => user.email,
-      getValue: user => user._id,
-      getIcon: user => user.icon,
-      getColour: user => user.color,
-    },
+    ...(showUsers && {
+      users: {
+        data: availableUsers,
+        getLabel: user => user.email,
+        getValue: user => user._id,
+        getIcon: user => user.icon,
+        getColour: user => user.color,
+      },
+    }),
   }
 
   const addData = async appData => {
@@ -139,7 +144,7 @@
 
 <ModalContent
   size="M"
-  title="Assign users to your app"
+  title="Assign access to your app"
   confirmText="Done"
   cancelText="Cancel"
   onConfirm={() => addData(data)}
@@ -185,7 +190,7 @@
     </Layout>
   {/if}
   <div>
-    <ActionButton on:click={addNewInput} icon="Add">Add email</ActionButton>
+    <ActionButton on:click={addNewInput} icon="Add">Add more</ActionButton>
   </div>
 </ModalContent>
 

packages/builder/src/pages/builder/portal/overview/[appId]/access/_components/EditableRoleRenderer.svelte

@@ -0,0 +1,26 @@
+<script>
+  import RoleSelect from "components/common/RoleSelect.svelte"
+  import { getContext } from "svelte"
+
+  const rolesContext = getContext("roles")
+
+  export let value
+  export let row
+</script>
+
+<div>
+  <RoleSelect
+    {value}
+    quiet
+    allowRemove
+    allowPublic={false}
+    on:change={e => rolesContext.updateRole(e.detail, row._id)}
+    on:remove={() => rolesContext.removeRole(row._id)}
+  />
+</div>
+
+<style>
+  div {
+    width: 100%;
+  }
+</style>

packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte

@@ -0,0 +1,271 @@
+<script>
+  import {
+    Layout,
+    Heading,
+    Body,
+    Button,
+    Modal,
+    notifications,
+    Pagination,
+    Divider,
+    Table,
+  } from "@budibase/bbui"
+  import { onMount, setContext } from "svelte"
+  import { users, groups, apps, licensing, overview } from "stores/portal"
+  import AssignmentModal from "./_components/AssignmentModal.svelte"
+  import { roles } from "stores/backend"
+  import { API } from "api"
+  import { fetchData } from "@budibase/frontend-core"
+  import EditableRoleRenderer from "./_components/EditableRoleRenderer.svelte"
+
+  const userSchema = {
+    email: {
+      type: "string",
+      width: "1fr",
+    },
+    role: {
+      displayName: "Access",
+      width: "150px",
+      borderLeft: true,
+    },
+  }
+  const groupSchema = {
+    name: {
+      type: "string",
+      width: "1fr",
+    },
+    role: {
+      displayName: "Access",
+      width: "150px",
+      borderLeft: true,
+    },
+  }
+  const customRenderers = [
+    {
+      column: "role",
+      component: EditableRoleRenderer,
+    },
+  ]
+
+  let assignmentModal
+  let appGroups
+  let appUsers
+  let showAddUsers = false
+  let showAddGroups = false
+
+  $: app = $overview.selectedApp
+  $: devAppId = app.devId
+  $: prodAppId = apps.getProdAppID(app.devId)
+  $: usersFetch = fetchData({
+    API,
+    datasource: {
+      type: "user",
+    },
+    options: {
+      query: {
+        appId: apps.getProdAppID(devAppId),
+      },
+    },
+  })
+  $: appUsers = getAppUsers($usersFetch.rows, prodAppId)
+  $: appGroups = getAppGroups($groups, prodAppId)
+
+  const getAppUsers = (users, appId) => {
+    return users.map(user => ({
+      ...user,
+      role: user.roles[Object.keys(user.roles).find(x => x === appId)],
+    }))
+  }
+
+  const getAppGroups = (allGroups, appId) => {
+    return allGroups
+      .filter(group => {
+        if (!group.roles) {
+          return false
+        }
+        return groups.actions.getGroupAppIds(group).includes(appId)
+      })
+      .map(group => ({
+        ...group,
+        role: group.roles[
+          groups.actions.getGroupAppIds(group).find(x => x === appId)
+        ],
+      }))
+  }
+
+  const updateRole = async (role, id) => {
+    // Check if this is a user or a group
+    if ($usersFetch.rows.some(user => user._id === id)) {
+      await updateUserRole(role, id)
+    } else {
+      await updateGroupRole(role, id)
+    }
+  }
+
+  const removeRole = async id => {
+    // Check if this is a user or a group
+    if ($usersFetch.rows.some(user => user._id === id)) {
+      await removeUserRole(id)
+    } else {
+      await removeGroupRole(id)
+    }
+  }
+
+  const updateUserRole = async (role, userId) => {
+    const user = $usersFetch.rows.find(user => user._id === userId)
+    if (!user) {
+      return
+    }
+    user.roles[prodAppId] = role
+    await users.save(user)
+    await usersFetch.refresh()
+  }
+
+  const removeUserRole = async userId => {
+    const user = $usersFetch.rows.find(user => user._id === userId)
+    if (!user) {
+      return
+    }
+    const filteredRoles = { ...user.roles }
+    delete filteredRoles[prodAppId]
+    await users.save({
+      ...user,
+      roles: {
+        ...filteredRoles,
+      },
+    })
+    await usersFetch.refresh()
+  }
+
+  const updateGroupRole = async (role, groupId) => {
+    const group = $groups.find(group => group._id === groupId)
+    if (!group) {
+      return
+    }
+    await groups.actions.addApp(group._id, prodAppId, role)
+    await usersFetch.refresh()
+  }
+
+  const removeGroupRole = async groupId => {
+    const group = $groups.find(group => group._id === groupId)
+    if (!group) {
+      return
+    }
+    await groups.actions.removeApp(group._id, prodAppId)
+    await usersFetch.refresh()
+  }
+
+  const showUsersModal = () => {
+    showAddUsers = true
+    showAddGroups = false
+    assignmentModal.show()
+  }
+
+  const showGroupsModal = () => {
+    showAddUsers = false
+    showAddGroups = true
+    assignmentModal.show()
+  }
+
+  setContext("roles", {
+    updateRole,
+    removeRole,
+  })
+
+  onMount(async () => {
+    try {
+      await roles.fetch()
+    } catch (error) {
+      notifications.error(error)
+    }
+  })
+</script>
+
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <Heading>Access</Heading>
+    <Body>Assign users to your app and set their access</Body>
+  </Layout>
+  <Divider />
+  <Layout noPadding gap="L">
+    {#if $usersFetch.loaded}
+      <Layout noPadding gap="S">
+        <div class="title">
+          <Heading size="S">Users</Heading>
+          <Button cta on:click={showUsersModal}>Assign user</Button>
+        </div>
+        <Table
+          customPlaceholder
+          data={appUsers}
+          schema={userSchema}
+          allowEditRows={false}
+          {customRenderers}
+        >
+          <div class="placeholder" slot="placeholder">
+            <Heading size="S">You have no users assigned yet</Heading>
+          </div>
+        </Table>
+        <div class="pagination">
+          <Pagination
+            page={$usersFetch.pageNumber + 1}
+            hasPrevPage={$usersFetch.hasPrevPage}
+            hasNextPage={$usersFetch.hasNextPage}
+            goToPrevPage={$usersFetch.loading ? null : usersFetch.prevPage}
+            goToNextPage={$usersFetch.loading ? null : usersFetch.nextPage}
+          />
+        </div>
+      </Layout>
+    {/if}
+
+    {#if $usersFetch.loaded && $licensing.groupsEnabled}
+      <Layout noPadding gap="S">
+        <div class="title">
+          <Heading size="S">Groups</Heading>
+          <Button cta on:click={showGroupsModal}>Assign group</Button>
+        </div>
+        <Table
+          customPlaceholder
+          data={appGroups}
+          schema={groupSchema}
+          allowEditRows={false}
+          {customRenderers}
+        >
+          <div class="placeholder" slot="placeholder">
+            <Heading size="S">You have no groups assigned yet</Heading>
+          </div>
+        </Table>
+      </Layout>
+    {/if}
+  </Layout>
+</Layout>
+
+<Modal bind:this={assignmentModal}>
+  <AssignmentModal
+    {app}
+    {appUsers}
+    on:update={usersFetch.refresh}
+    showGroups={showAddGroups}
+    showUsers={showAddUsers}
+  />
+</Modal>
+
+<style>
+  .title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+  .placeholder {
+    flex: 1 1 auto;
+    display: grid;
+    place-items: center;
+    text-align: center;
+  }
+  .pagination {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-top: calc(-1 * var(--spacing-s));
+  }
+</style>

packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/_components/HistoryDetailsPanel.svelte

@@ -0,0 +1,82 @@
+<script>
+  import {
+    Layout,
+    Body,
+    Button,
+    InlineAlert,
+    Heading,
+    Icon,
+  } from "@budibase/bbui"
+  import StatusRenderer from "./StatusRenderer.svelte"
+  import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
+  import TestDisplay from "components/automation/AutomationBuilder/TestDisplay.svelte"
+  import { goto } from "@roxi/routify"
+  import { automationStore } from "builderStore"
+
+  export let history
+  export let appId
+  export let close
+  const STOPPED_ERROR = "stopped_error"
+
+  $: exists = $automationStore.automations?.find(
+    auto => auto._id === history?.automationId
+  )
+</script>
+
+{#if history}
+  <Layout noPadding>
+    <div class="controls">
+      <StatusRenderer value={history.status} />
+      <Icon hoverable name="Close" on:click={close} />
+    </div>
+    <Layout noPadding gap="XS">
+      <Heading>{history.automationName}</Heading>
+      <DateTimeRenderer value={history.createdAt} />
+    </Layout>
+    {#if history.status === STOPPED_ERROR}
+      <div class="cron-error">
+        <InlineAlert
+          type="error"
+          header="CRON automation disabled"
+          message="Fix the error and re-publish your app to re-activate."
+        />
+      </div>
+    {/if}
+    {#if exists}
+      <div>
+        <Button
+          secondary
+          on:click={() => {
+            $goto(`../../../../app/${appId}/automate/${history.automationId}`)
+          }}
+        >
+          Edit automation
+        </Button>
+      </div>
+    {/if}
+    {#key history}
+      <div class="history">
+        <TestDisplay testResults={history} width="100%" />
+      </div>
+    {/key}
+  </Layout>
+{:else}
+  <Body>No details found</Body>
+{/if}
+
+<style>
+  .controls {
+    display: flex;
+    gap: var(--spacing-s);
+    justify-content: space-between;
+    align-items: center;
+  }
+  .cron-error {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  }
+  .history {
+    margin: 0 -30px;
+  }
+</style>

packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/_components/StatusRenderer.svelte

@@ -0,0 +1,27 @@
+<script>
+  import { Badge } from "@budibase/bbui"
+  export let value
+
+  $: isError = !value || value.toLowerCase() === "error"
+  $: isStoppedError = value?.toLowerCase() === "stopped_error"
+  $: isStopped = value?.toLowerCase() === "stopped" || isStoppedError
+  $: info = getInfo(isError, isStopped)
+
+  const getInfo = (error, stopped) => {
+    if (error) {
+      return { color: "red", message: "Error" }
+    } else if (stopped) {
+      return { color: "yellow", message: "Stopped" }
+    } else {
+      return { color: "green", message: "Success" }
+    }
+  }
+</script>
+
+<Badge
+  green={info.color === "green"}
+  red={info.color === "red"}
+  yellow={info.color === "yellow"}
+>
+  {info.message}
+</Badge>

packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte

@@ -1,31 +1,41 @@
 <script>
-  import { Layout, Table, Select, Pagination, Button } from "@budibase/bbui"
+  import {
+    Layout,
+    Table,
+    Select,
+    Pagination,
+    Button,
+    Body,
+    Heading,
+    Divider,
+  } from "@budibase/bbui"
   import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
-  import StatusRenderer from "./StatusRenderer.svelte"
-  import HistoryDetailsPanel from "./HistoryDetailsPanel.svelte"
+  import StatusRenderer from "./_components/StatusRenderer.svelte"
+  import HistoryDetailsPanel from "./_components/HistoryDetailsPanel.svelte"
   import { automationStore } from "builderStore"
   import { createPaginationStore } from "helpers/pagination"
-  import { onMount } from "svelte"
+  import { getContext, onDestroy, onMount } from "svelte"
   import dayjs from "dayjs"
-  import { auth, licensing, admin } from "stores/portal"
+  import { auth, licensing, admin, overview } from "stores/portal"
   import { Constants } from "@budibase/frontend-core"
+  import Portal from "svelte-portal"
 
   const ERROR = "error",
     SUCCESS = "success",
     STOPPED = "stopped"
-  export let app
-
-  $: licensePlan = $auth.user?.license?.plan
+  const sidePanel = getContext("side-panel")
 
   let pageInfo = createPaginationStore()
   let runHistory = null
-  let showPanel = false
   let selectedHistory = null
   let automationOptions = []
   let automationId = null
   let status = null
   let timeRange = null
+  let loaded = false
 
+  $: licensePlan = $auth.user?.license?.plan
+  $: app = $overview.selectedApp
   $: page = $pageInfo.page
   $: fetchLogs(automationId, status, page, timeRange)
 
@@ -47,8 +57,8 @@
 
   const runHistorySchema = {
     status: { displayName: "Status" },
-    createdAt: { displayName: "Time" },
     automationName: { displayName: "Automation" },
+    createdAt: { displayName: "Time" },
   }
 
   const customRenderers = [
@@ -56,7 +66,16 @@
     { column: "status", component: StatusRenderer },
   ]
 
-  async function fetchLogs(automationId, status, page, timeRange) {
+  async function fetchLogs(
+    automationId,
+    status,
+    page,
+    timeRange,
+    force = false
+  ) {
+    if (!force && !loaded) {
+      return
+    }
     let startDate = null
     if (timeRange) {
       const [length, units] = timeRange.split("-")
@@ -101,35 +120,53 @@
 
   function viewDetails({ detail }) {
     selectedHistory = detail
-    showPanel = true
+    sidePanel.open()
   }
 
   onMount(async () => {
     await automationStore.actions.fetch()
     const params = new URLSearchParams(window.location.search)
     const shouldOpen = params.get("open") === ERROR
-    // open with errors, open panel for latest
     if (shouldOpen) {
       status = ERROR
     }
-    await automationStore.actions.fetch()
-    await fetchLogs(null, status)
-    if (shouldOpen) {
-      viewDetails({ detail: runHistory[0] })
-    }
     automationOptions = []
     for (let automation of $automationStore.automations) {
       automationOptions.push({ value: automation._id, label: automation.name })
     }
+    await fetchLogs(automationId, status, 0, timeRange, true)
+    // Open the first automation info if one exists
+    if (shouldOpen && runHistory?.[0]) {
+      viewDetails({ detail: runHistory[0] })
+    }
+    loaded = true
+  })
+
+  onDestroy(() => {
+    sidePanel.close()
   })
 </script>
 
-<div class="root" class:panelOpen={showPanel}>
-  <Layout noPadding gap="M" alignContent="start">
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <Heading>Automation History</Heading>
+    <Body>View the automations your app has executed</Body>
+  </Layout>
+  <Divider />
+
+  <div class="controls">
     <div class="search">
       <div class="select">
         <Select
-          placeholder="All automations"
+          placeholder="All"
+          label="Status"
+          bind:value={status}
+          options={statusOptions}
+        />
+      </div>
+      <div class="select">
+        <Select
+          placeholder="All"
           label="Automation"
           bind:value={automationId}
           options={automationOptions}
@@ -153,107 +190,74 @@
           }}
         />
       </div>
-      <div class="select">
-        <Select
-          placeholder="All status"
-          label="Status"
-          bind:value={status}
-          options={statusOptions}
-        />
-      </div>
-      {#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud}
-        <div class="pro-upgrade">
-          <div class="pro-copy">Expand your automation log history</div>
-          <Button primary newStyles on:click={$licensing.goToUpgradePage()}>
-            Upgrade
-          </Button>
-        </div>
-      {/if}
     </div>
-    {#if runHistory}
-      <div>
-        <Table
-          on:click={viewDetails}
-          schema={runHistorySchema}
-          allowSelectRows={false}
-          allowEditColumns={false}
-          allowEditRows={false}
-          data={runHistory}
-          {customRenderers}
-          placeholderText="No history found"
-          border={false}
-        />
-        <div class="pagination">
-          <Pagination
-            page={$pageInfo.pageNumber}
-            hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
-            hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
-            goToPrevPage={pageInfo.prevPage}
-            goToNextPage={pageInfo.nextPage}
-          />
-        </div>
-      </div>
+    {#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud}
+      <Button secondary on:click={$licensing.goToUpgradePage()}>
+        Get more history
+      </Button>
     {/if}
-  </Layout>
-  <div class="panel" class:panelShow={showPanel}>
+  </div>
+
+  {#if runHistory}
+    <div>
+      <Table
+        on:click={viewDetails}
+        schema={runHistorySchema}
+        allowSelectRows={false}
+        allowEditColumns={false}
+        allowEditRows={false}
+        data={runHistory}
+        {customRenderers}
+        placeholderText="No history found"
+        border={false}
+      />
+      <div class="pagination">
+        <Pagination
+          page={$pageInfo.pageNumber}
+          hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
+          hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
+          goToPrevPage={pageInfo.prevPage}
+          goToNextPage={pageInfo.nextPage}
+        />
+      </div>
+    </div>
+  {/if}
+</Layout>
+
+{#if selectedHistory}
+  <Portal target="#side-panel">
     <HistoryDetailsPanel
       appId={app.devId}
       bind:history={selectedHistory}
-      close={() => {
-        showPanel = false
-      }}
+      close={sidePanel.close}
     />
-  </div>
-</div>
+  </Portal>
+{/if}
 
 <style>
-  .root {
-    display: grid;
-    grid-template-columns: 1fr;
-    height: 100%;
-    padding: var(--spectrum-alias-grid-gutter-medium)
-      var(--spectrum-alias-grid-gutter-large);
+  .controls {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-xl);
+    align-items: flex-end;
+    flex-wrap: wrap;
   }
-
   .search {
     display: flex;
     gap: var(--spacing-xl);
-    width: 100%;
-    align-items: flex-end;
+    align-items: flex-start;
+    flex: 1 0 auto;
+    max-width: 100%;
   }
-
   .select {
-    flex-basis: 150px;
+    flex: 1 1 0;
+    max-width: 150px;
+    min-width: 80px;
   }
-
   .pagination {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     margin-top: var(--spacing-xl);
   }
-
-  .panel {
-    display: none;
-    margin-top: calc(-1 * var(--spectrum-alias-grid-gutter-medium));
-  }
-
-  .panelShow {
-    display: block;
-  }
-
-  .panelOpen {
-    grid-template-columns: auto 420px;
-  }
-
-  .pro-upgrade {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    flex: 1;
-  }
-
-  .pro-copy {
-    margin-right: var(--spacing-l);
-  }
 </style>