johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts" module>
	export type ProfileTab =
		| 'overview'
		| 'repos'
		| 'stars'
		| 'activity'
		| 'followers'
		| 'following'
		| 'members';
</script>

<script lang="ts">
	import { scrollRow } from '#lib/rows.ts';
	import type * as getProfile from '#lib/lexicons/dev/knotless/getProfile.ts';
	import type { Snippet } from 'svelte';
	import { page } from '$app/state';
	import { summary } from '#lib/format.ts';
	import Meta from '#lib/atoms/Meta.svelte';
	import TabLink from '#lib/molecules/TabLink.svelte';
	import ProfileCard from '#lib/organisms/ProfileCard.svelte';
	/** A page about an account at `base`: who it is down the side, and beside that its tabs, then the page. Its tabs move between them without scrolling to the top, past the card a phone shows above them. Its followers and those it follows are pages of it under no tab; an organization's members are under one, as are those an account is beginning to invite, to it alone. */
	let {
		profile: p,
		base,
		tab,
		repos,
		children
	}: {
		profile: getProfile.ProfileView;
		base: string;
		tab: ProfileTab;
		repos: number;
		children: Snippet;
	} = $props();
	const name = $derived(p.displayName ?? p.handle ?? p.did);
</script>

<Meta title={name} about={p.description && summary(p.description, 200)} />

<div class="profile-page">
	<ProfileCard
		profile={p}
		{base}
		viewer={page.data.viewer?.actor?.did}
		can={page.data.viewer?.login}
	/>
	<div class="profile-main">
		<nav class="tabs" data-sveltekit-reset="false" {@attach scrollRow(tab)}>
			<TabLink href={base} label="Overview" icon="book" current={tab === 'overview'} />
			<TabLink
				href="{base}?tab=repos"
				label="Repositories"
				icon="repo"
				count={repos}
				current={tab === 'repos'}
			/>
			<TabLink href="{base}?tab=stars" label="Stars" icon="star" current={tab === 'stars'} />
			<TabLink
				href="{base}?tab=activity"
				label="Activity"
				icon="pulse"
				current={tab === 'activity'}
			/>
			{#if p.organization || (tab === 'members' && page.data.viewer?.actor?.did === p.did)}<TabLink
					href="{base}?tab=members"
					label="Members"
					icon="people"
					current={tab === 'members'}
				/>{/if}
		</nav>
		{@render children()}
	</div>
</div>