johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts" module>
	/**
	 * The sections of a repository's settings, in the order its side nav
	 * lists them, each a page under `settings/`. A new section adds its line
	 * here and its page at `routes/[authority]/[repo]/settings/<path>`.
	 */
	export const SECTIONS = [
		{ id: 'general', label: 'General', path: '', icon: 'gear' },
		{ id: 'branches', label: 'Branches', path: 'branches', icon: 'branch' },
		{ id: 'labels', label: 'Labels', path: 'labels', icon: 'tag' },
		{ id: 'access', label: 'Access', path: 'access', icon: 'people' },
		{ id: 'actions', label: 'Actions', path: 'actions', icon: 'play' }
	] as const;
	export type Section = (typeof SECTIONS)[number]['id'];
</script>

<script lang="ts">
	import type { RepoViewDetailed } from '#lib/lexicons/dev/knotless/defs.ts';
	import type { Snippet } from 'svelte';
	import { page } from '$app/state';
	import { repoHref } from '#lib/format.ts';
	import { scrollRow } from '#lib/rows.ts';
	import Icon from '#lib/atoms/Icon.svelte';
	import RepoPage from './RepoPage.svelte';
	import Empty from '#lib/molecules/Empty.svelte';
	/**
	 * A page of a repository's settings, its `section` beside the side nav
	 * to the others, which moves between them without scrolling to the top. Only its owner changes them, or an admin of the organization that owns it, which the server holds
	 * to: anyone else is told so instead.
	 */
	let {
		repo,
		section,
		title,
		children
	}: { repo: RepoViewDetailed; section: Section | string; title: string; children: Snippet } =
		$props();
	const authority = $derived(page.params.authority ?? repo.owner.handle);
	const owner = $derived(page.data.viewer?.actor?.did === repo.owner.did || !!repo.viewer?.admin);
</script>

<RepoPage {repo} tab="settings" title="{title} · Settings · {repo.name}">
	<div class="settings">
		<nav
			class="settings-nav account-nav"
			aria-label="Settings"
			data-sveltekit-reset="false"
			{@attach scrollRow(section)}
		>
			{#each SECTIONS as s (s.id)}<a
					href={repoHref(authority, repo.name, `/settings${s.path && `/${s.path}`}`)}
					aria-current={s.id === section ? 'page' : undefined}><Icon name={s.icon} />{s.label}</a
				>{/each}
		</nav>
		<div class="settings-body">
			{#if owner}
				{@render children()}
			{:else}
				<div class="box">
					<Empty title="No access to settings"
						>{`Only ${repo.owner.handle}, who owns ${repo.name}, can change its settings.`}</Empty
					>
				</div>
			{/if}
		</div>
	</div>
</RepoPage>