refactor(calendar): apply feed layout to detail views

- Move title above date/time in detail views
- Use justify-between for time left, status badge right
- Use Label component for hashtags (no # prefix, consistent with feed)
- Use Label component for participant roles (subtle dotted border style)

src/components/nostr/kinds/CalendarDateEventDetailRenderer.tsx

@@ -7,6 +7,7 @@ import {
 } from "@/lib/calendar-event";
 import { UserName } from "../UserName";
 import { MarkdownContent } from "../MarkdownContent";
+import { Label } from "@/components/ui/label";
 import {
   CalendarDays,
   MapPin,
@@ -72,21 +73,21 @@ export function CalendarDateEventDetailRenderer({
     <div className="flex flex-col gap-6 p-6 max-w-3xl mx-auto">
       {/* Event Header */}
       <header className="flex flex-col gap-4 border-b border-border pb-6">
-        {/* Status and Date */}
-        <div className="flex items-center gap-3 flex-wrap">
-          <CalendarStatusBadge status={status} />
+        {/* Title */}
+        <h1 className="text-3xl font-bold">
+          {parsed.title || "Untitled Event"}
+        </h1>
+
+        {/* Date and Status: date left, badge right */}
+        <div className="flex items-center justify-between">
           {dateRange && (
             <span className="text-lg font-medium text-muted-foreground">
               {dateRange}
             </span>
           )}
+          <CalendarStatusBadge status={status} />
         </div>
 
-        {/* Title */}
-        <h1 className="text-3xl font-bold">
-          {parsed.title || "Untitled Event"}
-        </h1>
-
         {/* Organizer */}
         <div className="flex items-center gap-2 text-sm text-muted-foreground">
           <span>Organized by</span>
@@ -140,9 +141,7 @@ export function CalendarDateEventDetailRenderer({
                 >
                   <UserName pubkey={participant.pubkey} />
                   {participant.role && (
-                    <span className="text-xs text-muted-foreground px-2 py-0.5 bg-muted rounded">
-                      {participant.role}
-                    </span>
+                    <Label size="sm">{participant.role}</Label>
                   )}
                 </li>
               ))}
@@ -159,12 +158,9 @@ export function CalendarDateEventDetailRenderer({
             </h2>
             <div className="flex flex-wrap gap-2">
               {parsed.hashtags.map((tag) => (
-                <span
-                  key={tag}
-                  className="px-2 py-1 text-sm bg-muted text-muted-foreground rounded"
-                >
-                  #{tag}
-                </span>
+                <Label key={tag} size="sm">
+                  {tag}
+                </Label>
               ))}
             </div>
           </section>

src/components/nostr/kinds/CalendarTimeEventDetailRenderer.tsx

@@ -7,6 +7,7 @@ import {
 } from "@/lib/calendar-event";
 import { UserName } from "../UserName";
 import { MarkdownContent } from "../MarkdownContent";
+import { Label } from "@/components/ui/label";
 import {
   CalendarClock,
   MapPin,
@@ -78,14 +79,19 @@ export function CalendarTimeEventDetailRenderer({
     <div className="flex flex-col gap-6 p-6 max-w-3xl mx-auto">
       {/* Event Header */}
       <header className="flex flex-col gap-4 border-b border-border pb-6">
-        {/* Status and Time */}
-        <div className="flex items-center gap-3 flex-wrap">
-          <CalendarStatusBadge status={status} />
+        {/* Title */}
+        <h1 className="text-3xl font-bold">
+          {parsed.title || "Untitled Event"}
+        </h1>
+
+        {/* Time and Status: time left, badge right */}
+        <div className="flex items-center justify-between">
           {timeRange && (
             <span className="text-lg font-medium text-muted-foreground">
               {timeRange}
             </span>
           )}
+          <CalendarStatusBadge status={status} />
         </div>
 
         {/* Timezone indicator */}
@@ -101,11 +107,6 @@ export function CalendarTimeEventDetailRenderer({
           </div>
         )}
 
-        {/* Title */}
-        <h1 className="text-3xl font-bold">
-          {parsed.title || "Untitled Event"}
-        </h1>
-
         {/* Organizer */}
         <div className="flex items-center gap-2 text-sm text-muted-foreground">
           <span>Organized by</span>
@@ -159,9 +160,7 @@ export function CalendarTimeEventDetailRenderer({
                 >
                   <UserName pubkey={participant.pubkey} />
                   {participant.role && (
-                    <span className="text-xs text-muted-foreground px-2 py-0.5 bg-muted rounded">
-                      {participant.role}
-                    </span>
+                    <Label size="sm">{participant.role}</Label>
                   )}
                 </li>
               ))}
@@ -178,12 +177,9 @@ export function CalendarTimeEventDetailRenderer({
             </h2>
             <div className="flex flex-wrap gap-2">
               {parsed.hashtags.map((tag) => (
-                <span
-                  key={tag}
-                  className="px-2 py-1 text-sm bg-muted text-muted-foreground rounded"
-                >
-                  #{tag}
-                </span>
+                <Label key={tag} size="sm">
+                  {tag}
+                </Label>
               ))}
             </div>
           </section>