pds.ls
atmosphere explorer
pds.ls
tool
typescript
atproto
add copy button to info values
juli.ee
+40
-28
src/views/record.tsx
+40
-28
src/views/record.tsx
···
13
13
import { Backlinks } from "../components/backlinks.jsx";
14
14
import { Button } from "../components/button.jsx";
15
15
import { RecordEditor, setPlaceholder } from "../components/create";
16
-
import {
17
-
CopyMenu,
18
-
DropdownMenu,
19
-
MenuProvider,
20
-
MenuSeparator,
21
-
NavMenu,
22
-
} from "../components/dropdown.jsx";
16
+
import { CopyMenu, DropdownMenu, MenuProvider, NavMenu } from "../components/dropdown.jsx";
23
17
import { Favicon } from "../components/favicon.jsx";
24
18
import { JSONValue } from "../components/json.jsx";
25
19
import { LexiconSchemaView } from "../components/lexicon-schema.jsx";
···
27
21
import { pds } from "../components/navbar.jsx";
28
22
import { addNotification, removeNotification } from "../components/notification.jsx";
29
23
import { PermissionButton } from "../components/permission-button.jsx";
24
+
import { canHover } from "../layout.jsx";
30
25
import {
31
26
didDocumentResolver,
32
27
resolveLexiconAuthority,
33
28
resolveLexiconSchema,
34
29
resolvePDS,
35
30
} from "../utils/api.js";
31
+
import { addToClipboard } from "../utils/copy.js";
36
32
import { clearCollectionCache } from "../utils/route-cache.js";
37
33
import { AtUri, uriTemplates } from "../utils/templates.js";
38
34
import { lexicons } from "../utils/types/lexicons.js";
···
529
525
label="Copy record"
530
526
icon="lucide--copy"
531
527
/>
532
-
<CopyMenu
533
-
content={`at://${params.repo}/${params.collection}/${params.rkey}`}
534
-
label="Copy AT URI"
535
-
icon="lucide--copy"
536
-
/>
537
-
<Show when={record()?.cid}>
538
-
{(cid) => <CopyMenu content={cid()} label="Copy CID" icon="lucide--copy" />}
539
-
</Show>
540
-
<MenuSeparator />
541
528
<NavMenu
542
529
href={`https://${pds()}/xrpc/com.atproto.repo.getRecord?repo=${params.repo}&collection=${params.collection}&rkey=${params.rkey}`}
543
530
icon="lucide--external-link"
···
550
537
</div>
551
538
<Show when={!location.hash || location.hash.startsWith("#record")}>
552
539
<div class="w-full max-w-screen min-w-full px-2 font-mono text-xs wrap-anywhere whitespace-pre-wrap sm:w-max sm:text-sm md:max-w-3xl">
553
-
<JSONValue data={record()?.value as any} repo={record()!.uri.split("/")[2]} keyLinks />
540
+
<JSONValue
541
+
data={record()?.value as any}
542
+
repo={record()!.uri.split("/")[2]}
543
+
keyLinks
544
+
/>
554
545
</div>
555
546
</Show>
556
547
<Show when={location.hash === "#schema" || location.hash.startsWith("#schema:")}>
···
588
579
<div class="flex w-full flex-col gap-3 px-2">
589
580
<div>
590
581
<p class="font-semibold">AT URI</p>
591
-
<div class="truncate text-xs text-neutral-700 dark:text-neutral-300">
592
-
{record()?.uri}
593
-
</div>
582
+
<button
583
+
class="group flex w-full items-center gap-1 text-left text-sm text-neutral-600 hover:text-neutral-900 dark:text-neutral-300 dark:hover:text-neutral-200"
584
+
onClick={() => addToClipboard(record()!.uri)}
585
+
>
586
+
<span class="truncate" dir="rtl">
587
+
{record()?.uri}
588
+
</span>
589
+
<span
590
+
classList={{
591
+
"iconify lucide--copy shrink-0": true,
592
+
"opacity-0 group-hover:opacity-100": canHover,
593
+
}}
594
+
></span>
595
+
</button>
594
596
</div>
595
597
<Show when={record()?.cid}>
596
-
<div>
597
-
<p class="font-semibold">CID</p>
598
-
<div
599
-
class="truncate text-left text-xs text-neutral-700 dark:text-neutral-300"
600
-
dir="rtl"
601
-
>
602
-
{record()?.cid}
598
+
{(cid) => (
599
+
<div>
600
+
<p class="font-semibold">CID</p>
601
+
<button
602
+
class="group flex w-full items-center gap-1 text-left text-sm text-neutral-600 hover:text-neutral-900 dark:text-neutral-300 dark:hover:text-neutral-200"
603
+
onClick={() => addToClipboard(cid())}
604
+
>
605
+
<span class="truncate" dir="rtl">
606
+
{cid()}
607
+
</span>
608
+
<span
609
+
classList={{
610
+
"iconify lucide--copy shrink-0": true,
611
+
"opacity-0 group-hover:opacity-100": canHover,
612
+
}}
613
+
></span>
614
+
</button>
603
615
</div>
604
-
</div>
616
+
)}
605
617
</Show>
606
618
<div>
607
619
<div class="flex items-center gap-1">
+13
-5
src/views/repo.tsx
+13
-5
src/views/repo.tsx
···
17
17
import { Backlinks } from "../components/backlinks.jsx";
18
18
import {
19
19
ActionMenu,
20
-
CopyMenu,
21
20
DropdownMenu,
22
21
MenuProvider,
23
22
MenuSeparator,
···
40
39
resolvePDS,
41
40
validateHandle,
42
41
} from "../utils/api.js";
42
+
import { addToClipboard } from "../utils/copy.js";
43
43
import { detectDidKeyType, detectKeyType } from "../utils/key.js";
44
44
import { useFilterShortcut } from "../utils/keyboard.js";
45
45
import { BlobView } from "./blob.jsx";
···
362
362
</Show>
363
363
<MenuProvider>
364
364
<DropdownMenu icon="lucide--ellipsis" buttonClass="rounded-sm p-1.5">
365
-
<CopyMenu content={params.repo!} label="Copy DID" icon="lucide--copy" />
366
365
<NavMenu
367
366
href={`/jetstream?dids=${params.repo}`}
368
367
label="Jetstream"
···
550
549
{/* ID Section */}
551
550
<div>
552
551
<div class="font-semibold">DID</div>
553
-
<div class="text-sm text-neutral-700 dark:text-neutral-300">
554
-
{didDocument().id}
555
-
</div>
552
+
<button
553
+
class="group flex w-full items-center gap-1 text-left text-sm text-neutral-700 hover:text-neutral-900 dark:text-neutral-300 dark:hover:text-neutral-200"
554
+
onClick={() => addToClipboard(didDocument().id)}
555
+
>
556
+
<span class="truncate">{didDocument().id}</span>
557
+
<span
558
+
classList={{
559
+
"iconify lucide--copy shrink-0": true,
560
+
"opacity-0 group-hover:opacity-100": canHover,
561
+
}}
562
+
></span>
563
+
</button>
556
564
</div>
557
565
558
566
{/* Aliases Section */}