persist app sort method selection by saving it against the user

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

@@ -26,6 +26,7 @@
     licensing,
     environment,
     enrichedApps,
+    sortBy,
   } from "stores/portal"
   import { goto } from "@roxi/routify"
   import AppRow from "components/start/AppRow.svelte"
@@ -247,7 +248,7 @@
             <div class="app-actions">
               <Select
                 autoWidth
-                value={$appsStore.sortBy}
+                value={$sortBy}
                 on:change={e => {
                   appsStore.updateSort(e.detail)
                 }}

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

@@ -9,7 +9,6 @@ const DEV_PROPS = ["updatedBy", "updatedAt"]
 
 export const INITIAL_APPS_STATE = {
   apps: [],
-  sortBy: "name",
 }
 
 export class AppsStore extends BudiStore {
@@ -53,6 +52,15 @@ export class AppsStore extends BudiStore {
       ...state,
       sortBy,
     }))
+    this.updateUserSort(sortBy)
+  }
+
+  async updateUserSort(sortBy) {
+    try {
+      await auth.updateSelf({ appSort: sortBy })
+    } catch (err) {
+      console.error("couldn't save user sort: ", err)
+    }
   }
 
   async load() {
@@ -140,43 +148,50 @@ export class AppsStore extends BudiStore {
 
 export const appsStore = new AppsStore()
 
-// Centralise any logic that enriches the apps list
+export const sortBy = derived([appsStore, auth], ([$store, $auth]) => {
-export const enrichedApps = derived([appsStore, auth], ([$store, $auth]) => {
+  return $store.sortBy || $auth.user?.appSort || "name"
-  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") {
+// Centralise any logic that enriches the apps list
-    return enrichedApps.sort((a, b) => {
+export const enrichedApps = derived(
-      if (a.favourite === b.favourite) {
+  [appsStore, auth, sortBy],
-        if (a.status === b.status) {
+  ([$store, $auth, $sortBy]) => {
+    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 ($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 ($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.status === AppStatus.DEPLOYED ? -1 : 1
+        return a.favourite ? -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 { appsStore, enrichedApps } from "./apps"
+export { appsStore, enrichedApps, sortBy } from "./apps"
 export { email } from "./email"
 export { auth } from "./auth"
 export { oidc } from "./oidc"

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

@@ -21,6 +21,7 @@ export interface UpdateSelfRequest {
   freeTrialConfirmedAt?: string
   appFavourites?: string[]
   tours?: Record<string, Date>
+  appSort?: string
 }
 
 export interface UpdateSelfResponse {

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

@@ -67,6 +67,7 @@ export interface User extends Document {
   scimInfo?: { isSync: true } & Record<string, any>
   appFavourites?: string[]
   ssoId?: string
+  appSort?: string
 }
 
 export enum UserStatus {

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

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