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,8 +148,14 @@ export class AppsStore extends BudiStore {
 
 export const appsStore = new AppsStore()
 
+export const sortBy = derived([appsStore, auth], ([$store, $auth]) => {
+  return $store.sortBy || $auth.user?.appSort || "name"
+})
+
 // Centralise any logic that enriches the apps list
-export const enrichedApps = derived([appsStore, auth], ([$store, $auth]) => {
+export const enrichedApps = derived(
+  [appsStore, auth, sortBy],
+  ([$store, $auth, $sortBy]) => {
     const enrichedApps = $store.apps
       ? $store.apps.map(app => ({
           ...app,
@@ -152,7 +166,7 @@ export const enrichedApps = derived([appsStore, auth], ([$store, $auth]) => {
         }))
       : []
 
-  if ($store.sortBy === "status") {
+    if ($sortBy === "status") {
       return enrichedApps.sort((a, b) => {
         if (a.favourite === b.favourite) {
           if (a.status === b.status) {
@@ -162,7 +176,7 @@ export const enrichedApps = derived([appsStore, auth], ([$store, $auth]) => {
         }
         return a.favourite ? -1 : 1
       })
-  } else if ($store.sortBy === "updated") {
+    } else if ($sortBy === "updated") {
       return enrichedApps?.sort((a, b) => {
         if (a.favourite === b.favourite) {
           const aUpdated = a.updatedAt || "9999"
@@ -179,4 +193,5 @@ export const enrichedApps = derived([appsStore, auth], ([$store, $auth]) => {
         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))
 }