railwatch 0.9.4 → 1.0.0

data/app/frontend/components/railwatch/digit-roll.tsx

@@ -1,312 +0,0 @@
-import { useEffect, useRef } from "react"
-
-import { cn } from "@/lib/utils"
-
-// A number whose digits roll when it changes: the digits that actually
-// changed slide up (or down, when the number falls) to their new glyph and
-// the rest of the number stays exactly where it is.
-//
-// This is motion on an operational dashboard, which is a thing to be
-// careful with rather than a thing to sprinkle around -- see the gates on
-// `Stat`'s rolling path, which is what decides whether this component is
-// rendered at all. What this component owns is the part of the contract
-// that no caller can get right by itself:
-//
-//   * the roll is 300ms, so it is over long before the next update can
-//     arrive (see ROLL_MIN_INTERVAL_MS) and the strip is never in motion
-//     for more than ~15% of the time;
-//   * updates are coalesced to one roll every 2s. An update that lands
-//     inside that window is remembered, not painted, and the roll that
-//     follows goes straight to the newest value. A roll is never
-//     interrupted, because an animation that never finishes is worse than
-//     no animation at all;
-//   * the first paint is static. A page that opens, or one that is
-//     navigated back to, shows its numbers rather than animating up to
-//     them.
-//
-// The cells are built by hand rather than rendered, because they are keyed
-// by place value and animated with the Web Animations API, and neither of
-// those survives React re-rendering the digits underneath them. They are
-// decoration -- whoever renders this is expected to hide it from assistive
-// tech and put the number in a text node beside it (`Stat` does).
-
-// The one switch. Flip this to false and every rolling number in the app --
-// the dashboard's stats, and whatever the landing page does with the same
-// component -- becomes a plain static number.
-export const DIGIT_ROLL_ENABLED = true
-
-export const ROLL_DURATION_MS = 300
-export const ROLL_EASING = "cubic-bezier(.22, 1, .36, 1)"
-export const ROLL_MIN_INTERVAL_MS = 2_000
-
-// Fixed em heights on every piece, so a roll cannot change the line box and
-// the strip below the number cannot be pushed around by it.
-const CELL_CLASS =
-  "inline-block h-[1.15em] overflow-hidden leading-[1.15em] align-top"
-const SEPARATOR_CLASS =
-  "inline-block h-[1.15em] overflow-visible leading-[1.15em] align-top text-center"
-const STRIP_CLASS = "block will-change-transform"
-const SLOT_CLASS = "block h-[1.15em] leading-[1.15em]"
-const SUFFIX_CLASS = "inline-block h-[1.15em] leading-[1.15em]"
-
-type Direction = -1 | 0 | 1
-
-// A thousands separator (or a decimal point, or a minus sign) never rolls,
-// so it is a plain glyph rather than a two-slot stack.
-interface SeparatorCell {
-  separator: true
-  el: HTMLSpanElement
-  char: string | null
-}
-
-interface DigitCell {
-  separator: false
-  el: HTMLSpanElement
-  strip: HTMLSpanElement
-  top: HTMLSpanElement
-  bottom: HTMLSpanElement
-  animation: Animation | null
-  char: string | null
-}
-
-type Cell = SeparatorCell | DigitCell
-
-function span(className: string) {
-  const el = document.createElement("span")
-  el.className = className
-  return el
-}
-
-// "412,908ms" -> { digits: "412,908", suffix: "ms" }. The unit is one glyph
-// run at the end of the number that nothing ever moves.
-function split(formatted: string) {
-  let end = formatted.length
-  while (end > 0 && !/[0-9]/.test(formatted[end - 1])) end--
-  return { digits: formatted.slice(0, end), suffix: formatted.slice(end) }
-}
-
-function makeCell(separator: boolean): Cell {
-  const el = span(separator ? SEPARATOR_CLASS : CELL_CLASS)
-  if (separator) return { separator: true, el, char: null }
-  const strip = span(STRIP_CLASS)
-  const top = span(SLOT_CLASS)
-  const bottom = span(SLOT_CLASS)
-  strip.append(top, bottom)
-  el.append(strip)
-  return {
-    separator: false,
-    el,
-    strip,
-    top,
-    bottom,
-    animation: null,
-    char: null,
-  }
-}
-
-// Cells are keyed by distance from the right of the number, so a digit keeps
-// its identity -- its place value -- even when the number gains a digit:
-// 999 -> 1,000 leaves keys 0,1,2 rolling 9 -> 0 and simply inserts key 3
-// (the comma) and key 4 (the 1). No re-keying, no cascade, and the digits
-// that did not change never move.
-function createRoll(
-  host: HTMLElement,
-  { durationMs, easing }: { durationMs: number; easing: string },
-) {
-  const cells = new Map<number, Cell>()
-  let order = ""
-
-  // Collapse a cell back to the single digit that is showing. The glyph it
-  // rolled away from is out of view but still in the DOM, and a selection
-  // (or a copy) would otherwise pick it up.
-  function settle(cell: DigitCell, char: string) {
-    cell.animation?.cancel()
-    cell.animation = null
-    cell.top.textContent = char
-    cell.bottom.textContent = ""
-    cell.char = char
-  }
-
-  function roll(cell: DigitCell, char: string, direction: -1 | 1) {
-    // jsdom has no Web Animations API. Nothing to roll there: show the digit.
-    if (typeof cell.strip.animate !== "function") {
-      settle(cell, char)
-      return
-    }
-    // Cancel, re-fill the slots, and start the new animation in one task, so
-    // the browser never paints the intermediate state: an interrupted roll
-    // restarts from wherever it had got to, towards the new target.
-    cell.animation?.cancel()
-    const from = cell.char ?? char
-    if (direction > 0) {
-      cell.top.textContent = from
-      cell.bottom.textContent = char
-    } else {
-      cell.top.textContent = char
-      cell.bottom.textContent = from
-    }
-    const keyframes =
-      direction > 0
-        ? [{ transform: "translateY(0)" }, { transform: "translateY(-50%)" }]
-        : [{ transform: "translateY(-50%)" }, { transform: "translateY(0)" }]
-    const animation = cell.strip.animate(keyframes, {
-      duration: durationMs,
-      easing,
-      fill: "forwards",
-    })
-    cell.animation = animation
-    cell.char = char
-    animation.onfinish = () => {
-      if (cell.animation === animation) settle(cell, char)
-    }
-  }
-
-  function enter(cell: Cell) {
-    if (typeof cell.el.animate !== "function") return
-    cell.el.animate(
-      [
-        { opacity: 0, transform: "translateY(0.35em)" },
-        { opacity: 1, transform: "none" },
-      ],
-      { duration: durationMs, easing },
-    )
-  }
-
-  return {
-    paint(formatted: string, direction: Direction) {
-      const { digits, suffix } = split(formatted)
-      const chars = digits.split("")
-      const wanted = chars.map((char, index) => ({
-        key: chars.length - 1 - index,
-        char,
-      }))
-      const nextOrder = `${wanted.map((cell) => cell.key).join(",")}|${suffix}`
-      const first = order === ""
-
-      if (nextOrder !== order) {
-        // The key set changed (the number gained or lost a digit): re-lay the
-        // row, reusing every cell whose key survived.
-        const fragment = document.createDocumentFragment()
-        const keep = new Set<number>()
-        for (const { key, char } of wanted) {
-          keep.add(key)
-          const separator = !/[0-9]/.test(char)
-          let cell = cells.get(key)
-          if (cell?.separator !== separator) {
-            cell = makeCell(separator)
-            cells.set(key, cell)
-            if (!first && direction !== 0) enter(cell)
-          }
-          fragment.append(cell.el)
-        }
-        for (const key of [...cells.keys()])
-          if (!keep.has(key)) cells.delete(key)
-        host.replaceChildren(fragment)
-        if (suffix) {
-          const el = span(SUFFIX_CLASS)
-          el.textContent = suffix
-          host.append(el)
-        }
-        order = nextOrder
-      }
-
-      for (const { key, char } of wanted) {
-        const cell = cells.get(key)
-        if (!cell || cell.char === char) continue // this digit did not change
-        if (cell.separator) {
-          cell.el.textContent = char
-          cell.char = char
-        } else if (cell.char === null || direction === 0) {
-          settle(cell, char)
-        } else {
-          roll(cell, char, direction)
-        }
-      }
-    },
-
-    destroy() {
-      for (const cell of cells.values())
-        if (!cell.separator) cell.animation?.cancel()
-    },
-  }
-}
-
-export function DigitRoll({
-  value,
-  format,
-  className,
-  durationMs = ROLL_DURATION_MS,
-  easing = ROLL_EASING,
-  minIntervalMs = ROLL_MIN_INTERVAL_MS,
-}: {
-  value: number
-  format: (value: number) => string
-  className?: string
-  durationMs?: number
-  easing?: string
-  minIntervalMs?: number
-}) {
-  const hostRef = useRef<HTMLSpanElement>(null)
-  const rollRef = useRef<ReturnType<typeof createRoll> | null>(null)
-  // What the cells are showing, which is not `value` while an update is
-  // being held back by the coalescing window.
-  const shownRef = useRef(value)
-  const pendingRef = useRef<number | null>(null)
-  const lastRollAtRef = useRef(0)
-  const timerRef = useRef<number | undefined>(undefined)
-  const optionsRef = useRef({ format, durationMs, easing, minIntervalMs })
-  useEffect(() => {
-    optionsRef.current = { format, durationMs, easing, minIntervalMs }
-  })
-
-  useEffect(() => {
-    const host = hostRef.current
-    if (!host) return
-    const { format, durationMs, easing } = optionsRef.current
-    const roll = createRoll(host, { durationMs, easing })
-    rollRef.current = roll
-    // Never on mount: the first paint is the number, not a roll up to it.
-    roll.paint(format(shownRef.current), 0)
-    return () => {
-      clearTimeout(timerRef.current)
-      timerRef.current = undefined
-      pendingRef.current = null
-      rollRef.current = null
-      roll.destroy()
-    }
-    // Built once; every later value goes through the effect below.
-  }, [])
-
-  useEffect(() => {
-    const roll = rollRef.current
-    if (!roll || value === shownRef.current) return
-
-    const apply = (next: number) => {
-      lastRollAtRef.current = Date.now()
-      roll.paint(
-        optionsRef.current.format(next),
-        next >= shownRef.current ? 1 : -1,
-      )
-      shownRef.current = next
-    }
-
-    const elapsed = Date.now() - lastRollAtRef.current
-    const wait = optionsRef.current.minIntervalMs - elapsed
-    if (wait <= 0) {
-      apply(value)
-      return
-    }
-    // Inside the window: hold this value (replacing any other one being
-    // held) and let the timer already running land the newest of them. The
-    // roll in flight is left alone.
-    pendingRef.current = value
-    timerRef.current ??= window.setTimeout(() => {
-      timerRef.current = undefined
-      const next = pendingRef.current
-      pendingRef.current = null
-      if (next !== null && next !== shownRef.current) apply(next)
-    }, wait)
-  }, [value])
-
-  return <span ref={hostRef} className={cn(className)} />
-}

data/app/frontend/components/railwatch/empty-state.tsx

@@ -1,159 +0,0 @@
-import { type LucideIcon } from "lucide-react"
-import { type ReactNode, useId } from "react"
-
-import { cn } from "@/lib/utils"
-
-// A stretch of track behind the message: two rails and a run of ties. Two
-// masks shape it. A horizontal one fades the ends so the line runs off the
-// edge of the panel rather than stopping at it, and a radial one dissolves
-// the middle so the message sits in a clear pocket while the rails stay
-// legible on either side. The pocket is narrower below md so a phone card
-// still shows a good run of track on each side of the message.
-export function Track({ className }: { className?: string }) {
-  const id = useId()
-  return (
-    <svg
-      aria-hidden
-      className={cn(
-        "text-foreground/35 dark:text-foreground/40 pointer-events-none absolute inset-x-0 top-1/2 h-12 w-full -translate-y-1/2",
-        "[mask-composite:intersect]",
-        "[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent),radial-gradient(ellipse_200px_160%_at_50%_50%,transparent_20%,black_100%)]",
-        "md:[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent),radial-gradient(ellipse_300px_160%_at_50%_50%,transparent_35%,black_100%)]",
-        className,
-      )}
-      preserveAspectRatio="none"
-    >
-      <defs>
-        <pattern id={id} width="22" height="48" patternUnits="userSpaceOnUse">
-          <rect x="9" y="9" width="4" height="30" rx="1" fill="currentColor" />
-        </pattern>
-      </defs>
-      <rect width="100%" height="100%" fill={`url(#${id})`} />
-      <rect y="16" width="100%" height="2.5" fill="currentColor" />
-      <rect y="29.5" width="100%" height="2.5" fill="currentColor" />
-    </svg>
-  )
-}
-
-export type SignalAspect = "clear" | "caution" | "stop"
-
-const ASPECT_CLASS: Record<SignalAspect, string> = {
-  clear: "text-live",
-  caution: "text-warning",
-  stop: "text-danger",
-}
-
-// Lamps in their real order on a three-aspect head: stop on top, caution in
-// the middle, clear at the bottom.
-const LAMP_Y: Record<SignalAspect, number> = { stop: 8, caution: 17, clear: 26 }
-const LAMP_ORDER: SignalAspect[] = ["stop", "caution", "clear"]
-
-// A lineside signal standing just past the pocket, on the right. The post
-// and hood take the track's ink; the one lit aspect uses the status
-// vocabulary the rest of the UI already speaks (green = clear, amber =
-// caution, rose = stop). An empty table is a clear line, so that is the
-// default; pages whose empty state is a filter miss pass "caution".
-export function Signal({
-  aspect,
-  className,
-}: {
-  aspect: SignalAspect
-  className?: string
-}) {
-  return (
-    <svg
-      aria-hidden
-      viewBox="0 0 20 64"
-      className={cn(
-        "pointer-events-none absolute top-1/2 h-16 w-5 -translate-y-[calc(50%+8px)]",
-        "left-[calc(50%+100px)] md:left-[calc(50%+150px)]",
-        className,
-      )}
-    >
-      <g className="text-foreground/35 dark:text-foreground/40">
-        <rect x="9" y="33" width="2" height="26" rx="1" fill="currentColor" />
-        <rect x="5" y="58" width="10" height="2" rx="1" fill="currentColor" />
-        <rect
-          x="4.75"
-          y="1.75"
-          width="10.5"
-          height="31.5"
-          rx="5.25"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.5"
-        />
-      </g>
-      {LAMP_ORDER.map((lamp) =>
-        lamp === aspect ? (
-          <g key={lamp} className={ASPECT_CLASS[lamp]} data-lamp={lamp}>
-            <circle
-              cx="10"
-              cy={LAMP_Y[lamp]}
-              r="6"
-              fill="currentColor"
-              opacity="0.2"
-              className="blur-[2px]"
-            />
-            <circle cx="10" cy={LAMP_Y[lamp]} r="3" fill="currentColor" />
-          </g>
-        ) : (
-          <circle
-            key={lamp}
-            cx="10"
-            cy={LAMP_Y[lamp]}
-            r="3"
-            className="text-foreground/15"
-            fill="currentColor"
-          />
-        ),
-      )}
-    </svg>
-  )
-}
-
-// Empty state for tables and panels: the icon, title, optional description
-// and action, set in the clear pocket of a track that runs behind them,
-// with a signal beside the line showing the aspect.
-export function EmptyState({
-  icon: Icon,
-  title,
-  description,
-  action,
-  signal = "clear",
-  className,
-}: {
-  icon?: LucideIcon
-  title: ReactNode
-  description?: ReactNode
-  action?: ReactNode
-  signal?: SignalAspect
-  className?: string
-}) {
-  return (
-    <div
-      className={cn(
-        "relative flex min-h-48 items-center justify-center overflow-hidden px-4 py-8 text-center",
-        className,
-      )}
-      aria-live="polite"
-    >
-      <Track />
-      <Signal aspect={signal} />
-      <div className="relative flex max-w-xs flex-col items-center gap-1.5">
-        {Icon && (
-          <span className="bg-muted text-muted-foreground mb-1 flex size-9 items-center justify-center rounded-md">
-            <Icon className="size-4" />
-          </span>
-        )}
-        <span className="text-sm font-medium">{title}</span>
-        {description && (
-          <span className="text-muted-foreground text-xs leading-relaxed">
-            {description}
-          </span>
-        )}
-        {action && <div className="mt-2">{action}</div>}
-      </div>
-    </div>
-  )
-}

data/app/frontend/components/railwatch/env-nav.tsx

@@ -1,130 +0,0 @@
-import { Link, usePage } from "@inertiajs/react"
-import { Bookmark, ChevronRight } from "lucide-react"
-import { useState } from "react"
-
-import { isViewActive, samePage } from "@/components/railwatch/saved-views"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible"
-import {
-  SidebarGroup,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-} from "@/components/ui/sidebar"
-import { ENV_PAGE_GROUPS, envPages } from "@/lib/env-pages"
-import { cn } from "@/lib/utils"
-import type { SharedProps } from "@/types"
-
-// Environment navigation in the sidebar: Overview at the top, then one
-// collapsible section per page group (Activity, Monitoring, Settings). The
-// section containing the current page starts open; the others start
-// closed so the list stays short.
-export function EnvNav() {
-  const page = usePage<SharedProps>()
-  const { environment } = page.props
-  const current = page.url.split("?")[0]
-  const [openOverride, setOpenOverride] = useState<
-    Record<string, boolean | undefined>
-  >({})
-  if (!environment) return null
-
-  const items = envPages(
-    environment.application_id,
-    environment.id,
-    page.props.window as string,
-  )
-  const pinnedViews = (page.props.saved_views ?? []).filter((v) => v.pinned)
-  const isCurrent = (href: string) => {
-    const path = href.split("?")[0]
-    return current === path || current.startsWith(path + "/")
-  }
-  const overview = items[0]
-
-  return (
-    <SidebarGroup className="p-0">
-      <SidebarMenu>
-        <SidebarMenuItem>
-          <SidebarMenuButton
-            asChild
-            isActive={current === overview.href.split("?")[0]}
-            tooltip={{ children: overview.title }}
-          >
-            <Link href={overview.href} prefetch>
-              {overview.icon && <overview.icon />}
-              <span>{overview.title}</span>
-            </Link>
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-        {ENV_PAGE_GROUPS.map((group) => {
-          const groupItems = items.filter(
-            (i) => i.group === group.key && i !== overview,
-          )
-          const containsCurrent = groupItems.some((i) => isCurrent(i.href))
-          const open = openOverride[group.key] ?? containsCurrent
-          const GroupIcon = groupItems[0]?.icon
-          return (
-            <Collapsible
-              key={group.key}
-              open={open}
-              onOpenChange={(v) =>
-                setOpenOverride((o) => ({ ...o, [group.key]: v }))
-              }
-              className="group/collapsible"
-            >
-              <SidebarMenuItem>
-                <CollapsibleTrigger asChild>
-                  <SidebarMenuButton
-                    tooltip={{ children: group.title }}
-                    className={cn(containsCurrent && "text-sidebar-foreground")}
-                  >
-                    {GroupIcon && <GroupIcon />}
-                    <span>{group.title}</span>
-                    <ChevronRight className="ml-auto size-3.5 opacity-60 transition-transform group-data-[state=open]/collapsible:rotate-90" />
-                  </SidebarMenuButton>
-                </CollapsibleTrigger>
-                <CollapsibleContent>
-                  <SidebarMenuSub className="mr-0 gap-0.5 pr-0">
-                    {groupItems.map((item) => (
-                      <SidebarMenuSubItem key={item.title}>
-                        <SidebarMenuSubButton
-                          asChild
-                          isActive={isCurrent(item.href)}
-                        >
-                          <Link href={item.href} prefetch>
-                            <span>{item.title}</span>
-                          </Link>
-                        </SidebarMenuSubButton>
-                        {pinnedViews
-                          .filter((view) => samePage(view.url, item.href))
-                          .map((view) => (
-                            <SidebarMenuSubButton
-                              key={view.id}
-                              asChild
-                              size="sm"
-                              className="pl-4"
-                              isActive={isViewActive(page.url, view.url)}
-                            >
-                              <Link href={view.url}>
-                                <Bookmark className="opacity-60" />
-                                <span>{view.name}</span>
-                              </Link>
-                            </SidebarMenuSubButton>
-                          ))}
-                      </SidebarMenuSubItem>
-                    ))}
-                  </SidebarMenuSub>
-                </CollapsibleContent>
-              </SidebarMenuItem>
-            </Collapsible>
-          )
-        })}
-      </SidebarMenu>
-    </SidebarGroup>
-  )
-}