53 lines
1.5 KiB
Svelte
53 lines
1.5 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import type { AISessionItem, WorkbenchChannel, WorkbenchProject } from './types';
|
||
|
|
|
||
|
|
export let project: WorkbenchProject;
|
||
|
|
export let channels: WorkbenchChannel[];
|
||
|
|
export let selectedChannelID: string;
|
||
|
|
export let tags: string[];
|
||
|
|
export let recentSessions: AISessionItem[];
|
||
|
|
export let onSelectChannel: (channelID: string) => void;
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<aside class="channel-sidebar" aria-label="Project channels">
|
||
|
|
<header>
|
||
|
|
<div>
|
||
|
|
<p>Current project</p>
|
||
|
|
<h2>{project.name}</h2>
|
||
|
|
</div>
|
||
|
|
<button aria-label="Project settings">⚙</button>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<section class="tag-row" aria-label="Project tags">
|
||
|
|
{#each tags as tag}
|
||
|
|
<button type="button">#{tag}</button>
|
||
|
|
{/each}
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="channel-group">
|
||
|
|
{#each channels as channel}
|
||
|
|
<button
|
||
|
|
class:active={channel.id === selectedChannelID}
|
||
|
|
aria-pressed={channel.id === selectedChannelID}
|
||
|
|
aria-label={`${channel.title}${channel.count ? ` ${channel.count}` : ''}`}
|
||
|
|
on:click={() => onSelectChannel(channel.id)}
|
||
|
|
>
|
||
|
|
<span>{channel.title}</span>
|
||
|
|
{#if channel.count !== undefined}
|
||
|
|
<small>{channel.count}</small>
|
||
|
|
{/if}
|
||
|
|
</button>
|
||
|
|
{/each}
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="recent-sessions" aria-label="Recent sessions">
|
||
|
|
<h3>Recent sessions</h3>
|
||
|
|
{#each recentSessions as session}
|
||
|
|
<button type="button">
|
||
|
|
<span>{session.title}</span>
|
||
|
|
<small>{session.updatedAt}</small>
|
||
|
|
</button>
|
||
|
|
{/each}
|
||
|
|
</section>
|
||
|
|
</aside>
|