mirror of
https://github.com/purrgrammer/grimoire.git
synced 2026-06-06 18:51:21 +02:00
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:
@@ -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">
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user