pds.ls / pdsls
atmosphere explorer pds.ls
tool typescript atproto
fork atom

add copy button to info values

juli.ee 38f70ce4 82308919

verified
+53 -33
unified split
+40 -28
src/views/record.tsx
··· 13 import { Backlinks } from "../components/backlinks.jsx"; 14 import { Button } from "../components/button.jsx"; 15 import { RecordEditor, setPlaceholder } from "../components/create"; 16 - import { 17 - CopyMenu, 18 - DropdownMenu, 19 - MenuProvider, 20 - MenuSeparator, 21 - NavMenu, 22 - } from "../components/dropdown.jsx"; 23 import { Favicon } from "../components/favicon.jsx"; 24 import { JSONValue } from "../components/json.jsx"; 25 import { LexiconSchemaView } from "../components/lexicon-schema.jsx"; ··· 27 import { pds } from "../components/navbar.jsx"; 28 import { addNotification, removeNotification } from "../components/notification.jsx"; 29 import { PermissionButton } from "../components/permission-button.jsx"; 30 import { 31 didDocumentResolver, 32 resolveLexiconAuthority, 33 resolveLexiconSchema, 34 resolvePDS, 35 } from "../utils/api.js"; 36 import { clearCollectionCache } from "../utils/route-cache.js"; 37 import { AtUri, uriTemplates } from "../utils/templates.js"; 38 import { lexicons } from "../utils/types/lexicons.js"; ··· 529 label="Copy record" 530 icon="lucide--copy" 531 /> 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 <NavMenu 542 href={`https://${pds()}/xrpc/com.atproto.repo.getRecord?repo=${params.repo}&collection=${params.collection}&rkey=${params.rkey}`} 543 icon="lucide--external-link" ··· 550 </div> 551 <Show when={!location.hash || location.hash.startsWith("#record")}> 552 <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 /> 554 </div> 555 </Show> 556 <Show when={location.hash === "#schema" || location.hash.startsWith("#schema:")}> ··· 588 <div class="flex w-full flex-col gap-3 px-2"> 589 <div> 590 <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> 594 </div> 595 <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} 603 </div> 604 - </div> 605 </Show> 606 <div> 607 <div class="flex items-center gap-1">
··· 13 import { Backlinks } from "../components/backlinks.jsx"; 14 import { Button } from "../components/button.jsx"; 15 import { RecordEditor, setPlaceholder } from "../components/create"; 16 + import { CopyMenu, DropdownMenu, MenuProvider, NavMenu } from "../components/dropdown.jsx"; 17 import { Favicon } from "../components/favicon.jsx"; 18 import { JSONValue } from "../components/json.jsx"; 19 import { LexiconSchemaView } from "../components/lexicon-schema.jsx"; ··· 21 import { pds } from "../components/navbar.jsx"; 22 import { addNotification, removeNotification } from "../components/notification.jsx"; 23 import { PermissionButton } from "../components/permission-button.jsx"; 24 + import { canHover } from "../layout.jsx"; 25 import { 26 didDocumentResolver, 27 resolveLexiconAuthority, 28 resolveLexiconSchema, 29 resolvePDS, 30 } from "../utils/api.js"; 31 + import { addToClipboard } from "../utils/copy.js"; 32 import { clearCollectionCache } from "../utils/route-cache.js"; 33 import { AtUri, uriTemplates } from "../utils/templates.js"; 34 import { lexicons } from "../utils/types/lexicons.js"; ··· 525 label="Copy record" 526 icon="lucide--copy" 527 /> 528 <NavMenu 529 href={`https://${pds()}/xrpc/com.atproto.repo.getRecord?repo=${params.repo}&collection=${params.collection}&rkey=${params.rkey}`} 530 icon="lucide--external-link" ··· 537 </div> 538 <Show when={!location.hash || location.hash.startsWith("#record")}> 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"> 540 + <JSONValue 541 + data={record()?.value as any} 542 + repo={record()!.uri.split("/")[2]} 543 + keyLinks 544 + /> 545 </div> 546 </Show> 547 <Show when={location.hash === "#schema" || location.hash.startsWith("#schema:")}> ··· 579 <div class="flex w-full flex-col gap-3 px-2"> 580 <div> 581 <p class="font-semibold">AT URI</p> 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> 596 </div> 597 <Show when={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> 615 </div> 616 + )} 617 </Show> 618 <div> 619 <div class="flex items-center gap-1">
+13 -5
src/views/repo.tsx
··· 17 import { Backlinks } from "../components/backlinks.jsx"; 18 import { 19 ActionMenu, 20 - CopyMenu, 21 DropdownMenu, 22 MenuProvider, 23 MenuSeparator, ··· 40 resolvePDS, 41 validateHandle, 42 } from "../utils/api.js"; 43 import { detectDidKeyType, detectKeyType } from "../utils/key.js"; 44 import { useFilterShortcut } from "../utils/keyboard.js"; 45 import { BlobView } from "./blob.jsx"; ··· 362 </Show> 363 <MenuProvider> 364 <DropdownMenu icon="lucide--ellipsis" buttonClass="rounded-sm p-1.5"> 365 - <CopyMenu content={params.repo!} label="Copy DID" icon="lucide--copy" /> 366 <NavMenu 367 href={`/jetstream?dids=${params.repo}`} 368 label="Jetstream" ··· 550 {/* ID Section */} 551 <div> 552 <div class="font-semibold">DID</div> 553 - <div class="text-sm text-neutral-700 dark:text-neutral-300"> 554 - {didDocument().id} 555 - </div> 556 </div> 557 558 {/* Aliases Section */}
··· 17 import { Backlinks } from "../components/backlinks.jsx"; 18 import { 19 ActionMenu, 20 DropdownMenu, 21 MenuProvider, 22 MenuSeparator, ··· 39 resolvePDS, 40 validateHandle, 41 } from "../utils/api.js"; 42 + import { addToClipboard } from "../utils/copy.js"; 43 import { detectDidKeyType, detectKeyType } from "../utils/key.js"; 44 import { useFilterShortcut } from "../utils/keyboard.js"; 45 import { BlobView } from "./blob.jsx"; ··· 362 </Show> 363 <MenuProvider> 364 <DropdownMenu icon="lucide--ellipsis" buttonClass="rounded-sm p-1.5"> 365 <NavMenu 366 href={`/jetstream?dids=${params.repo}`} 367 label="Jetstream" ··· 549 {/* ID Section */} 550 <div> 551 <div class="font-semibold">DID</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> 564 </div> 565 566 {/* Aliases Section */}