<script lang="ts">
import { activityBar } from "../../../stores/activity-bar.svelte.js";
import { explorer } from "../../../stores/explorer.svelte.js";
import TreeView from "./TreeView.svelte";
interface Props {
containerId: string;
}
let { containerId }: Props = $props();
let views = $derived(activityBar.viewsForContainer(containerId));
function treeItemsForView(viewId: string) {
return explorer.treeViews.find((tv) => tv.view_id === viewId)?.items ?? [];
}
</script>
<div class="extension-container">
{#each views as view (view.id)}
{@const items = treeItemsForView(view.id)}
<div class="view-section">
<div class="view-header">
<span class="view-title">{view.name}</span>
</div>
<div class="view-content">
{#if items.length > 0}
<TreeView {items} />
{:else}
<div class="view-empty">No data available.</div>
{/if}
</div>
</div>
{/each}
{#if views.length === 0}
<div class="view-empty">No views registered for this container.</div>
{/if}
</div>
<style>
.extension-container {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.view-section {
border-bottom: 1px solid var(--vscode-panel-border);
}
.view-header {
display: flex;
align-items: center;
height: var(--wb-control-size-28);
padding: 0 var(--wb-spacing-12);
background: color-mix(in srgb, var(--vscode-sideBar-background) 80%, transparent);
}
.view-title {
font-size: var(--wb-font-size-11);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--vscode-editor-foreground);
}
.view-content {
min-height: 0;
}
.view-empty {
padding: var(--wb-spacing-12);
font-size: var(--wb-font-size-12);
color: var(--vscode-disabledForeground);
}
</style>