init

app/running/page.tsx

@@ -0,0 +1,54 @@
+import Link from "next/link";
+import { Activity } from "lucide-react";
+import { EmptyState } from "@/components/empty-state";
+import { SyncButton } from "@/components/sync-button";
+import { formatDateShort, formatDistance, formatDuration, formatPace } from "@/lib/format";
+import { listRunningActivities } from "@/lib/models/running";
+
+export const dynamic = "force-dynamic";
+
+export default async function RunningPage() {
+  const activities = await listRunningActivities();
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-fg">Bieganie</h1>
+          <p className="mt-1 text-sm text-fg/60">Aktywności zsynchronizowane z Garmin Connect.</p>
+        </div>
+        <SyncButton />
+      </div>
+
+      {activities.length === 0 ? (
+        <EmptyState
+          icon={<Activity size={32} />}
+          title="Brak biegów"
+          description="Zsynchronizuj aktywności z Garmin Connect, aby zobaczyć tutaj swoje biegi."
+        />
+      ) : (
+        <ul className="flex flex-col gap-3">
+          {activities.map((activity) => (
+            <li key={activity._id.toString()}>
+              <Link
+                href={`/running/${activity._id.toString()}`}
+                className="flex items-center justify-between rounded-lg border border-muted/40 bg-surface p-4 transition-colors hover:border-accent/60"
+              >
+                <div>
+                  <div className="font-semibold text-fg">{activity.name}</div>
+                  <div className="text-sm text-fg/60">{formatDateShort(activity.startTime)}</div>
+                </div>
+                <div className="flex flex-col items-end text-sm text-fg/60">
+                  <span>{formatDistance(activity.distanceM)}</span>
+                  <span>
+                    {formatDuration(activity.durationSec)} · {formatPace(activity.avgPaceSecPerKm)}
+                  </span>
+                </div>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}