Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118<script lang="ts"> import { resolve } from "$app/paths"; import Separator from "$lib/components/ui/Separator.svelte"; import Tag from "$lib/components/ui/Tag.svelte"; import TimeAgo from "$lib/components/ui/TimeAgo.svelte"; import type { BranchSummary } from "$lib/components/repo/types";
interface Props { ownerHandle: string; repoName: string; branches: BranchSummary[]; }
let { ownerHandle, repoName, branches }: Props = $props();
const base = $derived(`/${ownerHandle}/${repoName}`); const treeHref = (name: string) => resolve(`${base}/tree/${encodeURIComponent(name)}` as "/"); const logHref = (name: string) => resolve(`${base}/commits/${encodeURIComponent(name)}` as "/"); const subject = (message?: string) => message?.split("\n\n")[0] ?? "";</script>
<section id="branches-table" class="overflow-x-auto rounded-sm bg-background-default px-xl py-md"> <h2 class="mb-md typography-paragraph-regular font-bold">Branches</h2>
{#if branches.length === 0} <p class="py-xl text-center text-foreground-subtle">This repository has no branches.</p> {:else} <div class="hidden divide-y divide-border-default md:flex md:flex-col"> <div class="grid grid-cols-14 gap-md"> <div class="col-span-4 py-xs text-left typography-paragraph-regular font-bold text-foreground-muted" > Name </div> <div class="col-span-2 py-xs text-left typography-paragraph-regular font-bold text-foreground-muted" > Commit </div> <div class="col-span-6 py-xs text-left typography-paragraph-regular font-bold text-foreground-muted" > Message </div> <div class="col-span-2 justify-self-end py-xs text-left typography-paragraph-regular font-bold text-foreground-muted" > Date </div> </div> {#each branches as branch (branch.name)} <div class="grid grid-cols-14 gap-md py-sm"> <div class="col-span-4 flex items-center gap-xs align-top"> <a href={treeHref(branch.name)} class="truncate text-foreground-default no-underline hover:underline" > {branch.name} </a> {#if branch.isDefault} <Tag color="gray" class="typography-monospace-regular">Default</Tag> {/if} </div> <div class="col-span-2 align-top typography-monospace-regular"> <a href={logHref(branch.name)} class="no-underline hover:underline"> {branch.hash.slice(0, 8)} </a> </div> <div class="col-span-6 align-top wrap-break-word"> {subject(branch.message)} </div> <div class="col-span-2 justify-self-end align-top text-foreground-muted"> {#if branch.when} <TimeAgo value={branch.when} /> {/if} </div> </div> {/each} </div>
<div class="md:hidden"> {#each branches as branch, index (branch.name)} <div class="p-xs {index < branches.length - 1 ? 'border-b border-border-default' : ''}" > <div class="flex items-center gap-xs"> <a href={treeHref(branch.name)} class="truncate font-medium text-foreground-default no-underline hover:underline" > {branch.name} </a> {#if branch.isDefault} <Tag color="gray" class="typography-monospace-regular">Default</Tag> {/if} </div> <div class="mt-2xs flex items-center gap-2xs typography-paragraph-small text-foreground-muted" > <a href={logHref(branch.name)} class="typography-monospace-regular no-underline hover:underline" > {branch.hash.slice(0, 8)} </a> {#if branch.when} <Separator variant="dot" /> <TimeAgo value={branch.when} /> {/if} </div> </div> {/each} </div> {/if}</section>