@handled-ai/design-system 0.20.1 → 0.20.3

package/src/components/timeline-activity.tsx

@@ -21,6 +21,8 @@ const EMAIL_HTML_CLASS = cn(
   "[&_.gmail_quote]:border-l-2 [&_.gmail_quote]:border-border [&_.gmail_quote]:pl-3 [&_.gmail_quote]:text-muted-foreground [&_.gmail_quote]:text-[13px]"
 )
 
+export type TimelineActivityVariant = "default" | "case-panel"
+
 export type TimelineEventTone =
   | "red"
   | "amber"
@@ -121,19 +123,79 @@ export const TONE_CLASSES: Record<
 const NEUTRAL_DOT_CLASSES = "border-border/60 bg-background"
 const NEUTRAL_ICON_CLASSES = "text-muted-foreground"
 
+type TimelineVariantClasses = {
+  outerRowGap: string
+  connector: string
+  dotWrapperSize: string
+  dot: string
+  contentPadding: string
+  titleRowSpacing: string
+  title: string
+  time: string
+  cardContainer: string
+  cardHeader: string
+  cardBody: string
+  cardFooter: string
+  collapsedPreview: string
+  actionLinkRow: string
+  actionLink: string
+  nonInteractiveContent: string
+}
+
+const TIMELINE_VARIANT_CLASSES: Record<TimelineActivityVariant, TimelineVariantClasses> = {
+  default: {
+    outerRowGap: "group relative flex gap-3.5",
+    connector: "absolute left-[9px] top-5 bottom-[-6px] w-px bg-border/60",
+    dotWrapperSize: "relative z-10 mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-background",
+    dot: "flex h-4.5 w-4.5 items-center justify-center rounded-full border ring-4 ring-background",
+    contentPadding: "flex-1 pb-5 pt-0.5",
+    titleRowSpacing: "flex min-w-0 flex-col gap-1 sm:flex-row sm:items-start sm:justify-between",
+    title: "pr-4 text-[13px] leading-relaxed text-foreground",
+    time: "mt-0.5 shrink-0 whitespace-nowrap text-[11px] text-muted-foreground/70",
+    cardContainer: "overflow-hidden rounded-md border border-border/80 bg-muted/20",
+    cardHeader: "px-3 pt-2.5",
+    cardBody: "px-3 py-2.5 text-sm",
+    cardFooter: "px-3 pb-2.5",
+    collapsedPreview: "flex items-center justify-between gap-2 px-3 py-2.5 text-sm text-muted-foreground",
+    actionLinkRow: "flex items-center gap-3 px-3 pb-2.5",
+    actionLink: "inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground",
+    nonInteractiveContent: "pr-2 text-sm leading-relaxed text-muted-foreground",
+  },
+  "case-panel": {
+    outerRowGap: "group relative flex gap-3",
+    connector: "absolute left-[7px] top-[18px] bottom-[-4px] w-px bg-border/60",
+    dotWrapperSize: "relative z-10 mt-1 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-background",
+    dot: "flex h-3.5 w-3.5 items-center justify-center rounded-full border ring-[3px] ring-background",
+    contentPadding: "flex-1 pb-4 pt-0.5",
+    titleRowSpacing: "flex min-w-0 flex-col gap-0.5 sm:flex-row sm:items-start sm:justify-between",
+    title: "pr-3 text-[13px] leading-snug text-foreground",
+    time: "mt-0.5 shrink-0 whitespace-nowrap text-[11px] leading-snug text-muted-foreground/70",
+    cardContainer: "overflow-hidden rounded-lg border border-border/70 bg-card shadow-sm",
+    cardHeader: "border-b border-border/60 bg-background px-3 py-2",
+    cardBody: "px-3 py-2.5 text-sm",
+    cardFooter: "border-t border-border/60 bg-background/50 px-3 py-1.5",
+    collapsedPreview: "flex items-center justify-between gap-2 px-3 py-2 text-sm text-muted-foreground",
+    actionLinkRow: "flex items-center justify-end gap-2 px-3 py-1.5",
+    actionLink: "inline-flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground/70 transition-colors hover:text-foreground",
+    nonInteractiveContent: "pr-2 text-[13px] leading-snug text-muted-foreground",
+  },
+}
+
 export interface TimelineActivityProps {
   events: TimelineEvent[]
   className?: string
+  variant?: TimelineActivityVariant
 }
 
-export function TimelineActivity({ events, className }: TimelineActivityProps) {
+export function TimelineActivity({ events, className, variant = "default" }: TimelineActivityProps) {
   return (
-    <div className={cn("space-y-0", className)}>
+    <div className={cn("space-y-0", className)} data-variant={variant}>
       {events.map((event, index) => (
         <TimelineItem
           key={event.id}
           event={event}
           isLast={index === events.length - 1}
+          variant={variant}
         />
       ))}
     </div>
@@ -178,34 +240,43 @@ function ActorByline({ actor, time }: { actor: TimelineEventActor; time: string
   )
 }
 
-function TimelineItem({ event, isLast }: { event: TimelineEvent; isLast: boolean }) {
+function TimelineItem({
+  event,
+  isLast,
+  variant,
+}: {
+  event: TimelineEvent
+  isLast: boolean
+  variant: TimelineActivityVariant
+}) {
   const [expanded, setExpanded] = React.useState(event.defaultExpanded ?? false)
   const [showAllRecipients, setShowAllRecipients] = React.useState(false)
   const hasContent = !!event.content
   const hasEmail = !!event.email
+  const classes = TIMELINE_VARIANT_CLASSES[variant]
 
   const toneStyle = event.tone ? TONE_CLASSES[event.tone] : null
   const dotClasses = toneStyle ? toneStyle.dot : NEUTRAL_DOT_CLASSES
   const iconClasses = toneStyle ? toneStyle.icon : NEUTRAL_ICON_CLASSES
 
   return (
-    <div className="group relative flex gap-3.5">
+    <div className={classes.outerRowGap}>
       {!isLast && (
-        <div className="absolute left-[9px] top-5 bottom-[-6px] w-px bg-border/60" />
+        <div className={classes.connector} />
       )}
 
-      <div className="relative z-10 mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-background">
-        <div className={cn("flex h-4.5 w-4.5 items-center justify-center rounded-full border ring-4 ring-background", dotClasses, iconClasses)} data-testid="timeline-dot">
+      <div className={classes.dotWrapperSize}>
+        <div className={cn(classes.dot, dotClasses, iconClasses)} data-testid="timeline-dot">
           {event.icon}
         </div>
       </div>
 
-      <div className="flex-1 pb-5 pt-0.5">
-        <div className="flex min-w-0 flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
-          <div className="pr-4 text-[13px] leading-relaxed text-foreground">
+      <div className={classes.contentPadding}>
+        <div className={classes.titleRowSpacing}>
+          <div className={classes.title}>
             {event.title}
           </div>
-          <span className="mt-0.5 shrink-0 whitespace-nowrap text-[11px] text-muted-foreground/70">
+          <span className={classes.time}>
             {event.time}
           </span>
         </div>
@@ -216,158 +287,26 @@ function TimelineItem({ event, isLast }: { event: TimelineEvent; isLast: boolean
           <div className="mt-2">
             {event.isInteractive ? (
               hasEmail ? (
-                <div className="overflow-hidden rounded-md border border-border/80 bg-muted/20">
-                  <div
-                    className={cn(
-                      "px-3 py-2.5 text-sm",
-                      !expanded && "cursor-pointer hover:bg-muted/30 transition-colors"
-                    )}
-                    onClick={() => !expanded && setExpanded(true)}
-                  >
-                    {expanded && event.email ? (
-                      <div className="space-y-3">
-                        <div>
-                          <div className="flex items-center justify-between gap-4">
-                            <div className="flex min-w-0 items-baseline gap-1.5">
-                              <span className="font-semibold text-foreground text-[13px] whitespace-nowrap">{event.email.from}</span>
-                              {event.email.fromEmail && (
-                                <span className="text-muted-foreground/60 text-xs truncate">{event.email.fromEmail}</span>
-                              )}
-                            </div>
-                            {event.email.date && (
-                              <span className="shrink-0 text-xs text-muted-foreground/50 whitespace-nowrap">{event.email.date}</span>
-                            )}
-                          </div>
-                          <div className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
-                            <span className="truncate">
-                              To {event.email.to}
-                              {!showAllRecipients && (event.email.cc || event.email.bcc) ? (
-                                <>, ...</>
-                              ) : null}
-                              {showAllRecipients && event.email.cc ? (
-                                <>, {event.email.cc}</>
-                              ) : null}
-                              {showAllRecipients && event.email.bcc ? (
-                                <> <span className="text-muted-foreground/40">bcc</span> {event.email.bcc}</>
-                              ) : null}
-                            </span>
-                            {(event.email.cc || event.email.bcc) && (
-                              <button
-                                type="button"
-                                onClick={(e) => {
-                                  e.stopPropagation()
-                                  setShowAllRecipients((prev) => !prev)
-                                }}
-                                className="shrink-0 text-muted-foreground/40 hover:text-muted-foreground transition-colors"
-                              >
-                                <ChevronDown className={cn("h-3 w-3 transition-transform", showAllRecipients && "rotate-180")} />
-                              </button>
-                            )}
-                          </div>
-                        </div>
-
-                        {event.email.bodyHtml ? (
-                          // Gmail reading-pane typography; quoted history
-                          // (blockquote.gmail_quote) is de-emphasized with a left rule.
-                          <div
-                            data-slot="timeline-email-html"
-                            className={EMAIL_HTML_CLASS}
-                            dangerouslySetInnerHTML={{ __html: sanitizeHtml(event.email.bodyHtml) }}
-                          />
-                        ) : (
-                          <div className="whitespace-pre-line text-sm leading-relaxed text-foreground/90">
-                            {event.email.body}
-                          </div>
-                        )}
-
-                        <button
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            setExpanded(false)
-                          }}
-                          className="mt-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
-                        >
-                          Show less <ChevronUp className="h-3 w-3" />
-                        </button>
-                      </div>
-                    ) : (
-                      <div className="flex items-center justify-between gap-2 text-muted-foreground">
-                        <span className="line-clamp-1 pr-3 text-[13px]">
-                          <span className="text-muted-foreground">{event.email?.from}</span>
-                          <span className="mx-1.5 text-muted-foreground/40">&middot;</span>
-                          {event.email?.subject ? (
-                            <>
-                              <span className="text-muted-foreground">{event.email.subject}</span>
-                              <span className="mx-1.5 text-muted-foreground/40">&middot;</span>
-                            </>
-                          ) : null}
-                          <span className="text-muted-foreground">{event.preview}</span>
-                        </span>
-                        <button className="flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground">
-                          Expand <ChevronDown className="h-3 w-3" />
-                        </button>
-                      </div>
-                    )}
-                  </div>
-                </div>
+                <EmailCard
+                  event={event}
+                  expanded={expanded}
+                  setExpanded={setExpanded}
+                  showAllRecipients={showAllRecipients}
+                  setShowAllRecipients={setShowAllRecipients}
+                  variant={variant}
+                  classes={classes}
+                />
               ) : (
-                <div className="overflow-hidden rounded-md border border-border/80 bg-muted/20">
-                  <div
-                    className={cn(
-                      "px-3 py-2.5 text-sm",
-                      !expanded && "cursor-pointer hover:bg-muted/30 transition-colors"
-                    )}
-                    onClick={() => !expanded && setExpanded(true)}
-                  >
-                    {expanded ? (
-                      <div className="space-y-2">
-                        {event.content}
-                        <div className="mt-2 flex items-center gap-3">
-                          {event.source ? (
-                            event.onSourceClick ? (
-                              <button
-                                type="button"
-                                onClick={(e) => { e.stopPropagation(); event.onSourceClick?.(); }}
-                                className="mr-auto inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
-                              >
-                                Open in {event.source.label}
-                                <ExternalLink className="h-3 w-3" />
-                              </button>
-                            ) : (
-                              <a
-                                href={event.source.url}
-                                target="_blank"
-                                rel="noreferrer noopener"
-                                className="mr-auto inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
-                              >
-                                Open in {event.source.label}
-                                <ExternalLink className="h-3 w-3" />
-                              </a>
-                            )
-                          ) : null}
-                          <button
-                            onClick={(e) => { e.stopPropagation(); setExpanded(false); }}
-                            className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
-                          >
-                            Show less <ChevronUp className="h-3 w-3" />
-                          </button>
-                        </div>
-                      </div>
-                    ) : (
-                      <div className="flex items-center justify-between gap-2 text-muted-foreground">
-                        <span className="line-clamp-1 pr-3">
-                          {event.preview ?? event.content}
-                        </span>
-                        <button className="flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground">
-                          Expand <ChevronDown className="h-3 w-3" />
-                        </button>
-                      </div>
-                    )}
-                  </div>
-                </div>
+                <ContentCard
+                  event={event}
+                  expanded={expanded}
+                  setExpanded={setExpanded}
+                  variant={variant}
+                  classes={classes}
+                />
               )
             ) : (
-              <div className="pr-2 text-sm leading-relaxed text-muted-foreground">
+              <div className={classes.nonInteractiveContent}>
                 {event.content}
               </div>
             )}
@@ -377,3 +316,356 @@ function TimelineItem({ event, isLast }: { event: TimelineEvent; isLast: boolean
     </div>
   )
 }
+
+type TimelineEmail = NonNullable<TimelineEvent["email"]>
+type TimelineSource = NonNullable<TimelineEvent["source"]>
+
+function EmailMetadata({
+  email,
+  showAllRecipients,
+  setShowAllRecipients,
+}: {
+  email: TimelineEmail
+  showAllRecipients: boolean
+  setShowAllRecipients: React.Dispatch<React.SetStateAction<boolean>>
+}) {
+  return (
+    <>
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex min-w-0 items-baseline gap-1.5">
+          <span className="font-semibold text-foreground text-[13px] whitespace-nowrap">{email.from}</span>
+          {email.fromEmail && (
+            <span className="text-muted-foreground/60 text-xs truncate">{email.fromEmail}</span>
+          )}
+        </div>
+        {email.date && (
+          <span className="shrink-0 text-xs text-muted-foreground/50 whitespace-nowrap">{email.date}</span>
+        )}
+      </div>
+      <div className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
+        <span className="truncate">
+          To {email.to}
+          {!showAllRecipients && (email.cc || email.bcc) ? (
+            <>, ...</>
+          ) : null}
+          {showAllRecipients && email.cc ? (
+            <>, {email.cc}</>
+          ) : null}
+          {showAllRecipients && email.bcc ? (
+            <> <span className="text-muted-foreground/40">bcc</span> {email.bcc}</>
+          ) : null}
+        </span>
+        {(email.cc || email.bcc) && (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation()
+              setShowAllRecipients((prev) => !prev)
+            }}
+            className="shrink-0 text-muted-foreground/40 hover:text-muted-foreground transition-colors"
+          >
+            <ChevronDown className={cn("h-3 w-3 transition-transform", showAllRecipients && "rotate-180")} />
+          </button>
+        )}
+      </div>
+    </>
+  )
+}
+
+function EmailBody({ email }: { email: TimelineEmail }) {
+  if (email.bodyHtml) {
+    return (
+      // Gmail reading-pane typography; quoted history
+      // (blockquote.gmail_quote) is de-emphasized with a left rule.
+      <div
+        data-slot="timeline-email-html"
+        className={EMAIL_HTML_CLASS}
+        dangerouslySetInnerHTML={{ __html: sanitizeHtml(email.bodyHtml) }}
+      />
+    )
+  }
+
+  return (
+    <div className="whitespace-pre-line text-sm leading-relaxed text-foreground/90">
+      {email.body}
+    </div>
+  )
+}
+
+function CollapsedEmailPreview({
+  email,
+  preview,
+  className,
+  actionClassName,
+  onClick,
+}: {
+  email?: TimelineEmail
+  preview?: React.ReactNode
+  className: string
+  actionClassName: string
+  onClick?: () => void
+}) {
+  return (
+    <div className={className} onClick={onClick}>
+      <span className="line-clamp-1 pr-3 text-[13px]">
+        <span className="text-muted-foreground">{email?.from}</span>
+        <span className="mx-1.5 text-muted-foreground/40">&middot;</span>
+        {email?.subject ? (
+          <>
+            <span className="text-muted-foreground">{email.subject}</span>
+            <span className="mx-1.5 text-muted-foreground/40">&middot;</span>
+          </>
+        ) : null}
+        <span className="text-muted-foreground">{preview}</span>
+      </span>
+      <button type="button" className={actionClassName}>
+        Expand <ChevronDown className="h-3 w-3" />
+      </button>
+    </div>
+  )
+}
+
+function ShowLessButton({
+  className,
+  onClick,
+  type,
+}: {
+  className: string
+  onClick: React.MouseEventHandler<HTMLButtonElement>
+  type?: "button"
+}) {
+  return (
+    <button type={type} onClick={onClick} className={className}>
+      Show less <ChevronUp className="h-3 w-3" />
+    </button>
+  )
+}
+
+function SourceAction({
+  source,
+  onSourceClick,
+  className,
+}: {
+  source: TimelineSource
+  onSourceClick?: () => void
+  className: string
+}) {
+  if (onSourceClick) {
+    return (
+      <button
+        type="button"
+        onClick={(e) => { e.stopPropagation(); onSourceClick(); }}
+        className={className}
+      >
+        Open in {source.label}
+        <ExternalLink className="h-3 w-3" />
+      </button>
+    )
+  }
+
+  return (
+    <a
+      href={source.url}
+      target="_blank"
+      rel="noreferrer noopener"
+      className={className}
+    >
+      Open in {source.label}
+      <ExternalLink className="h-3 w-3" />
+    </a>
+  )
+}
+
+function EmailCard({
+  event,
+  expanded,
+  setExpanded,
+  showAllRecipients,
+  setShowAllRecipients,
+  variant,
+  classes,
+}: {
+  event: TimelineEvent
+  expanded: boolean
+  setExpanded: React.Dispatch<React.SetStateAction<boolean>>
+  showAllRecipients: boolean
+  setShowAllRecipients: React.Dispatch<React.SetStateAction<boolean>>
+  variant: TimelineActivityVariant
+  classes: TimelineVariantClasses
+}) {
+  if (variant === "default") {
+    return (
+      <div className={classes.cardContainer} data-variant={variant}>
+        <div
+          className={cn(
+            "px-3 py-2.5 text-sm",
+            !expanded && "cursor-pointer hover:bg-muted/30 transition-colors"
+          )}
+          onClick={() => !expanded && setExpanded(true)}
+        >
+          {expanded && event.email ? (
+            <div className="space-y-3">
+              <div>
+                <EmailMetadata
+                  email={event.email}
+                  showAllRecipients={showAllRecipients}
+                  setShowAllRecipients={setShowAllRecipients}
+                />
+              </div>
+
+              <EmailBody email={event.email} />
+
+              <ShowLessButton
+                onClick={(e) => {
+                  e.stopPropagation()
+                  setExpanded(false)
+                }}
+                className="mt-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
+              />
+            </div>
+          ) : (
+            <CollapsedEmailPreview
+              email={event.email}
+              preview={event.preview}
+              className="flex items-center justify-between gap-2 text-muted-foreground"
+              actionClassName="flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground"
+            />
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={classes.cardContainer} data-variant={variant}>
+      {expanded && event.email ? (
+        <>
+          <div className={classes.cardHeader} data-slot="timeline-card-header">
+            <EmailMetadata
+              email={event.email}
+              showAllRecipients={showAllRecipients}
+              setShowAllRecipients={setShowAllRecipients}
+            />
+          </div>
+
+          <div className={classes.cardBody} data-slot="timeline-card-body">
+            <EmailBody email={event.email} />
+          </div>
+
+          <div className={cn(classes.cardFooter, classes.actionLinkRow)} data-slot="timeline-card-footer">
+            <ShowLessButton
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation()
+                setExpanded(false)
+              }}
+              className={classes.actionLink}
+            />
+          </div>
+        </>
+      ) : (
+        <CollapsedEmailPreview
+          email={event.email}
+          preview={event.preview}
+          className={cn(classes.collapsedPreview, "cursor-pointer hover:bg-muted/30 transition-colors")}
+          actionClassName={cn(classes.actionLink, "shrink-0")}
+          onClick={() => setExpanded(true)}
+        />
+      )}
+    </div>
+  )
+}
+
+function ContentCard({
+  event,
+  expanded,
+  setExpanded,
+  variant,
+  classes,
+}: {
+  event: TimelineEvent
+  expanded: boolean
+  setExpanded: React.Dispatch<React.SetStateAction<boolean>>
+  variant: TimelineActivityVariant
+  classes: TimelineVariantClasses
+}) {
+  if (variant === "default") {
+    return (
+      <div className={classes.cardContainer} data-variant={variant}>
+        <div
+          className={cn(
+            "px-3 py-2.5 text-sm",
+            !expanded && "cursor-pointer hover:bg-muted/30 transition-colors"
+          )}
+          onClick={() => !expanded && setExpanded(true)}
+        >
+          {expanded ? (
+            <div className="space-y-2">
+              {event.content}
+              <div className="mt-2 flex items-center gap-3">
+                {event.source ? (
+                  <SourceAction
+                    source={event.source}
+                    onSourceClick={event.onSourceClick}
+                    className="mr-auto inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
+                  />
+                ) : null}
+                <ShowLessButton
+                  onClick={(e) => { e.stopPropagation(); setExpanded(false); }}
+                  className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
+                />
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-center justify-between gap-2 text-muted-foreground">
+              <span className="line-clamp-1 pr-3">
+                {event.preview ?? event.content}
+              </span>
+              <button className="flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground">
+                Expand <ChevronDown className="h-3 w-3" />
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={classes.cardContainer} data-variant={variant}>
+      {expanded ? (
+        <>
+          <div className={classes.cardBody} data-slot="timeline-card-body">
+            {event.content}
+          </div>
+          <div className={cn(classes.cardFooter, classes.actionLinkRow, event.source ? "justify-between" : "justify-end")} data-slot="timeline-card-footer">
+            {event.source ? (
+              <SourceAction
+                source={event.source}
+                onSourceClick={event.onSourceClick}
+                className={classes.actionLink}
+              />
+            ) : null}
+            <ShowLessButton
+              type="button"
+              onClick={(e) => { e.stopPropagation(); setExpanded(false); }}
+              className={classes.actionLink}
+            />
+          </div>
+        </>
+      ) : (
+        <div
+          className={cn(classes.collapsedPreview, "cursor-pointer hover:bg-muted/30 transition-colors")}
+          onClick={() => setExpanded(true)}
+        >
+          <span className="line-clamp-1 pr-3">
+            {event.preview ?? event.content}
+          </span>
+          <button type="button" className={cn(classes.actionLink, "shrink-0")}>
+            Expand <ChevronDown className="h-3 w-3" />
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}