johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts">
	import { page } from '$app/state';
	import { urlPath } from '#lib/format.ts';
	import { LOGIN } from '#lib/login.ts';
	import Avatar from '#lib/atoms/Avatar.svelte';
	import Meta from '#lib/atoms/Meta.svelte';
	import SettingsPage, { type SettingsSection } from '#lib/templates/SettingsPage.svelte';
	let { data, children } = $props();
	const sections: SettingsSection[] = $derived([
		{ href: '/settings/profile', label: 'Public profile', icon: 'person' },
		{ href: '/settings/emails', label: 'Emails', icon: 'mail' },
		{
			href: '/settings/appearance',
			label: 'Appearance',
			icon: 'paintbrush',
			pages: [
				{ href: '/settings/appearance', label: 'Themes' },
				{ href: '/settings/appearance/new', label: 'Make a theme' }
			]
		},
		{ href: '/settings/notifications', label: 'Notifications', icon: 'bell' },
		{ href: '/settings/writes', label: 'Delegated writes', icon: 'key' },
		...(data.organization
			? [{ href: '/settings/organization', label: 'Organization', icon: 'organization' } as const]
			: []),
		{ href: '/settings/blocks', label: 'Blocked accounts', icon: 'blocked' }
	]);
	const current = $derived(page.url.pathname);
	// A group's page by its own name, as Make a theme, beside the section's.
	const named = $derived(
		sections
			.flatMap((s) => [s, ...(s.pages ?? []).filter((p) => p.href !== s.href)])
			.find((s) => s.href === current)?.label
	);
	const title = $derived(`${named ?? 'Settings'} · Settings`);
</script>

{#if data.me}
	{@const me = data.me}
	<SettingsPage {title} {sections} {current}>
		{#snippet heading()}
			<Avatar name={me.handle} size="lg" did={me.did} src={me.avatar} />
			<div class="grow">
				<h1 class="clip">{me.handle}</h1>
				<p class="mute">{data.organization ? 'Your organization' : 'Your personal account'}</p>
			</div>
			<a class="btn" href="/{urlPath(me.handle)}">Go to your profile</a>
		{/snippet}
		{@render children()}
	</SettingsPage>
{:else}
	<Meta title="Settings" />
	<div class="section"><h1>Settings</h1></div>
	{#if data.login}
		<p class="feed-note">
			Log in to change how you show on knotless, and what you hear of. <button
				class="btn"
				popovertarget={LOGIN}>Log in</button
			>
		</p>
	{:else}
		<p class="feed-note">
			This server has no logins, so it has no settings to change. The command line and MCP change
			them as your account: see <code>knotless account profile</code>.
		</p>
	{/if}
{/if}