From 57ffdcf9f003d5bb2b85fa0ed2934ea6933ea222 Mon Sep 17 00:00:00 2001
From: Tom Konidas <tom@tomkonidas.com>
Date: Sun, 23 Jul 2023 10:37:00 -0400
Subject: [PATCH] Add Score badges (#348)

---
 lib/plexus_web/components/core_components.ex  | 31 +++++++++++++++++++
 .../live/admin/app_live/index.html.heex       | 12 +++----
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/lib/plexus_web/components/core_components.ex b/lib/plexus_web/components/core_components.ex
index 6558fda1..c67736e2 100644
--- a/lib/plexus_web/components/core_components.ex
+++ b/lib/plexus_web/components/core_components.ex
@@ -593,6 +593,37 @@ defmodule PlexusWeb.CoreComponents do
     """
   end
 
+  attr :score, Plexus.Schemas.Score, required: true
+
+  def badge(%{score: %Plexus.Schemas.Score{}} = assigns) do
+    level =
+      case floor(assigns.score.numerator) do
+        0 -> :unrated
+        1 -> :borked
+        2 -> :bronze
+        3 -> :silver
+        4 -> :gold
+      end
+
+    assigns =
+      assigns
+      |> assign(:level, level)
+      |> assign(:title, Phoenix.Naming.humanize(level))
+
+    ~H"""
+    <span class={[
+      "inline-flex items-center rounded-md px-2 py-1 text-xs font-medium",
+      @level == :unrated && "bg-gray-100 text-gray-800",
+      @level == :borked && "bg-red-800 text-red-100",
+      @level == :bronze && "bg-amber-800 text-amber-100",
+      @level == :silver && "bg-slate-300 text-slate-800",
+      @level == :gold && "bg-amber-200 text-amber-800"
+    ]}>
+      <%= @title %>
+    </span>
+    """
+  end
+
   ## JS Commands
 
   def show(js \\ %JS{}, selector) do
diff --git a/lib/plexus_web/live/admin/app_live/index.html.heex b/lib/plexus_web/live/admin/app_live/index.html.heex
index 9d37be55..5febb7fd 100644
--- a/lib/plexus_web/live/admin/app_live/index.html.heex
+++ b/lib/plexus_web/live/admin/app_live/index.html.heex
@@ -13,11 +13,11 @@
   row_click={fn {_id, app} -> JS.navigate(~p"/admin/apps/#{app}") end}
 >
   <:col :let={{_id, app}} label="Icon">
-    <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden">
+    <div class="aspect-h-1 aspect-w-1 w-16 h-16 overflow-hidden">
       <img
         src={app.icon_url}
         alt={app.name <> " Icon"}
-        class="h-16 w-16 object-cover object-center"
+        class="h-full w-full object-cover object-center"
       />
     </div>
   </:col>
@@ -28,14 +28,10 @@
     <p class="text-sm text-gray-700"><%= app.package %></p>
   </:col>
   <:col :let={{_dom_id, %{scores: [native_score, _micro_g_score]}}} label="Native">
-    <p class="text-sm text-gray-700">
-      <%= native_score.numerator %>/<%= native_score.denominator %>
-    </p>
+    <.badge score={native_score} />
   </:col>
   <:col :let={{_dom_id, %{scores: [_native_score, micro_g_score]}}} label="MicroG">
-    <p class="text-sm text-gray-700">
-      <%= micro_g_score.numerator %>/<%= micro_g_score.denominator %>
-    </p>
+    <.badge score={micro_g_score} />
   </:col>
   <:action :let={{_dom_id, app}}>
     <div class="sr-only">