Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596<script lang="ts"> import History from "$icon/history"; import EmptyState from "$lib/components/ui/EmptyState.svelte"; import Pagination from "$lib/components/ui/Pagination.svelte"; import Card from "$lib/components/ui/Card.svelte"; import CommitRows from "$lib/components/repo/CommitRows.svelte"; import CommitRow from "$lib/components/repo/CommitRow.svelte"; import type { CommitSummary } from "$lib/components/repo/types"; import { baseName, blobHref } from "$lib/components/repo/urls";
interface Props { ownerHandle: string; repoName: string; ref: string; path: string; commits: CommitSummary[]; page: number; pageCount: number; onPageChange?: (page: number) => void; }
let { ownerHandle, repoName, ref, path, commits, page, pageCount, onPageChange }: Props = $props();
const month = new Intl.DateTimeFormat("en", { month: "long", year: "numeric" }); const monthOf = (when: string): string => { const date = new Date(when); return Number.isNaN(date.getTime()) ? "Undated" : month.format(date); };
// the log comes back newest first, so a run of same-month commits is // contiguous and one pass is enough to cut the groups const groups = $derived.by(() => { const cut: { label: string; commits: CommitSummary[] }[] = []; for (const commit of commits) { const label = monthOf(commit.when); const open = cut.at(-1); if (open?.label === label) open.commits.push(commit); else cut.push({ label, commits: [commit] }); } return cut; });
const fileName = $derived(baseName(path)); const parentPath = $derived(path.slice(0, path.length - fileName.length));</script>
<Card padding="none" class="pb-xl"> <h2 class="flex flex-wrap items-center gap-xs p-md pb-2xl typography-paragraph-regular font-medium md:pb-md" > <History class="size-3.5 shrink-0" aria-hidden="true" /> Version history of <a href={blobHref(ownerHandle, repoName, ref, path)} title={path} aria-label={path} class="flex min-w-0 rounded-sm bg-background-inset px-2xs typography-monospace-regular font-normal text-foreground-default no-underline hover:underline" >{#if parentPath}<span class="truncate">{parentPath}</span>{/if}<span class="shrink-0" >{fileName}</span ></a > </h2>
{#if commits.length === 0} <EmptyState size="inline" message="No commits touch this file at {ref}." class="justify-center px-md pb-2xl" /> {:else} <div class="flex flex-col gap-2xl md:gap-xl"> {#each groups as group (group.commits[0].hash)} <div class="flex flex-col"> <h3 class="px-md pb-2xs typography-paragraph-regular text-foreground-muted"> {group.label} </h3> <CommitRows class="mt-xs divide-y divide-border-default border-y border-border-default" > {#each group.commits as commit (commit.hash)} <CommitRow {ownerHandle} {repoName} {commit} /> {/each} </CommitRows> </div> {/each} </div> {/if}</Card>
{#if pageCount > 1} <div class="mt-md flex justify-center"> <Pagination {page} total={pageCount} labels onchange={onPageChange} class="gap-lg" /> </div>{/if}