commit 73834130dc7c2b3fbb6c2a35837653031b3536e3 · ptr.pet/nucleus

+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
       74
       -
       			loggingIn.set({ did: did.value, handle });

     

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

     

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

     

       74
       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
       81
       +
       	};

     

       82
       82
       +
       

     

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

     

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

     

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

     

       86
       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
       123
       +
       						{#snippet action(name: string, icon: string, onClick: () => void)}

     

       124
       124
       +
       							<div

     

       125
       125
       +
       								title={name}

     

       126
       126
       +
       								onclick={onClick}

     

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

     

       128
       128
       +
       							>

     

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

     

       130
       130
       +
       							</div>

     

       131
       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
       130
       -
       							<svg

     

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

     

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

     

       133
       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
       134
       -
       								width="24"

     

       135
       135
       -
       								height="24"

     

       136
       136
       -
       								viewBox="0 0 20 20"

     

       137
       137
       -
       								><path

     

       138
       138
       -
       									fill="currentColor"

     

       139
       139
       -
       									fill-rule="evenodd"

     

       140
       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
       141
       -
       									clip-rule="evenodd"

     

       142
       142
       -
       								/></svg

     

       143
       143
       -
       							>

     

       143
       143
       +
       

     

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

     

       145
       145
       +
       

     

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

     

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

     

       148
       148
       +
       							)}

     

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

     

       144
       150
        
       

     

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

     

       146
       146
       -
       								<svg

     

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

     

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

     

       149
       149
       -
       									width="24"

     

       150
       150
       -
       									height="24"

     

       151
       151
       -
       									viewBox="0 0 24 24"

     

       152
       152
       -
       									><path

     

       153
       153
       -
       										fill="currentColor"

     

       154
       154
       -
       										fill-rule="evenodd"

     

       155
       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
       156
       -
       										clip-rule="evenodd"

     

       157
       157
       -
       										stroke-width="1.5"

     

       158
       158
       -
       										stroke="currentColor"

     

       159
       159
       -
       									/></svg

     

       160
       160
       -
       								>

     

       152
       152
       +
       								<Icon

     

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

     

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

     

       155
       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
       171
       -
       				<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">

     

       172
       172
       -
       					<path

     

       173
       173
       -
       						stroke-linecap="round"

     

       174
       174
       -
       						stroke-linejoin="round"

     

       175
       175
       -
       						stroke-width="2.5"

     

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

     

       177
       177
       -
       					/>

     

       178
       178
       -
       				</svg>

     

       166
       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>