42 lines
1.4 KiB
Svelte
42 lines
1.4 KiB
Svelte
|
<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>
|