Component panel now uses Tabs component

packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte

@@ -27,7 +27,6 @@
   ]
 
   let modal
-  let routes = {}
   $: selected = tabs.find(t => t.key === $params.assetType).title
 
   const navigate = ({detail}) => {

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

@@ -1,6 +1,7 @@
 <script>
   import { get } from "svelte/store"
   import { store, selectedComponent, currentAsset } from "builderStore"
+  import { Tabs, Tab } from '@budibase/bbui'
   import { FrontendTypes } from "constants"
   import CategoryTab from "./CategoryTab.svelte"
   import DesignView from "./DesignView.svelte"
@@ -44,17 +45,12 @@
   }
 </script>
 
-<CategoryTab
-  onClick={category => (selectedCategory = category)}
-  {categories}
-  {selectedCategory} />
-
+<Tabs selected="Settings">
+  <Tab title="Settings">
+    <div class="tab-content-padding">
       {#if definition && definition.name}
         <div class="instance-name">{definition.name}</div>
       {/if}
-
-<div class="component-props-container">
-  {#if selectedCategory.value === 'design'}
       <DesignView
       componentInstance={$selectedComponent}
       componentDefinition={definition}
@@ -62,7 +58,13 @@
       {onCustomStyleChanged}
       {onUpdateTransition}
       {onResetStyles} />
-  {:else if selectedCategory.value === 'settings'}
+    </div>
+  </Tab>
+  <Tab title="Design">
+    <div class="tab-content-padding">
+      {#if definition && definition.name}
+        <div class="instance-name">{definition.name}</div>
+      {/if}
       <SettingsView
       componentInstance={$selectedComponent}
       componentDefinition={definition}
@@ -70,21 +72,19 @@
       onChange={store.actions.components.updateProp}
       onScreenPropChange={setAssetProps}
       assetInstance={$store.currentView !== 'component' && $currentAsset} />
-  {/if}
     </div>
+  </Tab>
+</Tabs>
 
 <style>
-  .component-props-container {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow-y: auto;
-    margin-left: -20px;
-    margin-right: -20px;
-    padding: 0 20px;
+
+  .tab-content-padding {
+    padding: 0 var(--spacing-s);
   }
 
   .instance-name {
     font-size: var(--font-size-xs);
+    margin-bottom: var(--spacing-l);
     font-weight: 500;
     color: var(--grey-7);
   }

packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte

@@ -206,8 +206,6 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-l);
-    padding: var(--spacing-l) var(--spacing-xl);
     border-left: var(--border-light);
   }
 </style>