@flamingo-stack/openframe-frontend-core 0.0.558 → 0.0.559-snapshot.20260820073254

package/src/components/features/__tests__/video-bites-shared.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest'
+import {
+  sortBitesByCreatedAtDesc,
+  sortBitesByFeaturedAtDesc,
+} from '../video-bites-shared'
+import type { VideoTeaser } from '../../../types/video-processing'
+
+const bite = (overrides: Partial<VideoTeaser>): VideoTeaser => ({
+  url: `https://cdn.example/${Math.abs(JSON.stringify(overrides).length)}.mp4`,
+  ...overrides,
+})
+
+describe('sortBitesByCreatedAtDesc', () => {
+  it('orders newest created_at first', () => {
+    const a = bite({ created_at: '2026-01-01T00:00:00Z' })
+    const b = bite({ created_at: '2026-02-01T00:00:00Z' })
+    expect([a, b].sort(sortBitesByCreatedAtDesc)).toEqual([b, a])
+  })
+
+  it('sorts bites without created_at last', () => {
+    const dated = bite({ created_at: '2026-01-01T00:00:00Z' })
+    const undated = bite({})
+    expect([undated, dated].sort(sortBitesByCreatedAtDesc)).toEqual([dated, undated])
+  })
+})
+
+describe('sortBitesByFeaturedAtDesc', () => {
+  it('ranks a recently-featured OLD bite above a newer un-restamped one', () => {
+    // The 2026-08-18 homepage regression: an old clip starred today must
+    // outrank clips created later but featured earlier.
+    const oldClipFeaturedToday = bite({
+      created_at: '2026-07-14T00:00:00Z',
+      featured_at: '2026-08-18T00:00:00Z',
+    })
+    const newerClipNoStamp = bite({ created_at: '2026-07-17T00:00:00Z' })
+    expect([newerClipNoStamp, oldClipFeaturedToday].sort(sortBitesByFeaturedAtDesc)).toEqual([
+      oldClipFeaturedToday,
+      newerClipNoStamp,
+    ])
+  })
+
+  it('ranks by featured_at only — created_at never influences featured order', () => {
+    // No date-fallback ranking: all featured bites carry the stamp (write
+    // path + 2026-08-19 backfill).
+    const staleStampNewClip = bite({
+      created_at: '2026-08-01T00:00:00Z',
+      featured_at: '2026-01-01T00:00:00Z',
+    })
+    const freshStampOldClip = bite({
+      created_at: '2026-01-01T00:00:00Z',
+      featured_at: '2026-08-01T00:00:00Z',
+    })
+    expect([staleStampNewClip, freshStampOldClip].sort(sortBitesByFeaturedAtDesc)).toEqual([
+      freshStampOldClip,
+      staleStampNewClip,
+    ])
+  })
+
+  it('sorts unstamped bites last (mid-deploy transient only)', () => {
+    const stamped = bite({ featured_at: '2026-01-01T00:00:00Z' })
+    const bare = bite({ created_at: '2026-08-01T00:00:00Z' })
+    expect([bare, stamped].sort(sortBitesByFeaturedAtDesc)).toEqual([stamped, bare])
+  })
+})

package/src/components/features/board/board-column-header.tsx

@@ -2,7 +2,8 @@
 
 import { Button } from '../../ui/button/button'
 import { TicketStatusTag, resolveTicketStatus } from '../../ui/ticket-status-tag'
-import { Arrow02LeftIcon, Arrow02RightIcon, BoxArchiveIcon, PlusIcon } from '../../icons-v2-generated'
+import { TouchFriendlyTooltip } from '../../ui/touch-friendly-tooltip'
+import { Arrow02LeftIcon, Arrow02RightIcon, BoxArchiveIcon, InfoCircleIcon, PlusIcon } from '../../icons-v2-generated'
 import type { BoardColumnDef } from './types'
 
 export interface BoardColumnHeaderProps {
@@ -60,6 +61,18 @@ export function BoardColumnHeader({
         </span>
       </div>
       <div className="flex shrink-0 items-center gap-[var(--spacing-system-xxs)]">
+        {column.tooltip && (
+          <TouchFriendlyTooltip content={column.tooltip} side="bottom">
+            <Button
+              variant="transparent"
+              size="icon"
+              className="h-8 w-8 md:h-8 md:w-8 p-0"
+              aria-label={column.tooltip}
+            >
+              <InfoCircleIcon className="h-6 w-6 text-ods-text-secondary" />
+            </Button>
+          </TouchFriendlyTooltip>
+        )}
         <Button
           variant="transparent"
           size="icon"

package/src/components/features/board/types.ts

@@ -76,6 +76,12 @@ export interface BoardColumnDef {
   statusKey?: string
   label: string
   color: string
+  /**
+   * What this column's status means, shown from an info icon in the header
+   * (e.g. the system-status descriptions from the status settings page). No
+   * icon is rendered when absent.
+   */
+  tooltip?: string
   tickets: BoardTicket[]
 
   total?: number
@@ -117,6 +123,7 @@ export function columnFromTicketStatus(
     id: status,
     label: overrides.label ?? defaults.label,
     color: overrides.color ?? defaults.color,
+    tooltip: overrides.tooltip,
     tickets,
     total: overrides.total,
     hasMore: overrides.hasMore,

package/src/components/features/video-bites-shared.ts

@@ -60,3 +60,19 @@ export function sortBitesByCreatedAtDesc(a: VideoTeaser, b: VideoTeaser): number
   if (!b.created_at) return -1
   return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
 }
+
+/**
+ * FEATURED-recency comparator: `featured_at` DESC — the stamp every featured
+ * bite carries (written by the admin star toggle; pre-existing featured bites
+ * were backfilled 2026-08-19, so there is no date-fallback ranking). The
+ * comparator FEATURED surfaces (the cross-entity aggregation + its strips)
+ * must use — ranking those surfaces by `created_at` made featuring any older
+ * bite a silent no-op once the surface cap filled with newer bites. A missing
+ * stamp (only possible from a stale mid-deploy writer) sorts last.
+ */
+export function sortBitesByFeaturedAtDesc(a: VideoTeaser, b: VideoTeaser): number {
+  if (!a.featured_at && !b.featured_at) return 0
+  if (!a.featured_at) return 1
+  if (!b.featured_at) return -1
+  return new Date(b.featured_at).getTime() - new Date(a.featured_at).getTime()
+}

package/src/components/features/video-bites-strip.tsx

@@ -88,6 +88,10 @@ export interface VideoBitesStripProps {
   showChevrons?: boolean;
   /** Section-level navigation fallback (per-bite `href`/`onNavigate` win). */
   onBiteNavigate?: (bite: VideoBiteStripItem, index: number) => void;
+  /** Ordering comparator. Default `sortBitesByCreatedAtDesc`; FEATURED
+   *  surfaces pass `sortBitesByFeaturedAtDesc` so display order matches the
+   *  featured-recency ranking their server aggregation is capped by. */
+  sortComparator?: (a: VideoBiteStripItem, b: VideoBiteStripItem) => number;
   className?: string;
 }
 
@@ -110,12 +114,13 @@ export function VideoBitesStrip({
   cardHeightMobile = 300,
   showChevrons = true,
   onBiteNavigate,
+  sortComparator = sortBitesByCreatedAtDesc,
   className,
 }: VideoBitesStripProps): React.ReactElement | null {
   const items = useMemo(() => {
     const filtered = filterPublished ? bites.filter(b => b.published) : [...bites];
-    return filtered.sort(sortBitesByCreatedAtDesc);
-  }, [bites, filterPublished]);
+    return filtered.sort(sortComparator);
+  }, [bites, filterPublished, sortComparator]);
 
   // Preconnect Mux/Supabase origins once so first hover starts fast.
   const warmup = useVideoWarmup<HTMLDivElement>({ videoUrl: items[0]?.url || null });

package/src/components/ui/index.ts

@@ -116,6 +116,7 @@ export * from './tag'
 export * from './title-content-block'
 export * from './toggle'
 export * from './tooltip'
+export * from './touch-friendly-tooltip'
 export * from './error-state'
 export * from './content-loader'
 

package/src/components/ui/ticket-status-config-row.tsx

@@ -11,7 +11,7 @@ import { ColorPresetSelect, ColorPickerInput } from './color-preset-select'
 import { Input } from './input'
 import { type TagProps } from './tag'
 import { TicketStatusTag } from './ticket-status-tag'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip'
+import { TouchFriendlyTooltip } from './touch-friendly-tooltip'
 
 type SystemTagVariant = Extract<TagProps['variant'], 'outline' | 'primary'>
 
@@ -37,56 +37,6 @@ export interface TicketStatusConfigRowProps {
   isDragging?: boolean
 }
 
-let dismissOpenTooltip: (() => void) | null = null
-
-function WithLeftTooltip({ content, children }: { content?: string; children: React.ReactElement }) {
-  const [open, setOpen] = React.useState(false)
-  const isTouchRef = React.useRef(false)
-  const close = React.useCallback(() => setOpen(false), [])
-
-  if (!content) return children
-
-  const toggleFromTouch = () => {
-    setOpen(prev => {
-      const next = !prev
-      if (next) {
-        if (dismissOpenTooltip && dismissOpenTooltip !== close) dismissOpenTooltip()
-        dismissOpenTooltip = close
-      } else if (dismissOpenTooltip === close) {
-        dismissOpenTooltip = null
-      }
-      return next
-    })
-  }
-
-  return (
-    <TooltipProvider delayDuration={150}>
-      <Tooltip open={open} onOpenChange={setOpen}>
-        <TooltipTrigger
-          asChild
-          onPointerDown={e => {
-            isTouchRef.current = e.pointerType === 'touch'
-            if (!isTouchRef.current) return
-            e.preventDefault()
-            toggleFromTouch()
-          }}
-          onFocus={e => {
-            if (isTouchRef.current) e.preventDefault()
-          }}
-          onClick={e => {
-            if (isTouchRef.current) e.preventDefault()
-          }}
-        >
-          {children}
-        </TooltipTrigger>
-        <TooltipContent side="left" className="max-w-xs">
-          {content}
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  )
-}
-
 export function TicketStatusConfigRow({
   variant,
   statusKey,
@@ -179,7 +129,7 @@ export function TicketStatusConfigRow({
 
       <div className="flex h-11 w-12 shrink-0 items-center justify-center md:h-12">
         {isSystem ? (
-          <WithLeftTooltip content={systemTooltip}>
+          <TouchFriendlyTooltip content={systemTooltip}>
             <button
               type="button"
               aria-label={systemTooltip ?? 'System status'}
@@ -187,9 +137,9 @@ export function TicketStatusConfigRow({
             >
               <InfoCircleIcon size={24} />
             </button>
-          </WithLeftTooltip>
+          </TouchFriendlyTooltip>
         ) : (
-          <WithLeftTooltip content={deleteDisabled ? deleteDisabledReason : undefined}>
+          <TouchFriendlyTooltip content={deleteDisabled ? deleteDisabledReason : undefined}>
             <span className="inline-flex">
               <Button
                 type="button"
@@ -203,7 +153,7 @@ export function TicketStatusConfigRow({
                 <TrashIcon className="text-ods-error"/>
               </Button>
             </span>
-          </WithLeftTooltip>
+          </TouchFriendlyTooltip>
         )}
       </div>
     </div>

package/src/components/ui/touch-friendly-tooltip.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import * as React from 'react'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip'
+
+/**
+ * The one tooltip allowed open at a time, across every instance — tapping a
+ * second trigger dismisses the first, since touch has no "mouse left" to close
+ * it. Module-level on purpose: instances live in unrelated subtrees.
+ */
+let dismissOpenTooltip: (() => void) | null = null
+
+export interface TouchFriendlyTooltipProps {
+  /** Tooltip text; when absent the children render bare, with no trigger wiring. */
+  content?: string
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  children: React.ReactElement
+}
+
+/**
+ * Hover tooltip that also works on touch, where Radix's hover/focus model never
+ * opens: a tap toggles it instead. Wraps its own `TooltipProvider`, so it can be
+ * dropped anywhere without a provider up the tree.
+ */
+export function TouchFriendlyTooltip({ content, side = 'left', children }: TouchFriendlyTooltipProps) {
+  const [open, setOpen] = React.useState(false)
+  const isTouchRef = React.useRef(false)
+  const close = React.useCallback(() => setOpen(false), [])
+
+  if (!content) return children
+
+  const toggleFromTouch = () => {
+    setOpen(prev => {
+      const next = !prev
+      if (next) {
+        if (dismissOpenTooltip && dismissOpenTooltip !== close) dismissOpenTooltip()
+        dismissOpenTooltip = close
+      } else if (dismissOpenTooltip === close) {
+        dismissOpenTooltip = null
+      }
+      return next
+    })
+  }
+
+  return (
+    <TooltipProvider delayDuration={150}>
+      <Tooltip open={open} onOpenChange={setOpen}>
+        <TooltipTrigger
+          asChild
+          onPointerDown={e => {
+            isTouchRef.current = e.pointerType === 'touch'
+            if (!isTouchRef.current) return
+            e.preventDefault()
+            toggleFromTouch()
+          }}
+          onFocus={e => {
+            if (isTouchRef.current) e.preventDefault()
+          }}
+          onClick={e => {
+            if (isTouchRef.current) e.preventDefault()
+          }}
+        >
+          {children}
+        </TooltipTrigger>
+        <TooltipContent side={side} className="max-w-xs">
+          {content}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}

package/src/types/video-processing.ts

@@ -19,6 +19,7 @@ export interface VideoTeaser {
   thumbnail_url?: string // Optional thumbnail image URL for video preview. If not provided, video player will show first frame automatically.
   published?: boolean // Controls visibility on public preview page (default: false, admin must select)
   featured?: boolean // Opts the bite into cross-entity featured pulls (homepage/configured surfaces). Independent of `published`.
+  featured_at?: string // ISO timestamp stamped when an admin features the bite (cleared on unfeature; all featured bites backfilled 2026-08-19). Featured surfaces rank by THIS — ranking by created_at made featuring an old bite invisible under the surface cap.
   source?: 'manual' | 'ai_generated' // Track origin of teaser
   created_at?: string // ISO timestamp for sorting (newer items first)
   start_time_ms?: number // Vizard extraction: clip start offset in the source video