@igstack/app-catalog-frontend-core 6.10.3 → 6.11.0

package/src/modules/communityTools/ui/FeedRow.tsx

@@ -0,0 +1,310 @@
+import type {
+  CommunityTool,
+  FeedSort,
+  MatchField,
+} from '@igstack/app-catalog-shared-core'
+import { Link } from '@tanstack/react-router'
+import {
+  CornerDownLeft,
+  ExternalLink,
+  Eye,
+  Globe,
+  PanelRight,
+} from 'lucide-react'
+import { cn } from '~/lib/utils'
+import { highlightTokens } from '~/util/highlightMatches'
+import { timeAgo } from '../timeAgo'
+import { LifecycleBadge, UnreviewedBadge } from './LifecycleBadge'
+import { LikeButton } from './LikeButton'
+import { PinButton } from './PinButton'
+
+export function screenshotUrl(id: string, size: number): string {
+  return `/api/screenshots/${id}?size=${size}`
+}
+
+/** The tool's screenshot, cropped to its top-left, or a globe when there is none. */
+export function ToolThumb({
+  tool,
+  size,
+  className,
+}: {
+  tool: CommunityTool
+  size: number
+  className?: string
+}) {
+  return (
+    <div
+      className={cn(
+        'flex shrink-0 items-center justify-center overflow-hidden border border-border bg-muted text-muted-foreground',
+        className,
+      )}
+    >
+      {tool.screenshotId ? (
+        <img
+          src={screenshotUrl(tool.screenshotId, size)}
+          alt=""
+          loading="lazy"
+          className="size-full object-cover object-left-top"
+        />
+      ) : (
+        <Globe aria-hidden="true" className="size-1/4 min-w-4" />
+      )}
+    </div>
+  )
+}
+
+const AVATAR_TONES = [
+  'bg-orange-200',
+  'bg-sky-200',
+  'bg-lime-200',
+  'bg-amber-200',
+  'bg-rose-200',
+  'bg-violet-200',
+]
+
+export function PersonAvatar({ name }: { name: string }) {
+  const initials = name
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((w) => w.charAt(0).toUpperCase())
+    .join('')
+  let hash = 0
+  for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) | 0
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        'inline-flex size-[22px] shrink-0 items-center justify-center rounded-full text-[9.5px] font-extrabold text-stone-700',
+        AVATAR_TONES[Math.abs(hash) % AVATAR_TONES.length],
+      )}
+    >
+      {initials}
+    </span>
+  )
+}
+
+const FIELD_LABELS: Record<MatchField, string> = {
+  name: 'name',
+  summary: 'summary',
+  description: 'how to use',
+  owner: 'author',
+  address: 'address',
+  tag: 'tag',
+}
+
+export interface FeedRowProps {
+  tool: CommunityTool
+  /** Shown in the ranked feed; search results have no rank. */
+  rank?: number
+  /** A date sort shows its date on the row. */
+  sort: FeedSort
+  tokens: string[]
+  /** Set while searching: which fields the query hit. */
+  matched?: MatchField[]
+  selected?: boolean
+  /**
+   * Set while searching: the row is a row of the results grid, and this is the
+   * id of its main cell, the one the search box points at.
+   */
+  optionId?: string
+  pinned: boolean
+  /** Its pin is being saved. */
+  pinBusy?: boolean
+  onTogglePin: () => void
+  onToggleLike: () => void
+}
+
+/** The feed row's thumbnail: big enough to read the page title in its top left. */
+export const ROW_THUMB = 'h-[150px] w-[240px] rounded-[10px]'
+
+/** The Details panel's width, reserved at rest so nothing moves when it shows. */
+const PANEL = 'w-[120px]'
+
+/**
+ * One tool in the feed or the search results. Everything left of the end
+ * panel (rank, picture, name, summary, meta) is one link that opens the site
+ * in a new tab; the 120 px panel opens the card. The star sits in the meta
+ * line as its own target, above that link. The bottom strip shows the address
+ * the big click goes to, on hover or focus only.
+ */
+export function FeedRow({
+  tool,
+  rank,
+  sort,
+  tokens,
+  matched,
+  selected = false,
+  optionId,
+  pinned,
+  pinBusy,
+  onTogglePin,
+  onToggleLike,
+}: FeedRowProps) {
+  const archived = tool.lifecycle.state === 'archived'
+  const cell = optionId ? 'gridcell' : undefined
+  const owners = tool.owners.map((o) => o.name).join(', ')
+  const dated =
+    sort === 'newest'
+      ? `Added ${timeAgo(tool.createdAt)}`
+      : sort === 'updated' && tool.siteUpdatedAt
+        ? `Updated ${timeAgo(tool.siteUpdatedAt)}`
+        : null
+  const address = tool.url.replace(/^https?:\/\//, '').replace(/\/$/, '')
+
+  return (
+    <div
+      data-testid="feed-row"
+      data-slug={tool.slug}
+      data-selected={selected || undefined}
+      role={optionId ? 'row' : undefined}
+      className={cn(
+        'group/row relative flex min-h-[176px] items-center overflow-hidden rounded-[14px] border bg-card transition-[border-color,box-shadow]',
+        selected
+          ? 'border-primary ring-[3px] ring-primary/20'
+          : 'border-border hover:border-primary/35 hover:shadow-sm has-[:focus-visible]:border-primary/35',
+        archived && 'opacity-55',
+      )}
+    >
+      {/* Two cells while searching: the site, and the card. A grid rather
+          than a listbox, because an option's content is presentational and
+          would hide the link and the star. */}
+      <div
+        id={optionId}
+        role={cell}
+        aria-selected={optionId ? selected : undefined}
+        className="flex min-w-0 flex-1 items-center gap-4 self-stretch py-3 pl-3"
+      >
+        {rank !== undefined && (
+          <span className="w-[26px] shrink-0 text-center font-serif text-[22px] font-semibold text-muted-foreground/70">
+            {rank}
+          </span>
+        )}
+        <ToolThumb tool={tool} size={512} className={ROW_THUMB} />
+        <div className="min-w-0 flex-1 self-start pt-5 pr-6 pb-[52px]">
+          <div className="flex items-center gap-2.5 text-[15.5px] font-extrabold">
+            <a
+              href={tool.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              data-site
+              data-testid="feed-row-name"
+              aria-label={`${tool.name}, opens ${tool.host} in a new tab`}
+              className={cn(
+                'truncate decoration-1 underline-offset-[3px] after:absolute after:inset-y-0 after:left-0 after:right-[120px] after:z-[1] after:rounded-l-[13px] focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:-outline-offset-[3px] focus-visible:after:outline-ring',
+                'group-hover/row:underline group-has-[[data-details]:hover]/row:no-underline',
+                archived && 'text-muted-foreground',
+              )}
+            >
+              {highlightTokens(tool.name, tokens)}
+            </a>
+            {selected && (
+              <span className="inline-flex shrink-0 items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[11.5px] font-bold text-primary">
+                <CornerDownLeft aria-hidden="true" className="size-3" />
+                Enter opens site
+              </span>
+            )}
+            <LifecycleBadge lifecycle={tool.lifecycle} />
+            {!tool.reviewed && <UnreviewedBadge />}
+          </div>
+          {tool.summary && (
+            <div className="mt-1 line-clamp-2 text-foreground/75">
+              {highlightTokens(tool.summary, tokens)}
+            </div>
+          )}
+          {matched && matched.length > 0 && (
+            <div
+              data-testid="match-reason"
+              className="mt-1 text-xs font-semibold text-muted-foreground"
+            >
+              Matched: {matched.map((f) => FIELD_LABELS[f]).join(', ')}
+            </div>
+          )}
+        </div>
+        {/* Meta on the left, the address on the right, flush to the panel.
+            The address keeps 150 px; a long author list gives way first.
+            Clicks fall through to the row link, except on star and like. */}
+        <div
+          className={cn(
+            'pointer-events-none absolute right-[120px] bottom-0 z-[2] flex h-12 items-center gap-4',
+            rank !== undefined ? 'left-[310px]' : 'left-[268px]',
+          )}
+        >
+          <div className="flex min-w-0 items-center gap-1.5 text-[13px] font-semibold whitespace-nowrap text-foreground/75 [&>*]:shrink-0">
+            {tool.owners[0] && <PersonAvatar name={tool.owners[0].name} />}
+            <span
+              data-testid="feed-row-owner"
+              className="mr-1 min-w-0 !shrink truncate"
+            >
+              {highlightTokens(owners, tokens)}
+            </span>
+            <span className="pointer-events-auto -mr-1 flex items-center">
+              <PinButton
+                small
+                pinned={pinned}
+                busy={pinBusy}
+                name={tool.name}
+                onToggle={onTogglePin}
+              />
+              <LikeButton tool={tool} onToggle={onToggleLike} />
+            </span>
+            <span
+              data-testid="feed-row-views"
+              className="inline-flex items-center gap-1 text-muted-foreground"
+            >
+              <Eye aria-hidden="true" className="size-[15px]" />
+              {tool.views30d}
+              <span className="sr-only"> views this month</span>
+            </span>
+            {dated && (
+              <>
+                <span aria-hidden="true" className="text-muted-foreground">
+                  ·
+                </span>
+                <span
+                  data-testid="feed-row-date"
+                  className="text-muted-foreground"
+                >
+                  {dated}
+                </span>
+              </>
+            )}
+          </div>
+          <div
+            aria-hidden="true"
+            data-testid="feed-row-address"
+            className={cn(
+              'flex h-full min-w-[150px] flex-1 items-center justify-end gap-1.5 px-4 font-mono text-[12.5px] text-muted-foreground opacity-0 transition-opacity',
+              'group-hover/row:text-foreground group-hover/row:opacity-100 group-has-[[data-site]:focus-visible]/row:opacity-100 group-has-[[data-details]:hover]/row:opacity-0 [@media(hover:none)]:opacity-100',
+              selected && 'opacity-100',
+            )}
+          >
+            <span className="min-w-0 truncate">{address}</span>
+            <ExternalLink aria-hidden="true" className="size-3.5 shrink-0" />
+          </div>
+        </div>
+      </div>
+      <div role={cell} className="flex self-stretch">
+        <Link
+          to="/community/$slug"
+          params={{ slug: tool.slug }}
+          search={(prev) => prev}
+          data-details
+          aria-label={`Details for ${tool.name}`}
+          className={cn(
+            PANEL,
+            'relative z-[2] flex flex-none flex-col items-center justify-center gap-1.5 border-l border-border/55 text-[13.5px] font-extrabold text-muted-foreground transition-colors',
+            'group-hover/row:border-border group-hover/row:bg-primary/[0.025] group-has-[:focus-visible]/row:bg-primary/[0.025]',
+            'hover:!border-primary/30 hover:!bg-primary/12 hover:text-foreground',
+            'focus-visible:rounded-r-[13px] focus-visible:!bg-primary/12 focus-visible:text-foreground focus-visible:outline-2 focus-visible:-outline-offset-[3px] focus-visible:outline-ring',
+          )}
+        >
+          {/* Shown on hover or focus; always where nothing hovers. */}
+          <span className="flex flex-col items-center gap-1.5 opacity-0 transition-opacity group-hover/row:opacity-100 group-has-[:focus-visible]/row:opacity-100 [@media(hover:none)]:opacity-100">
+            <PanelRight aria-hidden="true" className="size-[18px]" />
+            <span>Details</span>
+          </span>
+        </Link>
+      </div>
+    </div>
+  )
+}

package/src/modules/communityTools/ui/FeedSortControl.tsx

@@ -0,0 +1,97 @@
+import type { FeedSort, SortDir } from '@igstack/app-catalog-shared-core'
+import { ArrowDown, ArrowUp } from 'lucide-react'
+import { useRef } from 'react'
+import { cn } from '~/lib/utils'
+
+export const SORT_OPTIONS: { value: FeedSort; label: string }[] = [
+  { value: 'liked', label: 'Most liked' },
+  { value: 'popular', label: 'Popular' },
+  { value: 'newest', label: 'Newest' },
+  { value: 'updated', label: 'Recently updated' },
+]
+
+const HEADINGS: Record<FeedSort, Record<SortDir, string>> = {
+  liked: { desc: 'Most liked', asc: 'Least liked' },
+  popular: { desc: 'Most opened', asc: 'Least opened' },
+  newest: { desc: 'Newest', asc: 'Oldest' },
+  updated: { desc: 'Recently updated', asc: 'Longest unchanged' },
+}
+
+/** The feed's heading, saying the order it is in. */
+export function feedHeading(sort: FeedSort, dir: SortDir): string {
+  return HEADINGS[sort][dir]
+}
+
+const DIR_LABEL: Record<SortDir, string> = {
+  desc: 'descending',
+  asc: 'ascending',
+}
+
+/**
+ * Segmented control above the feed. Choosing a sort starts it descending;
+ * choosing the active one again flips the direction. Arrow keys move between
+ * segments.
+ */
+export function FeedSortControl({
+  sort,
+  dir,
+  onChange,
+}: {
+  sort: FeedSort
+  dir: SortDir
+  onChange: (sort: FeedSort, dir: SortDir) => void
+}) {
+  const buttonsRef = useRef<(HTMLButtonElement | null)[]>([])
+  const label = SORT_OPTIONS.find((o) => o.value === sort)?.label ?? sort
+
+  const onKeyDown = (e: React.KeyboardEvent, index: number) => {
+    const step = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0
+    if (step === 0) return
+    e.preventDefault()
+    const next = (index + step + SORT_OPTIONS.length) % SORT_OPTIONS.length
+    onChange(SORT_OPTIONS[next]!.value, 'desc')
+    buttonsRef.current[next]?.focus()
+  }
+
+  return (
+    <div
+      role="radiogroup"
+      aria-label={`Sort by ${label}, ${DIR_LABEL[dir]}`}
+      data-testid="feed-sort"
+      className="inline-flex gap-0.5 rounded-[10px] bg-muted p-[3px] text-[13px] font-semibold"
+    >
+      {SORT_OPTIONS.map((option, index) => {
+        const on = option.value === sort
+        const Arrow = dir === 'desc' ? ArrowDown : ArrowUp
+        return (
+          <button
+            key={option.value}
+            ref={(el) => {
+              buttonsRef.current[index] = el
+            }}
+            type="button"
+            role="radio"
+            aria-checked={on}
+            aria-label={
+              on ? `${option.label}, ${DIR_LABEL[dir]}` : option.label
+            }
+            tabIndex={on ? 0 : -1}
+            onClick={() =>
+              onChange(option.value, on && dir === 'desc' ? 'asc' : 'desc')
+            }
+            onKeyDown={(e) => onKeyDown(e, index)}
+            className={cn(
+              'inline-flex items-center gap-1 rounded-lg px-3 py-[5px] transition-colors focus-visible:outline-2 focus-visible:outline-ring',
+              on
+                ? 'bg-card text-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground',
+            )}
+          >
+            {option.label}
+            {on && <Arrow aria-hidden="true" className="size-3.5" />}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/modules/communityTools/ui/LifecycleBadge.tsx

@@ -0,0 +1,44 @@
+import type { Lifecycle } from '@igstack/app-catalog-shared-core'
+import { AlertTriangle, Archive } from 'lucide-react'
+
+const PILL =
+  'inline-flex shrink-0 items-center gap-1 rounded-full border px-2 py-px text-[11.5px] font-bold'
+
+/** Next to the name on rows, tiles and the card. An active tool shows nothing. */
+export function LifecycleBadge({ lifecycle }: { lifecycle: Lifecycle }) {
+  if (lifecycle.state === 'not-working') {
+    return (
+      <span
+        data-testid="lifecycle-badge"
+        className={`${PILL} border-amber-300 bg-amber-100 text-amber-800 dark:border-amber-700 dark:bg-amber-950 dark:text-amber-300`}
+      >
+        <AlertTriangle aria-hidden="true" className="size-3" />
+        Not working · {lifecycle.days} {lifecycle.days === 1 ? 'day' : 'days'}
+      </span>
+    )
+  }
+  if (lifecycle.state === 'archived') {
+    return (
+      <span
+        data-testid="lifecycle-badge"
+        className={`${PILL} border-border bg-muted text-muted-foreground`}
+      >
+        <Archive aria-hidden="true" className="size-3" />
+        Archived
+      </span>
+    )
+  }
+  return null
+}
+
+/** Live since it was published, but no admin has looked at it yet. */
+export function UnreviewedBadge() {
+  return (
+    <span
+      data-testid="unreviewed-badge"
+      className={`${PILL} border-primary/25 bg-primary/10 text-primary`}
+    >
+      New · not reviewed
+    </span>
+  )
+}

package/src/modules/communityTools/ui/LikeButton.tsx

@@ -0,0 +1,56 @@
+import type { CommunityTool } from '@igstack/app-catalog-shared-core'
+import { ThumbsUp } from 'lucide-react'
+import { cn } from '~/lib/utils'
+import { Tooltip, TooltipContent, TooltipTrigger } from '~/ui/tooltip'
+import { likedByText } from '../likedBy'
+
+/**
+ * A thumb and the count, filled in the brand colour once I liked it; hover or
+ * focus says who liked it.
+ */
+export function LikeButton({
+  tool,
+  onToggle,
+}: {
+  tool: Pick<CommunityTool, 'name' | 'likes' | 'likedByMe' | 'likedBy'>
+  onToggle: () => void
+}) {
+  const { name, likes, likedByMe } = tool
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          data-testid="like-button"
+          aria-pressed={likedByMe}
+          // One name; aria-pressed says whether it is liked.
+          aria-label={`Like ${name}`}
+          onClick={(e) => {
+            e.stopPropagation()
+            onToggle()
+          }}
+          className={cn(
+            'relative z-10 inline-flex h-8 min-w-8 items-center justify-center gap-1 rounded-lg px-1.5 transition-colors hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring',
+            likedByMe ? 'text-foreground' : 'text-muted-foreground',
+          )}
+        >
+          <ThumbsUp
+            aria-hidden="true"
+            className={cn(
+              'size-[15px]',
+              likedByMe && 'fill-primary/85 stroke-foreground',
+            )}
+          />
+          <span data-testid="like-count">{likes}</span>
+        </button>
+      </TooltipTrigger>
+      <TooltipContent
+        data-testid="liked-by"
+        sideOffset={8}
+        className="max-w-[300px] rounded-[10px] px-2.5 py-[7px] text-[12.5px] leading-[1.4] font-semibold"
+      >
+        {likedByText(tool)}
+      </TooltipContent>
+    </Tooltip>
+  )
+}

package/src/modules/communityTools/ui/MarginPreview.tsx

@@ -0,0 +1,143 @@
+import type { CommunityTool } from '@igstack/app-catalog-shared-core'
+import { useEffect, useRef, useState } from 'react'
+import { screenshotUrl } from './FeedRow'
+
+/** Less free margin than this beside the column and there is no preview. */
+const MIN_MARGIN = 420
+/** Hover or focus this long before the first preview shows. */
+const FIRST_SHOW_MS = 300
+const GAP = 12
+
+interface Box {
+  left: number
+  top: number
+  width: number
+  height: number
+}
+
+/**
+ * The hovered or focused row's screenshot, big, in the empty margin left of
+ * the feed: one reused panel whose top lines up with the row's, moved up only
+ * as far as it takes to stay in the window. The first one waits a moment;
+ * moving to another row swaps it at once. Nothing on a narrow window, on a
+ * touch screen, or while a dialog is open.
+ */
+export function MarginPreview({
+  list,
+  tools,
+  disabled,
+}: {
+  /**
+   * The element the rows are in; hover and focus are read off it. Inside it
+   * sits `[data-preview-column]`, the centred column whose left margin holds
+   * the preview, inside `[data-preview-scroller]`.
+   */
+  list: HTMLElement | null
+  tools: CommunityTool[]
+  disabled: boolean
+}) {
+  const [slug, setSlug] = useState<string | null>(null)
+  const [box, setBox] = useState<Box | null>(null)
+  const rowRef = useRef<HTMLElement | null>(null)
+  const [canHover] = useState(
+    () =>
+      typeof window !== 'undefined' &&
+      window.matchMedia('(hover: hover) and (pointer: fine)').matches,
+  )
+
+  useEffect(() => {
+    const scroller = list?.closest<HTMLElement>('[data-preview-scroller]')
+    const column = list?.closest<HTMLElement>('[data-preview-column]')
+    if (!list || !scroller || !column || !canHover || disabled) return
+    let timer: ReturnType<typeof setTimeout> | undefined
+    let shown = false
+
+    const place = (): Box | null => {
+      const row = rowRef.current
+      if (!row?.isConnected) return null
+      const area = scroller.getBoundingClientRect()
+      const margin = column.getBoundingClientRect().left - area.left
+      if (margin < MIN_MARGIN) return null
+      const width = margin - 2 * GAP
+      const height = Math.round((width * 10) / 16)
+      const top = Math.max(
+        area.top,
+        Math.min(
+          row.getBoundingClientRect().top,
+          window.innerHeight - height - GAP,
+        ),
+      )
+      return { left: area.left + GAP, top, width, height }
+    }
+    const show = () => {
+      shown = true
+      setSlug(rowRef.current?.dataset['slug'] ?? null)
+      setBox(place())
+    }
+    const hide = () => {
+      clearTimeout(timer)
+      shown = false
+      rowRef.current = null
+      setSlug(null)
+      setBox(null)
+    }
+    const enter = (target: EventTarget | null) => {
+      const row =
+        target instanceof Element
+          ? target.closest<HTMLElement>('[data-testid="feed-row"]')
+          : null
+      if (!row || row === rowRef.current) return
+      rowRef.current = row
+      clearTimeout(timer)
+      if (shown) show()
+      else timer = setTimeout(show, FIRST_SHOW_MS)
+    }
+    const onPointerOver = (e: PointerEvent) => enter(e.target)
+    const onFocusIn = (e: FocusEvent) => enter(e.target)
+    const onFocusOut = (e: FocusEvent) => {
+      if (!list.contains(e.relatedTarget as Node | null)) hide()
+    }
+    // Scrolling under a still-hovered row keeps the panel on it.
+    const follow = () => {
+      if (shown) setBox(place())
+    }
+
+    list.addEventListener('pointerover', onPointerOver)
+    list.addEventListener('pointerleave', hide)
+    list.addEventListener('focusin', onFocusIn)
+    list.addEventListener('focusout', onFocusOut)
+    scroller.addEventListener('scroll', follow, { passive: true })
+    window.addEventListener('resize', follow)
+    return () => {
+      hide()
+      list.removeEventListener('pointerover', onPointerOver)
+      list.removeEventListener('pointerleave', hide)
+      list.removeEventListener('focusin', onFocusIn)
+      list.removeEventListener('focusout', onFocusOut)
+      scroller.removeEventListener('scroll', follow)
+      window.removeEventListener('resize', follow)
+    }
+  }, [list, canHover, disabled])
+
+  const shot = tools.find((t) => t.slug === slug)?.screenshotId
+  if (disabled || !box || !shot) return null
+  return (
+    <div
+      aria-hidden="true"
+      data-testid="margin-preview"
+      className="pointer-events-none fixed top-0 z-20 overflow-hidden rounded-[14px] border border-border bg-muted shadow-lg transition-transform duration-[120ms] ease-out"
+      style={{
+        left: box.left,
+        width: box.width,
+        height: box.height,
+        transform: `translateY(${box.top}px)`,
+      }}
+    >
+      <img
+        src={screenshotUrl(shot, 1280)}
+        alt=""
+        className="size-full object-cover object-left-top"
+      />
+    </div>
+  )
+}