Merge pull request #208 from flo-bit/germ

Germ

src/lib/cards/index.ts

···
 import { PlyrFMCardDefinition, PlyrFMCollectionCardDefinition } from './media/PlyrFMCard';
 import { MarginCardDefinition } from './social/MarginCard';
 import { SembleCollectionCardDefinition } from './social/SembleCollectionCard';
+import { GermDMCardDefinition } from './social/GermDMCard';
 // import { Model3DCardDefinition } from './visual/Model3DCard';
 
 export const AllCardDefinitions = [
···
 	PlyrFMCardDefinition,
 	PlyrFMCollectionCardDefinition,
 	MarginCardDefinition,
-	SembleCollectionCardDefinition
+	SembleCollectionCardDefinition,
+	GermDMCardDefinition
 ] as const;
 
 export const CardDefinitionsByType = AllCardDefinitions.reduce(

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

···
 	},
 	minW: 4,
 	canHaveLabel: true,
+	canAdd: ({ collections }) => collections.includes('fm.teal.alpha.feed.play'),
 
 	keywords: ['music', 'scrobble', 'listening', 'songs'],
 	name: 'Teal.fm Plays',

src/lib/cards/social/GermDMCard/GermDMCard.svelte

···
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
+	import type { ContentComponentProps } from '../../types';
+	import { CardDefinitionsByType } from '../..';
+	import { user } from '$lib/atproto/auth.svelte';
+	import { platformsData } from '../BigSocialCard';
+
+	let { item = $bindable(), isEditing }: ContentComponentProps = $props();
+
+	const data = getAdditionalUserData();
+
+	let germData = $state(
+		data[item.cardType] as { messageMeUrl: string; showButtonTo: string } | null | undefined
+	);
+
+	let did = getDidContext();
+	let handle = getHandleContext();
+	let isLoaded = $state(false);
+
+	onMount(async () => {
+		if (!germData) {
+			germData = (await CardDefinitionsByType[item.cardType]?.loadData?.([], {
+				did,
+				handle
+			})) as { messageMeUrl: string; showButtonTo: string } | null | undefined;
+
+			data[item.cardType] = germData;
+			isLoaded = true;
+		}
+	});
+
+	const brandColor = `#${platformsData.germ.hex}`;
+
+	const dmUrl = $derived.by(() => {
+		if (!germData?.messageMeUrl) return undefined;
+		const viewerDid = user.did;
+		const fragment = viewerDid ? `${did}+${viewerDid}` : `${did}`;
+		return `${germData.messageMeUrl}/web#${fragment}`;
+	});
+</script>
+
+{#if germData && dmUrl}
+	<div
+		class="flex h-full w-full items-center justify-center p-10"
+		style="background-color: {brandColor}"
+	>
+		<div
+			class="flex aspect-square max-h-full max-w-full items-center justify-center [&_svg]:size-full [&_svg]:max-w-60 [&_svg]:fill-white"
+		>
+			{@html platformsData.germ.svg}
+		</div>
+	</div>
+
+	{#if !isEditing}
+		<a href={dmUrl} target="_blank" rel="noopener noreferrer">
+			<div class="absolute inset-0 z-50"></div>
+			<span class="sr-only">Message me on Germ</span>
+		</a>
+	{/if}
+{:else if isLoaded}
+	<div
+		class="text-base-500 dark:text-base-400 accent:text-white/70 flex h-full w-full items-center justify-center p-4 text-center text-sm"
+	>
+		Germ DM not available
+	</div>
+{:else}
+	<div
+		class="text-base-500 dark:text-base-400 accent:text-white/70 flex h-full w-full items-center justify-center p-4 text-center text-sm"
+	>
+		Loading...
+	</div>
+{/if}

src/lib/cards/social/GermDMCard/index.ts

···
+import { getRecord } from '$lib/atproto';
+import type { CardDefinition } from '../../types';
+import { platformsData } from '../BigSocialCard';
+import GermDMCard from './GermDMCard.svelte';
+
+const germ = platformsData.germ;
+
+export const GermDMCardDefinition = {
+	type: 'germDM',
+	contentComponent: GermDMCard,
+	createNew: (card) => {
+		card.w = 2;
+		card.h = 2;
+		card.mobileW = 4;
+		card.mobileH = 4;
+		card.cardData.label = 'Message me';
+	},
+	loadData: async (_items, { did }) => {
+		try {
+			const record = await getRecord({
+				did,
+				collection: 'com.germnetwork.declaration',
+				rkey: 'self'
+			});
+			const value = record?.value;
+			if (!value?.messageMe) return null;
+			return {
+				messageMeUrl: value.messageMe.messageMeUrl,
+				showButtonTo: value.messageMe.showButtonTo
+			};
+		} catch {
+			return null;
+		}
+	},
+	canAdd: ({ collections }) => collections.includes('com.germnetwork.declaration'),
+	defaultColor: 'transparent',
+	allowSetColor: false,
+	canHaveLabel: true,
+	name: 'DM on Germ',
+	keywords: ['germ', 'dm', 'message', 'chat', 'encrypted'],
+	groups: ['Social'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12.75 3.03v.568c0 .334.148.65.405.864l1.068.89c.442.369.535 1.01.216 1.49l-.51.766a2.25 2.25 0 0 1-1.161.886l-.143.048a1.107 1.107 0 0 0-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 0 1-1.652.928l-.679-.906a1.125 1.125 0 0 0-1.906.172L4.5 15.75l-.612.153M12.75 3.031a9 9 0 0 0-8.862 12.872M12.75 3.031a9 9 0 0 1 6.69 14.036m0 0-.177-.529A2.25 2.25 0 0 0 17.128 15H16.5l-.324-.324a1.453 1.453 0 0 0-2.328.377l-.036.073a1.586 1.586 0 0 1-.982.816l-.99.282c-.55.157-.894.702-.8 1.267l.073.438c.08.474.49.821.97.821.846 0 1.598.542 1.865 1.345l.215.643m5.276-3.67a9.012 9.012 0 0 1-5.276 3.67m0 0a9 9 0 0 1-10.275-4.835M15.75 9c0 .896-.393 1.7-1.016 2.25" />
+</svg>`
+} as CardDefinition & { type: 'germDM' };

src/lib/cards/types.ts

···
 
 	canResize?: boolean;
 
+	canAdd?: (context: { collections: string[] }) => boolean;
+
 	onUrlHandler?: (url: string, item: Item) => Item | null;
 	urlHandlerPriority?: number;
 

src/lib/components/card-command/CardCommand.svelte

···
 	import type { CardDefinition } from '$lib/cards/types';
 	import { Command, Dialog } from 'bits-ui';
 	import { isTyping } from '$lib/helper';
-
-	const CardDefGroups = [
-		'Core',
-		...Array.from(
-			new Set(
-				AllCardDefinitions.map((cardDef) => cardDef.groups)
-					.flat()
-					.filter((g) => g)
-			)
-		)
-			.sort()
-			.filter((g) => g !== 'Core')
-	];
+	import { describeRepo, user } from '$lib/atproto';
 
 	let {
 		open = $bindable(false),
···
 		onlink?: (url: string, cardDef: CardDefinition) => void;
 	} = $props();
 
+	let collections = $state<string[]>([]);
+	let fetchedForDid = $state<string | undefined>(undefined);
+
+	$effect(() => {
+		if (open && user.did && fetchedForDid !== user.did) {
+			const did = user.did;
+			describeRepo({ did }).then((result) => {
+				if (result?.collections) {
+					collections = result.collections;
+				}
+				fetchedForDid = did;
+			});
+		}
+	});
+
+	let filteredCardDefs = $derived(
+		AllCardDefinitions.filter((d) => !d.canAdd || d.canAdd({ collections }))
+	);
+
+	let cardDefGroups = $derived([
+		'Core',
+		...Array.from(
+			new Set(
+				filteredCardDefs
+					.map((cardDef) => cardDef.groups)
+					.flat()
+					.filter((g) => g)
+			)
+		)
+			.sort()
+			.filter((g) => g !== 'Core')
+	]);
+
 	let searchValue = $state('');
 
 	let normalizedUrl = $derived.by(() => {
···
 
 	let urlMatchingCards = $derived.by(() => {
 		if (!normalizedUrl) return [];
-		return AllCardDefinitions.filter((d) => d.onUrlHandler)
+		return filteredCardDefs
+			.filter((d) => d.onUrlHandler)
 			.filter((d) => {
 				try {
 					const testItem = { cardData: {} };
···
 							<Command.Separator class="bg-base-900/5 dark:bg-base-50/5 my-1 h-px w-full" />
 						{/if}
 
-						{#each CardDefGroups as group, index (group)}
-							{#if group && AllCardDefinitions.some((cardDef) => cardDef.groups?.includes(group))}
+						{#each cardDefGroups as group, index (group)}
+							{#if group && filteredCardDefs.some((cardDef) => cardDef.groups?.includes(group))}
 								<Command.Group>
 									<Command.GroupHeading
 										class="text-base-600 dark:text-base-400 px-3 pt-4 pb-2 text-xs"
···
 										{group}
 									</Command.GroupHeading>
 									<Command.GroupItems>
-										{#each AllCardDefinitions.filter( (cardDef) => cardDef.groups?.includes(group) ) as cardDef (cardDef.type)}
+										{#each filteredCardDefs.filter( (cardDef) => cardDef.groups?.includes(group) ) as cardDef (cardDef.type)}
 											<Command.Item
 												onSelect={() => {
 													open = false;
···
 										{/each}
 									</Command.GroupItems>
 								</Command.Group>
-								{#if index < CardDefGroups.length - 1}
+								{#if index < cardDefGroups.length - 1}
 									<Command.Separator class="bg-base-900/5 dark:bg-base-50/5 my-1 h-px w-full" />
 								{/if}
 							{/if}

src/lib/website/Context.svelte

···
 	setAdditionalUserData(data.additionalData);
 
 	setCanEdit(
-		() => (dev && isEditing === true) || (user.isLoggedIn && user.profile?.did === data.did && isEditing === true)
+		() =>
+			(dev && isEditing === true) ||
+			(user.isLoggedIn && user.profile?.did === data.did && isEditing === true)
 	);
 
 	// svelte-ignore state_referenced_locally

src/routes/(auth)/oauth/callback/+page.svelte

···
 		if (user.profile) {
 			if (hasRedirected) return;
 
-			const redirect = localStorage.getItem('login-redirect');
+			let redirect = localStorage.getItem('login-redirect');
 			localStorage.removeItem('login-redirect');
-			console.log('redirect', redirect);
-			goto(redirect || '/' + getHandleOrDid(user.profile) + '/edit', {});
+
+			const editPath = '/' + getHandleOrDid(user.profile) + '/edit';
+			if (!redirect || redirect === '/' || redirect === 'https://blento.app' || redirect === 'https://blento.app/') {
+				redirect = editPath;
+			}
+
+			goto(redirect, {});
 
 			hasRedirected = true;
 		}