atmosphere explorer
pds.ls
tool
typescript
atproto
restyle handle resolution debug view
+41
-33
+41
-33
src/views/repo/identity.tsx
+41
-33
src/views/repo/identity.tsx
···
8
8
import { addToClipboard } from "../../utils/copy.js";
9
9
10
10
const HandleResult = (props: {
11
-
label: string;
11
+
method: string;
12
12
result: HandleResolveResult;
13
13
expectedDid: string;
14
14
}) => {
···
16
16
const mismatch = () => props.result.success && props.result.did !== props.expectedDid;
17
17
18
18
return (
19
-
<>
20
-
<span
21
-
classList={{
22
-
"iconify lucide--check text-green-600 dark:text-green-400": ok(),
23
-
"iconify lucide--x text-red-500 dark:text-red-400": !ok(),
24
-
}}
25
-
></span>
26
-
<span class="font-medium">{props.label}</span>
27
-
<span></span>
28
-
<div class="mb-2 text-sm wrap-anywhere text-neutral-500 dark:text-neutral-400">
29
-
<Show
30
-
when={props.result.success}
31
-
fallback={<div class="text-red-500 dark:text-red-400">{props.result.error}</div>}
32
-
>
33
-
<div>{props.result.did}</div>
34
-
<Show when={mismatch()}>
35
-
<div class="text-red-500 dark:text-red-400">Expected: {props.expectedDid}</div>
36
-
</Show>
37
-
</Show>
19
+
<div class="grid grid-cols-[7rem_minmax(0,1fr)] items-start gap-x-3 gap-y-0.5 text-sm">
20
+
<div class="flex items-center gap-1.5 font-medium whitespace-nowrap">
21
+
<span
22
+
classList={{
23
+
"iconify lucide--check text-green-600 dark:text-green-400": ok(),
24
+
"iconify lucide--x text-red-500 dark:text-red-400": !ok(),
25
+
}}
26
+
></span>
27
+
<span>{props.method}</span>
38
28
</div>
39
-
</>
29
+
<Show
30
+
when={props.result.success}
31
+
fallback={
32
+
<div class="min-w-0 wrap-anywhere text-red-500 dark:text-red-400">
33
+
{props.result.error}
34
+
</div>
35
+
}
36
+
>
37
+
<div class="min-w-0 truncate text-neutral-500 dark:text-neutral-400">
38
+
{props.result.did}
39
+
</div>
40
+
</Show>
41
+
<Show when={mismatch()}>
42
+
<span></span>
43
+
<div class="min-w-0 wrap-anywhere text-red-500 dark:text-red-400">
44
+
Expected: {props.expectedDid}
45
+
</div>
46
+
</Show>
47
+
</div>
40
48
);
41
49
};
42
50
···
52
60
when={props.alias.startsWith("at://")}
53
61
fallback={<div class="text-sm text-neutral-700 dark:text-neutral-300">{props.alias}</div>}
54
62
>
55
-
<div class="flex flex-col gap-2">
63
+
<div class="flex flex-col gap-1">
56
64
<button
57
-
class="-ml-1 flex w-fit items-center gap-1 rounded px-1 py-0.5 text-left text-sm text-neutral-700 hover:bg-neutral-200 active:bg-neutral-200 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-700"
65
+
class="-ml-1 flex w-fit max-w-full items-center gap-1 rounded px-1 py-0.5 text-left text-sm text-neutral-700 hover:bg-neutral-200 active:bg-neutral-200 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-700"
66
+
aria-expanded={expanded()}
58
67
onClick={async () => {
59
68
if (expanded()) {
60
69
setExpanded(false);
···
67
76
}
68
77
}}
69
78
>
70
-
<span>{props.alias}</span>
79
+
<span class="truncate">{props.alias}</span>
71
80
<span
72
81
classList={{
73
82
"iconify text-base shrink-0 lucide--check text-green-600 dark:text-green-400":
···
79
88
</button>
80
89
81
90
<Show when={expanded()}>
82
-
<div class="mb-2 rounded-lg border border-neutral-200 bg-neutral-50 p-3 dark:border-neutral-700 dark:bg-neutral-800/50">
91
+
<div class="mb-2 ml-2.5 border-l border-neutral-200 pl-2.5 dark:border-neutral-700">
92
+
<div class="mb-1.5 text-xs font-medium text-neutral-500 dark:text-neutral-400">
93
+
Resolution
94
+
</div>
83
95
<Show
84
96
when={result()}
85
97
fallback={
86
-
<div class="flex items-center gap-2 py-2 text-sm">
98
+
<div class="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400">
87
99
<span class="iconify lucide--loader-circle animate-spin"></span>
88
100
<span>Resolving handle...</span>
89
101
</div>
90
102
}
91
103
>
92
104
{(r) => (
93
-
<div class="grid grid-cols-[auto_1fr] items-center gap-x-1.5 text-sm">
94
-
<HandleResult label="DNS (TXT record)" result={r().dns} expectedDid={props.did} />
95
-
<HandleResult
96
-
label="HTTP (.well-known)"
97
-
result={r().http}
98
-
expectedDid={props.did}
99
-
/>
105
+
<div class="flex flex-col gap-1.5">
106
+
<HandleResult method="DNS TXT" result={r().dns} expectedDid={props.did} />
107
+
<HandleResult method="/.well-known" result={r().http} expectedDid={props.did} />
100
108
</div>
101
109
)}
102
110
</Show>