alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { tv } from "tailwind-variants";
3
4 export const pipelineToolbar = tv({
5 slots: {
6 // same grid as IssueToolbar: group, search, count. search gets its own row on mobile.
7 root: "grid grid-cols-[auto_1fr_auto] gap-2",
8 search: "col-span-3 sm:col-span-1 sm:col-start-2",
9 group: "sm:row-start-1",
10 count:
11 "col-start-3 row-start-2 flex items-center gap-2 self-center justify-self-end typography-paragraph-small whitespace-nowrap text-foreground-muted sm:row-start-1 md:mr-2.5 md:ml-2",
12 qualifier: "hidden sm:inline"
13 }
14 });
15</script>
16
17<script lang="ts">
18 import { page } from "$app/state";
19 import { resolve } from "$app/paths";
20 import GitCommitHorizontal from "$icon/git-commit-horizontal";
21 import GitPullRequest from "$icon/git-pull-request";
22 import Play from "$icon/play";
23 import Layers2 from "$icon/layers-2";
24 import Button from "$lib/components/ui/Button.svelte";
25 import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
26 import type { PipelineFilter } from "./pipeline";
27 import PipelineSearch from "./PipelineSearch.svelte";
28
29 interface Props {
30 ownerHandle: string;
31 repoName: string;
32 filter: PipelineFilter;
33 /** how many runs match the tab and query */
34 total: number;
35 }
36
37 let { ownerHandle, repoName, filter, total }: Props = $props();
38
39 const base = $derived(`/${ownerHandle}/${repoName}/pipelines`);
40
41 // keep the query when switching tabs
42 const segmentHref = (kind: PipelineFilter) => {
43 const query = page.url.searchParams.get("q");
44 const suffix = query ? `&q=${encodeURIComponent(query)}` : "";
45 return resolve(`${base}?trigger=${kind}${suffix}` as "/");
46 };
47
48 const classes = pipelineToolbar();
49</script>
50
51<div class={classes.root()}>
52 <div class={classes.search()}>
53 <PipelineSearch {filter} />
54 </div>
55
56 <ButtonGroup class={classes.group()}>
57 <!-- no manual segment: the appview only filters push and pull request -->
58 <Button size="sm" href={segmentHref("all")} {...segmentProps(filter === "all")} icon={Layers2}>
59 All
60 </Button>
61 <Button
62 size="sm"
63 href={segmentHref("push")}
64 {...segmentProps(filter === "push")}
65 icon={GitCommitHorizontal}
66 >
67 Push
68 </Button>
69 <Button
70 size="sm"
71 href={segmentHref("pull_request")}
72 {...segmentProps(filter === "pull_request")}
73 icon={GitPullRequest}
74 >
75 <!-- nbsp: a plain space between the spans gets collapsed away -->
76 <span>Pull<span class={classes.qualifier()}> request</span></span>
77 </Button>
78 </ButtonGroup>
79
80 {#if total > 0}
81 <span class={classes.count()}>
82 <Play />
83 {total} pipeline {total === 1 ? "run" : "runs"}
84 </span>
85 {/if}
86</div>