68 lines
1.9 KiB
Svelte
68 lines
1.9 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;
|
|
|
|
const channelIcons: Record<WorkbenchChannel['icon'], string> = {
|
|
home: '\u2302',
|
|
mail: '\u2709',
|
|
list: '\u2630',
|
|
sparkles: '\u2726',
|
|
file: '\u25A4',
|
|
clock: '\u25F7',
|
|
link: '\u21AA',
|
|
};
|
|
|
|
$: sortedChannels = [...channels].sort((left, right) => left.sortOrder - right.sortOrder);
|
|
</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" disabled>⚙</button>
|
|
</header>
|
|
|
|
<ul class="tag-row" aria-label="Project tags">
|
|
{#each tags as tag}
|
|
<li>#{tag}</li>
|
|
{/each}
|
|
</ul>
|
|
|
|
<section class="channel-group">
|
|
{#each sortedChannels 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 class="channel-icon" aria-hidden="true">{channelIcons[channel.icon]}</span>
|
|
<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>
|
|
<ul>
|
|
{#each recentSessions as session}
|
|
<li>
|
|
<span>{session.title}</span>
|
|
<small>{session.updatedAt}</small>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</section>
|
|
</aside>
|