Fix route choice when using devtools role preview and fix devtools role ID not being passed down in context

packages/client/src/components/ClientApp.svelte

@@ -58,8 +58,22 @@
       if ($authStore) {
         // There is a logged in user, so handle them
         if ($screenStore.screens.length) {
+          let firstRoute
+
+          // If using devtools, find the first screen matching our role
+          if ($devToolsStore.role) {
+            firstRoute =
+              $screenStore.screens.filter(
+                screen => screen.routing?.roleId === $devToolsStore.role
+              )[0]?.routing?.route || "/"
+          }
+
+          // Otherwise just use the fist route
+          else {
+            firstRoute = $screenStore.screens[0]?.routing?.route ?? "/"
+          }
+
           // Screens exist so navigate back to the home screen
-          const firstRoute = $screenStore.screens[0].routing?.route ?? "/"
           routeStore.actions.navigate(firstRoute)
         } else {
           // No screens likely means the user has no permissions to view this app

packages/client/src/components/context/UserBindingsProvider.svelte

@@ -1,6 +1,6 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { authStore } from "stores"
+  import { authStore, devToolsStore } from "stores"
   import { ActionTypes } from "constants"
   import { Constants } from "@budibase/frontend-core"
 
@@ -17,6 +17,10 @@
   ]
 </script>
 
-<Provider key="user" data={$authStore} {actions}>
+<Provider
+  key="user"
+  data={{ ...$authStore, roleId: $devToolsStore.role || $authStore?.roleId }}
+  {actions}
+>
   <slot />
 </Provider>

packages/client/src/components/devtools/DevTools.svelte

@@ -41,7 +41,7 @@
 
 <style>
   .devtools {
-    background: var(--spectrum-alias-background-color-secondary);
+    background: var(--spectrum-alias-background-color-primary);
     flex: 0 0 320px;
     border-left: 1px solid var(--spectrum-global-color-gray-300);
     overflow: auto;

packages/client/src/components/devtools/DevToolsComponentTab.svelte

@@ -40,6 +40,7 @@
         value={$componentStore.selectedComponentDefinition?.name}
       />
       <DevToolsStat
+        copyable
         label="Component ID"
         value={$componentStore.selectedComponent?._id}
       />