From 5fd1ca6fec60eb459abb4514cf713ba984644a9f Mon Sep 17 00:00:00 2001
From: Taylan Aydinli <taylanaydinli@gmail.com>
Date: Wed, 4 Mar 2026 20:51:19 +0100
Subject: [PATCH] feat(site): redesign pack cards with three-zone layout

Restructure PackCard into title bar, flexible content zone, and status
bar for consistent card heights. Add iconOnly mode to AudioPlayer,
dateUpdated field to pack data, and remove redundant preview link.
---
 site/scripts/generate-pack-data.ts     |   7 +-
 site/src/components/ui/AudioPlayer.tsx |  19 ++++
 site/src/components/ui/PackCard.tsx    | 144 ++++++++++++++-----------
 site/src/lib/types.ts                  |   1 +
 4 files changed, 107 insertions(+), 64 deletions(-)

diff --git a/site/scripts/generate-pack-data.ts b/site/scripts/generate-pack-data.ts
index 47f19ce..4152707 100644
--- a/site/scripts/generate-pack-data.ts
+++ b/site/scripts/generate-pack-data.ts
@@ -137,6 +137,7 @@ interface RegistryEntry {
   tags?: string[];
   quality?: "gold" | "silver" | "flagged" | "unreviewed";
   added?: string;
+  updated?: string;
 }
 
 interface PackData {
@@ -159,6 +160,7 @@ interface PackData {
   sourceRepo?: string;
   sourcePath?: string;
   dateAdded?: string;
+  dateUpdated?: string;
 }
 
 // ── Config ──────────────────────────────────────────────────────────────────
@@ -179,7 +181,7 @@ const REGISTRY_INDEX_URL =
 // ── Helpers ─────────────────────────────────────────────────────────────────
 // audioBase should be the URL of the directory containing sounds/
 // e.g. "https://raw.../og-packs/v1.0.0/peon" or "https://raw.../mypack/v1.0.0"
-function processManifest(manifest: Manifest, packName: string, audioBase: string, trustTier: string = "community", registryTags?: string[], sourceRepo?: string, sourcePath?: string, quality?: "gold" | "silver" | "flagged" | "unreviewed", dateAdded?: string): PackData {
+function processManifest(manifest: Manifest, packName: string, audioBase: string, trustTier: string = "community", registryTags?: string[], sourceRepo?: string, sourcePath?: string, quality?: "gold" | "silver" | "flagged" | "unreviewed", dateAdded?: string, dateUpdated?: string): PackData {
   const categories: PackData["categories"] = [];
   const previewSounds: PackData["previewSounds"] = [];
   let soundCount = 0;
@@ -224,6 +226,7 @@ function processManifest(manifest: Manifest, packName: string, audioBase: string
     sourceRepo,
     sourcePath,
     dateAdded,
+    dateUpdated,
   };
 }
 
@@ -305,7 +308,7 @@ async function generateFromRemote(): Promise<PackData[]> {
           ? `${rawBase}/${entry.source_path}`
           : rawBase;
 
-        return processManifest(manifest, packName, audioBase, entry.trust_tier || "community", entry.tags, entry.source_repo, entry.source_path || undefined, entry.quality, entry.added);
+        return processManifest(manifest, packName, audioBase, entry.trust_tier || "community", entry.tags, entry.source_repo, entry.source_path || undefined, entry.quality, entry.added, entry.updated);
       })
     );
 
diff --git a/site/src/components/ui/AudioPlayer.tsx b/site/src/components/ui/AudioPlayer.tsx
index 6707403..9370405 100644
--- a/site/src/components/ui/AudioPlayer.tsx
+++ b/site/src/components/ui/AudioPlayer.tsx
@@ -60,11 +60,13 @@ export function AudioPlayer({
   label,
   id,
   compact,
+  iconOnly,
 }: {
   url: string;
   label: string;
   id: string;
   compact?: boolean;
+  iconOnly?: boolean;
 }) {
   const { play, stop, currentId } = useAudio();
   const isPlaying = currentId === id;
@@ -79,6 +81,23 @@ export function AudioPlayer({
     }
   };
 
+  if (iconOnly) {
+    return (
+      <button
+        onClick={handleClick}
+        aria-label={`${isPlaying ? "Stop" : "Play"}: ${label}`}
+        title={label}
+        className={`flex-shrink-0 flex items-center justify-center w-7 h-7 rounded-full transition-colors text-xs ${
+          isPlaying
+            ? "bg-gold text-black shadow-[0_0_8px_rgba(255,171,1,0.3)]"
+            : "bg-surface-border text-text-muted hover:bg-gold/20 hover:text-gold"
+        }`}
+      >
+        {isPlaying ? "■" : "▶"}
+      </button>
+    );
+  }
+
   return (
     <button
       onClick={handleClick}
diff --git a/site/src/components/ui/PackCard.tsx b/site/src/components/ui/PackCard.tsx
index dec5542..f8ba2d6 100644
--- a/site/src/components/ui/PackCard.tsx
+++ b/site/src/components/ui/PackCard.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import Link from "next/link";
-import { useRouter } from "next/navigation";
 import type { PackMeta } from "@/lib/types";
 import { AudioPlayer } from "./AudioPlayer";
 
@@ -22,88 +21,109 @@ function TierBadge({ tier }: { tier: string }) {
   );
 }
 
+function formatDate(iso: string): { short: string; tooltip: string } {
+  const date = new Date(iso);
+  const now = new Date();
+  const month = date.toLocaleString("en-US", { month: "short" });
+  const day = date.getDate();
+  const year = date.getFullYear();
+  const short = year === now.getFullYear() ? `${month} ${day}` : `${month} ${day}, ${year}`;
+  return { short, tooltip: `${month} ${day}, ${year}` };
+}
+
+function DateDisplay({ pack }: { pack: PackMeta }) {
+  const raw = pack.dateUpdated || pack.dateAdded;
+  if (!raw) return null;
+  const isUpdated = !!pack.dateUpdated;
+  const { short, tooltip } = formatDate(raw);
+  return (
+    <span title={`${isUpdated ? "Updated" : "Added"} ${tooltip}`}>
+      {short}
+    </span>
+  );
+}
+
 export function PackCard({ pack }: { pack: PackMeta }) {
-  const router = useRouter();
   const preview = pack.previewSounds[0];
 
   return (
     <Link
       href={`/packs/${pack.name}`}
-      className="group flex flex-col rounded-lg border border-surface-border bg-surface-card p-4 transition-all duration-200 hover:border-gold/50 hover:bg-surface-card/80"
+      className="group flex flex-col rounded-lg border border-surface-border bg-surface-card transition-all duration-200 hover:border-gold/50 hover:bg-surface-card/80"
     >
-      {/* Name */}
-      <h3 className="font-display text-lg text-text-primary group-hover:text-gold transition-colors truncate mb-1">
-        {pack.displayName}
-      </h3>
+      {/* ── Title Bar ── */}
+      <div className="px-4 pt-2 pb-2 border-b border-surface-border">
+        <h3 className="font-display text-lg text-text-primary group-hover:text-gold transition-colors truncate" title={pack.displayName}>
+          {pack.displayName}
+        </h3>
+      </div>
 
-      {/* Description */}
-      {pack.description && (
-        <p className="text-xs text-text-muted mb-2 line-clamp-2">
-          {pack.description}
+      {/* ── Content Zone ── */}
+      <div className="flex-1 px-4 py-3 flex flex-col gap-2">
+        {/* Description — fixed height to keep alignment across cards */}
+        <p className="text-xs text-text-muted line-clamp-2 min-h-[2.5rem]">
+          {pack.description || "\u00A0"}
         </p>
-      )}
 
-      {/* Tags */}
-      {pack.tags && pack.tags.length > 0 && (
-        <div className="flex flex-wrap gap-1 mb-2">
-          {pack.tags.slice(0, 5).map((tag) => (
-            <span
-              key={tag}
-              className="font-mono text-[10px] px-1.5 py-0.5 rounded bg-surface-bg border border-surface-border text-text-subtle"
-            >
-              {tag}
-            </span>
-          ))}
+        {/* Badges */}
+        <div className="flex gap-1.5">
+          <TierBadge tier={pack.trustTier} />
+          <span className="font-mono text-[10px] px-2 py-0.5 rounded-full uppercase border border-amber-700/50 text-amber-500">
+            {pack.languageLabel}
+          </span>
         </div>
-      )}
 
-      {/* Meta line */}
-      <div className="font-mono text-[11px] text-text-dim mb-2">
-        {pack.author.name || pack.author.github}
-        <span className="mx-1 opacity-50">&middot;</span>
-        {pack.totalSoundCount} sounds
-        <span className="mx-1 opacity-50">&middot;</span>
-        v{pack.version}
-      </div>
+        {/* Tags — single line, overflow hidden */}
+        {pack.tags && pack.tags.length > 0 && (
+          <div className="flex flex-wrap gap-1 overflow-hidden max-h-[1.5rem]">
+            {pack.tags.map((tag) => (
+              <span
+                key={tag}
+                className="font-mono text-[10px] px-1.5 py-0.5 rounded bg-surface-bg border border-surface-border text-text-subtle"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
 
-      {/* Badges */}
-      <div className="flex gap-1.5 mb-3">
-        <TierBadge tier={pack.trustTier} />
-        <span className="font-mono text-[10px] px-2 py-0.5 rounded-full uppercase border border-amber-700/50 text-amber-500">
-          {pack.languageLabel}
-        </span>
+        {/* Author */}
+        {(pack.author.name || pack.author.github) && (
+          <p className="font-mono text-[11px] text-text-dim">
+            {pack.author.name || pack.author.github}
+          </p>
+        )}
       </div>
 
-      {/* Audio preview */}
-      {preview && (
-        <div className="mt-auto">
+      {/* ── Status Bar ── */}
+      <div className="px-4 py-2 border-t border-surface-border flex items-center justify-between">
+        {/* Play button */}
+        {preview ? (
           <AudioPlayer
             url={preview.audioUrl}
             label={preview.label}
             id={`card-${pack.name}`}
-            compact
+            iconOnly
           />
-        </div>
-      )}
+        ) : (
+          <div className="w-7 h-7" />
+        )}
 
-      {pack.sourceRepo && (
-        <button
-          type="button"
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            const hash = encodeURIComponent(
-              pack.sourcePath
-                ? pack.sourceRepo + "/" + pack.sourcePath
-                : pack.sourceRepo!
-            );
-            router.push(`/preview#${hash}`);
-          }}
-          className="block mt-2 text-left text-[11px] font-medium text-gold hover:text-gold/80 transition-colors"
-        >
-          preview &rarr;
-        </button>
-      )}
+        {/* Stats */}
+        <div className="font-mono text-xs text-text-dim flex items-center gap-1.5">
+          <span title={`${pack.totalSoundCount} sounds`}>
+            ♫ {pack.totalSoundCount}
+          </span>
+          <span className="opacity-40">&middot;</span>
+          <span>v{pack.version}</span>
+          {(pack.dateUpdated || pack.dateAdded) && (
+            <>
+              <span className="opacity-40">&middot;</span>
+              <DateDisplay pack={pack} />
+            </>
+          )}
+        </div>
+      </div>
     </Link>
   );
 }
diff --git a/site/src/lib/types.ts b/site/src/lib/types.ts
index d9c648d..701cf8b 100644
--- a/site/src/lib/types.ts
+++ b/site/src/lib/types.ts
@@ -34,6 +34,7 @@ export interface PackMeta {
   sourceRepo?: string;
   sourcePath?: string;
   dateAdded?: string;
+  dateUpdated?: string;
 }
 
 export interface PacksData {