Add FAB for adding rows and inline row creation

packages/frontend-core/src/components/grid/controls/FloatingAddRowButton.svelte

@@ -0,0 +1,28 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+  import { getContext } from "svelte"
+
+  const { dispatch } = getContext("grid")
+</script>
+
+<div class="floating-add-row" on:click={() => dispatch("add-row-inline")}>
+  <Icon name="Add" size="L" color="white" />
+</div>
+
+<style>
+  .floating-add-row {
+    position: absolute;
+    bottom: 32px;
+    left: 32px;
+    height: 50px;
+    width: 50px;
+    border-radius: 50%;
+    background: var(--spectrum-global-color-blue-400);
+    display: grid;
+    place-items: center;
+  }
+  .floating-add-row:hover {
+    background: var(--spectrum-global-color-blue-500);
+    cursor: pointer;
+  }
+</style>

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -22,6 +22,8 @@
   import HideColumnsButton from "../controls/HideColumnsButton.svelte"
   import AddRowButton from "../controls/AddRowButton.svelte"
   import RowHeightButton from "../controls/RowHeightButton.svelte"
+  import NewRowTop from "./NewRowTop.svelte"
+  import FloatingAddRowButton from "../controls/FloatingAddRowButton.svelte"
   import {
     MaxCellRenderHeight,
     MaxCellRenderWidthOverflow,
@@ -128,9 +130,13 @@
           <GridBody />
         </div>
         <div class="overlays">
+          <NewRowTop />
           <ResizeOverlay />
           <ReorderOverlay />
           <BetaButton />
+          {#if allowAddRows}
+            <FloatingAddRowButton />
+          {/if}
           <ScrollOverlay />
           <MenuOverlay />
         </div>

packages/frontend-core/src/components/grid/layout/NewRowTop.svelte

@@ -89,7 +89,7 @@
           style="flex: 0 0 {width}px"
           class:scrolled={$scrollLeft > 0}
         >
-          <GridCell width={GutterWidth} {rowHovered} {rowFocused}>
+          <GridCell width={GutterWidth} {rowHovered} rowFocused>
             <div class="gutter">
               <div class="number">1</div>
               {#if $config.allowExpandRows}
@@ -106,11 +106,10 @@
             {@const cellId = `new-${$stickyColumn.name}`}
             <DataCell
               {cellId}
+              rowFocused
               column={$stickyColumn}
               row={newRow}
-              {rowHovered}
               focused={$focusedCellId === cellId}
-              {rowFocused}
               width={$stickyColumn.width}
               {updateValue}
               rowIdx={0}