Merge pull request #248 from grishaLR/feat/adds-pronouns

feat: adds ediatble pronoun sets to profile

src/lib/atproto/methods.ts

···
 		}
 	});
 
-	if (!record.ok) throw new Error((record.data as { message?: string })?.message ?? 'Record not found');
+	if (!record.ok)
+		throw new Error((record.data as { message?: string })?.message ?? 'Record not found');
 
 	return JSON.parse(JSON.stringify(record.data));
 }

src/lib/atproto/settings.ts

···
 		'site.standard.document',
 		'xyz.statusphere.status',
 		'community.lexicon.calendar.rsvp',
-		'community.lexicon.calendar.event'
+		'community.lexicon.calendar.event',
+		'app.nearhorizon.actor.pronouns'
 	],
 
 	// what types of authenticated proxied requests you can make to services

src/lib/helper.ts

···
 		console.log('updating or adding publication', data.publication);
 	}
 
+	// check if pronouns edited and save
+	if (data.pronounsRecord?.value?.sets?.length) {
+		const existing = data.pronounsRecord.value;
+		const now = new Date().toISOString();
+		const record: Record<string, unknown> = {
+			$type: 'app.nearhorizon.actor.pronouns',
+			sets: existing.sets,
+			displayMode: existing.displayMode ?? 'all',
+			createdAt: existing.createdAt ?? now
+		};
+		if (existing.createdAt) {
+			record.updatedAt = now;
+		}
+		promises.push(
+			putRecord({
+				collection: 'app.nearhorizon.actor.pronouns',
+				rkey: 'self',
+				record
+			})
+		);
+	}
+
 	await Promise.all(promises);
 }
 

src/lib/types.ts

···
 	page?: string;
 };
 
+export type PronounSet = {
+	forms: string[];
+};
+
+export type PronounsRecord = {
+	value?: {
+		sets?: PronounSet[];
+		displayMode?: string;
+		createdAt?: string;
+		updatedAt?: string;
+	};
+};
+
 export type WebsiteData = {
 	page: string;
 	did: string;
···
 		};
 	};
 	profile: AppBskyActorDefs.ProfileViewDetailed;
+	pronouns?: string;
+	pronounsRecord?: PronounsRecord;
 
 	additionalData: Record<string, unknown>;
 	updatedAt: number;

src/lib/website/EditableProfile.svelte

···
 	import MarkdownTextEditor from '$lib/components/MarkdownTextEditor.svelte';
 	import { Avatar } from '@foxui/core';
 	import MadeWithBlento from './MadeWithBlento.svelte';
+	import Pronouns from './Pronouns.svelte';
 
 	let { data = $bindable(), hideBlento = false }: { data: WebsiteData; hideBlento?: boolean } =
 		$props();
···
 				/>
 			</div>
 		{/if}
+
+		<Pronouns bind:data editing />
 
 		<!-- Editable Description -->
 		<div class="scrollbar -mx-4 grow overflow-x-hidden overflow-y-scroll px-4">

src/lib/website/EditableWebsite.svelte

···
 	// svelte-ignore state_referenced_locally
 	let savedItemsSnapshot = JSON.stringify(data.cards);
 
+	// svelte-ignore state_referenced_locally
+	let savedPronouns = $state(JSON.stringify(data.pronounsRecord));
+
 	let hasUnsavedChanges = $state(false);
 
 	// Detect card content and publication changes (e.g. sidebar edits)
···
 		if (hasUnsavedChanges) return;
 		if (
 			JSON.stringify(items) !== savedItemsSnapshot ||
-			JSON.stringify(data.publication) !== publication
+			JSON.stringify(data.publication) !== publication ||
+			JSON.stringify(data.pronounsRecord) !== savedPronouns
 		) {
 			hasUnsavedChanges = true;
 		}
···
 			await savePage(data, items, publication);
 
 			publication = JSON.stringify(data.publication);
+			savedPronouns = JSON.stringify(data.pronounsRecord);
 
 			savedItemsSnapshot = JSON.stringify(items);
 			hasUnsavedChanges = false;

src/lib/website/Profile.svelte

···
 	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
 	import MadeWithBlento from './MadeWithBlento.svelte';
 	import { Avatar } from '@foxui/core';
+	import Pronouns from './Pronouns.svelte';
 
 	let {
 		data,
···
 		<div class="text-4xl font-bold wrap-anywhere">
 			{getName(data)}
 		</div>
+
+		{#if data.pronounsRecord?.value?.sets?.length}
+			<Pronouns {data} />
+		{/if}
 
 		<div class="scrollbar -mx-4 grow overflow-x-hidden overflow-y-scroll px-4">
 			<div

src/lib/website/Pronouns.svelte

···
+<script lang="ts">
+	import type { WebsiteData, PronounSet } from '$lib/types';
+	import { Badge, Button, Input, Switch, Label } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
+
+	let {
+		data = $bindable(),
+		editing = false
+	}: {
+		data: WebsiteData;
+		editing?: boolean;
+	} = $props();
+
+	let modalOpen = $state(false);
+	let editSets: PronounSet[] = $state([]);
+	let editDisplayMode: 'all' | 'firstOnly' = $state('all');
+
+	function openModal() {
+		if (data.pronounsRecord?.value?.sets?.length) {
+			editSets = JSON.parse(JSON.stringify(data.pronounsRecord.value.sets));
+			editDisplayMode = data.pronounsRecord.value.displayMode === 'firstOnly' ? 'firstOnly' : 'all';
+		} else {
+			editSets = [{ forms: [''] }];
+			editDisplayMode = 'all';
+		}
+		modalOpen = true;
+	}
+
+	function save() {
+		const validSets = editSets.filter((set) => set.forms.some((form) => form.length > 0));
+		if (validSets.length > 0) {
+			data.pronounsRecord = {
+				value: {
+					sets: validSets,
+					displayMode: editDisplayMode
+				}
+			};
+		} else {
+			data.pronounsRecord = undefined;
+		}
+		data = { ...data };
+		modalOpen = false;
+	}
+
+	function addSet() {
+		editSets = [...editSets, { forms: [''] }];
+	}
+
+	function removeSet(index: number) {
+		editSets = editSets.filter((_, i) => i !== index);
+	}
+
+	function updateSetInput(index: number, value: string) {
+		editSets[index] = { forms: value.split('/').map((s) => s.trim()) };
+	}
+
+	let allSets = $derived(data.pronounsRecord?.value?.sets ?? []);
+	let sets = $derived(
+		data.pronounsRecord?.value?.displayMode === 'firstOnly' ? allSets.slice(0, 1) : allSets
+	);
+</script>
+
+{#if sets.length}
+	<div class="flex flex-wrap gap-1">
+		{#each sets as set, i (i)}
+			<Badge>{set.forms.join('/')}</Badge>
+		{/each}
+	</div>
+{/if}
+
+{#if editing}
+	<Button size="sm" onclick={openModal}>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke-width="1.5"
+			stroke="currentColor"
+			class="size-3"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
+			/>
+		</svg>
+		{sets.length ? 'edit' : 'add'} pronouns
+	</Button>
+
+	<Modal open={modalOpen} onOpenChange={(v) => (modalOpen = v)} closeButton>
+		<div class="flex flex-col gap-4">
+			<h3 class="text-base-900 dark:text-base-100 text-lg font-semibold">Edit pronouns</h3>
+
+			<div class="flex flex-col gap-2">
+				{#each editSets as set, i (i)}
+					<div class="flex items-center gap-2">
+						<Input
+							value={set.forms.join('/')}
+							oninput={(e) => updateSetInput(i, e.currentTarget.value)}
+							placeholder="e.g. she/her"
+							variant="secondary"
+							sizeVariant="sm"
+							class="grow"
+						/>
+						{#if editSets.length > 1}
+							<Button size="iconSm" variant="ghost" onclick={() => removeSet(i)}>&times;</Button>
+						{/if}
+					</div>
+				{/each}
+			</div>
+
+			{#if editSets.length < 10}
+				<Button
+					size="sm"
+					variant="secondary"
+					onclick={addSet}
+					disabled={!editSets.at(-1)?.forms.some((f) => f.length > 0)}
+					class="w-fit"
+				>
+					+ add more pronouns
+				</Button>
+			{/if}
+
+			{#if editSets.length > 1}
+				<div class="flex items-center gap-1.5">
+					<Switch
+						id="pronouns-display-mode"
+						checked={editDisplayMode === 'firstOnly'}
+						onCheckedChange={(checked) => {
+							editDisplayMode = checked ? 'firstOnly' : 'all';
+						}}
+					/>
+					<Label for="pronouns-display-mode">show first only</Label>
+				</div>
+			{/if}
+
+			<div class="flex justify-end gap-2">
+				<Button variant="secondary" onclick={() => (modalOpen = false)}>Cancel</Button>
+				<Button onclick={save}>Save</Button>
+			</div>
+		</div>
+	</Modal>
+{/if}

src/lib/website/load.ts

···
 import { CardDefinitionsByType } from '$lib/cards';
 import type { CacheService } from '$lib/cache';
 import { createEmptyCard } from '$lib/helper';
-import type { Item, WebsiteData } from '$lib/types';
+import type { Item, PronounsRecord, WebsiteData } from '$lib/types';
 import { error } from '@sveltejs/kit';
 import type { ActorIdentifier, Did } from '@atcute/lexicons';
 
···
 import { fixAllCollisions, compactItems } from '$lib/layout';
 
 const CURRENT_CACHE_VERSION = 1;
+
+function formatPronouns(
+	record: PronounsRecord | undefined,
+	profile: WebsiteData['profile'] | undefined
+): string | undefined {
+	// nearhorizon.actor.pronouns - https://github.com/skydeval/atproto-pronouns
+	if (record?.value?.sets?.length) {
+		const sets = record.value.sets;
+		const displayMode = record.value.displayMode ?? 'all';
+		const setsToShow = displayMode === 'firstOnly' ? sets.slice(0, 1) : sets;
+		return setsToShow.map((s) => s.forms.join('/')).join(' · ');
+	}
+	// fallback to bsky pronouns
+	const pronouns = (profile as Record<string, unknown>)?.pronouns;
+	if (pronouns && typeof pronouns === 'string') return pronouns;
+	return undefined;
+}
 
 export async function getCache(identifier: ActorIdentifier, page: string, cache?: CacheService) {
 	try {
···
 		throw error(404);
 	}
 
-	const [cards, mainPublication, pages, profile] = await Promise.all([
+	const [cards, mainPublication, pages, profile, pronounsRecord] = await Promise.all([
 		listRecords({ did, collection: 'app.blento.card', limit: 0 }).catch((e) => {
 			console.error('error getting records for collection app.blento.card', e);
 			return [] as Awaited<ReturnType<typeof listRecords>>;
···
 			console.error('error getting records for collection app.blento.page');
 			return [] as Awaited<ReturnType<typeof listRecords>>;
 		}),
-		getDetailedProfile({ did })
+		getDetailedProfile({ did }),
+		getRecord({
+			did,
+			collection: 'app.nearhorizon.actor.pronouns',
+			rkey: 'self'
+		}).catch(() => undefined)
 	]);
 
 	const additionalData = await loadAdditionalData(
···
 		publications: [mainPublication, ...pages].filter((v) => v),
 		additionalData,
 		profile,
+		pronouns: formatPronouns(pronounsRecord, profile),
+		pronounsRecord: pronounsRecord as PronounsRecord | undefined,
 		updatedAt: Date.now(),
 		version: CURRENT_CACHE_VERSION
 	};
···
 		throw error(404);
 	}
 
-	const [cardRecord, profile] = await Promise.all([
+	const [cardRecord, profile, pronounsRecord] = await Promise.all([
 		getRecord({
 			did,
 			collection: 'app.blento.card',
 			rkey
 		}).catch(() => undefined),
-		getDetailedProfile({ did })
+		getDetailedProfile({ did }),
+		getRecord({
+			did,
+			collection: 'app.nearhorizon.actor.pronouns',
+			rkey: 'self'
+		}).catch(() => undefined)
 	]);
 
 	if (!cardRecord?.value) {
···
 			} as WebsiteData['publication']),
 		additionalData,
 		profile,
+		pronouns: formatPronouns(pronounsRecord, profile),
+		pronounsRecord: pronounsRecord as PronounsRecord | undefined,
 		updatedAt: Date.now(),
 		version: CURRENT_CACHE_VERSION
 	};
···
 		throw error(404);
 	}
 
-	const [publication, profile] = await Promise.all([
+	const [publication, profile, pronounsRecord] = await Promise.all([
 		getRecord({
 			did,
 			collection: 'site.standard.publication',
 			rkey: 'blento.self'
 		}).catch(() => undefined),
-		getDetailedProfile({ did })
+		getDetailedProfile({ did }),
+		getRecord({
+			did,
+			collection: 'app.nearhorizon.actor.pronouns',
+			rkey: 'self'
+		}).catch(() => undefined)
 	]);
 
 	const card = createEmptyCard('blento.self');
···
 			} as WebsiteData['publication']),
 		additionalData,
 		profile,
+		pronouns: formatPronouns(pronounsRecord, profile),
+		pronounsRecord: pronounsRecord as PronounsRecord | undefined,
 		updatedAt: Date.now(),
 		version: CURRENT_CACHE_VERSION
 	};