alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import { resolve } from "$app/paths";
3 import CircleDot from "$icon/circle-dot";
4 import CircleX from "$icon/circle-x";
5 import Plus from "$icon/plus";
6 import Button from "$lib/components/ui/Button.svelte";
7 import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
8 import IssueSearch from "./IssueSearch.svelte";
9
10 interface Props {
11 ownerHandle: string;
12 repoName: string;
13 state: "open" | "closed";
14 openCount: number;
15 closedCount: number;
16 }
17
18 let { ownerHandle, repoName, state, openCount, closedCount }: Props = $props();
19
20 const base = $derived(`/${ownerHandle}/${repoName}/issues`);
21</script>
22
23<!--
24 grid mirrors the appview: [group | search | new]. on mobile the search spans the
25 full width on its own row while the group and new button share the row below it.
26-->
27<div class="grid grid-cols-[auto_1fr_auto] gap-2">
28 <div class="col-span-3 sm:col-span-1 sm:col-start-2">
29 <IssueSearch />
30 </div>
31
32 <ButtonGroup class="sm:row-start-1">
33 <!-- TODO: wire up state filter navigation -->
34 <Button
35 href={resolve(`${base}?state=open` as "/")}
36 {...segmentProps(state === "open")}
37 size="sm"
38 icon={CircleDot}
39 >
40 <span>
41 <span class="hidden sm:inline">{openCount}</span>
42 Open
43 </span>
44 </Button>
45 <Button
46 href={resolve(`${base}?state=closed` as "/")}
47 {...segmentProps(state === "closed")}
48 size="sm"
49 icon={CircleX}
50 >
51 <span>
52 <span class="hidden sm:inline">{closedCount}</span>
53 Closed
54 </span>
55 </Button>
56 </ButtonGroup>
57
58 <!-- TODO: point at the new issue route once it exists -->
59 <Button
60 href={resolve(`${base}/new` as "/")}
61 variant="primary"
62 size="sm"
63 icon={Plus}
64 class="col-start-3 row-start-2 sm:row-start-1"
65 >
66 New
67 </Button>
68</div>