<script lang="ts">
// Workshop settings: the same whichever worktree is open, and this
// browser's appearance.
// Each row opens the page at its section; a worktree's own settings are in
// the worktree's sidebar, on the right.
import { List, ListItem, Panel, type IconName } from "@wsb/uikit/components";
import { keyed } from "@wsb/uikit/handles";
import { workbench } from "../../stores/workbench.svelte.js";
const SECTIONS: { id: string; title: string; detail: string; icon: IconName }[] = [
{ id: "settings-appearance", title: "Appearance", detail: "Theme, density and layout, in every browser", icon: "settings" },
{ id: "settings-name", title: "Name", detail: "What peers call this workshop", icon: "workshop" },
{ id: "settings-terminal", title: "Terminal", detail: "How sessions are resumed", icon: "session" },
{ id: "settings-logs", title: "Logs", detail: "How big each worktree's logs may grow", icon: "output" },
{ id: "settings-agents", title: "Agent directories", detail: "Where sessions are read from", icon: "folder" },
{ id: "settings-remote", title: "Remote", detail: "Where the workbench is served", icon: "link" },
];
</script>
<Panel title="Workshop settings" handle="workshop.settings">
<List ariaLabel="Workshop settings">
{#each SECTIONS as section (section.id)}
<ListItem
handle={keyed("workshop.settings.section", section.id)}
title={section.title}
detail={section.detail}
icon={section.icon}
onpress={() => workbench.openSettings(section.id)}
/>
{/each}
</List>
</Panel>