appview-less bluesky client
feat: add relogin button
+28
-40
+28
-40
src/components/AccountSelector.svelte
+28
-40
src/components/AccountSelector.svelte
···
71
71
let did = await client.resolveHandle(handle);
72
72
if (!did.ok) throw did.error;
73
73
74
-
loggingIn.set({ did: did.value, handle });
75
-
const result = await flow.start(handle);
76
-
if (!result.ok) throw result.error;
74
+
await initiateLogin(did.value, handle);
77
75
} catch (error) {
78
76
loginError = `login failed: ${error}`;
79
77
loggingIn.set(null);
80
78
} finally {
81
79
isLoggingIn = false;
82
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;
83
87
};
84
88
85
89
const handleKeydown = (event: KeyboardEvent) => {
···
116
120
<div class="p-2">
117
121
{#each accounts as account (account.did)}
118
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}
119
132
<button
120
133
onclick={() => selectAccount(account.did)}
121
134
class="
···
127
140
: 'transparent'};"
128
141
>
129
142
<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
-
>
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))}
144
150
145
151
{#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
-
>
152
+
<Icon
153
+
icon="heroicons:check-16-solid"
154
+
class="h-5 w-5 scale-125 text-(--nucleus-accent) group-hover:hidden"
155
+
/>
161
156
{/if}
162
157
</button>
163
158
{/each}
···
168
163
onclick={openLoginModal}
169
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]"
170
165
>
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>
166
+
<Icon class="h-5 w-5 scale-[130%]" icon="heroicons:plus-16-solid" />
179
167
<span>add account</span>
180
168
</button>
181
169
</div>