alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import { resolve } from "$app/paths";
3 import File from "$icon/file";
4 import FileSymlink from "$icon/file-symlink";
5 import Folder from "$icon/folder";
6 import FolderInput from "$icon/folder-input";
7 import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
8 import type { TreeEntrySummary } from "./types";
9
10 interface Props {
11 ownerHandle: string;
12 repoName: string;
13 ref: string;
14 entries: TreeEntrySummary[];
15 path?: string;
16 }
17
18 let { ownerHandle, repoName, ref, entries, path = "" }: Props = $props();
19
20 const base = $derived(`/${ownerHandle}/${repoName}`);
21 const encodedRef = $derived(encodeURIComponent(ref));
22
23 const linkFor = (entry: TreeEntrySummary) => {
24 const target = path ? `${path}/${entry.name}` : entry.name;
25 const kind = entry.kind === "directory" ? "tree" : "blob";
26 return `${base}/${kind}/${encodedRef}/${target}`;
27 };
28
29 const iconFor = (entry: TreeEntrySummary) => {
30 switch (entry.kind) {
31 case "directory":
32 return Folder;
33 case "submodule":
34 return FolderInput;
35 case "symlink":
36 return FileSymlink;
37 default:
38 return File;
39 }
40 };
41</script>
42
43<div class="min-w-0 md:border-r md:border-border-default md:pr-2">
44 {#each entries as entry (entry.name)}
45 {@const Glyph = iconFor(entry)}
46 <div class="grid grid-cols-3 items-center gap-4 py-1">
47 <a
48 href={resolve(linkFor(entry) as "/")}
49 class="col-span-2 flex min-w-0 items-center gap-2 text-foreground-default no-underline hover:underline"
50 >
51 <Glyph
52 class={`size-4 shrink-0 ${entry.kind === "directory" ? "fill-current" : ""}`}
53 aria-hidden="true"
54 />
55 <span class="truncate">{entry.name}</span>
56 </a>
57 <div class="col-span-1 text-right text-sm text-foreground-subtle">
58 {#if entry.lastCommitHash && entry.lastCommitWhen}
59 <a
60 href={resolve(`${base}/commit/${entry.lastCommitHash}` as "/")}
61 class="text-foreground-subtle no-underline hover:underline"
62 title={entry.lastCommitMessage}
63 >
64 <TimeAgo value={entry.lastCommitWhen} />
65 </a>
66 {/if}
67 </div>
68 </div>
69 {/each}
70</div>