From 2f5bcd6c62a4ed12a6bf7f06aadec14d010e44fe Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 9 Sep 2026 18:54:28 +0200
Subject: [PATCH] web/profile: extract shared chrome pieces from the org
 profile

Signed-off-by: eti <eti@eti.tf>

wip: conflict resolution

Signed-off-by: eti <eti@eti.tf>

wip: sv-fe fixes

Signed-off-by: eti <eti@eti.tf>

wip

Signed-off-by: eti <eti@eti.tf>
---
 .../profile/ProfileSocialLinks.svelte         | 19 +---
 .../profile/UserProfileChrome.svelte          | 61 ++++++-------
 .../organization/OrganizationChrome.svelte    | 65 ++-----------
 .../OrganizationOverviewTab.svelte            | 91 -------------------
 web/src/routes/[handle]/+layout.svelte        | 16 +++-
 5 files changed, 51 insertions(+), 201 deletions(-)
 delete mode 100644 web/src/lib/components/profile/organization/OrganizationOverviewTab.svelte

diff --git a/web/src/lib/components/profile/ProfileSocialLinks.svelte b/web/src/lib/components/profile/ProfileSocialLinks.svelte
index 1a0898483..0c159096f 100644
--- a/web/src/lib/components/profile/ProfileSocialLinks.svelte
+++ b/web/src/lib/components/profile/ProfileSocialLinks.svelte
@@ -14,18 +14,9 @@
 		following?: number;
 		followersHref?: string;
 		followingHref?: string;
-		class?: string;
 	}
 
-	let {
-		identity,
-		profile,
-		followers,
-		following,
-		followersHref,
-		followingHref,
-		class: className
-	}: Props = $props();
+	let { identity, profile, followers, following, followersHref, followingHref }: Props = $props();
 
 	const links = $derived((profile.links ?? []).filter((link) => link.trim().length > 0));
 	const linkLabel = (link: string) => {
@@ -37,8 +28,8 @@
 	};
 </script>
 
-<div class={["flex max-w-full flex-wrap items-center gap-4 typography-paragraph-small", className]}>
-	<div class="flex items-center gap-2 px-2.5 py-1">
+<div class="flex max-w-full flex-wrap items-center gap-4 typography-paragraph-small">
+	<div class="flex items-center gap-2 px-2.5">
 		<UsersRound class="size-4 shrink-0" aria-hidden="true" />
 		<Link
 			href={resolve((followersHref ?? `/${identity.handle}?tab=followers`) as "/")}
@@ -62,7 +53,7 @@
 	{#if profile.bluesky}
 		<a
 			href={`https://bsky.app/profile/${identity.did}`}
-			class={link({ variant: "inherit", size: "small", class: "px-2.5 py-1" })}
+			class={link({ variant: "inherit", size: "small", class: "px-2.5" })}
 			target="_blank"
 			rel="external noopener noreferrer"
 		>
@@ -74,7 +65,7 @@
 	{#each links as profileLink (profileLink)}
 		<a
 			href={profileLink}
-			class={link({ variant: "inherit", size: "small", class: "px-2.5 py-1" })}
+			class={link({ variant: "inherit", size: "small", class: "px-2.5" })}
 			target="_blank"
 			rel="external nofollow me noopener noreferrer"
 		>
diff --git a/web/src/lib/components/profile/UserProfileChrome.svelte b/web/src/lib/components/profile/UserProfileChrome.svelte
index 26264122f..41075fd77 100644
--- a/web/src/lib/components/profile/UserProfileChrome.svelte
+++ b/web/src/lib/components/profile/UserProfileChrome.svelte
@@ -49,18 +49,39 @@
 	{#if activeTab === "overview"}
 		<section class="relative text-foreground-default">
 			<div
-				class="h-22.25 border-b border-border-default bg-linear-to-b from-background-default to-background-subtle dark:bg-background-default dark:bg-none"
+				class="h-34 border-b border-border-default bg-linear-to-b from-background-default to-background-subtle sm:h-22.25 dark:bg-background-default dark:bg-none"
 			></div>
 			<Avatar
 				did={identity.did}
 				handle={identity.handle}
 				size="full"
-				class="absolute top-6 left-1/2 size-32 -translate-x-1/2 bg-background-default sm:left-6 sm:translate-x-0"
+				class="absolute top-6 left-6 size-24 bg-background-default sm:size-32"
 			/>
 
+			<div class="absolute top-4 right-4 flex items-center gap-2 sm:top-9.25">
+				{#if isSelf}
+					<Button variant="default" icon={Pencil} onclick={() => (editing = true)}
+						>Edit</Button
+					>
+				{:else}
+					<div class="min-w-23">
+						<FollowButton profileDid={identity.did} initialRkey={viewerFollowRkey} />
+					</div>
+					<div class="min-w-22.5">
+						<VouchButton
+							profileDid={identity.did}
+							profileLabel={identity.handle}
+							initialVouch={viewerVouch}
+							{networkVouches}
+						/>
+					</div>
+				{/if}
+				<ProfileMoreMenu {identity} />
+			</div>
+
 			<h1
 				title={identity.handle}
-				class="max-w-full truncate px-4 pt-19.75 typography-heading-4 sm:absolute sm:top-10 sm:right-4 sm:left-43 sm:w-fit sm:px-0 sm:pt-0"
+				class="absolute top-20 right-4 left-36 truncate typography-heading-4 sm:top-10 sm:left-43"
 			>
 				{identity.handle}
 				{#if shown?.pronouns}
@@ -73,7 +94,7 @@
 			</h1>
 
 			<div
-				class="flex min-h-16 flex-col gap-4 px-4 pt-2 sm:ml-39 sm:flex-row sm:items-center sm:justify-between sm:gap-6 sm:py-3"
+				class="min-h-16 px-4 py-3 sm:ml-39 sm:flex sm:items-center sm:justify-between sm:gap-6"
 			>
 				{#if editing}
 					<div class="w-full">
@@ -98,43 +119,13 @@
 							profile={shown}
 							followers={counts.followers}
 							following={counts.following}
-							class="max-sm:order-3 max-sm:-ml-1.5 max-sm:flex-col max-sm:items-start max-sm:gap-2"
 						/>
 					{/if}
 				{/if}
-
-				<div
-					class="flex items-center justify-between gap-2 max-sm:order-2 sm:absolute sm:top-9.25 sm:right-4 sm:justify-end"
-				>
-					<div class="flex items-center gap-2">
-						{#if isSelf}
-							<Button variant="default" icon={Pencil} onclick={() => (editing = true)}
-								>Edit</Button
-							>
-						{:else}
-							<div class="min-w-23">
-								<FollowButton
-									profileDid={identity.did}
-									initialRkey={viewerFollowRkey}
-								/>
-							</div>
-							<div class="sm:min-w-22.5">
-								<VouchButton
-									profileDid={identity.did}
-									profileLabel={identity.handle}
-									initialVouch={viewerVouch}
-									{networkVouches}
-									hideLabelOnMobile
-								/>
-							</div>
-						{/if}
-					</div>
-					<ProfileMoreMenu {identity} />
-				</div>
 			</div>
 
 			{#if networkVouches.length > 0}
-				<div class="p-4 sm:ml-39 sm:pt-0">
+				<div class="px-4 pb-4 sm:ml-39">
 					<NetworkVouches subjectHandle={identity.handle} vouches={networkVouches} />
 				</div>
 			{/if}
diff --git a/web/src/lib/components/profile/organization/OrganizationChrome.svelte b/web/src/lib/components/profile/organization/OrganizationChrome.svelte
index 1d51c342e..99b90cdda 100644
--- a/web/src/lib/components/profile/organization/OrganizationChrome.svelte
+++ b/web/src/lib/components/profile/organization/OrganizationChrome.svelte
@@ -1,27 +1,19 @@
 <script lang="ts">
-	import { resolve } from "$app/paths";
 	import { dev } from "$app/environment";
 	import { page } from "$app/state";
 	import type { Snippet } from "svelte";
-	import LinkIcon from "$icon/link";
-	import Rss from "$icon/rss";
 	import UserRoundCog from "$icon/user-round-cog";
-	import UsersRound from "$icon/users-round";
 	import Warehouse from "$icon/warehouse";
 	import type { ProfileRecord } from "$lib/api/records";
-	import Bluesky from "$lib/components/icons/Bluesky.svelte";
-	import ReportItems from "$lib/components/moderation/ReportItems.svelte";
 	import FollowButton from "$lib/components/profile/FollowButton.svelte";
 	import { organizationManager } from "$lib/components/profile/organization/mock";
+	import ProfileMoreMenu from "$lib/components/profile/ProfileMoreMenu.svelte";
+	import ProfileSocialLinks from "$lib/components/profile/ProfileSocialLinks.svelte";
 	import ProfileTabs from "$lib/components/profile/ProfileTabs.svelte";
 	import type { ProfileCounts } from "$lib/components/profile/types";
 	import Avatar from "$lib/components/ui/Avatar.svelte";
-	import DropdownItem from "$lib/components/ui/DropdownItem.svelte";
-	import MoreMenu from "$lib/components/ui/MoreMenu.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
-	import { formatCount } from "$lib/format";
 	import User from "$lib/components/ui/User.svelte";
-	import Link from "$lib/components/ui/Link.svelte";
 
 	interface Props {
 		identity: { did: string; handle: string };
@@ -34,7 +26,6 @@
 
 	let { identity, profile, counts, viewerFollowRkey, activeTab, content }: Props = $props();
 
-	const links = $derived((profile.links ?? []).filter((link) => link.trim().length > 0));
 	const followersHref = $derived(
 		`/${identity.handle}?${new URLSearchParams({
 			tab: "followers",
@@ -43,13 +34,6 @@
 				: {})
 		})}`
 	);
-	const linkLabel = (link: string) => {
-		try {
-			return new URL(link).hostname;
-		} catch {
-			return link;
-		}
-	};
 </script>
 
 <ProfileTabs handle={identity.handle} active={activeTab} {counts} organization />
@@ -72,15 +56,7 @@
 					<div class="min-w-23">
 						<FollowButton profileDid={identity.did} initialRkey={viewerFollowRkey} />
 					</div>
-					<MoreMenu label={`More actions for @${identity.handle}`}>
-						<DropdownItem
-							icon={Rss}
-							href={resolve(`/${identity.handle}/feed.atom` as "/")}
-						>
-							Atom feed
-						</DropdownItem>
-						<ReportItems authorDid={identity.did} authorHandle={identity.handle} />
-					</MoreMenu>
+					<ProfileMoreMenu {identity} />
 				</div>
 
 				<Avatar
@@ -116,35 +92,12 @@
 							class="gap-1"
 						/>
 					</span>
-					<Link
-						href={resolve(followersHref as "/")}
-						class="px-2.5"
-					>
-						<UsersRound class="size-4" aria-hidden="true" />
-						{formatCount(counts.followers)} followers
-					</Link>
-					{#if profile.bluesky}
-						<Link
-							href={`https://bsky.app/profile/${identity.did}`}
-							class="px-2.5"
-							target="_blank"
-							rel="external noopener noreferrer"
-						>
-							<Bluesky class="size-4" aria-hidden="true" />
-							{identity.handle}
-						</Link>
-					{/if}
-					{#each links as link (link)}
-						<Link
-							href={link}
-							class="px-2.5"
-							target="_blank"
-							rel="external nofollow me noopener noreferrer"
-						>
-							<LinkIcon class="size-4 shrink-0" aria-hidden="true" />
-							<span class="max-w-48 truncate">{linkLabel(link)}</span>
-						</Link>
-					{/each}
+					<ProfileSocialLinks
+						{identity}
+						{profile}
+						followers={counts.followers}
+						{followersHref}
+					/>
 				</div>
 			</div>
 		</section>
diff --git a/web/src/lib/components/profile/organization/OrganizationOverviewTab.svelte b/web/src/lib/components/profile/organization/OrganizationOverviewTab.svelte
deleted file mode 100644
index 0adfdf5e2..000000000
--- a/web/src/lib/components/profile/organization/OrganizationOverviewTab.svelte
+++ /dev/null
@@ -1,91 +0,0 @@
-<script lang="ts">
-	import { resolve } from "$app/paths";
-	import { dev } from "$app/environment";
-	import { page } from "$app/state";
-	import ArrowRight from "$icon/arrow-right";
-	import RepoCard from "$lib/components/repo/RepoCard.svelte";
-	import { LANGUAGE_COLORS, LANGUAGE_COLOR_FALLBACK } from "$lib/components/repo/languageColors";
-	import ColorBall from "$lib/components/ui/ColorBall.svelte";
-	import Button from "$lib/components/ui/Button.svelte";
-	import EmptyState from "$lib/components/ui/EmptyState.svelte";
-	import Tag from "$lib/components/ui/Tag.svelte";
-	import type { RepoCardData } from "$lib/components/profile/types";
-	import {
-		organizationLanguages,
-		organizationRepoStats,
-		organizationTopics
-	} from "$lib/components/profile/organization/mock";
-
-	interface Props {
-		pinned: RepoCardData[];
-		handle: string;
-	}
-
-	let { pinned, handle }: Props = $props();
-
-	const repositories = $derived(
-		pinned.slice(0, 4).map((repo) => ({
-			...repo,
-			language: undefined,
-			forks: undefined,
-			...organizationRepoStats
-		}))
-	);
-	const repositoriesHref = $derived(
-		`/${handle}?${new URLSearchParams({
-			tab: "repos",
-			...(dev && page.url.searchParams.get("preview") === "organization"
-				? { preview: "organization" }
-				: {})
-		})}`
-	);
-</script>
-
-<div class="grid gap-x-4 gap-y-6 p-4 md:grid-cols-2">
-	<section class="space-y-2">
-		<h2 class="px-2 typography-paragraph-regular font-medium">Languages</h2>
-		<div class="flex flex-wrap gap-2">
-			{#each organizationLanguages as language (language)}
-				<Tag size="large">
-					<ColorBall
-						color={LANGUAGE_COLORS[language] ?? LANGUAGE_COLOR_FALLBACK}
-						class="size-2"
-					/>
-					{language}
-				</Tag>
-			{/each}
-		</div>
-	</section>
-
-	<section class="space-y-2">
-		<h2 class="px-2 typography-paragraph-regular font-medium">Topics</h2>
-		<div class="flex flex-wrap gap-2">
-			{#each organizationTopics as topic (topic)}
-				<Tag size="large">{topic}</Tag>
-			{/each}
-		</div>
-	</section>
-
-	<section class="space-y-2 md:col-span-2">
-		<h2 class="px-2 typography-paragraph-regular font-medium">Pinned repositories</h2>
-		{#if repositories.length > 0}
-			<div class="grid gap-2 md:grid-cols-2">
-				{#each repositories as repo (repo.repoDid || repo.rkey || repo.name)}
-					<RepoCard {repo} starButton={false} showOwner={false} />
-				{/each}
-			</div>
-			<div class="flex justify-end pt-2">
-				<Button
-					variant="ghost"
-					href={resolve(repositoriesHref as "/")}
-					icon={ArrowRight}
-					iconSide="right"
-				>
-					View all repositories
-				</Button>
-			</div>
-		{:else}
-			<EmptyState message="No pinned repositories." />
-		{/if}
-	</section>
-</div>
diff --git a/web/src/routes/[handle]/+layout.svelte b/web/src/routes/[handle]/+layout.svelte
index 2410d28d0..548685392 100644
--- a/web/src/routes/[handle]/+layout.svelte
+++ b/web/src/routes/[handle]/+layout.svelte
@@ -35,7 +35,9 @@
 	const viewerFollowRkey = $derived(data.viewerFollowRkey);
 	const notJoined = $derived(data.notJoined);
 
-	const synchronousProfile = $derived(data.profile instanceof Promise ? null : data.profile);
+	const synchronousProfile = $derived(
+		data.profile instanceof Promise ? null : data.profile
+	);
 	let asyncProfile = $state<ProfileRecord | null>(null);
 	$effect(() => {
 		let active = true;
@@ -50,7 +52,9 @@
 	});
 	const resolvedProfile = $derived(asyncProfile ?? synchronousProfile);
 
-	const synchronousIdentity = $derived(data.identity instanceof Promise ? null : data.identity);
+	const synchronousIdentity = $derived(
+		data.identity instanceof Promise ? null : data.identity
+	);
 	let asyncIdentity = $state<{ did: string; handle: string } | null>(null);
 	$effect(() => {
 		let active = true;
@@ -68,7 +72,7 @@
 	const rawHandle = $derived(decodeURIComponent(page.params.handle ?? ""));
 	const handle = $derived(resolvedIdentity?.handle ?? rawHandle);
 	const displayName = $derived(
-		((resolvedProfile as Record<string, unknown> | null)?.displayName as string | undefined) ||
+		(resolvedProfile as Record<string, unknown> | null)?.displayName as string | undefined ||
 			resolvedProfile?.preferredHandle ||
 			handle
 	);
@@ -100,11 +104,13 @@
 		return "Couldn't load this profile";
 	};
 
-	// client navigation settles identity, so the canonical redirect happens here once it lands
+	// client navigations stream identity, so canonical redirects happen here once resolved
 	$effect(() => {
+		const pending = data.identity;
+		if (!(pending instanceof Promise)) return;
 		const identifier = decodeURIComponent(page.params.handle ?? "");
 		const search = page.url.search;
-		void Promise.resolve(data.identity)
+		void pending
 			.then((resolved) => {
 				const canonical = resolved.handle.endsWith(".invalid") ? null : resolved.handle;
 				if (canonical && identifier.toLowerCase() !== canonical.toLowerCase()) {
-- 
2.51.2