From acb1e4348173649d09df4a767e3ae864e31da85e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= <hi+github@ullrich.is>
Date: Fri, 12 Jun 2026 16:03:36 +0200
Subject: [PATCH] home: use the shared StatRow + SportBadge on activity cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The home page's activity list (signed-in dashboard + anonymous public feed) was
the one surface still rendering the old `distance ↑ elevation` line, leaving it
inconsistent with the feed, detail, and profile after the activity-stats work.

Adopt the shared SportBadge + compact StatRow on both home card variants;
expose sportType in the home loader projection. No behavior change beyond the
consistent presentation.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/journal/app/routes/home.server.ts |  4 +++
 apps/journal/app/routes/home.tsx       | 41 ++++++++++++++++----------
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/apps/journal/app/routes/home.server.ts b/apps/journal/app/routes/home.server.ts
index e099e9d..af69e76 100644
--- a/apps/journal/app/routes/home.server.ts
+++ b/apps/journal/app/routes/home.server.ts
@@ -8,10 +8,12 @@ import { getSessionUser } from "~/lib/auth/session.server";
 import { getDb } from "~/lib/db";
 import { credentials } from "@trails-cool/db/schema/journal";
 import { listActivities, listRecentPublicActivities } from "~/lib/activities.server";
+import type { SportType } from "@trails-cool/db/schema/journal";
 
 export interface HomeActivityCard {
   id: string;
   name: string;
+  sportType: SportType | null;
   distance: number | null;
   elevationGain: number | null;
   duration: number | null;
@@ -57,6 +59,7 @@ export async function loadHomeData(request: Request): Promise<HomeLoaderData> {
     activities = rows.slice(0, 20).map((a) => ({
       id: a.id,
       name: a.name,
+      sportType: a.sportType,
       distance: a.distance,
       elevationGain: a.elevationGain,
       duration: a.duration,
@@ -71,6 +74,7 @@ export async function loadHomeData(request: Request): Promise<HomeLoaderData> {
     activities = rows.map((a) => ({
       id: a.id,
       name: a.name,
+      sportType: a.sportType,
       distance: a.distance,
       elevationGain: a.elevationGain,
       duration: a.duration,
diff --git a/apps/journal/app/routes/home.tsx b/apps/journal/app/routes/home.tsx
index 2e3f580..cb868ef 100644
--- a/apps/journal/app/routes/home.tsx
+++ b/apps/journal/app/routes/home.tsx
@@ -4,6 +4,9 @@ import { useTranslation } from "react-i18next";
 import type { Route } from "./+types/home";
 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 { loadHomeData } from "./home.server";
 
 export function meta(_args: Route.MetaArgs) {
@@ -146,15 +149,18 @@ export default function Home({ loaderData }: Route.ComponentProps) {
                     </div>
                     <div className="flex flex-1 flex-col justify-between">
                       <div>
-                        <h2 className="text-lg font-medium text-gray-900">{a.name}</h2>
-                        <div className="mt-1 flex gap-4 text-sm text-gray-500">
-                          {a.distance != null && (
-                            <span>{(a.distance / 1000).toFixed(1)} km</span>
-                          )}
-                          {a.elevationGain != null && (
-                            <span>↑ {Math.round(a.elevationGain)} m</span>
-                          )}
+                        <div className="flex items-center gap-2">
+                          <h2 className="text-lg font-medium text-gray-900">{a.name}</h2>
+                          <SportBadge sportType={a.sportType} />
                         </div>
+                        <StatRow
+                          className="mt-1"
+                          items={activityStatItems(
+                            { distance: a.distance, durationSec: a.duration, sportType: a.sportType },
+                            t,
+                            { compact: true },
+                          )}
+                        />
                       </div>
                       <span className="text-sm text-gray-400">
                         <ClientDate iso={a.startedAt ?? a.createdAt} />
@@ -266,7 +272,10 @@ export default function Home({ loaderData }: Route.ComponentProps) {
                     </div>
                     <div className="flex flex-1 flex-col justify-between">
                       <div>
-                        <h3 className="text-base font-medium text-gray-900">{a.name}</h3>
+                        <div className="flex items-center gap-2">
+                          <h3 className="text-base font-medium text-gray-900">{a.name}</h3>
+                          <SportBadge sportType={a.sportType} />
+                        </div>
                         <div className="mt-1 text-sm text-gray-500">
                           {a.ownerUsername && (
                             <>
@@ -282,14 +291,14 @@ export default function Home({ 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>