Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
4.4 kB · 142 lines
Svelte
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143<script lang="ts"> // a mock of the pull-request commit view, composed from the web app's own // pieces the way the home page's StackDemo is: the real // PullCommitListHeader (which carries the round version selector), a // RangeSelector for the commit list, and DiffStatPill. the data is fake so // the docs build stays clear of the app's auth, profile and API graphs. import Card from "$lib/components/ui/Card.svelte"; import RangeSelector, { type Range, type RowActions, } from "$lib/components/ui/RangeSelector.svelte"; import PullCommitListHeader from "$lib/components/repo/pulls/PullCommitListHeader.svelte"; import Avatar from "$lib/components/ui/Avatar.svelte"; import DiffStatPill from "$lib/components/repo/DiffStatPill.svelte"; import type { PullSubmission } from "$lib/api"; import type { CommitSummary } from "$lib/components/repo/types";
const versions: PullSubmission[] = [ { head: "456789abcdef0123456789abcdef0123456789ab", base: "fedcba9876543210fedcba9876543210fedcba98", createdAt: "2026-07-27T12:00:00Z", }, { head: "89abcdef0123456789abcdef0123456789abcdef", base: "fedcba9876543210fedcba9876543210fedcba98", createdAt: "2026-07-27T18:40:00Z", }, { head: "0123456789abcdef0123456789abcdef01234567", base: "cba9876543210fedcba9876543210fedcba98765", createdAt: "2026-07-28T09:30:00Z", }, ];
const commits: CommitSummary[] = [ { hash: "d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3", shortHash: "d4e5f6a7", subject: "tidy diff toolbar spacing", body: "", authorName: "alice", authorEmail: "alice@tangled.org", when: "2026-07-28T09:10:00Z", changeId: "zsuskuln", stat: { insertions: 4, deletions: 9 }, }, { hash: "c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2", shortHash: "c3d4e5f6", subject: "fix hydrate leak on version switch", body: "", authorName: "alice", authorEmail: "alice@tangled.org", when: "2026-07-28T08:40:00Z", changeId: "rlvkpxrz", stat: { insertions: 12, deletions: 3 }, }, { hash: "b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1", shortHash: "b2c3d4e5", subject: "add interdiff change-id narrowing", body: "", authorName: "bob", authorEmail: "bob@tangled.org", when: "2026-07-27T18:20:00Z", changeId: "kkmtprmw", stat: { insertions: 148, deletions: 0 }, }, ];
type Item = CommitSummary | "base"; const items: Item[] = [...commits, "base"];
let versionRange = $state<Range>({ start: versions.length - 1, end: versions.length - 1, }); let showChangeIds = $state(true); let commitRange = $state<Range>({ start: 0, end: commits.length });
const resetRange = () => (commitRange = { start: 0, end: commits.length });</script>
<Card padding="small" class="not-content my-lg space-y-xs typography-paragraph-regular"> <PullCommitListHeader {versions} {commits} {versionRange} bind:showChangeIds oncommitVersions={(next) => (versionRange = next)} />
{#snippet commitRow(_index: number, item: Item, actions: RowActions)} {#if item === "base"} <div class="relative flex h-10 flex-1 items-center px-sm"> <button type="button" class="absolute inset-0 cursor-pointer" aria-label="Show all changes" onclick={resetRange}> </button> <span class="pointer-events-none relative text-foreground-muted"> Base </span> </div> {:else} <div role="none" class="relative grid min-h-10 flex-1 grid-cols-[minmax(0,1fr)] gap-x-xs px-sm sm:grid-cols-[5rem_minmax(0,1fr)_8rem]" {...actions}> <span class="col-start-1 row-start-1 hidden h-10 items-center truncate typography-monospace-regular text-foreground-muted sm:flex"> {showChangeIds && item.changeId ? item.changeId.slice(0, 8) : item.shortHash} </span> <div class="col-start-1 row-start-1 flex h-10 min-w-0 items-center gap-xs sm:col-start-2"> <Avatar handle={item.authorName} size="large" /> <span class="min-w-0 truncate">{item.subject}</span> </div> <div class="col-start-3 row-start-1 hidden h-10 items-center justify-end gap-sm sm:flex"> {#if item.stat}<DiffStatPill stat={item.stat} size="small" />{/if} </div> </div> {/if} {/snippet}
<RangeSelector {items} row={commitRow} minLength={2} muteFullSelection mode="select-top" bind:range={commitRange} /></Card>