feat: tik op een module om die bovenaan te zetten met een groter temperatuurgetal

Tik op een van de drie binnenmodules zet die bovenaan de lijst (de
overige twee behouden hun onderlinge volgorde) en vergroot alleen het
temperatuurgetal van 50 naar 92px. Nogmaals tikken op de bovenste
(vastgezette) module zet 'm weer los. Puur client-side, geen nieuwe
API-velden: state.pinnedRoomId + de pure functie pinRoom() (met tests)
in format.js. De keuze overleeft de 5-minuten-verversing, reset bij een
volledige herlaad. Servicewerker naar v6.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

public/app.js

@@ -2,7 +2,7 @@ import {
   f1, fInt, fmm, markerPos, barHeights, wmoIcon, trendLabel,
   formatDate, formatTime, dayAbbr, monthName, isOlderThan, msUntil,
   co2Level, fPct, fHpa, seriesRange, sparklinePath,
-  windArrowDeg, fKmh, formatHour, formatFullDate,
+  windArrowDeg, fKmh, formatHour, formatFullDate, pinRoom,
 } from './format.js';
 import { icon, windArrow } from './icons.js';
 
@@ -22,10 +22,11 @@ const stage = $('stage');
 const viewport = $('viewport');
 
 const state = {
-  data: null,        // laatste payload, ook als die uit de SW-cache komt
+  data: null,          // laatste payload, ook als die uit de SW-cache komt
   tz: FALLBACK_TZ,
-  lastOk: null,      // Date van de laatste geslaagde live-fetch
-  offlineSince: null // Date vanaf wanneer er geen verbinding is
+  lastOk: null,        // Date van de laatste geslaagde live-fetch
+  offlineSince: null,  // Date vanaf wanneer er geen verbinding is
+  pinnedRoomId: null,  // id van de module die vastgezet is bovenaan; blijft staan tot opnieuw getikt of een volledige herlaad
 };
 
 /* ---------- schaal ---------- */
@@ -71,11 +72,13 @@ function renderOutdoor(o) {
 }
 
 function renderRooms(rooms) {
-  const html = rooms.map((r) => {
+  const ordered = pinRoom(rooms, state.pinnedRoomId);
+  const html = ordered.map((r) => {
     const off = !r.reachable || r.temp === null;
     const co2 = co2Level(off ? null : r.co2);
     const pill = `<span class="pill ${co2.level} num" title="${co2.label}">${co2.level === 'unknown' ? '–' : r.co2 + ' ppm'}</span>`;
-    return `<div class="a-room${off ? ' off' : ''}">
+    const pinned = r.id === state.pinnedRoomId;
+    return `<div class="a-room${off ? ' off' : ''}${pinned ? ' pinned' : ''}" data-id="${esc(r.id)}">
       <p class="a-rname"><span>${esc(r.name)}</span>${pill}</p>
       <p class="a-rtemp num">${off ? '–' : f1(r.temp) + '°'}</p>
       <p class="a-rmm num"><span class="cold">↓ ${off ? '–' : f1(r.min) + '°'}</span><span class="warm">↑ ${off ? '–' : f1(r.max) + '°'}</span><span class="rv">RV ${off ? '–' : fPct(r.humidity)}</span></p>
@@ -318,6 +321,13 @@ $('forecast').addEventListener('click', (e) => {
 });
 $('hour-overlay').addEventListener('click', closeHourOverlay);
 
+$('rooms').addEventListener('click', (e) => {
+  const room = e.target.closest('.a-room');
+  if (!room || !state.data) return;
+  state.pinnedRoomId = state.pinnedRoomId === room.dataset.id ? null : room.dataset.id;
+  renderRooms(state.data.indoor);
+});
+
 window.addEventListener('resize', fit);
 window.addEventListener('orientationchange', () => setTimeout(fit, 50));
 document.addEventListener('visibilitychange', () => {