···

       
71
       
 
       
			let did = await client.resolveHandle(handle);

     

       
72
       
 
       
			if (!did.ok) throw did.error;

     

       
73
       
 
       


     

       
74
       
-
       
			loggingIn.set({ did: did.value, handle });

     

       
75
       
-
       
			const result = await flow.start(handle);

     

       
76
       
-
       
			if (!result.ok) throw result.error;

     

       
77
       
 
       
		} catch (error) {

     

       
78
       
 
       
			loginError = `login failed: ${error}`;

     

       
79
       
 
       
			loggingIn.set(null);

     

       
80
       
 
       
		} finally {

     

       
81
       
 
       
			isLoggingIn = false;

     

       
82
       
 
       
		}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
83
       
 
       
	};

     

       
84
       
 
       


     

       
85
       
 
       
	const handleKeydown = (event: KeyboardEvent) => {

     
···

       
116
       
 
       
				<div class="p-2">

     

       
117
       
 
       
					{#each accounts as account (account.did)}

     

       
118
       
 
       
						{@const color = generateColorForDid(account.did)}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
119
       
 
       
						<button

     

       
120
       
 
       
							onclick={() => selectAccount(account.did)}

     

       
121
       
 
       
							class="

     
···

       
127
       
 
       
								: 'transparent'};"

     

       
128
       
 
       
						>

     

       
129
       
 
       
							<span>@{account.handle}</span>

     

       
130
       
-
       
							<svg

     

       
131
       
-
       
								xmlns="http://www.w3.org/2000/svg"

     

       
132
       
-
       
								onclick={() => onLogout(account.did)}

     

       
133
       
-
       
								class="ml-auto hidden h-5 w-5 text-(--nucleus-accent) transition-all group-hover:block hover:scale-[1.2] hover:shadow-md"

     

       
134
       
-
       
								width="24"

     

       
135
       
-
       
								height="24"

     

       
136
       
-
       
								viewBox="0 0 20 20"

     

       
137
       
-
       
								><path

     

       
138
       
-
       
									fill="currentColor"

     

       
139
       
-
       
									fill-rule="evenodd"

     

       
140
       
-
       
									d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443q-1.193.115-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022l.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52l.149.023a.75.75 0 0 0 .23-1.482A41 41 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1zM10 4q1.26 0 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325Q8.74 4 10 4M8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06z"

     

       
141
       
-
       
									clip-rule="evenodd"

     

       
142
       
-
       
								/></svg

     

       
143
       
-
       
							>

     

       
144
       
 
       


     

       
145
       
 
       
							{#if account.did === selectedDid}

     

       
146
       
-
       
								<svg

     

       
147
       
-
       
									xmlns="http://www.w3.org/2000/svg"

     

       
148
       
-
       
									class="ml-auto h-5 w-5 text-(--nucleus-accent) group-hover:hidden"

     

       
149
       
-
       
									width="24"

     

       
150
       
-
       
									height="24"

     

       
151
       
-
       
									viewBox="0 0 24 24"

     

       
152
       
-
       
									><path

     

       
153
       
-
       
										fill="currentColor"

     

       
154
       
-
       
										fill-rule="evenodd"

     

       
155
       
-
       
										d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353l8.493-12.74a.75.75 0 0 1 1.04-.207"

     

       
156
       
-
       
										clip-rule="evenodd"

     

       
157
       
-
       
										stroke-width="1.5"

     

       
158
       
-
       
										stroke="currentColor"

     

       
159
       
-
       
									/></svg

     

       
160
       
-
       
								>

     

       
161
       
 
       
							{/if}

     

       
162
       
 
       
						</button>

     

       
163
       
 
       
					{/each}

     
···

       
168
       
 
       
				onclick={openLoginModal}

     

       
169
       
 
       
				class="group flex w-full origin-left items-center gap-3 p-3 text-left text-sm font-semibold text-(--nucleus-accent) transition-all hover:scale-[1.1]"

     

       
170
       
 
       
			>

     

       
171
       
-
       
				<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">

     

       
172
       
-
       
					<path

     

       
173
       
-
       
						stroke-linecap="round"

     

       
174
       
-
       
						stroke-linejoin="round"

     

       
175
       
-
       
						stroke-width="2.5"

     

       
176
       
-
       
						d="M12 4v16m8-8H4"

     

       
177
       
-
       
					/>

     

       
178
       
-
       
				</svg>

     

       
179
       
 
       
				<span>add account</span>

     

       
180
       
 
       
			</button>

     

       
181
       
 
       
		</div>

     

···

       
71
       
 
       
			let did = await client.resolveHandle(handle);

     

       
72
       
 
       
			if (!did.ok) throw did.error;

     

       
73
       
 
       


     

       
74
       
+
       
			await initiateLogin(did.value, handle);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
75
       
 
       
		} catch (error) {

     

       
76
       
 
       
			loginError = `login failed: ${error}`;

     

       
77
       
 
       
			loggingIn.set(null);

     

       
78
       
 
       
		} finally {

     

       
79
       
 
       
			isLoggingIn = false;

     

       
80
       
 
       
		}

     

       
81
       
+
       
	};

     

       
82
       
+
       


     

       
83
       
+
       
	const initiateLogin = async (did: AtprotoDid, handle: Handle | null) => {

     

       
84
       
+
       
		loggingIn.set({ did, handle });

     

       
85
       
+
       
		const result = await flow.start(handle ?? did);

     

       
86
       
+
       
		if (!result.ok) throw result.error;

     

       
87
       
 
       
	};

     

       
88
       
 
       


     

       
89
       
 
       
	const handleKeydown = (event: KeyboardEvent) => {

     
···

       
120
       
 
       
				<div class="p-2">

     

       
121
       
 
       
					{#each accounts as account (account.did)}

     

       
122
       
 
       
						{@const color = generateColorForDid(account.did)}

     

       
123
       
+
       
						{#snippet action(name: string, icon: string, onClick: () => void)}

     

       
124
       
+
       
							<div

     

       
125
       
+
       
								title={name}

     

       
126
       
+
       
								onclick={onClick}

     

       
127
       
+
       
								class="hidden text-(--nucleus-accent) transition-all group-hover:block hover:scale-[1.2] hover:shadow-md"

     

       
128
       
+
       
							>

     

       
129
       
+
       
								<Icon class="h-5 w-5" {icon} />

     

       
130
       
+
       
							</div>

     

       
131
       
+
       
						{/snippet}

     

       
132
       
 
       
						<button

     

       
133
       
 
       
							onclick={() => selectAccount(account.did)}

     

       
134
       
 
       
							class="

     
···

       
140
       
 
       
								: 'transparent'};"

     

       
141
       
 
       
						>

     

       
142
       
 
       
							<span>@{account.handle}</span>

     

       
143
       
+
       


     

       
144
       
+
       
							<div class="grow"></div>

     

       
145
       
+
       


     

       
146
       
+
       
							{@render action('relogin', 'heroicons:arrow-path-rounded-square-solid', () =>

     

       
147
       
+
       
								initiateLogin(account.did, account.handle)

     

       
148
       
+
       
							)}

     

       
149
       
+
       
							{@render action('logout', 'heroicons:trash-solid', () => onLogout(account.did))}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
150
       
 
       


     

       
151
       
 
       
							{#if account.did === selectedDid}

     

       
152
       
+
       
								<Icon

     

       
153
       
+
       
									icon="heroicons:check-16-solid"

     

       
154
       
+
       
									class="h-5 w-5 scale-125 text-(--nucleus-accent) group-hover:hidden"

     

       
155
       
+
       
								/>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
156
       
 
       
							{/if}

     

       
157
       
 
       
						</button>

     

       
158
       
 
       
					{/each}

     
···

       
163
       
 
       
				onclick={openLoginModal}

     

       
164
       
 
       
				class="group flex w-full origin-left items-center gap-3 p-3 text-left text-sm font-semibold text-(--nucleus-accent) transition-all hover:scale-[1.1]"

     

       
165
       
 
       
			>

     

       
166
       
+
       
				<Icon class="h-5 w-5 scale-[130%]" icon="heroicons:plus-16-solid" />

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
167
       
 
       
				<span>add account</span>

     

       
168
       
 
       
			</button>

     

       
169
       
 
       
		</div>