fix: improve look, add icons and filter out PRs from issues

Author: WarningImHack3r

src/lib/components/GHBadge.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { ClassValue } from "svelte/elements";
 	import {
 		CircleCheck,
 		CircleDot,
@@ -22,38 +23,45 @@
 		  };
 
 	type Props = {
+		mode: "regular" | "minimal";
 		type: PropsObj["type"];
 		status: PropsObj["status"];
+		class?: ClassValue;
 	};
 
-	let { type, status }: Props = $props();
+	let { mode = "regular", type, status, class: className = undefined }: Props = $props();
 
 	let icon = $state<typeof Icon>();
 	let label = $state("");
-	let color = $state("");
+	let textColor = $state("");
+	let bgColor = $state("");
 
 	switch (type) {
 		case "pull":
 			switch (status) {
 				case "draft":
 					icon = GitPullRequestDraft;
 					label = "Draft";
-					color = "bg-neutral-500";
+					textColor = "text-neutral-500";
+					bgColor = "bg-neutral-500";
 					break;
 				case "open":
 					icon = GitPullRequestArrow;
 					label = "Open";
-					color = "bg-green-600";
+					textColor = "text-green-600";
+					bgColor = "bg-green-600";
 					break;
 				case "merged":
 					icon = GitMerge;
 					label = "Merged";
-					color = "bg-purple-500";
+					textColor = "text-purple-500";
+					bgColor = "bg-purple-500";
 					break;
 				case "closed":
 					icon = GitPullRequestClosed;
 					label = "Closed";
-					color = "bg-red-500";
+					textColor = "text-red-500";
+					bgColor = "bg-red-500";
 					break;
 			}
 			break;
@@ -62,26 +70,34 @@
 				case "open":
 					icon = CircleDot;
 					label = "Open";
-					color = "bg-green-600";
+					textColor = "text-green-600";
+					bgColor = "bg-green-600";
 					break;
 				case "closed":
 					icon = CircleSlash;
 					label = "Closed";
-					color = "bg-neutral-500";
+					textColor = "text-neutral-500";
+					bgColor = "bg-neutral-500";
 					break;
 				case "solved":
 					icon = CircleCheck;
 					label = "Solved";
-					color = "bg-purple-500";
+					textColor = "text-purple-500";
+					bgColor = "bg-purple-500";
 					break;
 			}
 	}
 </script>
 
-<div class="flex items-center rounded-full px-4 py-2 text-white {color}">
-	{#if icon}
-		{@const SvelteComponent = icon}
-		<SvelteComponent class="mr-2 size-5" />
-	{/if}
-	<span class="font-semibold">{label}</span>
-</div>
+{#if mode === "regular"}
+	<div class={["flex items-center rounded-full px-4 py-2 text-white", bgColor, className]}>
+		{#if icon}
+			{@const SvelteComponent = icon}
+			<SvelteComponent class="mr-2 size-5" />
+		{/if}
+		<span class="font-semibold">{label}</span>
+	</div>
+{:else if icon}
+	{@const Component = icon}
+	<Component class={["size-6", textColor, className]} />
+{/if}

src/routes/tracker/[org]/[repo]/+page.server.ts

@@ -44,7 +44,9 @@ export async function load({ params }) {
 			.toSorted((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
 			.slice(0, 10),
 		issues: unfilteredIssues
-			?.filter(({ user }) => membersNames.includes(user?.login ?? ""))
+			?.filter(
+				({ user, pull_request }) => !pull_request && membersNames.includes(user?.login ?? "")
+			)
 			.toSorted((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
 			.slice(0, 10)
 	};

src/routes/tracker/[org]/[repo]/+page.svelte

@@ -2,6 +2,7 @@
 	import { Transparent } from "svelte-exmarkdown";
 	import { Separator } from "$lib/components/ui/separator";
 	import MarkdownRenderer from "$lib/components/MarkdownRenderer.svelte";
+	import GHBadge from "$lib/components/GHBadge.svelte";
 
 	let { data } = $props();
 
@@ -22,7 +23,7 @@
 {#snippet list(title: string, items: Item[], itemToLink: (item: any) => string)}
 	<!-- {#snippet list<T extends Item>(title: string, items: T[], itemToLink: (item: T) => string)} -->
 	<div>
-		<h2 class="mt-12 mb-2 text-2xl font-semibold tracking-tight">{title}</h2>
+		<h2 class="mt-12 mb-2 text-3xl font-semibold tracking-tight">{title}</h2>
 		{#each items as item, i (item.id)}
 			{#if i > 0}
 				<Separator class="my-1" />
@@ -36,40 +37,58 @@
 	{@const date = new Date(item.created_at)}
 	<a
 		href={link}
-		class="flex flex-col rounded-xl px-4 py-3 transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800"
+		class="flex items-center gap-6 rounded-xl px-4 py-3 transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800"
 	>
-		<div class="flex justify-between">
-			<span>
-				<MarkdownRenderer markdown={item.title} inline class="text-foreground" />
-				<span class="text-muted-foreground">#{item.number}</span>
-			</span>
-			<span>
-				{#if isNew(date)}
-					{daysAgo(date)} •
-				{/if}
-				{new Intl.DateTimeFormat("en", {
-					dateStyle: "medium"
-				}).format(date)}
-			</span>
-		</div>
-		<MarkdownRenderer
-			markdown={item.body || "_No description_"}
-			inline
-			parseRawHtml
-			class="line-clamp-2 max-w-full text-base text-muted-foreground"
-			additionalPlugins={[
-				{
-					renderer: {
-						h1: "h4",
-						h2: "h4",
-						h3: "h4",
-						pre: Transparent,
-						a: Transparent,
-						ul: Transparent
-					}
-				}
-			]}
+		<GHBadge
+			mode="minimal"
+			type={"base" in item || "pull_request" in item ? "pull" : "issue"}
+			status={item.state === "closed"
+				? "merged" in item
+					? item.merged
+						? "merged"
+						: "closed"
+					: "state_reason" in item && item.state_reason === "completed"
+						? "solved"
+						: "closed"
+				: item.draft
+					? "draft"
+					: "open"}
+			class="shrink-0"
 		/>
+		<div class="flex w-full flex-col">
+			<div class="flex justify-between">
+				<span>
+					<MarkdownRenderer markdown={item.title} inline class="text-foreground" />
+					<span class="text-muted-foreground">#{item.number}</span>
+				</span>
+				<span>
+					{#if isNew(date)}
+						{daysAgo(date)} •
+					{/if}
+					{new Intl.DateTimeFormat("en", {
+						dateStyle: "medium"
+					}).format(date)}
+				</span>
+			</div>
+			<MarkdownRenderer
+				markdown={item.body || "_No description provided_"}
+				inline
+				parseRawHtml
+				class="line-clamp-2 max-w-full text-base text-muted-foreground"
+				additionalPlugins={[
+					{
+						renderer: {
+							h1: "h4",
+							h2: "h4",
+							h3: "h2",
+							pre: Transparent,
+							a: Transparent,
+							ul: Transparent
+						}
+					}
+				]}
+			/>
+		</div>
 	</a>
 {/snippet}