From 2af4f73d51a0318264f75d149feb4fa75f2a445d Mon Sep 17 00:00:00 2001
From: Nathan Smith <nathan@nathan-smith.org>
Date: Sun, 30 Jun 2024 15:57:14 -0400
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20#119=20Add=20Labels=20colum?=
 =?UTF-8?q?n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes: #119
---
 src/query/column/base.ts | 18 ++++++++++++++++++
 styles.css               | 30 +++++++++++++++++++++++++++++-
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/query/column/base.ts b/src/query/column/base.ts
index e795106..49d9cc2 100644
--- a/src/query/column/base.ts
+++ b/src/query/column/base.ts
@@ -80,4 +80,22 @@ export const CommonIssuePRColumns: ColumnsMap = {
 			DateCell(row.closed_at, el);
 		},
 	},
+	labels: {
+		header: "Labels",
+		cell: (row, el) => {
+			const wrapper = el.createDiv({ cls: "github-link-table-labels" });
+			for (const label of row.labels ?? []) {
+				// When would the label just be a string?
+				if (typeof label !== "string") {
+					const labelEl = wrapper.createSpan({
+						cls: "github-link-table-label",
+						text: label.name,
+					});
+					if (label.color) {
+						labelEl.style.setProperty("--status-color", `#${label.color}`);
+					}
+				}
+			}
+		},
+	},
 };
diff --git a/styles.css b/styles.css
index a7a1e55..24996a7 100644
--- a/styles.css
+++ b/styles.css
@@ -62,6 +62,7 @@ body.theme-light {
 	--gh-color-primer-border-contrast: rgba(31, 35, 40, 0.1);
 	--gh-color-primer-shadow-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.25);
 	--gh-color-primer-shadow-inset: inset 0 1px 0 rgba(208, 215, 222, 0.2);
+	--status-color: var(--gh-color-canvas-subtle);
 }
 
 body.theme-dark {
@@ -310,6 +311,10 @@ table.github-link-table {
 	font-weight: var(--font-bold);
 }
 
+.github-link-table td {
+	vertical-align: middle;
+}
+
 .github-link-table a {
 	text-decoration: none;
 }
@@ -323,8 +328,31 @@ table.github-link-table {
 }
 
 .github-link-table-status,
-.github-link-table-author {
+.github-link-table-author,
+.github-link-table-labels {
 	display: flex;
 	gap: 6px;
 	align-items: center;
 }
+
+.github-link-table-labels {
+	height: 100%;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+
+.github-link-table-label {
+	border-radius: 2em;
+	font-size: 0.8em;
+	padding: 0 6px;
+	border: 1px solid var(--status-color);
+}
+
+body.theme-light .github-link-table .github-link-table-labels .github-link-table-label {
+	background-color: color-mix(in srgb, var(--status-color) 50%, transparent);
+	color: var(--text-normal);
+}
+body.theme-dark .github-link-table .github-link-table-labels .github-link-table-label {
+	background-color: color-mix(in srgb, var(--status-color) 20%, transparent);
+	color: var(--status-color);
+}