feat: choose identity from the identity list (#39)

src/lib/components/avatar.svelte

@@ -6,7 +6,8 @@
 	export let src: string = defaultAvatar
 </script>
 
-<img class={`root ${cls}`} {src} alt="Avatar" />
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<img class={`root ${cls}`} {src} alt="Avatar" on:click />
 
 <style>
 	.root {
@@ -16,5 +17,6 @@
 		background-color: var(--color-light-grey-background);
 		object-fit: cover;
 		overflow: hidden;
+		cursor: pointer;
 	}
 </style>

src/lib/components/button.svelte

@@ -5,11 +5,10 @@
 	export { cls as class }
 	export let variant: 'secondary' | 'primary' = 'secondary'
 	export let icon: ComponentConstructor<IconProps> | undefined = undefined
-	export let click: svelte.JSX.MouseEventHandler<HTMLButtonElement> | null | undefined = undefined
 	export let label: string | undefined = undefined
 </script>
 
-<button class={`root ${variant} ${!label ? 'icon-only' : ''} ${cls}`} on:click={click}>
+<button class={`root ${variant} ${!label ? 'icon-only' : ''} ${cls}`} on:click>
 	{#if icon !== undefined}
 		<div class="wrapper">
 			<svelte:component this={icon} />

src/lib/components/header.svelte

@@ -18,7 +18,7 @@
 		{#if user !== undefined}
 			<Avatar src={user.avatar} on:click={() => goto('/profile')} />
 		{:else}
-			<Button icon={UserIcon} click={() => goto('/profile')} />
+			<Button icon={UserIcon} on:click={() => goto('/profile')} />
 		{/if}
 	</div>
 	<div class="subheader">

src/lib/components/identity.svelte

@@ -4,9 +4,11 @@
 	import ArrowRight from './icons/arrow-right.svelte'
 
 	export let identity: User
+	export let click: undefined | ((id: User) => void) = undefined
 </script>
 
-<div class="root">
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="root" on:click|preventDefault|stopPropagation={() => click && click(identity)}>
 	<Avatar src={identity.avatar} />
 	<div class="description">
 		<div>{identity.name}</div>

src/lib/components/wallet-connect.svelte

@@ -12,7 +12,7 @@
 		icon={WalletIcon}
 		variant="primary"
 		label="Connect wallet to post"
-		click={() => goto('/profile')}
+		on:click={() => goto('/profile')}
 	/>
 	<div class="explanation">Connect a wallet to access or create your account.</div>
 </div>

src/lib/temp/index.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Post } from '$lib/stores/post'
 	import { users, type User } from '$lib/stores/user'
+	import { profile } from '$lib/stores/profile'
 	import { posts } from '$lib/stores/post'
 	import Button from '$lib/components/button.svelte'
 	import image1 from '$lib/temp/assets/1.png'
@@ -120,12 +121,24 @@
 		testPosts.forEach((p) => uniqueUsers.set(p.user.address, p.user))
 		console.log(Array.from(uniqueUsers.values()))
 		users.set(Array.from(uniqueUsers.values()))
+		profile.set({
+			profiles: [
+				{
+					name: 'CoyoteRide',
+					avatar: image1,
+					address: "We should forgive each other for stupid things we've said in the past.",
+				},
+				{
+					address: '0x33FEd84c219139A464Cc2aF5643584ab51176DaB',
+				},
+			],
+		})
 	}
 </script>
 
 <div class="root">
 	<span>There are no posts yet</span>
-	<Button click={populateWithData} label="populate with testdata" />
+	<Button on:click={populateWithData} label="populate with testdata" />
 </div>
 
 <style>

src/routes/profile/+page.svelte

@@ -5,16 +5,22 @@
 	import GroupSecurity from '$lib/components/icons/group-security.svelte'
 	import Identity from '$lib/components/identity.svelte'
 	import { profile } from '$lib/stores/profile'
+	import type { User } from '$lib/stores/user'
+
+	const onSelectIdentityClick = (id: User) => {
+		$profile.active = id
+		history.back()
+	}
 </script>
 
 <div class="header">
 	<h1>Choose identity</h1>
-	<Button icon={Close} click={() => history.back()} />
+	<Button icon={Close} on:click={() => history.back()} />
 </div>
 <div class="content">
 	{#if $profile.profiles.length > 0}
 		{#each $profile.profiles as p}
-			<Identity identity={p} />
+			<Identity identity={p} click={onSelectIdentityClick} />
 		{/each}
 		<Button icon={GroupSecurity} label="Create new identity" />
 		<span>You can create multiple identities under the same account.</span>