setup inspector section

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>

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"}

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"}