<script lang="ts">
import { renderMarkdown } from "../../utils/markdown.js";
interface Props {
content: string;
name?: string;
}
let { content, name }: Props = $props();
let collapsed: boolean = $state(true);
let previewLine = $derived(
content.split("\n")[0]?.slice(0, 80) ?? "",
);
</script>
<div class="skill-block">
<button
class="skill-header"
onclick={() => {
const sel = window.getSelection();
if (sel && sel.toString().length > 0) return;
collapsed = !collapsed;
}}
>
<span class="skill-chevron" class:open={!collapsed}>
▸
</span>
<span class="skill-label">Skill: {name ?? "unknown"}</span>
{#if collapsed && previewLine}
<span class="skill-preview">{previewLine}</span>
{/if}
</button>
{#if !collapsed}
<div class="skill-content markdown">
{@html renderMarkdown(content)}
</div>
{/if}
</div>
<style>
.skill-block {
border-left: 2px solid var(--wb-accent-teal, #14b8a6);
background: var(--wb-tool-bg);
border-radius: 0 var(--wsb-radius-sm) var(--wsb-radius-sm) 0;
margin: 0;
}
.skill-header {
display: flex;
align-items: center;
gap: var(--wb-spacing-6);
padding: var(--wb-spacing-6) var(--wb-spacing-10);
width: 100%;
text-align: left;
font-size: var(--wb-font-size-12);
color: var(--vscode-foreground);
min-width: 0;
border-radius: 0 var(--wsb-radius-sm) var(--wsb-radius-sm) 0;
transition: background 0.1s;
user-select: text;
}
.skill-header:hover {
background: var(--vscode-list-hoverBackground);
color: var(--vscode-editor-foreground);
}
.skill-chevron {
display: inline-block;
font-size: var(--wb-font-size-10);
transition: transform 0.15s;
flex-shrink: 0;
color: var(--vscode-disabledForeground);
}
.skill-chevron.open {
transform: rotate(90deg);
}
.skill-label {
font-family: var(--wsb-font-mono);
font-weight: 500;
font-size: var(--wb-font-size-11);
color: var(--wb-accent-teal, #14b8a6);
white-space: nowrap;
flex-shrink: 0;
}
.skill-preview {
font-family: var(--wsb-font-mono);
font-size: var(--wb-font-size-12);
color: var(--vscode-disabledForeground);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.skill-content {
padding: var(--wb-spacing-8) var(--wb-spacing-14) var(--wb-spacing-12);
font-size: var(--wb-font-size-13);
color: var(--vscode-foreground);
line-height: 1.65;
border-top: 1px solid var(--vscode-widget-border);
overflow-x: auto;
}
</style>