activity-stats: shared StatRow + canonical metrics across surfaces

Implements the activity-stats change (specs/activity-stats):

- gpx: `movingTime(tracks)` — moving seconds from trackpoint timestamps,
  excluding stationary spans + long gaps; null when no timestamps.
- stats.ts: pure formatters (distance/elevation/duration/speed/pace),
  sport-aware `deriveRate` (pace for foot sports, speed otherwise, speed
  default), and `activityStatItems` encoding the canonical order
  (distance · time · [moving] · pace/speed · ascent · descent; compact subset).
- StatRow: one shared presentational component (size sm/lg), adopted on the
  activity detail (full set; loader derives moving time), route detail
  (distance/ascent/descent), feed card + profile list (compact).
- i18n: journal.stats.* in en + de.

Tests: movingTime (stationary/gap exclusion, moving ≤ elapsed), deriveRate,
formatters, activityStatItems ordering + compact, StatRow render (jsdom).
typecheck + lint + unit (gpx 63, journal 311) green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

apps/journal/app/components/StatRow.test.tsx

@@ -0,0 +1,29 @@
+// @vitest-environment jsdom
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { StatRow } from "./StatRow.tsx";
+
+afterEach(cleanup);
+
+describe("StatRow", () => {
+  it("renders nothing for an empty item list", () => {
+    const { container } = render(<StatRow items={[]} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders each item's value and label, in order", () => {
+    const { container } = render(
+      <StatRow
+        items={[
+          { label: "Distance", value: "30.0 km" },
+          { label: "Time", value: "1h 0m" },
+          { label: "Avg speed", value: "30.0 km/h" },
+        ]}
+      />,
+    );
+    const labels = [...container.querySelectorAll("dt")].map((el) => el.textContent);
+    const values = [...container.querySelectorAll("dd")].map((el) => el.textContent);
+    expect(labels).toEqual(["Distance", "Time", "Avg speed"]);
+    expect(values).toEqual(["30.0 km", "1h 0m", "30.0 km/h"]);
+  });
+});

apps/journal/app/components/StatRow.tsx

@@ -0,0 +1,34 @@
+import type { StatItem } from "~/lib/stats";
+
+/**
+ * The one shared headline-stat presentation. Surfaces pass an ordered list of
+ * {value, label} items (built via `activityStatItems`); the component never
+ * fetches or formats. `size="lg"` is the detail-page treatment; the default
+ * compact size is for feed cards and the profile list.
+ */
+export function StatRow({
+  items,
+  size = "sm",
+  className,
+}: {
+  items: StatItem[];
+  size?: "sm" | "lg";
+  className?: string;
+}) {
+  if (items.length === 0) return null;
+  const valueCls =
+    size === "lg"
+      ? "text-2xl font-bold text-gray-900"
+      : "text-sm font-semibold text-gray-900";
+  const gap = size === "lg" ? "gap-6" : "gap-x-4 gap-y-1";
+  return (
+    <dl className={`flex flex-wrap ${gap}${className ? ` ${className}` : ""}`}>
+      {items.map((it) => (
+        <div key={it.label}>
+          <dd className={valueCls}>{it.value}</dd>
+          <dt className="text-xs text-gray-500">{it.label}</dt>
+        </div>
+      ))}
+    </dl>
+  );
+}

apps/journal/app/lib/stats.test.ts

@@ -0,0 +1,102 @@
+import { describe, it, expect } from "vitest";
+import {
+  formatDistanceKm,
+  formatElevationM,
+  formatDuration,
+  formatSpeedKmh,
+  formatPace,
+  deriveRate,
+  activityStatItems,
+} from "./stats.ts";
+
+// Identity translate: labels come back as their keys so we can assert order.
+const t = (k: string) => k;
+
+describe("formatters", () => {
+  it("formats distance (1 decimal under 100 km, integer above)", () => {
+    expect(formatDistanceKm(12_340)).toBe("12.3 km");
+    expect(formatDistanceKm(123_400)).toBe("123 km");
+  });
+  it("formats elevation as integer metres", () => {
+    expect(formatElevationM(512.6)).toBe("513 m");
+  });
+  it("formats duration h/m", () => {
+    expect(formatDuration(9000)).toBe("2h 30m");
+    expect(formatDuration(2820)).toBe("47m");
+  });
+  it("formats speed and pace", () => {
+    expect(formatSpeedKmh(30.86)).toBe("30.9 km/h");
+    expect(formatPace(318)).toBe("5:18 /km");
+  });
+});
+
+describe("deriveRate", () => {
+  it("returns pace for foot sports", () => {
+    expect(deriveRate(10_000, 3000, "run")).toEqual({ kind: "pace", value: 300 });
+    expect(deriveRate(10_000, 3000, "hike")?.kind).toBe("pace");
+  });
+  it("returns speed for wheeled/ski sports", () => {
+    expect(deriveRate(30_000, 3600, "ride")).toEqual({ kind: "speed", value: 30 });
+    expect(deriveRate(1000, 3600, "mtb")?.kind).toBe("speed");
+  });
+  it("defaults to speed when sport is unset", () => {
+    expect(deriveRate(30_000, 3600, null)?.kind).toBe("speed");
+  });
+  it("returns null without usable distance/time", () => {
+    expect(deriveRate(0, 3600, "run")).toBeNull();
+    expect(deriveRate(1000, 0, "run")).toBeNull();
+    expect(deriveRate(null, null, "run")).toBeNull();
+  });
+});
+
+describe("activityStatItems", () => {
+  it("builds the full canonical order", () => {
+    const items = activityStatItems(
+      {
+        distance: 30_000,
+        durationSec: 3600,
+        movingTimeSec: 3300,
+        elevationGain: 500,
+        elevationLoss: 480,
+        sportType: "ride",
+      },
+      t,
+    );
+    expect(items.map((i) => i.label)).toEqual([
+      "stats.distance",
+      "stats.duration",
+      "stats.movingTime",
+      "stats.avgSpeed",
+      "stats.ascent",
+      "stats.descent",
+    ]);
+  });
+
+  it("compact drops moving time and ascent/descent, keeps order", () => {
+    const items = activityStatItems(
+      { distance: 10_000, durationSec: 3000, movingTimeSec: 2800, elevationGain: 100, sportType: "run" },
+      t,
+      { compact: true },
+    );
+    expect(items.map((i) => i.label)).toEqual([
+      "stats.distance",
+      "stats.duration",
+      "stats.avgPace",
+    ]);
+  });
+
+  it("omits items with no value", () => {
+    const items = activityStatItems({ distance: 5000 }, t);
+    expect(items.map((i) => i.label)).toEqual(["stats.distance"]);
+  });
+
+  it("rate prefers moving time over elapsed", () => {
+    const items = activityStatItems(
+      { distance: 10_000, durationSec: 4000, movingTimeSec: 3000, sportType: "run" },
+      t,
+    );
+    const pace = items.find((i) => i.label === "stats.avgPace");
+    // 10 km in 3000s moving → 5:00 /km (not 6:40 from elapsed)
+    expect(pace?.value).toBe("5:00 /km");
+  });
+});

apps/journal/app/lib/stats.ts

@@ -0,0 +1,112 @@
+import type { SportType } from "@trails-cool/db/schema/journal";
+
+// Minimal translate signature (the `t` returned by react-i18next satisfies it)
+// so this stays a plain util with no react-i18next coupling.
+type Translate = (key: string) => string;
+
+export interface StatItem {
+  label: string;
+  value: string;
+}
+
+// --- pure formatters (metric baseline; an imperial toggle is future work) ---
+
+export function formatDistanceKm(meters: number): string {
+  const km = meters / 1000;
+  return km >= 100 ? `${Math.round(km)} km` : `${km.toFixed(1)} km`;
+}
+
+export function formatElevationM(meters: number): string {
+  return `${Math.round(meters)} m`;
+}
+
+export function formatDuration(seconds: number): string {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.round((seconds % 3600) / 60);
+  return h > 0 ? `${h}h ${m}m` : `${m}m`;
+}
+
+export function formatSpeedKmh(kmh: number): string {
+  return `${kmh.toFixed(1)} km/h`;
+}
+
+export function formatPace(secondsPerKm: number): string {
+  const m = Math.floor(secondsPerKm / 60);
+  const s = Math.round(secondsPerKm % 60);
+  return `${m}:${String(s).padStart(2, "0")} /km`;
+}
+
+// --- derived rate (pace vs speed, sport-aware) ---
+
+const PACE_SPORTS = new Set<SportType>(["hike", "walk", "run"]);
+
+export function deriveRate(
+  distanceM: number | null | undefined,
+  timeSec: number | null | undefined,
+  sportType: SportType | null | undefined,
+): { kind: "pace" | "speed"; value: number } | null {
+  if (!distanceM || !timeSec || distanceM <= 0 || timeSec <= 0) return null;
+  const km = distanceM / 1000;
+  if (sportType && PACE_SPORTS.has(sportType)) {
+    return { kind: "pace", value: timeSec / km };
+  }
+  return { kind: "speed", value: km / (timeSec / 3600) };
+}
+
+export interface ActivityStatsInput {
+  distance?: number | null;
+  durationSec?: number | null; // elapsed
+  movingTimeSec?: number | null;
+  elevationGain?: number | null;
+  elevationLoss?: number | null;
+  sportType?: SportType | null;
+}
+
+/**
+ * Build the canonical ordered stat items for an activity or route. Order is
+ * fixed (distance · time · avg pace/speed · ascent · descent); moving time, when
+ * present, is shown right after elapsed time. `compact` drops moving time and
+ * ascent/descent for tight surfaces (feed card, profile list) — the remaining
+ * items keep the canonical order. Items with no value are omitted.
+ */
+export function activityStatItems(
+  input: ActivityStatsInput,
+  t: Translate,
+  opts: { compact?: boolean } = {},
+): StatItem[] {
+  const { compact = false } = opts;
+  const items: StatItem[] = [];
+
+  if (input.distance != null) {
+    items.push({ label: t("stats.distance"), value: formatDistanceKm(input.distance) });
+  }
+
+  const elapsed = input.durationSec;
+  if (elapsed != null) {
+    items.push({ label: t("stats.duration"), value: formatDuration(elapsed) });
+  }
+  if (!compact && input.movingTimeSec != null) {
+    items.push({ label: t("stats.movingTime"), value: formatDuration(input.movingTimeSec) });
+  }
+
+  // Rate prefers moving time when available, else elapsed.
+  const rate = deriveRate(input.distance, input.movingTimeSec ?? elapsed, input.sportType);
+  if (rate) {
+    items.push(
+      rate.kind === "pace"
+        ? { label: t("stats.avgPace"), value: formatPace(rate.value) }
+        : { label: t("stats.avgSpeed"), value: formatSpeedKmh(rate.value) },
+    );
+  }
+
+  if (!compact) {
+    if (input.elevationGain != null) {
+      items.push({ label: t("stats.ascent"), value: `↑ ${formatElevationM(input.elevationGain)}` });
+    }
+    if (input.elevationLoss != null) {
+      items.push({ label: t("stats.descent"), value: `↓ ${formatElevationM(input.elevationLoss)}` });
+    }
+  }
+
+  return items;
+}

apps/journal/app/routes/activities.$id.server.ts

@@ -13,6 +13,8 @@ import {
 import { deleteImportByActivity } from "~/lib/sync/imports.server";
 import { listRoutes } from "~/lib/routes.server";
 import { requireOwnedActivity, requireOwnedRoute } from "~/lib/ownership.server";
+import { parseGpxAsync, movingTime } from "@trails-cool/gpx";
+import { logger } from "~/lib/logger.server";
 import type { Visibility } from "@trails-cool/db/schema/journal";
 
 const VISIBILITY_VALUES = new Set<Visibility>(["private", "unlisted", "public"]);
@@ -36,6 +38,18 @@ export async function loadActivityDetail(request: Request, id: string | undefine
 
   const userRoutes = isOwner && user ? await listRoutes(user.id) : [];
 
+  // Moving time is derived from trackpoint timestamps (null when the GPX has
+  // none). Detail-page only — too costly to parse per row in list views.
+  let movingTimeSec: number | null = null;
+  if (activity.gpx) {
+    try {
+      const parsed = await parseGpxAsync(activity.gpx);
+      movingTimeSec = movingTime(parsed.tracks);
+    } catch (err) {
+      logger.warn({ activityId: activity.id, err }, "moving-time: failed to parse gpx");
+    }
+  }
+
   return {
     activity: {
       id: activity.id,
@@ -46,6 +60,7 @@ export async function loadActivityDetail(request: Request, id: string | undefine
       elevationGain: activity.elevationGain,
       elevationLoss: activity.elevationLoss,
       duration: activity.duration,
+      movingTimeSec,
       routeId: activity.routeId,
       hasGpx: !!activity.gpx,
       geojson: activity.geojson ?? null,

apps/journal/app/routes/activities.$id.tsx

@@ -4,6 +4,8 @@ import type { Route } from "./+types/activities.$id";
 import { ClientDate } from "~/components/ClientDate";
 import { ClientMap } from "~/components/ClientMap";
 import { SportBadge } from "~/components/SportBadge";
+import { StatRow } from "~/components/StatRow";
+import { activityStatItems } from "~/lib/stats";
 import { loadActivityDetail, activityDetailAction } from "./activities.$id.server";
 import {
   federationEnabled,
@@ -79,28 +81,21 @@ export default function ActivityDetailPage({ loaderData }: Route.ComponentProps)
         <ClientDate iso={activity.startedAt ?? activity.createdAt} />
       </div>
 
-      <div className="mt-6 grid grid-cols-3 gap-4">
-        {activity.distance != null && (
-          <div className="rounded-md bg-gray-50 p-4">
-            <p className="text-2xl font-bold text-gray-900">
-              {(activity.distance / 1000).toFixed(1)} km
-            </p>
-            <p className="text-sm text-gray-500">Distance</p>
-          </div>
+      <StatRow
+        size="lg"
+        className="mt-6"
+        items={activityStatItems(
+          {
+            distance: activity.distance,
+            durationSec: activity.duration,
+            movingTimeSec: activity.movingTimeSec,
+            elevationGain: activity.elevationGain,
+            elevationLoss: activity.elevationLoss,
+            sportType: activity.sportType,
+          },
+          t,
         )}
-        {activity.elevationGain != null && (
-          <div className="rounded-md bg-gray-50 p-4">
-            <p className="text-2xl font-bold text-gray-900">↑ {activity.elevationGain} m</p>
-            <p className="text-sm text-gray-500">Ascent</p>
-          </div>
-        )}
-        {activity.elevationLoss != null && (
-          <div className="rounded-md bg-gray-50 p-4">
-            <p className="text-2xl font-bold text-gray-900">↓ {activity.elevationLoss} m</p>
-            <p className="text-sm text-gray-500">Descent</p>
-          </div>
-        )}
-      </div>
+      />
 
       {activity.geojson && (
         <div className="mt-6 overflow-hidden rounded-lg border border-gray-200" style={{ height: 400 }}>

apps/journal/app/routes/feed.tsx

@@ -5,6 +5,8 @@ import type { Route } from "./+types/feed";
 import { ClientDate } from "~/components/ClientDate";
 import { ClientMap } from "~/components/ClientMap";
 import { SportBadge } from "~/components/SportBadge";
+import { StatRow } from "~/components/StatRow";
+import { activityStatItems } from "~/lib/stats";
 import { loadFeed } from "./feed.server";
 
 export async function loader({ request }: Route.LoaderArgs) {
@@ -142,14 +144,18 @@ export default function Feed({ loaderData }: Route.ComponentProps) {
                         {" · "}
                         <ClientDate iso={a.startedAt ?? a.createdAt} />
                       </div>
-                      <div className="mt-1 flex gap-4 text-sm text-gray-500">
-                        {a.distance != null && (
-                          <span>{(a.distance / 1000).toFixed(1)} km</span>
+                      <StatRow
+                        className="mt-1"
+                        items={activityStatItems(
+                          {
+                            distance: a.distance,
+                            durationSec: a.duration,
+                            sportType: a.sportType,
+                          },
+                          t,
+                          { compact: true },
                         )}
-                        {a.elevationGain != null && (
-                          <span>↑ {Math.round(a.elevationGain)} m</span>
-                        )}
-                      </div>
+                      />
                     </div>
                   </div>
                 </div>

apps/journal/app/routes/routes.$id.tsx

@@ -4,6 +4,8 @@ import { useTranslation } from "react-i18next";
 import type { Route } from "./+types/routes.$id";
 import { ClientDate } from "~/components/ClientDate";
 import { ClientMap } from "~/components/ClientMap";
+import { StatRow } from "~/components/StatRow";
+import { activityStatItems } from "~/lib/stats";
 import { loadRouteDetail, routeDetailAction } from "./routes.$id.server";
 
 export async function loader({ params, request }: Route.LoaderArgs) {
@@ -174,28 +176,18 @@ export default function RouteDetailPage({ loaderData }: Route.ComponentProps) {
         </div>
       )}
 
-      <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-3">
-        {route.distance != null && (
-          <div className="rounded-md bg-gray-50 p-4">
-            <p className="text-2xl font-bold text-gray-900">
-              {(route.distance / 1000).toFixed(1)} km
-            </p>
-            <p className="text-sm text-gray-500">{t("routes.distance")}</p>
-          </div>
+      <StatRow
+        size="lg"
+        className="mt-6"
+        items={activityStatItems(
+          {
+            distance: route.distance,
+            elevationGain: route.elevationGain,
+            elevationLoss: route.elevationLoss,
+          },
+          t,
         )}
-        {route.elevationGain != null && (
-          <div className="rounded-md bg-gray-50 p-4">
-            <p className="text-2xl font-bold text-gray-900">↑ {route.elevationGain} m</p>
-            <p className="text-sm text-gray-500">Ascent</p>
-          </div>
-        )}
-        {route.elevationLoss != null && (
-          <div className="rounded-md bg-gray-50 p-4">
-            <p className="text-2xl font-bold text-gray-900">↓ {route.elevationLoss} m</p>
-            <p className="text-sm text-gray-500">Descent</p>
-          </div>
-        )}
-      </div>
+      />
 
       {dayStats.length > 1 && (
         <div className="mt-6">

apps/journal/app/routes/users.$username.tsx

@@ -4,6 +4,8 @@ import { useTranslation } from "react-i18next";
 import { ClientDate } from "~/components/ClientDate";
 import { FollowButton } from "~/components/FollowButton";
 import { SportBadge } from "~/components/SportBadge";
+import { StatRow } from "~/components/StatRow";
+import { activityStatItems } from "~/lib/stats";
 import { loadUserProfile } from "./users.$username.server";
 import {
   federationEnabled,
@@ -229,11 +231,18 @@ export default function UserProfilePage({ loaderData }: Route.ComponentProps) {
                       <span className="font-medium text-gray-900">{a.name}</span>
                       <SportBadge sportType={a.sportType} />
                     </span>
-                    {a.distance != null && (
-                      <span className="shrink-0 text-sm tabular-nums text-gray-600">
-                        {(a.distance / 1000).toFixed(1)} km
-                      </span>
-                    )}
+                    <StatRow
+                      className="shrink-0 justify-end"
+                      items={activityStatItems(
+                        {
+                          distance: a.distance,
+                          durationSec: a.duration,
+                          sportType: a.sportType,
+                        },
+                        t,
+                        { compact: true },
+                      )}
+                    />
                   </div>
                   {a.description && (
                     <p className="mt-1 line-clamp-1 text-sm text-gray-500">{a.description}</p>