WIP for fixing collaboration in new left panel

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

@@ -22,8 +22,8 @@
   }
 
   const validate = id => {
-    if (id === "screen") return true
-    if (id === "navigation") return true
+    if (id === `${$store.selectedScreenId}-screen`) return true
+    if (id === `${$store.selectedScreenId}-navigation`) return true
 
     return !!findComponent($selectedScreen.props, id)
   }
@@ -42,9 +42,9 @@
   onDestroy(stopSyncing)
 </script>
 
-{#if routeComponentId === "screen"}
+{#if routeComponentId === `${$store.selectedScreenId}-screen`}
   <ScreenSettingsPanel />
-{:else if routeComponentId === "navigation"}
+{:else if routeComponentId === `${$store.selectedScreenId}-navigation`}
   <NavigationPanel />
 {:else}
   <ComponentSettingsPanel />

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

@@ -49,23 +49,27 @@
           <NavItem
             text="Screen"
             indentLevel={0}
-            selected={$store.selectedComponentId === "screen"}
+            selected={$store.selectedComponentId ===
+              `${$store.selectedScreenId}-screen`}
             opened
             scrollable
             icon="WebPage"
             on:drop={onDrop}
             on:click={() => {
-              $store.selectedComponentId = "screen"
+              $store.selectedComponentId = `${$store.selectedScreenId}-screen`
             }}
             id={`component-screen`}
-            selectedBy={$userSelectedResourceMap["screen"]}
+            selectedBy={$userSelectedResourceMap[
+              `${$store.selectedScreenId}-screen`
+            ]}
           >
             <ScreenslotDropdownMenu component={$selectedScreen?.props} />
           </NavItem>
           <NavItem
             text="Navigation"
             indentLevel={0}
-            selected={$store.selectedComponentId === "navigation"}
+            selected={$store.selectedComponentId ===
+              `${$store.selectedScreenId}-navigation`}
             opened
             scrollable
             icon={$selectedScreen.showNavigation
@@ -73,10 +77,12 @@
               : "VisibilityOff"}
             on:drop={onDrop}
             on:click={() => {
-              $store.selectedComponentId = "navigation"
+              $store.selectedComponentId = `${$store.selectedScreenId}-navigation`
             }}
             id={`component-nav`}
-            selectedBy={$userSelectedResourceMap["navigation"]}
+            selectedBy={$userSelectedResourceMap[
+              `${$store.selectedScreenId}-navigation`
+            ]}
           />
           <ComponentTree
             level={0}

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

@@ -1,5 +1,6 @@
 <script>
   import { redirect } from "@roxi/routify"
+  import { store } from "builderStore"
 
-  $redirect("./screen")
+  $redirect(`./${$store.selectedScreenId}-screen`)
 </script>

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

@@ -4,7 +4,7 @@
 
   $: {
     if ($frontendStore.screens.length > 0) {
-      $redirect(`./${$frontendStore.screens[0]._id}/screen`)
+      $redirect(`./${$frontendStore.screens[0]._id}`)
     } else {
       $redirect("./new")
     }

packages/client/src/components/app/Layout.svelte

@@ -78,7 +78,7 @@
   // changes.
   $: selected =
     $builderStore.inBuilder &&
-    $builderStore.selectedComponentId === "navigation"
+    $builderStore.selectedComponentId?.endsWith("-navigation")
   $: {
     if (selected) {
       const node = document.getElementsByClassName("nav-wrapper")?.[0]
@@ -152,7 +152,7 @@
   use:styleable={$component.styles}
   class:desktop={!mobile}
   class:mobile={!!mobile}
-  data-id="screen"
+  data-id={`${$builderStore.screen?._id}-screen`}
   data-name="Screen"
   data-icon="WebPage"
 >