From 5c8b0295a9a4ff00478932d4b207a340d271be7e Mon Sep 17 00:00:00 2001
From: Grisha <grisha617@gmail.com>
Date: Wed, 6 May 2026 20:26:46 -0400
Subject: [PATCH] feat(widgets): adds Bufo Status zzstoatzz widget

---
 src/lib/cards/index.ts                        |  4 +-
 .../BufoStatusCard/BufoStatusCard.svelte      | 70 +++++++++++++++++++
 src/lib/cards/social/BufoStatusCard/index.ts  | 58 +++++++++++++++
 3 files changed, 131 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/cards/social/BufoStatusCard/BufoStatusCard.svelte
 create mode 100644 src/lib/cards/social/BufoStatusCard/index.ts

diff --git a/src/lib/cards/index.ts b/src/lib/cards/index.ts
index 6be995c..7c9b775 100644
--- a/src/lib/cards/index.ts
+++ b/src/lib/cards/index.ts
@@ -64,6 +64,7 @@ import { KichRecipeCollectionCardDefinition } from './social/KichRecipeCollectio
 import { KichCookingLogCardDefinition } from './social/KichCookingLogCard';
 import { SecretImageCardDefinition } from './media/SecretImageCard';
 import { RPGActorCardDefinition } from './social/RPGActorCard';
+import { BufoStatusCardDefinition } from './social/BufoStatusCard';
 // import { Model3DCardDefinition } from './visual/Model3DCard';
 
 export const AllCardDefinitions = [
@@ -133,7 +134,8 @@ export const AllCardDefinitions = [
 	KichRecipeCollectionCardDefinition,
 	KichCookingLogCardDefinition,
 	SecretImageCardDefinition,
-	RPGActorCardDefinition
+	RPGActorCardDefinition,
+	BufoStatusCardDefinition
 ] as const;
 
 export const CardDefinitionsByType = AllCardDefinitions.reduce(
diff --git a/src/lib/cards/social/BufoStatusCard/BufoStatusCard.svelte b/src/lib/cards/social/BufoStatusCard/BufoStatusCard.svelte
new file mode 100644
index 0000000..a46228d
--- /dev/null
+++ b/src/lib/cards/social/BufoStatusCard/BufoStatusCard.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { ContentComponentProps } from '../../types';
+	import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
+	import { onMount } from 'svelte';
+	import { CardDefinitionsByType } from '../..';
+	import type { BufoStatusData } from '.';
+
+	let { item }: ContentComponentProps = $props();
+
+	const data = getAdditionalUserData();
+	const did = getDidContext();
+	const handle = getHandleContext();
+
+	// svelte-ignore state_referenced_locally
+	let status = $state(data[item.cardType] as BufoStatusData | undefined);
+	// svelte-ignore state_referenced_locally
+	let loaded = $state(status !== undefined);
+
+	onMount(async () => {
+		if (status === undefined) {
+			status = (await CardDefinitionsByType[item.cardType]?.loadData?.([item], {
+				did,
+				handle
+			})) as BufoStatusData;
+			data[item.cardType] = status;
+		}
+		loaded = true;
+	});
+
+	const isCustom = $derived(status?.emoji?.startsWith('custom:') ?? false);
+	const emojiName = $derived(isCustom ? status!.emoji.slice('custom:'.length) : null);
+	const statusUrl = $derived(
+		status ? `https://status.zzstoatzz.io/status/${did}/${status.rkey}` : null
+	);
+
+	function onImgError(e: Event) {
+		const img = e.currentTarget as HTMLImageElement;
+		if (!img.src.endsWith('.gif')) {
+			img.src = `https://all-the.bufo.zone/${emojiName}.gif`;
+		}
+	}
+</script>
+
+<a
+	href={statusUrl ?? 'https://status.zzstoatzz.io'}
+	target="_blank"
+	rel="noopener noreferrer"
+	class="flex h-full w-full flex-col items-center justify-center gap-2 p-3 text-center"
+>
+	{#if status}
+		{#if emojiName}
+			<img
+				src={`https://all-the.bufo.zone/${emojiName}.png`}
+				alt={emojiName}
+				onerror={onImgError}
+				class="max-h-16 w-auto object-contain"
+			/>
+		{:else}
+			<span class="text-5xl leading-none">{status.emoji}</span>
+		{/if}
+		{#if status.text}
+			<p class="line-clamp-2 text-sm font-medium opacity-80">{status.text}</p>
+		{/if}
+	{:else if loaded}
+		<span class="text-sm opacity-40">No active status</span>
+	{:else}
+		<span class="text-sm opacity-40">Loading…</span>
+	{/if}
+	<span class="absolute right-2 bottom-1.5 text-[10px] opacity-30">bufo status</span>
+</a>
diff --git a/src/lib/cards/social/BufoStatusCard/index.ts b/src/lib/cards/social/BufoStatusCard/index.ts
new file mode 100644
index 0000000..9315679
--- /dev/null
+++ b/src/lib/cards/social/BufoStatusCard/index.ts
@@ -0,0 +1,58 @@
+import type { CardDefinition } from '../../types';
+import { listRecords } from '$lib/atproto';
+import BufoStatusCard from './BufoStatusCard.svelte';
+
+interface StatusRecord {
+	emoji: string;
+	text?: string;
+	expires?: string;
+	createdAt: string;
+}
+
+export type BufoStatusData = {
+	emoji: string;
+	text?: string;
+	rkey: string;
+} | null;
+
+export const BufoStatusCardDefinition = {
+	type: 'bufoStatus',
+	contentComponent: BufoStatusCard,
+
+	createNew: (item) => {
+		item.w = 2;
+		item.h = 2;
+		item.mobileW = 4;
+		item.mobileH = 2;
+	},
+
+	loadData: async (_items, { did }) => {
+		const records = await listRecords({
+			did,
+			collection: 'io.zzstoatzz.status.record',
+			limit: 10
+		});
+
+		const now = Date.now();
+		const active = records
+			.map((r) => {
+				const parts = r.uri.split('/');
+				const rkey = parts[parts.length - 1] ?? '';
+				const value = r.value as unknown as StatusRecord;
+				return { ...value, rkey };
+			})
+			.filter((r) => r.emoji && r.rkey && (!r.expires || new Date(r.expires).getTime() > now))
+			.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+
+		return active[0] ?? null;
+	},
+	cacheLoadData: { ttl: 300 },
+
+	minW: 2,
+	minH: 1,
+
+	name: 'Bufo Status',
+	keywords: ['bufo', 'status', 'emoji', 'mood', 'zzstoatzz'],
+	groups: ['Social'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" /></svg>`
+} as CardDefinition & { type: 'bufoStatus' };
-- 
2.51.2