Refactor design panels into core panel component and update usages

packages/builder/src/components/design/Panel.svelte

@@ -14,7 +14,7 @@
   let wide = false
 </script>
 
-<div class="navigation-panel" class:wide class:borderLeft class:borderRight>
+<div class="panel" class:wide class:borderLeft class:borderRight>
   <div class="header">
     {#if showBackButton}
       <Icon name="ArrowLeft" hoverable on:click={onClickBackButton} />
@@ -44,7 +44,7 @@
 </div>
 
 <style>
-  .navigation-panel {
+  .panel {
     width: 280px;
     background: var(--background);
     display: flex;
@@ -53,13 +53,13 @@
     align-items: stretch;
     transition: width 130ms ease-out;
   }
-  .navigation-panel.border-left {
+  .panel.borderLeft {
     border-left: var(--border-light);
   }
-  .navigation-panel.border-right {
+  .panel.borderRight {
     border-right: var(--border-light);
   }
-  .navigation-panel.wide {
+  .panel.wide {
     width: 420px;
   }
   .header {

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

@@ -1,5 +1,5 @@
 <script>
-  import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
+  import Panel from "components/design/Panel.svelte"
   import ComponentTree from "./ComponentTree.svelte"
   import instantiateStore from "./dragDropStore.js"
   import { goto } from "@roxi/routify"
@@ -60,11 +60,12 @@
   })
 </script>
 
-<NavigationPanel
+<Panel
   title="Components"
   showAddButton
   onClickAddButton={() => $goto("../new")}
   showExpandIcon
+  borderRight
 >
   <div class="nav-items-container" bind:this={scrollRef}>
     <NavItem
@@ -87,7 +88,7 @@
       {dragDropStore}
     />
   </div>
-</NavigationPanel>
+</Panel>
 
 <style>
   .nav-items-container {

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

@@ -1,5 +1,5 @@
 <script>
-  import SettingsPanel from "components/design/settings/SettingsPanel.svelte"
+  import Panel from "components/design/Panel.svelte"
   import { store, selectedComponent, selectedScreen } from "builderStore"
   import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
   import DesignSection from "./DesignSection.svelte"
@@ -27,7 +27,7 @@
 </script>
 
 {#if $selectedComponent}
-  <SettingsPanel {title} icon={componentDefinition.icon}>
+  <Panel {title} icon={componentDefinition.icon} borderLeft>
     <ComponentSettingsSection
       {componentInstance}
       {componentDefinition}
@@ -42,5 +42,5 @@
       {componentDefinition}
       {bindings}
     />
-  </SettingsPanel>
+  </Panel>
 {/if}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte

@@ -1,7 +1,7 @@
 <script>
-  import ComponentNavigationPanel from "./_components/navigation/ComponentNavigationPanel.svelte"
+  import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte"
   import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte"
 </script>
 
-<ComponentNavigationPanel />
+<ComponentListPanel />
 <ComponentSettingsPanel />

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte

@@ -1,5 +1,5 @@
 <script>
-  import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
+  import Panel from "components/design/Panel.svelte"
   import { goto } from "@roxi/routify"
   import {
     Layout,
@@ -152,10 +152,11 @@
   })
 </script>
 
-<NavigationPanel
+<Panel
   title="Add component"
   showBackButton
   onClickBackButton={() => $goto("../slot")}
+  borderRight
 >
   <Layout paddingX="L" paddingY="XL" gap="S">
     <ActionGroup compact justified>
@@ -218,7 +219,7 @@
       </Layout>
     </Layout>
   {/if}
-</NavigationPanel>
+</Panel>
 
 <style>
   .component-grid {

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentTargetPanel.svelte

@@ -1,5 +1,5 @@
 <script>
-  import SettingsPanel from "components/design/settings/SettingsPanel.svelte"
+  import Panel from "components/design/Panel.svelte"
   import { Body, Layout } from "@budibase/bbui"
   import { selectedComponent, selectedScreen, store } from "builderStore"
 
@@ -11,11 +11,11 @@
   $: position = componentDefinition?.hasChildren ? "inside" : "below"
 </script>
 
-<SettingsPanel {title} icon={componentDefinition?.icon}>
+<Panel {title} icon={componentDefinition?.icon} borderLeft>
   <Layout paddingX="L" paddingY="XL">
     <Body size="S">
       Components that you add will be placed {position}
       {title}
     </Body>
   </Layout>
-</SettingsPanel>
+</Panel>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte

@@ -29,6 +29,3 @@
     </NavItem>
   {/each}
 </Panel>
-
-<!--      -->
-<!--      color={RoleUtils.getRoleColour(screen.routing.roleId)}-->

packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte

@@ -1,5 +1,5 @@
 <script>
-  import SettingsPanel from "components/design/settings/SettingsPanel.svelte"
+  import Panel from "components/design/Panel.svelte"
 </script>
 
-<
+<Panel title="Layout" borderLeft />

packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte

@@ -1,5 +1,7 @@
 <script>
-  import LayoutNavigationPanel from "./_components/LayoutNavigationPanel.svelte"
+  import LayoutListPanel from "./_components/LayoutListPanel.svelte"
+  import LayoutSettingsPanel from "./_components/LayoutSettingsPanel.svelte"
 </script>
 
-<LayoutNavigationPanel />
+<LayoutListPanel />
+<LayoutSettingsPanel />

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

@@ -1,5 +1,5 @@
 <script>
-  import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
+  import Panel from "components/design/Panel.svelte"
   import {
     Body,
     Layout,
@@ -27,7 +27,7 @@
   }
 </script>
 
-<NavigationPanel title="Navigation">
+<Panel title="Navigation" borderRight>
   <Layout paddingX="L" paddingY="XL" gap="S">
     <Body size="S">
       Your navigation is configured for all the screens within your app
@@ -115,4 +115,4 @@
       />
     </Layout>
   </Layout>
-</NavigationPanel>
+</Panel>

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

@@ -1,6 +1,6 @@
 <script>
   import { Search, Layout, Select, Body } from "@budibase/bbui"
-  import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
+  import Panel from "components/design/Panel.svelte"
   import { roles } from "stores/backend"
   import { store, sortedScreens } from "builderStore"
   import NavItem from "components/common/NavItem.svelte"
@@ -28,10 +28,11 @@
   }
 </script>
 
-<NavigationPanel
+<Panel
   title="Screens"
   showAddButton
   onClickAddButton={showNewScreenModal}
+  borderRight
 >
   <Layout paddingX="L" paddingY="XL" gap="S">
     <Search
@@ -66,6 +67,6 @@
       </Body>
     </Layout>
   {/if}
-</NavigationPanel>
+</Panel>
 
 <ScreenWizard bind:showModal={showNewScreenModal} />

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

@@ -1,5 +1,5 @@
 <script>
-  import SettingsPanel from "components/design/settings/SettingsPanel.svelte"
+  import Panel from "components/design/Panel.svelte"
   import { get } from "svelte/store"
   import { get as deepGet, setWith } from "lodash"
   import {
@@ -164,9 +164,10 @@
   }
 </script>
 
-<SettingsPanel
+<Panel
   title={$selectedScreen?.routing.route}
   icon={$selectedScreen.routing.route === "/" ? "Home" : "WebPage"}
+  borderLeft
 >
   <Layout gap="S" paddingX="L" paddingY="XL">
     {#if $selectedScreen.layoutId}
@@ -191,4 +192,4 @@
     {/each}
     <Button cta on:click={() => $goto("../components")}>View components</Button>
   </Layout>
-</SettingsPanel>
+</Panel>

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

@@ -1,7 +1,7 @@
 <script>
-  import ScreenNavigationPanel from "./_components/ScreenNavigationPanel.svelte"
+  import ScreenListPanel from "./_components/ScreenListPanel.svelte"
   import ScreenSettingsPanel from "./_components/ScreenSettingsPanel.svelte"
 </script>
 
-<ScreenNavigationPanel />
+<ScreenListPanel />
 <ScreenSettingsPanel />

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

@@ -1,5 +1,5 @@
 <script>
-  import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
+  import Panel from "components/design/Panel.svelte"
   import {
     Body,
     Layout,
@@ -46,7 +46,7 @@
   }
 </script>
 
-<NavigationPanel title="Theme">
+<Panel title="Theme" borderRight>
   <Layout paddingX="L" paddingY="XL" gap="S">
     <Body size="S">
       Your theme is set across all the screens within your app
@@ -91,7 +91,7 @@
       />
     </Layout>
   </Layout>
-</NavigationPanel>
+</Panel>
 
 <style>
   .buttons {