update statusphere card

src/lib/cards/media/StatusphereCard/EditStatusphereCard.svelte

···
 		}
 	});
 
-	// Use card-specific emoji if set, otherwise fall back to PDS data
-	let emoji = $derived(item.cardData?.emoji ?? record?.value?.status);
+	let mode = $derived(item.cardData?.mode ?? 'emoji');
+	// Emoji mode: use cardData. Statusphere mode: use latest record or preview.
+	let emoji = $derived(
+		mode === 'statusphere'
+			? (item.cardData?.emoji ?? record?.value?.status)
+			: item.cardData?.emoji
+	);
 
 	let showPopover = $state(false);
 </script>
···
 	<PopoverEmojiPicker
 		bind:open={showPopover}
 		onpicked={(picked) => {
-			item.cardData.hasUpdate = true;
+			if (mode === 'statusphere') {
+				item.cardData.hasUpdate = true;
+			}
 			item.cardData.emoji = picked.unicode;
-
 			showPopover = false;
 		}}
 	>

src/lib/cards/media/StatusphereCard/SettingsStatusphereCard.svelte

···
 <script lang="ts">
-	import type { Item } from '$lib/types';
-	import { getAdditionalUserData } from '$lib/website/context';
-	import { EmojiPicker } from '@foxui/social';
+	import type { SettingsComponentProps } from '../../types';
 
-	let { item }: { item: Item } = $props();
+	let { item = $bindable() }: SettingsComponentProps = $props();
 
-	const data = getAdditionalUserData();
-	// svelte-ignore state_referenced_locally
-	let record = $state(data[item.cardType] as any);
+	let mode: 'emoji' | 'statusphere' = $derived(item.cardData.mode ?? 'emoji');
 </script>
 
-<EmojiPicker
-	onpicked={(emoji) => {
-		record.value.status = emoji.unicode;
-		data[item.cardType] = { value: { status: emoji.unicode } };
-
-		item.cardData.hasUpdate = true;
-		item.cardData.emoji = emoji.unicode;
-	}}
-/>
+<div class="flex gap-2">
+	<button
+		class="rounded-full px-3 py-1 text-sm font-medium transition-colors {mode === 'emoji'
+			? 'bg-accent-500 text-white'
+			: 'bg-base-200 dark:bg-base-700 text-base-700 dark:text-base-300'}"
+		onclick={() => (item.cardData.mode = 'emoji')}
+	>
+		Emoji
+	</button>
+	<button
+		class="rounded-full px-3 py-1 text-sm font-medium transition-colors {mode === 'statusphere'
+			? 'bg-accent-500 text-white'
+			: 'bg-base-200 dark:bg-base-700 text-base-700 dark:text-base-300'}"
+		onclick={() => (item.cardData.mode = 'statusphere')}
+	>
+		Statusphere
+	</button>
+</div>

src/lib/cards/media/StatusphereCard/StatusphereCard.svelte

···
 	// svelte-ignore state_referenced_locally
 	let record = $state(data[item.cardType] as any);
 
-	// Use card-specific emoji if set, otherwise fall back to PDS data
-	let emoji = $derived(item.cardData?.emoji ?? record?.value?.status);
+	let mode = $derived(item.cardData?.mode ?? 'emoji');
+	// Emoji mode: use cardData. Statusphere mode: use latest record from PDS.
+	let emoji = $derived(
+		mode === 'statusphere' ? record?.value?.status : item.cardData?.emoji
+	);
 	let animated = $derived(emojiToNotoAnimatedWebp(emoji));
 </script>
 

src/lib/cards/media/StatusphereCard/index.ts

···
 import { listRecords, putRecord } from '$lib/atproto';
 import StatusphereCard from './StatusphereCard.svelte';
 import EditStatusphereCard from './EditStatusphereCard.svelte';
+import SettingsStatusphereCard from './SettingsStatusphereCard.svelte';
 import icons from './icons.json';
 import * as TID from '@atcute/tid';
 
···
 	type: 'statusphere',
 	contentComponent: StatusphereCard,
 	editingContentComponent: EditStatusphereCard,
+	settingsComponent: SettingsStatusphereCard,
 
 	createNew: (item) => {},
 
 	loadData: async (items, { did }) => {
+		// Only fetch statusphere records if any card uses statusphere mode
+		const needsStatusphere = items.some((i) => i.cardData.mode === 'statusphere');
+		if (!needsStatusphere) return undefined;
+
 		const data = await listRecords({ did, collection: 'xyz.statusphere.status', limit: 1 });
-
 		return data[0];
 	},
 	upload: async (item) => {
-		if (item.cardData.hasUpdate) {
+		if (item.cardData.mode === 'statusphere' && item.cardData.hasUpdate) {
 			await putRecord({
 				rkey: TID.now(),
 				collection: 'xyz.statusphere.status',
···
 				}
 			});
 			delete item.cardData.hasUpdate;
-			// Keep item.cardData.emoji so each card can have its own status
+			delete item.cardData.emoji;
 		}
 
 		return item;