@bearmenu/ui 0.8.7 → 0.8.9

package/src/components/event-compact-row.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { memo, useState } from "react";
+import { Radio } from "lucide-react";
 import { cn } from "../lib/utils";
 import { EventPosterFallback } from "./event-poster-fallback";
 import { Skeleton } from "./skeleton";
@@ -25,10 +26,25 @@ import {
  *
  * THIS ROW DOES NOT DRAW DIVIDERS; ITS CONTAINER DOES. `<HourGroup>` already
  * draws the rule under the hour heading, so a row-level top separator here
- * doubled it directly beneath every hour. `<EventListRow>` and
- * `<EventListRowWide>` are different: they stack in a plain list with no
- * other rule around them, so their own top separator is the only one there —
- * do not carry this rule over to them.
+ * doubled it directly beneath every hour; `<HourBand>` rules between its rows
+ * with a wrapper. `<EventListRow>` and `<EventListRowWide>` are different:
+ * they stack in a plain list with no other rule around them, so their own top
+ * separator is the only one there — do not carry this rule over to them.
+ *
+ * STATE LIVES ON THE META LINE. `isLive` adds the on-air chip and `isEnded`
+ * the ended chip beside the time and venue, so a row's state is read in the
+ * same glance as its facts. Ended dims the POSTER and moves the title to
+ * `--muted-foreground` — never row-level opacity, which composites the text
+ * below AA.
+ *
+ * THE PRICE IS ON THE LAST ROW, right-aligned beside the tags, not on the
+ * title line. Two bold things on one line compete — the title and a price
+ * both in 700 read as one shout — and the title is the thing the reader is
+ * scanning for. `showPrice` renders it (free in `--success`, paid in
+ * `--foreground`); without it the row keeps its trailing free pill for the
+ * hub's venue block. This is ONE row for the timeline and the list view:
+ * the list used to have its own, and the reader met two anatomies for the
+ * same object.
  *
  * Same contract as the rest: DS-owned view model, injected labels/formatters,
  * plain `<img>`, anchor whenever `href` is given.
@@ -58,7 +74,7 @@ export type EventCompactRowProps = {
    * repeating it on each one is noise — the caller has something more
    * differentiating to say instead (the event's own description). The
    * timeline keeps the default: there the venue IS what tells rows apart
-   * across the night. Mirrors `menu-item-row.tsx`'s prop of the same name and
+   * across the night. Mirrors `menu-item.tsx`'s prop of the same name and
    * intent.
    */
   subtitle?: string;
@@ -68,6 +84,18 @@ export type EventCompactRowProps = {
    *  rather than truncate, so a chip's own text is never cut mid-word. Cap
    *  the count at the call site — this row does not. */
   tags?: string[];
+  /** Currently running — adds the `labels.liveNow` chip to the meta line. */
+  isLive?: boolean;
+  /** Already over — dims the poster, mutes the title, adds the `endedLabel` chip. */
+  isEnded?: boolean;
+  /** Chip text for an ended event, e.g. "Ended". Required to render the chip. */
+  endedLabel?: string;
+  /**
+   * Prints the fee on the meta line — `labels.free` in `--success`, a paid
+   * amount via `formatters.price` — instead of the trailing free pill. An
+   * unknown fee prints nothing, same as every sibling row.
+   */
+  showPrice?: boolean;
   size?: "sm" | "default";
   href?: string;
   linkComponent?: React.ComponentType<EventCompactRowLinkProps>;
@@ -86,6 +114,10 @@ export const EventCompactRow = memo(function EventCompactRow({
   hideTime,
   subtitle,
   tags,
+  isLive,
+  isEnded,
+  endedLabel,
+  showPrice,
   size = "default",
   href,
   linkComponent: LinkComponent = DefaultLink,
@@ -101,10 +133,22 @@ export const EventCompactRow = memo(function EventCompactRow({
   const showPoster = !!event.poster_url && !imgError;
   const venue = event.place_name ?? event.location;
   const time = formatters.time(event.starts_at);
+  const priceText =
+    fee.kind === "free"
+      ? labels.free
+      : fee.kind === "paid"
+        ? formatters.price(fee.amountRon)
+        : undefined;
+  const showEnded = isEnded && !!endedLabel;
+  const separator = (
+    <span aria-hidden className="text-border">
+      ·
+    </span>
+  );
 
   const body = (
     <>
-      {/* 64x80 AND PORTRAIT, not a 34px square, and both parts matter.
+      {/* 58px WIDE AND PORTRAIT, not a 34px square, and both parts matter.
           91% of the posters this renders are portrait and ~57% are Instagram's
           4:5 — so a square crop kept the middle band and threw away the top and
           bottom, which on a flyer is exactly where the act, the venue and the
@@ -115,8 +159,22 @@ export const EventCompactRow = memo(function EventCompactRow({
 
           One size for both `sm` and `default`: no consumer passes `sm` today,
           and the failure is identical on a phone, so there is no second number
-          to justify. `size` still drives type scale and pill height. */}
-      <div className="relative aspect-[4/5] w-16 shrink-0 overflow-hidden rounded-[9px] bg-muted">
+          to justify. `size` still drives type scale and pill height.
+
+          Ended dims the poster to ~45%, not the row: the text keeps full ink
+          and moves to the muted tier instead, which stays above AA.
+
+          64px at every width — the phone row briefly went to 58 and it was
+          too small to read a flyer by. Only the type scale and the padding are
+          phone-scoped: a 14px bold title and 11px of vertical padding below
+          `lg`; from `lg` the 13px semibold title and 8px padding the desktop
+          timeline and the hub's venue block already had. */}
+      <div
+        className={cn(
+          "relative aspect-[4/5] w-16 shrink-0 overflow-hidden rounded-[10px] bg-muted",
+          isEnded && "opacity-45",
+        )}
+      >
         {showPoster ? (
           // eslint-disable-next-line @next/next/no-img-element
           <img
@@ -128,7 +186,7 @@ export const EventCompactRow = memo(function EventCompactRow({
             onError={() => setImgError(true)}
           />
         ) : (
-          // A bare `bg-muted` rectangle was survivable at 34px. At 64x80 beside
+          // A bare `bg-muted` rectangle was survivable at 34px. At 58x72 beside
           // real posters it reads as a broken image rather than an absent one —
           // so this row finally joins every sibling in the family in having a
           // designed fallback.
@@ -146,15 +204,28 @@ export const EventCompactRow = memo(function EventCompactRow({
             fire. */}
         <div
           className={cn(
-            "font-semibold leading-[1.35]",
+            "leading-[1.3]",
             "transition-colors duration-150 motion-reduce:transition-none",
-            isSm ? "text-[13.5px]" : "text-[13px]",
-            (href || onClick) && "group-hover:text-primary"
+            isSm
+              ? "text-[14.5px] lg:text-[13.5px]"
+              : "text-[14px] lg:text-[13px]",
+            isEnded
+              ? "font-semibold text-muted-foreground"
+              : "font-bold text-foreground lg:font-semibold",
+            (href || onClick) && "group-hover:text-primary",
           )}
         >
           {event.title}
         </div>
-        <div className="truncate text-[11.5px] text-muted-foreground">
+        {/* The meta line wraps rather than truncates once it carries chips:
+            a state chip pushed off the end would be the one thing the reader
+            needed. Venue is the only free-text part and it is what may wrap. */}
+        <div
+          className={cn(
+            "mt-1 flex items-center gap-1.5 text-[11.5px] text-muted-foreground",
+            isLive || showEnded ? "flex-wrap" : "truncate",
+          )}
+        >
           {subtitle ? (
             subtitle
           ) : (
@@ -162,29 +233,68 @@ export const EventCompactRow = memo(function EventCompactRow({
               {!hideTime && time && (
                 <>
                   <span className="font-mono tabular-nums">{time}</span>
-                  <span aria-hidden> · </span>
+                  {separator}
                 </>
               )}
-              {venue}
+              <span className="min-w-0 truncate">{venue}</span>
             </>
           )}
+          {isLive && (
+            <Tag
+              size="sm"
+              variant="success"
+              className="shrink-0 whitespace-nowrap font-extrabold"
+            >
+              <Radio className="h-2.5 w-2.5" aria-hidden />
+              {labels.liveNow}
+            </Tag>
+          )}
+          {showEnded && (
+            <Tag
+              size="sm"
+              variant="default"
+              className="shrink-0 whitespace-nowrap font-extrabold"
+            >
+              {endedLabel}
+            </Tag>
+          )}
         </div>
-        {tags && tags.length > 0 && (
-          <TagGroup className="mt-1">
-            {tags.map((tag) => (
-              <Tag key={tag} size="sm">
-                {tag}
-              </Tag>
-            ))}
-          </TagGroup>
+        {/* The last row: tags on the left, the fee on the right. Either half
+            may be absent; the row exists when at least one is there. */}
+        {((tags && tags.length > 0) || (showPrice && priceText)) && (
+          <div className="mt-1.5 flex items-center gap-2">
+            {tags && tags.length > 0 ? (
+              <TagGroup className="min-w-0 flex-1">
+                {tags.map((tag) => (
+                  <Tag key={tag} size="sm" variant="quiet">
+                    {tag}
+                  </Tag>
+                ))}
+              </TagGroup>
+            ) : (
+              <span className="flex-1" />
+            )}
+            {showPrice && priceText && (
+              <span
+                className={cn(
+                  "shrink-0 text-[13px] tabular-nums",
+                  fee.kind === "free"
+                    ? "font-semibold text-success"
+                    : "font-bold text-foreground",
+                )}
+              >
+                {priceText}
+              </span>
+            )}
+          </div>
         )}
       </div>
 
-      {fee.kind === "free" && (
+      {!showPrice && fee.kind === "free" && (
         <span
           className={cn(
             "inline-flex shrink-0 items-center rounded-full border border-success/40 px-2 font-semibold text-success",
-            isSm ? "h-[22px] text-[10.5px]" : "h-6 text-[11px]"
+            isSm ? "h-[22px] text-[10.5px]" : "h-6 text-[11px]",
           )}
         >
           {labels.free}
@@ -193,9 +303,9 @@ export const EventCompactRow = memo(function EventCompactRow({
     </>
   );
 
-  // `items-start`, not `items-center`: an 80px poster is taller than a one-line
-  // title over its sub-line, so centring floated the text in empty space.
-  // `EventListRow` already made this call at its own 72px poster.
+  // `items-start`, not `items-center`: a 72px-tall poster is taller than a
+  // one-line title over its sub-line, so centring floated the text in empty
+  // space. `EventListRow` makes the same call.
   //
   // THE HOVER WASH IS `bg-foreground/5`, AND THE TOKEN CHOICE IS LOAD-BEARING.
   // This row renders on two different planes: the timeline puts it straight on
@@ -211,11 +321,11 @@ export const EventCompactRow = memo(function EventCompactRow({
   // same shape `EventIndexRow` uses. No transform: this is a zero-gap stacked
   // list, so a lift would overlap its neighbours rather than read as elevation.
   const rootClasses = cn(
-    "group relative -mx-2.5 flex w-full items-start gap-[11px] rounded-lg px-2.5 py-2 text-left",
+    "group relative -mx-2.5 flex w-full items-start gap-3 rounded-lg px-2.5 py-[11px] text-left lg:gap-[11px] lg:py-2",
     "transition-colors duration-150 motion-reduce:transition-none",
     (href || onClick) &&
       "cursor-pointer hover:bg-foreground/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-    className
+    className,
   );
 
   if (href) {
@@ -223,7 +333,9 @@ export const EventCompactRow = memo(function EventCompactRow({
       <LinkComponent
         href={href}
         className={rootClasses}
-        onClick={onClick ? (mouseEvent) => onClick(event, mouseEvent) : undefined}
+        onClick={
+          onClick ? (mouseEvent) => onClick(event, mouseEvent) : undefined
+        }
       >
         {body}
       </LinkComponent>
@@ -232,7 +344,11 @@ export const EventCompactRow = memo(function EventCompactRow({
 
   if (onClick) {
     return (
-      <button type="button" className={rootClasses} onClick={(e) => onClick(event, e)}>
+      <button
+        type="button"
+        className={rootClasses}
+        onClick={(e) => onClick(event, e)}
+      >
         {body}
       </button>
     );
@@ -248,22 +364,30 @@ export type EventCompactRowSkeletonProps = {
 };
 
 /** Mirrors `<EventCompactRow>`'s geometry exactly so nothing shifts when data lands. */
-export function EventCompactRowSkeleton({ size = "default", className }: EventCompactRowSkeletonProps) {
+export function EventCompactRowSkeleton({
+  size = "default",
+  className,
+}: EventCompactRowSkeletonProps) {
   const isSm = size === "sm";
 
   return (
     <div
       aria-hidden="true"
       className={cn(
-        "relative -mx-2.5 flex w-full items-start gap-[11px] rounded-lg px-2.5 py-2 text-left",
-        className
+        "relative -mx-2.5 flex w-full items-start gap-3 rounded-lg px-2.5 py-[11px] text-left lg:gap-[11px] lg:py-2",
+        className,
       )}
     >
-      <Skeleton className="aspect-[4/5] w-16 shrink-0 rounded-[9px]" />
+      <Skeleton className="aspect-[4/5] w-16 shrink-0 rounded-[10px]" />
 
       <div className="min-w-0 flex-1">
-        <Skeleton className={cn(isSm ? "h-[13.5px]" : "h-[13px]", "w-2/5")} />
-        <Skeleton className="mt-0.5 h-[11.5px] w-1/3" />
+        <Skeleton
+          className={cn(
+            isSm ? "h-[14.5px] lg:h-[13.5px]" : "h-[14px] lg:h-[13px]",
+            "w-3/5",
+          )}
+        />
+        <Skeleton className="mt-1 h-[11.5px] w-1/3" />
       </div>
     </div>
   );

package/src/components/event-day-header.tsx

@@ -76,7 +76,9 @@ export function EventDayHeader({
       <div
         className={cn(
           "font-black leading-[0.82] tracking-[-0.05em] tabular-nums",
-          large ? "text-[58px]" : "text-[40px]"
+          // `sm` is the phone scale: 30px, the design's app day head. 40px
+          // was a page-scale number that took a third of a 390px row.
+          large ? "text-[58px]" : "text-[30px] leading-[0.86]"
         )}
       >
         {dayNumber}

package/src/components/event-day-separator.tsx

@@ -28,6 +28,12 @@ import { Skeleton } from "./skeleton";
  */
 
 export type EventDaySeparatorProps = {
+  /**
+   * `always` (default) draws the trailing rule at every width. `lg` drops it
+   * below `lg`, where the list is an app sheet whose day heads are bold
+   * labels alone — the rows below rule themselves — and keeps it from `lg`.
+   */
+  rule?: "always" | "lg";
   label: string;
   count?: string;
   size?: "sm" | "default";
@@ -42,6 +48,7 @@ export function EventDaySeparator({
   size = "default",
   as: Tag = "h2",
   className,
+  rule = "always",
 }: EventDaySeparatorProps) {
   return (
     <div
@@ -61,7 +68,7 @@ export function EventDaySeparator({
         </span>
       )}
 
-      <Separator className="flex-1" />
+      <Separator className={cn("flex-1", rule === "lg" && "hidden lg:block")} />
     </div>
   );
 }