BikeControl/ui/src/components/SummaryScreen.svelte

<script lang="ts">
  /**
   * The ride, after the ride (FR-9.13, FR-9.14).
   *
   * The activity is already written by the time this appears — `stop_ride`
   * saves it before emitting the summary. So the primary action here is "save a
   * copy where I want it", not "save or lose it", and nothing on this screen is
   * urgent. It says where the file already is, whatever the rider does next.
   */
  import { app } from '../lib/app.svelte';
  import { clock, km, num } from '../lib/format';
  import Readout from './Readout.svelte';

  const s = $derived(app.summary);

  /** Time not spent riding. Only worth showing when it is not zero. */
  const pausedS = $derived(s ? Math.max(0, s.durationS - s.movingS) : 0);

  /**
   * Anything the rider should know about the *file* rather than the ride.
   * Silence here means the recording was clean, so these only ever appear when
   * there is genuinely something to say.
   */
  const caveats = $derived.by(() => {
    if (!s) return [];
    const out: string[] = [];
    if (s.recoveredFromCrash) {
      out.push('This ride was rebuilt from its journal after an interruption.');
    }
    if (s.gaps > 0) {
      out.push(
        `${s.gaps} telemetry dropout${s.gaps === 1 ? '' : 's'} — the trainer stopped reporting and those stretches are gaps in the file.`,
      );
    }
    if (s.skippedLogLines > 0) {
      out.push(
        `${s.skippedLogLines} journal line${s.skippedLogLines === 1 ? '' : 's'} could not be read and are missing from the activity.`,
      );
    }
    return out;
  });
</script>

<div class="summary">
  {#if !s}
    <section class="empty">
      <h1>No finished ride</h1>
      <p>End a ride and its summary appears here.</p>
      <button class="btn primary" onclick={() => (app.screen = 'ride')}>Back to the ride</button>
    </section>
  {:else}
    <header>
      <div class="who">
        <h1>Ride complete</h1>
        <span class="sub">
          {s.records} sample{s.records === 1 ? '' : 's'} · {s.laps} lap{s.laps === 1 ? '' : 's'}
        </span>
      </div>
      <span class="chip tone-ok"><span class="dot"></span>Saved</span>
    </header>

    <!-- FR-9.13: duration, distance, elevation, avg/max power, avg cadence. -->
    <section class="primary">
      <Readout label="Duration" value={clock(s.durationS)} size="hero" colour="var(--route)" />
      <Readout
        label="Distance"
        value={km(s.distanceM, 2)}
        unit="km"
        size="big"
        colour="var(--route)"
      />
      <Readout
        label="Climbing"
        value={num(s.ascentM, 0)}
        unit="m"
        size="big"
        colour="var(--climb)"
      />
    </section>

    <section class="detail">
      <Readout
        label="Avg power"
        value={s.avgPowerW != null ? num(s.avgPowerW, 0) : '—'}
        unit={s.avgPowerW != null ? 'W' : ''}
        colour="var(--power)"
        dim={s.avgPowerW == null}
      />
      <Readout
        label="Max power"
        value={s.maxPowerW != null ? num(s.maxPowerW, 0) : '—'}
        unit={s.maxPowerW != null ? 'W' : ''}
        colour="var(--power)"
        dim={s.maxPowerW == null}
      />
      <Readout
        label="Avg cadence"
        value={s.avgCadenceRpm != null ? num(s.avgCadenceRpm, 0) : '—'}
        unit={s.avgCadenceRpm != null ? 'rpm' : ''}
        dim={s.avgCadenceRpm == null}
      />
      <Readout
        label="Moving"
        value={clock(s.movingS)}
        sub={pausedS >= 1 ? `${clock(pausedS)} paused` : null}
      />
      <Readout
        label="Calories"
        value={s.calories != null ? num(s.calories, 0) : '—'}
        unit={s.calories != null ? 'kcal' : ''}
        dim={s.calories == null}
      />
    </section>

    {#if caveats.length > 0}
      <section class="caveats">
        {#each caveats as caveat (caveat)}
          <p>{caveat}</p>
        {/each}
      </section>
    {/if}

    <!--
      The path is stated whether or not the rider saves a copy. A summary that
      only said "saved" would leave someone who closes the window with no idea
      where their ride went.
    -->
    <section class="where">
      <span class="label">Activity file</span>
      <code class="path">{s.savedPath ?? s.fitPath}</code>
      {#if s.savedPath}
        <span class="also">Automatic copy kept at {s.fitPath}</span>
      {/if}
    </section>

    <footer>
      <button class="btn primary" disabled={app.saving} onclick={() => app.saveFit()}>
        {app.saving ? 'Saving…' : s.savedPath ? 'Save another copy' : 'Save FIT…'}
        <span class="kbd">S</span>
      </button>
      <button class="btn" onclick={() => app.newRide()}>
        New ride
        <span class="kbd">N</span>
      </button>
      <button class="btn ghost" onclick={() => (app.screen = 'connect')}>
        Devices
        <span class="kbd">D</span>
      </button>
    </footer>
  {/if}
</div>

<style>
  .summary {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    padding: 1.2rem var(--edge) 1.6rem;
  }

  header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap);
  }

  .who {
    min-width: 0;
  }

  h1 {
    margin: 0;
    font-size: clamp(1.05rem, 1.6vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -0.015em;
  }

  .sub {
    font-size: 0.85rem;
    color: var(--ink-dim);
  }

  .primary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap) calc(var(--gap) * 2);
    align-items: flex-end;
  }

  .detail {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap) calc(var(--gap) * 1.6);
    padding-top: var(--gap);
    border-top: 1px solid var(--hairline);
  }

  /* Warnings about the file, not the ride. Deliberately not a toast: these
     outlive the four seconds a toast gets, and they are the reason someone
     would go looking at the journal. */
  .caveats {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.5rem;
    background: var(--bg-lift);
    border-left: 3px solid var(--warn);
  }

  .caveats p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--ink-soft);
  }

  .where {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
  }

  .path {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
    /* Selectable: the whole point of showing it is that it can be copied. */
    user-select: text;
    -webkit-user-select: text;
  }

  .also {
    font-size: 0.78rem;
    color: var(--ink-dim);
    overflow-wrap: anywhere;
  }

  footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: var(--gap);
  }

  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    height: 100%;
    text-align: center;
  }

  .empty p {
    margin: 0;
    color: var(--ink-dim);
  }
</style>