Merge branch 'master' into reorganise-row-tests

packages/bbui/src/Icon/Icon.svelte

@@ -1,60 +1,54 @@
-<script context="module">
-  export const directions = ["n", "ne", "e", "se", "s", "sw", "w", "nw"]
-</script>
-
 <script>
-  import Tooltip from "../Tooltip/Tooltip.svelte"
+  import {
-  import { fade } from "svelte/transition"
+    default as AbsTooltip,
+    TooltipPosition,
+    TooltipType,
+  } from "../Tooltip/AbsTooltip.svelte"
 
-  export let direction = "n"
   export let name = "Add"
   export let hidden = false
   export let size = "M"
   export let hoverable = false
   export let disabled = false
   export let color
+  export let hoverColor
   export let tooltip
+  export let tooltipPosition = TooltipPosition.Bottom
+  export let tooltipType = TooltipType.Default
+  export let tooltipColor
+  export let tooltipWrap = true
   export let newStyles = false
-
-  $: rotation = getRotation(direction)
-
-  let showTooltip = false
-
-  const getRotation = direction => {
-    return directions.indexOf(direction) * 45
-  }
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<AbsTooltip
-<!-- svelte-ignore a11y-click-events-have-key-events -->
+  text={tooltip}
-<div
+  type={tooltipType}
-  class="icon"
+  position={tooltipPosition}
-  class:newStyles
+  color={tooltipColor}
-  on:mouseover={() => (showTooltip = true)}
+  noWrap={tooltipWrap}
-  on:focus={() => (showTooltip = true)}
-  on:mouseleave={() => (showTooltip = false)}
-  on:click={() => (showTooltip = false)}
 >
-  <svg
+  <div class="icon" class:newStyles>
-    on:click
+    <svg
-    class:hoverable
+      on:click
-    class:disabled
+      class:hoverable
-    class="spectrum-Icon spectrum-Icon--size{size}"
+      class:disabled
-    focusable="false"
+      class="spectrum-Icon spectrum-Icon--size{size}"
-    aria-hidden={hidden}
+      focusable="false"
-    aria-label={name}
+      aria-hidden={hidden}
-    style={`transform: rotate(${rotation}deg); ${
+      aria-label={name}
-      color ? `color: ${color};` : ""
+      style={`${color ? `color: ${color};` : ""} ${
-    }`}
+        hoverColor
-  >
+          ? `--hover-color: ${hoverColor}`
-    <use style="pointer-events: none;" xlink:href="#spectrum-icon-18-{name}" />
+          : "--hover-color: var(--spectrum-alias-icon-color-selected-hover)"
-  </svg>
+      }`}
-  {#if tooltip && showTooltip}
+    >
-    <div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
+      <use
-      <Tooltip textWrapping direction="top" text={tooltip} />
+        style="pointer-events: none;"
-    </div>
+        xlink:href="#spectrum-icon-18-{name}"
-  {/if}
+      />
-</div>
+    </svg>
+  </div>
+</AbsTooltip>
 
 <style>
   .icon {
@@ -71,7 +65,7 @@
     transition: color var(--spectrum-global-animation-duration-100, 130ms);
   }
   svg.hoverable:hover {
-    color: var(--spectrum-alias-icon-color-selected-hover) !important;
+    color: var(--hover-color) !important;
     cursor: pointer;
   }
   svg.hoverable:active {

packages/bbui/src/Tooltip/AbsTooltip.svelte

@@ -24,6 +24,7 @@
   export let text = ""
   export let fixed = false
   export let color = null
+  export let noWrap = false
 
   let wrapper
   let hovered = false
@@ -105,6 +106,7 @@
   <Portal target=".spectrum">
     <span
       class="spectrum-Tooltip spectrum-Tooltip--{type} spectrum-Tooltip--{position} is-open"
+      class:noWrap
       style={`left:${left}px;top:${top}px;${tooltipStyle}`}
       transition:fade|local={{ duration: 130 }}
     >
@@ -118,6 +120,9 @@
   .abs-tooltip {
     display: contents;
   }
+  .spectrum-Tooltip.noWrap .spectrum-Tooltip-label {
+    width: max-content;
+  }
   .spectrum-Tooltip {
     position: absolute;
     z-index: 9999;

packages/bbui/src/index.js

@@ -19,7 +19,7 @@ export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte"
 export { default as Button } from "./Button/Button.svelte"
 export { default as ButtonGroup } from "./ButtonGroup/ButtonGroup.svelte"
 export { default as ClearButton } from "./ClearButton/ClearButton.svelte"
-export { default as Icon, directions } from "./Icon/Icon.svelte"
+export { default as Icon } from "./Icon/Icon.svelte"
 export { default as IconAvatar } from "./Icon/IconAvatar.svelte"
 export { default as Toggle } from "./Form/Toggle.svelte"
 export { default as RadioGroup } from "./Form/RadioGroup.svelte"

packages/builder/src/components/common/NavHeader.svelte

@@ -59,7 +59,7 @@
     class="searchButton"
     class:hide={search}
   >
-    <Icon size="S" name="Search" />
+    <Icon size="S" name="Search" hoverable hoverColor="var(--ink)" />
   </div>
 
   <div
@@ -68,7 +68,7 @@
     class="addButton"
     class:rotate={search}
   >
-    <Icon name="Add" />
+    <Icon name="Add" hoverable hoverColor="var(--ink)" />
   </div>
 </div>
 

packages/builder/src/components/common/NavItem.svelte

@@ -8,6 +8,7 @@
   export let iconTooltip
   export let withArrow = false
   export let withActions = true
+  export let showActions = false
   export let indentLevel = 0
   export let text
   export let border = true
@@ -68,10 +69,11 @@
   class:border
   class:selected
   class:withActions
+  class:showActions
+  class:actionsOpen={highlighted && withActions}
   class:scrollable
   class:highlighted
   class:selectedBy
-  class:actionsOpen={highlighted && withActions}
   on:dragend
   on:dragstart
   on:dragover
@@ -170,7 +172,8 @@
   }
   .nav-item:hover .actions,
   .hovering .actions,
-  .nav-item.withActions.actionsOpen .actions {
+  .nav-item.withActions.actionsOpen .actions,
+  .nav-item.withActions.showActions .actions {
     opacity: 1;
   }
   .nav-item-content {

packages/builder/src/components/deploy/AppActions.svelte

@@ -19,7 +19,7 @@
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import analytics, { Events, EventSource } from "analytics"
   import { API } from "api"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import {
     previewStore,
     builderStore,
@@ -45,7 +45,7 @@
   let appActionPopoverAnchor
   let publishing = false
 
-  $: filteredApps = $apps.filter(app => app.devId === application)
+  $: filteredApps = $appsStore.apps.filter(app => app.devId === application)
   $: selectedApp = filteredApps?.length ? filteredApps[0] : null
   $: latestDeployments = $deploymentStore
     .filter(deployment => deployment.status === "SUCCESS")
@@ -129,7 +129,7 @@
     }
     try {
       await API.unpublishApp(selectedApp.prodId)
-      await apps.load()
+      await appsStore.load()
       notifications.send("App unpublished", {
         type: "success",
         icon: "GlobeStrike",
@@ -141,7 +141,7 @@
 
   const completePublish = async () => {
     try {
-      await apps.load()
+      await appsStore.load()
       await deploymentStore.load()
     } catch (err) {
       notifications.error("Error refreshing app")

packages/builder/src/components/deploy/DeleteModal.svelte

@@ -2,7 +2,7 @@
   import { Input, notifications } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import { API } from "api"
 
   export let appId
@@ -36,7 +36,7 @@
     deleting = true
     try {
       await API.deleteApp(appId)
-      apps.load()
+      appsStore.load()
       notifications.success("App deleted successfully")
       onDeleteSuccess()
     } catch (err) {

packages/builder/src/components/start/AppRow.svelte

@@ -6,10 +6,13 @@
   import { UserAvatars } from "@budibase/frontend-core"
   import { sdk } from "@budibase/shared-core"
   import AppRowContext from "./AppRowContext.svelte"
+  import FavouriteAppButton from "pages/builder/portal/apps/FavouriteAppButton.svelte"
 
   export let app
   export let lockedAction
 
+  let actionsOpen = false
+
   $: editing = app.sessions?.length
   $: isBuilder = sdk.users.isBuilder($auth.user, app?.devId)
   $: unclickable = !isBuilder && !app.deployed
@@ -43,8 +46,10 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="app-row"
-  on:click={lockedAction || handleDefaultClick}
   class:unclickable
+  class:actionsOpen
+  class:favourite={app.favourite}
+  on:click={lockedAction || handleDefaultClick}
 >
   <div class="title">
     <div class="app-icon">
@@ -75,19 +80,35 @@
     <Body size="S">{app.deployed ? "Published" : "Unpublished"}</Body>
   </div>
 
-  {#if isBuilder}
+  <div class="actions-wrap">
     <div class="app-row-actions">
-      <Button size="S" secondary on:click={lockedAction || goToBuilder}>
+      {#if isBuilder}
-        Edit
+        <div class="row-action">
-      </Button>
+          <Button size="S" secondary on:click={lockedAction || goToBuilder}>
-      <AppRowContext {app} />
+            Edit
+          </Button>
+        </div>
+        <div class="row-action">
+          <AppRowContext
+            {app}
+            on:open={() => {
+              actionsOpen = true
+            }}
+            on:close={() => {
+              actionsOpen = false
+            }}
+          />
+        </div>
+      {:else}
+        <!-- this can happen if an app builder has app user access to an app -->
+        <Button size="S" secondary>View</Button>
+      {/if}
     </div>
-  {:else if app.deployed}
+
-    <!-- this can happen if an app builder has app user access to an app -->
+    <div class="favourite-icon">
-    <div class="app-row-actions">
+      <FavouriteAppButton {app} noWrap />
-      <Button size="S" secondary>View</Button>
     </div>
-  {/if}
+  </div>
 </div>
 
 <style>
@@ -107,6 +128,16 @@
     border-color: var(--spectrum-global-color-gray-300);
   }
 
+  .app-row .favourite-icon {
+    display: none;
+  }
+
+  .app-row:hover .favourite-icon,
+  .app-row.favourite .favourite-icon,
+  .app-row.actionsOpen .favourite-icon {
+    display: flex;
+  }
+
   .updated {
     color: var(--spectrum-global-color-gray-700);
     display: flex;
@@ -142,11 +173,23 @@
   }
 
   .app-row-actions {
+    display: none;
+  }
+
+  .app-row:hover .app-row-actions,
+  .app-row.actionsOpen .app-row-actions {
     gap: var(--spacing-m);
-    display: flex;
     flex-direction: row;
     justify-content: flex-end;
     align-items: center;
+    display: flex;
+  }
+
+  .actions-wrap {
+    gap: var(--spacing-m);
+    display: flex;
+    justify-content: flex-end;
+    min-height: var(--spectrum-alias-item-height-s);
   }
 
   .name {

packages/builder/src/components/start/AppRowContext.svelte

@@ -4,15 +4,69 @@
   import AppLimitModal from "components/portal/licensing/AppLimitModal.svelte"
   import ExportAppModal from "./ExportAppModal.svelte"
   import DuplicateAppModal from "./DuplicateAppModal.svelte"
+  import { onMount } from "svelte"
   import { licensing } from "stores/portal"
 
   export let app
   export let align = "right"
+  export let options
 
   let deleteModal
   let exportModal
   let duplicateModal
   let exportPublishedVersion = false
+  let loaded = false
+
+  const getActions = app => {
+    if (!loaded) {
+      return []
+    }
+    return [
+      {
+        id: "duplicate",
+        icon: "Copy",
+        onClick: duplicateModal.show,
+        body: "Duplicate",
+      },
+      {
+        id: "exportDev",
+        icon: "Export",
+        onClick: () => {
+          exportPublishedVersion = false
+          exportModal.show()
+        },
+        body: "Export latest edited app",
+      },
+      {
+        id: "exportProd",
+        icon: "Export",
+        onClick: () => {
+          exportPublishedVersion = true
+          exportModal.show()
+        },
+        body: "Export latest published app",
+      },
+      {
+        id: "delete",
+        icon: "Delete",
+        onClick: deleteModal.show,
+        body: "Delete",
+      },
+    ].filter(action => {
+      if (action.id === "exportProd" && app.deployed !== true) {
+        return false
+      } else if (Array.isArray(options) && !options.includes(action.id)) {
+        return false
+      }
+      return true
+    })
+  }
+
+  $: actions = getActions(app, loaded)
+
+  onMount(() => {
+    loaded = true
+  })
   let appLimitModal
 </script>
 
@@ -45,44 +99,10 @@
   <div slot="control" class="icon">
     <Icon size="S" hoverable name="MoreSmallList" />
   </div>
-  <MenuItem
+
-    icon="Copy"
+  {#each actions as action}
-    on:click={() => {
+    <MenuItem icon={action.icon} on:click={action.onClick}>
-      if ($licensing?.usageMetrics?.apps < 100) {
+      {action.body}
-        duplicateModal.show()
-      } else {
-        appLimitModal.show()
-      }
-    }}
-  >
-    Duplicate
-  </MenuItem>
-  <MenuItem
-    icon="Export"
-    on:click={() => {
-      exportPublishedVersion = false
-      exportModal.show()
-    }}
-  >
-    Export latest edited app
-  </MenuItem>
-  {#if app.deployed}
-    <MenuItem
-      icon="Export"
-      on:click={() => {
-        exportPublishedVersion = true
-        exportModal.show()
-      }}
-    >
-      Export latest published app
     </MenuItem>
-  {/if}
+  {/each}
-  <MenuItem
-    icon="Delete"
-    on:click={() => {
-      deleteModal.show()
-    }}
-  >
-    Delete
-  </MenuItem>
 </ActionMenu>

packages/builder/src/components/start/ChooseIconModal.svelte

@@ -6,7 +6,7 @@
     Label,
     notifications,
   } from "@budibase/bbui"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import { createEventDispatcher } from "svelte"
 
   export let app
@@ -49,7 +49,7 @@
       return
     }
     try {
-      await apps.update(app.instance._id, {
+      await appsStore.save(app.instance._id, {
         icon: { name, color },
       })
     } catch (error) {

packages/builder/src/components/start/CreateAppModal.svelte

@@ -9,13 +9,14 @@
   } from "@budibase/bbui"
   import { initialise } from "stores/builder"
   import { API } from "api"
-  import { apps, admin, auth } from "stores/portal"
+  import { appsStore, admin, auth } from "stores/portal"
   import { onMount } from "svelte"
   import { goto } from "@roxi/routify"
   import { createValidationStore } from "helpers/validation/yup"
   import * as appValidation from "helpers/validation/yup/app"
   import TemplateCard from "components/common/TemplateCard.svelte"
   import { lowercase } from "helpers"
+  import { sdk } from "@budibase/shared-core"
 
   export let template
 
@@ -92,7 +93,7 @@
   }
 
   const setupValidation = async () => {
-    const applications = svelteGet(apps)
+    const applications = svelteGet(appsStore).apps
     appValidation.name(validation, { apps: applications })
     appValidation.url(validation, { apps: applications })
     appValidation.file(validation, { template })
@@ -141,6 +142,11 @@
       // Create user
       await auth.setInitInfo({})
 
+      if (!sdk.users.isBuilder($auth.user, createdApp?.appId)) {
+        // Refresh for access to created applications
+        await auth.getSelf()
+      }
+
       $goto(`/builder/app/${createdApp.instance._id}`)
     } catch (error) {
       creating = false

packages/builder/src/components/start/DuplicateAppModal.svelte

@@ -9,9 +9,10 @@
   import { createValidationStore } from "helpers/validation/yup"
   import { writable, get } from "svelte/store"
   import * as appValidation from "helpers/validation/yup/app"
-  import { apps } from "stores/portal"
+  import { appsStore, auth } from "stores/portal"
   import { onMount } from "svelte"
   import { API } from "api"
+  import { sdk } from "@budibase/shared-core"
 
   export let appId
   export let appName
@@ -67,8 +68,12 @@
     }
 
     try {
-      await API.duplicateApp(data, appId)
+      const app = await API.duplicateApp(data, appId)
-      apps.load()
+      appsStore.load()
+      if (!sdk.users.isBuilder($auth.user, app?.duplicateAppId)) {
+        // Refresh for access to created applications
+        await auth.getSelf()
+      }
       onDuplicateSuccess()
       notifications.success("App duplicated successfully")
     } catch (err) {
@@ -78,7 +83,7 @@
   }
 
   const setupValidation = async () => {
-    const applications = get(apps)
+    const applications = get(appsStore).apps
     appValidation.name(validation, { apps: applications })
     appValidation.url(validation, { apps: applications })
 

packages/builder/src/components/start/UpdateAppModal.svelte

@@ -7,7 +7,7 @@
     Layout,
     Label,
   } from "@budibase/bbui"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import { onMount } from "svelte"
   import { createValidationStore } from "helpers/validation/yup"
   import * as appValidation from "helpers/validation/yup/app"
@@ -37,7 +37,7 @@
   }
 
   const setupValidation = async () => {
-    const applications = svelteGet(apps)
+    const applications = svelteGet(appsStore).apps
     appValidation.name(validation, {
       apps: applications,
       currentApp: {
@@ -62,7 +62,7 @@
 
   async function updateApp() {
     try {
-      await apps.update(app.appId, {
+      await appsStore.save(app.appId, {
         name: $values.name?.trim(),
         url: $values.url?.trim(),
         icon: {

packages/builder/src/global.css

@@ -22,6 +22,7 @@ body {
   --grey-7: var(--spectrum-global-color-gray-700);
   --grey-8: var(--spectrum-global-color-gray-800);
   --grey-9: var(--spectrum-global-color-gray-900);
+  --spectrum-global-color-yellow-1000: #d8b500;
 
   color: var(--ink);
   background-color: var(--background-alt);

packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte

@@ -15,7 +15,14 @@
     FancySelect,
   } from "@budibase/bbui"
   import { builderStore, appStore, roles } from "stores/builder"
-  import { groups, licensing, apps, users, auth, admin } from "stores/portal"
+  import {
+    groups,
+    licensing,
+    appsStore,
+    users,
+    auth,
+    admin,
+  } from "stores/portal"
   import {
     fetchData,
     Constants,
@@ -54,7 +61,7 @@
 
   let inviteFailureResponse = ""
   $: validEmail = emailValidator(email) === true
-  $: prodAppId = apps.getProdAppID($appStore.appId)
+  $: prodAppId = appsStore.getProdAppID($appStore.appId)
   $: promptInvite = showInvite(
     filteredInvites,
     filteredUsers,

packages/builder/src/pages/builder/app/[application]/_layout.svelte

@@ -8,7 +8,7 @@
     userStore,
     deploymentStore,
   } from "stores/builder"
-  import { auth, apps } from "stores/portal"
+  import { auth, appsStore } from "stores/portal"
   import { TENANT_FEATURE_FLAGS, isEnabled } from "helpers/featureFlags"
   import {
     Icon,
@@ -52,7 +52,7 @@
       const pkg = await API.fetchAppPackage(application)
       await initialise(pkg)
 
-      await apps.load()
+      await appsStore.load()
       await deploymentStore.load()
 
       loaded = true

packages/builder/src/pages/builder/app/[application]/settings/automations/index.svelte

@@ -18,7 +18,7 @@
   import { createPaginationStore } from "helpers/pagination"
   import { getContext, onDestroy, onMount } from "svelte"
   import dayjs from "dayjs"
-  import { auth, licensing, admin, apps } from "stores/portal"
+  import { auth, licensing, admin, appsStore } from "stores/portal"
   import { Constants } from "@budibase/frontend-core"
   import Portal from "svelte-portal"
 
@@ -36,7 +36,7 @@
   let status = null
   let timeRange = null
   let loaded = false
-  $: app = $apps.find(app => $appStore.appId?.includes(app.appId))
+  $: app = $appsStore.apps.find(app => $appStore.appId?.includes(app.appId))
   $: licensePlan = $auth.user?.license?.plan
   $: page = $pageInfo.page
   $: fetchLogs(automationId, status, page, timeRange)
@@ -129,7 +129,7 @@
 
   async function save({ detail }) {
     try {
-      await apps.update($appStore.appId, {
+      await appsStore.save($appStore.appId, {
         automations: {
           chainAutomations: detail,
         },

packages/builder/src/pages/builder/app/[application]/settings/embed.svelte

@@ -10,10 +10,10 @@
     notifications,
   } from "@budibase/bbui"
   import { AppStatus } from "constants"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import { appStore } from "stores/builder"
 
-  $: filteredApps = $apps.filter(app => app.devId == $appStore.appId)
+  $: filteredApps = $appsStore.apps.filter(app => app.devId == $appStore.appId)
   $: app = filteredApps.length ? filteredApps[0] : {}
   $: appUrl = `${window.origin}/embed${app?.url}`
   $: appDeployed = app?.status === AppStatus.DEPLOYED

packages/builder/src/pages/builder/app/[application]/settings/exportImport.svelte

@@ -8,12 +8,12 @@
     Modal,
   } from "@budibase/bbui"
   import { AppStatus } from "constants"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import { appStore } from "stores/builder"
   import ExportAppModal from "components/start/ExportAppModal.svelte"
   import ImportAppModal from "components/start/ImportAppModal.svelte"
 
-  $: filteredApps = $apps.filter(app => app.devId === $appStore.appId)
+  $: filteredApps = $appsStore.apps.filter(app => app.devId === $appStore.appId)
   $: app = filteredApps.length ? filteredApps[0] : {}
   $: appDeployed = app?.status === AppStatus.DEPLOYED
 

packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte

@@ -11,13 +11,13 @@
   } from "@budibase/bbui"
   import { AppStatus } from "constants"
   import { appStore, initialise } from "stores/builder"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import UpdateAppModal from "components/start/UpdateAppModal.svelte"
   import { API } from "api"
 
   let updatingModal
 
-  $: filteredApps = $apps.filter(app => app.devId == $appStore.appId)
+  $: filteredApps = $appsStore.apps.filter(app => app.devId == $appStore.appId)
   $: app = filteredApps.length ? filteredApps[0] : {}
   $: appDeployed = app?.status === AppStatus.DEPLOYED
 

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

@@ -12,7 +12,14 @@
     notifications,
   } from "@budibase/bbui"
   import { onMount } from "svelte"
-  import { apps, organisation, auth, groups, licensing } from "stores/portal"
+  import {
+    appsStore,
+    organisation,
+    auth,
+    groups,
+    licensing,
+    enrichedApps,
+  } from "stores/portal"
   import { goto } from "@roxi/routify"
   import { AppStatus } from "constants"
   import { gradient } from "actions"
@@ -31,7 +38,9 @@
   $: userGroups = $groups.filter(group =>
     group.users.find(user => user._id === $auth.user?._id)
   )
-  $: publishedApps = $apps.filter(app => app.status === AppStatus.DEPLOYED)
+  $: publishedApps = $enrichedApps.filter(
+    app => app.status === AppStatus.DEPLOYED
+  )
   $: userApps = getUserApps(publishedApps, userGroups, $auth.user)
 
   function getUserApps(publishedApps, userGroups, user) {
@@ -46,12 +55,12 @@
         return userGroups.find(group => {
           return groups.actions
             .getGroupAppIds(group)
-            .map(role => apps.extractAppId(role))
+            .map(role => appsStore.extractAppId(role))
             .includes(app.appId)
         })
       } else {
         return Object.keys($auth.user?.roles)
-          .map(x => apps.extractAppId(x))
+          .map(x => appsStore.extractAppId(x))
           .includes(app.appId)
       }
     })
@@ -76,7 +85,7 @@
   onMount(async () => {
     try {
       await organisation.init()
-      await apps.load()
+      await appsStore.load()
       await groups.actions.init()
     } catch (error) {
       notifications.error("Error loading apps")

packages/builder/src/pages/builder/portal/_layout.svelte

@@ -1,7 +1,7 @@
 <script>
   import { isActive, redirect, goto, url } from "@roxi/routify"
   import { Icon, notifications, Tabs, Tab } from "@budibase/bbui"
-  import { organisation, auth, menu, apps } from "stores/portal"
+  import { organisation, auth, menu, appsStore } from "stores/portal"
   import { onMount } from "svelte"
   import UpgradeButton from "./_components/UpgradeButton.svelte"
   import MobileMenu from "./_components/MobileMenu.svelte"
@@ -16,7 +16,8 @@
   let activeTab = "Apps"
 
   $: $url(), updateActiveTab($menu)
-  $: isOnboarding = !$apps.length && sdk.users.hasBuilderPermissions($auth.user)
+  $: isOnboarding =
+    !$appsStore.apps.length && sdk.users.hasBuilderPermissions($auth.user)
 
   const updateActiveTab = menu => {
     for (let entry of menu) {
@@ -40,7 +41,7 @@
       } else {
         try {
           // We need to load apps to know if we need to show onboarding fullscreen
-          await Promise.all([apps.load(), organisation.init()])
+          await Promise.all([appsStore.load(), organisation.init()])
         } catch (error) {
           notifications.error("Error getting org config")
         }

packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte

@@ -18,7 +18,7 @@
     Divider,
     ActionButton,
   } from "@budibase/bbui"
-  import { licensing, users, apps, auditLogs } from "stores/portal"
+  import { licensing, users, appsStore, auditLogs } from "stores/portal"
   import LockedFeature from "../../_components/LockedFeature.svelte"
   import { createPaginationStore } from "helpers/pagination"
   import { onMount, setContext } from "svelte"
@@ -102,7 +102,7 @@
     enrich(parseEventObject($auditLogs.events), selectedEvents, "id"),
     "id"
   )
-  $: sortedApps = sort(enrich($apps, selectedApps, "appId"), "name")
+  $: sortedApps = sort(enrich($appsStore.apps, selectedApps, "appId"), "name")
 
   const debounce = value => {
     clearTimeout(timer)

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

@@ -0,0 +1,43 @@
+<script>
+  import { Icon, TooltipPosition, TooltipType } from "@budibase/bbui"
+  import { auth } from "stores/portal"
+
+  export let app
+  export let size = "S"
+  export let position = TooltipPosition.Top
+  export let noWrap = false
+  export let hoverColor = "var(--ink)"
+</script>
+
+<Icon
+  name={app?.favourite ? "Star" : "StarOutline"}
+  hoverable
+  color={app?.favourite ? "var(--spectrum-global-color-yellow-1000)" : null}
+  tooltip={app?.favourite ? "Remove from favourites" : "Add to favourites"}
+  tooltipType={TooltipType.Info}
+  tooltipPosition={position}
+  tooltipWrap={noWrap}
+  {hoverColor}
+  {size}
+  on:click={async e => {
+    e.stopPropagation()
+    const userAppFavourites = new Set([...($auth.user.appFavourites || [])])
+    let processedAppIds = []
+
+    if ($auth.user.appFavourites && app?.appId) {
+      if (userAppFavourites.has(app.appId)) {
+        userAppFavourites.delete(app.appId)
+      } else {
+        userAppFavourites.add(app.appId)
+      }
+      processedAppIds = [...userAppFavourites]
+    } else {
+      processedAppIds = [app.appId]
+    }
+
+    await auth.updateSelf({
+      appFavourites: processedAppIds,
+    })
+  }}
+  disabled={!app}
+/>

packages/builder/src/pages/builder/portal/apps/[appId]/_layout.svelte

@@ -1,8 +1,8 @@
 <script>
   import { params, redirect } from "@roxi/routify"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
 
-  $: app = $apps.find(app => app.appId === $params.appId)
+  $: app = $appsStore.apps.find(app => app.appId === $params.appId)
   $: {
     if (!app) {
       $redirect("../")

packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte

@@ -1,12 +1,21 @@
 <script>
   import { params, goto } from "@roxi/routify"
-  import { apps, auth, sideBarCollapsed } from "stores/portal"
+  import { auth, sideBarCollapsed, enrichedApps } from "stores/portal"
-  import { Link, Body, ActionButton } from "@budibase/bbui"
+  import AppRowContext from "components/start/AppRowContext.svelte"
+  import FavouriteAppButton from "../FavouriteAppButton.svelte"
+  import {
+    Link,
+    Body,
+    Button,
+    Icon,
+    TooltipPosition,
+    TooltipType,
+  } from "@budibase/bbui"
   import { sdk } from "@budibase/shared-core"
   import { API } from "api"
   import ErrorSVG from "./ErrorSVG.svelte"
 
-  $: app = $apps.find(app => app.appId === $params.appId)
+  $: app = $enrichedApps.find(app => app.appId === $params.appId)
   $: iframeUrl = getIframeURL(app)
   $: isBuilder = sdk.users.isBuilder($auth.user, app?.devId)
 
@@ -30,42 +39,63 @@
   $: fetchScreens(app?.devId)
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="container">
   <div class="header">
     {#if $sideBarCollapsed}
-      <ActionButton
+      <div class="headerButton" on:click={() => sideBarCollapsed.set(false)}>
-        quiet
+        <Icon
-        icon="Rail"
+          name={"Rail"}
-        on:click={() => sideBarCollapsed.set(false)}
+          hoverable
-      >
+          tooltip="Expand"
-        Menu
+          tooltipPosition={TooltipPosition.Right}
-      </ActionButton>
+          tooltipType={TooltipType.Info}
+          hoverColor={"var(--ink)"}
+        />
+      </div>
     {:else}
-      <ActionButton
+      <div class="headerButton" on:click={() => sideBarCollapsed.set(true)}>
-        quiet
+        <Icon
-        icon="RailRightOpen"
+          name={"RailRightOpen"}
-        on:click={() => sideBarCollapsed.set(true)}
+          hoverable
-      >
+          tooltip="Collapse"
-        Collapse
+          tooltipType={TooltipType.Info}
-      </ActionButton>
+          tooltipPosition={TooltipPosition.Top}
+          hoverColor={"var(--ink)"}
+          size="S"
+        />
+      </div>
     {/if}
     {#if isBuilder}
-      <ActionButton
+      <Button
-        quiet
+        size="M"
-        icon="Edit"
+        secondary
         on:click={() => $goto(`/builder/app/${app.devId}`)}
       >
         Edit
-      </ActionButton>
+      </Button>
     {/if}
-    <ActionButton
+    <div class="headerButton">
-      disabled={noScreens}
+      <FavouriteAppButton {app} />
-      quiet
+    </div>
-      icon="LinkOut"
+    <div class="headerButton" on:click={() => window.open(iframeUrl, "_blank")}>
-      on:click={() => window.open(iframeUrl, "_blank")}
+      <Icon
-    >
+        name="LinkOut"
-      Fullscreen
+        disabled={noScreens}
-    </ActionButton>
+        hoverable
+        tooltip="Open in new tab"
+        tooltipType={TooltipType.Info}
+        tooltipPosition={TooltipPosition.Top}
+        hoverColor={"var(--ink)"}
+        size="S"
+      />
+    </div>
+    <AppRowContext
+      {app}
+      options={["duplicate", "delete", "exportDev", "exportProd"]}
+      align="left"
+    />
   </div>
   {#if noScreens}
     <div class="noScreens">
@@ -83,6 +113,15 @@
 </div>
 
 <style>
+  .headerButton {
+    color: var(--grey-7);
+    cursor: pointer;
+  }
+
+  .headerButton:hover {
+    color: var(--ink);
+  }
+
   .container {
     flex: 1 1 auto;
     display: flex;
@@ -96,7 +135,7 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    gap: var(--spacing-xs);
+    gap: var(--spacing-xl);
     flex: 0 0 50px;
   }
 

packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte

@@ -1,33 +1,21 @@
 <script>
-  import { apps, sideBarCollapsed, auth } from "stores/portal"
+  import { sideBarCollapsed, enrichedApps, auth } from "stores/portal"
   import { params, goto } from "@roxi/routify"
   import NavItem from "components/common/NavItem.svelte"
   import NavHeader from "components/common/NavHeader.svelte"
   import AppRowContext from "components/start/AppRowContext.svelte"
-  import { AppStatus } from "constants"
+  import FavouriteAppButton from "../FavouriteAppButton.svelte"
   import { sdk } from "@budibase/shared-core"
 
   let searchString
   let opened
 
-  $: filteredApps = $apps
+  $: filteredApps = $enrichedApps.filter(app => {
-    .filter(app => {
+    return (
-      return (
+      !searchString ||
-        !searchString ||
+      app.name.toLowerCase().includes(searchString.toLowerCase())
-        app.name.toLowerCase().includes(searchString.toLowerCase())
+    )
-      )
+  })
-    })
-    .map(app => {
-      return {
-        ...app,
-        deployed: app.status === AppStatus.DEPLOYED,
-      }
-    })
-    .sort((a, b) => {
-      const lowerA = a.name.toLowerCase()
-      const lowerB = b.name.toLowerCase()
-      return lowerA > lowerB ? 1 : -1
-    })
 </script>
 
 <div class="side-bar" class:collapsed={$sideBarCollapsed}>
@@ -47,27 +35,40 @@
       selected={!$params.appId}
     />
     {#each filteredApps as app}
-      <NavItem
+      <span
-        text={app.name}
+        class="side-bar-app-entry"
-        icon={app.icon?.name || "Apps"}
+        class:favourite={app.favourite}
-        iconColor={app.icon?.color}
+        class:actionsOpen={opened == app.appId}
-        selected={$params.appId === app.appId}
-        highlighted={opened == app.appId}
-        on:click={() => $goto(`./${app.appId}`)}
       >
-        {#if sdk.users.isBuilder($auth.user, app?.devId)}
+        <NavItem
-          <AppRowContext
+          text={app.name}
-            {app}
+          icon={app.icon?.name || "Apps"}
-            align="left"
+          iconColor={app.icon?.color}
-            on:open={() => {
+          selected={$params.appId === app.appId}
-              opened = app.appId
+          highlighted={opened == app.appId}
-            }}
+          on:click={() => $goto(`./${app.appId}`)}
-            on:close={() => {
+          withActions
-              opened = null
+          showActions
-            }}
+        >
-          />
+          <div class="app-entry-actions">
-        {/if}
+            {#if sdk.users.isBuilder($auth.user, app?.devId)}
-      </NavItem>
+              <AppRowContext
+                {app}
+                align="left"
+                on:open={() => {
+                  opened = app.appId
+                }}
+                on:close={() => {
+                  opened = null
+                }}
+              />
+            {/if}
+          </div>
+          <div class="favourite-icon">
+            <FavouriteAppButton {app} size="XS" />
+          </div>
+        </NavItem>
+      </span>
     {/each}
   </div>
 </div>
@@ -110,4 +111,23 @@
     overflow: auto;
     overflow-x: hidden;
   }
+
+  .side-bar-app-entry :global(.nav-item-content .actions) {
+    width: auto;
+    display: flex;
+    gap: var(--spacing-s);
+  }
+
+  .side-bar-app-entry:hover .app-entry-actions,
+  .side-bar-app-entry:hover .favourite-icon,
+  .side-bar-app-entry.favourite .favourite-icon,
+  .side-bar-app-entry.actionsOpen .app-entry-actions,
+  .side-bar-app-entry.actionsOpen .favourite-icon {
+    opacity: 1;
+  }
+
+  .side-bar-app-entry .app-entry-actions,
+  .side-bar-app-entry .favourite-icon {
+    opacity: 0;
+  }
 </style>

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

@@ -2,7 +2,7 @@
   import { notifications } from "@budibase/bbui"
   import {
     admin,
-    apps,
+    appsStore,
     templates,
     licensing,
     groups,
@@ -14,7 +14,7 @@
   import PortalSideBar from "./_components/PortalSideBar.svelte"
 
   // Don't block loading if we've already hydrated state
-  let loaded = !!$apps?.length
+  let loaded = !!$appsStore.apps?.length
 
   onMount(async () => {
     try {
@@ -34,7 +34,10 @@
       }
 
       // Go to new app page if no apps exists
-      if (!$apps.length && sdk.users.hasBuilderPermissions($auth.user)) {
+      if (
+        !$appsStore.apps.length &&
+        sdk.users.hasBuilderPermissions($auth.user)
+      ) {
         $redirect("./onboarding")
       }
     } catch (error) {
@@ -46,7 +49,7 @@
 
 {#if loaded}
   <div class="page">
-    {#if $apps.length > 0}
+    {#if $appsStore.apps.length > 0}
       <PortalSideBar />
     {/if}
     <slot />

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

@@ -5,7 +5,7 @@
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import TemplateDisplay from "components/common/TemplateDisplay.svelte"
   import AppLimitModal from "components/portal/licensing/AppLimitModal.svelte"
-  import { apps, templates, licensing } from "stores/portal"
+  import { appsStore, templates, licensing } from "stores/portal"
   import { Breadcrumbs, Breadcrumb, Header } from "components/portal/page"
 
   let template
@@ -35,7 +35,7 @@
   }
 </script>
 
-{#if !$apps.length}
+{#if !$appsStore.apps.length}
   <FirstAppOnboarding />
 {:else}
   <Page>

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

@@ -19,13 +19,18 @@
   import { automationStore, initialise } from "stores/builder"
   import { API } from "api"
   import { onMount } from "svelte"
-  import { apps, auth, admin, licensing, environment } from "stores/portal"
+  import {
+    appsStore,
+    auth,
+    admin,
+    licensing,
+    environment,
+    enrichedApps,
+  } from "stores/portal"
   import { goto } from "@roxi/routify"
   import AppRow from "components/start/AppRow.svelte"
-  import { AppStatus } from "constants"
   import Logo from "assets/bb-space-man.svg"
 
-  let sortBy = "name"
   let template
   let creationModal
   let appLimitModal
@@ -33,56 +38,27 @@
   let searchTerm = ""
   let creatingFromTemplate = false
   let automationErrors
-  let accessFilterList = null
 
   $: welcomeHeader = `Welcome ${$auth?.user?.firstName || "back"}`
-  $: enrichedApps = enrichApps($apps, $auth.user, sortBy)
+  $: filteredApps = filterApps($enrichedApps, searchTerm)
-  $: filteredApps = enrichedApps.filter(
+  $: automationErrors = getAutomationErrors(filteredApps || [])
-    app =>
-      (searchTerm
-        ? app?.name?.toLowerCase().includes(searchTerm.toLowerCase())
-        : true) &&
-      (accessFilterList !== null
-        ? accessFilterList?.includes(
-            `${app?.type}_${app?.tenantId}_${app?.appId}`
-          )
-        : true)
-  )
-  $: automationErrors = getAutomationErrors(enrichedApps)
   $: isOwner = $auth.accountPortalAccess && $admin.cloud
 
+  const filterApps = (apps, searchTerm) => {
+    return apps?.filter(app => {
+      const query = searchTerm?.trim()?.replace(/\s/g, "")
+      if (query) {
+        return app?.name?.toLowerCase().includes(query.toLowerCase())
+      } else {
+        return true
+      }
+    })
+  }
+
   const usersLimitLockAction = $licensing?.errUserLimit
     ? () => accountLockedModal.show()
     : null
 
-  const enrichApps = (apps, user, sortBy) => {
-    const enrichedApps = apps.map(app => ({
-      ...app,
-      deployed: app.status === AppStatus.DEPLOYED,
-      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) {
-          return a.name?.toLowerCase() < b.name?.toLowerCase() ? -1 : 1
-        }
-        return a.status === AppStatus.DEPLOYED ? -1 : 1
-      })
-    } else if (sortBy === "updated") {
-      return enrichedApps.sort((a, b) => {
-        const aUpdated = a.updatedAt || "9999"
-        const bUpdated = b.updatedAt || "9999"
-        return aUpdated < bUpdated ? 1 : -1
-      })
-    } else {
-      return enrichedApps.sort((a, b) => {
-        return a.name?.toLowerCase() < b.name?.toLowerCase() ? -1 : 1
-      })
-    }
-  }
-
   const getAutomationErrors = apps => {
     const automationErrors = {}
     for (let app of apps) {
@@ -117,7 +93,7 @@
   const initiateAppCreation = async () => {
     if ($licensing?.usageMetrics?.apps >= 100) {
       appLimitModal.show()
-    } else if ($apps?.length) {
+    } else if ($appsStore.apps?.length) {
       $goto("/builder/portal/apps/create")
     } else {
       template = null
@@ -136,7 +112,7 @@
       const templateKey = template.key.split("/")[1]
 
       let appName = templateKey.replace(/-/g, " ")
-      const appsWithSameName = $apps.filter(app =>
+      const appsWithSameName = $appsStore.apps.filter(app =>
         app.name?.startsWith(appName)
       )
       appName = `${appName} ${appsWithSameName.length + 1}`
@@ -217,7 +193,7 @@
           : "View error"}
         on:dismiss={async () => {
           await automationStore.actions.clearLogErrors({ appId })
-          await apps.load()
+          await appsStore.load()
         }}
         message={automationErrorMessage(appId)}
       />
@@ -233,7 +209,7 @@
       </div>
     </div>
 
-    {#if enrichedApps.length}
+    {#if $appsStore.apps.length}
       <Layout noPadding gap="L">
         <div class="title">
           {#if $auth.user && sdk.users.canCreateApps($auth.user)}
@@ -245,7 +221,7 @@
               >
                 Create new app
               </Button>
-              {#if $apps?.length > 0 && !$admin.offlineMode}
+              {#if $appsStore.apps?.length > 0 && !$admin.offlineMode}
                 <Button
                   size="M"
                   secondary
@@ -255,7 +231,7 @@
                   View templates
                 </Button>
               {/if}
-              {#if !$apps?.length}
+              {#if !$appsStore.apps?.length}
                 <Button
                   size="L"
                   quiet
@@ -267,11 +243,14 @@
               {/if}
             </div>
           {/if}
-          {#if enrichedApps.length > 1}
+          {#if $appsStore.apps.length > 1}
             <div class="app-actions">
               <Select
                 autoWidth
-                bind:value={sortBy}
+                value={$appsStore.sortBy}
+                on:change={e => {
+                  appsStore.updateSort(e.detail)
+                }}
                 placeholder={null}
                 options={[
                   { label: "Sort by name", value: "name" },
@@ -279,7 +258,17 @@
                   { label: "Sort by status", value: "status" },
                 ]}
               />
-              <Search placeholder="Search" bind:value={searchTerm} />
+              <Search
+                placeholder="Search"
+                on:input={e => {
+                  searchTerm = e.target.value
+                }}
+                on:change={e => {
+                  if (!e.detail) {
+                    searchTerm = null
+                  }
+                }}
+              />
             </div>
           {/if}
         </div>

packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte

@@ -13,7 +13,7 @@
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { Breadcrumb, Breadcrumbs } from "components/portal/page"
   import { roles } from "stores/builder"
-  import { apps, auth, groups } from "stores/portal"
+  import { appsStore, auth, groups } from "stores/portal"
   import { onMount, setContext } from "svelte"
   import AppNameTableRenderer from "../users/_components/AppNameTableRenderer.svelte"
   import AppRoleTableRenderer from "../users/_components/AppRoleTableRenderer.svelte"
@@ -51,17 +51,17 @@
   $: isScimGroup = group?.scimInfo?.isSync
   $: isAdmin = sdk.users.isAdmin($auth.user)
   $: readonly = !isAdmin || isScimGroup
-  $: groupApps = $apps
+  $: groupApps = $appsStore.apps
     .filter(app =>
       groups.actions
         .getGroupAppIds(group)
-        .includes(apps.getProdAppID(app.devId))
+        .includes(appsStore.getProdAppID(app.devId))
     )
     .map(app => ({
       ...app,
-      role: group?.builder?.apps.includes(apps.getProdAppID(app.devId))
+      role: group?.builder?.apps.includes(appsStore.getProdAppID(app.devId))
         ? Constants.Roles.CREATOR
-        : group?.roles?.[apps.getProdAppID(app.devId)],
+        : group?.roles?.[appsStore.getProdAppID(app.devId)],
     }))
 
   $: {
@@ -93,7 +93,7 @@
   }
 
   const removeApp = async app => {
-    await groups.actions.removeApp(groupId, apps.getProdAppID(app.devId))
+    await groups.actions.removeApp(groupId, appsStore.getProdAppID(app.devId))
   }
   setContext("roles", {
     updateRole: () => {},

packages/builder/src/pages/builder/portal/users/groups/_components/AppAddModal.svelte

@@ -1,12 +1,12 @@
 <script>
   import { keepOpen, Body, ModalContent, Select } from "@budibase/bbui"
-  import { apps, groups } from "stores/portal"
+  import { appsStore, groups } from "stores/portal"
   import { roles } from "stores/builder"
   import RoleSelect from "components/common/RoleSelect.svelte"
 
   export let group
 
-  $: appOptions = $apps.map(app => ({
+  $: appOptions = $appsStore.apps.map(app => ({
     label: app.name,
     value: app,
   }))
@@ -16,7 +16,7 @@
   let selectingRole = false
 
   async function appSelected() {
-    const prodAppId = apps.getProdAppID(selectedApp.devId)
+    const prodAppId = appsStore.getProdAppID(selectedApp.devId)
     if (!selectingRole) {
       selectingRole = true
       await roles.fetchByAppId(prodAppId)

packages/builder/src/pages/builder/portal/users/users/[userId].svelte

@@ -18,7 +18,7 @@
     Table,
   } from "@budibase/bbui"
   import { onMount, setContext } from "svelte"
-  import { users, auth, groups, apps, licensing } from "stores/portal"
+  import { users, auth, groups, appsStore, licensing } from "stores/portal"
   import { roles } from "stores/builder"
   import ForceResetPasswordModal from "./_components/ForceResetPasswordModal.svelte"
   import UserGroupPicker from "components/settings/UserGroupPicker.svelte"
@@ -97,7 +97,7 @@
   $: privileged = sdk.users.isAdminOrGlobalBuilder(user)
   $: nameLabel = getNameLabel(user)
   $: filteredGroups = getFilteredGroups(internalGroups, searchTerm)
-  $: availableApps = getAvailableApps($apps, privileged, user?.roles)
+  $: availableApps = getAvailableApps($appsStore.apps, privileged, user?.roles)
   $: userGroups = $groups.filter(x => {
     return x.users?.find(y => {
       return y._id === userId
@@ -111,12 +111,12 @@
       availableApps = availableApps.filter(x => {
         let roleKeys = Object.keys(roles || {})
         return roleKeys.concat(user?.builder?.apps).find(y => {
-          return x.appId === apps.extractAppId(y)
+          return x.appId === appsStore.extractAppId(y)
         })
       })
     }
     return availableApps.map(app => {
-      const prodAppId = apps.getProdAppID(app.devId)
+      const prodAppId = appsStore.getProdAppID(app.devId)
       return {
         name: app.name,
         devId: app.devId,

packages/builder/src/pages/builder/portal/users/users/_components/AppsTableRenderer.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import { sdk } from "@budibase/shared-core"
 
   export let value
@@ -10,7 +10,7 @@
 
   const getCount = () => {
     if (priviliged) {
-      return $apps.length
+      return $appsStore.apps.length
     } else {
       return sdk.users.hasAppBuilderPermissions(row)
         ? row?.builder?.apps?.length +

packages/builder/src/stores/builder/app.js

@@ -1,5 +1,5 @@
 import { API } from "api"
-import BudiStore from "./BudiStore"
+import BudiStore from "../BudiStore"
 
 export const INITIAL_APP_META_STATE = {
   appId: "",

packages/builder/src/stores/builder/builder.js

@@ -1,7 +1,7 @@
 import { get } from "svelte/store"
 import { createBuilderWebsocket } from "./websocket.js"
 import { BuilderSocketEvent } from "@budibase/shared-core"
-import BudiStore from "./BudiStore"
+import BudiStore from "../BudiStore.js"
 import { TOUR_KEYS } from "components/portal/onboarding/tours.js"
 
 export const INITIAL_BUILDER_STATE = {

packages/builder/src/stores/builder/components.js

@@ -27,7 +27,7 @@ import {
   DB_TYPE_INTERNAL,
   DB_TYPE_EXTERNAL,
 } from "constants/backend"
-import BudiStore from "./BudiStore"
+import BudiStore from "../BudiStore"
 import { Utils } from "@budibase/frontend-core"
 import componentTreeNodesStore from "stores/portal/componentTreeNodesStore"
 

packages/builder/src/stores/builder/hover.js

@@ -1,6 +1,6 @@
 import { get } from "svelte/store"
 import { previewStore } from "stores/builder"
-import BudiStore from "./BudiStore"
+import BudiStore from "../BudiStore"
 
 export const INITIAL_HOVER_STATE = {
   componentId: null,

packages/builder/src/stores/builder/layouts.js

@@ -1,6 +1,6 @@
 import { derived, get } from "svelte/store"
 import { componentStore } from "stores/builder"
-import BudiStore from "./BudiStore"
+import BudiStore from "../BudiStore"
 import { API } from "api"
 
 export const INITIAL_LAYOUT_STATE = {

packages/builder/src/stores/builder/navigation.js

@@ -1,7 +1,7 @@
 import { get } from "svelte/store"
 import { API } from "api"
 import { appStore } from "stores/builder"
-import BudiStore from "./BudiStore"
+import BudiStore from "../BudiStore"
 
 export const INITIAL_NAVIGATION_STATE = {
   navigation: "Top",

packages/builder/src/stores/builder/screens.js

@@ -12,7 +12,7 @@ import {
 } from "stores/builder"
 import { createHistoryStore } from "stores/builder/history"
 import { API } from "api"
-import BudiStore from "./BudiStore"
+import BudiStore from "../BudiStore"
 
 export const INITIAL_SCREENS_STATE = {
   screens: [],

packages/builder/src/stores/builder/websocket.js

@@ -11,7 +11,7 @@ import {
   tables,
 } from "stores/builder"
 import { get } from "svelte/store"
-import { auth, apps } from "stores/portal"
+import { auth, appsStore } from "stores/portal"
 import { screenStore } from "./screens"
 import { SocketEvent, BuilderSocketEvent, helpers } from "@budibase/shared-core"
 import { notifications } from "@budibase/bbui"
@@ -70,7 +70,7 @@ export const createBuilderWebsocket = appId => {
   socket.onOther(
     BuilderSocketEvent.AppPublishChange,
     async ({ user, published }) => {
-      await apps.load()
+      await appsStore.load()
       if (published) {
         await deploymentStore.load()
       }

packages/builder/src/stores/portal/apps.js

@@ -1,39 +1,61 @@
-import { writable } from "svelte/store"
+import { derived } from "svelte/store"
 import { AppStatus } from "constants"
 import { API } from "api"
+import { auth } from "./auth"
+import BudiStore from "../BudiStore" // move this
 
 // properties that should always come from the dev app, not the deployed
 const DEV_PROPS = ["updatedBy", "updatedAt"]
 
-const extractAppId = id => {
+export const INITIAL_APPS_STATE = {
-  const split = id?.split("_") || []
+  apps: [],
-  return split.length ? split[split.length - 1] : null
+  sortBy: "name",
 }
 
-const getProdAppID = appId => {
+export class AppsStore extends BudiStore {
-  if (!appId) {
+  constructor() {
-    return appId
+    super({ ...INITIAL_APPS_STATE })
-  }
-  let rest,
-    separator = ""
-  if (appId.startsWith("app_dev")) {
-    // split to take off the app_dev element, then join it together incase any other app_ exist
-    const split = appId.split("app_dev")
-    split.shift()
-    rest = split.join("app_dev")
-  } else if (!appId.startsWith("app")) {
-    rest = appId
-    separator = "_"
-  } else {
-    return appId
-  }
-  return `app${separator}${rest}`
-}
 
-export function createAppStore() {
+    this.extractAppId = this.extractAppId.bind(this)
-  const store = writable([])
+    this.getProdAppID = this.getProdAppID.bind(this)
+    this.updateSort = this.updateSort.bind(this)
+    this.load = this.load.bind(this)
+    this.save = this.save.bind(this)
+  }
 
-  async function load() {
+  extractAppId(id) {
+    const split = id?.split("_") || []
+    return split.length ? split[split.length - 1] : null
+  }
+
+  getProdAppID(appId) {
+    if (!appId) {
+      return appId
+    }
+    let rest,
+      separator = ""
+    if (appId.startsWith("app_dev")) {
+      // split to take off the app_dev element, then join it together incase any other app_ exist
+      const split = appId.split("app_dev")
+      split.shift()
+      rest = split.join("app_dev")
+    } else if (!appId.startsWith("app")) {
+      rest = appId
+      separator = "_"
+    } else {
+      return appId
+    }
+    return `app${separator}${rest}`
+  }
+
+  updateSort(sortBy) {
+    this.update(state => ({
+      ...state,
+      sortBy,
+    }))
+  }
+
+  async load() {
     const json = await API.getApps()
     if (Array.isArray(json)) {
       // Merge apps into one sensible list
@@ -43,7 +65,7 @@ export function createAppStore() {
 
       // First append all dev app version
       devApps.forEach(app => {
-        const id = extractAppId(app.appId)
+        const id = this.extractAppId(app.appId)
         appMap[id] = {
           ...app,
           devId: app.appId,
@@ -53,7 +75,7 @@ export function createAppStore() {
 
       // Then merge with all prod app versions
       deployedApps.forEach(app => {
-        const id = extractAppId(app.appId)
+        const id = this.extractAppId(app.appId)
 
         // Skip any deployed apps which don't have a dev counterpart
         if (!appMap[id]) {
@@ -81,39 +103,80 @@ export function createAppStore() {
       // Transform into an array and clean up
       const apps = Object.values(appMap)
       apps.forEach(app => {
-        app.appId = extractAppId(app.devId)
+        app.appId = this.extractAppId(app.devId)
         delete app._id
         delete app._rev
       })
-      store.set(apps)
+      this.update(state => ({
+        ...state,
+        apps,
+      }))
     } else {
-      store.set([])
+      this.update(state => ({
+        ...state,
+        apps: [],
+      }))
     }
   }
 
-  async function update(appId, value) {
+  async save(appId, value) {
     await API.saveAppMetadata({
       appId,
       metadata: value,
     })
-    store.update(state => {
+    this.update(state => {
-      const updatedAppIndex = state.findIndex(app => app.instance._id === appId)
+      const updatedAppIndex = state.apps.findIndex(
+        app => app.instance._id === appId
+      )
       if (updatedAppIndex !== -1) {
-        let updatedApp = state[updatedAppIndex]
+        let updatedApp = state.apps[updatedAppIndex]
         updatedApp = { ...updatedApp, ...value }
-        state.apps = state.splice(updatedAppIndex, 1, updatedApp)
+        state.apps = state.apps.splice(updatedAppIndex, 1, updatedApp)
       }
       return state
     })
   }
-
-  return {
-    subscribe: store.subscribe,
-    load,
-    update,
-    extractAppId,
-    getProdAppID,
-  }
 }
 
-export const apps = createAppStore()
+export const appsStore = new AppsStore()
+
+// Centralise any logic that enriches the apps list
+export const enrichedApps = derived([appsStore, auth], ([$store, $auth]) => {
+  const enrichedApps = $store.apps
+    ? $store.apps.map(app => ({
+        ...app,
+        deployed: app.status === AppStatus.DEPLOYED,
+        lockedYou: app.lockedBy && app.lockedBy.email === $auth.user?.email,
+        lockedOther: app.lockedBy && app.lockedBy.email !== $auth.user?.email,
+        favourite: $auth?.user.appFavourites?.includes(app.appId),
+      }))
+    : []
+
+  if ($store.sortBy === "status") {
+    return enrichedApps.sort((a, b) => {
+      if (a.favourite === b.favourite) {
+        if (a.status === b.status) {
+          return a.name?.toLowerCase() < b.name?.toLowerCase() ? -1 : 1
+        }
+        return a.status === AppStatus.DEPLOYED ? -1 : 1
+      }
+      return a.favourite ? -1 : 1
+    })
+  } else if ($store.sortBy === "updated") {
+    return enrichedApps?.sort((a, b) => {
+      if (a.favourite === b.favourite) {
+        const aUpdated = a.updatedAt || "9999"
+        const bUpdated = b.updatedAt || "9999"
+        return aUpdated < bUpdated ? 1 : -1
+      }
+      return a.favourite ? -1 : 1
+    })
+  } else {
+    return enrichedApps?.sort((a, b) => {
+      if (a.favourite === b.favourite) {
+        return a.name?.toLowerCase() < b.name?.toLowerCase() ? -1 : 1
+      }
+      return a.favourite ? -1 : 1
+    })
+  }
+})

packages/builder/src/stores/portal/index.js

@@ -3,7 +3,7 @@ import { writable } from "svelte/store"
 export { organisation } from "./organisation"
 export { users } from "./users"
 export { admin } from "./admin"
-export { apps } from "./apps"
+export { appsStore, enrichedApps } from "./apps"
 export { email } from "./email"
 export { auth } from "./auth"
 export { oidc } from "./oidc"

packages/server/src/api/controllers/application.ts

@@ -682,7 +682,10 @@ export async function duplicateApp(
   // Build a new request
   const createRequest = {
     roleId: ctx.roleId,
-    user: ctx.user,
+    user: {
+      ...ctx.user,
+      _id: dbCore.getGlobalIDFromUserMetadataID(ctx.user._id || ""),
+    },
     request: {
       body: createRequestBody,
     },

packages/types/src/api/web/auth.ts

@@ -18,6 +18,7 @@ export interface UpdateSelfRequest {
   password?: string
   forceResetPassword?: boolean
   onboardedAt?: string
+  appFavourites?: string[]
   tours?: Record<string, Date>
 }
 

packages/types/src/documents/global/user.ts

@@ -57,6 +57,7 @@ export interface User extends Document {
   onboardedAt?: string
   tours?: Record<string, Date>
   scimInfo?: { isSync: true } & Record<string, any>
+  appFavourites?: string[]
   ssoId?: string
 }
 

packages/worker/src/api/controllers/global/self.ts

@@ -9,7 +9,12 @@ import {
 } from "@budibase/backend-core"
 import env from "../../../environment"
 import { groups } from "@budibase/pro"
-import { UpdateSelfRequest, UpdateSelfResponse, UserCtx } from "@budibase/types"
+import {
+  UpdateSelfRequest,
+  UpdateSelfResponse,
+  User,
+  UserCtx,
+} from "@budibase/types"
 
 const { newid } = utils
 
@@ -105,16 +110,63 @@ export async function getSelf(ctx: any) {
   addSessionAttributesToUser(ctx)
 }
 
+export const syncAppFavourites = async (processedAppIds: string[]) => {
+  if (processedAppIds.length === 0) {
+    return []
+  }
+  const apps = await fetchAppsByIds(processedAppIds)
+  return apps?.reduce((acc: string[], app) => {
+    const id = app.appId.replace(dbCore.APP_DEV_PREFIX, "")
+    if (processedAppIds.includes(id)) {
+      acc.push(id)
+    }
+    return acc
+  }, [])
+}
+
+export const fetchAppsByIds = async (processedAppIds: string[]) => {
+  return await dbCore.getAppsByIDs(
+    processedAppIds.map(appId => `${dbCore.APP_DEV_PREFIX}${appId}`)
+  )
+}
+
+const processUserAppFavourites = async (
+  user: User,
+  update: UpdateSelfRequest
+) => {
+  if (!("appFavourites" in update)) {
+    // Ignore requests without an explicit update to favourites.
+    return
+  }
+
+  const userAppFavourites = user.appFavourites || []
+  const requestAppFavourites = new Set(update.appFavourites || [])
+  const containsAll = userAppFavourites.every(v => requestAppFavourites.has(v))
+
+  if (containsAll && requestAppFavourites.size === userAppFavourites.length) {
+    // Ignore request if the outcome will have no change
+    return
+  }
+
+  // Clean up the request by purging apps that no longer exist.
+  const syncedAppFavourites = await syncAppFavourites([...requestAppFavourites])
+  return syncedAppFavourites
+}
+
 export async function updateSelf(
   ctx: UserCtx<UpdateSelfRequest, UpdateSelfResponse>
 ) {
   const update = ctx.request.body
 
   let user = await userSdk.db.getUser(ctx.user._id!)
+  const updatedAppFavourites = await processUserAppFavourites(user, update)
+
   user = {
     ...user,
     ...update,
+    ...(updatedAppFavourites ? { appFavourites: updatedAppFavourites } : {}),
   }
+
   user = await userSdk.db.save(user, { requirePassword: false })
 
   if (update.password) {

packages/worker/src/api/routes/validation/users.ts

@@ -26,6 +26,7 @@ export const buildSelfSaveValidation = () => {
     firstName: OPTIONAL_STRING,
     lastName: OPTIONAL_STRING,
     onboardedAt: Joi.string().optional(),
+    appFavourites: Joi.array().optional(),
     tours: Joi.object().optional(),
   }
   return auth.joiValidator.body(Joi.object(schema).required().unknown(false))