Use common dropdown components in more places to reduce duplication

packages/builder/src/components/common/Dropdowns/DropdownItem.svelte

@@ -4,11 +4,11 @@
   export let subtitle
 </script>
 
-<div class="dropdown-item" on:click>
+<div class="dropdown-item" on:click class:big={subtitle != null}>
   {#if icon}<i class={icon} />{/if}
   <div class="content">
     <div class="title">{title}</div>
-    {#if subtitle}
+    {#if subtitle != null}
       <div class="subtitle">{subtitle}</div>
     {/if}
   </div>
@@ -21,6 +21,9 @@
     justify-content: flex-start;
     align-items: center;
     gap: var(--spacing-m);
+    padding: var(--spacing-xs) var(--spacing-l);
+  }
+  .dropdown-item.big {
     padding: var(--spacing-s) var(--spacing-l);
   }
   .dropdown-item:hover {

packages/builder/src/components/userInterface/ComponentSelectionList.svelte

@@ -3,7 +3,7 @@
   import { store } from "builderStore"
   import components from "./temporaryPanelStructure.js"
   import { DropdownMenu } from "@budibase/bbui"
-  import Tab from "./ItemTab/Tab.svelte"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   const categories = components.categories
   let selectedIndex
@@ -50,9 +50,16 @@
   bind:this={popover}
   {anchor}
   align="left">
-  <Tab
+  <DropdownContainer>
-    list={categories[selectedIndex]}
+    {#each categories[selectedIndex].children as item}
-    on:selectItem={(e) => onComponentChosen(e.detail)} />
+      {#if !item.showOnPages || item.showOnPages.includes($store.currentPageName)}
+        <DropdownItem
+          icon={item.icon}
+          title={item.name}
+          on:click={() => onComponentChosen(item)} />
+      {/if}
+    {/each}
+  </DropdownContainer>
 </DropdownMenu>
 
 <style>

packages/builder/src/components/userInterface/ItemTab/Item.svelte

@@ -1,47 +0,0 @@
-<script>
-  export let item
-</script>
-
-<div data-cy={item.name} class="item-item" on:click>
-  <div class="item-icon"><i class={item.icon} /></div>
-  <div class="item-text">
-    <div class="item-name">{item.name}</div>
-  </div>
-</div>
-
-<style>
-  .item-item {
-    display: flex;
-    flex-direction: row;
-    cursor: pointer;
-    justify-content: flex-start;
-    align-items: center;
-    border-radius: 5px;
-    color: var(--grey-7);
-  }
-
-  .item-item:hover {
-    color: var(--ink);
-  }
-
-  .item-icon {
-    border-radius: 3px;
-    display: flex;
-  }
-
-  .item-text {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .item-name {
-    font-size: var(--font-size-xs);
-    font-weight: 500;
-    text-align: center;
-  }
-
-  i {
-    font-size: 16px;
-    margin-right: 8px;
-  }
-</style>

packages/builder/src/components/userInterface/ItemTab/Tab.svelte

@@ -1,64 +0,0 @@
-<script>
-  import { createEventDispatcher } from "svelte"
-  import { store } from "builderStore"
-  import Item from "./Item.svelte"
-
-  const dispatch = createEventDispatcher()
-
-  export let list
-
-  let category = list
-
-  const handleClick = (item) => {
-    if (item.children && item.children.length > 0) {
-      list = item
-    } else {
-      dispatch("selectItem", item)
-    }
-  }
-
-  const goBack = () => {
-    list = category
-  }
-</script>
-
-{#if !list.isCategory}
-  <button class="back-button" on:click={goBack}>Back</button>
-{/if}
-<div class="list">
-  {#each list.children as item}
-    {#if !item.showOnPages || item.showOnPages.includes($store.currentPageName)}
-      <Item {item} on:click={() => handleClick(item)} />
-    {/if}
-  {/each}
-</div>
-
-<style>
-  .back-button {
-    grid-column: 1 / span 2;
-    font-size: 14px;
-    text-align: center;
-    height: 36px;
-    border-radius: 5px;
-    border: solid 1px var(--grey-3);
-    background: white;
-    cursor: pointer;
-    font-weight: 500;
-    font-family: Inter;
-    transition: all 0.3ms;
-  }
-  .back-button:hover {
-    background: var(--grey-1);
-  }
-
-  .list {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-s);
-    flex-wrap: wrap;
-    padding: var(--spacing-l);
-    min-width: 120px;
-  }
-</style>

packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte

@@ -2,9 +2,8 @@
   import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import api from "builderStore/api"
-  import Portal from "svelte-portal"
   import { DropdownMenu } from "@budibase/bbui"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let screen
 
@@ -12,14 +11,10 @@
   let dropdown
   let anchor
 
-  const hideDropdown = () => {
-    dropdown.hide()
-  }
-
   const deleteScreen = () => {
     store.deleteScreens(screen, $store.currentPageName)
     // update the page if required
-    store.update(state => {
+    store.update((state) => {
       if (state.currentPreviewItem.name === screen.name) {
         store.setCurrentPage($store.currentPageName)
         $goto(`./:page/page-layout`)
@@ -29,23 +24,19 @@
   }
 </script>
 
-<div
+<div bind:this={anchor} on:click|stopPropagation={() => {}}>
-  bind:this={anchor}
-  class="root boundary"
-  on:click|stopPropagation={() => {}}>
   <div class="icon" on:click={() => dropdown.show()}>
     <i class="ri-more-line" />
   </div>
   <DropdownMenu bind:this={dropdown} {anchor} align="left">
-    <ul on:click={hideDropdown}>
+    <DropdownContainer>
-      <li on:click={() => confirmDeleteDialog.show()}>
+      <DropdownItem
-        <i class="ri-delete-bin-2-line" />
+        icon="ri-delete-bin-line"
-        Delete
+        title="Delete"
-      </li>
+        on:click={() => confirmDeleteDialog.show()} />
-    </ul>
+    </DropdownContainer>
   </DropdownMenu>
 </div>
-
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   title="Confirm Delete"
@@ -54,54 +45,6 @@
   onOk={deleteScreen} />
 
 <style>
-  .root {
-    overflow: hidden;
-    z-index: 9;
-  }
-
-  .root button {
-    border-style: none;
-    border-radius: 2px;
-    padding: 0;
-    background: transparent;
-    cursor: pointer;
-    color: var(--ink);
-    outline: none;
-  }
-
-  ul {
-    z-index: 100000;
-    overflow: visible;
-    margin: var(--spacing-s) 0;
-    border-radius: var(--border-radius-s);
-    padding: 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0;
-    align-items: center;
-    cursor: pointer;
-  }
-  li:not(.disabled):hover {
-    background-color: var(--grey-2);
-  }
-  li:active {
-    color: var(--blue);
-  }
-  li i {
-    margin-right: 8px;
-    font-size: var(--font-size-s);
-  }
-  li.disabled {
-    color: var(--grey-4);
-    cursor: default;
-  }
-
   .icon i {
     font-size: 16px;
   }