From 268b66a3e8dd0bc51b9df2ba96e57e3f53446a1e Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Fri, 10 Apr 2026 22:41:09 +0200
Subject: [PATCH] commit

---
 src/lib/reddit/db.ts                        |  17 ++-
 src/lib/reddit/server/communities.remote.ts |   9 +-
 src/routes/communities/+page.svelte         | 120 +++++++++++++++++---
 src/routes/register/+page.svelte            |  40 +++----
 4 files changed, 141 insertions(+), 45 deletions(-)

diff --git a/src/lib/reddit/db.ts b/src/lib/reddit/db.ts
index 9d6aae4..64fe097 100644
--- a/src/lib/reddit/db.ts
+++ b/src/lib/reddit/db.ts
@@ -45,14 +45,21 @@ export type PostWithCommunity = PostRow & {
 	community_accent_color: string | null;
 };
 
-export async function listCommunities(db: D1Database): Promise<CommunityRow[]> {
+export type CommunityListRow = CommunityRow & { post_count: number };
+
+export async function listCommunities(db: D1Database): Promise<CommunityListRow[]> {
+	// LEFT JOIN with a grouped subquery so communities with zero posts
+	// still appear (COALESCE to 0) without needing a second roundtrip.
 	const res = await db
 		.prepare(
-			`SELECT did, handle, pds, secret_key_ciphertext, secret_key_iv, public_jwk_json, thumbprint, display_name, avatar, description, accent_color, followers_count, created_at
-			 FROM communities
-			 ORDER BY followers_count DESC NULLS LAST, created_at DESC`
+			`SELECT c.did, c.handle, c.pds, c.secret_key_ciphertext, c.secret_key_iv, c.public_jwk_json, c.thumbprint, c.display_name, c.avatar, c.description, c.accent_color, c.followers_count, c.created_at,
+			        COALESCE(pc.n, 0) AS post_count
+			 FROM communities c
+			 LEFT JOIN (SELECT community_did, COUNT(*) AS n FROM posts GROUP BY community_did) pc
+			   ON pc.community_did = c.did
+			 ORDER BY c.followers_count DESC NULLS LAST, c.created_at DESC`
 		)
-		.all<CommunityRow>();
+		.all<CommunityListRow>();
 	return res.results ?? [];
 }
 
diff --git a/src/lib/reddit/server/communities.remote.ts b/src/lib/reddit/server/communities.remote.ts
index f3d3157..6c87cdd 100644
--- a/src/lib/reddit/server/communities.remote.ts
+++ b/src/lib/reddit/server/communities.remote.ts
@@ -39,6 +39,9 @@ type PublicCommunity = Omit<
 > & {
 	accentColor: AccentColor;
 	followersCount: number;
+	/** Total cached submissions in this community. Populated by
+	  * listCommunities; 0 for single-row reads that don't compute it. */
+	postCount: number;
 };
 
 /** PublicCommunity + viewer-specific access state. */
@@ -46,7 +49,7 @@ type CommunityWithAccess = PublicCommunity & {
 	canSubmit: boolean;
 };
 
-function sanitize(row: CommunityRow): PublicCommunity {
+function sanitize(row: CommunityRow & { post_count?: number }): PublicCommunity {
 	/* eslint-disable @typescript-eslint/no-unused-vars */
 	const {
 		secret_key_ciphertext,
@@ -55,13 +58,15 @@ function sanitize(row: CommunityRow): PublicCommunity {
 		thumbprint,
 		accent_color,
 		followers_count,
+		post_count,
 		...rest
 	} = row;
 	/* eslint-enable @typescript-eslint/no-unused-vars */
 	return {
 		...rest,
 		accentColor: isAccentColor(accent_color) ? accent_color : DEFAULT_ACCENT_COLOR,
-		followersCount: followers_count ?? 0
+		followersCount: followers_count ?? 0,
+		postCount: post_count ?? 0
 	};
 }
 
diff --git a/src/routes/communities/+page.svelte b/src/routes/communities/+page.svelte
index 9f2a42c..3754c66 100644
--- a/src/routes/communities/+page.svelte
+++ b/src/routes/communities/+page.svelte
@@ -1,25 +1,94 @@
 <script lang="ts">
 	/* eslint-disable svelte/no-navigation-without-resolve */
 	import { onMount } from 'svelte';
-	import { Avatar } from '@foxui/core';
-	import { Loader2, Plus } from '@lucide/svelte';
+	import { Avatar, Button } from '@foxui/core';
+	import { Loader2, Plus, Check, UserPlus } from '@lucide/svelte';
 	import { getCommunities } from '$lib/reddit/server/communities.remote';
+	import {
+		followUser,
+		unfollowUser,
+		getProfile
+	} from '$lib/atproto/server/feed.remote';
+	import { user } from '$lib/atproto/auth.svelte';
+	import { loginModalState } from '$lib/LoginModal.svelte';
 
 	type Communities = Awaited<ReturnType<typeof getCommunities>>;
+	type Community = Communities[number];
 
 	let loading = $state(true);
 	let communities = $state<Communities>([]);
+	// Per-community join state: followUri (AT-URI of the user's own follow
+	// record, null if not following) + a per-row loading flag so multiple
+	// buttons can be toggled independently without blocking each other.
+	let followStates = $state<Record<string, { followUri: string | null; loading: boolean }>>({});
 
 	onMount(async () => {
 		try {
 			communities = await getCommunities({});
+			// Seed join state for signed-in viewers. Runs in parallel —
+			// latency is one getProfile call (we fire them all at once).
+			if (user.did && communities.length > 0) {
+				const results = await Promise.all(
+					communities.map((c) =>
+						getProfile({ actor: c.did })
+							.then((p) => ({
+								did: c.did,
+								followUri: p.viewer?.following ?? null
+							}))
+							.catch(() => ({ did: c.did, followUri: null }))
+					)
+				);
+				const next: typeof followStates = {};
+				for (const r of results) {
+					next[r.did] = { followUri: r.followUri, loading: false };
+				}
+				followStates = next;
+			}
 		} catch (e) {
-			console.error(e);
+			console.error('[communities] load failed', e);
 		} finally {
 			loading = false;
 		}
 	});
 
+	async function onJoinClick(e: Event, community: Community) {
+		e.preventDefault();
+		e.stopPropagation();
+		if (!user.did) {
+			loginModalState.open = true;
+			return;
+		}
+		const current = followStates[community.did] ?? { followUri: null, loading: false };
+		if (current.loading) return;
+		// Optimistic: flip the button immediately, revert on error.
+		const wasFollowing = current.followUri !== null;
+		followStates = {
+			...followStates,
+			[community.did]: { followUri: current.followUri, loading: true }
+		};
+		try {
+			if (wasFollowing && current.followUri) {
+				await unfollowUser({ followUri: current.followUri });
+				followStates = {
+					...followStates,
+					[community.did]: { followUri: null, loading: false }
+				};
+			} else {
+				const result = await followUser({ did: community.did });
+				followStates = {
+					...followStates,
+					[community.did]: { followUri: result.uri, loading: false }
+				};
+			}
+		} catch (err) {
+			console.error('[communities] toggle join failed', err);
+			followStates = {
+				...followStates,
+				[community.did]: { followUri: current.followUri, loading: false }
+			};
+		}
+	}
+
 	function formatCount(n: number): string {
 		if (n < 1000) return String(n);
 		if (n < 10_000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'k';
@@ -52,29 +121,50 @@
 		<ul class="divide-base-200 dark:divide-base-800 flex flex-col divide-y">
 			{#each communities as c (c.did)}
 				{@const short = c.handle.split('.')[0]}
-				<li class={c.accentColor}>
-					<a
-						href={`/c/${short}`}
-						class="flex items-center gap-3 py-3 transition-colors hover:bg-base-100/50 dark:hover:bg-base-800/30 px-3 rounded-2xl my-2"
-					>
+				{@const state = followStates[c.did] ?? { followUri: null, loading: false }}
+				{@const isFollowing = state.followUri !== null}
+				<li
+					class="{c.accentColor} my-2 flex items-center gap-3 rounded-2xl px-3 py-2 transition-colors hover:bg-base-100/50 dark:hover:bg-base-800/30"
+				>
+					<a href={`/c/${short}`} class="flex min-w-0 flex-1 items-center gap-3">
 						{#if c.avatar}
 							<Avatar src={c.avatar} class="size-12 ring-2 ring-accent-500" />
 						{/if}
 						<div class="min-w-0 flex-1">
-							<div class="font-semibold text-accent-600 dark:text-accent-400">c/{short}</div>
+							<div class="text-accent-600 dark:text-accent-400 font-semibold">c/{short}</div>
 							{#if c.description}
 								<div class="text-base-500 dark:text-base-400 truncate text-sm">
 									{c.description}
 								</div>
 							{/if}
 						</div>
-						<div class="text-base-500 dark:text-base-400 shrink-0 text-right text-xs">
-							<div class="text-base-700 dark:text-base-300 font-semibold">
-								{formatCount(c.followersCount)}
-							</div>
-							<div>members</div>
-						</div>
 					</a>
+					<div class="text-base-500 dark:text-base-400 shrink-0 text-right text-xs leading-tight">
+						<div>
+							<span class="text-base-700 dark:text-base-300 font-semibold">{formatCount(c.followersCount)}</span>
+							members
+						</div>
+						<div>
+							<span class="text-base-700 dark:text-base-300 font-semibold">{formatCount(c.postCount)}</span>
+							posts
+						</div>
+					</div>
+					<Button
+						variant={isFollowing ? 'secondary' : 'primary'}
+						size="icon"
+						onclick={(e: Event) => onJoinClick(e, c)}
+						disabled={state.loading}
+						aria-label={isFollowing ? 'Leave community' : 'Join community'}
+						class="shrink-0"
+					>
+						{#if state.loading}
+							<Loader2 size={16} class="animate-spin" />
+						{:else if isFollowing}
+							<Check size={16} />
+						{:else}
+							<UserPlus size={16} />
+						{/if}
+					</Button>
 				</li>
 			{/each}
 		</ul>
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index d70964f..5c7eb7d 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -3,8 +3,9 @@
 	import { goto } from '$app/navigation';
 	import { Button, Input, Textarea } from '@foxui/core';
 	import { ColorSelect } from '@foxui/colors';
-	import { Loader2, CheckCircle2, ImagePlus, X } from '@lucide/svelte';
+	import { Loader2, ImagePlus, X } from '@lucide/svelte';
 	import { register } from '$lib/reddit/server/communities.remote';
+	import { followUser } from '$lib/atproto/server/feed.remote';
 	import { user } from '$lib/atproto/auth.svelte';
 	import { loginModalState } from '$lib/LoginModal.svelte';
 	import {
@@ -25,7 +26,6 @@
 	let listUrl = $state('');
 	let submitting = $state(false);
 	let errorMsg = $state<string | null>(null);
-	let success = $state<{ handle: string } | null>(null);
 
 	const accentOptions = ACCENT_COLORS.map((label) => ({
 		class: `text-${label}-500`,
@@ -109,7 +109,6 @@
 			return;
 		}
 		errorMsg = null;
-		success = null;
 		submitting = true;
 		try {
 			const trimmedDesc = description.trim();
@@ -127,10 +126,21 @@
 				whoCanSubmit,
 				...(whoCanSubmit === 'list' ? { listUrl: listUrl.trim() } : {})
 			});
-			success = { handle: result.handle };
-			shortHandle = '';
-			description = '';
-			clearAvatar();
+
+			// Auto-join: follow the freshly-created community account from
+			// the creator's repo. Non-fatal — the user can toggle the button
+			// on the community page if this fails. We don't surface the error
+			// because the overall creation succeeded.
+			try {
+				await followUser({ did: result.did });
+			} catch (err) {
+				console.error('[register] auto-follow failed', err);
+			}
+
+			// Auto-redirect to the new community page. No success card —
+			// the landing page itself is the confirmation.
+			const short = result.handle.split('.')[0];
+			await goto(`/c/${short}`);
 		} catch (err) {
 			const msg = err instanceof Error ? err.message : String(err);
 			errorMsg = msg.replace(/^Registration failed:\s*/, '') || 'Registration failed';
@@ -282,22 +292,6 @@
 			</div>
 		{/if}
 
-		{#if success}
-			<div class="flex items-start gap-2 rounded-lg bg-green-100 px-3 py-2 text-sm text-green-800 dark:bg-green-900/30 dark:text-green-300">
-				<CheckCircle2 size={16} class="mt-0.5 shrink-0" />
-				<div>
-					Community <span class="font-semibold">@{success.handle}</span> is ready.
-					<button
-						type="button"
-						class="ml-1 underline"
-						onclick={() => success && goto(`/c/${success.handle.split('.')[0]}`)}
-					>
-						View community →
-					</button>
-				</div>
-			</div>
-		{/if}
-
 		<Button
 			type="submit"
 			variant="primary"
-- 
2.51.2