From c0ffd9f518463cdff6d67bfb8a831d4a6a6d2887 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 10 May 2022 13:33:05 +0100
Subject: [PATCH] Use sorted screens in both screen navigation panel and above
 preview

---
 .../[screenId]/_components/AppPanel.svelte    | 14 +++-----
 .../_components/ScreenNavigationPanel.svelte  | 34 +++++--------------
 2 files changed, 13 insertions(+), 35 deletions(-)
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
index 29114dfff5..3a91dbee88 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
@@ -1,8 +1,8 @@
 <script>
   import DevicePreviewSelect from "./DevicePreviewSelect.svelte"
   import AppPreview from "./AppPreview.svelte"
-  import { store, selectedScreen } from "builderStore"
-  import { Button, Select, StatusLight, Body } from "@budibase/bbui"
+  import { store, selectedScreen, sortedScreens } from "builderStore"
+  import { Button, Select, StatusLight, Body, Badge } from "@budibase/bbui"
   import { RoleUtils } from "@budibase/frontend-core"
   import { roles } from "stores/backend"
   import { goto } from "@roxi/routify"
@@ -16,17 +16,13 @@
   <div class="header">
     <div class="header-left">
       <Select
-        options={$store.screens}
+        options={$sortedScreens}
         getOptionLabel={x => x.routing.route}
         getOptionValue={x => x._id}
         getOptionIcon={x => (x.routing.homeScreen ? "Home" : "WebPage")}
+        getOptionColour={x => RoleUtils.getRoleColour(x.routing.roleId)}
         bind:value={$store.selectedScreenId}
       />
-      <StatusLight custom color={roleColor}>
-        <Body size="S">
-          {roleName} access
-        </Body>
-      </StatusLight>
     </div>
     <div class="header-right">
       {#if $store.clientFeatures.devicePreview}
@@ -75,7 +71,7 @@
     gap: var(--spacing-l);
   }
   .header-left :global(.spectrum-Picker) {
-    width: 240px;
+    width: 250px;
   }
   .content {
     flex: 1 1 auto;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenNavigationPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenNavigationPanel.svelte
index 2ab5f1665e..1a4018899d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenNavigationPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenNavigationPanel.svelte
@@ -2,7 +2,7 @@
   import { Search, Layout, Select, Body } from "@budibase/bbui"
   import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
   import { roles } from "stores/backend"
-  import { store } from "builderStore"
+  import { store, sortedScreens } from "builderStore"
   import NavItem from "components/common/NavItem.svelte"
   import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
   import ScreenWizard from "./ScreenWizard.svelte"
@@ -13,36 +13,18 @@
   let showNewScreenModal
 
   $: filteredScreens = getFilteredScreens(
-    $store.screens,
+    $sortedScreens,
     searchString,
     accessRole
   )
 
   const getFilteredScreens = (screens, search, role) => {
-    return screens
-      .filter(screen => {
-        const searchMatch = !search || screen.routing.route.includes(search)
-        const roleMatch =
-          !role || role === "all" || screen.routing.roleId === role
-        return searchMatch && roleMatch
-      })
-      .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
-      })
+    return screens.filter(screen => {
+      const searchMatch = !search || screen.routing.route.includes(search)
+      const roleMatch =
+        !role || role === "all" || screen.routing.roleId === role
+      return searchMatch && roleMatch
+    })
   }
 </script>
 
