forked from
pds.ls/pdsls
atmosphere explorer
logged in user card
+45
-21
+3
-3
src/auth/account.tsx
+3
-3
src/auth/account.tsx
···
2
2
import { deleteStoredSession, getSession, OAuthUserAgent } from "@atcute/oauth-browser-client";
3
3
import { A } from "@solidjs/router";
4
4
import { createEffect, For, onMount, Show } from "solid-js";
5
-
import { createStore, produce } from "solid-js/store";
5
+
import { produce } from "solid-js/store";
6
6
import { ActionMenu, DropdownMenu, MenuProvider, NavMenu } from "../components/dropdown.jsx";
7
7
import { Modal } from "../components/modal.jsx";
8
8
import { Login } from "./login.jsx";
···
19
19
} from "./session-manager.js";
20
20
import {
21
21
agent,
22
+
avatars,
22
23
openManager,
23
24
pendingPermissionEdit,
24
25
sessions,
25
26
setAgent,
27
+
setAvatars,
26
28
setOpenManager,
27
29
setPendingPermissionEdit,
28
30
setSessions,
···
74
76
};
75
77
76
78
export const AccountManager = () => {
77
-
const [avatars, setAvatars] = createStore<Record<Did, string>>();
78
-
79
79
const getThumbnailUrl = (avatarUrl: string) => {
80
80
return avatarUrl.replace("img/avatar/", "img/avatar_thumbnail/");
81
81
};
+2
src/auth/state.ts
+2
src/auth/state.ts
···
1
1
import { OAuthUserAgent } from "@atcute/oauth-browser-client";
2
+
import { Did } from "@atcute/lexicons";
2
3
import { createSignal } from "solid-js";
3
4
import { createStore } from "solid-js/store";
4
5
···
12
13
13
14
export const [agent, setAgent] = createSignal<OAuthUserAgent | undefined>();
14
15
export const [sessions, setSessions] = createStore<Sessions>();
16
+
export const [avatars, setAvatars] = createStore<Record<Did, string>>();
15
17
export const [openManager, setOpenManager] = createSignal(false);
16
18
export const [showAddAccount, setShowAddAccount] = createSignal(false);
17
19
export const [pendingPermissionEdit, setPendingPermissionEdit] = createSignal<string | null>(null);
+40
-18
src/views/home.tsx
+40
-18
src/views/home.tsx
···
1
1
import { A } from "@solidjs/router";
2
-
import { JSX } from "solid-js";
3
-
import { setOpenManager, setShowAddAccount } from "../auth/state";
2
+
import { JSX, Show } from "solid-js";
3
+
import { agent, avatars, sessions, setOpenManager, setShowAddAccount } from "../auth/state";
4
4
import { setShowSearch } from "../components/search";
5
5
6
6
const baseCardClass =
···
23
23
type Accent = "blue" | "orange" | "violet";
24
24
25
25
const CardContent = (props: {
26
-
icon: string;
26
+
icon: string | JSX.Element;
27
27
title: string;
28
28
description: string;
29
29
accent: Accent;
30
30
}) => (
31
31
<>
32
-
<span class="flex items-center gap-1.5 text-xs sm:text-base">
33
-
<span class={`${props.icon} iconify shrink-0 ${accentIcon[props.accent]}`} />
34
-
<span class="font-medium">{props.title}</span>
32
+
<span class="flex min-w-0 items-center gap-1.5 text-xs sm:text-base">
33
+
{typeof props.icon === "string" ?
34
+
<span class={`${props.icon} iconify shrink-0 ${accentIcon[props.accent]}`} />
35
+
: props.icon}
36
+
<span class="truncate font-medium">{props.title}</span>
35
37
</span>
36
38
<span class="text-xs text-neutral-500 sm:text-sm dark:text-neutral-400">
37
39
{props.description}
···
41
43
42
44
const ButtonCard = (props: {
43
45
onClick: () => void;
44
-
icon: string;
46
+
icon: string | JSX.Element;
45
47
title: string;
46
48
description: string;
47
49
accent: Accent;
···
58
60
59
61
const LinkCard = (props: {
60
62
href: string;
61
-
icon: string;
63
+
icon: string | JSX.Element;
62
64
title: string;
63
65
description: string;
64
66
accent: Accent;
···
117
119
description="Find any user or record"
118
120
accent="blue"
119
121
/>
120
-
<ButtonCard
121
-
onClick={() => {
122
-
setOpenManager(true);
123
-
setShowAddAccount(true);
124
-
}}
125
-
icon="lucide--user-round"
126
-
title="Sign in"
127
-
description="Manage records"
128
-
accent="blue"
129
-
/>
122
+
<Show
123
+
when={agent()?.sub && sessions[agent()!.sub]?.signedIn}
124
+
fallback={
125
+
<ButtonCard
126
+
onClick={() => {
127
+
setOpenManager(true);
128
+
setShowAddAccount(true);
129
+
}}
130
+
icon="lucide--user-round"
131
+
title="Sign in"
132
+
description="Manage records"
133
+
accent="blue"
134
+
/>
135
+
}
136
+
>
137
+
<LinkCard
138
+
href={`/at://${agent()!.sub}`}
139
+
icon={
140
+
avatars[agent()!.sub] ?
141
+
<img
142
+
src={avatars[agent()!.sub].replace("img/avatar/", "img/avatar_thumbnail/")}
143
+
class="size-4 shrink-0 rounded-full sm:size-5"
144
+
/>
145
+
: "lucide--user-round"
146
+
}
147
+
title={sessions[agent()!.sub]?.handle ?? agent()!.sub}
148
+
description="View your repo"
149
+
accent="blue"
150
+
/>
151
+
</Show>
130
152
</div>
131
153
132
154
<div class="grid grid-cols-3 gap-2">