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)
This commit is contained in:
Claude
2026-01-07 19:17:35 +00:00
parent 212857f97b
commit 800589482f
3 changed files with 22 additions and 27 deletions

View File

@@ -79,16 +79,6 @@ export function CalendarDateEventRenderer({ event }: BaseEventProps) {
return ( return (
<BaseEventContainer event={event}> <BaseEventContainer event={event}>
<div className="flex flex-col gap-2"> <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 */} {/* Title */}
<ClickableEventTitle <ClickableEventTitle
event={event} event={event}
@@ -97,6 +87,16 @@ export function CalendarDateEventRenderer({ event }: BaseEventProps) {
{parsed.title || "Untitled Event"} {parsed.title || "Untitled Event"}
</ClickableEventTitle> </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 */} {/* Description preview */}
{parsed.description && ( {parsed.description && (
<p className="text-sm text-muted-foreground line-clamp-2"> <p className="text-sm text-muted-foreground line-clamp-2">

View File

@@ -84,16 +84,6 @@ export function CalendarTimeEventRenderer({ event }: BaseEventProps) {
return ( return (
<BaseEventContainer event={event}> <BaseEventContainer event={event}>
<div className="flex flex-col gap-2"> <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 */} {/* Title */}
<ClickableEventTitle <ClickableEventTitle
event={event} event={event}
@@ -102,6 +92,16 @@ export function CalendarTimeEventRenderer({ event }: BaseEventProps) {
{parsed.title || "Untitled Event"} {parsed.title || "Untitled Event"}
</ClickableEventTitle> </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 */} {/* Description preview */}
{parsed.description && ( {parsed.description && (
<p className="text-sm text-muted-foreground line-clamp-2"> <p className="text-sm text-muted-foreground line-clamp-2">
@@ -136,11 +136,6 @@ export function CalendarTimeEventRenderer({ event }: BaseEventProps) {
</div> </div>
)} )}
{/* Timezone indicator */}
{parsed.startTzid && (
<span className="text-muted-foreground/70">{parsed.startTzid}</span>
)}
{/* Hashtags */} {/* Hashtags */}
{parsed.hashtags.slice(0, 3).map((tag) => ( {parsed.hashtags.slice(0, 3).map((tag) => (
<Label key={tag} size="sm"> <Label key={tag} size="sm">

View File

@@ -1305,14 +1305,14 @@ export const EVENT_KINDS: Record<number | string, EventKind> = {
// }, // },
31922: { 31922: {
kind: 31922, kind: 31922,
name: "Date-Based Event", name: "Calendar Event",
description: "Date-Based Calendar Event", description: "Date-Based Calendar Event",
nip: "52", nip: "52",
icon: CalendarDays, icon: CalendarDays,
}, },
31923: { 31923: {
kind: 31923, kind: 31923,
name: "Time-Based Event", name: "Calendar Event",
description: "Time-Based Calendar Event", description: "Time-Based Calendar Event",
nip: "52", nip: "52",
icon: CalendarClock, icon: CalendarClock,