<script lang="ts">
// The way in to one part of Settings. It opens the page and lands on the
// section: scrolling to an element that only exists when the page is already
// open is a click that does nothing at all, which is what this used to do.
import { workbench } from "../../../stores/workbench.svelte.js";
import SidebarHeader from "../SidebarHeader.svelte";
const sections = [
["settings-appearance", "Appearance"],
["settings-repo", "Repository"],
["settings-project", "Project"],
["settings-machine", "Machine"],
["settings-agents", "Agent Directories"],
["settings-terminal", "Terminal"],
["settings-logs", "Logs"],
["settings-remote", "Remote"],
] as const;
function jumpTo(id: string) {
workbench.openSettings(id);
}
</script>
<div class="panel">
<SidebarHeader title="Settings" />
<div class="panel-list">
{#each sections as [id, label]}
<button class="panel-item" onclick={() => jumpTo(id)}>
{label}
</button>
{/each}
</div>
</div>
<style>
.panel {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.panel-list {
padding: var(--wb-spacing-10) var(--wb-spacing-8);
display: flex;
flex-direction: column;
gap: var(--wb-spacing-4);
}
.panel-item {
text-align: left;
padding: var(--wb-spacing-10) var(--wb-spacing-12);
border-radius: var(--wsb-radius-sm);
color: var(--vscode-editor-foreground);
font-size: var(--wb-font-size-12);
}
.panel-item:hover {
background: var(--vscode-list-hoverBackground);
}
</style>