profile-weekly-distance: weekly distance bar chart on the profile

Implements the profile-weekly-distance change (specs/profile-weekly-distance):

- getWeeklyDistance(ownerId, { publicOnly, weeks=12 }) in activities.server.ts:
  one query that gap-fills in SQL — generate_series of week-starts LEFT JOINed
  to activities — so it returns exactly 12 contiguous { weekStart, distance }
  rows with matching Postgres week boundaries, viewer-scoped, no cache, no
  schema change.
- WeeklyDistanceChart: SVG bars normalized to the busiest week (empty weeks keep
  their slot as zero-height bars), per-bar title distance, localized label;
  renders nothing when there's no distance in the window. Mounted under the
  ProfileStats header.
- i18n journal.profileStats.weeklyDistance (en + de).

Tests: WeeklyDistanceChart component (jsdom: bar count incl. zero weeks, empty
→ hidden, normalization); e2e creates an activity with distance and asserts the
chart renders. typecheck + lint + unit (journal 321) green; verified in the
browser.

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

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

@@ -0,0 +1,30 @@
+// @vitest-environment jsdom
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { WeeklyDistanceChart } from "./WeeklyDistanceChart.tsx";
+
+afterEach(cleanup);
+
+const weeks = (distances: number[]) =>
+  distances.map((distance, i) => ({ weekStart: `2026-04-${String(i + 1).padStart(2, "0")}`, distance }));
+
+describe("WeeklyDistanceChart", () => {
+  it("renders nothing when every week is zero", () => {
+    const { container } = render(<WeeklyDistanceChart weeks={weeks([0, 0, 0])} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders one bar per week, including zero weeks (contiguous axis)", () => {
+    const { container } = render(<WeeklyDistanceChart weeks={weeks([1000, 0, 2000, 0])} />);
+    const bars = container.querySelectorAll("div[style]");
+    expect(bars).toHaveLength(4);
+  });
+
+  it("normalizes bar heights to the busiest week", () => {
+    const { container } = render(<WeeklyDistanceChart weeks={weeks([5000, 10000, 2500])} />);
+    const heights = [...container.querySelectorAll("div[style]")].map(
+      (b) => (b as HTMLElement).style.height,
+    );
+    expect(heights).toEqual(["50%", "100%", "25%"]);
+  });
+});

apps/journal/app/components/WeeklyDistanceChart.tsx

@@ -0,0 +1,41 @@
+import { useTranslation } from "react-i18next";
+import { formatDistanceKm } from "~/lib/stats";
+
+export interface WeeklyDistanceBucket {
+  weekStart: string;
+  distance: number;
+}
+
+/**
+ * Compact weekly-distance bar chart for the profile (last N weeks, oldest →
+ * newest). Bars are normalized to the busiest week; empty weeks keep their slot
+ * as a zero-height bar so the axis stays contiguous. Renders nothing when there
+ * is no distance in the window.
+ */
+export function WeeklyDistanceChart({
+  weeks,
+  className,
+}: {
+  weeks: WeeklyDistanceBucket[];
+  className?: string;
+}) {
+  const { t } = useTranslation("journal");
+  const max = weeks.reduce((m, w) => Math.max(m, w.distance), 0);
+  if (max <= 0) return null;
+
+  return (
+    <div className={className}>
+      <p className="mb-1 text-xs text-gray-500">{t("profileStats.weeklyDistance")}</p>
+      <div className="flex h-16 items-end gap-1" role="img" aria-label={t("profileStats.weeklyDistance")}>
+        {weeks.map((w) => (
+          <div
+            key={w.weekStart}
+            className="flex-1 rounded-t bg-blue-500/70"
+            style={{ height: `${(w.distance / max) * 100}%` }}
+            title={formatDistanceKm(w.distance)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}