3.2.1.1

Recent locations save

assets/js/app.js

@@ -175,7 +175,7 @@ export function UTCIForecast() {
   // All useState, useEffect, useCallback and useRef logic lives in
   // useAppState. See hooks/useAppState.js for the full reading order.
   const {
-    location, setLocationAndSave,
+    location, setLocationAndSave, recentLocations,
     forecast, airQuality, loading, error, now, fetchedAt,
     searchQuery, setSearchQuery, searchResults, setSearchResults, searching,
     selectedDay, setSelectedDay,
@@ -675,6 +675,35 @@ export function UTCIForecast() {
                 <div class=${'utci-fetch-time' + (isStale ? ' is-stale' : '')}>
                   ${isStale ? html`<span class="stale-dot" title="Data is older than expected - retrying">● </span>` : ''}Last update: ${fetchedAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                 </div>`}
+              ${(() => {
+                const curKey = `${location.lat.toFixed(3)},${location.lon.toFixed(3)}`;
+                const recents = (recentLocations || [])
+                  .filter((l) => `${l.lat.toFixed(3)},${l.lon.toFixed(3)}` !== curKey)
+                  .slice(0, 3);
+                if (!recents.length) return null;
+                return html`
+                  <div class="utci-recent-locs">
+                    <span class="utci-recent-label">Recent</span>
+                    ${recents.map((l) => html`
+                      <button
+                        key=${`${l.lat.toFixed(3)}-${l.lon.toFixed(3)}`}
+                        type="button"
+                        class="utci-recent-chip"
+                        title=${`See the forecast for ${l.name}`}
+                        onClick=${() => {
+                          setLocationAndSave(l);
+                          setSelectedDay(0);
+                          closeSearch();
+                        }}
+                      >
+                        <svg class="utci-recent-pin" viewBox="0 0 24 24" width="11" height="11" aria-hidden="true">
+                          <path fill="currentColor" d="M12 2c-3.87 0-7 3.13-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" />
+                          <circle cx="12" cy="9" r="2.5" fill="#fffcf2" />
+                        </svg>
+                        <span class="utci-recent-name">${l.name}</span>
+                      </button>`)}
+                  </div>`;
+              })()}
               ${(searchOpen || searchClosing) && html`
                 <div
                   class=${'utci-search-wrap utci-search-overlay' + (searchOpen ? '' : ' is-closing')}

assets/js/hooks/useAppState.js

@@ -57,9 +57,29 @@ export function useAppState() {
     return { name: 'London, England', lat: 51.509, lon: -0.126, country: 'GB' };
   });
 
+  // Recent locations: the most recently viewed spots, so the user can
+  // hop back with one click. The list is kept newest-first with the
+  // current location at the front; the UI shows the others as chips.
+  const [recentLocations, setRecentLocations] = useState(() => {
+    try {
+      const saved = localStorage.getItem('sunscope_recent_locations');
+      if (saved) return JSON.parse(saved);
+    } catch (e) { /* ignore */ }
+    return [];
+  });
+
+  const locKey = (l) => `${l.lat.toFixed(3)},${l.lon.toFixed(3)}`;
+
   const setLocationAndSave = (loc) => {
     try { localStorage.setItem('sunscope_last_location', JSON.stringify(loc)); } catch (e) { /* ignore */ }
     setLocation(loc);
+    setRecentLocations((prev) => {
+      // Keep the current spot at the front and the 3 previous distinct
+      // ones behind it (4 total, so 3 chips remain after excluding current).
+      const next = [loc, ...prev.filter((l) => locKey(l) !== locKey(loc))].slice(0, 4);
+      try { localStorage.setItem('sunscope_recent_locations', JSON.stringify(next)); } catch (e) { /* ignore */ }
+      return next;
+    });
   };
 
   // Pro tier flag is read early so useForecast can pick its refresh cadence
@@ -589,7 +609,7 @@ export function useAppState() {
   // ── RETURN ALL STATE + HANDLERS ───────────────────────────────────────
   return {
     // location
-    location, setLocationAndSave,
+    location, setLocationAndSave, recentLocations,
     // forecast
     forecast, airQuality, loading, error, now, fetchedAt,
     // search