From 9146cf13f606c30a476e272b20c20b10ee8ba08e Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Mon, 27 Jul 2026 12:45:05 +0100
Subject: [PATCH] wip: repo issues slop

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../components/repo/issues/IssueCard.svelte   | 45 +++++++++++++
 .../components/repo/issues/IssueList.svelte   | 23 +++++++
 .../repo/issues/IssueStatePill.svelte         | 38 +++++++++++
 .../repo/issues/IssueToolbar.svelte           | 65 +++++++++++++++++++
 web/src/lib/components/repo/types.ts          | 10 +++
 .../[handle]/[repo]/issues/+page.svelte       | 20 ++++++
 .../routes/[handle]/[repo]/issues/+page.ts    | 18 +++++
 7 files changed, 219 insertions(+)
 create mode 100644 web/src/lib/components/repo/issues/IssueCard.svelte
 create mode 100644 web/src/lib/components/repo/issues/IssueList.svelte
 create mode 100644 web/src/lib/components/repo/issues/IssueStatePill.svelte
 create mode 100644 web/src/lib/components/repo/issues/IssueToolbar.svelte
 create mode 100644 web/src/routes/[handle]/[repo]/issues/+page.svelte
 create mode 100644 web/src/routes/[handle]/[repo]/issues/+page.ts

diff --git a/web/src/lib/components/repo/issues/IssueCard.svelte b/web/src/lib/components/repo/issues/IssueCard.svelte
new file mode 100644
index 00000000..494c6371
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueCard.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import User from "$lib/components/ui/User.svelte";
+	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
+	import IssueStatePill from "./IssueStatePill.svelte";
+	import type { IssueSummary } from "$lib/components/repo/types";
+
+	interface Props {
+		ownerHandle: string;
+		repoName: string;
+		issue: IssueSummary;
+	}
+
+	let { ownerHandle, repoName, issue }: Props = $props();
+
+	const href = $derived(resolve(`/${ownerHandle}/${repoName}/issues/${issue.id}` as "/"));
+</script>
+
+<div class="rounded border border-border-default bg-background-default px-6 py-4 shadow-sm">
+	<div class="pb-2">
+		<a {href} class="text-foreground-default no-underline hover:underline">
+			{issue.title}
+			<span class="text-foreground-subtle">#{issue.id}</span>
+		</a>
+	</div>
+
+	<div class="flex flex-wrap items-center gap-x-1 gap-y-1.5 text-sm text-foreground-subtle">
+		<IssueStatePill state={issue.state} />
+
+		<span class="ml-1 flex items-center gap-1">
+			<User handle={issue.authorHandle} did={issue.authorDid} size="sm" />
+		</span>
+
+		<span class="before:mr-1 before:content-['·']">
+			<TimeAgo value={issue.createdAt} />
+		</span>
+
+		<span class="before:mr-1 before:content-['·']">
+			<a {href} class="text-foreground-subtle no-underline hover:underline">
+				{issue.commentCount}
+				{issue.commentCount === 1 ? "comment" : "comments"}
+			</a>
+		</span>
+	</div>
+</div>
diff --git a/web/src/lib/components/repo/issues/IssueList.svelte b/web/src/lib/components/repo/issues/IssueList.svelte
new file mode 100644
index 00000000..9e2132ac
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueList.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import EmptyState from "$lib/components/ui/EmptyState.svelte";
+	import IssueCard from "./IssueCard.svelte";
+	import type { IssueSummary } from "$lib/components/repo/types";
+
+	interface Props {
+		ownerHandle: string;
+		repoName: string;
+		issues: IssueSummary[];
+	}
+
+	let { ownerHandle, repoName, issues }: Props = $props();
+</script>
+
+{#if issues.length === 0}
+	<EmptyState message="No issues found" />
+{:else}
+	<div class="flex flex-col gap-2">
+		{#each issues as issue (issue.id)}
+			<IssueCard {ownerHandle} {repoName} {issue} />
+		{/each}
+	</div>
+{/if}
diff --git a/web/src/lib/components/repo/issues/IssueStatePill.svelte b/web/src/lib/components/repo/issues/IssueStatePill.svelte
new file mode 100644
index 00000000..88071b42
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueStatePill.svelte
@@ -0,0 +1,38 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const issueStatePill = tv({
+		base: "inline-flex items-center gap-1.5 rounded px-2 py-[5px] text-sm text-foreground-on-emphasis select-none",
+		variants: {
+			state: {
+				open: "bg-background-success-emphasis",
+				closed: "bg-foreground-muted"
+			}
+		},
+		defaultVariants: {
+			state: "open"
+		}
+	});
+
+	export type IssueStatePillVariants = VariantProps<typeof issueStatePill>;
+</script>
+
+<script lang="ts">
+	import CircleDot from "$icon/circle-dot";
+	import CircleX from "$icon/circle-x";
+
+	interface Props {
+		state: IssueStatePillVariants["state"];
+		class?: string;
+	}
+
+	let { state = "open", class: className }: Props = $props();
+
+	const Icon = $derived(state === "closed" ? CircleX : CircleDot);
+	const label = $derived(state === "closed" ? "Closed" : "Open");
+</script>
+
+<span class={issueStatePill({ state, class: className })}>
+	<Icon class="size-3 shrink-0" aria-hidden="true" />
+	{label}
+</span>
diff --git a/web/src/lib/components/repo/issues/IssueToolbar.svelte b/web/src/lib/components/repo/issues/IssueToolbar.svelte
new file mode 100644
index 00000000..dfbf11c4
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueToolbar.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import CircleDot from "$icon/circle-dot";
+	import CircleX from "$icon/circle-x";
+	import Plus from "$icon/plus";
+	import Search from "$icon/search";
+	import Button from "$lib/components/ui/Button.svelte";
+	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
+
+	interface Props {
+		ownerHandle: string;
+		repoName: string;
+		state: "open" | "closed";
+		openCount: number;
+		closedCount: number;
+	}
+
+	let { ownerHandle, repoName, state, openCount, closedCount }: Props = $props();
+
+	const base = $derived(`/${ownerHandle}/${repoName}/issues`);
+</script>
+
+<div class="grid grid-cols-1 gap-2 sm:grid-cols-[1fr_auto_auto]">
+	<form class="flex" method="GET">
+		<!-- TODO: wire up search query submission -->
+		<div class="relative flex w-full items-center">
+			<Search
+				class="pointer-events-none absolute left-2 size-4 text-foreground-placeholder"
+				aria-hidden="true"
+			/>
+			<input
+				class="h-full w-full rounded border border-border-default bg-background-default py-1.5 pr-2 pl-8 text-sm outline-none focus:border-border-strong"
+				type="text"
+				name="q"
+				placeholder="Search issues..."
+				aria-label="Search issues"
+			/>
+		</div>
+	</form>
+
+	<ButtonGroup>
+		<!-- TODO: wire up state filter navigation -->
+		<Button
+			href={resolve(`${base}?state=open` as "/")}
+			variant={state === "open" ? "default" : "ghost"}
+			size="sm"
+			icon={CircleDot}
+		>
+			<span class="hidden sm:inline">{openCount}</span>
+			Open
+		</Button>
+		<Button
+			href={resolve(`${base}?state=closed` as "/")}
+			variant={state === "closed" ? "default" : "ghost"}
+			size="sm"
+			icon={CircleX}
+		>
+			<span class="hidden sm:inline">{closedCount}</span>
+			Closed
+		</Button>
+	</ButtonGroup>
+
+	<!-- TODO: point at the new issue route once it exists -->
+	<Button href={resolve(`${base}/new` as "/")} variant="primary" size="sm" icon={Plus}>New</Button>
+</div>
diff --git a/web/src/lib/components/repo/types.ts b/web/src/lib/components/repo/types.ts
index 142dc2eb..54494677 100644
--- a/web/src/lib/components/repo/types.ts
+++ b/web/src/lib/components/repo/types.ts
@@ -38,3 +38,13 @@ export interface LanguageSlice {
 	percentage: number;
 	share: number;
 }
+
+export interface IssueSummary {
+	id: number;
+	title: string;
+	state: "open" | "closed";
+	authorHandle: string;
+	authorDid: string;
+	createdAt: string;
+	commentCount: number;
+}
diff --git a/web/src/routes/[handle]/[repo]/issues/+page.svelte b/web/src/routes/[handle]/[repo]/issues/+page.svelte
new file mode 100644
index 00000000..4c80616e
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/issues/+page.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import IssueList from "$lib/components/repo/issues/IssueList.svelte";
+	import IssueToolbar from "$lib/components/repo/issues/IssueToolbar.svelte";
+
+	let { data } = $props();
+</script>
+
+<section class="mt-2 rounded bg-background-default px-6 py-4 text-foreground-default shadow-sm">
+	<IssueToolbar
+		ownerHandle={data.repo.ownerHandle}
+		repoName={data.repo.name}
+		state={data.state}
+		openCount={data.openCount}
+		closedCount={data.closedCount}
+	/>
+</section>
+
+<div class="mt-2">
+	<IssueList ownerHandle={data.repo.ownerHandle} repoName={data.repo.name} issues={data.issues} />
+</div>
diff --git a/web/src/routes/[handle]/[repo]/issues/+page.ts b/web/src/routes/[handle]/[repo]/issues/+page.ts
new file mode 100644
index 00000000..c5ae7b27
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/issues/+page.ts
@@ -0,0 +1,18 @@
+import type { IssueSummary } from "$lib/components/repo/types";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async (event) => {
+	const parent = await event.parent();
+	const state = event.url.searchParams.get("state") === "closed" ? "closed" : "open";
+
+	// TODO: fetch via sh.tangled.repo.listIssues and resolve author handles
+	const issues: IssueSummary[] = [];
+	const closedCount = 0;
+
+	return {
+		state: state as "open" | "closed",
+		issues,
+		openCount: parent.counts.issues,
+		closedCount
+	};
+};
-- 
2.51.2