feat: add project channel workbench shell

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { getProjectWorkspace, workbenchProjects } from './mockData';
+  import ProjectRail from './ProjectRail.svelte';
+  import ProjectChannelSidebar from './ProjectChannelSidebar.svelte';
+  import WorkspaceTopbar from './WorkspaceTopbar.svelte';
+
+  export let currentUser: { account: string };
+
+  let selectedProjectID = workbenchProjects[0].id;
+  $: workspace = getProjectWorkspace(selectedProjectID);
+  $: selectedChannelID = workspace.channels[0].id;
+
+  function selectProject(projectID: number) {
+    selectedProjectID = projectID;
+  }
+
+  function selectChannel(channelID: string) {
+    selectedChannelID = channelID;
+  }
+</script>
+
+<main class="workbench-shell">
+  <WorkspaceTopbar account={currentUser.account} />
+  <div class="workbench-body">
+    <ProjectRail projects={workbenchProjects} {selectedProjectID} onSelectProject={selectProject} />
+    <ProjectChannelSidebar
+      project={workspace.project}
+      channels={workspace.channels}
+      {selectedChannelID}
+      tags={workspace.tags}
+      recentSessions={workspace.recentSessions}
+      onSelectChannel={selectChannel}
+    />
+    <section class="channel-stage" aria-label="Channel content">
+      <h1>{workspace.channels.find((channel) => channel.id === selectedChannelID)?.title}</h1>
+    </section>
+    <aside class="object-inspector" aria-label="Object inspector">
+      <p>Select an item to inspect discussion, properties, and actions.</p>
+    </aside>
+  </div>
+</main>