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 class="hidden sm:inline">{openCount}</span>
41 Open
42 </Button>
43 <Button
44 href={resolve(`${base}?state=closed` as "/")}
45 {...segmentProps(state === "closed")}
46 size="sm"
47 icon={CircleX}
48 >
49 <span class="hidden sm:inline">{closedCount}</span>
50 Closed
51 </Button>
52 </ButtonGroup>
53
54 <!-- TODO: point at the new issue route once it exists -->
55 <Button
56 href={resolve(`${base}/new` as "/")}
57 variant="primary"
58 size="sm"
59 icon={Plus}
60 class="col-start-3 row-start-2 sm:row-start-1"
61 >
62 New
63 </Button>
64</div>