From 800589482fda00e9aa8ffec2906eb0cbdfcaae6b Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Jan 2026 19:17:35 +0000
Subject: [PATCH] refactor(calendar): improve feed renderer layout

- Rename both kinds to "Calendar Event" for consistency
- Move date/time info below title
- Place time on left, status badge on right with justify-between
- Remove timezone indicator from feed view (keep in detail)
---
 .../nostr/kinds/CalendarDateEventRenderer.tsx | 20 +++++++--------
 .../nostr/kinds/CalendarTimeEventRenderer.tsx | 25 ++++++++-----------
 src/constants/kinds.ts                        |  4 +--
 3 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/src/components/nostr/kinds/CalendarDateEventRenderer.tsx b/src/components/nostr/kinds/CalendarDateEventRenderer.tsx
index 5aa20c4..2bfc5bb 100644
--- a/src/components/nostr/kinds/CalendarDateEventRenderer.tsx
+++ b/src/components/nostr/kinds/CalendarDateEventRenderer.tsx
@@ -79,16 +79,6 @@ export function CalendarDateEventRenderer({ event }: BaseEventProps) {
   return (
     <BaseEventContainer event={event}>
       <div className="flex flex-col gap-2">
-        {/* Header: Status badge and date */}
-        <div className="flex items-center gap-2 flex-wrap">
-          <CalendarStatusBadge status={status} />
-          {dateRange && (
-            <span className="text-sm font-medium text-muted-foreground">
-              {dateRange}
-            </span>
-          )}
-        </div>
-
         {/* Title */}
         <ClickableEventTitle
           event={event}
@@ -97,6 +87,16 @@ export function CalendarDateEventRenderer({ event }: BaseEventProps) {
           {parsed.title || "Untitled Event"}
         </ClickableEventTitle>
 
+        {/* Date and status: time left, badge right */}
+        <div className="flex items-center justify-between">
+          {dateRange && (
+            <span className="text-sm font-medium text-muted-foreground">
+              {dateRange}
+            </span>
+          )}
+          <CalendarStatusBadge status={status} />
+        </div>
+
         {/* Description preview */}
         {parsed.description && (
           <p className="text-sm text-muted-foreground line-clamp-2">
diff --git a/src/components/nostr/kinds/CalendarTimeEventRenderer.tsx b/src/components/nostr/kinds/CalendarTimeEventRenderer.tsx
index 3782970..34d5492 100644
--- a/src/components/nostr/kinds/CalendarTimeEventRenderer.tsx
+++ b/src/components/nostr/kinds/CalendarTimeEventRenderer.tsx
@@ -84,16 +84,6 @@ export function CalendarTimeEventRenderer({ event }: BaseEventProps) {
   return (
     <BaseEventContainer event={event}>
       <div className="flex flex-col gap-2">
-        {/* Header: Status badge and time */}
-        <div className="flex items-center gap-2 flex-wrap">
-          <CalendarStatusBadge status={status} />
-          {timeRange && (
-            <span className="text-sm font-medium text-muted-foreground">
-              {timeRange}
-            </span>
-          )}
-        </div>
-
         {/* Title */}
         <ClickableEventTitle
           event={event}
@@ -102,6 +92,16 @@ export function CalendarTimeEventRenderer({ event }: BaseEventProps) {
           {parsed.title || "Untitled Event"}
         </ClickableEventTitle>
 
+        {/* Time and status: time left, badge right */}
+        <div className="flex items-center justify-between">
+          {timeRange && (
+            <span className="text-sm font-medium text-muted-foreground">
+              {timeRange}
+            </span>
+          )}
+          <CalendarStatusBadge status={status} />
+        </div>
+
         {/* Description preview */}
         {parsed.description && (
           <p className="text-sm text-muted-foreground line-clamp-2">
@@ -136,11 +136,6 @@ export function CalendarTimeEventRenderer({ event }: BaseEventProps) {
             </div>
           )}
 
-          {/* Timezone indicator */}
-          {parsed.startTzid && (
-            <span className="text-muted-foreground/70">{parsed.startTzid}</span>
-          )}
-
           {/* Hashtags */}
           {parsed.hashtags.slice(0, 3).map((tag) => (
             <Label key={tag} size="sm">
diff --git a/src/constants/kinds.ts b/src/constants/kinds.ts
index f3677b5..eb0299a 100644
--- a/src/constants/kinds.ts
+++ b/src/constants/kinds.ts
@@ -1305,14 +1305,14 @@ export const EVENT_KINDS: Record<number | string, EventKind> = {
   // },
   31922: {
     kind: 31922,
-    name: "Date-Based Event",
+    name: "Calendar Event",
     description: "Date-Based Calendar Event",
     nip: "52",
     icon: CalendarDays,
   },
   31923: {
     kind: 31923,
-    name: "Time-Based Event",
+    name: "Calendar Event",
     description: "Time-Based Calendar Event",
     nip: "52",
     icon: CalendarClock,