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')}