Merge pull request #119 from flo-bit/remove-extra-buttons

Remove extra buttons

src/lib/cards/FriendsCard/FriendsCard.svelte

···
+<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}
+		{@const olX = sizeClass === 'sm' ? 12 : sizeClass === 'md' ? 20 : 24}
+		{@const olY = sizeClass === 'sm' ? 8 : sizeClass === 'md' ? 12 : 16}
+		<div class="">
+			<div
+				class="flex flex-wrap items-center justify-center"
+				style="padding: {olY}px 0 0 {olX}px;"
+			>
+				{#each profiles as profile (profile.did)}
+					<a
+						href={getLink(profile)}
+						class="accent:ring-accent-500 relative block rounded-full ring-2 ring-white transition-transform hover:scale-110 dark:ring-neutral-900"
+						style="margin: -{olY}px 0 0 -{olX}px;"
+					>
+						<Avatar
+							src={profile.avatar}
+							alt={profile.handle}
+							class={sizeClass === 'sm' ? 'size-12' : sizeClass === 'md' ? 'size-16' : 'size-20'}
+						/>
+					</a>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>

src/lib/cards/FriendsCard/FriendsCardSettings.svelte

···
+<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>

src/lib/cards/FriendsCard/index.ts

···
+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' };

src/lib/cards/PhotoGalleryCard/PhotoGalleryCard.svelte

···
 	});
 
 	let images = $derived(
-		feed
+		(feed
 			?.toSorted((a: PhotoItem, b: PhotoItem) => {
 				return (a.value.position ?? 0) - (b.value.position ?? 0);
 			})
···
 					position: i.value.position ?? 0
 				};
 			})
+			.filter((i) => i.src !== undefined) || []) as {
+			src: string;
+			name: string;
+			width: number;
+			height: number;
+			position: number;
+		}[]
 	);
 
 	let isMobile = getIsMobile();

src/lib/cards/index.ts

···
 import { SpotifyCardDefinition } from './SpotifyCard';
 import { ButtonCardDefinition } from './ButtonCard';
 import { GuestbookCardDefinition } from './GuestbookCard';
+import { FriendsCardDefinition } from './FriendsCard';
 // import { Model3DCardDefinition } from './Model3DCard';
 
 export const AllCardDefinitions = [
···
 	TimerCardDefinition,
 	ClockCardDefinition,
 	CountdownCardDefinition,
-	SpotifyCardDefinition
+	SpotifyCardDefinition,
 	// Model3DCardDefinition
+	FriendsCardDefinition
 ] as const;
 
 export const CardDefinitionsByType = AllCardDefinitions.reduce(

src/lib/website/EditBar.svelte

···
 				</Button>
 			</div>
 		{:else}
-			<!-- Normal add-card controls -->
 			<div class="flex items-center gap-2">
-				<Button
-					size="iconLg"
-					variant="ghost"
-					class="backdrop-blur-none"
-					onclick={() => {
-						newCard('section');
-					}}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						><path d="M6 12h12" /><path d="M6 20V4" /><path d="M18 20V4" /></svg
-					>
-				</Button>
-
-				<Button
-					size="iconLg"
-					variant="ghost"
-					class="backdrop-blur-none"
-					onclick={() => {
-						newCard('text');
-					}}
-				>
-					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
-						><path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="m15 16l2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16m-6.303-2h5.606M2 16l4.039-9.69a.5.5 0 0 1 .923 0L11 16m-7.696-3h6.392"
-						/></svg
-					>
-				</Button>
-
-				<Popover sideOffset={16} bind:open={linkPopoverOpen} class="bg-base-100 dark:bg-base-900">
-					{#snippet child({ props })}
-						<Button
-							size="iconLg"
-							variant="ghost"
-							class="backdrop-blur-none"
-							onclick={() => {
-								newCard('link');
-							}}
-							{...props}
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="-2 -2 28 28"
-								stroke-width="2"
-								stroke="currentColor"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
-								/>
-							</svg>
-						</Button>
-					{/snippet}
-					<Input
-						spellcheck={false}
-						type="url"
-						bind:value={linkValue}
-						onkeydown={(event) => {
-							if (event.code === 'Enter') {
-								addLink(linkValue);
-								event.preventDefault();
-							}
-						}}
-						placeholder="Enter link"
-					/>
-					<Button onclick={() => addLink(linkValue)} size="icon"
-						><svg
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke-width="2"
-							stroke="currentColor"
-							class="size-6"
-						>
-							<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
-						</svg>
-					</Button>
-				</Popover>
-
-				<Button
-					size="iconLg"
-					variant="ghost"
-					class="backdrop-blur-none"
-					onclick={() => {
-						imageInputRef?.click();
-					}}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="2"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
-						/>
-					</svg>
-				</Button>
-
 				<Button size="iconLg" variant="ghost" class="backdrop-blur-none" onclick={showCardCommand}>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"

src/lib/website/EditableWebsite.svelte

···
 <Account {data} />
 
 <Context {data}>
-	{#if !dev}
-		<div
-			class="bg-base-200 dark:bg-base-800 fixed inset-0 z-50 inline-flex h-full w-full items-center justify-center p-4 text-center lg:hidden"
-		>
-			Editing on mobile is not supported yet. Please use a desktop browser.
-		</div>
-	{/if}
-
 	<CardCommand
 		bind:open={showCardCommand}
 		onselect={(cardDef: CardDefinition) => {
···
 		>
 			<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) => {

src/lib/website/layout-mirror.ts

···
 	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[] = [];
···
 	} 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);