this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

restyle identity tab

Juliet 142631ed 8e4b04a6

+59 -38
+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>