From 27272daf1907ae6e5cda2e9cb330bcc7e2dff09e Mon Sep 17 00:00:00 2001
From: Asher Gomez <ashersaupingomez@gmail.com>
Date: Wed, 20 Nov 2024 09:31:34 +1100
Subject: [PATCH] feat: package version in scope and search result lists (#528)

Closes #421

![localhost_8000_packages_search=x
(1)](https://github.com/jsr-io/jsr/assets/29347852/078722b3-d830-451e-9211-470ad11e74f6)

---------

Co-authored-by: Josh Collinsworth <joshuajcollinsworth@gmail.com>
---
 frontend/components/PackageHit.tsx | 63 ++++++++++++++++++------------
 1 file changed, 37 insertions(+), 26 deletions(-)

diff --git a/frontend/components/PackageHit.tsx b/frontend/components/PackageHit.tsx
index 072514c3..5c635eb3 100644
--- a/frontend/components/PackageHit.tsx
+++ b/frontend/components/PackageHit.tsx
@@ -1,48 +1,59 @@
 // Copyright 2024 the JSR authors. All rights reserved. MIT license.
 import type { OramaPackageHit } from "../util.ts";
-import type { Package } from "../utils/api_types.ts";
+import type { Package, RuntimeCompat } from "../utils/api_types.ts";
 import { getScoreBgColorClass } from "../utils/score_ring_color.ts";
 import type { ListDisplayItem } from "./List.tsx";
 import { RuntimeCompatIndicator } from "./RuntimeCompatIndicator.tsx";
 
+const runtimeCompatExists = (compat: RuntimeCompat) => {
+  return compat?.browser || compat?.deno || compat?.node || compat?.workerd ||
+    compat?.bun;
+};
+
 export function PackageHit(pkg: OramaPackageHit | Package): ListDisplayItem {
   return {
     href: `/@${pkg.scope}/${pkg.name}`,
-    parentClass: ("isArchived" in pkg && pkg.isArchived)
-      ? "bg-red-100"
-      : undefined,
     content: (
       <div class="grow-1 w-full flex flex-col md:flex-row gap-2 justify-between">
         <div class="grow-1">
-          <div class="text-jsr-cyan-700 font-semibold">
-            {`@${pkg.scope}/${pkg.name}`}
+          <div class="flex flex-wrap items-baseline gap-2">
+            <span class="text-jsr-cyan-700 font-semibold">
+              {`@${pkg.scope}/${pkg.name}`}
+            </span>
+            {(pkg as Package).latestVersion && (
+              <div class="text-jsr-gray-500 max-w-20 truncate font-semibold text-sm">
+                {`v${(pkg as Package).latestVersion}`}
+              </div>
+            )}
           </div>
-          <div class="text-sm text-jsr-gray-600">
+          <div class="text-sm text-jsr-gray-500">
             {pkg.description}
           </div>
         </div>
 
-        <div class="flex items-center gap-4">
-          <RuntimeCompatIndicator
-            runtimeCompat={pkg.runtimeCompat}
-            hideUnknown
-            compact
-          />
+        {(runtimeCompatExists(pkg.runtimeCompat) || pkg.score !== null) && (
+          <div class="flex items-center gap-4">
+            <RuntimeCompatIndicator
+              runtimeCompat={pkg.runtimeCompat}
+              hideUnknown
+              compact
+            />
 
-          {pkg.score !== null && (
-            <div
-              class={`rounded-full aspect-square p-0.5 ${
-                getScoreBgColorClass(pkg.score)
-              }`}
-              style={`background-image: conic-gradient(transparent, transparent ${pkg.score}%, #e7e8e8 ${pkg.score}%)`}
-              title="Package score"
-            >
-              <div class="rounded-full aspect-square bg-white text-xs flex items-center justify-center font-semibold min-w-6">
-                {pkg.score}
+            {pkg.score !== null && (
+              <div
+                class={`rounded-full aspect-square p-0.5 ${
+                  getScoreBgColorClass(pkg.score)
+                }`}
+                style={`background-image: conic-gradient(transparent, transparent ${pkg.score}%, #e7e8e8 ${pkg.score}%)`}
+                title="Package score"
+              >
+                <div class="rounded-full aspect-square bg-white text-xs flex items-center justify-center font-semibold min-w-6">
+                  {pkg.score}
+                </div>
               </div>
-            </div>
-          )}
-        </div>
+            )}
+          </div>
+        )}
       </div>
     ),
   };