Frontend QA: show currently sorted heuristic percentages in page list (#1720)

Closes #1690

Swaps out the "+n" number for a percentage when sorting by percentage
values

frontend/src/features/qa/page-list/helpers/severity.ts

@@ -1,3 +1,4 @@
+import { tw } from "@/utils/tailwind";
 import { cached } from "@/utils/weakCache";
 
 export type Severity = "severe" | "moderate" | "good" | null;
@@ -22,3 +23,16 @@ export const severityFromResourceCounts = cached(
     return "good";
   },
 );
+
+export const textColorFromSeverity = cached((severity: Severity) => {
+  switch (severity) {
+    case "good":
+      return tw`text-green-600`;
+    case "moderate":
+      return tw`text-yellow-600`;
+    case "severe":
+      return tw`text-red-600`;
+    default:
+      return "";
+  }
+});

frontend/src/features/qa/page-list/ui/page-details.ts

@@ -11,11 +11,11 @@ import {
 import type { ArchivedItemQAPage } from "@/types/qa";
 import { tw } from "@/utils/tailwind";
 
-export function formatPercentage(n: number) {
+export function formatPercentage(n: number, fractionDigits = 2) {
   if (Number.isNaN(n)) {
     return "n/a";
   }
-  return (n * 100).toFixed(2).replace(/[.,]00$/, "");
+  return (n * 100).toFixed(fractionDigits).replace(/[.,]00$/, "");
 }
 
 export const pageDetails = (page: ArchivedItemQAPage) =>

frontend/src/features/qa/page-list/ui/page.ts

@@ -1,6 +1,7 @@
 import { localized } from "@lit/localize";
 import type { SlTooltip } from "@shoelace-style/shoelace";
-import { html, nothing, type PropertyValues } from "lit";
+import clsx from "clsx";
+import { html, type PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
 
 import {
@@ -8,11 +9,12 @@ import {
   issueCounts,
   maxSeverity,
   severityFromMatch,
+  textColorFromSeverity,
 } from "../helpers";
 import { approvalFromPage } from "../helpers/approval";
 
 import { animateTo, shimKeyframesHeightAuto } from "./animate";
-import { pageDetails } from "./page-details";
+import { formatPercentage, pageDetails } from "./page-details";
 
 import { TailwindElement } from "@/classes/TailwindElement";
 import { type ArchivedItemQAPage } from "@/types/qa";
@@ -142,15 +144,28 @@ export class QaPage extends TailwindElement {
               class="absolute -left-4 top-[50%] flex w-8 translate-y-[-50%] flex-col place-items-center gap-1 rounded-full border border-gray-300 bg-neutral-0 p-2 leading-[14px] shadow transition-transform hover:scale-110"
             >
               ${iconFor(statusIcon)}
-              ${severe > 0
-                ? html`<span class="text-[10px] font-semibold text-red-600"
-                    >+${severe}</span
+              ${this.statusField === "screenshotMatch" ||
+              this.statusField === "textMatch"
+                ? html`<span
+                    class="${clsx(
+                      "text-[10px] font-semibold tracking-tighter tabular-nums",
+                      textColorFromSeverity(
+                        severityFromMatch(page.qa[this.statusField]),
+                      ),
+                    )}"
+                    >${formatPercentage(
+                      page.qa[this.statusField] ?? 0,
+                      0,
+                    )}%</span
                   >`
-                : moderate > 0
-                  ? html`<span class="text-[10px] font-semibold text-yellow-600"
-                      >+${moderate}</span
-                    >`
-                  : nothing}
+                : html`<span
+                    class="${clsx(
+                      "text-[10px] font-semibold",
+                      textColorFromSeverity(severe > 0 ? "severe" : "moderate"),
+                      severe === 0 && moderate === 0 && "hidden",
+                    )}"
+                    >+${severe || moderate}</span
+                  >`}
               ${page.notes?.[0] &&
               html`<sl-icon
                 name="chat-square-text-fill"