atmosphere explorer
pds.ls
tool
typescript
atproto
new identity tab design
+53
-71
+53
-71
src/views/repo.tsx
+53
-71
src/views/repo.tsx
···
486
486
<div class="flex flex-col gap-3 wrap-anywhere">
487
487
{/* ID Section */}
488
488
<div>
489
-
<div class="flex items-center gap-1">
490
-
<div class="iconify lucide--id-card" />
491
-
<p class="font-semibold">ID</p>
489
+
<div class="font-semibold">DID</div>
490
+
<div class="text-sm text-neutral-700 dark:text-neutral-300">
491
+
{didDocument().id}
492
492
</div>
493
-
<div class="text-sm">{didDocument().id}</div>
494
493
</div>
495
494
496
495
{/* Aliases Section */}
497
496
<div>
498
-
<div class="flex items-center gap-1">
499
-
<div class="iconify lucide--at-sign" />
500
-
<p class="font-semibold">Aliases</p>
501
-
</div>
502
-
<div class="flex flex-col gap-0.5">
503
-
<For each={didDocument().alsoKnownAs}>
504
-
{(alias) => (
505
-
<div class="flex items-center gap-1 text-sm">
506
-
<span>{alias}</span>
507
-
<Show when={alias.startsWith("at://")}>
508
-
<Tooltip
509
-
text={
510
-
validHandles[alias] === true ? "Valid handle"
511
-
: validHandles[alias] === undefined ?
512
-
"Validating"
513
-
: "Invalid handle"
514
-
}
515
-
>
516
-
<span
517
-
classList={{
518
-
"iconify lucide--circle-check text-green-600 dark:text-green-400":
519
-
validHandles[alias] === true,
520
-
"iconify lucide--circle-x text-red-500 dark:text-red-400":
521
-
validHandles[alias] === false,
522
-
"iconify lucide--loader-circle animate-spin":
523
-
validHandles[alias] === undefined,
524
-
}}
525
-
></span>
526
-
</Tooltip>
527
-
</Show>
528
-
</div>
529
-
)}
530
-
</For>
531
-
</div>
497
+
<p class="font-semibold">Aliases</p>
498
+
<For each={didDocument().alsoKnownAs}>
499
+
{(alias) => (
500
+
<div class="flex items-center gap-1 text-sm text-neutral-700 dark:text-neutral-300">
501
+
<span>{alias}</span>
502
+
<Show when={alias.startsWith("at://")}>
503
+
<Tooltip
504
+
text={
505
+
validHandles[alias] === true ? "Valid handle"
506
+
: validHandles[alias] === undefined ?
507
+
"Validating"
508
+
: "Invalid handle"
509
+
}
510
+
>
511
+
<span
512
+
classList={{
513
+
"iconify lucide--check text-green-600 dark:text-green-400":
514
+
validHandles[alias] === true,
515
+
"iconify lucide--x text-red-500 dark:text-red-400":
516
+
validHandles[alias] === false,
517
+
"iconify lucide--loader-circle animate-spin":
518
+
validHandles[alias] === undefined,
519
+
}}
520
+
></span>
521
+
</Tooltip>
522
+
</Show>
523
+
</div>
524
+
)}
525
+
</For>
532
526
</div>
533
527
534
528
{/* Services Section */}
535
529
<div>
536
-
<div class="flex items-center gap-1">
537
-
<div class="iconify lucide--hard-drive" />
538
-
<p class="font-semibold">Services</p>
539
-
</div>
540
-
<div class="flex flex-col gap-0.5">
530
+
<p class="font-semibold">Services</p>
531
+
<div class="flex flex-col gap-1">
541
532
<For each={didDocument().service}>
542
533
{(service) => (
543
-
<div class="text-sm">
544
-
<div class="font-medium text-neutral-700 dark:text-neutral-300">
545
-
#{service.id.split("#")[1]}
546
-
</div>
534
+
<div class="grid grid-cols-[auto_1fr] items-center gap-x-1 text-sm text-neutral-700 dark:text-neutral-300">
535
+
<span class="iconify lucide--hash"></span>
536
+
<span>{service.id.split("#")[1]}</span>
537
+
<span></span>
547
538
<a
548
-
class="underline hover:text-blue-400"
539
+
class="w-fit underline hover:text-blue-400"
549
540
href={service.serviceEndpoint.toString()}
550
541
target="_blank"
551
542
rel="noopener"
···
560
551
561
552
{/* Verification Methods Section */}
562
553
<div>
563
-
<div class="flex items-center gap-1">
564
-
<div class="iconify lucide--shield-check" />
565
-
<p class="font-semibold">Verification Methods</p>
566
-
</div>
567
-
<div class="flex flex-col gap-0.5">
554
+
<p class="font-semibold">Verification Methods</p>
555
+
<div class="flex flex-col gap-1">
568
556
<For each={didDocument().verificationMethod}>
569
557
{(verif) => (
570
558
<Show when={verif.publicKeyMultibase}>
571
559
{(key) => (
572
-
<div class="text-sm">
573
-
<div class="flex items-baseline gap-1">
574
-
<span class="font-medium text-neutral-700 dark:text-neutral-300">
575
-
#{verif.id.split("#")[1]}
576
-
</span>
577
-
<span class="rounded bg-neutral-200 px-1 py-0.5 text-xs text-neutral-800 dark:bg-neutral-700 dark:text-neutral-300">
578
-
{detectKeyType(key())}
579
-
</span>
580
-
</div>
560
+
<div class="grid grid-cols-[auto_1fr] items-center gap-x-1 text-sm text-neutral-700 dark:text-neutral-300">
561
+
<span class="iconify lucide--hash"></span>
562
+
<span>{verif.id.split("#")[1]}</span>
563
+
<span class="iconify lucide--key-round"></span>
564
+
<span>{detectKeyType(key())}</span>
565
+
<span></span>
581
566
<div class="font-mono break-all">{key()}</div>
582
567
</div>
583
568
)}
···
590
575
{/* Rotation Keys Section */}
591
576
<Show when={rotationKeys().length > 0}>
592
577
<div>
593
-
<div class="flex items-center gap-1">
594
-
<div class="iconify lucide--key-round" />
595
-
<p class="font-semibold">Rotation Keys</p>
596
-
</div>
597
-
<div class="flex flex-col gap-0.5">
578
+
<p class="font-semibold">Rotation Keys</p>
579
+
<div class="flex flex-col gap-1">
598
580
<For each={rotationKeys()}>
599
581
{(key) => (
600
-
<div class="text-sm">
601
-
<span class="rounded bg-neutral-200 px-1 py-0.5 text-xs text-neutral-800 dark:bg-neutral-700 dark:text-neutral-300">
602
-
{detectDidKeyType(key)}
603
-
</span>
582
+
<div class="grid grid-cols-[auto_1fr] items-center gap-x-1 text-sm text-neutral-700 dark:text-neutral-300">
583
+
<span class="iconify lucide--key-round"></span>
584
+
<span>{detectDidKeyType(key)}</span>
585
+
<span></span>
604
586
<div class="font-mono break-all">{key.replace("did:key:", "")}</div>
605
587
</div>
606
588
)}