further tidy up

packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte

@@ -15,10 +15,15 @@
   $: screen = $allScreens.find(screen => screen._id === screenId)
 
   const deleteScreen = () => {
+    try {
       store.actions.screens.delete(screen)
       store.actions.routing.fetch()
       confirmDeleteDialog.hide()
       $goto("../")
+      notifier.success("Deleted screen successfully.")
+    } catch (err) {
+      notifier.danger("Error deleting screen")
+    }
   }
 </script>
 

packages/builder/src/components/userInterface/DesignView.svelte

@@ -12,8 +12,6 @@
   let propGroup = null
   let currentGroup
 
-  const getProperties = name => panelDefinition[name]
-
   function onChange(category) {
     selectedCategory = category
   }
@@ -38,7 +36,7 @@
         {#each propertyGroupNames as groupName}
           <PropertyGroup
             name={groupName}
-            properties={getProperties(groupName)}
+            properties={panelDefinition[groupName]}
             styleCategory={selectedCategory}
             {onStyleChanged}
             {componentDefinition}
@@ -64,9 +62,6 @@
     gap: var(--spacing-l);
   }
 
-  .design-view-state-categories {
-  }
-
   .positioned-wrapper {
     position: relative;
     display: flex;

packages/builder/src/components/userInterface/FlatButtonGroup.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import FlatButton from "./FlatButton.svelte"
+
   export let buttonProps = []
   export let isMultiSelect = false
   export let value = []

packages/builder/src/components/userInterface/LayoutsList.svelte

@@ -1,64 +0,0 @@
-<script>
-  import { params, goto } from "@sveltech/routify"
-  import { store } from "builderStore"
-
-  const layouts = [
-    {
-      title: "Private",
-      id: "main",
-    },
-    {
-      title: "Public",
-      id: "unauthenticated",
-    },
-  ]
-
-  if (!$store.currentAssetId) {
-    // refactor so the right layout is chosen
-    store.actions.layouts.select($params.layout)
-  }
-
-  const changeLayout = id => {
-    store.actions.layouts.select(id)
-    $goto(`./${id}/layout`)
-  }
-</script>
-
-<div class="root">
-  {#each layouts as { title, id }}
-    <button
-      class:active={id === $params.layout}
-      on:click={() => changeLayout(id)}>
-      {title}
-    </button>
-  {/each}
-</div>
-
-<style>
-  .root {
-    display: flex;
-    flex-direction: row;
-  }
-
-  button {
-    cursor: pointer;
-    padding: 0 var(--spacing-m);
-    height: 32px;
-    text-align: center;
-    background: var(--background);
-    color: var(--grey-7);
-    border-radius: 5px;
-    font-size: var(--font-size-xs);
-    font-weight: 500;
-    transition: all 0.3s;
-    text-rendering: optimizeLegibility;
-    border: none !important;
-    outline: none;
-    font-family: var(--font-sans);
-  }
-
-  .active {
-    background: var(--grey-2);
-    color: var(--ink);
-  }
-</style>

packages/builder/src/components/userInterface/PropertyControl.svelte

@@ -22,16 +22,14 @@
   export let onChange = () => {}
 
   let temporaryBindableValue = value
+  let bindableProperties = []
+  let anchor
+  let dropdown
 
   function handleClose() {
     handleChange(key, temporaryBindableValue)
   }
 
-  let bindableProperties = []
-
-  let anchor
-  let dropdown
-
   function getBindableProperties() {
     // Get all bindableProperties
     bindableProperties = fetchBindableProperties({
@@ -77,7 +75,7 @@
       : temp
   }
 
-  //Incase the component has a different value key name
+  // Incase the component has a different value key name
   const handlevalueKey = value =>
     props.valueKey ? { [props.valueKey]: safeValue() } : { value: safeValue() }
 </script>
@@ -94,7 +92,7 @@
       {...props}
       name={key} />
   </div>
-  {#if bindable && control === Input && !key.startsWith('_')}
+  {#if bindable && !key.startsWith('_') && control === Input}
     <div
       class="icon"
       data-cy={`${key}-binding-button`}