Merge pull request #13205 from Budibase/feature/app-favourites

App favourites
2024-03-15 12:10:53 +00:00 · 2024-03-15 12:10:53 +00:00 · c366fb4443
parent bb25a6b16a 8819beeba2
commit c366fb4443
50 changed files with 654 additions and 345 deletions
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/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 { fade } from "svelte/transition"
+  import {
+    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 -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div
-  class="icon"
-  class:newStyles
-  on:mouseover={() => (showTooltip = true)}
-  on:focus={() => (showTooltip = true)}
-  on:mouseleave={() => (showTooltip = false)}
-  on:click={() => (showTooltip = false)}
+<AbsTooltip
+  text={tooltip}
+  type={tooltipType}
+  position={tooltipPosition}
+  color={tooltipColor}
+  noWrap={tooltipWrap}
 >
-  <svg
-    on:click
-    class:hoverable
-    class:disabled
-    class="spectrum-Icon spectrum-Icon--size{size}"
-    focusable="false"
-    aria-hidden={hidden}
-    aria-label={name}
-    style={`transform: rotate(${rotation}deg); ${
-      color ? `color: ${color};` : ""
-    }`}
-  >
-    <use style="pointer-events: none;" xlink:href="#spectrum-icon-18-{name}" />
-  </svg>
-  {#if tooltip && showTooltip}
-    <div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
-      <Tooltip textWrapping direction="top" text={tooltip} />
-    </div>
-  {/if}
-</div>
+  <div class="icon" class:newStyles>
+    <svg
+      on:click
+      class:hoverable
+      class:disabled
+      class="spectrum-Icon spectrum-Icon--size{size}"
+      focusable="false"
+      aria-hidden={hidden}
+      aria-label={name}
+      style={`${color ? `color: ${color};` : ""} ${
+        hoverColor
+          ? `--hover-color: ${hoverColor}`
+          : "--hover-color: var(--spectrum-alias-icon-color-selected-hover)"
+      }`}
+    >
+      <use
+        style="pointer-events: none;"
+        xlink:href="#spectrum-icon-18-{name}"
+      />
+    </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 {
--- a/packages/bbui/src/Tooltip/AbsTooltip.svelte
+++ b/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;
--- a/packages/bbui/src/index.js
+++ b/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"
--- a/packages/builder/src/components/common/NavHeader.svelte
+++ b/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>

--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/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 {
--- a/packages/builder/src/components/deploy/AppActions.svelte
+++ b/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")
--- a/packages/builder/src/components/deploy/DeleteModal.svelte
+++ b/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) {
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/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}>
-        Edit
-      </Button>
-      <AppRowContext {app} />
+      {#if isBuilder}
+        <div class="row-action">
+          <Button size="S" secondary on:click={lockedAction || goToBuilder}>
+            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="app-row-actions">
-      <Button size="S" secondary>View</Button>
+
+    <div class="favourite-icon">
+      <FavouriteAppButton {app} noWrap />
    </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 {
--- a/packages/builder/src/components/start/AppRowContext.svelte
+++ b/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"
-    on:click={() => {
-      if ($licensing?.usageMetrics?.apps < 100) {
-        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
+
+  {#each actions as action}
+    <MenuItem icon={action.icon} on:click={action.onClick}>
+      {action.body}
    </MenuItem>
-  {/if}
-  <MenuItem
-    icon="Delete"
-    on:click={() => {
-      deleteModal.show()
-    }}
-  >
-    Delete
-  </MenuItem>
+  {/each}
 </ActionMenu>
--- a/packages/builder/src/components/start/ChooseIconModal.svelte
+++ b/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) {
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/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
--- a/packages/builder/src/components/start/DuplicateAppModal.svelte
+++ b/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)
-      apps.load()
+      const app = await API.duplicateApp(data, appId)
+      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 })

--- a/packages/builder/src/components/start/UpdateAppModal.svelte
+++ b/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: {
--- a/packages/builder/src/global.css
+++ b/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);
--- a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
+++ b/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,
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/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
--- a/packages/builder/src/pages/builder/app/[application]/settings/automations/index.svelte
+++ b/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,
        },
--- a/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
+++ b/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
--- a/packages/builder/src/pages/builder/app/[application]/settings/exportImport.svelte
+++ b/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

--- a/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
+++ b/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

--- a/packages/builder/src/pages/builder/apps/index.svelte
+++ b/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")
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/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")
        }
--- a/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
+++ b/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)
--- a/packages/builder/src/pages/builder/portal/apps/FavouriteAppButton.svelte
+++ b/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}
+/>
--- a/packages/builder/src/pages/builder/portal/apps/[appId]/_layout.svelte
+++ b/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("../")
--- a/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
+++ b/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 { Link, Body, ActionButton } from "@budibase/bbui"
+  import { auth, sideBarCollapsed, enrichedApps } from "stores/portal"
+  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
-        quiet
-        icon="Rail"
-        on:click={() => sideBarCollapsed.set(false)}
-      >
-        Menu
-      </ActionButton>
+      <div class="headerButton" on:click={() => sideBarCollapsed.set(false)}>
+        <Icon
+          name={"Rail"}
+          hoverable
+          tooltip="Expand"
+          tooltipPosition={TooltipPosition.Right}
+          tooltipType={TooltipType.Info}
+          hoverColor={"var(--ink)"}
+        />
+      </div>
    {:else}
-      <ActionButton
-        quiet
-        icon="RailRightOpen"
-        on:click={() => sideBarCollapsed.set(true)}
-      >
-        Collapse
-      </ActionButton>
+      <div class="headerButton" on:click={() => sideBarCollapsed.set(true)}>
+        <Icon
+          name={"RailRightOpen"}
+          hoverable
+          tooltip="Collapse"
+          tooltipType={TooltipType.Info}
+          tooltipPosition={TooltipPosition.Top}
+          hoverColor={"var(--ink)"}
+          size="S"
+        />
+      </div>
    {/if}
    {#if isBuilder}
-      <ActionButton
-        quiet
-        icon="Edit"
+      <Button
+        size="M"
+        secondary
        on:click={() => $goto(`/builder/app/${app.devId}`)}
      >
        Edit
-      </ActionButton>
+      </Button>
    {/if}
-    <ActionButton
-      disabled={noScreens}
-      quiet
-      icon="LinkOut"
-      on:click={() => window.open(iframeUrl, "_blank")}
-    >
-      Fullscreen
-    </ActionButton>
+    <div class="headerButton">
+      <FavouriteAppButton {app} />
+    </div>
+    <div class="headerButton" on:click={() => window.open(iframeUrl, "_blank")}>
+      <Icon
+        name="LinkOut"
+        disabled={noScreens}
+        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;
  }

--- a/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
+++ b/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
-    .filter(app => {
-      return (
-        !searchString ||
-        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
-    })
+  $: filteredApps = $enrichedApps.filter(app => {
+    return (
+      !searchString ||
+      app.name.toLowerCase().includes(searchString.toLowerCase())
+    )
+  })
 </script>

 <div class="side-bar" class:collapsed={$sideBarCollapsed}>
@ -47,27 +35,40 @@
      selected={!$params.appId}
    />
    {#each filteredApps as app}
-      <NavItem
-        text={app.name}
-        icon={app.icon?.name || "Apps"}
-        iconColor={app.icon?.color}
-        selected={$params.appId === app.appId}
-        highlighted={opened == app.appId}
-        on:click={() => $goto(`./${app.appId}`)}
+      <span
+        class="side-bar-app-entry"
+        class:favourite={app.favourite}
+        class:actionsOpen={opened == app.appId}
      >
-        {#if sdk.users.isBuilder($auth.user, app?.devId)}
-          <AppRowContext
-            {app}
-            align="left"
-            on:open={() => {
-              opened = app.appId
-            }}
-            on:close={() => {
-              opened = null
-            }}
-          />
-        {/if}
-      </NavItem>
+        <NavItem
+          text={app.name}
+          icon={app.icon?.name || "Apps"}
+          iconColor={app.icon?.color}
+          selected={$params.appId === app.appId}
+          highlighted={opened == app.appId}
+          on:click={() => $goto(`./${app.appId}`)}
+          withActions
+          showActions
+        >
+          <div class="app-entry-actions">
+            {#if sdk.users.isBuilder($auth.user, app?.devId)}
+              <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>
--- a/packages/builder/src/pages/builder/portal/apps/_layout.svelte
+++ b/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 />
--- a/packages/builder/src/pages/builder/portal/apps/create.svelte
+++ b/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>
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/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 = enrichedApps.filter(
-    app =>
-      (searchTerm
-        ? app?.name?.toLowerCase().includes(searchTerm.toLowerCase())
-        : true) &&
-      (accessFilterList !== null
-        ? accessFilterList?.includes(
-            `${app?.type}_${app?.tenantId}_${app?.appId}`
-          )
-        : true)
-  )
-  $: automationErrors = getAutomationErrors(enrichedApps)
+  $: filteredApps = filterApps($enrichedApps, searchTerm)
+  $: automationErrors = getAutomationErrors(filteredApps || [])
  $: 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>
--- a/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
+++ b/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: () => {},
--- a/packages/builder/src/pages/builder/portal/users/groups/_components/AppAddModal.svelte
+++ b/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)
--- a/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
+++ b/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,
--- a/packages/builder/src/pages/builder/portal/users/users/_components/AppsTableRenderer.svelte
+++ b/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 +
--- a/packages/builder/src/stores/builder/BudiStore.js
+++ b/packages/builder/src/stores/builder/BudiStore.js
--- a/packages/builder/src/stores/builder/app.js
+++ b/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: "",
--- a/packages/builder/src/stores/builder/builder.js
+++ b/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 = {
--- a/packages/builder/src/stores/builder/components.js
+++ b/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"

--- a/packages/builder/src/stores/builder/hover.js
+++ b/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,
--- a/packages/builder/src/stores/builder/layouts.js
+++ b/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 = {
--- a/packages/builder/src/stores/builder/navigation.js
+++ b/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",
--- a/packages/builder/src/stores/builder/screens.js
+++ b/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: [],
--- a/packages/builder/src/stores/builder/websocket.js
+++ b/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()
      }
--- a/packages/builder/src/stores/portal/apps.js
+++ b/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 => {
-  const split = id?.split("_") || []
-  return split.length ? split[split.length - 1] : null
+export const INITIAL_APPS_STATE = {
+  apps: [],
+  sortBy: "name",
 }

-const 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}`
-}
+export class AppsStore extends BudiStore {
+  constructor() {
+    super({ ...INITIAL_APPS_STATE })

-export function createAppStore() {
-  const store = writable([])
+    this.extractAppId = this.extractAppId.bind(this)
+    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 => {
-      const updatedAppIndex = state.findIndex(app => app.instance._id === appId)
+    this.update(state => {
+      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
+    })
+  }
+})
--- a/packages/builder/src/stores/portal/index.js
+++ b/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"
--- a/packages/server/src/api/controllers/application.ts
+++ b/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,
    },
--- a/packages/types/src/api/web/auth.ts
+++ b/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>
 }

--- a/packages/types/src/documents/global/user.ts
+++ b/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
 }

--- a/packages/worker/src/api/controllers/global/self.ts
+++ b/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) {
--- a/packages/worker/src/api/routes/validation/users.ts
+++ b/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))