From cb11c84bae35c71812a88065f6168d78f7685418 Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Sat, 31 Jan 2026 23:16:00 +0100
Subject: [PATCH] commit

---
 src/lib/cards/FriendsCard/FriendsCard.svelte  | 120 ++++++++++++++++++
 .../FriendsCard/FriendsCardSettings.svelte    | 104 +++++++++++++++
 src/lib/cards/FriendsCard/index.ts            |  44 +++++++
 .../PhotoGalleryCard/PhotoGalleryCard.svelte  |   9 +-
 src/lib/cards/index.ts                        |   4 +-
 src/lib/website/EditableWebsite.svelte        |   1 -
 src/lib/website/layout-mirror.ts              |  10 +-
 7 files changed, 281 insertions(+), 11 deletions(-)
 create mode 100644 src/lib/cards/FriendsCard/FriendsCard.svelte
 create mode 100644 src/lib/cards/FriendsCard/FriendsCardSettings.svelte
 create mode 100644 src/lib/cards/FriendsCard/index.ts

diff --git a/src/lib/cards/FriendsCard/FriendsCard.svelte b/src/lib/cards/FriendsCard/FriendsCard.svelte
new file mode 100644
index 0000000..08dd76f
--- /dev/null
+++ b/src/lib/cards/FriendsCard/FriendsCard.svelte
@@ -0,0 +1,120 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { ContentComponentProps } from '../types';
+	import { getAdditionalUserData, getCanEdit, getIsMobile } from '$lib/website/context';
+	import { getBlentoOrBskyProfile } from '$lib/atproto/methods';
+	import type { FriendsProfile } from '.';
+	import type { Did } from '@atcute/lexicons';
+	import { Avatar } from '@foxui/core';
+
+	let { item }: ContentComponentProps = $props();
+
+	const isMobile = getIsMobile();
+	const canEdit = getCanEdit();
+	const additionalData = getAdditionalUserData();
+
+	let dids: string[] = $derived(item.cardData.friends ?? []);
+
+	let serverProfiles: FriendsProfile[] = $derived(
+		(additionalData[item.cardType] as FriendsProfile[]) ?? []
+	);
+
+	let clientProfiles: FriendsProfile[] = $state([]);
+
+	let profiles = $derived.by(() => {
+		if (serverProfiles.length > 0) {
+			return dids
+				.map((did) => serverProfiles.find((p) => p.did === did))
+				.filter((p): p is FriendsProfile => !!p);
+		}
+		return dids
+			.map((did) => clientProfiles.find((p) => p.did === did))
+			.filter((p): p is FriendsProfile => !!p);
+	});
+
+	onMount(() => {
+		if (serverProfiles.length === 0 && dids.length > 0) {
+			loadProfiles();
+		}
+	});
+
+	async function loadProfiles() {
+		const results = await Promise.all(
+			dids.map((did) => getBlentoOrBskyProfile({ did: did as Did }).catch(() => undefined))
+		);
+		clientProfiles = results.filter(
+			(p): p is FriendsProfile => !!p && p.handle !== 'handle.invalid'
+		);
+	}
+
+	// Reload when dids change in editing mode
+	$effect(() => {
+		if (canEdit() && dids.length > 0) {
+			loadProfiles();
+		}
+	});
+
+	let sizeClass = $derived.by(() => {
+		const w = isMobile() ? item.mobileW / 2 : item.w;
+		if (w < 3) return 'sm';
+		if (w < 5) return 'md';
+		return 'lg';
+	});
+
+	function getLink(profile: FriendsProfile): string {
+		if (profile.hasBlento && profile.handle && profile.handle !== 'handle.invalid') {
+			return `/${profile.handle}`;
+		}
+		if (profile.handle && profile.handle !== 'handle.invalid') {
+			return `https://bsky.app/profile/${profile.handle}`;
+		}
+		return `https://bsky.app/profile/${profile.did}`;
+	}
+</script>
+
+<div class="flex h-full w-full items-center justify-center overflow-hidden px-2">
+	{#if dids.length === 0}
+		{#if canEdit()}
+			<span class="text-base-400 dark:text-base-500 accent:text-accent-300 text-sm">
+				Add friends in settings
+			</span>
+		{/if}
+	{:else}
+		<div class="flex items-center justify-center">
+			{#each visibleProfiles as profile, i (profile.did)}
+				<a
+					href={getLink(profile)}
+					class="accent:ring-accent-500/30 relative rounded-full ring-2 ring-white transition-transform hover:z-10 hover:scale-110 dark:ring-neutral-900"
+					class:-ml-3={i > 0 && sizeClass === 'sm'}
+					class:-ml-5={i > 0 && sizeClass === 'md'}
+					class:-ml-6={i > 0 && sizeClass === 'lg'}
+				>
+					<Avatar
+						src={profile.avatar}
+						alt={profile.handle}
+						class={sizeClass === 'sm' ? 'size-12' : sizeClass === 'md' ? 'size-16' : 'size-20'}
+					/>
+				</a>
+			{/each}
+			{#if overflowCount > 0}
+				<div
+					class="bg-base-200 dark:bg-base-700 accent:bg-accent-400/30 accent:ring-accent-500/30 relative flex items-center justify-center rounded-full ring-2 ring-white dark:ring-neutral-900"
+					class:-ml-3={sizeClass === 'sm'}
+					class:-ml-5={sizeClass === 'md'}
+					class:-ml-6={sizeClass === 'lg'}
+					class:size-12={sizeClass === 'sm'}
+					class:size-16={sizeClass === 'md'}
+					class:size-20={sizeClass === 'lg'}
+				>
+					<span
+						class="text-base-600 dark:text-base-300 accent:text-accent-200 font-semibold"
+						class:text-sm={sizeClass === 'sm'}
+						class:text-base={sizeClass === 'md' || sizeClass === 'lg'}
+					>
+						+{overflowCount}
+					</span>
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/cards/FriendsCard/FriendsCardSettings.svelte b/src/lib/cards/FriendsCard/FriendsCardSettings.svelte
new file mode 100644
index 0000000..6f70ca6
--- /dev/null
+++ b/src/lib/cards/FriendsCard/FriendsCardSettings.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { Item } from '$lib/types';
+	import type { SettingsComponentProps } from '../types';
+	import type { AppBskyActorDefs } from '@atcute/bluesky';
+	import type { Did } from '@atcute/lexicons';
+	import type { FriendsProfile } from '.';
+	import { getBlentoOrBskyProfile } from '$lib/atproto/methods';
+	import HandleInput from '$lib/atproto/UI/HandleInput.svelte';
+	import { Avatar, Button } from '@foxui/core';
+
+	let { item = $bindable<Item>() }: SettingsComponentProps = $props();
+
+	let handleValue = $state('');
+	let inputRef: HTMLInputElement | null = $state(null);
+	let profiles: FriendsProfile[] = $state([]);
+
+	let dids: string[] = $derived(item.cardData.friends ?? []);
+
+	onMount(() => {
+		loadProfiles();
+	});
+
+	async function loadProfiles() {
+		const results = await Promise.all(
+			dids.map((did) => getBlentoOrBskyProfile({ did: did as Did }).catch(() => undefined))
+		);
+		profiles = results.filter(
+			(p): p is FriendsProfile => !!p && p.handle !== 'handle.invalid'
+		);
+	}
+
+	function addFriend(actor: AppBskyActorDefs.ProfileViewBasic) {
+		if (!item.cardData.friends) item.cardData.friends = [];
+		if (item.cardData.friends.includes(actor.did)) return;
+		item.cardData.friends = [...item.cardData.friends, actor.did];
+		profiles = [
+			...profiles,
+			{
+				did: actor.did,
+				handle: actor.handle,
+				displayName: actor.displayName || actor.handle,
+				avatar: actor.avatar,
+				hasBlento: false
+			} as FriendsProfile
+		];
+		requestAnimationFrame(() => {
+			handleValue = '';
+			if (inputRef) inputRef.value = '';
+		});
+	}
+
+	function removeFriend(did: string) {
+		item.cardData.friends = item.cardData.friends.filter((d: string) => d !== did);
+		profiles = profiles.filter((p) => p.did !== did);
+	}
+
+	function getProfile(did: string): FriendsProfile | undefined {
+		return profiles.find((p) => p.did === did);
+	}
+</script>
+
+<div class="flex flex-col gap-3">
+	<HandleInput bind:value={handleValue} onselected={addFriend} bind:ref={inputRef} />
+
+	{#if dids.length > 0}
+		<div class="flex flex-col gap-1.5">
+			{#each dids as did (did)}
+				{@const profile = getProfile(did)}
+				<div class="flex items-center gap-2">
+					<Avatar
+						src={profile?.avatar}
+						alt={profile?.handle ?? did}
+						class="size-6 rounded-full"
+					/>
+					<span class="min-w-0 flex-1 truncate text-sm">
+						{profile?.handle ?? did}
+					</span>
+					<Button
+						variant="ghost"
+						size="icon"
+						class="size-6 min-w-6"
+						onclick={() => removeFriend(did)}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="2"
+							stroke="currentColor"
+							class="size-3.5"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M6 18 18 6M6 6l12 12"
+							/>
+						</svg>
+					</Button>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/cards/FriendsCard/index.ts b/src/lib/cards/FriendsCard/index.ts
new file mode 100644
index 0000000..ca13d22
--- /dev/null
+++ b/src/lib/cards/FriendsCard/index.ts
@@ -0,0 +1,44 @@
+import type { CardDefinition } from '../types';
+import type { Did } from '@atcute/lexicons';
+import { getBlentoOrBskyProfile } from '$lib/atproto/methods';
+import FriendsCard from './FriendsCard.svelte';
+import FriendsCardSettings from './FriendsCardSettings.svelte';
+
+export type FriendsProfile = Awaited<ReturnType<typeof getBlentoOrBskyProfile>>;
+
+export const FriendsCardDefinition = {
+	type: 'friends',
+	contentComponent: FriendsCard,
+	settingsComponent: FriendsCardSettings,
+	createNew: (card) => {
+		card.w = 4;
+		card.h = 2;
+		card.mobileW = 8;
+		card.mobileH = 4;
+		card.cardData.friends = [];
+	},
+	loadData: async (items) => {
+		const allDids = new Set<Did>();
+		for (const item of items) {
+			for (const did of item.cardData.friends ?? []) {
+				allDids.add(did as Did);
+			}
+		}
+		if (allDids.size === 0) return [];
+
+		const profiles = await Promise.all(
+			Array.from(allDids).map((did) =>
+				getBlentoOrBskyProfile({ did }).catch(() => undefined)
+			)
+		);
+		return profiles.filter((p) => p && p.handle !== 'handle.invalid');
+	},
+	allowSetColor: true,
+	defaultColor: 'base',
+	minW: 2,
+	minH: 2,
+	name: 'Friends',
+	groups: ['Social'],
+	keywords: ['friends', 'avatars', 'people', 'community', 'blentos'],
+	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 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" /></svg>`
+} as CardDefinition & { type: 'friends' };
diff --git a/src/lib/cards/PhotoGalleryCard/PhotoGalleryCard.svelte b/src/lib/cards/PhotoGalleryCard/PhotoGalleryCard.svelte
index b97ebcb..4619b05 100644
--- a/src/lib/cards/PhotoGalleryCard/PhotoGalleryCard.svelte
+++ b/src/lib/cards/PhotoGalleryCard/PhotoGalleryCard.svelte
@@ -49,7 +49,7 @@
 	});
 
 	let images = $derived(
-		feed
+		(feed
 			?.toSorted((a: PhotoItem, b: PhotoItem) => {
 				return (a.value.position ?? 0) - (b.value.position ?? 0);
 			})
@@ -63,6 +63,13 @@
 					position: i.value.position ?? 0
 				};
 			})
+			.filter((i) => i.src !== undefined) || []) as {
+			src: string;
+			name: string;
+			width: number;
+			height: number;
+			position: number;
+		}[]
 	);
 
 	let isMobile = getIsMobile();
diff --git a/src/lib/cards/index.ts b/src/lib/cards/index.ts
index a95ce54..4efcddf 100644
--- a/src/lib/cards/index.ts
+++ b/src/lib/cards/index.ts
@@ -35,6 +35,7 @@ import { CountdownCardDefinition } from './CountdownCard';
 import { SpotifyCardDefinition } from './SpotifyCard';
 import { ButtonCardDefinition } from './ButtonCard';
 import { GuestbookCardDefinition } from './GuestbookCard';
+import { FriendsCardDefinition } from './FriendsCard';
 // import { Model3DCardDefinition } from './Model3DCard';
 
 export const AllCardDefinitions = [
@@ -73,8 +74,9 @@ export const AllCardDefinitions = [
 	TimerCardDefinition,
 	ClockCardDefinition,
 	CountdownCardDefinition,
-	SpotifyCardDefinition
+	SpotifyCardDefinition,
 	// Model3DCardDefinition
+	FriendsCardDefinition
 ] as const;
 
 export const CardDefinitionsByType = AllCardDefinitions.reduce(
diff --git a/src/lib/website/EditableWebsite.svelte b/src/lib/website/EditableWebsite.svelte
index d380a6f..3dfe6f8 100644
--- a/src/lib/website/EditableWebsite.svelte
+++ b/src/lib/website/EditableWebsite.svelte
@@ -931,7 +931,6 @@
 		>
 			<div class="pointer-events-none"></div>
 			<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
-			<!-- svelte-ignore a11y_click_events_have_key_events -->
 			<div
 				bind:this={container}
 				onclick={(e) => {
diff --git a/src/lib/website/layout-mirror.ts b/src/lib/website/layout-mirror.ts
index afd025b..9de9a8c 100644
--- a/src/lib/website/layout-mirror.ts
+++ b/src/lib/website/layout-mirror.ts
@@ -51,9 +51,7 @@ export function mirrorLayout(items: Item[], fromMobile: boolean): void {
 	if (fromMobile) {
 		// Mobile → Desktop: reflow items to use the full grid width.
 		// Sort by mobile position so items are placed in reading order.
-		const sorted = items.toSorted(
-			(a, b) => a.mobileY - b.mobileY || a.mobileX - b.mobileX
-		);
+		const sorted = items.toSorted((a, b) => a.mobileY - b.mobileY || a.mobileX - b.mobileX);
 
 		// Place each item into the first available spot on the desktop grid
 		const placed: Item[] = [];
@@ -66,11 +64,7 @@ export function mirrorLayout(items: Item[], fromMobile: boolean): void {
 	} else {
 		// Desktop → Mobile: proportional positions
 		for (const item of items) {
-			item.mobileX = clamp(
-				Math.floor((item.x * 2) / 2) * 2,
-				0,
-				COLUMNS - item.mobileW
-			);
+			item.mobileX = clamp(Math.floor((item.x * 2) / 2) * 2, 0, COLUMNS - item.mobileW);
 			item.mobileY = Math.max(0, Math.round(item.y * 2));
 		}
 		fixAllCollisions(items, true);
-- 
2.51.2