From 2f938bab4bede21bb301ca8c9f107e808deb6c8e Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Thu, 30 Jul 2026 00:12:53 +0100
Subject: [PATCH] web/api: add reaction record and fetcher

Signed-off-by: oppiliappan <me@oppi.li>
---
 web/src/lib/api/records.ts                    | 18 ++++++++---
 .../lib/components/reaction/Reaction.svelte   | 30 +++++++++++++++++++
 .../lib/components/reaction/Reactions.svelte  | 19 ++++++++++++
 3 files changed, 63 insertions(+), 4 deletions(-)
 create mode 100644 web/src/lib/components/reaction/Reaction.svelte
 create mode 100644 web/src/lib/components/reaction/Reactions.svelte

diff --git a/web/src/lib/api/records.ts b/web/src/lib/api/records.ts
index cb9906fa..544e021c 100644
--- a/web/src/lib/api/records.ts
+++ b/web/src/lib/api/records.ts
@@ -2,6 +2,7 @@ import type { BobbinContext, XrpcRequestInit } from "./client";
 import { jsonGet } from "./_request";
 import type * as ShTangledActorProfile from "./lexicons/types/sh/tangled/actor/profile";
 import type * as ShTangledFeedComment from "./lexicons/types/sh/tangled/feed/comment";
+import type * as ShTangledFeedReaction from "./lexicons/types/sh/tangled/feed/reaction";
 import type * as ShTangledRepo from "./lexicons/types/sh/tangled/repo";
 import type * as ShTangledRepoIssue from "./lexicons/types/sh/tangled/repo/issue";
 import type * as ShTangledRepoIssueState from "./lexicons/types/sh/tangled/repo/issue/state";
@@ -25,6 +26,7 @@ export type IssueStateRecord = ShTangledRepoIssueState.Main;
 export type PullRecord = ShTangledRepoPull.Main;
 export type StringRecord = ShTangledString.Main;
 export type CommentRecord = ShTangledFeedComment.Main;
+export type ReactionRecord = ShTangledFeedReaction.Main;
 
 export const BULK_LIMIT = 50;
 
@@ -84,8 +86,6 @@ export const listIssues = (
 	init?: XrpcRequestInit
 ) => jsonGet<IssueListPage>(ctx, "sh.tangled.repo.listIssues", { subject, ...filter }, init);
 
-// getIssue returns the raw record only; the derived open/closed state lives in
-// separate sh.tangled.repo.issue.state records, latest-wins.
 export interface IssueStateList {
 	cursor?: string | null;
 	items: RecordView<IssueStateRecord>[];
@@ -98,8 +98,6 @@ export const listIssueStates = (
 	init?: XrpcRequestInit
 ) => jsonGet<IssueStateList>(ctx, "sh.tangled.repo.issue.listStates", { subject, ...filter }, init);
 
-// comments on any record (issue/pull/string) are flat sh.tangled.feed.comment records;
-// threading is derived client-side from each comment's optional replyTo strongRef.
 export interface CommentListPage {
 	cursor?: string | null;
 	items: RecordView<CommentRecord>[];
@@ -112,6 +110,18 @@ export const listComments = (
 	init?: XrpcRequestInit
 ) => jsonGet<CommentListPage>(ctx, "sh.tangled.feed.listComments", { subject, ...filter }, init);
 
+export interface ReactionListPage {
+	cursor?: string | null;
+	items: RecordView<ReactionRecord>[];
+}
+
+export const listReactions = (
+	ctx: BobbinContext,
+	subject: string,
+	filter: { limit?: number; cursor?: string; order?: "asc" | "desc" } = {},
+	init?: XrpcRequestInit
+) => jsonGet<ReactionListPage>(ctx, "sh.tangled.feed.listReactions", { subject, ...filter }, init);
+
 export const getPull = (ctx: BobbinContext, pull: string, init?: XrpcRequestInit) =>
 	jsonGet<RecordView<PullRecord>>(ctx, "sh.tangled.repo.getPull", { pull }, init);
 
diff --git a/web/src/lib/components/reaction/Reaction.svelte b/web/src/lib/components/reaction/Reaction.svelte
new file mode 100644
index 00000000..5f5bff78
--- /dev/null
+++ b/web/src/lib/components/reaction/Reaction.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { ReactionGroup } from "./reactions";
+
+	interface Props {
+		reaction: ReactionGroup;
+	}
+
+	let { reaction }: Props = $props();
+
+	// keep the tooltip bounded; overflow becomes "and N more", like the go appview
+	const MAX_NAMES = 10;
+	const title = $derived.by(() => {
+		const shown = reaction.users.slice(0, MAX_NAMES);
+		const more = reaction.count - shown.length;
+		const names = shown.join(", ");
+		return more > 0 ? `${names}, and ${more} more` : names;
+	});
+</script>
+
+<span
+	{title}
+	class={`flex min-h-6 items-center justify-center gap-1.5 rounded border px-2 text-sm leading-4 ${
+		reaction.isReacted
+			? "border-border-strong bg-background-muted text-foreground-default"
+			: "border-border-default text-foreground-subtle"
+	}`}
+>
+	<span>{reaction.kind}</span>
+	<span>{reaction.count}</span>
+</span>
diff --git a/web/src/lib/components/reaction/Reactions.svelte b/web/src/lib/components/reaction/Reactions.svelte
new file mode 100644
index 00000000..3067e865
--- /dev/null
+++ b/web/src/lib/components/reaction/Reactions.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import Reaction from "./Reaction.svelte";
+	import type { ReactionGroup } from "./reactions";
+
+	interface Props {
+		reactions: ReactionGroup[];
+		class?: string;
+	}
+
+	let { reactions, class: className = "" }: Props = $props();
+</script>
+
+{#if reactions.length}
+	<div class={`flex flex-wrap items-center gap-2 ${className}`}>
+		{#each reactions as reaction (reaction.kind)}
+			<Reaction {reaction} />
+		{/each}
+	</div>
+{/if}
-- 
2.51.2