feat: add workbench channel templates

apps/web/src/features/workbench/ProjectWorkbench.svelte

@@ -1,14 +1,19 @@
 <script lang="ts">
   import { getProjectWorkspace, workbenchProjects } from './mockData';
+  import ChannelContent from './ChannelContent.svelte';
+  import ObjectInspector from './ObjectInspector.svelte';
   import ProjectRail from './ProjectRail.svelte';
   import ProjectChannelSidebar from './ProjectChannelSidebar.svelte';
   import WorkspaceTopbar from './WorkspaceTopbar.svelte';
+  import type { InspectorItem } from './types';
 
   export let currentUser: { account: string };
 
   let selectedProjectID = workbenchProjects[0].id;
+  let selectedItem: InspectorItem | null = null;
   $: workspace = getProjectWorkspace(selectedProjectID);
   $: selectedChannelID = workspace.channels[0].id;
+  $: selectedChannel = workspace.channels.find((channel) => channel.id === selectedChannelID) ?? workspace.channels[0];
 
   function selectProject(projectID: number) {
     selectedProjectID = projectID;
@@ -17,6 +22,10 @@
   function selectChannel(channelID: string) {
     selectedChannelID = channelID;
   }
+
+  function inspectItem(item: InspectorItem) {
+    selectedItem = item;
+  }
 </script>
 
 <main class="workbench-shell">
@@ -32,10 +41,8 @@
       onSelectChannel={selectChannel}
     />
     <section class="channel-stage" aria-label="Channel content">
-      <h1>{workspace.channels.find((channel) => channel.id === selectedChannelID)?.title}</h1>
+      <ChannelContent {workspace} channel={selectedChannel} onInspect={inspectItem} />
     </section>
-    <aside class="object-inspector" aria-label="Object inspector">
-      <p>Select an item to inspect discussion, properties, and actions.</p>
-    </aside>
+    <ObjectInspector item={selectedItem} />
   </div>
 </main>