From 8860acad732d814c36eb44bf7054bc469e0a1aea Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 5 Sep 2024 15:15:28 +0100
Subject: [PATCH] Update grid layout to support placeholders, as well as grid
 screens

---
 packages/client/src/components/Component.svelte           | 1 +
 .../client/src/components/app/EmptyPlaceholder.svelte     | 4 +++-
 .../client/src/components/app/ScreenPlaceholder.svelte    | 2 ++
 .../src/components/app/container/GridContainer.svelte     | 8 +-------
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index f474b01489..b65d7b0cdc 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -240,6 +240,7 @@
     },
     empty: emptyState,
     selected,
+    isRoot,
     inSelectedPath,
     name,
     editing,
diff --git a/packages/client/src/components/app/EmptyPlaceholder.svelte b/packages/client/src/components/app/EmptyPlaceholder.svelte
index 2c3596aadf..b93bd01457 100644
--- a/packages/client/src/components/app/EmptyPlaceholder.svelte
+++ b/packages/client/src/components/app/EmptyPlaceholder.svelte
@@ -18,9 +18,11 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    align-items: center;
+    align-items: flex-start;
     color: var(--spectrum-global-color-gray-600);
     font-size: var(--font-size-s);
     gap: var(--spacing-s);
+    grid-column: 1 / -1;
+    grid-row: 1 / -1;
   }
 </style>
diff --git a/packages/client/src/components/app/ScreenPlaceholder.svelte b/packages/client/src/components/app/ScreenPlaceholder.svelte
index 7635f55054..27d08c20ff 100644
--- a/packages/client/src/components/app/ScreenPlaceholder.svelte
+++ b/packages/client/src/components/app/ScreenPlaceholder.svelte
@@ -23,6 +23,8 @@
     align-items: center;
     gap: var(--spacing-s);
     flex: 1 1 auto;
+    grid-column: 1 / -1;
+    grid-row: 1 / -1;
   }
   .placeholder :global(.spectrum-Button) {
     margin-top: var(--spacing-m);
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 1f68926658..8850dbcb6f 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -27,7 +27,6 @@
   $: availableRows = Math.floor(height / GridRowHeight)
   $: rows = Math.max(requiredRows, availableRows)
   $: mobile = $context.device.mobile
-  $: empty = $component.empty
   $: colSize = width / GridColumns
   $: styles.set({
     ...$component.styles,
@@ -40,7 +39,6 @@
       "--col-size": colSize,
       "--row-size": GridRowHeight,
     },
-    empty: false,
   })
 
   // Calculates the minimum number of rows required to render all child
@@ -145,11 +143,7 @@
       {/each}
     </div>
   {/if}
-
-  <!-- Only render the slot if not empty, as we don't want the placeholder -->
-  {#if !empty && mounted}
-    <slot />
-  {/if}
+  <slot />
 </div>
 
 <style>