@bearmenu/ui 0.8.7 → 0.8.8

package/src/components/event-list-row.test.tsx

@@ -0,0 +1,53 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { EventListRow } from "./event-list-row";
+import type { EventDateBadgeFormatters, EventListRowLabels, EventPreview } from "./event-types";
+
+const labels: EventListRowLabels = { free: "Free", liveNow: "Live now", soldOut: "Sold out" };
+
+const formatters: EventDateBadgeFormatters = {
+  time: () => "20:00",
+  day: () => "Mon, Sep 7",
+  price: (amount) => `${amount} RON`,
+  dayNumber: () => "07",
+  monthShort: () => "SEP",
+};
+
+const event: EventPreview = {
+  id: "e1",
+  title: "Klausen Quiz by GOtrivia",
+  location: "Klausen Pubhouse",
+  starts_at: "2026-09-07T20:00:00Z",
+  place_name: "Klausen Pubhouse",
+  entry_fee: 20,
+};
+
+describe("EventListRow", () => {
+  it("renders the date badge by default and drops it with hideDate", () => {
+    const { rerender } = render(<EventListRow event={event} labels={labels} formatters={formatters} />);
+    expect(screen.getByText("07")).toBeInTheDocument();
+    expect(screen.getByText("SEP")).toBeInTheDocument();
+
+    rerender(<EventListRow event={event} labels={labels} formatters={formatters} hideDate />);
+    expect(screen.queryByText("07")).not.toBeInTheDocument();
+    expect(screen.queryByText("SEP")).not.toBeInTheDocument();
+  });
+
+  it("keeps the fee, the time and the venue with the badge gone", () => {
+    render(<EventListRow event={event} labels={labels} formatters={formatters} hideDate />);
+    expect(screen.getByText("20 RON")).toBeInTheDocument();
+    expect(screen.getByText("20:00")).toBeInTheDocument();
+    expect(screen.getByText("Klausen Pubhouse")).toBeInTheDocument();
+  });
+
+  it("replaces the fee with the sold-out chip", () => {
+    render(<EventListRow event={event} labels={labels} formatters={formatters} isSoldOut />);
+    expect(screen.getByText("Sold out")).toBeInTheDocument();
+    expect(screen.queryByText("20 RON")).not.toBeInTheDocument();
+  });
+
+  it("shows the live chip when isLive", () => {
+    render(<EventListRow event={event} labels={labels} formatters={formatters} isLive hideDate />);
+    expect(screen.getByText("Live now")).toBeInTheDocument();
+  });
+});

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

@@ -34,11 +34,17 @@ import {
  * has the width for one and its row root is a container rather than a single
  * anchor. If a CTA comes back here, it has to be a real one, not a span.
  *
- * NOTE ON WEIGHT: nothing in this row is heavier than 600, and only the title
- * and the date badge reach it. Eight of these stack per screen, and at that
- * density hierarchy comes from size and ink tier, not from weight — a field of
- * bold text has no foreground. `Free` is the one exception (600 plus
- * `text-success`), because it is an inducement rather than an attribute.
+ * NOTE ON WEIGHT: the title and the fee are the only bold things in this row.
+ * Eight of these stack per screen, and at that density hierarchy comes from
+ * size and ink tier as much as weight — so everything below the title line is
+ * regular, muted, and small. The fee is bold because it is the row's one
+ * inducement, and it sits on the TITLE line, right-aligned, where a price is
+ * read against the thing it buys rather than lost among the meta.
+ *
+ * NOTE ON THE DATE BADGE: `hideDate` drops it. Inside a dated group — the list
+ * view's "Today · Monday 7 September" separators — every row's badge repeats
+ * the heading eight times per screen; the heading carries the date and the
+ * rows carry the time. The badge stays available for undated lists.
  *
  * Same contract as the rest: DS-owned view model, injected labels and
  * formatters, plain `<img>`, anchor whenever `href` is given.
@@ -86,6 +92,11 @@ export type EventListRowProps = {
    * line. Same prop and same reason as `EventListRowWide` and `EventIndexRow`.
    */
   hideRule?: boolean;
+  /**
+   * Drops the leading date badge. Pass it when the rows sit under a dated
+   * heading that already names the day; the row then leads with its poster.
+   */
+  hideDate?: boolean;
 };
 
 export const EventListRow = memo(function EventListRow({
@@ -102,6 +113,7 @@ export const EventListRow = memo(function EventListRow({
   tags,
   fallback = <EventPosterFallback />,
   hideRule,
+  hideDate,
 }: EventListRowProps) {
   const [imgError, setImgError] = useState(false);
 
@@ -132,28 +144,35 @@ export const EventListRow = memo(function EventListRow({
           `isLive` alone, so the only filled badge on screen is the live one.
           The geometry is identical either way, so nothing shifts when the
           tint appears. */}
-      <div
-        className={cn("w-[42px] shrink-0 rounded-[9px] py-1.5 text-center", isLive && "bg-success/10")}
-      >
-        <div
-          className={cn(
-            "text-sm font-semibold leading-none tabular-nums",
-            isLive ? "text-success" : "text-foreground"
-          )}
-        >
-          {formatters.dayNumber(event.starts_at)}
-        </div>
+      {!hideDate && (
         <div
           className={cn(
-            "mt-[3px] text-[10px] font-semibold tracking-[0.06em]",
-            isLive ? "text-success" : "text-muted-foreground"
+            "w-[42px] shrink-0 rounded-[9px] py-1.5 text-center",
+            isLive && "bg-success/10",
           )}
         >
-          {formatters.monthShort(event.starts_at)}
+          <div
+            className={cn(
+              "text-sm font-semibold leading-none tabular-nums",
+              isLive ? "text-success" : "text-foreground",
+            )}
+          >
+            {formatters.dayNumber(event.starts_at)}
+          </div>
+          <div
+            className={cn(
+              "mt-[3px] text-[10px] font-semibold tracking-[0.06em]",
+              isLive ? "text-success" : "text-muted-foreground",
+            )}
+          >
+            {formatters.monthShort(event.starts_at)}
+          </div>
         </div>
-      </div>
+      )}
 
-      <div className="aspect-square w-[72px] shrink-0 overflow-hidden rounded-[9px] bg-muted">
+      {/* Portrait, for the same reason `EventCompactRow` gives: most posters
+          are 4:5 flyers and a square crop throws away the act and the date. */}
+      <div className="aspect-[4/5] w-[58px] shrink-0 overflow-hidden rounded-[10px] bg-muted">
         {showPoster ? (
           // eslint-disable-next-line @next/next/no-img-element
           <img
@@ -170,41 +189,30 @@ export const EventListRow = memo(function EventListRow({
       </div>
 
       <div className="min-w-0 flex-1">
-        {/* Full title, never clamped. The row is `items-start`, so extra lines
-            grow the row downward past the 72px poster instead of squeezing
-            anything. */}
-        <div className="text-[15px] font-semibold leading-[1.3] tracking-[-0.01em]">{event.title}</div>
-
-        {/* WHEN and WHERE, with the fee pinned right. Time leads because a
-            time-sorted day group scans down that column. No `·` between time
-            and venue: the `MapPin` is the field marker, so a dot as well is
-            two separators doing one job — the glyph costs 6px net, not 16.
-            The pin is the same one the filter rail uses for VENUE. */}
-        <div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
-          <span className="shrink-0 tabular-nums text-foreground">
-            {formatters.time(event.starts_at)}
-          </span>
-
-          <span className="flex min-w-0 flex-1 items-center gap-1">
-            <MapPin className="h-3 w-3 shrink-0" aria-hidden />
-            <span className="truncate">{venue}</span>
-          </span>
-
-          {/* A sold-out event's price is not a fact anyone needs, so the chip
-              takes the fee's slot rather than sitting beside it. The fee stays
-              on THIS line rather than joining the chips: it is the row's only
-              inducement, and among decorative chips it would either become one
-              or duplicate the live chip's green with a second meaning. */}
+        {/* TITLE with the fee pinned right. Full title, never clamped: the
+            row is `items-start`, so extra lines grow the row downward past
+            the poster instead of squeezing anything. The fee is the one bold
+            thing beside it; a sold-out event's price is not a fact anyone
+            needs, so the chip takes the fee's slot rather than sitting
+            beside it. */}
+        <div className="flex items-start gap-2.5">
+          <div className="min-w-0 flex-1 text-[14px] font-bold leading-[1.3] tracking-[-0.01em]">
+            {event.title}
+          </div>
           {isSoldOut ? (
-            <Tag size="sm" variant="quiet" className="shrink-0 whitespace-nowrap">
+            <Tag
+              size="sm"
+              variant="quiet"
+              className="shrink-0 whitespace-nowrap"
+            >
               {labels.soldOut}
             </Tag>
           ) : (
             priceText && (
               <span
                 className={cn(
-                  "shrink-0 tabular-nums",
-                  fee.kind === "free" && "font-semibold text-success"
+                  "shrink-0 text-[13.5px] font-extrabold tabular-nums",
+                  fee.kind === "free" ? "text-success" : "text-foreground",
                 )}
               >
                 {priceText}
@@ -213,32 +221,56 @@ export const EventListRow = memo(function EventListRow({
           )}
         </div>
 
-        {/* WHAT. Status first, then attributes. Live is the only FILLED chip
-            on the surface, exactly as it is the only filled date badge —
-            under deuteranopia the green/grey hues converge, so the fill and
-            the `Radio` glyph are what actually separate it, not the hue.
+        {/* WHEN and WHERE, then the live chip. Time leads because a
+            time-sorted day group scans down that column. The `MapPin` is the
+            venue's field marker, so the dot before it is the only separator.
+            Live is the only FILLED chip on the surface — under deuteranopia
+            the green/grey hues converge, so the fill and the `Radio` glyph
+            are what actually separate it, not the hue. */}
+        <div className="mt-1 flex items-center gap-1.5 text-[11.5px] text-muted-foreground">
+          <span className="shrink-0 font-mono tabular-nums">
+            {formatters.time(event.starts_at)}
+          </span>
+          <span aria-hidden className="text-border">
+            ·
+          </span>
+          <span className="flex min-w-0 items-center gap-1">
+            <MapPin className="h-3 w-3 shrink-0" aria-hidden />
+            <span className="truncate">{venue}</span>
+          </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>
+          )}
+        </div>
 
-            `h-[22px] overflow-hidden` is the overflow mechanism: `TagGroup`
-            already wraps, so a chip that does not fit moves to a second line
-            that is clipped away, and it disappears WHOLE. No half-chips, no
-            ellipsis inside a pill, and it is width-safe for caller strings of
-            any length — which a fixed count is not. Deliberately no "+2"
-            counter: nothing in this row is tappable, so a counter would
-            promise a disclosure that does not exist, eight times per screen.
+        {/* WHAT. `h-[22px] overflow-hidden` is the overflow mechanism:
+            `TagGroup` already wraps, so a chip that does not fit moves to a
+            second line that is clipped away, and it disappears WHOLE. No
+            half-chips, no ellipsis inside a pill, and it is width-safe for
+            caller strings of any length — which a fixed count is not.
+            Deliberately no "+2" counter: nothing in this row is tappable, so
+            a counter would promise a disclosure that does not exist, eight
+            times per screen.
 
             The line collapses when there is nothing to say. A "Tags" filler
             would be the same mistake as "Price TBA" — the row's spare slot
             announcing an absence. */}
-        {(isLive || (tags && tags.length > 0)) && (
+        {tags && tags.length > 0 && (
           <TagGroup className="mt-1.5 h-[22px] overflow-hidden">
-            {isLive && (
-              <Tag size="sm" variant="success" className="shrink-0 whitespace-nowrap">
-                <Radio className="h-2.5 w-2.5" aria-hidden />
-                {labels.liveNow}
-              </Tag>
-            )}
-            {tags?.map((tag) => (
-              <Tag key={tag} size="sm" variant="quiet" className="shrink-0 whitespace-nowrap">
+            {tags.map((tag) => (
+              <Tag
+                key={tag}
+                size="sm"
+                variant="quiet"
+                className="shrink-0 whitespace-nowrap"
+              >
                 {tag}
               </Tag>
             ))}
@@ -249,14 +281,14 @@ export const EventListRow = memo(function EventListRow({
   );
 
   const rootClasses = cn(
-    // `py-3`, not `py-3.5`: the chip line adds a third line back, and 8px of
-    // padding pays for most of it. Rows with a one-line title and no chips are
-    // still poster-driven and end up SHORTER than before.
-    "relative flex w-full items-start gap-3 py-3 text-left",
+    // `py-[11px]`: the poster is 72px tall and a one-line title, meta and a
+    // chip line come to ~70px, so the row is poster-driven at ~94px — about
+    // eight per screen, which is the list view's reason to exist.
+    "relative flex w-full items-start gap-3 py-[11px] text-left",
     isSoldOut && "opacity-60",
     (href || onClick) &&
       "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-    className
+    className,
   );
 
   if (href) {
@@ -264,7 +296,9 @@ export const EventListRow = memo(function EventListRow({
       <LinkComponent
         href={href}
         className={rootClasses}
-        onClick={onClick ? (mouseEvent) => onClick(event, mouseEvent) : undefined}
+        onClick={
+          onClick ? (mouseEvent) => onClick(event, mouseEvent) : undefined
+        }
       >
         {body}
       </LinkComponent>
@@ -273,7 +307,11 @@ export const EventListRow = memo(function EventListRow({
 
   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>
     );
@@ -285,6 +323,8 @@ export const EventListRow = memo(function EventListRow({
 export type EventListRowSkeletonProps = {
   /** Matches `EventListRowProps["hideRule"]` — drop the top rule on the first row of a day group. */
   hideRule?: boolean;
+  /** Matches `EventListRowProps["hideDate"]`. */
+  hideDate?: boolean;
   /** Reserve the chip line. Matches the real row, where it collapses on events with no live status and no tags. */
   showTags?: boolean;
   className?: string;
@@ -293,34 +333,42 @@ export type EventListRowSkeletonProps = {
 /** Mirrors `<EventListRow>`'s geometry exactly so nothing shifts when data lands. */
 export function EventListRowSkeleton({
   hideRule,
+  hideDate,
   showTags = true,
   className,
 }: EventListRowSkeletonProps) {
   return (
     <div
       aria-hidden="true"
-      className={cn("relative flex w-full items-start gap-3 py-3 text-left", className)}
+      className={cn(
+        "relative flex w-full items-start gap-3 py-[11px] text-left",
+        className,
+      )}
     >
       {!hideRule && <Separator className="absolute inset-x-0 top-0" />}
 
-      <div className="w-[42px] shrink-0 rounded-[9px] py-1.5 text-center">
-        <Skeleton className="mx-auto h-4 w-5" />
-        <Skeleton className="mx-auto mt-[3px] h-[10px] w-6" />
-      </div>
+      {!hideDate && (
+        <div className="w-[42px] shrink-0 rounded-[9px] py-1.5 text-center">
+          <Skeleton className="mx-auto h-4 w-5" />
+          <Skeleton className="mx-auto mt-[3px] h-[10px] w-6" />
+        </div>
+      )}
 
-      <Skeleton className="aspect-square w-[72px] shrink-0 rounded-[9px]" />
+      <Skeleton className="aspect-[4/5] w-[58px] shrink-0 rounded-[10px]" />
 
       <div className="min-w-0 flex-1">
-        <div className="space-y-1">
-          <Skeleton className="h-[15px] w-full" />
-          <Skeleton className="h-[15px] w-2/3" />
+        <div className="flex items-start gap-2.5">
+          <div className="min-w-0 flex-1 space-y-1">
+            <Skeleton className="h-[14px] w-full" />
+            <Skeleton className="h-[14px] w-2/3" />
+          </div>
+          <Skeleton className="h-[13.5px] w-12 shrink-0" />
         </div>
 
-        <div className="mt-1 flex items-center gap-2">
+        <div className="mt-1 flex items-center gap-1.5">
           <Skeleton className="h-3 w-10" />
           <Skeleton className="h-3 w-3 shrink-0 rounded-full" />
           <Skeleton className="h-3 w-24" />
-          <Skeleton className="ml-auto h-3 w-12" />
         </div>
 
         {showTags && (

package/src/components/hour-band.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { HourBand, HourBandSkeleton } from "./hour-band";
 import { EventCard } from "./event-card";
+import { EventCompactRow } from "./event-compact-row";
 import type { EventCardLabels, EventFormatters, EventPreview } from "./event-types";
 
 const labels: EventCardLabels = { free: "Free", liveNow: "Live now" };
@@ -35,7 +36,7 @@ const meta: Meta<typeof HourBand> = {
     docs: {
       description: {
         component:
-          "One hour of the timeline: a 52px gutter with a hairline and an hour puck, and that hour's events beside it. The cards inside carry no timestamp of their own — the band is the timestamp, which is why they are rendered with `hideWhen`.",
+          "One hour of the mobile timeline: a 58px gutter with a filled hour chip and a hairline dropping from beneath it, and that hour's rows beside it, ruled between. The rows carry no timestamp of their own — the band is the timestamp, which is why cards render with `hideWhen` and compact rows with `hideTime`.",
       },
     },
   },
@@ -66,7 +67,7 @@ export const Default: Story = {
   },
 };
 
-/** The live hour: green-bordered puck, NOW label, and the content column shifted to clear it. */
+/** The live hour: tinted chip and hairline. The live label is screen-reader only in this variant. */
 export const Live: Story = {
   args: {
     time: "20:00",
@@ -84,6 +85,28 @@ export const Live: Story = {
   },
 };
 
+/** The shipped mobile shape: compact rows, ruled between, inside one band. */
+export const CompactRows: Story = {
+  render: () => (
+    <HourBand time="20:00" isLive liveLabel="Now on">
+      <EventCompactRow
+        event={event("r1", "Klausen Quiz by GOtrivia", "Klausen Pubhouse", 20)}
+        labels={labels}
+        formatters={formatters}
+        hideTime
+        tags={["Drinks", "Games"]}
+      />
+      <EventCompactRow
+        event={event("r2", "Quiz Night at Café del Mars", "Del Mars", 10)}
+        labels={labels}
+        formatters={formatters}
+        hideTime
+        tags={["Games"]}
+      />
+    </HourBand>
+  ),
+};
+
 /** A single event in a quiet hour. */
 export const OneEvent: Story = {
   args: {
@@ -133,9 +156,9 @@ export const StackedHours: Story = {
 };
 
 /**
- * Loading. The puck is omitted rather than blocked out — the hour isn't known
- * until data lands, and a grey lozenge sitting on the axis reads as a real but
- * unreadable timestamp. The hairline alone still says "time axis".
+ * Loading. The chip is blocked out at its fixed 58x24 size — a grey lozenge
+ * of that exact shape reads as "a time goes here" without inventing one — and
+ * the rows mirror `EventCompactRowSkeleton`.
  */
 export const Loading: Story = {
   render: () => <HourBandSkeleton />,