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.
2026-04-12 00:17:02 +02:00 · 2026-01-11 19:33:47 +00:00
parent 2c792ee5c0
commit 92b6d476b4
3 changed files with 87 additions and 65 deletions
--- 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>
+  );
 }

 /**
--- 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>
--- 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
 };

 /**