Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374<script lang="ts"> import { resolve } from "$app/paths"; import ShieldCheck from "$icon/shield-check"; import Hovercard from "#lib/components/ui/Hovercard.svelte"; import User from "#lib/components/ui/User.svelte";
interface Props { /** full commit hash; the pill shows the short form */ hash: string; /** ssh key fingerprint the commit was verified against */ fingerprint: string; /** the committer, shown in the popover */ committerDid?: string; committerHandle?: string; /** link to the commit; without it the pill is a plain span */ href?: string; class?: string; }
let { hash, fingerprint, committerDid, committerHandle, href, class: className }: Props = $props();
const shortHash = $derived(hash.slice(0, 8)); const link = $derived(href ? resolve(href as "/") : undefined);
// the same shape as the plain sha pill, but green and led by a shield const pill = "inline-flex items-center gap-2xs rounded-md bg-background-success-subtle px-2xs py-3xs typography-monospace-small text-foreground-success-strong no-underline hover:underline";</script>
<Hovercard align="bottom-left" cardClass="w-80 p-md" openDelay={50} closeDelay={200} class={className}> {#if link} <a data-testid="commitSignature" data-verified="true" href={link} class={pill}> <ShieldCheck class="size-3.5 shrink-0" aria-hidden="true" /> {shortHash} </a> {:else} <span data-testid="commitSignature" data-verified="true" class={pill}> <ShieldCheck class="size-3.5 shrink-0" aria-hidden="true" /> {shortHash} </span> {/if}
{#snippet content()} <div class="flex flex-col gap-xs"> <p class="typography-paragraph-regular"> This commit was signed with the committer's <span class="font-medium text-foreground-success-strong">known signature</span>. </p> {#if committerDid || committerHandle} <User did={committerDid} handle={committerHandle} link /> {/if} <div class="border-t border-border-default pt-xs"> <div class="typography-paragraph-small text-foreground-muted"> SSH Key Fingerprint: </div> <div class="typography-monospace-small break-all">{fingerprint}</div> </div> </div> {/snippet}</Hovercard>