+9 -8

src/auth/account.tsx

··· 1 1 import { Did } from "@atcute/lexicons"; 2 2 import { deleteStoredSession, getSession, OAuthUserAgent } from "@atcute/oauth-browser-client"; 3 3 import { A } from "@solidjs/router"; 4 4 - import { createEffect, createSignal, For, onMount, Show } from "solid-js"; 4 4 + import { createEffect, For, onMount, Show } from "solid-js"; 5 5 import { createStore, produce } from "solid-js/store"; 6 6 import { ActionMenu, DropdownMenu, MenuProvider, NavMenu } from "../components/dropdown.jsx"; 7 7 import { Modal } from "../components/modal.jsx"; ··· 26 26 setOpenManager, 27 27 setPendingPermissionEdit, 28 28 setSessions, 29 29 + setShowAddAccount, 30 30 + showAddAccount, 29 31 } from "./state.js"; 30 32 31 33 const AccountDropdown = (props: { did: Did; onEditPermissions: (did: Did) => void }) => { ··· 72 74 73 75 export const AccountManager = () => { 74 76 const [avatars, setAvatars] = createStore<Record<Did, string>>(); 75 75 - const [showingAddAccount, setShowingAddAccount] = createSignal(false); 76 77 77 78 const getThumbnailUrl = (avatarUrl: string) => { 78 79 return avatarUrl.replace("img/avatar/", "img/avatar_thumbnail/"); ··· 122 123 open={openManager()} 123 124 onClose={() => { 124 125 setOpenManager(false); 125 125 - setShowingAddAccount(false); 126 126 + setShowAddAccount(false); 126 127 scopeFlow.cancel(); 127 128 }} 128 129 alignTop 129 130 contentClass="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-full max-w-sm rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 mx-3 shadow-md dark:border-neutral-700" 130 131 > 131 131 - <Show when={!scopeFlow.showScopeSelector() && !showingAddAccount()}> 132 132 + <Show when={!scopeFlow.showScopeSelector() && !showAddAccount()}> 132 133 <div class="mb-2 px-1 font-semibold"> 133 134 <span>Switch account</span> 134 135 </div> ··· 169 170 </For> 170 171 </div> 171 172 <button 172 172 - onclick={() => setShowingAddAccount(true)} 173 173 + onclick={() => setShowAddAccount(true)} 173 174 class="dark:hover:bg-dark-200 dark:active:bg-dark-100 flex w-full items-center justify-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700" 174 175 > 175 176 <span class="iconify lucide--plus"></span> ··· 177 178 </button> 178 179 </Show> 179 180 180 180 - <Show when={showingAddAccount() && !scopeFlow.showScopeSelector()}> 181 181 - <Login onCancel={() => setShowingAddAccount(false)} /> 181 181 + <Show when={showAddAccount() && !scopeFlow.showScopeSelector()}> 182 182 + <Login onCancel={() => setShowAddAccount(false)} /> 182 183 </Show> 183 184 184 185 <Show when={scopeFlow.showScopeSelector()}> ··· 189 190 onConfirm={scopeFlow.complete} 190 191 onCancel={() => { 191 192 scopeFlow.cancel(); 192 192 - setShowingAddAccount(false); 193 193 + setShowAddAccount(false); 193 194 }} 194 195 /> 195 196 </Show>

+1 -1

src/auth/login.tsx

··· 32 32 }; 33 33 34 34 return ( 35 35 - <div class="flex flex-col gap-y-3 px-1"> 35 35 + <div class="flex flex-col gap-y-3"> 36 36 <Show when={!scopeFlow.showScopeSelector()}> 37 37 <Show when={props.onCancel}> 38 38 <div class="flex items-center gap-2">

+1 -1

src/auth/scope-selector.tsx

··· 68 68 classList={{ "opacity-50": isDisabled() }} 69 69 > 70 70 <div 71 71 - class="flex size-5 items-center justify-center rounded border-2 transition-colors" 71 71 + class="flex size-5 items-center justify-center rounded border-2" 72 72 classList={{ 73 73 "bg-blue-500 border-transparent group-hover:bg-blue-600 group-active:bg-blue-400": 74 74 isSelected() && !isDisabled(),

+1

src/auth/state.ts

··· 13 13 export const [agent, setAgent] = createSignal<OAuthUserAgent | undefined>(); 14 14 export const [sessions, setSessions] = createStore<Sessions>(); 15 15 export const [openManager, setOpenManager] = createSignal(false); 16 16 + export const [showAddAccount, setShowAddAccount] = createSignal(false); 16 17 export const [pendingPermissionEdit, setPendingPermissionEdit] = createSignal<string | null>(null);

+3 -3

src/components/search.tsx

··· 348 348 </span> 349 349 <button 350 350 type="button" 351 351 - class="text-xs text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200" 351 351 + class="text-xs not-hover:text-neutral-500 dark:not-hover:text-neutral-400" 352 352 onClick={() => { 353 353 localStorage.removeItem(RECENT_SEARCHES_KEY); 354 354 setRecentSearches([]); ··· 390 390 </A> 391 391 <button 392 392 type="button" 393 393 - class="mr-1 flex items-center rounded p-1 opacity-0 group-hover:opacity-100 hover:bg-neutral-300 dark:hover:bg-neutral-600" 393 393 + class="flex items-center p-2.5 opacity-0 not-hover:text-neutral-500 group-hover:opacity-100 dark:not-hover:text-neutral-400" 394 394 onClick={() => { 395 395 removeRecentSearch(recent.path); 396 396 setRecentSearches(getRecentSearches()); 397 397 }} 398 398 > 399 399 - <span class="iconify lucide--x text-sm text-neutral-500 dark:text-neutral-400"></span> 399 399 + <span class="iconify lucide--x text-base"></span> 400 400 </button> 401 401 </div> 402 402 );

+7 -2

src/views/home.tsx

··· 1 1 import { A } from "@solidjs/router"; 2 2 import { For, JSX } from "solid-js"; 3 3 - import { setOpenManager } from "../auth/state"; 3 3 + import { setOpenManager, setShowAddAccount } from "../auth/state"; 4 4 import { Button } from "../components/button"; 5 5 import { SearchButton } from "../components/search"; 6 6 ··· 111 111 <span>to find any account</span> 112 112 </div> 113 113 <div class="flex items-center gap-1.5 text-xs text-neutral-500 dark:text-neutral-400"> 114 114 - <Button onClick={() => setOpenManager(true)}> 114 114 + <Button 115 115 + onClick={() => { 116 116 + setOpenManager(true); 117 117 + setShowAddAccount(true); 118 118 + }} 119 119 + > 115 120 <span class="iconify lucide--user-round"></span> 116 121 Sign in 117 122 </Button>