forked from
pds.ls/pdsls
atmosphere explorer
add did/aturi preview to labels
+20
-8
+3
-1
src/components/hover-card/base.tsx
+3
-1
src/components/hover-card/base.tsx
···
15
15
trigger?: JSX.Element;
16
16
/** Additional classes for the wrapper span */
17
17
class?: string;
18
+
/** Additional classes for the link/label */
19
+
labelClass?: string;
18
20
/** Additional classes for the preview container */
19
21
previewClass?: string;
20
22
/** Preview content */
···
63
65
>
64
66
{props.trigger ?? (
65
67
<A
66
-
class="text-blue-500 hover:underline active:underline dark:text-blue-400"
68
+
class={`text-blue-500 hover:underline active:underline dark:text-blue-400 ${props.labelClass || ""}`}
67
69
href={props.href!}
68
70
target={props.newTab ? "_blank" : "_self"}
69
71
>
+4
src/components/hover-card/did.tsx
+4
src/components/hover-card/did.tsx
···
6
6
interface DidHoverCardProps {
7
7
did: string;
8
8
newTab?: boolean;
9
+
class?: string;
10
+
labelClass?: string;
9
11
}
10
12
11
13
interface DidInfo {
···
63
65
label={props.did}
64
66
newTab={props.newTab}
65
67
onHover={handlePrefetch}
68
+
class={props.class}
69
+
labelClass={props.labelClass}
66
70
previewClass="w-max max-w-xs font-sans text-sm"
67
71
>
68
72
<Show when={didInfo()?.loading}>
+4
src/components/hover-card/record.tsx
+4
src/components/hover-card/record.tsx
···
8
8
interface RecordHoverCardProps {
9
9
uri: string;
10
10
newTab?: boolean;
11
+
class?: string;
12
+
labelClass?: string;
11
13
}
12
14
13
15
const recordCache = new Map<string, { value: unknown; loading: boolean; error?: string }>();
···
83
85
label={props.uri}
84
86
newTab={props.newTab}
85
87
onHover={handlePrefetch}
88
+
class={props.class}
89
+
labelClass={props.labelClass}
86
90
previewClass="max-h-80 w-max max-w-sm text-xs whitespace-pre-wrap sm:max-h-112 lg:max-w-lg"
87
91
>
88
92
<Show when={record()?.loading}>
+8
-6
src/views/labels.tsx
+8
-6
src/views/labels.tsx
···
3
3
import { isAtprotoDid } from "@atcute/identity";
4
4
import { Handle } from "@atcute/lexicons";
5
5
import { Title } from "@solidjs/meta";
6
-
import { A, useSearchParams } from "@solidjs/router";
6
+
import { useSearchParams } from "@solidjs/router";
7
7
import { createMemo, createSignal, For, onMount, Show } from "solid-js";
8
8
import { Button } from "../components/button.jsx";
9
+
import DidHoverCard from "../components/hover-card/did.jsx";
10
+
import RecordHoverCard from "../components/hover-card/record.jsx";
9
11
import { StickyOverlay } from "../components/sticky.jsx";
10
12
import { TextInput } from "../components/text-input.jsx";
11
13
import { labelerCache, resolveHandle, resolvePDS } from "../utils/api.js";
···
39
41
</div>
40
42
</div>
41
43
42
-
<A
43
-
href={`/at://${label.uri.replace("at://", "")}`}
44
-
class="text-sm break-all text-blue-500 hover:underline dark:text-blue-400"
44
+
<Show
45
+
when={label.uri.startsWith("at://")}
46
+
fallback={<DidHoverCard did={label.uri} labelClass="block text-sm break-all" />}
45
47
>
46
-
{label.uri}
47
-
</A>
48
+
<RecordHoverCard uri={label.uri} labelClass="block text-sm break-all" />
49
+
</Show>
48
50
49
51
<Show when={label.cid}>
50
52
<div class="font-mono text-xs break-all text-neutral-700 dark:text-neutral-300">
+1
-1
src/views/stream/index.tsx
+1
-1
src/views/stream/index.tsx
···
398
398
<Show when={notice().length}>
399
399
<div class="text-red-500 dark:text-red-400">{notice()}</div>
400
400
</Show>
401
-
<div class="flex w-full flex-col gap-2 divide-y-[0.5px] divide-neutral-500 font-mono text-sm wrap-anywhere whitespace-pre-wrap md:w-3xl">
401
+
<div class="flex w-full flex-col gap-2 divide-y-[0.5px] divide-neutral-500 font-mono text-xs wrap-anywhere whitespace-pre-wrap sm:text-sm md:w-3xl">
402
402
<For each={records().toReversed()}>
403
403
{(rec) => (
404
404
<div class="pb-2">