forked from
pds.ls/pdsls
atproto explorer
show avatars in account manager
+17
-8
+17
-8
src/components/account.tsx
+17
-8
src/components/account.tsx
···
11
11
const AccountManager = () => {
12
12
const [openManager, setOpenManager] = createSignal(false);
13
13
const [sessions, setSessions] = createStore<Record<string, string | undefined>>();
14
-
const [avatar, setAvatar] = createSignal<string>();
14
+
const [avatars, setAvatars] = createStore<Record<Did, string>>();
15
15
16
16
onMount(async () => {
17
17
await retrieveSession();
···
29
29
}
30
30
});
31
31
});
32
+
sessionDids.forEach(async (did) => {
33
+
const avatar = await getAvatar(did);
34
+
if (avatar) setAvatars(did, avatar);
35
+
});
32
36
}
33
-
34
-
const repo = localStorage.getItem("lastSignedIn");
35
-
if (repo) setAvatar(await getAvatar(repo as Did));
36
37
});
37
38
38
39
const resumeSession = async (did: Did) => {
39
40
localStorage.setItem("lastSignedIn", did);
40
41
retrieveSession();
41
-
setAvatar(await getAvatar(did));
42
42
};
43
43
44
44
const removeSession = async (did: Did) => {
···
81
81
class="flex w-full items-center justify-between gap-1 truncate rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
82
82
onclick={() => resumeSession(did as Did)}
83
83
>
84
-
<span class="truncate">{sessions[did]?.length ? sessions[did] : did}</span>
84
+
<span class="flex items-center gap-2">
85
+
<img
86
+
src={avatars[did as Did].replace("img/avatar/", "img/avatar_thumbnail/")}
87
+
class="size-5 rounded-full"
88
+
/>
89
+
<span class="truncate">{sessions[did]?.length ? sessions[did] : did}</span>
90
+
</span>
85
91
<Show when={did === agent()?.sub}>
86
92
<span class="iconify lucide--check shrink-0"></span>
87
93
</Show>
···
110
116
onclick={() => setOpenManager(true)}
111
117
class="flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
112
118
>
113
-
{agent() && avatar() ?
114
-
<img src={avatar()} class="size-5 rounded-full" />
119
+
{agent() && avatars[agent()!.sub] ?
120
+
<img
121
+
src={avatars[agent()!.sub].replace("img/avatar/", "img/avatar_thumbnail/")}
122
+
class="size-5 rounded-full"
123
+
/>
115
124
: <span class="iconify lucide--circle-user-round text-xl"></span>}
116
125
</button>
117
126
</>