trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

home: use the shared StatRow + SportBadge on activity cards

Browse source 
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>
This commit is contained in:
Ullrich Schäfer 2026-06-12 16:03:36 +02:00
parent 1ba063a085
commit acb1e43481
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
2 changed files with 29 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

4
apps/journal/app/routes/home.server.ts
View file

@ -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,

41
apps/journal/app/routes/home.tsx
View file

@ -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>