From a063011c4786bcf5ba0c1edfed94acb1aa9e7ffd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 26 Apr 2022 09:44:59 +0100
Subject: [PATCH] Add new components above app preview

---
 .../design/AppPanel/AppPanel.svelte           | 59 +++++++++++++++----
 1 file changed, 48 insertions(+), 11 deletions(-)
diff --git a/packages/builder/src/components/design/AppPanel/AppPanel.svelte b/packages/builder/src/components/design/AppPanel/AppPanel.svelte
index 96f5a24872..a2b924ecef 100644
--- a/packages/builder/src/components/design/AppPanel/AppPanel.svelte
+++ b/packages/builder/src/components/design/AppPanel/AppPanel.svelte
@@ -1,14 +1,47 @@
 <script>
   import DevicePreviewSelect from "./DevicePreviewSelect.svelte"
   import AppPreview from "./AppPreview.svelte"
-  import { store } from "builderStore"
+  import { store, selectedScreen } from "builderStore"
+  import { Button, Select, StatusLight, Body } from "@budibase/bbui"
+  import { RoleColours } from "constants"
+  import { roles } from "stores/backend"
+  import { goto } from "@roxi/routify"
+
+  $: roleId = $selectedScreen?.routing.roleId
+  $: roleColor = getRoleColor(roleId)
+  $: roleName = $roles.find(x => x._id === roleId)?.name || "Unknown"
+
+  // Needs to be absolute as we embed this component from multiple different URLs
+  $: newComponentUrl = `/builder/app/${store.appId}/design/components/${$selectedScreen?._id}/new`
+
+  const getRoleColor = roleId => {
+    return RoleColours[roleId] || "#ffa500"
+  }
 </script>
 
 <div class="app-panel">
   <div class="header">
-    {#if $store.clientFeatures.devicePreview}
-      <DevicePreviewSelect />
-    {/if}
+    <div class="header-left">
+      <Select
+        options={$store.screens}
+        getOptionLabel={x => x.routing.route}
+        getOptionValue={x => x._id}
+        bind:value={$store.selectedScreenId}
+      />
+      <StatusLight custom color={roleColor}>
+        <Body size="S">
+          {roleName} access
+        </Body>
+      </StatusLight>
+    </div>
+    <div class="header-right">
+      {#if $store.clientFeatures.devicePreview}
+        <DevicePreviewSelect />
+      {/if}
+      <Button cta icon="Add" on:click={() => $goto(newComponentUrl)}>
+        Component
+      </Button>
+    </div>
   </div>
   <div class="content">
     {#key $store.version}
@@ -31,16 +64,20 @@
   .header {
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
+    justify-content: space-between;
     align-items: flex-start;
-    gap: 1rem;
-    margin-left: -6px;
+    gap: var(--spacing-l);
   }
-  .header > :global(*) {
-    flex: 0 0 auto;
+  .header-left,
+  .header-right {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-l);
   }
-  .header > :global(*:first-child) {
-    flex: 1 1 auto;
+  .header-left :global(.spectrum-Picker) {
+    width: 200px;
   }
   .content {
     flex: 1 1 auto;
