feat: show bug status as leading icon

Amolith and Crush created 2 weeks ago

Implements: bug-c5d4e47
Implements: bug-dea9f51
Co-Authored-By: Crush <[e-mail]>

Change summary

pkg/web/static/overrides.css | 16 ++++++++++++++++
pkg/web/templates/bug.html   | 14 +++++++++++++-
pkg/web/templates/bugs.html  | 13 ++++++++++++-
3 files changed, 41 insertions(+), 2 deletions(-)

Detailed changes

pkg/web/static/overrides.css

@@ -127,6 +127,22 @@ section[aria-labelledby="diff-heading"] article h4:focus-within .secondary {
   margin: 1rem 0;
 }
 
+.bug-status-icon {
+	display: inline-block;
+	width: 1em;
+	height: 1em;
+	vertical-align: middle;
+	margin-right: 0.25rem;
+}
+
+.bug-status-icon-open {
+	stroke: var(--pico-form-element-valid-border-color);
+}
+
+.bug-status-icon-closed {
+	stroke: var(--pico-secondary-border);
+}
+
 .muted {
   color: var(--pico-muted-color);
 }

pkg/web/templates/bug.html

@@ -14,7 +14,19 @@
   <article id="{{.ID}}" aria-labelledby="timeline-item-{{.ID}}">
     {{if eq .Type "create"}}
     <header>
-      <h4 id="timeline-item-{{.ID}}">{{$.Title}} <span class="badge badge-{{$.Status}}">{{$.Status}}</span></h4>
+      <h4 id="timeline-item-{{.ID}}">
+        {{if eq $.Status "open"}}
+        <svg class="bug-status-icon bug-status-icon-open" aria-label="Open bug" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke-width="2">
+          <circle cx="8" cy="8" r="6" />
+        </svg>
+        {{else if eq $.Status "closed"}}
+        <svg class="bug-status-icon bug-status-icon-closed" aria-label="Closed bug" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke-width="2">
+          <circle cx="8" cy="8" r="6" />
+          <path d="M5 8 l2 2 l4 -4" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+        {{end}}
+        {{$.Title}}
+      </h4>
     </header>
     {{if .Message}}
     {{.Message}}

pkg/web/templates/bugs.html

@@ -14,9 +14,20 @@
   {{range .Bugs}}
   <article aria-labelledby="bug-{{.ID}}">
     <h3 id="bug-{{.ID}}">
+      {{if eq $.Status "all"}}
+      {{if eq .Status "open"}}
+      <svg class="bug-status-icon bug-status-icon-open" aria-label="Open bug" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke-width="2">
+        <circle cx="8" cy="8" r="6" />
+      </svg>
+      {{else if eq .Status "closed"}}
+      <svg class="bug-status-icon bug-status-icon-closed" aria-label="Closed bug" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke-width="2">
+        <circle cx="8" cy="8" r="6" />
+        <path d="M5 8 l2 2 l4 -4" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+      {{end}}
+      {{end}}
       <code><a href="/{{$.Repo.Name}}/bug/{{.FullID}}">{{.ID}}</a></code>
       {{.Title}}
-      <span class="badge badge-{{.Status}}">{{.Status}}</span>
     </h3>
     <footer>
       by <strong>{{.Author}}</strong> on