From 638b537792ac571fb38bb8debab9c308d2aef40f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 5 Jul 2023 14:37:43 +0100
Subject: [PATCH 01/15] Prevent adding rows when no non-autocolumn columns
 exist

---
 .../grid/controls/AddColumnButton.svelte      | 16 --------------
 .../grid/controls/AddRowButton.svelte         | 18 ----------------
 .../src/components/grid/layout/Grid.svelte    |  3 ++-
 .../components/grid/layout/GridBody.svelte    |  4 ++--
 .../src/components/grid/layout/NewRow.svelte  |  3 +--
 .../grid/layout/StickyColumn.svelte           |  5 ++---
 .../grid/overlays/KeyboardManager.svelte      |  5 +++--
 .../grid/overlays/MenuOverlay.svelte          |  3 ++-
 .../src/components/grid/stores/ui.js          | 21 +++++++++++++++++++
 9 files changed, 33 insertions(+), 45 deletions(-)
 delete mode 100644 packages/frontend-core/src/components/grid/controls/AddColumnButton.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/controls/AddRowButton.svelte

diff --git a/packages/frontend-core/src/components/grid/controls/AddColumnButton.svelte b/packages/frontend-core/src/components/grid/controls/AddColumnButton.svelte
deleted file mode 100644
index 20125bc49c..0000000000
--- a/packages/frontend-core/src/components/grid/controls/AddColumnButton.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-  import { ActionButton } from "@budibase/bbui"
-  import { getContext } from "svelte"
-
-  const { config, dispatch } = getContext("grid")
-</script>
-
-<ActionButton
-  icon="TableColumnAddRight"
-  quiet
-  size="M"
-  on:click={() => dispatch("add-column")}
-  disabled={!$config.allowSchemaChanges}
->
-  Add column
-</ActionButton>
diff --git a/packages/frontend-core/src/components/grid/controls/AddRowButton.svelte b/packages/frontend-core/src/components/grid/controls/AddRowButton.svelte
deleted file mode 100644
index 71062d6a1a..0000000000
--- a/packages/frontend-core/src/components/grid/controls/AddRowButton.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-  import { ActionButton } from "@budibase/bbui"
-  import { getContext } from "svelte"
-
-  const { dispatch, columns, stickyColumn, config, loaded } = getContext("grid")
-</script>
-
-<ActionButton
-  icon="TableRowAddBottom"
-  quiet
-  size="M"
-  on:click={() => dispatch("add-row-inline")}
-  disabled={!loaded ||
-    !$config.allowAddRows ||
-    (!$columns.length && !$stickyColumn)}
->
-  Add row
-</ActionButton>
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index 5b9bff8865..cc74c726c1 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -71,6 +71,7 @@
     contentLines,
     gridFocused,
     error,
+    canAddRows,
   } = context
 
   // Keep config store up to date with props
@@ -143,7 +144,7 @@
           <HeaderRow />
           <GridBody />
         </div>
-        {#if allowAddRows}
+        {#if $canAddRows}
           <NewRow />
         {/if}
         <div class="overlays">
diff --git a/packages/frontend-core/src/components/grid/layout/GridBody.svelte b/packages/frontend-core/src/components/grid/layout/GridBody.svelte
index b5f6c38287..e8a721b2a7 100644
--- a/packages/frontend-core/src/components/grid/layout/GridBody.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridBody.svelte
@@ -9,7 +9,7 @@
     renderedRows,
     renderedColumns,
     rowVerticalInversionIndex,
-    config,
+    canAddRows,
     hoveredRowId,
     dispatch,
     isDragging,
@@ -43,7 +43,7 @@
         invertY={idx >= $rowVerticalInversionIndex}
       />
     {/each}
-    {#if $config.allowAddRows && $renderedColumns.length}
+    {#if $canAddRows}
       <div
         class="blank"
         class:highlighted={$hoveredRowId === BlankRowID}
diff --git a/packages/frontend-core/src/components/grid/layout/NewRow.svelte b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
index f1870c2638..93d3e64d59 100644
--- a/packages/frontend-core/src/components/grid/layout/NewRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
@@ -27,7 +27,6 @@
     rowVerticalInversionIndex,
     columnHorizontalInversionIndex,
     selectedRows,
-    config,
   } = getContext("grid")
 
   let visible = false
@@ -147,7 +146,7 @@
 </script>
 
 <!-- New row FAB -->
-{#if !visible && !selectedRowCount && $config.allowAddRows && firstColumn}
+{#if !visible && !selectedRowCount}
   <div
     class="new-row-fab"
     on:click={() => dispatch("add-row-inline")}
diff --git a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
index 97b40e3e23..1fc55e612c 100644
--- a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
@@ -13,11 +13,10 @@
     rows,
     selectedRows,
     stickyColumn,
-    renderedColumns,
     renderedRows,
     focusedCellId,
     hoveredRowId,
-    config,
+    canAddRows,
     selectedCellMap,
     focusedRow,
     scrollLeft,
@@ -93,7 +92,7 @@
           {/if}
         </div>
       {/each}
-      {#if $config.allowAddRows && ($renderedColumns.length || $stickyColumn)}
+      {#if $canAddRows}
         <div
           class="row new"
           on:mouseenter={$isDragging
diff --git a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
index c4b7c598cd..df3b93d9c9 100644
--- a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
@@ -16,6 +16,7 @@
     config,
     menu,
     gridFocused,
+    canAddRows,
   } = getContext("grid")
 
   const ignoredOriginSelectors = [
@@ -45,7 +46,7 @@
         e.preventDefault()
         focusFirstCell()
       } else if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
-        if ($config.allowAddRows) {
+        if ($canAddRows) {
           e.preventDefault()
           dispatch("add-row-inline")
         }
@@ -99,7 +100,7 @@
           }
           break
         case "Enter":
-          if ($config.allowAddRows) {
+          if ($canAddRows) {
             dispatch("add-row-inline")
           }
       }
diff --git a/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte b/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
index 1aa3281fc3..56f97c48d6 100644
--- a/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
@@ -17,6 +17,7 @@
     focusedCellAPI,
     focusedRowId,
     notifications,
+    canAddRows,
   } = getContext("grid")
 
   $: style = makeStyle($menu)
@@ -93,7 +94,7 @@
       </MenuItem>
       <MenuItem
         icon="Duplicate"
-        disabled={isNewRow || !$config.allowAddRows}
+        disabled={isNewRow || !$canAddRows}
         on:click={duplicate}
       >
         Duplicate row
diff --git a/packages/frontend-core/src/components/grid/stores/ui.js b/packages/frontend-core/src/components/grid/stores/ui.js
index c88ad9499d..671addc087 100644
--- a/packages/frontend-core/src/components/grid/stores/ui.js
+++ b/packages/frontend-core/src/components/grid/stores/ui.js
@@ -70,6 +70,9 @@ export const deriveStores = context => {
     rowHeight,
     stickyColumn,
     width,
+    columns,
+    stickyColumns,
+    config,
   } = context
 
   // Derive the row that contains the selected cell
@@ -112,7 +115,25 @@ export const deriveStores = context => {
     return ($stickyColumn?.width || 0) + $width + GutterWidth < 1100
   })
 
+  // Derive if we're able to add rows
+  const canAddRows = derived(
+    [config, columns, stickyColumn],
+    ([$config, $columns, $stickyColumn]) => {
+      // Check if we have a normal column
+      let allCols = $columns || []
+      if ($stickyColumn) {
+        allCols = [...allCols, $stickyColumn]
+      }
+      const normalCols = allCols.filter(column => {
+        return column.visible && !column.schema?.autocolumn
+      })
+      // Check if we're allowed to add rows
+      return $config.allowAddRows && normalCols.length > 0
+    }
+  )
+
   return {
+    canAddRows,
     focusedRow,
     contentLines,
     compact,

From 75c4b927662bc1b274ced14a600f717affdd67b5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 5 Jul 2023 15:46:07 +0100
Subject: [PATCH 02/15] Add new tooltip which is far better

---
 packages/bbui/src/Tooltip/AbsTooltip.svelte   | 120 ++++++++++++++++++
 packages/bbui/src/index.js                    |   5 +
 .../components/grid/layout/HeaderRow.svelte   |  25 +++-
 3 files changed, 143 insertions(+), 7 deletions(-)
 create mode 100644 packages/bbui/src/Tooltip/AbsTooltip.svelte

diff --git a/packages/bbui/src/Tooltip/AbsTooltip.svelte b/packages/bbui/src/Tooltip/AbsTooltip.svelte
new file mode 100644
index 0000000000..a407c34de3
--- /dev/null
+++ b/packages/bbui/src/Tooltip/AbsTooltip.svelte
@@ -0,0 +1,120 @@
+<script context="module">
+  export const TooltipDirection = {
+    Top: "top",
+    Right: "right",
+    Bottom: "bottom",
+    Left: "left",
+  }
+
+  export const TooltipType = {
+    Default: "default",
+    Info: "info",
+    Positive: "positive",
+    Negative: "negative",
+  }
+</script>
+
+<script>
+  import Portal from "svelte-portal"
+  import { fade } from "svelte/transition"
+  import "@spectrum-css/tooltip/dist/index-vars.css"
+
+  export let direction = TooltipDirection.Top
+  export let type = TooltipType.Positive
+  export let text = ""
+
+  let wrapper
+  let visible = false
+  let left = 0
+  let top = 0
+
+  const show = () => {
+    const node = wrapper?.children?.[0]
+    if (!node) {
+      return
+    }
+    const bounds = node.getBoundingClientRect()
+
+    if (direction === TooltipDirection.Top) {
+      left = bounds.left + bounds.width / 2
+      top = bounds.top
+    } else if (direction === TooltipDirection.Right) {
+      left = bounds.left + bounds.width
+      top = bounds.top + bounds.height / 2
+    } else if (direction === TooltipDirection.Bottom) {
+      left = bounds.left + bounds.width / 2
+      top = bounds.top + bounds.height
+    } else if (direction === TooltipDirection.Left) {
+      left = bounds.left
+      top = bounds.top + bounds.height / 2
+    } else {
+      return
+    }
+
+    visible = true
+  }
+  const hide = () => {
+    visible = false
+  }
+</script>
+
+<div
+  bind:this={wrapper}
+  class="abs-tooltip"
+  on:mouseover={show}
+  on:mouseleave={hide}
+>
+  <slot />
+</div>
+{#if visible}
+  <Portal target=".spectrum">
+    <span
+      class="spectrum-Tooltip spectrum-Tooltip--{type} spectrum-Tooltip--{direction} is-open"
+      style="left:{left}px;top:{top}px;"
+      transition:fade|local={{ duration: 130 }}
+    >
+      <span class="spectrum-Tooltip-label">{text}</span>
+      <span class="spectrum-Tooltip-tip" />
+    </span>
+  </Portal>
+{/if}
+
+<style>
+  .abs-tooltip {
+    display: contents;
+  }
+  .spectrum-Tooltip {
+    position: absolute;
+    z-index: 999;
+    pointer-events: none;
+    margin: 0;
+    max-width: 280px;
+  }
+  .spectrum-Tooltip-label {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  /* Colour overrides for default type */
+  .spectrum-Tooltip--default {
+    background: var(--spectrum-global-color-gray-500);
+  }
+  .spectrum-Tooltip--default .spectrum-Tooltip-tip {
+    border-top-color: var(--spectrum-global-color-gray-500);
+  }
+
+  /* Direction styles */
+  .spectrum-Tooltip--top {
+    transform: translateX(-50%) translateY(calc(-100% - 8px));
+  }
+  .spectrum-Tooltip--right {
+    transform: translateX(8px) translateY(-50%);
+  }
+  .spectrum-Tooltip--bottom {
+    transform: translateX(-50%) translateY(8px);
+  }
+  .spectrum-Tooltip--left {
+    transform: translateX(calc(-100% - 8px)) translateY(-50%);
+  }
+</style>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index d26b938dd5..cbe9ddbff5 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -36,6 +36,11 @@ export { default as Layout } from "./Layout/Layout.svelte"
 export { default as Page } from "./Layout/Page.svelte"
 export { default as Link } from "./Link/Link.svelte"
 export { default as Tooltip } from "./Tooltip/Tooltip.svelte"
+export {
+  default as AbsTooltip,
+  TooltipDirection,
+  TooltipType,
+} from "./Tooltip/AbsTooltip.svelte"
 export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte"
 export { default as Menu } from "./Menu/Menu.svelte"
 export { default as MenuSection } from "./Menu/Section.svelte"
diff --git a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
index f31cc198fb..de73281bd5 100644
--- a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
@@ -2,7 +2,12 @@
   import { getContext } from "svelte"
   import GridScrollWrapper from "./GridScrollWrapper.svelte"
   import HeaderCell from "../cells/HeaderCell.svelte"
-  import { Icon } from "@budibase/bbui"
+  import {
+    Icon,
+    AbsTooltip,
+    TooltipType,
+    TooltipDirection,
+  } from "@budibase/bbui"
 
   const {
     renderedColumns,
@@ -30,13 +35,19 @@
     </div>
   </GridScrollWrapper>
   {#if $config.allowSchemaChanges}
-    <div
-      class="add"
-      style="left:{left}px"
-      on:click={() => dispatch("add-column")}
+    <AbsTooltip
+      text="Click here to create your first column"
+      direction={TooltipDirection.Bottom}
+      type={TooltipType.Info}
     >
-      <Icon name="Add" />
-    </div>
+      <div
+        class="add"
+        style="left:{left}px"
+        on:click={() => dispatch("add-column")}
+      >
+        <Icon name="Add" />
+      </div>
+    </AbsTooltip>
   {/if}
 </div>
 

From 35150af784eee218455f1ce36993932b6348bb78 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 7 Jul 2023 12:09:23 +0100
Subject: [PATCH 03/15] Update multiple usages of tooltips to use new tooltip

---
 packages/bbui/src/Button/Button.svelte        | 99 +++++++++----------
 packages/bbui/src/Popover/Popover.svelte      |  2 +-
 packages/bbui/src/Tooltip/AbsTooltip.svelte   | 56 ++++++-----
 packages/bbui/src/index.js                    |  2 +-
 .../src/components/deploy/AppActions.svelte   | 22 +++--
 .../components/portal/page/SideNavItem.svelte | 21 ----
 .../app/[application]/settings/_layout.svelte | 22 +++--
 .../_components/ActionsRenderer.svelte        | 22 +++--
 .../components/grid/layout/HeaderRow.svelte   |  4 +-
 9 files changed, 118 insertions(+), 132 deletions(-)

diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte
index 91affdb6c7..9e49d84d44 100644
--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@@ -1,6 +1,7 @@
 <script>
   import "@spectrum-css/button/dist/index-vars.css"
-  import Tooltip from "../Tooltip/Tooltip.svelte"
+  import AbsTooltip from "../Tooltip/AbsTooltip.svelte"
+  import { createEventDispatcher } from "svelte"
 
   export let type
   export let disabled = false
@@ -16,48 +17,53 @@
   export let tooltip = undefined
   export let newStyles = true
   export let id
+
+  const dispatch = createEventDispatcher()
 </script>
 
-<button
-  {id}
-  {type}
-  class:spectrum-Button--cta={cta}
-  class:spectrum-Button--primary={primary}
-  class:spectrum-Button--secondary={secondary}
-  class:spectrum-Button--warning={warning}
-  class:spectrum-Button--overBackground={overBackground}
-  class:spectrum-Button--quiet={quiet}
-  class:new-styles={newStyles}
-  class:active
-  class:disabled
-  class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
-  {disabled}
-  on:click|preventDefault
->
-  {#if icon}
-    <svg
-      class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
-      focusable="false"
-      aria-hidden="true"
-      aria-label={icon}
-    >
-      <use xlink:href="#spectrum-icon-18-{icon}" />
-    </svg>
-  {/if}
-  {#if $$slots}
-    <span class="spectrum-Button-label"><slot /></span>
-  {/if}
-  {#if tooltip}
-    <div class="tooltip">
-      <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
-    </div>
-  {/if}
-</button>
+<AbsTooltip text={tooltip}>
+  <button
+    {id}
+    {type}
+    class:spectrum-Button--cta={cta}
+    class:spectrum-Button--primary={primary}
+    class:spectrum-Button--secondary={secondary}
+    class:spectrum-Button--warning={warning}
+    class:spectrum-Button--overBackground={overBackground}
+    class:spectrum-Button--quiet={quiet}
+    class:new-styles={newStyles}
+    class:active
+    class:is-disabled={disabled}
+    class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
+    on:click|preventDefault={() => {
+      if (!disabled) {
+        dispatch("click")
+      }
+    }}
+  >
+    {#if icon}
+      <svg
+        class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
+        focusable="false"
+        aria-hidden="true"
+        aria-label={icon}
+      >
+        <use xlink:href="#spectrum-icon-18-{icon}" />
+      </svg>
+    {/if}
+    {#if $$slots}
+      <span class="spectrum-Button-label"><slot /></span>
+    {/if}
+  </button>
+</AbsTooltip>
 
 <style>
   button {
     position: relative;
   }
+  button.is-disabled {
+    cursor: default;
+  }
   .spectrum-Button-label {
     white-space: nowrap;
     overflow: hidden;
@@ -66,23 +72,6 @@
   .active {
     color: var(--spectrum-global-color-blue-600) !important;
   }
-  .tooltip {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    z-index: 100;
-    width: 160px;
-    text-align: center;
-    transform: translateX(-50%);
-    left: 50%;
-    top: 100%;
-    opacity: 0;
-    transition: opacity 130ms ease-out;
-    pointer-events: none;
-  }
-  button:hover .tooltip {
-    opacity: 1;
-  }
   .spectrum-Button--primary.new-styles {
     background: var(--spectrum-global-color-gray-800);
     border-color: transparent;
@@ -96,10 +85,10 @@
     border-color: transparent;
     color: var(--spectrum-global-color-gray-900);
   }
-  .spectrum-Button--secondary.new-styles:not(.disabled):hover {
+  .spectrum-Button--secondary.new-styles:not(.is-disabled):hover {
     background: var(--spectrum-global-color-gray-300);
   }
-  .spectrum-Button--secondary.new-styles.disabled {
+  .spectrum-Button--secondary.new-styles.is-disabled {
     color: var(--spectrum-global-color-gray-500);
   }
 </style>
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 20207a85da..9f951a6a7e 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -90,6 +90,6 @@
   .spectrum-Popover {
     min-width: var(--spectrum-global-dimension-size-2000);
     border-color: var(--spectrum-global-color-gray-300);
-    overflow: visible;
+    overflow: auto;
   }
 </style>
diff --git a/packages/bbui/src/Tooltip/AbsTooltip.svelte b/packages/bbui/src/Tooltip/AbsTooltip.svelte
index a407c34de3..78a4d5f609 100644
--- a/packages/bbui/src/Tooltip/AbsTooltip.svelte
+++ b/packages/bbui/src/Tooltip/AbsTooltip.svelte
@@ -1,5 +1,5 @@
 <script context="module">
-  export const TooltipDirection = {
+  export const TooltipPosition = {
     Top: "top",
     Right: "right",
     Bottom: "bottom",
@@ -19,8 +19,8 @@
   import { fade } from "svelte/transition"
   import "@spectrum-css/tooltip/dist/index-vars.css"
 
-  export let direction = TooltipDirection.Top
-  export let type = TooltipType.Positive
+  export let position = TooltipPosition.Top
+  export let type = TooltipType.Default
   export let text = ""
 
   let wrapper
@@ -35,16 +35,16 @@
     }
     const bounds = node.getBoundingClientRect()
 
-    if (direction === TooltipDirection.Top) {
+    if (position === TooltipPosition.Top) {
       left = bounds.left + bounds.width / 2
       top = bounds.top
-    } else if (direction === TooltipDirection.Right) {
+    } else if (position === TooltipPosition.Right) {
       left = bounds.left + bounds.width
       top = bounds.top + bounds.height / 2
-    } else if (direction === TooltipDirection.Bottom) {
+    } else if (position === TooltipPosition.Bottom) {
       left = bounds.left + bounds.width / 2
       top = bounds.top + bounds.height
-    } else if (direction === TooltipDirection.Left) {
+    } else if (position === TooltipPosition.Left) {
       left = bounds.left
       top = bounds.top + bounds.height / 2
     } else {
@@ -58,25 +58,29 @@
   }
 </script>
 
-<div
-  bind:this={wrapper}
-  class="abs-tooltip"
-  on:mouseover={show}
-  on:mouseleave={hide}
->
+{#if text}
+  <div
+    bind:this={wrapper}
+    class="abs-tooltip"
+    on:mouseover={show}
+    on:mouseleave={hide}
+  >
+    <slot />
+  </div>
+  {#if visible}
+    <Portal target=".spectrum">
+      <span
+        class="spectrum-Tooltip spectrum-Tooltip--{type} spectrum-Tooltip--{position} is-open"
+        style="left:{left}px;top:{top}px;"
+        transition:fade|local={{ duration: 130 }}
+      >
+        <span class="spectrum-Tooltip-label">{text}</span>
+        <span class="spectrum-Tooltip-tip" />
+      </span>
+    </Portal>
+  {/if}
+{:else}
   <slot />
-</div>
-{#if visible}
-  <Portal target=".spectrum">
-    <span
-      class="spectrum-Tooltip spectrum-Tooltip--{type} spectrum-Tooltip--{direction} is-open"
-      style="left:{left}px;top:{top}px;"
-      transition:fade|local={{ duration: 130 }}
-    >
-      <span class="spectrum-Tooltip-label">{text}</span>
-      <span class="spectrum-Tooltip-tip" />
-    </span>
-  </Portal>
 {/if}
 
 <style>
@@ -85,7 +89,7 @@
   }
   .spectrum-Tooltip {
     position: absolute;
-    z-index: 999;
+    z-index: 9999;
     pointer-events: none;
     margin: 0;
     max-width: 280px;
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 7140120bc6..4513ab0e6c 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -38,7 +38,7 @@ export { default as Link } from "./Link/Link.svelte"
 export { default as Tooltip } from "./Tooltip/Tooltip.svelte"
 export {
   default as AbsTooltip,
-  TooltipDirection,
+  TooltipPosition,
   TooltipType,
 } from "./Tooltip/AbsTooltip.svelte"
 export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte"
diff --git a/packages/builder/src/components/deploy/AppActions.svelte b/packages/builder/src/components/deploy/AppActions.svelte
index 3c308618c3..4b366f2412 100644
--- a/packages/builder/src/components/deploy/AppActions.svelte
+++ b/packages/builder/src/components/deploy/AppActions.svelte
@@ -10,6 +10,7 @@
     Link,
     Modal,
     StatusLight,
+    AbsTooltip,
   } from "@budibase/bbui"
   import RevertModal from "components/deploy/RevertModal.svelte"
   import VersionModal from "components/deploy/VersionModal.svelte"
@@ -250,15 +251,20 @@
                     <Link quiet on:click={unpublishApp}>Unpublish</Link>
                   </span>
                   <span class="revert-link">
-                    <Link
-                      disabled={!$isOnlyUser}
-                      quiet
-                      secondary
-                      on:click={revertApp}
-                      tooltip="Unavailable - another user is editing this app"
+                    <AbsTooltip
+                      text={$isOnlyUser
+                        ? null
+                        : "Unavailable - another user is editing this app"}
                     >
-                      Revert
-                    </Link>
+                      <Link
+                        disabled={!$isOnlyUser}
+                        quiet
+                        secondary
+                        on:click={revertApp}
+                      >
+                        Revert
+                      </Link>
+                    </AbsTooltip>
                   </span>
                 {:else}
                   <span class="status-text unpublished">Not published</span>
diff --git a/packages/builder/src/components/portal/page/SideNavItem.svelte b/packages/builder/src/components/portal/page/SideNavItem.svelte
index 11c1102050..8bf5248fb3 100644
--- a/packages/builder/src/components/portal/page/SideNavItem.svelte
+++ b/packages/builder/src/components/portal/page/SideNavItem.svelte
@@ -1,11 +1,8 @@
 <script>
-  import { Tooltip } from "@budibase/bbui"
-
   export let text
   export let url
   export let active = false
   export let disabled = false
-  export let tooltip = null
 </script>
 
 <div class="side-nav-item">
@@ -18,11 +15,6 @@
       {text || ""}
     </div>
   {/if}
-  {#if tooltip}
-    <div class="tooltip">
-      <Tooltip textWrapping direction="right" text={tooltip} />
-    </div>
-  {/if}
 </div>
 
 <style>
@@ -45,17 +37,4 @@
     pointer-events: none;
     color: var(--spectrum-global-color-gray-500) !important;
   }
-  .tooltip {
-    position: absolute;
-    transform: translateY(-50%);
-    left: 100%;
-    top: 50%;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 130ms ease-out;
-    z-index: 100;
-  }
-  .side-nav-item:hover .tooltip {
-    opacity: 1;
-  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
index de65333f6f..7020e8fc11 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Content, SideNav, SideNavItem } from "components/portal/page"
-  import { Page, Layout } from "@budibase/bbui"
+  import { Page, Layout, AbsTooltip, TooltipPosition } from "@budibase/bbui"
   import { url, isActive } from "@roxi/routify"
   import DeleteModal from "components/deploy/DeleteModal.svelte"
   import { isOnlyUser } from "builderStore"
@@ -45,16 +45,20 @@
             active={$isActive("./version")}
           />
           <div class="delete-action">
-            <SideNavItem
-              text="Delete app"
-              on:click={() => {
-                deleteModal.show()
-              }}
-              disabled={!$isOnlyUser}
-              tooltip={$isOnlyUser
+            <AbsTooltip
+              position={TooltipPosition.Right}
+              text={$isOnlyUser
                 ? null
                 : "Unavailable - another user is editing this app"}
-            />
+            >
+              <SideNavItem
+                text="Delete app"
+                disabled={!$isOnlyUser}
+                on:click={() => {
+                  deleteModal.show()
+                }}
+              />
+            </AbsTooltip>
           </div>
         </SideNav>
         <slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/ActionsRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/ActionsRenderer.svelte
index ea6809514c..93f0f518ad 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/ActionsRenderer.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/ActionsRenderer.svelte
@@ -6,6 +6,8 @@
     Heading,
     Body,
     Modal,
+    AbsTooltip,
+    TooltipPosition,
   } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import CreateRestoreModal from "./CreateRestoreModal.svelte"
@@ -46,16 +48,18 @@
     </div>
 
     {#if row.type !== "restore"}
-      <MenuItem
-        on:click={restoreDialog.show}
-        icon="Revert"
-        disabled={!$isOnlyUser}
-        tooltip={$isOnlyUser
-          ? null
-          : "Unavailable - another user is editing this app"}
+      <AbsTooltip
+        position={TooltipPosition.Left}
+        text="Unavailable - another user is editing this app"
       >
-        Restore
-      </MenuItem>
+        <MenuItem
+          on:click={restoreDialog.show}
+          icon="Revert"
+          disabled={!$isOnlyUser}
+        >
+          Restore
+        </MenuItem>
+      </AbsTooltip>
       <MenuItem on:click={deleteDialog.show} icon="Delete">Delete</MenuItem>
       <MenuItem on:click={downloadExport} icon="Download">Download</MenuItem>
     {/if}
diff --git a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
index de73281bd5..f5e6365b88 100644
--- a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
@@ -6,7 +6,7 @@
     Icon,
     AbsTooltip,
     TooltipType,
-    TooltipDirection,
+    TooltipPosition,
   } from "@budibase/bbui"
 
   const {
@@ -37,7 +37,7 @@
   {#if $config.allowSchemaChanges}
     <AbsTooltip
       text="Click here to create your first column"
-      direction={TooltipDirection.Bottom}
+      position={TooltipPosition.Bottom}
       type={TooltipType.Info}
     >
       <div

From 4129f166e6766d4ff17091cd44498b02d6fc065a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 7 Jul 2023 12:11:19 +0100
Subject: [PATCH 04/15] Add fixed setting to allow tooltip to be permanently
 rendered

---
 packages/bbui/src/Tooltip/AbsTooltip.svelte | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/bbui/src/Tooltip/AbsTooltip.svelte b/packages/bbui/src/Tooltip/AbsTooltip.svelte
index 78a4d5f609..3e8caa389e 100644
--- a/packages/bbui/src/Tooltip/AbsTooltip.svelte
+++ b/packages/bbui/src/Tooltip/AbsTooltip.svelte
@@ -22,12 +22,15 @@
   export let position = TooltipPosition.Top
   export let type = TooltipType.Default
   export let text = ""
+  export let fixed = false
 
   let wrapper
-  let visible = false
+  let hovered = false
   let left = 0
   let top = 0
 
+  $: visible = hovered || fixed
+
   const show = () => {
     const node = wrapper?.children?.[0]
     if (!node) {
@@ -51,10 +54,10 @@
       return
     }
 
-    visible = true
+    hovered = true
   }
   const hide = () => {
-    visible = false
+    hovered = false
   }
 </script>
 

From 99ef4f2992d6065bf6a72f252fa7c11b790cf9dd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 7 Jul 2023 14:46:41 +0100
Subject: [PATCH 05/15] Add new temporary tooltip component. Improve tooltips
 and user avatars

---
 packages/bbui/src/Tooltip/AbsTooltip.svelte   | 67 ++++++++++------
 packages/bbui/src/Tooltip/TempTooltip.svelte  | 39 +++++++++
 packages/bbui/src/index.js                    |  1 +
 .../src/components/common/NavItem.svelte      | 80 +++++++++++--------
 .../_components/UserAvatars.svelte            | 14 +++-
 .../app/[application]/settings/_layout.svelte |  2 +-
 .../src/components/UserAvatar.svelte          | 53 ++----------
 .../components/grid/layout/HeaderRow.svelte   | 33 ++++----
 .../src/components/grid/stores/columns.js     | 16 ++++
 .../src/components/grid/stores/ui.js          | 18 +----
 10 files changed, 186 insertions(+), 137 deletions(-)
 create mode 100644 packages/bbui/src/Tooltip/TempTooltip.svelte

diff --git a/packages/bbui/src/Tooltip/AbsTooltip.svelte b/packages/bbui/src/Tooltip/AbsTooltip.svelte
index 3e8caa389e..c6963d0870 100644
--- a/packages/bbui/src/Tooltip/AbsTooltip.svelte
+++ b/packages/bbui/src/Tooltip/AbsTooltip.svelte
@@ -5,7 +5,6 @@
     Bottom: "bottom",
     Left: "left",
   }
-
   export const TooltipType = {
     Default: "default",
     Info: "info",
@@ -23,14 +22,27 @@
   export let type = TooltipType.Default
   export let text = ""
   export let fixed = false
+  export let color = null
 
   let wrapper
   let hovered = false
   let left = 0
   let top = 0
+  let visible = false
+  let timeout
 
-  $: visible = hovered || fixed
+  $: {
+    if (hovered || fixed) {
+      timeout = setTimeout(show, 200)
+    } else {
+      clearTimeout(timeout)
+      hide()
+    }
+  }
+  $: tooltipStyle = color ? `background:${color};` : null
+  $: tipStyle = color ? `border-top-color:${color};` : null
 
+  // Computes the position of the tooltip then shows it
   const show = () => {
     const node = wrapper?.children?.[0]
     if (!node) {
@@ -38,6 +50,7 @@
     }
     const bounds = node.getBoundingClientRect()
 
+    // Determine where to render tooltip based on position prop
     if (position === TooltipPosition.Top) {
       left = bounds.left + bounds.width / 2
       top = bounds.top
@@ -54,36 +67,36 @@
       return
     }
 
-    hovered = true
+    visible = true
   }
+
+  // Hides the tooltip
   const hide = () => {
-    hovered = false
+    visible = false
   }
 </script>
 
-{#if text}
-  <div
-    bind:this={wrapper}
-    class="abs-tooltip"
-    on:mouseover={show}
-    on:mouseleave={hide}
-  >
-    <slot />
-  </div>
-  {#if visible}
-    <Portal target=".spectrum">
-      <span
-        class="spectrum-Tooltip spectrum-Tooltip--{type} spectrum-Tooltip--{position} is-open"
-        style="left:{left}px;top:{top}px;"
-        transition:fade|local={{ duration: 130 }}
-      >
-        <span class="spectrum-Tooltip-label">{text}</span>
-        <span class="spectrum-Tooltip-tip" />
-      </span>
-    </Portal>
-  {/if}
-{:else}
+<div
+  bind:this={wrapper}
+  class="abs-tooltip"
+  on:focus={null}
+  on:mouseover={() => (hovered = true)}
+  on:mouseleave={() => (hovered = false)}
+>
   <slot />
+</div>
+
+{#if visible && text}
+  <Portal target=".spectrum">
+    <span
+      class="spectrum-Tooltip spectrum-Tooltip--{type} spectrum-Tooltip--{position} is-open"
+      style={`left:${left}px;top:${top}px;${tooltipStyle}`}
+      transition:fade|local={{ duration: 130 }}
+    >
+      <span class="spectrum-Tooltip-label">{text}</span>
+      <span class="spectrum-Tooltip-tip" style={tipStyle} />
+    </span>
+  </Portal>
 {/if}
 
 <style>
@@ -101,6 +114,8 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    font-size: 12px;
+    font-weight: 600;
   }
 
   /* Colour overrides for default type */
diff --git a/packages/bbui/src/Tooltip/TempTooltip.svelte b/packages/bbui/src/Tooltip/TempTooltip.svelte
new file mode 100644
index 0000000000..0d590b1ec6
--- /dev/null
+++ b/packages/bbui/src/Tooltip/TempTooltip.svelte
@@ -0,0 +1,39 @@
+<script>
+  import AbsTooltip from "./AbsTooltip.svelte"
+  import { onDestroy } from "svelte"
+
+  export let text = null
+  export let condition = true
+  export let duration = 3000
+  export let position
+  export let type
+
+  let visible = false
+  let timeout
+
+  $: {
+    if (condition) {
+      showTooltip()
+    } else {
+      hideTooltip()
+    }
+  }
+
+  const showTooltip = () => {
+    visible = true
+    timeout = setTimeout(() => {
+      visible = false
+    }, duration)
+  }
+
+  const hideTooltip = () => {
+    visible = false
+    clearTimeout(timeout)
+  }
+
+  onDestroy(hideTooltip)
+</script>
+
+<AbsTooltip {position} {type} text={visible ? text : null} fixed={visible}>
+  <slot />
+</AbsTooltip>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 4513ab0e6c..97762d2b3a 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -36,6 +36,7 @@ export { default as Layout } from "./Layout/Layout.svelte"
 export { default as Page } from "./Layout/Page.svelte"
 export { default as Link } from "./Link/Link.svelte"
 export { default as Tooltip } from "./Tooltip/Tooltip.svelte"
+export { default as TempTooltip } from "./Tooltip/TempTooltip.svelte"
 export {
   default as AbsTooltip,
   TooltipPosition,
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 467827dbf6..5309bc0d7d 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -2,6 +2,7 @@
   import { Icon } from "@budibase/bbui"
   import { createEventDispatcher, getContext } from "svelte"
   import { helpers } from "@budibase/shared-core"
+  import { UserAvatar } from "@budibase/frontend-core"
 
   export let icon
   export let withArrow = false
@@ -98,21 +99,29 @@
         <Icon color={iconColor} size="S" name={icon} />
       </div>
     {/if}
-    <div class="text" title={showTooltip ? text : null}>{text}</div>
+    <div class="text" title={showTooltip ? text : null}>
+      {text}
+      {#if selectedBy}
+        <UserAvatar user={selectedBy} size="XS" />
+      {/if}
+    </div>
+
     {#if withActions}
       <div class="actions">
         <slot />
       </div>
     {/if}
+
     {#if $$slots.right}
       <div class="right">
         <slot name="right" />
       </div>
     {/if}
   </div>
-  {#if selectedBy}
-    <div class="selected-by-label">{helpers.getUserLabel(selectedBy)}</div>
-  {/if}
+
+  <!--{#if selectedBy}-->
+  <!--  <div class="selected-by-label">{helpers.getUserLabel(selectedBy)}</div>-->
+  <!--{/if}-->
 </div>
 
 <style>
@@ -159,36 +168,36 @@
     padding-left: var(--spacing-l);
   }
 
-  /* Selected user styles */
-  .nav-item.selectedBy:after {
-    content: "";
-    position: absolute;
-    width: calc(100% - 4px);
-    height: 28px;
-    border: 2px solid var(--selected-by-color);
-    left: 0;
-    top: 0;
-    border-radius: 2px;
-    pointer-events: none;
-  }
-  .selected-by-label {
-    position: absolute;
-    top: 0;
-    right: 0;
-    background: var(--selected-by-color);
-    padding: 2px 4px;
-    font-size: 12px;
-    color: white;
-    transform: translateY(calc(1px - 100%));
-    border-top-right-radius: 2px;
-    border-top-left-radius: 2px;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 130ms ease-out;
-  }
-  .nav-item.selectedBy:hover .selected-by-label {
-    opacity: 1;
-  }
+  /*!* Selected user styles *!*/
+  /*.nav-item.selectedBy:after {*/
+  /*  content: "";*/
+  /*  position: absolute;*/
+  /*  width: calc(100% - 4px);*/
+  /*  height: 28px;*/
+  /*  border: 2px solid var(--selected-by-color);*/
+  /*  left: 0;*/
+  /*  top: 0;*/
+  /*  border-radius: 2px;*/
+  /*  pointer-events: none;*/
+  /*}*/
+  /*.selected-by-label {*/
+  /*  position: absolute;*/
+  /*  top: 0;*/
+  /*  right: 0;*/
+  /*  background: var(--selected-by-color);*/
+  /*  padding: 2px 4px;*/
+  /*  font-size: 12px;*/
+  /*  color: white;*/
+  /*  transform: translateY(calc(1px - 100%));*/
+  /*  border-top-right-radius: 2px;*/
+  /*  border-top-left-radius: 2px;*/
+  /*  pointer-events: none;*/
+  /*  opacity: 0;*/
+  /*  transition: opacity 130ms ease-out;*/
+  /*}*/
+  /*.nav-item.selectedBy:hover .selected-by-label {*/
+  /*  opacity: 1;*/
+  /*}*/
 
   /* Needed to fully display the actions icon */
   .nav-item.scrollable .nav-item-content {
@@ -245,6 +254,9 @@
     color: var(--spectrum-global-color-gray-900);
     order: 2;
     width: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
   }
   .scrollable .text {
     flex: 0 0 auto;
diff --git a/packages/builder/src/pages/builder/app/[application]/_components/UserAvatars.svelte b/packages/builder/src/pages/builder/app/[application]/_components/UserAvatars.svelte
index 0cd8c5bf6b..dc4938b9bd 100644
--- a/packages/builder/src/pages/builder/app/[application]/_components/UserAvatars.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_components/UserAvatars.svelte
@@ -1,5 +1,6 @@
 <script>
   import { UserAvatar } from "@budibase/frontend-core"
+  import { TooltipPosition } from "@budibase/bbui"
 
   export let users = []
 
@@ -15,14 +16,21 @@
 </script>
 
 <div class="avatars">
-  {#each uniqueUsers as user}
-    <UserAvatar {user} tooltipDirection="bottom" />
+  {#each uniqueUsers as user, idx}
+    <span style="z-index:{100 - idx};">
+      <UserAvatar {user} tooltipPosition={TooltipPosition.Bottom} />
+    </span>
   {/each}
 </div>
 
 <style>
   .avatars {
     display: flex;
-    gap: 4px;
+  }
+  .avatars :global(> *:not(:first-child)) {
+    margin-left: -12px;
+  }
+  .avatars :global(.spectrum-Avatar) {
+    border: 2px solid var(--background);
   }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
index 7020e8fc11..7063a271be 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
@@ -46,7 +46,7 @@
           />
           <div class="delete-action">
             <AbsTooltip
-              position={TooltipPosition.Right}
+              position={TooltipPosition.Bottom}
               text={$isOnlyUser
                 ? null
                 : "Unavailable - another user is editing this app"}
diff --git a/packages/frontend-core/src/components/UserAvatar.svelte b/packages/frontend-core/src/components/UserAvatar.svelte
index 89379e0ed6..97a06aa569 100644
--- a/packages/frontend-core/src/components/UserAvatar.svelte
+++ b/packages/frontend-core/src/components/UserAvatar.svelte
@@ -1,60 +1,23 @@
 <script>
-  import { Avatar, Tooltip } from "@budibase/bbui"
+  import { Avatar, AbsTooltip, TooltipPosition } from "@budibase/bbui"
   import { helpers } from "@budibase/shared-core"
 
   export let user
   export let size
-  export let tooltipDirection = "top"
+  export let tooltipPosition = TooltipPosition.Top
   export let showTooltip = true
-
-  $: tooltipStyle = getTooltipStyle(tooltipDirection)
-
-  const getTooltipStyle = direction => {
-    if (!direction) {
-      return ""
-    }
-    if (direction === "top") {
-      return "transform: translateX(-50%) translateY(-100%);"
-    } else if (direction === "bottom") {
-      return "transform: translateX(-50%) translateY(100%);"
-    }
-  }
 </script>
 
 {#if user}
-  <div class="user-avatar">
+  <AbsTooltip
+    text={showTooltip ? helpers.getUserLabel(user) : null}
+    position={tooltipPosition}
+    color={helpers.getUserColor(user)}
+  >
     <Avatar
       {size}
       initials={helpers.getUserInitials(user)}
       color={helpers.getUserColor(user)}
     />
-    {#if showTooltip}
-      <div class="tooltip" style={tooltipStyle}>
-        <Tooltip
-          direction={tooltipDirection}
-          textWrapping
-          text={helpers.getUserLabel(user)}
-          size="S"
-        />
-      </div>
-    {/if}
-  </div>
+  </AbsTooltip>
 {/if}
-
-<style>
-  .user-avatar {
-    position: relative;
-  }
-  .tooltip {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    white-space: nowrap;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 130ms ease-out;
-  }
-  .user-avatar:hover .tooltip {
-    opacity: 1;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
index f5e6365b88..71bde9d3d8 100644
--- a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
@@ -4,7 +4,7 @@
   import HeaderCell from "../cells/HeaderCell.svelte"
   import {
     Icon,
-    AbsTooltip,
+    TempTooltip,
     TooltipType,
     TooltipPosition,
   } from "@budibase/bbui"
@@ -16,10 +16,11 @@
     hiddenColumnsWidth,
     width,
     config,
+    hasNonAutoColumn,
   } = getContext("grid")
 
   $: columnsWidth = $renderedColumns.reduce(
-    (total, col) => (total += col.width),
+    (total, col) => total + col.width,
     0
   )
   $: end = $hiddenColumnsWidth + columnsWidth - 1 - $scroll.left
@@ -35,19 +36,23 @@
     </div>
   </GridScrollWrapper>
   {#if $config.allowSchemaChanges}
-    <AbsTooltip
-      text="Click here to create your first column"
-      position={TooltipPosition.Bottom}
-      type={TooltipType.Info}
-    >
-      <div
-        class="add"
-        style="left:{left}px"
-        on:click={() => dispatch("add-column")}
+    {#key left}
+      <TempTooltip
+        text="Click here to create your first column"
+        position={TooltipPosition.Top}
+        type={TooltipType.Info}
+        duration={3000}
+        condition={!$hasNonAutoColumn}
       >
-        <Icon name="Add" />
-      </div>
-    </AbsTooltip>
+        <div
+          class="add"
+          style="left:{left}px"
+          on:click={() => dispatch("add-column")}
+        >
+          <Icon name="Add" />
+        </div>
+      </TempTooltip>
+    {/key}
   {/if}
 </div>
 
diff --git a/packages/frontend-core/src/components/grid/stores/columns.js b/packages/frontend-core/src/components/grid/stores/columns.js
index 21458eaefb..6ca8704c1c 100644
--- a/packages/frontend-core/src/components/grid/stores/columns.js
+++ b/packages/frontend-core/src/components/grid/stores/columns.js
@@ -83,6 +83,21 @@ export const deriveStores = context => {
     await saveChanges()
   }
 
+  // Derive if we have any normal columns
+  const hasNonAutoColumn = derived(
+    [columns, stickyColumn],
+    ([$columns, $stickyColumn]) => {
+      let allCols = $columns || []
+      if ($stickyColumn) {
+        allCols = [...allCols, $stickyColumn]
+      }
+      const normalCols = allCols.filter(column => {
+        return !column.schema?.autocolumn
+      })
+      return normalCols.length > 0
+    }
+  )
+
   // Persists column changes by saving metadata against table schema
   const saveChanges = async () => {
     const $columns = get(columns)
@@ -128,6 +143,7 @@ export const deriveStores = context => {
   }
 
   return {
+    hasNonAutoColumn,
     columns: {
       ...columns,
       actions: {
diff --git a/packages/frontend-core/src/components/grid/stores/ui.js b/packages/frontend-core/src/components/grid/stores/ui.js
index 671addc087..2f16265273 100644
--- a/packages/frontend-core/src/components/grid/stores/ui.js
+++ b/packages/frontend-core/src/components/grid/stores/ui.js
@@ -70,8 +70,7 @@ export const deriveStores = context => {
     rowHeight,
     stickyColumn,
     width,
-    columns,
-    stickyColumns,
+    hasNonAutoColumn,
     config,
   } = context
 
@@ -117,18 +116,9 @@ export const deriveStores = context => {
 
   // Derive if we're able to add rows
   const canAddRows = derived(
-    [config, columns, stickyColumn],
-    ([$config, $columns, $stickyColumn]) => {
-      // Check if we have a normal column
-      let allCols = $columns || []
-      if ($stickyColumn) {
-        allCols = [...allCols, $stickyColumn]
-      }
-      const normalCols = allCols.filter(column => {
-        return column.visible && !column.schema?.autocolumn
-      })
-      // Check if we're allowed to add rows
-      return $config.allowAddRows && normalCols.length > 0
+    [config, hasNonAutoColumn],
+    ([$config, $hasNonAutoColumn]) => {
+      return $config.allowAddRows && $hasNonAutoColumn
     }
   )
 

From 62e452dfe70981748d9cd59b376d356b347ba970 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 7 Jul 2023 15:45:18 +0100
Subject: [PATCH 06/15] Update user avatars and selection state for
 collaboration

---
 packages/builder/src/builderStore/index.js    |  8 +++-
 .../src/components/common/NavItem.svelte      |  6 ++-
 .../_components/UserAvatars.svelte            | 48 +++++++++++++++----
 .../builder/app/[application]/_layout.svelte  |  2 +-
 .../src/components/UserAvatar.svelte          |  2 +-
 5 files changed, 52 insertions(+), 14 deletions(-)

diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js
index 16a87810ad..2ca8057b48 100644
--- a/packages/builder/src/builderStore/index.js
+++ b/packages/builder/src/builderStore/index.js
@@ -127,8 +127,12 @@ export const selectedAutomation = derived(automationStore, $automationStore => {
 export const userSelectedResourceMap = derived(userStore, $userStore => {
   let map = {}
   $userStore.forEach(user => {
-    if (user.builderMetadata?.selectedResourceId) {
-      map[user.builderMetadata?.selectedResourceId] = user
+    const resource = user.builderMetadata?.selectedResourceId
+    if (resource) {
+      if (!map[resource]) {
+        map[resource] = []
+      }
+      map[resource].push(user)
     }
   })
   return map
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 5309bc0d7d..468f60b9f7 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -3,6 +3,7 @@
   import { createEventDispatcher, getContext } from "svelte"
   import { helpers } from "@budibase/shared-core"
   import { UserAvatar } from "@budibase/frontend-core"
+  import UserAvatars from "../../pages/builder/app/[application]/_components/UserAvatars.svelte"
 
   export let icon
   export let withArrow = false
@@ -102,7 +103,7 @@
     <div class="text" title={showTooltip ? text : null}>
       {text}
       {#if selectedBy}
-        <UserAvatar user={selectedBy} size="XS" />
+        <UserAvatars size="XS" users={selectedBy} />
       {/if}
     </div>
 
@@ -145,13 +146,16 @@
   }
   .nav-item.highlighted {
     background-color: var(--spectrum-global-color-gray-200);
+    --avatars-background: var(--spectrum-global-color-gray-200);
   }
   .nav-item.selected {
     background-color: var(--spectrum-global-color-gray-300);
+    --avatars-background: var(--spectrum-global-color-gray-300);
     color: var(--ink);
   }
   .nav-item:hover {
     background-color: var(--spectrum-global-color-gray-300);
+    --avatars-background: var(--spectrum-global-color-gray-300);
   }
   .nav-item:hover .actions {
     visibility: visible;
diff --git a/packages/builder/src/pages/builder/app/[application]/_components/UserAvatars.svelte b/packages/builder/src/pages/builder/app/[application]/_components/UserAvatars.svelte
index dc4938b9bd..9e62951d53 100644
--- a/packages/builder/src/pages/builder/app/[application]/_components/UserAvatars.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_components/UserAvatars.svelte
@@ -1,24 +1,54 @@
 <script>
   import { UserAvatar } from "@budibase/frontend-core"
-  import { TooltipPosition } from "@budibase/bbui"
+  import { TooltipPosition, Avatar } from "@budibase/bbui"
 
   export let users = []
+  export let order = "ltr"
+  export let size = "S"
 
-  $: uniqueUsers = unique(users)
+  $: uniqueUsers = unique(users, order)
+  $: avatars = getAvatars(uniqueUsers, order)
 
   const unique = users => {
     let uniqueUsers = {}
     users?.forEach(user => {
       uniqueUsers[user.email] = user
     })
-    return Object.values(uniqueUsers)
+    return Object.values(uniqueUsers).concat(Object.values(uniqueUsers))
+  }
+
+  const getAvatars = (users, order) => {
+    const avatars = users.slice(0, 3)
+    if (users.length > 3) {
+      const overflow = {
+        _id: "overflow",
+        label: `+${users.length - 3}`,
+      }
+      if (order === "ltr") {
+        avatars.push(overflow)
+      } else {
+        avatars.unshift(overflow)
+      }
+    }
+    return avatars.map((user, idx) => ({
+      ...user,
+      zIndex: order === "ltr" ? idx : uniqueUsers.length - idx,
+    }))
   }
 </script>
 
 <div class="avatars">
-  {#each uniqueUsers as user, idx}
-    <span style="z-index:{100 - idx};">
-      <UserAvatar {user} tooltipPosition={TooltipPosition.Bottom} />
+  {#each avatars as user}
+    <span style="z-index:{user.zIndex};">
+      {#if user._id === "overflow"}
+        <Avatar
+          {size}
+          initials={user.label}
+          color="var(--spectrum-global-color-gray-500)"
+        />
+      {:else}
+        <UserAvatar {size} {user} tooltipPosition={TooltipPosition.Bottom} />
+      {/if}
     </span>
   {/each}
 </div>
@@ -27,10 +57,10 @@
   .avatars {
     display: flex;
   }
-  .avatars :global(> *:not(:first-child)) {
-    margin-left: -12px;
+  span:not(:first-of-type) {
+    margin-left: -6px;
   }
   .avatars :global(.spectrum-Avatar) {
-    border: 2px solid var(--background);
+    border: 2px solid var(--avatars-background, var(--background));
   }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index e6c79335a9..8586a300fc 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -172,7 +172,7 @@
       </div>
       <div class="toprightnav">
         <span>
-          <UserAvatars users={$userStore} />
+          <UserAvatars users={$userStore} order="rtl" />
         </span>
         <AppActions {application} {loaded} />
       </div>
diff --git a/packages/frontend-core/src/components/UserAvatar.svelte b/packages/frontend-core/src/components/UserAvatar.svelte
index 97a06aa569..bc630ed473 100644
--- a/packages/frontend-core/src/components/UserAvatar.svelte
+++ b/packages/frontend-core/src/components/UserAvatar.svelte
@@ -3,7 +3,7 @@
   import { helpers } from "@budibase/shared-core"
 
   export let user
-  export let size
+  export let size = "S"
   export let tooltipPosition = TooltipPosition.Top
   export let showTooltip = true
 </script>

From 06876b0ea2a79a3660e99bce83df4d10abddde06 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 7 Jul 2023 16:03:25 +0100
Subject: [PATCH 07/15] Improve tooltips more by ensuring they follow the
 target smoothly

---
 packages/bbui/src/Tooltip/AbsTooltip.svelte   | 25 ++++++++++++++-----
 .../components/grid/layout/HeaderRow.svelte   | 17 +++++--------
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/packages/bbui/src/Tooltip/AbsTooltip.svelte b/packages/bbui/src/Tooltip/AbsTooltip.svelte
index c6963d0870..3a2c035615 100644
--- a/packages/bbui/src/Tooltip/AbsTooltip.svelte
+++ b/packages/bbui/src/Tooltip/AbsTooltip.svelte
@@ -17,6 +17,7 @@
   import Portal from "svelte-portal"
   import { fade } from "svelte/transition"
   import "@spectrum-css/tooltip/dist/index-vars.css"
+  import { onDestroy } from "svelte"
 
   export let position = TooltipPosition.Top
   export let type = TooltipType.Default
@@ -30,20 +31,21 @@
   let top = 0
   let visible = false
   let timeout
+  let interval
 
   $: {
     if (hovered || fixed) {
+      // Debounce showing by 200ms to avoid flashing tooltip
       timeout = setTimeout(show, 200)
     } else {
-      clearTimeout(timeout)
       hide()
     }
   }
   $: tooltipStyle = color ? `background:${color};` : null
   $: tipStyle = color ? `border-top-color:${color};` : null
 
-  // Computes the position of the tooltip then shows it
-  const show = () => {
+  // Computes the position of the tooltip
+  const updateTooltipPosition = () => {
     const node = wrapper?.children?.[0]
     if (!node) {
       return
@@ -63,17 +65,27 @@
     } else if (position === TooltipPosition.Left) {
       left = bounds.left
       top = bounds.top + bounds.height / 2
-    } else {
-      return
     }
+  }
 
+  // Computes the position of the tooltip then shows it.
+  // We set up a poll to frequently update the position of the tooltip in case
+  // the target moves.
+  const show = () => {
+    updateTooltipPosition()
+    interval = setInterval(updateTooltipPosition, 100)
     visible = true
   }
 
   // Hides the tooltip
   const hide = () => {
+    clearTimeout(timeout)
+    clearInterval(interval)
     visible = false
   }
+
+  // Ensure we clean up interval and timeout
+  onDestroy(hide)
 </script>
 
 <div
@@ -109,6 +121,7 @@
     pointer-events: none;
     margin: 0;
     max-width: 280px;
+    transition: top 130ms ease-out, left 130ms ease-out;
   }
   .spectrum-Tooltip-label {
     text-overflow: ellipsis;
@@ -126,7 +139,7 @@
     border-top-color: var(--spectrum-global-color-gray-500);
   }
 
-  /* Direction styles */
+  /* Position styles */
   .spectrum-Tooltip--top {
     transform: translateX(-50%) translateY(calc(-100% - 8px));
   }
diff --git a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
index 71bde9d3d8..f39e679da4 100644
--- a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
@@ -2,12 +2,7 @@
   import { getContext } from "svelte"
   import GridScrollWrapper from "./GridScrollWrapper.svelte"
   import HeaderCell from "../cells/HeaderCell.svelte"
-  import {
-    Icon,
-    TempTooltip,
-    TooltipType,
-    TooltipPosition,
-  } from "@budibase/bbui"
+  import { Icon, TempTooltip, TooltipType } from "@budibase/bbui"
 
   const {
     renderedColumns,
@@ -17,6 +12,8 @@
     width,
     config,
     hasNonAutoColumn,
+    tableId,
+    loading,
   } = getContext("grid")
 
   $: columnsWidth = $renderedColumns.reduce(
@@ -36,17 +33,15 @@
     </div>
   </GridScrollWrapper>
   {#if $config.allowSchemaChanges}
-    {#key left}
+    {#key $tableId}
       <TempTooltip
         text="Click here to create your first column"
-        position={TooltipPosition.Top}
         type={TooltipType.Info}
-        duration={3000}
-        condition={!$hasNonAutoColumn}
+        condition={!$hasNonAutoColumn && !$loading}
       >
         <div
           class="add"
-          style="left:{left}px"
+          style="left:{left}px;"
           on:click={() => dispatch("add-column")}
         >
           <Icon name="Add" />

From ce90f9cd257e4534744e18dcffec60b331121e42 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 7 Jul 2023 16:05:23 +0100
Subject: [PATCH 08/15] Improve position of user avatar tooltips

---
 .../app/[application]/_components/UserAvatars.svelte       | 3 ++-
 .../src/pages/builder/app/[application]/_layout.svelte     | 7 ++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/_components/UserAvatars.svelte b/packages/builder/src/pages/builder/app/[application]/_components/UserAvatars.svelte
index 9e62951d53..7e9682dacc 100644
--- a/packages/builder/src/pages/builder/app/[application]/_components/UserAvatars.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_components/UserAvatars.svelte
@@ -5,6 +5,7 @@
   export let users = []
   export let order = "ltr"
   export let size = "S"
+  export let tooltipPosition = TooltipPosition.Top
 
   $: uniqueUsers = unique(users, order)
   $: avatars = getAvatars(uniqueUsers, order)
@@ -47,7 +48,7 @@
           color="var(--spectrum-global-color-gray-500)"
         />
       {:else}
-        <UserAvatar {size} {user} tooltipPosition={TooltipPosition.Bottom} />
+        <UserAvatar {size} {user} {tooltipPosition} />
       {/if}
     </span>
   {/each}
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index 8586a300fc..8e637d6fa2 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -15,6 +15,7 @@
     Heading,
     Modal,
     notifications,
+    TooltipPosition,
   } from "@budibase/bbui"
   import AppActions from "components/deploy/AppActions.svelte"
   import { API } from "api"
@@ -172,7 +173,11 @@
       </div>
       <div class="toprightnav">
         <span>
-          <UserAvatars users={$userStore} order="rtl" />
+          <UserAvatars
+            users={$userStore}
+            order="rtl"
+            tooltipPosition={TooltipPosition.Bottom}
+          />
         </span>
         <AppActions {application} {loaded} />
       </div>

From fb35d52ac98ee880a41e79f6e5c929ff5c898a49 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 10 Jul 2023 11:23:29 +0100
Subject: [PATCH 09/15] Add temporary tooltip to help creating the first row in
 grids

---
 packages/bbui/src/Tooltip/AbsTooltip.svelte   |  8 +++--
 .../src/components/grid/layout/NewRow.svelte  | 31 ++++++++++++-------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/packages/bbui/src/Tooltip/AbsTooltip.svelte b/packages/bbui/src/Tooltip/AbsTooltip.svelte
index 3a2c035615..9be7251445 100644
--- a/packages/bbui/src/Tooltip/AbsTooltip.svelte
+++ b/packages/bbui/src/Tooltip/AbsTooltip.svelte
@@ -27,8 +27,8 @@
 
   let wrapper
   let hovered = false
-  let left = 0
-  let top = 0
+  let left
+  let top
   let visible = false
   let timeout
   let interval
@@ -48,6 +48,8 @@
   const updateTooltipPosition = () => {
     const node = wrapper?.children?.[0]
     if (!node) {
+      left = null
+      top = null
       return
     }
     const bounds = node.getBoundingClientRect()
@@ -98,7 +100,7 @@
   <slot />
 </div>
 
-{#if visible && text}
+{#if visible && text && left != null && top != null}
   <Portal target=".spectrum">
     <span
       class="spectrum-Tooltip spectrum-Tooltip--{type} spectrum-Tooltip--{position} is-open"
diff --git a/packages/frontend-core/src/components/grid/layout/NewRow.svelte b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
index 93d3e64d59..f301e20b3d 100644
--- a/packages/frontend-core/src/components/grid/layout/NewRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
@@ -1,6 +1,6 @@
 <script>
   import { getContext, onDestroy, onMount, tick } from "svelte"
-  import { Icon, Button } from "@budibase/bbui"
+  import { Icon, Button, TempTooltip, TooltipType } from "@budibase/bbui"
   import GridScrollWrapper from "./GridScrollWrapper.svelte"
   import DataCell from "../cells/DataCell.svelte"
   import { fade } from "svelte/transition"
@@ -27,6 +27,8 @@
     rowVerticalInversionIndex,
     columnHorizontalInversionIndex,
     selectedRows,
+    config,
+    canAddRows,
   } = getContext("grid")
 
   let visible = false
@@ -39,6 +41,7 @@
   $: $tableId, (visible = false)
   $: invertY = shouldInvertY(offset, $rowVerticalInversionIndex, $renderedRows)
   $: selectedRowCount = Object.values($selectedRows).length
+  $: hasNoRows = !$rows.length
 
   const shouldInvertY = (offset, inversionIndex, rows) => {
     if (offset === 0) {
@@ -146,16 +149,22 @@
 </script>
 
 <!-- New row FAB -->
-{#if !visible && !selectedRowCount}
-  <div
-    class="new-row-fab"
-    on:click={() => dispatch("add-row-inline")}
-    transition:fade|local={{ duration: 130 }}
-    class:offset={!$stickyColumn}
-  >
-    <Icon name="Add" size="S" />
-  </div>
-{/if}
+<TempTooltip
+  text="Click here to create your first row"
+  condition={hasNoRows}
+  type={TooltipType.Info}
+>
+  {#if !visible && !selectedRowCount && $canAddRows}
+    <div
+      class="new-row-fab"
+      on:click={() => dispatch("add-row-inline")}
+      transition:fade|local={{ duration: 130 }}
+      class:offset={!$stickyColumn}
+    >
+      <Icon name="Add" size="S" />
+    </div>
+  {/if}
+</TempTooltip>
 
 <!-- Only show new row functionality if we have any columns -->
 {#if visible}

From ca375b7c39efe3d5a987ccbfbfd2b4e118bb1130 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 10 Jul 2023 11:51:07 +0100
Subject: [PATCH 10/15] Lint

---
 .../src/components/common/NavItem.svelte      | 36 -------------------
 .../src/components/grid/layout/NewRow.svelte  |  4 +--
 2 files changed, 2 insertions(+), 38 deletions(-)

diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 468f60b9f7..6f87c8c362 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -2,7 +2,6 @@
   import { Icon } from "@budibase/bbui"
   import { createEventDispatcher, getContext } from "svelte"
   import { helpers } from "@budibase/shared-core"
-  import { UserAvatar } from "@budibase/frontend-core"
   import UserAvatars from "../../pages/builder/app/[application]/_components/UserAvatars.svelte"
 
   export let icon
@@ -119,10 +118,6 @@
       </div>
     {/if}
   </div>
-
-  <!--{#if selectedBy}-->
-  <!--  <div class="selected-by-label">{helpers.getUserLabel(selectedBy)}</div>-->
-  <!--{/if}-->
 </div>
 
 <style>
@@ -172,37 +167,6 @@
     padding-left: var(--spacing-l);
   }
 
-  /*!* Selected user styles *!*/
-  /*.nav-item.selectedBy:after {*/
-  /*  content: "";*/
-  /*  position: absolute;*/
-  /*  width: calc(100% - 4px);*/
-  /*  height: 28px;*/
-  /*  border: 2px solid var(--selected-by-color);*/
-  /*  left: 0;*/
-  /*  top: 0;*/
-  /*  border-radius: 2px;*/
-  /*  pointer-events: none;*/
-  /*}*/
-  /*.selected-by-label {*/
-  /*  position: absolute;*/
-  /*  top: 0;*/
-  /*  right: 0;*/
-  /*  background: var(--selected-by-color);*/
-  /*  padding: 2px 4px;*/
-  /*  font-size: 12px;*/
-  /*  color: white;*/
-  /*  transform: translateY(calc(1px - 100%));*/
-  /*  border-top-right-radius: 2px;*/
-  /*  border-top-left-radius: 2px;*/
-  /*  pointer-events: none;*/
-  /*  opacity: 0;*/
-  /*  transition: opacity 130ms ease-out;*/
-  /*}*/
-  /*.nav-item.selectedBy:hover .selected-by-label {*/
-  /*  opacity: 1;*/
-  /*}*/
-
   /* Needed to fully display the actions icon */
   .nav-item.scrollable .nav-item-content {
     padding-right: 1px;
diff --git a/packages/frontend-core/src/components/grid/layout/NewRow.svelte b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
index f301e20b3d..dc6e0cb971 100644
--- a/packages/frontend-core/src/components/grid/layout/NewRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
@@ -27,7 +27,7 @@
     rowVerticalInversionIndex,
     columnHorizontalInversionIndex,
     selectedRows,
-    config,
+    loading,
     canAddRows,
   } = getContext("grid")
 
@@ -151,7 +151,7 @@
 <!-- New row FAB -->
 <TempTooltip
   text="Click here to create your first row"
-  condition={hasNoRows}
+  condition={hasNoRows && !$loading}
   type={TooltipType.Info}
 >
   {#if !visible && !selectedRowCount && $canAddRows}

From dcf392fc94b4403f2568d35986bf95ddc47098a8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 10 Jul 2023 11:51:32 +0100
Subject: [PATCH 11/15] Remove testing stuff

---
 .../builder/app/[application]/_components/UserAvatars.svelte    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/_components/UserAvatars.svelte b/packages/builder/src/pages/builder/app/[application]/_components/UserAvatars.svelte
index 7e9682dacc..2399c659cc 100644
--- a/packages/builder/src/pages/builder/app/[application]/_components/UserAvatars.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_components/UserAvatars.svelte
@@ -15,7 +15,7 @@
     users?.forEach(user => {
       uniqueUsers[user.email] = user
     })
-    return Object.values(uniqueUsers).concat(Object.values(uniqueUsers))
+    return Object.values(uniqueUsers)
   }
 
   const getAvatars = (users, order) => {

From d98c0bdcea30b8963dbfa93ec87ce0d9e45bbee6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 10 Jul 2023 13:53:37 +0100
Subject: [PATCH 12/15] Add option to open app preview in new tab

---
 .../_components/PreviewOverlay.svelte         |  1 +
 .../components/devtools/DevToolsHeader.svelte | 42 +++++++++++++------
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte b/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte
index d069d1b4c7..eedff6c2a7 100644
--- a/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte
@@ -15,6 +15,7 @@
   }
 
   onMount(() => {
+    window.isBuilder = true
     window.closePreview = () => {
       store.update(state => ({
         ...state,
diff --git a/packages/client/src/components/devtools/DevToolsHeader.svelte b/packages/client/src/components/devtools/DevToolsHeader.svelte
index 5cbbf80767..24b2d11c72 100644
--- a/packages/client/src/components/devtools/DevToolsHeader.svelte
+++ b/packages/client/src/components/devtools/DevToolsHeader.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Heading, Select, ActionButton } from "@budibase/bbui"
-  import { devToolsStore } from "../../stores"
+  import { devToolsStore, appStore } from "../../stores"
   import { getContext } from "svelte"
 
   const context = getContext("context")
@@ -27,6 +27,8 @@
       value: "ADMIN",
     },
   ]
+
+  const isFullScreen = window.parent.isBuilder
 </script>
 
 <div class="dev-preview-header" class:mobile={$context.device.mobile}>
@@ -45,27 +47,41 @@
       icon="Code"
       on:click={() => devToolsStore.actions.setVisible(!$devToolsStore.visible)}
     >
-      {$devToolsStore.visible ? "Close" : "Open"} DevTools
+      DevTools
+    </ActionButton>
+  {/if}
+  {#if window.parent.isBuilder}
+    <ActionButton
+      quiet
+      icon="LinkOut"
+      on:click={() => {
+        window.parent.closePreview?.()
+        window.open(`/${$appStore.appId}`, "_blank")
+      }}
+    >
+      Fullscreen
+    </ActionButton>
+    <ActionButton
+      quiet
+      icon="Close"
+      on:click={() => window.parent.closePreview?.()}
+    >
+      Close
     </ActionButton>
   {/if}
-  <ActionButton
-    quiet
-    icon="Close"
-    on:click={() => window.parent.closePreview?.()}
-  >
-    Close preview
-  </ActionButton>
 </div>
 
 <style>
   .dev-preview-header {
     flex: 0 0 60px;
-    display: grid;
-    align-items: center;
     background-color: black;
     padding: 0 var(--spacing-xl);
-    grid-template-columns: 1fr auto auto auto;
-    grid-gap: var(--spacing-xl);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+  .dev-preview-header :global(.spectrum-Heading) {
+    flex: 1 1 auto;
   }
   .dev-preview-header.mobile {
     grid-template-columns: 1fr auto auto;

From dbc8c742d087aeb5a915771c2563a78f21937c25 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 10 Jul 2023 14:35:28 +0100
Subject: [PATCH 13/15] Lint

---
 packages/client/src/components/devtools/DevToolsHeader.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/client/src/components/devtools/DevToolsHeader.svelte b/packages/client/src/components/devtools/DevToolsHeader.svelte
index 24b2d11c72..a60cec8ce1 100644
--- a/packages/client/src/components/devtools/DevToolsHeader.svelte
+++ b/packages/client/src/components/devtools/DevToolsHeader.svelte
@@ -27,8 +27,6 @@
       value: "ADMIN",
     },
   ]
-
-  const isFullScreen = window.parent.isBuilder
 </script>
 
 <div class="dev-preview-header" class:mobile={$context.device.mobile}>

From 4948086952fd47ec9f1fbdbd5fbb2c251b1923b3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 10 Jul 2023 14:50:07 +0100
Subject: [PATCH 14/15] Fix issue in develop

---
 .../src/components/common/bindings/BindingPanel.svelte        | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 6e09985440..f7b0ef5b54 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -208,7 +208,9 @@
                     <div class="syntax-error">
                       Current Handlebars syntax is invalid, please check the
                       guide
-                      <a href="https://handlebarsjs.com/guide/" target="_blank">here</a>
+                      <a href="https://handlebarsjs.com/guide/" target="_blank">
+                        here
+                      </a>
                       for more details.
                     </div>
                   {:else}

From d92589156c2b71dae4eb2005162b3b0ef7a74ec1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 11 Jul 2023 14:14:00 +0100
Subject: [PATCH 15/15] Make new datasource page and new screen page consistent
 with each other

---
 .../builder/app/[application]/data/new.svelte | 22 +++++++------------
 .../app/[application]/design/new.svelte       |  8 +++----
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/data/new.svelte b/packages/builder/src/pages/builder/app/[application]/data/new.svelte
index c5090229b3..b2aca33c6a 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/new.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/new.svelte
@@ -7,7 +7,7 @@
   } from "stores/backend"
 
   import { hasData } from "stores/selectors"
-  import { notifications, Body } from "@budibase/bbui"
+  import { notifications, Body, Icon, AbsTooltip } from "@budibase/bbui"
   import { params, goto } from "@roxi/routify"
   import CreateExternalDatasourceModal from "./_components/CreateExternalDatasourceModal/index.svelte"
   import CreateInternalTableModal from "./_components/CreateInternalTableModal.svelte"
@@ -15,7 +15,6 @@
   import IntegrationIcon from "components/backend/DatasourceNavigator/IntegrationIcon.svelte"
   import CreationPage from "components/common/CreationPage.svelte"
   import ICONS from "components/backend/DatasourceNavigator/icons/index.js"
-  import FontAwesomeIcon from "components/common/FontAwesomeIcon.svelte"
 
   let internalTableModal
   let externalDatasourceModal
@@ -54,13 +53,9 @@
 >
   <div class="subHeading">
     <Body>Get started with our Budibase DB</Body>
-    <div
-      role="tooltip"
-      title="Budibase DB is built with CouchDB"
-      class="tooltip"
-    >
-      <FontAwesomeIcon name="fa-solid fa-circle-info" />
-    </div>
+    <AbsTooltip text="Budibase DB is built with CouchDB">
+      <Icon name="Info" size="S" />
+    </AbsTooltip>
   </div>
 
   <div class="options">
@@ -116,13 +111,12 @@
     display: flex;
     align-items: center;
     margin-top: 12px;
-    margin-bottom: 24px;
+    margin-bottom: 36px;
+    gap: 8px;
   }
-
-  .tooltip {
-    margin-left: 6px;
+  .subHeading :global(p) {
+    color: var(--spectrum-global-color-gray-600) !important;
   }
-
   .options {
     width: 100%;
     display: grid;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/new.svelte b/packages/builder/src/pages/builder/app/[application]/design/new.svelte
index 13eaaeaf7e..ab9c8eb91d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/new.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/new.svelte
@@ -19,7 +19,7 @@
     heading={hasScreens ? "Create new screen" : "Create your first screen"}
   >
     <div class="subHeading">
-      <Body size="L">Start from scratch or create screens from your data</Body>
+      <Body>Start from scratch or create screens from your data</Body>
     </div>
 
     <div class="cards">
@@ -56,18 +56,18 @@
   .subHeading :global(p) {
     text-align: center;
     margin-top: 12px;
-    margin-bottom: 24px;
-    color: var(--grey-6);
+    margin-bottom: 36px;
+    color: var(--spectrum-global-color-gray-600);
   }
 
   .cards {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
+    gap: 24px;
   }
 
   .card {
-    margin: 12px;
     max-width: 235px;
     transition: filter 150ms;
   }