alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import { resolve } from "$app/paths";
3 import Tag from "$lib/components/ui/Tag.svelte";
4 import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
5 import type { BranchSummary } from "./types";
6
7 interface Props {
8 ownerHandle: string;
9 repoName: string;
10 branches: BranchSummary[];
11 }
12
13 let { ownerHandle, repoName, branches }: Props = $props();
14
15 const base = $derived(`/${ownerHandle}/${repoName}`);
16 const treeHref = (name: string) => resolve(`${base}/tree/${encodeURIComponent(name)}` as "/");
17 const logHref = (name: string) => resolve(`${base}/commits/${encodeURIComponent(name)}` as "/");
18 const subject = (message?: string) => message?.split("\n\n")[0] ?? "";
19</script>
20
21<section id="branches-table" class="overflow-x-auto rounded bg-background-default px-6 py-4">
22 <h2 class="mb-4 typography-paragraph-regular font-bold">Branches</h2>
23
24 {#if branches.length === 0}
25 <p class="py-6 text-center text-foreground-subtle">This repository has no branches.</p>
26 {:else}
27 <div class="hidden divide-y divide-border-default md:flex md:flex-col">
28 <div class="grid grid-cols-14 gap-4">
29 <div
30 class="col-span-4 py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
31 >
32 Name
33 </div>
34 <div
35 class="col-span-2 py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
36 >
37 Commit
38 </div>
39 <div
40 class="col-span-6 py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
41 >
42 Message
43 </div>
44 <div
45 class="col-span-2 justify-self-end py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
46 >
47 Date
48 </div>
49 </div>
50 {#each branches as branch (branch.name)}
51 <div class="grid grid-cols-14 gap-4 py-3">
52 <div class="col-span-4 flex items-center gap-2 align-top">
53 <a
54 href={treeHref(branch.name)}
55 class="truncate text-foreground-default no-underline hover:underline"
56 >
57 {branch.name}
58 </a>
59 {#if branch.isDefault}
60 <Tag color="gray" class="font-mono">Default</Tag>
61 {/if}
62 </div>
63 <div class="col-span-2 align-top font-mono">
64 <a href={logHref(branch.name)} class="no-underline hover:underline">
65 {branch.hash.slice(0, 8)}
66 </a>
67 </div>
68 <div class="col-span-6 align-top break-words">{subject(branch.message)}</div>
69 <div class="col-span-2 justify-self-end align-top text-foreground-muted">
70 {#if branch.when}
71 <TimeAgo value={branch.when} />
72 {/if}
73 </div>
74 </div>
75 {/each}
76 </div>
77
78 <div class="md:hidden">
79 {#each branches as branch, index (branch.name)}
80 <div class="p-2 {index < branches.length - 1 ? 'border-b border-border-default' : ''}">
81 <div class="flex items-center gap-2">
82 <a
83 href={treeHref(branch.name)}
84 class="truncate font-medium text-foreground-default no-underline hover:underline"
85 >
86 {branch.name}
87 </a>
88 {#if branch.isDefault}
89 <Tag color="gray" class="font-mono">Default</Tag>
90 {/if}
91 </div>
92 <div
93 class="mt-1 flex items-center gap-1 typography-paragraph-small text-foreground-muted"
94 >
95 <a href={logHref(branch.name)} class="font-mono no-underline hover:underline">
96 {branch.hash.slice(0, 8)}
97 </a>
98 {#if branch.when}
99 <span aria-hidden="true">·</span>
100 <TimeAgo value={branch.when} />
101 {/if}
102 </div>
103 </div>
104 {/each}
105 </div>
106 {/if}
107</section>