Centrally sort screens to allow consistency across design UI

packages/builder/src/builderStore/index.js

@@ -4,6 +4,7 @@ import { getThemeStore } from "./store/theme"
 import { derived, writable } from "svelte/store"
 import { LAYOUT_NAMES } from "../constants"
 import { findComponent, findComponentPath } from "./componentUtils"
+import { RoleUtils } from "@budibase/frontend-core"
 
 export const store = getFrontendStore()
 export const automationStore = getAutomationStore()
@@ -13,6 +14,25 @@ export const selectedScreen = derived(store, $store => {
   return $store.screens.find(screen => screen._id === $store.selectedScreenId)
 })
 
+export const sortedScreens = derived(store, $store => {
+  return $store.screens.slice().sort((a, b) => {
+    // Sort by role first
+    const roleA = RoleUtils.getRolePriority(a.routing.roleId)
+    const roleB = RoleUtils.getRolePriority(b.routing.roleId)
+    if (roleA !== roleB) {
+      return roleA > roleB ? -1 : 1
+    }
+    // Then put home screens first
+    const homeA = !!a.routing.homeScreen
+    const homeB = !!b.routing.homeScreen
+    if (homeA !== homeB) {
+      return homeA ? -1 : 1
+    }
+    // Finally sort alphabetically by route
+    return a.routing.route < b.routing.route ? -1 : 1
+  })
+})
+
 export const selectedComponent = derived(
   [store, selectedScreen],
   ([$store, $selectedScreen]) => {