From 84f7d01d34672e87ec4dbfb8f9e741384511b150 Mon Sep 17 00:00:00 2001
From: KenwoodFox <31870999+KenwoodFox@users.noreply.github.com>
Date: Fri, 10 Jan 2025 15:30:52 -0500
Subject: [PATCH] Adds Labels to the HUD (#5)

---
 app/__init__.py          |  8 +++++
 app/static/style.css     | 50 +++++++++++++++++----------
 app/templates/index.html | 73 +++++++++++++++++++++++-----------------
 3 files changed, 83 insertions(+), 48 deletions(-)

diff --git a/app/__init__.py b/app/__init__.py
index 60a4e0f..8212d2a 100644
--- a/app/__init__.py
+++ b/app/__init__.py
@@ -94,6 +94,10 @@ def fetch_github_data():
                             if issue.assignees
                             else []
                         ),
+                        "labels": [
+                            {"name": label.name, "color": f"#{label.color}"}
+                            for label in issue.labels
+                        ],
                         "additions": 0,
                         "deletions": 0,
                     }
@@ -119,6 +123,10 @@ def fetch_github_data():
                             if pr.assignees
                             else []
                         ),
+                        "labels": [
+                            {"name": label.name, "color": f"#{label.color}"}
+                            for label in pr.labels
+                        ],
                         "additions": pr_details.additions,
                         "deletions": pr_details.deletions,
                     }
diff --git a/app/static/style.css b/app/static/style.css
index 4b10f72..446a2ee 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -138,6 +138,7 @@ body {
 /* Each Card */
 .card {
   display: flex;
+  flex-direction: row;
   background: #333;
   border: 1px solid #555;
   padding: 5px;
@@ -146,20 +147,11 @@ body {
   min-height: 60px;
 }
 
-/* ========================= */
-/* Card Left (Number Column) */
-/* ========================= */
+/* ===================== */
+/* Number Box (leftmost) */
+/* ===================== */
 
-.card-left {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  flex: 0 0 100px; /* Fixed width */
-}
-
-.number {
+.number-box {
   font-size: 3em;
   font-weight: bold;
   text-align: center;
@@ -173,7 +165,7 @@ body {
   height: 100%;
 }
 
-.number .repo-name {
+.number-box .repo-name {
   font-weight: normal;
   position: absolute;
   bottom: 0px;
@@ -186,11 +178,11 @@ body {
   font-size: min(0.3em, 4vw);
 }
 
-/* ========================= */
-/* Card Right (Content)      */
-/* ========================= */
+/* ========= */
+/* Card Data */
+/* ========= */
 
-.card-right {
+.card-data {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -268,6 +260,28 @@ body {
   color: #f44336;
 }
 
+/* ====== */
+/* Labels */
+/* ====== */
+
+.card-labels {
+  flex: 2;
+  gap: 5px;
+  text-align: center;
+}
+
+.card-labels .issue-label {
+  display: inline-block;
+  padding: 3px 8px;
+  margin: 2px;
+  font-size: 0.85em;
+  font-weight: bold;
+  color: #fff;
+  border-radius: 12px; /* Rounded rectangle */
+  text-align: center;
+  white-space: nowrap; /* Prevent text wrapping */
+}
+
 /* ========================= */
 /* Refresh Indicator         */
 /* ========================= */
diff --git a/app/templates/index.html b/app/templates/index.html
index c4278dd..c6d1eed 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -40,16 +40,14 @@ <h2>Issues ({{ issues_count }})</h2>
             <div class="card-container">
                 {% for issue in issues %}
                 <div class="card">
-                    <!-- Left Column: Number & Repo Name -->
-                    <div class="card-left">
-                        <div class="number">
-                            <div class="card-number">#{{ issue.number }}</div>
-                            <div class="repo-name">{{ issue.repo_name }}</div>
-                        </div>
+                    <!-- Number & Repo Name -->
+                    <div class="number-box">
+                        <div class="card-number">#{{ issue.number }}</div>
+                        <div class="repo-name">{{ issue.repo_name }}</div>
                     </div>
 
-                    <!-- Right Column: Title, Meta, Assignees -->
-                    <div class="card-right">
+                    <!-- Data Column: Title, Meta, Assignees -->
+                    <div class="card-data">
                         <div class="card-content">
                             <span class="card-title">{{ issue.title }}</span>
                             <span class="card-meta">Opened by {{ issue.user }}</span>
@@ -62,6 +60,15 @@ <h2>Issues ({{ issues_count }})</h2>
                         </div>
                         {% endif %}
                     </div>
+
+                    <!-- Labels Column -->
+                    <div class="card-labels">
+                        {% for label in issue.labels %}
+                        <div class="issue-label" style="background-color: {{ label.color }};">
+                            {{ label.name }}
+                        </div>
+                        {% endfor %}
+                    </div>
                 </div>
                 {% endfor %}
             </div>
@@ -73,32 +80,38 @@ <h2>Pull Requests ({{ pull_requests_count }})</h2>
             <div class="card-container">
                 {% for pr in pull_requests %}
                 <div class="card">
-                    <!-- Left Column: Number & Repo Name -->
-                    <div class="card-left">
-                        <div class="number">
-                            <div class="card-number">#{{ pr.number }}</div>
-                            <div class="repo-name">{{ pr.repo_name }}</div>
-                        </div>
+                    <!-- Number & Repo Name -->
+                    <div class="number-box">
+                        <div class="card-number">#{{ pr.number }}</div>
+                        <div class="repo-name">{{ pr.repo_name }}</div>
                     </div>
 
-                    <!-- Right Column: Title, Meta, Changes -->
-                    <div class="card-right">
-                        <div class="card-content">
-                            <span class="card-title">{{ pr.title }}</span>
-                            <span class="card-meta">Opened by {{ pr.user }}</span>
-                            {% if pr.assignees %}
-                            <div class="card-assignee">
-                                {% for assignee in pr.assignees %}
-                                <div class="assignee-name">{{ assignee }}</div>
-                                {% endfor %}
-                            </div>
-                            {% endif %}
+                    <!-- Title, Meta, Changes -->
+                    <div class="card-data">
+                        <span class="card-title">{{ pr.title }}</span>
+                        <span class="card-meta">Opened by {{ pr.user }}</span>
+                        {% if pr.assignees %}
+                        <div class="card-assignee">
+                            {% for assignee in pr.assignees %}
+                            <div class="assignee-name">{{ assignee }}</div>
+                            {% endfor %}
                         </div>
-                        <div class="card-changes">
-                            <span class="changes-additions">+{{ pr.additions }}</span>
-                            <span class="changes-divider">/</span>
-                            <span class="changes-deletions">-{{ pr.deletions }}</span>
+                        {% endif %}
+                    </div>
+
+                    <!-- Labels Column -->
+                    <div class="card-labels">
+                        {% for label in pr.labels %}
+                        <div class="issue-label" style="background-color: {{ label.color }};">
+                            {{ label.name }}
                         </div>
+                        {% endfor %}
+                    </div>
+
+                    <div class="card-changes">
+                        <span class="changes-additions">+{{ pr.additions }}</span>
+                        <span class="changes-divider">/</span>
+                        <span class="changes-deletions">-{{ pr.deletions }}</span>
                     </div>
                 </div>
                 {% endfor %}