Update screen list to match designs. Update nav items to make text clearer. Update screen picker

packages/builder/src/components/common/NavItem.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Icon, StatusLight } from "@budibase/bbui"
+  import { Icon } from "@budibase/bbui"
   import { createEventDispatcher, getContext } from "svelte"
 
   export let icon
@@ -14,8 +14,8 @@
   export let iconText
   export let iconColor
   export let scrollable = false
-  export let color
   export let highlighted = false
+  export let rightAlignIcon = false
 
   const scrollApi = getContext("scroll")
   const dispatch = createEventDispatcher()
@@ -78,7 +78,7 @@
         {iconText}
       </div>
     {:else if icon}
-      <div class="icon">
+      <div class="icon" class:right={rightAlignIcon}>
         <Icon color={iconColor} size="S" name={icon} />
       </div>
     {/if}
@@ -88,9 +88,9 @@
         <slot />
       </div>
     {/if}
-    {#if color}
+    {#if $$slots.right}
-      <div class="light">
+      <div class="right">
-        <StatusLight size="L" {color} />
+        <slot name="right" />
       </div>
     {/if}
   </div>
@@ -107,7 +107,7 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    align-items: center;
+    align-items: stretch;
   }
   .nav-item.scrollable {
     flex-direction: column;
@@ -135,10 +135,8 @@
     align-items: center;
     gap: var(--spacing-xs);
     width: max-content;
-    overflow: hidden;
     position: relative;
     padding-left: var(--spacing-l);
-    pointer-events: none;
   }
 
   /* Needed to fully display the actions icon */
@@ -153,10 +151,15 @@
     justify-content: center;
     align-items: center;
     color: var(--spectrum-global-color-gray-600);
+    order: 1;
+  }
+  .icon.right {
+    order: 4;
   }
   .icon.arrow {
     flex: 0 0 20px;
     pointer-events: all;
+    order: 0;
   }
   .icon.arrow.absolute {
     position: absolute;
@@ -183,16 +186,19 @@
 
   .text {
     font-weight: 600;
-    font-size: 12px;
+    font-size: 14px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     flex: 1 1 auto;
-    color: var(--spectrum-global-color-gray-800);
+    color: var(--spectrum-global-color-gray-900);
+    order: 2;
+    width: 0;
   }
   .scrollable .text {
     flex: 0 0 auto;
     max-width: 160px;
+    width: auto;
   }
 
   .actions {
@@ -201,18 +207,17 @@
     display: grid;
     place-items: center;
     visibility: hidden;
-  }
+    order: 3;
-  .actions,
+    opacity: 0;
-  .light :global(.spectrum-StatusLight) {
     width: 20px;
     height: 20px;
-    margin-left: var(--spacing-s);
+    margin-left: var(--spacing-xs);
   }
-  .light {
+  .nav-item.withActions:hover .actions {
-    position: absolute;
+    opacity: 1;
-    right: 0;
   }
-  .nav-item.withActions:hover .light {
+
-    display: none;
+  .right {
+    order: 10;
   }
 </style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte

@@ -1,10 +1,9 @@
 <script>
   import DevicePreviewSelect from "./DevicePreviewSelect.svelte"
   import AppPreview from "./AppPreview.svelte"
-  import { store, selectedScreen, sortedScreens } from "builderStore"
+  import { store, sortedScreens } from "builderStore"
-  import { Button, Select } from "@budibase/bbui"
+  import { Select } from "@budibase/bbui"
   import { RoleUtils } from "@budibase/frontend-core"
-  import { goto } from "@roxi/routify"
 </script>
 
 <div class="app-panel">
@@ -15,10 +14,11 @@
         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)}
         value={$store.selectedScreenId}
         on:change={e => store.actions.screens.select(e.detail)}
+        quiet
+        autoWidth
       />
     </div>
     <div class="header-right">
@@ -62,7 +62,8 @@
     gap: var(--spacing-l);
   }
   .header-left :global(.spectrum-Picker) {
-    width: 250px;
+    font-weight: 600;
+    color: var(--spectrum-global-color-gray-900);
   }
   .content {
     flex: 1 1 auto;

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte

@@ -24,7 +24,7 @@
     let newOffsets = {}
 
     // Calculate left offset
-    const offsetX = bounds.left + bounds.width + scrollLeft - 58
+    const offsetX = bounds.left + bounds.width + scrollLeft - 39
     if (offsetX > sidebarWidth) {
       newOffsets.left = offsetX - sidebarWidth
     } else {

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte

@@ -0,0 +1,58 @@
+<script>
+  import { RoleUtils } from "@budibase/frontend-core"
+  import { Tooltip, StatusLight } from "@budibase/bbui"
+  import { roles } from "stores/backend"
+  import { Roles } from "constants/backend"
+
+  export let roleId
+
+  let showTooltip = false
+
+  $: color = RoleUtils.getRoleColour(roleId)
+  $: role = $roles.find(role => role._id === roleId)
+  $: tooltip =
+    roleId === Roles.PUBLIC
+      ? "This screen is open to the public"
+      : `Requires at least ${role?.name} access`
+</script>
+
+<div
+  class="container"
+  on:mouseover={() => (showTooltip = true)}
+  on:mouseleave={() => (showTooltip = false)}
+  style="--color: {color};"
+>
+  <StatusLight square {color} />
+  {#if showTooltip}
+    <div class="tooltip">
+      <Tooltip textWrapping text={tooltip} direction="left" />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .container {
+    position: relative;
+  }
+  .tooltip {
+    z-index: 1;
+    position: absolute;
+    top: 50%;
+    left: calc(50% - 8px);
+    transform: translateX(-100%) translateY(-50%);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    width: 130px;
+    pointer-events: none;
+  }
+  .tooltip :global(.spectrum-Tooltip) {
+    background: var(--color);
+    color: white;
+    font-weight: 600;
+    max-width: 130px;
+  }
+  .tooltip :global(.spectrum-Tooltip-tip) {
+    border-top-color: var(--color);
+  }
+</style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte

@@ -6,6 +6,7 @@
   import NavItem from "components/common/NavItem.svelte"
   import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
   import ScreenWizard from "./ScreenWizard.svelte"
+  import RoleIndicator from "./RoleIndicator.svelte"
   import { RoleUtils } from "@budibase/frontend-core"
 
   let searchString
@@ -52,14 +53,15 @@
   </Layout>
   {#each filteredScreens as screen (screen._id)}
     <NavItem
-      icon={screen.routing.homeScreen ? "Home" : "WebPage"}
+      icon={screen.routing.homeScreen ? "Home" : null}
       indentLevel={0}
       selected={$store.selectedScreenId === screen._id}
       text={screen.routing.route}
       on:click={() => store.actions.screens.select(screen._id)}
-      color={RoleUtils.getRoleColour(screen.routing.roleId)}
+      rightAlignIcon
     >
       <ScreenDropdownMenu screenId={screen._id} />
+      <RoleIndicator slot="right" roleId={screen.routing.roleId} />
     </NavItem>
   {/each}
   {#if !filteredScreens?.length}