<script lang="ts">
// The context worktree's Settings: what its repository and project commit
// about themselves, and its logs. Each row opens the worktree's page at its
// section; workshop settings are on the left.
import { List, ListItem, Panel, type IconName } from "@wsb/uikit/components";
import { keyed } from "@wsb/uikit/handles";
import { settings } from "../../stores/settings.svelte.js";
import { workbench } from "../../stores/workbench.svelte.js";
const SECTIONS = $derived<{ id: string; title: string; detail: string; icon: IconName }[]>([
{ id: "settings-repo", title: "Repository", detail: settings.repo?.path ?? ".wsb/repo.json", icon: "file" },
{ id: "settings-project", title: "Project", detail: settings.project?.path ?? ".wsb/project.json", icon: "project" },
{ id: "settings-worktree-logs", title: "Logs", detail: "What ran here", icon: "output" },
]);
</script>
<Panel title="Worktree settings" handle="worktree.settings">
<List ariaLabel="Worktree settings">
{#each SECTIONS as section (section.id)}
<ListItem
handle={keyed("worktree.settings.section", section.id)}
title={section.title}
detail={section.detail}
icon={section.icon}
onpress={() => workbench.openWorktreeSettings(section.id)}
/>
{/each}
</List>
</Panel>