app list search bar

packages/builder/src/pages/builder/portal/apps/index.svelte

@@ -12,6 +12,7 @@
     Page,
     notifications,
     Body,
+    Search,
   } from "@budibase/bbui"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import UpdateAppModal from "components/start/UpdateAppModal.svelte"
@@ -35,8 +36,12 @@
   let unpublishModal
   let creatingApp = false
   let loaded = false
+  let searchTerm = ""
 
   $: enrichedApps = enrichApps($apps, $auth.user, sortBy)
+  $: filteredApps = enrichedApps.filter(app =>
+    new RegExp(searchTerm, "ig").test(app?.name)
+  )
 
   const enrichApps = (apps, user, sortBy) => {
     const enrichedApps = apps.map(app => ({
@@ -45,6 +50,7 @@
       lockedYou: app.lockedBy && app.lockedBy.email === user?.email,
       lockedOther: app.lockedBy && app.lockedBy.email !== user?.email,
     }))
+
     if (sortBy === "status") {
       return enrichedApps.sort((a, b) => {
         if (a.status === b.status) {
@@ -205,6 +211,7 @@
               { label: "Sort by status", value: "status" },
             ]}
           />
+          <Search placeholder="Search" bind:value={searchTerm} />
         </div>
         <ActionGroup>
           <ActionButton
@@ -225,7 +232,7 @@
         class:appGrid={layout === "grid"}
         class:appTable={layout === "table"}
       >
-        {#each enrichedApps as app (app.appId)}
+        {#each filteredApps as app (app.appId)}
           <svelte:component
             this={layout === "grid" ? AppCard : AppRow}
             {releaseLock}
@@ -301,7 +308,9 @@
   }
 
   .select {
-    width: 190px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 10px;
   }
 
   .appGrid {