From 92b6d476b42c8dd0a3860261735ce30a613df66f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 11 Jan 2026 19:33:47 +0000
Subject: [PATCH] fix: Polish Zapstore renderers with platform labels and clean
 layout

Address feedback to improve Zapstore renderer UX:

Changes:
1. App feed (ZapstoreAppRenderer):
   - Add platform text labels next to icons (e.g., "Android", "iOS", "Web")
   - Now shows icon + label for better clarity

2. Release feed (ZapstoreReleaseRenderer):
   - Remove big package icon from feed view
   - Cleaner, more compact layout with just app name, version badge, and action links

3. Registry comments:
   - Update to human-friendly names:
     * "Zapstore App" (instead of "App Metadata (Zapstore)")
     * "Zapstore App Collection" (instead of "App Curation Set (Zapstore)")
     * "Zapstore App Release" (instead of "App Release (Zapstore)")

All tests pass (744 total), build succeeds.
---
 .../nostr/kinds/ZapstoreAppRenderer.tsx       | 62 +++++++++++----
 .../nostr/kinds/ZapstoreReleaseRenderer.tsx   | 78 +++++++++----------
 src/components/nostr/kinds/index.tsx          | 12 +--
 3 files changed, 87 insertions(+), 65 deletions(-)

diff --git a/src/components/nostr/kinds/ZapstoreAppRenderer.tsx b/src/components/nostr/kinds/ZapstoreAppRenderer.tsx
index 70fd630..5a1aebf 100644
--- a/src/components/nostr/kinds/ZapstoreAppRenderer.tsx
+++ b/src/components/nostr/kinds/ZapstoreAppRenderer.tsx
@@ -20,26 +20,56 @@ import {
 import type { Platform } from "@/lib/zapstore-helpers";
 
 /**
- * Platform icon component
+ * Platform icon component with label
  */
 function PlatformIcon({ platform }: { platform: Platform }) {
   const iconClass = "size-4 text-muted-foreground";
 
-  switch (platform) {
-    case "android":
-      return <TabletSmartphone className={iconClass} />;
-    case "ios":
-      return <Smartphone className={iconClass} />;
-    case "web":
-      return <Globe className={iconClass} />;
-    case "macos":
-      return <Laptop className={iconClass} />;
-    case "windows":
-    case "linux":
-      return <Monitor className={iconClass} />;
-    default:
-      return null;
-  }
+  const getPlatformLabel = () => {
+    switch (platform) {
+      case "android":
+        return "Android";
+      case "ios":
+        return "iOS";
+      case "web":
+        return "Web";
+      case "macos":
+        return "macOS";
+      case "windows":
+        return "Windows";
+      case "linux":
+        return "Linux";
+      default:
+        return platform;
+    }
+  };
+
+  const getIcon = () => {
+    switch (platform) {
+      case "android":
+        return <TabletSmartphone className={iconClass} />;
+      case "ios":
+        return <Smartphone className={iconClass} />;
+      case "web":
+        return <Globe className={iconClass} />;
+      case "macos":
+        return <Laptop className={iconClass} />;
+      case "windows":
+      case "linux":
+        return <Monitor className={iconClass} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-1.5">
+      {getIcon()}
+      <span className="text-xs text-muted-foreground">
+        {getPlatformLabel()}
+      </span>
+    </div>
+  );
 }
 
 /**
diff --git a/src/components/nostr/kinds/ZapstoreReleaseRenderer.tsx b/src/components/nostr/kinds/ZapstoreReleaseRenderer.tsx
index c3cdaf8..7ac22bb 100644
--- a/src/components/nostr/kinds/ZapstoreReleaseRenderer.tsx
+++ b/src/components/nostr/kinds/ZapstoreReleaseRenderer.tsx
@@ -42,51 +42,43 @@ export function ZapstoreReleaseRenderer({ event }: BaseEventProps) {
 
   return (
     <BaseEventContainer event={event}>
-      <div className="flex gap-3">
-        {/* Icon */}
-        <div className="size-12 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
-          <Package className="size-6 text-primary" />
-        </div>
+      <div className="flex flex-col gap-2">
+        {/* Title */}
+        <ClickableEventTitle
+          event={event}
+          className="text-base font-semibold text-foreground"
+        >
+          {appName && `${appName} `}
+          {version && (
+            <Badge variant="secondary" className="text-xs ml-1">
+              v{version}
+            </Badge>
+          )}
+        </ClickableEventTitle>
 
-        {/* Release Info */}
-        <div className="flex flex-col gap-2 flex-1 min-w-0">
-          {/* Title */}
-          <ClickableEventTitle
-            event={event}
-            className="text-base font-semibold text-foreground"
-          >
-            {appName && `${appName} `}
-            {version && (
-              <Badge variant="secondary" className="text-xs ml-1">
-                v{version}
-              </Badge>
-            )}
-          </ClickableEventTitle>
+        {/* Links */}
+        <div className="flex items-center gap-3 flex-wrap text-sm">
+          {/* App Link */}
+          {appName && (
+            <button
+              onClick={handleAppClick}
+              className="flex items-center gap-1.5 text-primary hover:underline"
+            >
+              <Package className="size-3" />
+              <span>View App</span>
+            </button>
+          )}
 
-          {/* Links */}
-          <div className="flex items-center gap-3 flex-wrap text-sm">
-            {/* App Link */}
-            {appName && (
-              <button
-                onClick={handleAppClick}
-                className="flex items-center gap-1.5 text-primary hover:underline"
-              >
-                <Package className="size-3" />
-                <span>View App</span>
-              </button>
-            )}
-
-            {/* File Link */}
-            {fileEventId && (
-              <button
-                onClick={handleFileClick}
-                className="flex items-center gap-1.5 text-primary hover:underline"
-              >
-                <FileDown className="size-3" />
-                <span>Download File</span>
-              </button>
-            )}
-          </div>
+          {/* File Link */}
+          {fileEventId && (
+            <button
+              onClick={handleFileClick}
+              className="flex items-center gap-1.5 text-primary hover:underline"
+            >
+              <FileDown className="size-3" />
+              <span>Download File</span>
+            </button>
+          )}
         </div>
       </div>
     </BaseEventContainer>
diff --git a/src/components/nostr/kinds/index.tsx b/src/components/nostr/kinds/index.tsx
index afaf6a4..80441e4 100644
--- a/src/components/nostr/kinds/index.tsx
+++ b/src/components/nostr/kinds/index.tsx
@@ -100,8 +100,8 @@ const kindRenderers: Record<number, React.ComponentType<BaseEventProps>> = {
   30002: GenericRelayListRenderer, // Relay Sets (NIP-51)
   30023: Kind30023Renderer, // Long-form Article
   30030: EmojiSetRenderer, // Emoji Sets (NIP-30)
-  30063: ZapstoreReleaseRenderer, // App Release (Zapstore)
-  30267: ZapstoreAppSetRenderer, // App Curation Set (Zapstore)
+  30063: ZapstoreReleaseRenderer, // Zapstore App Release
+  30267: ZapstoreAppSetRenderer, // Zapstore App Collection
   30311: LiveActivityRenderer, // Live Streaming Event (NIP-53)
   34235: Kind21Renderer, // Horizontal Video (NIP-71 legacy)
   34236: Kind22Renderer, // Vertical Video (NIP-71 legacy)
@@ -113,7 +113,7 @@ const kindRenderers: Record<number, React.ComponentType<BaseEventProps>> = {
   31923: CalendarTimeEventRenderer, // Time-Based Calendar Event (NIP-52)
   31989: HandlerRecommendationRenderer, // Handler Recommendation (NIP-89)
   31990: ApplicationHandlerRenderer, // Application Handler (NIP-89)
-  32267: ZapstoreAppRenderer, // App Metadata (Zapstore)
+  32267: ZapstoreAppRenderer, // Zapstore App
   39701: Kind39701Renderer, // Web Bookmarks (NIP-B0)
 };
 
@@ -168,8 +168,8 @@ const detailRenderers: Record<
   777: SpellDetailRenderer, // Spell Detail
   30023: Kind30023DetailRenderer, // Long-form Article Detail
   30030: EmojiSetDetailRenderer, // Emoji Sets Detail (NIP-30)
-  30063: ZapstoreReleaseDetailRenderer, // App Release Detail (Zapstore)
-  30267: ZapstoreAppSetDetailRenderer, // App Curation Set Detail (Zapstore)
+  30063: ZapstoreReleaseDetailRenderer, // Zapstore App Release Detail
+  30267: ZapstoreAppSetDetailRenderer, // Zapstore App Collection Detail
   30311: LiveActivityDetailRenderer, // Live Streaming Event Detail (NIP-53)
   30617: RepositoryDetailRenderer, // Repository Detail (NIP-34)
   30618: RepositoryStateDetailRenderer, // Repository State Detail (NIP-34)
@@ -179,7 +179,7 @@ const detailRenderers: Record<
   31923: CalendarTimeEventDetailRenderer, // Time-Based Calendar Event Detail (NIP-52)
   31989: HandlerRecommendationDetailRenderer, // Handler Recommendation Detail (NIP-89)
   31990: ApplicationHandlerDetailRenderer, // Application Handler Detail (NIP-89)
-  32267: ZapstoreAppDetailRenderer, // App Metadata Detail (Zapstore)
+  32267: ZapstoreAppDetailRenderer, // Zapstore App Detail
 };
 
 /**