Update view components button in screen section to function

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

@@ -21,17 +21,23 @@
   )
 </script>
 
-<SettingsPanel
-  title={$selectedComponent._instanceName}
-  icon={componentDefinition.icon}
->
-  <ComponentSettingsSection
-    {componentInstance}
-    {componentDefinition}
-    {bindings}
-    {componentBindings}
-  />
-  <DesignSection {componentInstance} {componentDefinition} {bindings} />
-  <CustomStylesSection {componentInstance} {componentDefinition} {bindings} />
-  <ConditionalUISection {componentInstance} {componentDefinition} {bindings} />
-</SettingsPanel>
+{#if $selectedComponent}
+  <SettingsPanel
+    title={$selectedComponent._instanceName}
+    icon={componentDefinition.icon}
+  >
+    <ComponentSettingsSection
+      {componentInstance}
+      {componentDefinition}
+      {bindings}
+      {componentBindings}
+    />
+    <DesignSection {componentInstance} {componentDefinition} {bindings} />
+    <CustomStylesSection {componentInstance} {componentDefinition} {bindings} />
+    <ConditionalUISection
+      {componentInstance}
+      {componentDefinition}
+      {bindings}
+    />
+  </SettingsPanel>
+{/if}

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

@@ -14,6 +14,7 @@
   import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
   import { selectedScreen, store } from "builderStore"
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
+  import { goto } from "@roxi/routify"
 
   let errors = {}
 
@@ -138,6 +139,6 @@
         props={{ ...setting.props, error: errors[setting.key] }}
       />
     {/each}
-    <Button cta>View components</Button>
+    <Button cta on:click={() => $goto("../components")}>View components</Button>
   </Layout>
 </SettingsPanel>