alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import { goto } from "$app/navigation";
3 import { resolve } from "$app/paths";
4 import GitCompare from "$icon/git-compare";
5 import Select from "$lib/components/ui/Select.svelte";
6 import type { SelectOption } from "$lib/components/ui/selectField";
7
8 interface Props {
9 ownerHandle: string;
10 repoName: string;
11 current: string;
12 branches: string[];
13 tags: string[];
14 defaultBranch?: string;
15 }
16
17 let { ownerHandle, repoName, current, branches, tags, defaultBranch }: Props = $props();
18
19 const base = $derived(`/${ownerHandle}/${repoName}`);
20
21 // no counts in the headings: the knot caps how many refs it hands back, so the length here
22 // is the loaded count rather than the repo's total, and it would not track the filter either
23 const options = $derived<SelectOption[]>([
24 ...branches.map((branch) => ({
25 value: branch,
26 hint: branch === defaultBranch ? "default" : undefined,
27 group: "Branches"
28 })),
29 ...(tags.length > 0
30 ? tags.map((tag) => ({ value: tag, group: "Tags" }))
31 : [{ value: "No tags found", disabled: true, group: "Tags" }])
32 ]);
33
34 const onSelect = (value: string) => {
35 if (value === current) return;
36 void goto(resolve(`${base}/tree/${encodeURIComponent(value)}` as "/"));
37 };
38</script>
39
40<div class="flex min-w-0 flex-1 items-stretch gap-2">
41 <div class="max-w-32 sm:max-w-64">
42 <!-- the ref lives in the url so navigation updates it, no two way binding -->
43 <Select
44 rich
45 {options}
46 value={current}
47 {onSelect}
48 label="Switch branch or tag"
49 searchPlaceholder="Find a branch or tag…"
50 emptyLabel="No branch or tag matches"
51 class="md:min-w-48"
52 >
53 {#snippet footer()}
54 <div class="flex items-center gap-4 px-2 py-1.5">
55 <a href={resolve(`${base}/branches` as "/")}> View all branches </a>
56 <a href={resolve(`${base}/tags` as "/")}>View all tags</a>
57 </div>
58 {/snippet}
59 </Select>
60 </div>
61 <a
62 href={resolve(`${base}/compare?base=${encodeURIComponent(current)}` as "/")}
63 class="flex items-center rounded-sm border border-border-default px-2 text-foreground-muted no-underline hover:bg-background-subtle hover:no-underline"
64 title="Compare branches or tags"
65 aria-label="Compare branches or tags"
66 >
67 <GitCompare class="size-4" aria-hidden="true" />
68 </a>
69</div>