<script lang="ts">
// Worktree settings: what its repository and project commit about
// themselves, and its logs. Mounted in the worktree's scope, so it reads its
// own worktree's whichever is the context. Workshop settings are on the
// left.
import { onMount, tick } from "svelte";
import { Notice, Page, Spinner } from "@wsb/uikit/components";
import { settings } from "../../stores/settings.svelte.js";
import { workbench, worktreeLabel } from "../../stores/workbench.svelte.js";
import type { WorktreeId } from "../../api/scope.svelte.js";
import RepoSettings from "./RepoSettings.svelte";
import ProjectSettings from "./ProjectSettings.svelte";
import WorktreeLogsSettings from "./WorktreeLogsSettings.svelte";
interface Props {
worktree: WorktreeId;
/** The tab it is shown in: the one a section asked of Settings names. */
tabKey: string;
}
let { worktree, tabKey }: Props = $props();
onMount(() => {
void settings.load();
});
const read = $derived(settings.repo !== null);
/** Land on the section the sidebar asked for, as Workshop settings does. */
$effect(() => {
const wanted = workbench.settingsSection;
if (!wanted || wanted.tab !== tabKey || !read) return;
void tick().then(() => {
document.getElementById(wanted.section)?.scrollIntoView({ behavior: "smooth", block: "start" });
workbench.settingsSection = null;
});
});
</script>
<Page title="Worktree settings" detail={`${worktreeLabel(worktree)}: what it commits, and its logs`} handle="page.settings.worktree">
{#if settings.saveError}
<Notice tone="danger" title="The change was refused" detail={settings.saveError} />
{/if}
{#if settings.error}
<Notice tone="danger" title="This worktree's settings could not be read" detail={settings.error} />
{:else if !read}
<Spinner label="Reading the worktree's settings" />
{:else}
<div id="settings-repo">
<RepoSettings />
</div>
<div id="settings-project">
<ProjectSettings />
</div>
<div id="settings-worktree-logs">
<WorktreeLogsSettings />
</div>
{/if}
</Page>