From 0dea28adb1f430e0368f3c43f5b8943374118bb8 Mon Sep 17 00:00:00 2001
From: Liam Gallagher <liam@liamgallagher.dev>
Date: Wed, 17 Jul 2024 15:22:54 +1200
Subject: [PATCH] setup inspector section

---
 www/src/lib/components/Inspector.svelte | 20 ++++++++++++++++++++
 www/src/lib/components/Sidebar.svelte   |  5 ++++-
 www/src/routes/playground/+page.svelte  |  5 ++++-
 3 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 www/src/lib/components/Inspector.svelte

diff --git a/www/src/lib/components/Inspector.svelte b/www/src/lib/components/Inspector.svelte
new file mode 100644
index 00000000..fe9d0fdd
--- /dev/null
+++ b/www/src/lib/components/Inspector.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import * as Card from "$lib/components/ui/card";
+    import * as Table from "$lib/components/ui/table";
+    import ScrollArea from "$lib/components/ui/scroll-area/scroll-area.svelte";
+</script>
+
+<Card.Header class="flex flex-row justify-between">
+    <div class="grid gap-2">
+        <Card.Title>Inspector</Card.Title>
+        <Card.Description>All the entities currently in your app.</Card.Description>
+    </div>
+</Card.Header>
+
+<Card.Content class="h-[calc(100%-90px)]">
+    <ScrollArea class="h-full">
+        <Table.Root>
+            <Table.Body></Table.Body>
+        </Table.Root>
+    </ScrollArea>
+</Card.Content>
diff --git a/www/src/lib/components/Sidebar.svelte b/www/src/lib/components/Sidebar.svelte
index cb93497e..470e04e3 100644
--- a/www/src/lib/components/Sidebar.svelte
+++ b/www/src/lib/components/Sidebar.svelte
@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
-    export type Tab = "editor" | "assets" | "crates";
+    export type Tab = "editor" | "inspector" | "assets" | "crates";
     export const selectedTab = writable<Tab>("editor");
 </script>
 
@@ -8,6 +8,7 @@
     import { Separator } from "$lib/components/ui/separator";
 
     import Code from "lucide-svelte/icons/code";
+    import Inspect from "lucide-svelte/icons/layers-3";
     import Image from "lucide-svelte/icons/images";
     import Package from "lucide-svelte/icons/package";
     import { writable } from "svelte/store";
@@ -24,6 +25,8 @@
         >
             {#if tab === "editor"}
                 <Code />
+            {:else if tab === "inspector"}
+                <Inspect />
             {:else if tab === "assets"}
                 <Image />
             {:else if tab === "crates"}
diff --git a/www/src/routes/playground/+page.svelte b/www/src/routes/playground/+page.svelte
index 750ff2dc..0bfadfef 100644
--- a/www/src/routes/playground/+page.svelte
+++ b/www/src/routes/playground/+page.svelte
@@ -16,6 +16,7 @@
     import { editorCode } from "$lib/components/editor";
     import type { PageData } from "./$types";
     import { onMount, tick } from "svelte";
+    import Inspector from "$lib/components/Inspector.svelte";
 
     export let data: PageData;
     if (data.code) editorCode.set(data.code);
@@ -111,13 +112,15 @@
             </Card>
             <div class="flex h-full w-full gap-4 overflow-hidden">
                 <Card class="h-full w-12">
-                    <Sidebar tabs={["editor", "assets", "crates"]} />
+                    <Sidebar tabs={["editor", "inspector", "assets", "crates"]} />
                 </Card>
                 <!-- The 4rem in calc() comes from 3rem sidebar + 1rem gap,
                 flex-grow won't work because of the editor -->
                 <Card class="h-full w-[calc(100%-4rem)] p-4">
                     {#if $selectedTab === "editor"}
                         <Editor bind:this={editor} />
+                    {:else if $selectedTab === "inspector"}
+                        <Inspector />
                     {:else if $selectedTab === "assets"}
                         <AssetExplorer />
                     {:else if $selectedTab === "crates"}