Add drawer component to holocene. Use drawer for keyboard shortcuts

src/lib/components/event/event-shortcut-keys.svelte

@@ -1,102 +1,76 @@
 <script lang="ts">
   import Shortcut from '$lib/holocene/keyboard-shortcut/shortcut.svelte';
+  import Drawer from '$lib/holocene/drawer.svelte';
+  import Button from '$lib/holocene/button.svelte';
+
   export let open = false;
   export let compact: boolean;
+  export let onOpen: () => void;
+  export let onClose: () => void;
 </script>
 
-{#if open}
-  <div class="modal">
-    <div class="overlay" />
-    <div
-      class="body"
-      tabindex="-1"
-      role="alertdialog"
-      aria-labelledby="modal-title"
-      aria-describedby="modal-description"
-    >
-      <h1 class="title">Keyboard Shortcuts</h1>
-      <div class="content flex flex-col gap-4 text-gray-500 dark:text-gray-400">
-        <div class="row">
-          <div class="flex items-center gap-2">
-            <Shortcut arrow="right" />
-            |
-            <Shortcut>L</Shortcut>
-          </div>
-          Next Page
-        </div>
-        <div class="row">
-          <div class="flex items-center gap-2">
-            <Shortcut arrow="left" />
-            |
-            <Shortcut>H</Shortcut>
-          </div>
-          Previous Page
-        </div>
-        <div class="row">
-          <div class="flex items-center gap-2">
-            <Shortcut arrow="down" />
-            |
-            <Shortcut>J</Shortcut>
-          </div>
-          Next Row
+<div class="shortcut-key-button">
+  <Button class="!py-1.5 !px-1" variant="secondary" on:click={onOpen}
+    ><span class="flex h-[24px] w-[24px] items-center justify-center text-xl"
+      >?</span
+    ></Button
+  >
+</div>
+<Drawer {open} onClick={onClose} title="Keyboard Shortcuts">
+  <div
+    class="grid grid-cols-1 gap-8 text-gray-500 dark:text-gray-400 md:grid-cols-2 xl:grid-cols-4"
+  >
+    <div class="cell">
+      Next Page
+      <div class="shortcut">
+        <Shortcut arrow="right" />|<Shortcut>L</Shortcut>
+      </div>
+    </div>
+    <div class="cell">
+      Previous Page
+      <div class="shortcut">
+        <Shortcut arrow="left" />|<Shortcut>H</Shortcut>
+      </div>
+    </div>
+    <div class="cell">
+      Next Row
+      <div class="shortcut">
+        <Shortcut arrow="down" />|<Shortcut>J</Shortcut>
+      </div>
+    </div>
+    <div class="cell">
+      Previous Row
+      <div class="shortcut">
+        <Shortcut arrow="up" />|<Shortcut>K</Shortcut>
+      </div>
+    </div>
+    {#if !compact}
+      <div class="cell">
+        Ascending Sort
+        <div class="shortcut">
+          <Shortcut>Shift</Shortcut>+<Shortcut arrow="up" />
         </div>
-        <div class="row">
-          <div class="flex items-center gap-2">
-            <Shortcut arrow="up" />
-            |
-            <Shortcut>K</Shortcut>
-          </div>
-          Previous Row
+      </div>
+      <div class="cell">
+        Descending Sort
+        <div class="shortcut">
+          <Shortcut>Shift</Shortcut>+<Shortcut arrow="down" />
         </div>
-        {#if !compact}
-          <div class="row">
-            <div class="flex items-center gap-2">
-              <Shortcut>Shift</Shortcut>
-              +
-              <Shortcut arrow="up" />
-            </div>
-            Ascending Sort
-          </div>
-          <div class="row">
-            <div class="flex items-center gap-2">
-              <Shortcut>Shift</Shortcut>
-              +
-              <Shortcut arrow="down" />
-            </div>
-            Descending Sort
-          </div>
-        {/if}
       </div>
-    </div>
+    {/if}
   </div>
-{/if}
+</Drawer>
 
 <style lang="postcss">
-  .modal {
-    @apply fixed top-0 left-0 z-50 flex h-full w-full cursor-default items-center justify-center p-8 lg:p-0;
-  }
-
-  .overlay {
-    @apply fixed h-full w-full bg-gray-900 opacity-50;
-  }
-
-  .body {
-    @apply z-50 mx-auto w-full max-w-lg overflow-y-auto rounded-lg bg-gray-500 text-gray-900 shadow-xl md:h-max;
-  }
-
-  .large {
-    @apply lg:w-1/2;
-  }
-
-  .title {
-    @apply bg-white px-8 py-4 text-2xl;
+  .shortcut-key-button {
+    @apply fixed right-16 bottom-5 z-50;
   }
 
-  .content {
-    @apply whitespace-normal p-8 text-white;
+  .cell {
+    @apply flex items-center justify-center gap-8 text-white;
   }
 
-  .row {
-    @apply flex items-center gap-4 border-b border-gray-500 py-2;
+  .shortcut {
+    @apply flex items-center gap-2;
   }
 </style>

src/lib/components/event/event-summary.svelte

@@ -10,10 +10,8 @@
   import ApiPagination from '$lib/holocene/api-pagination.svelte';
   import { groupEvents } from '$lib/models/event-groups';
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
-  import EventShortcutKeys from './event-shortcut-keys.svelte';
 
   export let compact = false;
-  let showShortcuts = false;
 
   function handleExpandChange(event: CustomEvent) {
     $expandAllEvents = event.detail.expanded;
@@ -47,17 +45,11 @@
     }
   };
 
-  const onSpace = (event: KeyboardEvent) => {
-    event.preventDefault();
-    showShortcuts = !showShortcuts;
-  };
-
   const getEvents = (items: CommonHistoryEvent[]): IterableEvent[] => {
     return compact ? groupEvents(items) : items;
   };
 </script>
 
-<EventShortcutKeys open={showShortcuts} {compact} />
 {#key [$eventFilterSort, category, $refresh]}
   <ApiPagination
     let:visibleItems
@@ -68,7 +60,6 @@
     pageSizeOptions={[]}
     {onShiftUp}
     {onShiftDown}
-    {onSpace}
     {total}
   >
     <EventSummaryTable {updating} {compact} on:expandAll={handleExpandChange}>

src/lib/holocene/drawer.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { fly } from 'svelte/transition';
+  import { clickOutside } from '$lib/holocene/outside-click';
+
+  import Icon from '$lib/holocene/icon/icon.svelte';
+
+  export let open = false;
+  export let title: string;
+  export let onClick: () => void;
+</script>
+
+{#if open}
+  <div
+    class="drawer"
+    transition:fly={{ y: 200, duration: 500 }}
+    use:clickOutside
+    on:click-outside={onClick}
+  >
+    <div class="title">
+      <div />
+      <h1>{title}</h1>
+      <button class="mx-4 cursor-pointer" on:click={onClick}>
+        <Icon name="close" />
+      </button>
+    </div>
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+{/if}
+
+<style lang="postcss">
+  .drawer {
+    @apply fixed bottom-0 left-0 right-0 z-[55] h-1/3 rounded-t-lg bg-gray-900 text-gray-100 shadow-xl;
+  }
+
+  .title {
+    @apply flex items-center justify-between py-4;
+  }
+
+  .title h1 {
+    @apply text-2xl;
+  }
+
+  .content {
+    @apply whitespace-normal p-8;
+  }
+</style>

src/lib/holocene/keyboard-shortcut/shortcut.svelte

@@ -28,6 +28,6 @@
 
 <style lang="postcss">
   .shortcut {
-    @apply inline-flex items-center rounded-lg border border-gray-200 bg-gray-100 px-2 py-1.5 text-xs font-semibold text-gray-800 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100;
+    @apply inline-flex w-auto min-w-[32px] items-center justify-center rounded-lg border-2 border-gray-100 py-1.5 px-1 text-xs font-semibold text-white dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100;
   }
 </style>

src/lib/layouts/workflow-history-layout.svelte

@@ -21,6 +21,10 @@
   import { exportHistory } from '$lib/utilities/export-history';
   import { getWorkflowStartedCompletedAndTaskFailedEvents } from '$lib/utilities/get-started-completed-and-task-failed-events';
   import ChildWorkflowsTable from '$lib/components/workflow/child-workflows-table.svelte';
+  import Button from '$lib/holocene/button.svelte';
+  import EventShortcutKeys from '$lib/components/event/event-shortcut-keys.svelte';
+
+  let showShortcuts = false;
 
   $: workflowEvents =
     getWorkflowStartedCompletedAndTaskFailedEvents($eventHistory);
@@ -140,4 +144,10 @@
     </nav>
     <slot />
   </section>
+  <EventShortcutKeys
+    open={showShortcuts}
+    compact={$eventViewType === 'compact'}
+    onOpen={() => (showShortcuts = true)}
+    onClose={() => (showShortcuts = false)}
+  />
 </section>