From 24db54d65d091c9dbdf695f1d718f2825195813c Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Fri, 13 Mar 2026 10:08:44 +0000
Subject: [PATCH] some styling updates, move editing into modal

---
 src/lib/atproto/methods.ts | 3 ++-
 src/lib/website/EditableProfile.svelte | 141 ++++-----------------------------------------------------------------------------------------------------------------------------------------
 src/lib/website/Profile.svelte | 7 +++----
 src/lib/website/Pronouns.svelte | 143 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 4 file(s) changed, 152 insertion(s)(+), 142 deletion(s)(-)

diff --git a/src/lib/atproto/methods.ts b/src/lib/atproto/methods.ts
--- a/src/lib/atproto/methods.ts
+++ b/src/lib/atproto/methods.ts
@@ -247,7 +247,8 @@
 		}
 	});
 
-	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));
 }
diff --git a/src/lib/website/EditableProfile.svelte b/src/lib/website/EditableProfile.svelte
--- a/src/lib/website/EditableProfile.svelte
+++ b/src/lib/website/EditableProfile.svelte
@@ -1,32 +1,17 @@
 <script lang="ts">
-	import type { WebsiteData, PronounSet } from '$lib/types';
+	import type { WebsiteData } from '$lib/types';
 	import { getImage, compressImage, getProfilePosition } from '$lib/helper';
 	import PlainTextEditor from '$lib/components/PlainTextEditor.svelte';
 	import MarkdownTextEditor from '$lib/components/MarkdownTextEditor.svelte';
-	import { Avatar, Switch, Label } from '@foxui/core';
+	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();
 
 	let fileInput: HTMLInputElement;
-	let setsContainer: HTMLDivElement;
 	let isHoveringAvatar = $state(false);
-	let editingPronouns = $state(false);
-	let pronounSets: PronounSet[] = $state(getInitialPronounSets());
-	let displayMode: 'all' | 'firstOnly' = $state(
-		data.pronounsRecord?.value?.displayMode === 'firstOnly' ? 'firstOnly' : 'all'
-	);
-
-	function getInitialPronounSets(): PronounSet[] {
-		if (data.pronounsRecord?.value?.sets?.length) {
-			return structuredClone(data.pronounsRecord.value.sets);
-		}
-		if (data.pronouns) {
-			return [{ forms: data.pronouns.split('/').map((s) => s.trim()) }];
-		}
-		return [{ forms: [''] }];
-	}
 
 	async function handleAvatarChange(event: Event) {
 		const target = event.target as HTMLInputElement;
@@ -61,41 +46,6 @@
 	let profilePosition = $derived(getProfilePosition(data));
 
 	function onTextUpdate() {
-		data = { ...data };
-	}
-
-	function addSet() {
-		pronounSets = [...pronounSets, { forms: [''] }];
-		requestAnimationFrame(() => {
-			setsContainer?.scrollTo({ top: setsContainer.scrollHeight, behavior: 'smooth' });
-		});
-	}
-
-	function removeSet(index: number) {
-		pronounSets = pronounSets.filter((_, i) => i !== index);
-		updatePronouns();
-	}
-
-	function updateSetInput(index: number, value: string) {
-		pronounSets[index] = { forms: value.split('/').map((s) => s.trim()) };
-		updatePronouns();
-	}
-
-	function updatePronouns() {
-		const validSets = pronounSets.filter((set) => set.forms.some((form) => form.length > 0));
-		if (validSets.length > 0) {
-			const setsToShow = displayMode === 'firstOnly' ? validSets.slice(0, 1) : validSets;
-			data.pronouns = setsToShow.map((set) => set.forms.join('/')).join(' · ');
-			data.pronounsRecord = {
-				value: {
-					sets: validSets,
-					displayMode
-				}
-			};
-		} else {
-			data.pronouns = undefined;
-			data.pronounsRecord = undefined;
-		}
 		data = { ...data };
 	}
 </script>
@@ -185,90 +135,7 @@
 			</div>
 		{/if}
 
-		{#if editingPronouns}
-			<div class="-mt-2 flex flex-col gap-2">
-				<div bind:this={setsContainer} class="flex max-h-48 flex-col gap-2 overflow-y-auto">
-					{#each pronounSets as set, i (i)}
-						<div
-							class={[
-								'flex items-center gap-1',
-								displayMode === 'firstOnly' && i > 0 && 'opacity-40'
-							]}
-						>
-							<input
-								type="text"
-								value={set.forms.join('/')}
-								oninput={(e) => updateSetInput(i, e.currentTarget.value)}
-								placeholder="e.g. she/her"
-								class="bg-base-100 dark:bg-base-800 text-base-600 dark:text-base-300 w-full rounded px-2 py-1 text-sm outline-none"
-							/>
-							{#if pronounSets.length > 1}
-								<button
-									type="button"
-									class="text-base-400 hover:text-red-500 cursor-pointer text-sm transition-colors"
-									onclick={() => removeSet(i)}
-								>
-									&times;
-								</button>
-							{/if}
-						</div>
-					{/each}
-				</div>
-				{#if pronounSets.length > 1}
-					<div class="flex items-center gap-1.5">
-						<Switch
-							checked={displayMode === 'firstOnly'}
-							onCheckedChange={(checked) => {
-								displayMode = checked ? 'firstOnly' : 'all';
-								updatePronouns();
-							}}
-							class="scale-75"
-						/>
-						<Label class="text-base-500 text-xs">show first only</Label>
-					</div>
-				{/if}
-				<div class="flex gap-2">
-					{#if pronounSets.length < 10}
-						<button
-							type="button"
-							class="text-base-500 hover:text-base-300 cursor-pointer text-xs"
-							onclick={addSet}
-						>
-							+ add set
-						</button>
-					{/if}
-					<button
-						type="button"
-						class="text-base-500 hover:text-base-300 cursor-pointer text-xs"
-						onclick={() => (editingPronouns = false)}
-					>
-						preview
-					</button>
-				</div>
-			</div>
-		{:else}
-			<button
-				type="button"
-				class="border-base-500/30 hover:border-base-400 text-base-500 dark:text-base-400 hover:text-base-300 -mt-2 flex cursor-pointer items-center gap-1 rounded border border-dashed px-2 py-0.5 text-left text-sm transition-colors"
-				onclick={() => (editingPronouns = true)}
-			>
-				<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>
-				{data.pronouns || 'add pronouns'}
-			</button>
-		{/if}
+		<Pronouns bind:data editing />
 
 		<!-- Editable Description -->
 		<div class="scrollbar -mx-4 grow overflow-x-hidden overflow-y-scroll px-4">
diff --git a/src/lib/website/Profile.svelte b/src/lib/website/Profile.svelte
--- a/src/lib/website/Profile.svelte
+++ b/src/lib/website/Profile.svelte
@@ -7,6 +7,7 @@
 	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,
@@ -61,10 +62,8 @@
 			{getName(data)}
 		</div>
 
-		{#if data.pronouns}
-			<div class="text-base-500 dark:text-base-400 -mt-2 text-sm">
-				{data.pronouns}
-			</div>
+		{#if data.pronounsRecord?.value?.sets?.length}
+			<Pronouns {data} />
 		{/if}
 
 		<div class="scrollbar -mx-4 grow overflow-x-hidden overflow-y-scroll px-4">
diff --git a/src/lib/website/Pronouns.svelte b/src/lib/website/Pronouns.svelte
new file mode 100644
--- /dev/null
+++ b/src/lib/website/Pronouns.svelte
@@ -0,0 +1,143 @@
+<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}

--
tangled.sh