<script lang="ts">
// Workshop settings, and this browser's appearance.
//
// Read with no worktree open: none of it is a worktree's. What a worktree's
// repository and project commit, and its logs, are its Worktree settings,
// on the right.
import { onMount, tick } from "svelte";
import { Button, Notice, Page, Spinner } from "@wsb/uikit/components";
import { workshopSettings } from "../../stores/workshop-settings.svelte.js";
import { ui } from "../../stores/ui.svelte.js";
import { workbench } from "../../stores/workbench.svelte.js";
import AppearanceSettings from "./AppearanceSettings.svelte";
import AgentDirSettings from "./AgentDirSettings.svelte";
import TerminalSettings from "./TerminalSettings.svelte";
import RemoteSettings from "./RemoteSettings.svelte";
import WorkshopNameSettings from "./WorkshopNameSettings.svelte";
import LogsSettings from "./LogsSettings.svelte";
interface Props {
/** The tab it is shown in: the one a section asked of Settings names. */
tabKey: string;
}
let { tabKey }: Props = $props();
onMount(() => {
void workshopSettings.load();
});
/**
* Land on the section the sidebar asked for.
*
* Here rather than in the sidebar because only this page knows when its
* sections exist: the sidebar used to scroll to an element by id, which
* found nothing whenever Settings was not already open — a click that did
* nothing, every time, until the page happened to be open already.
*
* Cleared once it has been honoured, so re-opening Settings later stays
* where the reader left it.
*/
$effect(() => {
const wanted = workbench.settingsSection;
if (!wanted || wanted.tab !== tabKey || !workshopSettings.loaded) return;
void tick().then(() => {
document.getElementById(wanted.section)?.scrollIntoView({ behavior: "smooth", block: "start" });
workbench.settingsSection = null;
});
});
</script>
{#snippet resync()}
<Button handle="page.settings.resync" label="Full resync" variant="secondary" onpress={() => (ui.activeModal = "resync")} />
{/snippet}
<Page title="Workshop settings" detail="The same whichever worktree is open, and in every browser" handle="page.settings.workshop" actions={resync}>
{#if workshopSettings.saveError}
<Notice tone="danger" title="The change was refused" detail={workshopSettings.saveError} />
{/if}
<div id="settings-appearance">
<AppearanceSettings />
</div>
<div id="settings-name">
<WorkshopNameSettings />
</div>
{#if workshopSettings.error}
<Notice tone="danger" title="Workshop settings could not be read" detail={workshopSettings.error} />
{:else if !workshopSettings.loaded}
<Spinner label="Reading workshop settings" />
{:else}
<div id="settings-terminal">
<TerminalSettings />
</div>
<div id="settings-logs">
<LogsSettings />
</div>
<div id="settings-agents">
<AgentDirSettings />
</div>
<div id="settings-remote">
<RemoteSettings />
</div>
{/if}
</Page>