Add keyboard shortcut indicators for adding new rows

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

@@ -0,0 +1,53 @@
+<script>
+  export let keybind
+  export let padded = false
+  export let overlay = false
+
+  $: parsedKeys = parseKeys(keybind)
+
+  const parseKeys = keybind => {
+    return keybind?.split("+").map(key => {
+      if (key.toLowerCase() === "ctrl") {
+        return navigator.platform.startsWith("Mac") ? "⌘" : key
+      } else if (key.toLowerCase() === "enter") {
+        return "↵"
+      }
+      return key
+    })
+  }
+</script>
+
+<div class="keys" class:padded class:overlay>
+  {#each parsedKeys as key}
+    <div class="key">
+      {key}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .keys {
+    display: flex;
+    flex-direction: row;
+    gap: 3px;
+  }
+  .keys.padded {
+    padding: var(--cell-padding);
+  }
+  .key {
+    padding: 2px 6px;
+    font-size: 12px;
+    font-weight: 600;
+    background-color: var(--spectrum-global-color-gray-200);
+    color: var(--spectrum-global-color-gray-700);
+    border-radius: 4px;
+    text-align: center;
+    display: grid;
+    place-items: center;
+    text-transform: uppercase;
+  }
+  .overlay .key {
+    background: rgba(255, 255, 255, 0.2);
+    color: #eee;
+  }
+</style>

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

@@ -7,6 +7,7 @@
   import { GutterWidth } from "../lib/constants"
   import { NewRowID } from "../lib/constants"
   import GutterCell from "../cells/GutterCell.svelte"
+  import KeyboardShortcut from "./KeyboardShortcut.svelte"
 
   const {
     hoveredRowId,
@@ -209,8 +210,18 @@
       </GridScrollWrapper>
     </div>
     <div class="buttons" transition:fade={{ duration: 130 }}>
-      <Button size="M" cta on:click={addRow} disabled={isAdding}>Save</Button>
-      <Button size="M" secondary newStyles on:click={clear}>Cancel</Button>
+      <Button size="M" cta on:click={addRow} disabled={isAdding}>
+        <div class="button-with-keys">
+          Save
+          <KeyboardShortcut overlay keybind="Ctrl+Enter" />
+        </div>
+      </Button>
+      <Button size="M" secondary newStyles on:click={clear}>
+        <div class="button-with-keys">
+          Cancel
+          <KeyboardShortcut overlay keybind="Esc" />
+        </div>
+      </Button>
     </div>
   </div>
 {/if}
@@ -261,6 +272,14 @@
     top: calc(var(--row-height) + var(--offset) + 24px);
     left: var(--gutter-width);
   }
+  .button-with-keys {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+  }
+  .button-with-keys :global(> div) {
+    padding-top: 2px;
+  }
 
   /* Sticky column styles */
   .sticky-column {

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

@@ -7,6 +7,7 @@
   import HeaderCell from "../cells/HeaderCell.svelte"
   import { GutterWidth, BlankRowID } from "../lib/constants"
   import GutterCell from "../cells/GutterCell.svelte"
+  import KeyboardShortcut from "./KeyboardShortcut.svelte"
 
   const {
     rows,
@@ -105,7 +106,9 @@
             <GridCell
               width={$stickyColumn.width}
               highlighted={$hoveredRowId === BlankRowID}
-            />
+            >
+              <KeyboardShortcut padded keybind="Ctrl+Enter" />
+            </GridCell>
           {/if}
         </div>
       {/if}