Tidy up

packages/client/src/components/ClientApp.svelte

@@ -63,10 +63,10 @@
 
           // If using devtools, find the first screen matching our role
           if ($devToolsStore.role) {
-            firstRoute =
+            const roleRoutes = $screenStore.screens.filter(
-              $screenStore.screens.filter(
+              screen => screen.routing?.roleId === $devToolsStore.role
-                screen => screen.routing?.roleId === $devToolsStore.role
+            )
-              )[0]?.routing?.route || "/"
+            firstRoute = roleRoutes[0]?.routing?.route || "/"
           }
 
           // Otherwise just use the fist route
@@ -143,10 +143,10 @@
                       {/key}
 
                       <!--
-                      Flatpickr needs to be inside the theme wrapper.
+                        Flatpickr needs to be inside the theme wrapper.
-                      It also needs its own container because otherwise it hijacks
+                        It also needs its own container because otherwise it hijacks
-                      key events on the whole page. It is painful to work with.
+                        key events on the whole page. It is painful to work with.
-                    -->
+                      -->
                       <div id="flatpickr-root" />
 
                       <!-- Modal container to ensure they sit on top -->
@@ -164,12 +164,10 @@
                   </div>
                 </div>
 
-                <!-- Selection indicators should be bounded by device -->
+                <!-- Preview and dev tools utilities  -->
-                <!--
+                {#if $appStore.isDevApp}
-                  We don't want to key these by componentID as they control their own
+                  <SelectionIndicator />
-                  re-mounting to avoid flashes.
+                {/if}
-                -->
-                <SelectionIndicator />
                 {#if $builderStore.inBuilder || $devToolsStore.allowSelection}
                   <HoverIndicator />
                 {/if}
@@ -219,6 +217,7 @@
     justify-content: flex-start;
     align-items: stretch;
   }
+
   #app-body {
     flex: 1 1 auto;
     display: flex;

packages/server/src/middleware/currentapp.js

@@ -70,7 +70,7 @@ module.exports = async (ctx, next) => {
     const isDevApp = appId && isDevAppID(appId)
     const roleHeader = ctx.request.headers[Headers.PREVIEW_ROLE]
     if (isBuilder && isDevApp && roleHeader) {
-      // Ensure the role is valid ensuring a definition exists
+      // Ensure the role is valid by ensuring a definition exists
       try {
         await getRole(roleHeader)
         roleId = roleHeader