init

components/elevation-chart.tsx

@@ -1,13 +1,31 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { useEffect, useId, useState } from "react";
+import {
+  Area,
+  CartesianGrid,
+  ComposedChart,
+  Line,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+type Point = { distanceKm: number; altM: number; paceSec?: number };
 
 type Props = {
-  data: { distanceKm: number; altM: number }[];
+  data: Point[];
 };
 
+function fmtPace(sec: number): string {
+  const m = Math.floor(sec / 60);
+  const s = Math.round(sec % 60);
+  return `${m}:${s.toString().padStart(2, "0")} /km`;
+}
+
 export function ElevationChart({ data }: Props) {
+  const uid = useId();
   const [mounted, setMounted] = useState(false);
   useEffect(() => setMounted(true), []);
 
@@ -18,15 +36,37 @@ export function ElevationChart({ data }: Props) {
   const altitudes = data.map((p) => p.altM);
   const minAlt = Math.min(...altitudes);
   const maxAlt = Math.max(...altitudes);
-  const pad = Math.max(5, Math.round((maxAlt - minAlt) * 0.15));
+  const altPad = Math.max(5, Math.round((maxAlt - minAlt) * 0.15));
+
+  const pacePoints = data.map((p) => p.paceSec).filter((v): v is number => v != null && v > 0);
+  const hasPace = pacePoints.length > 5;
+  const minPace = hasPace ? Math.min(...pacePoints) : 0;
+  const maxPace = hasPace ? Math.max(...pacePoints) : 0;
+  const pacePad = Math.max(5, Math.round((maxPace - minPace) * 0.15));
+
+  const tooltipStyle = {
+    background: "var(--color-bg)",
+    border: "1px solid var(--color-muted)",
+    borderRadius: 8,
+    fontSize: 12,
+    color: "var(--color-fg)",
+  };
 
   return (
     <div className="rounded-lg border border-muted/40 bg-surface p-4">
-      <div className="mb-2 text-sm text-fg/60">Profil wysokości</div>
+      <div className="mb-2 flex items-center gap-4 text-sm text-fg/60">
+        <span>Profil wysokości</span>
+        {hasPace && (
+          <span className="flex items-center gap-1">
+            <span className="inline-block h-0.5 w-4" style={{ background: "var(--color-sand)" }} />
+            Tempo
+          </span>
+        )}
+      </div>
       <ResponsiveContainer width="100%" height={110}>
-        <AreaChart data={data} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
+        <ComposedChart data={data} margin={{ top: 4, right: hasPace ? 52 : 8, left: 0, bottom: 0 }}>
           <defs>
-            <linearGradient id="elevGradient" x1="0" y1="0" x2="0" y2="1">
+            <linearGradient id={`elev-${uid}`} x1="0" y1="0" x2="0" y2="1">
               <stop offset="5%" stopColor="var(--color-accent)" stopOpacity={0.25} />
               <stop offset="95%" stopColor="var(--color-accent)" stopOpacity={0} />
             </linearGradient>
@@ -41,33 +81,59 @@ export function ElevationChart({ data }: Props) {
             interval={Math.max(0, Math.floor(data.length / 5) - 1)}
           />
           <YAxis
+            yAxisId="elev"
             stroke="var(--color-fg)"
             opacity={0.5}
             fontSize={11}
             width={44}
             tickFormatter={(v) => `${Math.round(v)} m`}
-            domain={[minAlt - pad, maxAlt + pad]}
+            domain={[minAlt - altPad, maxAlt + altPad]}
           />
+          {hasPace && (
+            <YAxis
+              yAxisId="pace"
+              orientation="right"
+              reversed
+              stroke="var(--color-sand)"
+              opacity={0.5}
+              fontSize={11}
+              width={50}
+              tickFormatter={fmtPace}
+              domain={[minPace - pacePad, maxPace + pacePad]}
+            />
+          )}
           <Tooltip
-            contentStyle={{
-              background: "var(--color-bg)",
-              border: "1px solid var(--color-muted)",
-              borderRadius: 8,
-              fontSize: 12,
-              color: "var(--color-fg)",
+            contentStyle={tooltipStyle}
+            formatter={(value, name) => {
+              if (name === "altM") return [`${Math.round(Number(value))} m n.p.m.`, "Wysokość"];
+              if (name === "paceSec") return [fmtPace(Number(value)), "Tempo"];
+              return [value, name];
             }}
-            formatter={(value) => [`${Math.round(Number(value))} m n.p.m.`, "Wysokość"]}
-            labelFormatter={(label) => `${Number(label).toFixed(2)} km`}
+            labelFormatter={(l) => `${Number(l).toFixed(2)} km`}
           />
           <Area
+            yAxisId="elev"
             type="monotone"
             dataKey="altM"
+            name="altM"
             stroke="var(--color-accent)"
             strokeWidth={2}
-            fill="url(#elevGradient)"
+            fill={`url(#elev-${uid})`}
             dot={false}
           />
-        </AreaChart>
+          {hasPace && (
+            <Line
+              yAxisId="pace"
+              type="monotone"
+              dataKey="paceSec"
+              name="paceSec"
+              stroke="var(--color-sand)"
+              strokeWidth={1.5}
+              dot={false}
+              connectNulls={false}
+            />
+          )}
+        </ComposedChart>
       </ResponsiveContainer>
     </div>
   );

components/nav.tsx

@@ -1,5 +1,7 @@
 import Link from "next/link";
 import { Activity, Dumbbell, LayoutDashboard, Settings } from "lucide-react";
+import { auth, signOut } from "@/auth";
+import { SignOutButton } from "./sign-out-button";
 
 const links = [
   { href: "/", label: "Panel", icon: LayoutDashboard },
@@ -8,7 +10,14 @@ const links = [
   { href: "/settings", label: "Ustawienia", icon: Settings },
 ];
 
-export function Nav() {
+export async function Nav() {
+  const session = await auth();
+
+  const signOutAction = async () => {
+    "use server";
+    await signOut({ redirectTo: "/login" });
+  };
+
   return (
     <header className="border-b border-muted/40 bg-surface">
       <div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-3 sm:px-6">
@@ -39,6 +48,12 @@ export function Nav() {
               <span className="hidden sm:inline">{label}</span>
             </Link>
           ))}
+          {session?.user?.name && (
+            <span className="hidden px-2 text-xs text-fg/40 sm:inline">
+              {session.user.name}
+            </span>
+          )}
+          <SignOutButton action={signOutAction} />
         </nav>
       </div>
     </header>

components/run-metric-chart.tsx

@@ -20,6 +20,8 @@ type Props = {
   color?: string;
   referenceLine?: number;
   decimals?: number;
+  format?: "pace";
+  reversed?: boolean;
 };
 
 export function RunMetricChart({
@@ -29,6 +31,8 @@ export function RunMetricChart({
   color = "var(--color-accent)",
   referenceLine,
   decimals = 0,
+  format,
+  reversed = false,
 }: Props) {
   const uid = useId();
   const gradId = `grad-${uid.replace(/:/g, "")}`;
@@ -43,8 +47,14 @@ export function RunMetricChart({
   const min = Math.min(...values);
   const max = Math.max(...values);
   const pad = Math.max(1, Math.round((max - min) * 0.15));
-  const fmt = (v: number) =>
-    decimals > 0 ? `${Number(v).toFixed(decimals)} ${unit}` : `${Math.round(v)} ${unit}`;
+  const fmt = (v: number) => {
+    if (format === "pace") {
+      const m = Math.floor(v / 60);
+      const s = Math.round(v % 60);
+      return `${m}:${s.toString().padStart(2, "0")} /km`;
+    }
+    return decimals > 0 ? `${Number(v).toFixed(decimals)} ${unit}` : `${Math.round(v)} ${unit}`;
+  };
 
   return (
     <div className="rounded-lg border border-muted/40 bg-surface p-4">
@@ -72,7 +82,8 @@ export function RunMetricChart({
             fontSize={11}
             width={50}
             tickFormatter={fmt}
-            domain={[min - pad, max + pad]}
+            domain={reversed ? [max + pad, min - pad] : [min - pad, max + pad]}
+            reversed={reversed}
           />
           <Tooltip
             contentStyle={{

components/sign-out-button.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { LogOut } from "lucide-react";
+
+export function SignOutButton({ action }: { action: () => Promise<void> }) {
+  return (
+    <form action={action}>
+      <button
+        type="submit"
+        className="flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium text-fg/80 transition-colors hover:bg-bg hover:text-accent sm:px-3"
+        title="Wyloguj się"
+      >
+        <LogOut size={16} />
+        <span className="hidden sm:inline">Wyloguj</span>
+      </button>
+    </form>
+  );
+}