From 6863d10ad18c593a1cedd30230982f89cbe485e2 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Tue, 22 Sep 2026 11:51:42 +0100
Subject: [PATCH] web/organizations: render the overview from the profile
 record

---
 .../profile/ProfileChrome.stories.svelte      |  1 +
 .../profile/ProfileSocialLinks.svelte         |  8 +++-
 .../organization/OrganizationChrome.svelte    | 35 +++-----------
 .../OrganizationOnboardingBanner.svelte       | 48 -------------------
 .../OrganizationOverviewTab.svelte            | 48 +------------------
 .../components/profile/organization/mock.ts   | 20 --------
 web/src/routes/[handle]/+page.ts              |  1 +
 7 files changed, 18 insertions(+), 143 deletions(-)
 delete mode 100644 web/src/lib/components/profile/organization/OrganizationOnboardingBanner.svelte

diff --git a/web/src/lib/components/profile/ProfileChrome.stories.svelte b/web/src/lib/components/profile/ProfileChrome.stories.svelte
index 46e3fc18d..3eb10e773 100644
--- a/web/src/lib/components/profile/ProfileChrome.stories.svelte
+++ b/web/src/lib/components/profile/ProfileChrome.stories.svelte
@@ -101,6 +101,7 @@
 		await expect(
 			context.canvas.queryByRole("link", { name: "Settings" })
 		).not.toBeInTheDocument();
+		await expect(context.canvas.queryByText("Managed by")).not.toBeInTheDocument();
 	};
 	const organizationAsController = async (context: PlayContext) => {
 		await organizationOverview(context);
diff --git a/web/src/lib/components/profile/ProfileSocialLinks.svelte b/web/src/lib/components/profile/ProfileSocialLinks.svelte
index 1a0898483..06b9fd6d3 100644
--- a/web/src/lib/components/profile/ProfileSocialLinks.svelte
+++ b/web/src/lib/components/profile/ProfileSocialLinks.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { twMerge } from "tailwind-merge";
 	import { resolve } from "$app/paths";
 	import LinkIcon from "$icon/link";
 	import UsersRound from "$icon/users-round";
@@ -37,7 +38,12 @@
 	};
 </script>
 
-<div class={["flex max-w-full flex-wrap items-center gap-4 typography-paragraph-small", className]}>
+<div
+	class={twMerge(
+		"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">
 		<UsersRound class="size-4 shrink-0" aria-hidden="true" />
 		<Link
diff --git a/web/src/lib/components/profile/organization/OrganizationChrome.svelte b/web/src/lib/components/profile/organization/OrganizationChrome.svelte
index 53c16b9af..b41a1f45b 100644
--- a/web/src/lib/components/profile/organization/OrganizationChrome.svelte
+++ b/web/src/lib/components/profile/organization/OrganizationChrome.svelte
@@ -2,14 +2,12 @@
 	import { dev } from "$app/environment";
 	import { page } from "$app/state";
 	import type { Snippet } from "svelte";
-	import UserRoundCog from "$icon/user-round-cog";
 	import Warehouse from "$icon/warehouse";
 	import { createLoad } from "$lib/action.svelte";
 	import { viewerControlsOrganization } from "$lib/api/organizations";
 	import type { ProfileRecord } from "$lib/api/records";
 	import { getAuth } from "$lib/auth.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";
@@ -17,8 +15,6 @@
 	import Avatar from "$lib/components/ui/Avatar.svelte";
 	import Separator from "$lib/components/ui/Separator.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
-	import User from "$lib/components/ui/User.svelte";
-	import ProfilePopover from "$lib/components/profile/ProfilePopover.svelte";
 
 	interface Props {
 		identity: { did: string; handle: string };
@@ -121,30 +117,13 @@
 					<ProfileMoreMenu {identity} />
 				</div>
 
-				<div
-					class="flex max-w-full flex-wrap items-center justify-center gap-3 typography-paragraph-small max-sm:w-full max-sm:flex-col max-sm:items-start"
-				>
-					<span class="flex items-center gap-1 px-2.5 py-1">
-						<UserRoundCog class="size-4" aria-hidden="true" />
-						<span>Managed by</span>
-						<ProfilePopover did={organizationManager.did}>
-							<User
-								did={organizationManager.did}
-								handle={organizationManager.handle}
-								size="small"
-								class="gap-1"
-								link={true}
-							/>
-						</ProfilePopover>
-					</span>
-					<ProfileSocialLinks
-						{identity}
-						{profile}
-						followers={counts.followers}
-						{followersHref}
-						class="max-sm:flex-col max-sm:items-start max-sm:gap-3"
-					/>
-				</div>
+				<ProfileSocialLinks
+					{identity}
+					{profile}
+					followers={counts.followers}
+					{followersHref}
+					class="justify-center gap-2 max-sm:w-full max-sm:flex-col max-sm:items-start"
+				/>
 			</div>
 
 			<Separator class="sm:hidden" />
diff --git a/web/src/lib/components/profile/organization/OrganizationOnboardingBanner.svelte b/web/src/lib/components/profile/organization/OrganizationOnboardingBanner.svelte
deleted file mode 100644
index 794a460f1..000000000
--- a/web/src/lib/components/profile/organization/OrganizationOnboardingBanner.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script lang="ts">
-	import { prefersReducedMotion } from "svelte/motion";
-	import { fade } from "svelte/transition";
-	import { resolve } from "$app/paths";
-	import ArrowRight from "$icon/arrow-right";
-	import Building2 from "$icon/building-2";
-	import X from "$icon/x";
-	import Button from "$lib/components/ui/Button.svelte";
-	import { EXIT_DURATION } from "$lib/motion/spring";
-
-	interface Props {
-		handle: string;
-		class?: string;
-	}
-
-	let { handle, class: className }: Props = $props();
-
-	let dismissed = $state(false);
-
-	const href = $derived(resolve(`/organizations/${handle}/welcome` as "/"));
-	const exit = $derived(prefersReducedMotion.current ? 0 : EXIT_DURATION);
-</script>
-
-{#if !dismissed}
-	<div
-		out:fade={{ duration: exit }}
-		class={[
-			"flex items-center gap-3 rounded-sm border border-background-info-subtle-hover bg-background-info-subtle p-4",
-			className
-		]}
-	>
-		<Building2 class="size-4 shrink-0 text-foreground-info" aria-hidden="true" />
-		<p class="min-w-0 flex-1 typography-paragraph-small">
-			Finish setting up this organization — add a picture, a description, and a first
-			repository.
-		</p>
-		<Button variant="ghost" size="small" icon={ArrowRight} iconSide="right" {href}>
-			Continue
-		</Button>
-		<Button
-			variant="ghost"
-			size="small"
-			icon={X}
-			aria-label="Dismiss"
-			onclick={() => (dismissed = true)}
-		/>
-	</div>
-{/if}
diff --git a/web/src/lib/components/profile/organization/OrganizationOverviewTab.svelte b/web/src/lib/components/profile/organization/OrganizationOverviewTab.svelte
index 6a3b92c38..8a52b96e4 100644
--- a/web/src/lib/components/profile/organization/OrganizationOverviewTab.svelte
+++ b/web/src/lib/components/profile/organization/OrganizationOverviewTab.svelte
@@ -1,18 +1,8 @@
 <script lang="ts">
 	import { dev } from "$app/environment";
 	import { page } from "$app/state";
-	import { LANGUAGE_COLORS, LANGUAGE_COLOR_FALLBACK } from "$lib/components/repo/languageColors";
 	import PinnedRepositories from "$lib/components/profile/PinnedRepositories.svelte";
-	import ColorBall from "$lib/components/ui/ColorBall.svelte";
-	import Tag from "$lib/components/ui/Tag.svelte";
 	import type { RepoCardData } from "$lib/components/profile/types";
-	import OrganizationOnboardingBanner from "$lib/components/profile/organization/OrganizationOnboardingBanner.svelte";
-	import {
-		organizationLanguages,
-		organizationOnboardingComplete,
-		organizationRepoStats,
-		organizationTopics
-	} from "$lib/components/profile/organization/mock";
 
 	interface Props {
 		pinned: RepoCardData[];
@@ -21,14 +11,6 @@
 
 	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",
@@ -40,35 +22,9 @@
 </script>
 
 <div class="grid gap-x-4 gap-y-6 p-4 md:grid-cols-2">
-	{#if !organizationOnboardingComplete}
-		<OrganizationOnboardingBanner {handle} class="md:col-span-2" />
-	{/if}
-
-	<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>
+	<!-- TODO: language logic -->
 
 	<div class="md:col-span-2">
-		<PinnedRepositories {repositories} {handle} href={repositoriesHref} />
+		<PinnedRepositories repositories={pinned} {handle} href={repositoriesHref} />
 	</div>
 </div>
diff --git a/web/src/lib/components/profile/organization/mock.ts b/web/src/lib/components/profile/organization/mock.ts
index d24584709..55fb745e2 100644
--- a/web/src/lib/components/profile/organization/mock.ts
+++ b/web/src/lib/components/profile/organization/mock.ts
@@ -1,14 +1,5 @@
 import type { PersonData, RepoCardData } from "$lib/components/profile/types";
 
-export const organizationLanguages = ["Go", "Rust", "JavaScript"];
-
-export const organizationTopics = ["climate-change", "biology", "astronomy", "design"];
-
-export const organizationManager = {
-	did: "did:plc:organization-manager",
-	handle: "user.tld"
-};
-
 export const organizationMembers: PersonData[] = Array.from({ length: 9 }, (_, index) => ({
 	did: `did:plc:organization-member-${index + 1}`,
 	handle: index === 0 ? "user.tld" : `member-${index + 1}.tld`,
@@ -19,17 +10,6 @@ export const organizationMembers: PersonData[] = Array.from({ length: 9 }, (_, i
 	isSelf: false
 }));
 
-export const organizationMemberCount = 86;
-
-export const organizationRepoStats = {
-	issues: 94,
-	pulls: 76
-};
-
-export const viewerIsOrganizationOwner = true;
-
-export const organizationOnboardingComplete = false;
-
 export interface MemberCandidate {
 	did: string;
 	handle: string;
diff --git a/web/src/routes/[handle]/+page.ts b/web/src/routes/[handle]/+page.ts
index e61df9af2..59288b7d5 100644
--- a/web/src/routes/[handle]/+page.ts
+++ b/web/src/routes/[handle]/+page.ts
@@ -106,6 +106,7 @@ export const load: PageLoad = async (event) => {
 					fetchProfileActivity(ctx, { did, handle })
 				)
 			);
+			// TODO: language logic
 			return settle({
 				tab: "overview" as const,
 				overview: await settle({ pinned: stream(pinned), activity: stream(activity) })
-- 
2.51.2