wip

package.json

@@ -38,7 +38,7 @@
 		"vitest": "^2.1.8"
 	},
 	"dependencies": {
-		"@blah-im/core": "^0.3.0",
+		"@blah-im/core": "^0.3.1",
 		"@melt-ui/svelte": "^0.86.2",
 		"@zeabur/svelte-adapter": "^1.0.0",
 		"bits-ui": "^0.21.16",

pnpm-lock.yaml

@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@blah-im/core':
-        specifier: ^0.3.0
-        version: 0.3.0
+        specifier: ^0.3.1
+        version: 0.3.1
       '@melt-ui/svelte':
         specifier: ^0.86.2
         version: 0.86.2(svelte@4.2.19)
@@ -122,8 +122,8 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
-  '@blah-im/core@0.3.0':
-    resolution: {integrity: sha512-OBqWbQ7nJjM7IwYkfoCVp9tw3bTRWmPMxdW2qsgu5btR0bzdpQxAf2HJRuNfWCpv+vW1c5qFLbd+NFXa5fJ5HA==}
+  '@blah-im/core@0.3.1':
+    resolution: {integrity: sha512-ApMIrUpFzWkMT5pcGJ9WCAQJyywEQ8Zxaq8gby3QHwkKKjMc3UJ3xoKjNKfzUCfk4M8Bw7nYZNenHqrWOWyswA==}
 
   '@esbuild/aix-ppc64@0.19.12':
     resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
@@ -2149,7 +2149,7 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@blah-im/core@0.3.0':
+  '@blah-im/core@0.3.1':
     dependencies:
       zod: 3.23.8
 

src/lib/components/Link.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { tw } from '$lib/tw';
+
+	export let href: string;
+	export let variant: 'primary' | 'secondary' = 'primary';
+</script>
+
+<a
+	{href}
+	class={tw(
+		'underline',
+		variant === 'primary'
+			? 'text-accent-600 dark:text-accent-500'
+			: 'text-accent-400 dark:text-accent-500'
+	)}><slot /></a
+>

src/routes/(app)/settings/account/new/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import { currentAccountStore, openAccountStore } from '$lib/accounts/accountStore';
 	import Button from '$lib/components/Button.svelte';
@@ -12,6 +13,7 @@
 	import PageHeader from '$lib/components/PageHeader.svelte';
 	import ProfilePicture from '$lib/components/ProfilePicture.svelte';
 	import RichTextInput from '$lib/components/RichTextInput.svelte';
+	import Link from '$lib/components/Link.svelte';
 	import type { BlahProfile } from '@blah-im/core/identity';
 	import { onMount } from 'svelte';
 	import type { Delta, Editor } from 'typewriter-editor';
@@ -22,6 +24,7 @@
 	let plainText: string = '';
 	let password: string = '';
 	let repeatPassword: string = '';
+	let identityServer: string = 'other.blue';
 
 	let isBusy: boolean = false;
 
@@ -37,6 +40,7 @@
 
 	$: passwordMatch = password === repeatPassword;
 	$: canCreate = name.length > 0 && password.length > 0 && passwordMatch;
+	$: customize = $page.url.hash === '#customize';
 
 	onMount(() => {
 		const bioPlaceholderRotateRef = setInterval(() => {
@@ -127,4 +131,31 @@
 			{/if}
 		</div>
 	</GroupedListSection>
+	{#if customize}
+		<GroupedListSection>
+			<h4 slot="header">Identity Service</h4>
+			<GroupedListInputItem>
+				Initial Service
+				<input type="text" bind:value={identityServer} />
+			</GroupedListInputItem>
+			<div slot="footer" class="space-y-1">
+				<p>
+					Your profile is stored and served to other users on the identity service.
+					<Link href="/" variant="secondary">Learn more about identity services...</Link>
+				</p>
+				<p>You can add, replace or remove identity services later in account settings.</p>
+			</div>
+		</GroupedListSection>
+	{/if}
+	<div class="px-8 text-sm text-sf-tertiary">
+		<p>
+			By creating an account, you agree to Terms of Service and Privacy Policy of
+			<em>{identityServer}</em>, which stores and serve your public profile to other users.
+			{#if customize}
+				<Link href="#">Use default</Link>
+			{:else}
+				<Link href="#customize">Customize...</Link>
+			{/if}
+		</p>
+	</div>
 </GroupedListContainer>