forked from
pds.ls/pdsls
this repo has no description
restyle identity tab
+59
-38
+59
-38
src/views/repo.tsx
+59
-38
src/views/repo.tsx
···
338
338
<Show when={location.hash === "#identity" || (error() && !location.hash)}>
339
339
<Show when={didDoc()}>
340
340
{(didDocument) => (
341
-
<div class="flex flex-col gap-y-1 wrap-anywhere">
341
+
<div class="flex flex-col gap-1 wrap-anywhere">
342
+
{/* ID Section */}
342
343
<div>
343
344
<div class="flex items-center gap-1">
344
345
<div class="iconify lucide--id-card" />
···
346
347
</div>
347
348
<div class="text-sm">{didDocument().id}</div>
348
349
</div>
350
+
351
+
{/* Aliases Section */}
349
352
<div>
350
353
<div class="flex items-center gap-1">
351
354
<div class="iconify lucide--at-sign" />
352
355
<p class="font-semibold">Aliases</p>
353
356
</div>
354
-
<ul>
357
+
<div class="flex flex-col gap-0.5">
355
358
<For each={didDocument().alsoKnownAs}>
356
359
{(alias) => (
357
-
<li class="flex items-center gap-1 text-sm">
360
+
<div class="flex items-center gap-1 text-sm">
358
361
<span>{alias}</span>
359
362
<Show when={alias.startsWith("at://")}>
360
363
<Tooltip
···
367
370
>
368
371
<span
369
372
classList={{
370
-
"iconify lucide--circle-check": validHandles[alias] === true,
373
+
"iconify lucide--circle-check text-green-600 dark:text-green-400":
374
+
validHandles[alias] === true,
371
375
"iconify lucide--circle-x text-red-500 dark:text-red-400":
372
376
validHandles[alias] === false,
373
377
"iconify lucide--loader-circle animate-spin":
···
376
380
></span>
377
381
</Tooltip>
378
382
</Show>
379
-
</li>
383
+
</div>
380
384
)}
381
385
</For>
382
-
</ul>
386
+
</div>
383
387
</div>
388
+
389
+
{/* Services Section */}
384
390
<div>
385
391
<div class="flex items-center gap-1">
386
392
<div class="iconify lucide--hard-drive" />
387
393
<p class="font-semibold">Services</p>
388
394
</div>
389
-
<ul>
395
+
<div class="flex flex-col gap-0.5">
390
396
<For each={didDocument().service}>
391
397
{(service) => (
392
-
<li class="flex flex-col text-sm">
393
-
<span>#{service.id.split("#")[1]}</span>
398
+
<div class="text-sm">
399
+
<div class="text-neutral-600 dark:text-neutral-400">
400
+
#{service.id.split("#")[1]}
401
+
</div>
394
402
<a
395
-
class="w-fit underline"
403
+
class="underline hover:text-blue-400"
396
404
href={service.serviceEndpoint.toString()}
397
405
target="_blank"
398
406
rel="noopener"
399
407
>
400
408
{service.serviceEndpoint.toString()}
401
409
</a>
402
-
</li>
410
+
</div>
403
411
)}
404
412
</For>
405
-
</ul>
413
+
</div>
406
414
</div>
415
+
416
+
{/* Verification Methods Section */}
407
417
<div>
408
418
<div class="flex items-center gap-1">
409
419
<div class="iconify lucide--shield-check" />
410
420
<p class="font-semibold">Verification Methods</p>
411
421
</div>
412
-
<ul>
422
+
<div class="flex flex-col gap-0.5">
413
423
<For each={didDocument().verificationMethod}>
414
424
{(verif) => (
415
425
<Show when={verif.publicKeyMultibase}>
416
426
{(key) => (
417
-
<li class="flex flex-col text-sm">
418
-
<span>
419
-
<span>#{verif.id.split("#")[1]}</span>
420
-
<ErrorBoundary fallback={<>unknown</>}>
421
-
{" "}
422
-
({parsePublicMultikey(key()).type})
427
+
<div class="text-sm">
428
+
<div class="flex items-baseline gap-1">
429
+
<span class="text-neutral-600 dark:text-neutral-400">
430
+
#{verif.id.split("#")[1]}
431
+
</span>
432
+
<ErrorBoundary
433
+
fallback={<span class="text-neutral-500">unknown</span>}
434
+
>
435
+
<span class="dark:bg-dark-100 rounded bg-neutral-200 px-1 py-0.5 font-mono text-xs">
436
+
{parsePublicMultikey(key()).type}
437
+
</span>
423
438
</ErrorBoundary>
424
-
</span>
425
-
<span class="truncate">{key()}</span>
426
-
</li>
439
+
</div>
440
+
<div class="font-mono break-all">{key()}</div>
441
+
</div>
427
442
)}
428
443
</Show>
429
444
)}
430
445
</For>
431
-
</ul>
432
-
</div>
433
-
<div>
434
-
<div class="flex items-center gap-1">
435
-
<div class="iconify lucide--key-round" />
436
-
<p class="font-semibold">Rotation Keys</p>
437
446
</div>
438
-
<ul>
439
-
<For each={rotationKeys()}>
440
-
{(key) => (
441
-
<li class="text-xs">
442
-
<span>{key.replace("did:key:", "")}</span>
443
-
<span> ({parseDidKey(key).type})</span>
444
-
</li>
445
-
)}
446
-
</For>
447
-
</ul>
448
447
</div>
448
+
449
+
{/* Rotation Keys Section */}
450
+
<Show when={rotationKeys().length > 0}>
451
+
<div>
452
+
<div class="flex items-center gap-1">
453
+
<div class="iconify lucide--key-round" />
454
+
<p class="font-semibold">Rotation Keys</p>
455
+
</div>
456
+
<div class="flex flex-col gap-0.5">
457
+
<For each={rotationKeys()}>
458
+
{(key) => (
459
+
<div class="text-sm">
460
+
<span class="dark:bg-dark-100 rounded bg-neutral-200 px-1 py-0.5 font-mono text-xs">
461
+
{parseDidKey(key).type}
462
+
</span>
463
+
<div class="font-mono break-all">{key.replace("did:key:", "")}</div>
464
+
</div>
465
+
)}
466
+
</For>
467
+
</div>
468
+
</div>
469
+
</Show>
449
470
</div>
450
471
)}
451
472
</Show>