Add configurable auto-refresh interval (default 30m, option to disable); remove manual refresh button

src/App.svelte

@@ -43,6 +43,12 @@
     }
   })
 
+  // Restart the auto-refresh timer whenever the interval preference changes
+  $effect(() => {
+    app.settings.refreshInterval
+    app.startAutoRefresh()
+  })
+
   async function tryGeolocation() {
     if (!navigator.geolocation) {
       geoError = 'Geolocation not supported. Add a location to get started.'
@@ -97,10 +103,6 @@
       app.selectLocation(newest.id)
     }
   }
-
-  function handleRefresh() {
-    app.refreshForecast()
-  }
 </script>
 
 <div class="app-shell">
@@ -116,9 +118,6 @@
     <span class="mobile-title">
       {app.selectedLocation?.name || 'WeatherLens'}
     </span>
-    <button class="btn-icon" onclick={handleRefresh} aria-label="Refresh" title="Refresh">
-      {app.loading ? '⏳' : '🔄'}
-    </button>
     <button class="btn-icon" onclick={() => app.showSettings = true} aria-label="Settings" title="Settings">
       ⚙️
     </button>
@@ -150,9 +149,6 @@
         {/if}
       </div>
       <div class="top-bar-actions">
-        <button class="btn btn-ghost btn-sm" onclick={handleRefresh} disabled={app.loading}>
-          {app.loading ? '⏳' : '🔄'} Refresh
-        </button>
         <NotificationBell />
       </div>
     </div>

src/components/SettingsDialog.svelte

@@ -79,6 +79,28 @@
         </div>
       </div>
 
+      <!-- Auto-refresh -->
+      <div class="settings-group">
+        <h4>Auto-refresh</h4>
+        <div class="setting-row">
+          <div class="setting-col">
+            <span>Refresh interval</span>
+            <span class="setting-help">Automatically fetch updated weather on a schedule. Turn off to refresh only when you open the app.</span>
+          </div>
+          <select
+            value={String(localSettings.refreshInterval || 0)}
+            onchange={(e) => localSettings.refreshInterval = parseInt(e.target.value)}
+          >
+            <option value="0">Off</option>
+            <option value="5">Every 5 minutes</option>
+            <option value="10">Every 10 minutes</option>
+            <option value="15">Every 15 minutes</option>
+            <option value="30">Every 30 minutes</option>
+            <option value="60">Every hour</option>
+          </select>
+        </div>
+      </div>
+
       <!-- Units -->
       <div class="settings-group">
         <h4>Units</h4>

src/lib/storage/db.js

@@ -124,6 +124,7 @@ export async function clearAllLocations() {
 const DEFAULT_SETTINGS = {
   units: 'metric',
   source: 'open-meteo',
+  refreshInterval: 30, // minutes; 0 = no auto-refresh
   alertsEnabled: true,
   alertThresholds: {
     precip: 70,

src/lib/stores/app.svelte.js

@@ -33,6 +33,7 @@ export class AppStore {
   settings = $state({
     units: 'metric',
     source: 'open-meteo',
+    refreshInterval: 30,
     alertsEnabled: true,
     alertThresholds: {
       precip: 70,
@@ -147,6 +148,29 @@ export class AppStore {
     }
   }
 
+  /**
+   * Start (or restart) the auto-refresh timer based on the configured
+   * interval. A value of 0 (or missing) disables auto-refresh.
+   */
+  startAutoRefresh() {
+    this.stopAutoRefresh()
+    const minutes = this.settings.refreshInterval
+    if (!minutes || minutes <= 0) return
+    this._refreshTimer = setInterval(() => {
+      this.refreshForecast()
+    }, minutes * 60 * 1000)
+  }
+
+  /**
+   * Stop the auto-refresh timer if it is running.
+   */
+  stopAutoRefresh() {
+    if (this._refreshTimer) {
+      clearInterval(this._refreshTimer)
+      this._refreshTimer = null
+    }
+  }
+
   /**
    * Select a location and fetch its forecast.
    * @param {string} id