Added basic grouping to automations side panel

packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte

@@ -1,6 +1,6 @@
 <script>
   import CreateAutomationModal from "./CreateAutomationModal.svelte"
-  import { Modal, notifications, Layout } from "@budibase/bbui"
+  import { Modal, notifications, Layout, Icon } from "@budibase/bbui"
   import NavHeader from "components/common/NavHeader.svelte"
   import { onMount } from "svelte"
   import {
@@ -30,6 +30,18 @@
       return lowerA > lowerB ? 1 : -1
     })
 
+  $: groupedAutomations = filteredAutomations.reduce((acc, auto) => {
+    acc[auto.definition.trigger.event] = acc[auto.definition.trigger.event] || {
+      icon: auto.definition.trigger.icon,
+      name: auto.definition.trigger.name,
+      entries: [],
+    }
+    acc[auto.definition.trigger.event].entries.push(auto)
+    return acc
+  }, {})
+
+  $: console.log("grouped ", Object.entries(groupedAutomations))
+
   $: showNoResults = searchString && !filteredAutomations.length
 
   onMount(async () => {
@@ -55,8 +67,15 @@
     />
   </div>
   <div class="side-bar-nav">
-    {#each filteredAutomations as automation}
+    {#each Object.values(groupedAutomations || {}) as triggerGroup}
+      <div class="nav-group">
+        <div class="nav-group-header" title={triggerGroup?.name.toUpperCase()}>
+          {triggerGroup?.name.toUpperCase()}
+        </div>
+        {#each triggerGroup.entries as automation}
           <NavItem
+            icon={triggerGroup.icon}
+            iconColor={"var(--spectrum-global-color-gray-900)"}
             text={automation.name}
             selected={automation._id === selectedAutomationId}
             on:click={() => selectAutomation(automation._id)}
@@ -66,6 +85,8 @@
             <EditAutomationPopover {automation} />
           </NavItem>
         {/each}
+      </div>
+    {/each}
 
     {#if showNoResults}
       <Layout paddingY="none" paddingX="L">
@@ -82,6 +103,17 @@
 </Modal>
 
 <style>
+  .nav-group {
+    padding-top: var(--spacing-l);
+  }
+  .nav-group-header {
+    color: var(--spectrum-global-color-gray-600);
+    padding: 0px calc(var(--spacing-l) + 4px);
+    padding-bottom: var(--spacing-l);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   .side-bar {
     flex: 0 0 260px;
     display: flex;
@@ -104,7 +136,7 @@
     justify-content: flex-start;
     align-items: center;
     gap: var(--spacing-l);
-    padding: 0 var(--spacing-l);
+    padding: 0 calc(var(--spacing-l) + 4px);
   }
   .side-bar-nav {
     flex: 1 1 auto;