Load places based on map bounds

app/services/storage.js

@@ -3,10 +3,13 @@ import RemoteStorage from 'remotestoragejs';
 import Places from '@remotestorage/module-places';
 import Widget from 'remotestorage-widget';
 import { tracked } from '@glimmer/tracking';
+import { getGeohashPrefixesInBbox } from '../utils/geohash-coverage';
 
 export default class StorageService extends Service {
   rs;
   @tracked savedPlaces = [];
+  @tracked loadedPrefixes = [];
+  @tracked currentBbox = null;
   @tracked version = 0; // Shared version tracker for bookmarks
 
   constructor() {
@@ -40,11 +43,29 @@ export default class StorageService extends Service {
     // widget.attach();
 
     this.rs.on('ready', () => {
-      this.loadAllPlaces();
+      // this.loadAllPlaces();
     });
 
-    this.rs.scope('/places/').on('change', () => {
-      this.loadAllPlaces();
+    this.rs.scope('/places/').on('change', (event) => {
+      // When data changes remotely or locally, we should ideally re-fetch the affected area.
+      // However, we don't easily know the bbox of the changed event without parsing paths.
+      // For now, let's trigger a reload of the *currently loaded* prefixes to ensure consistency.
+      // Or simpler: just let the manual user interaction drive it?
+      // No, if a sync happens, we want to see it.
+      if (this.currentBbox) {
+        console.log('Reloading loaded prefixes due to change event');
+        // Reset loaded prefixes to force a reload of the current view
+        // Ideally we should just invalidate the specific changed one, but tracking that is harder.
+        // Or just re-run loadPlacesInBounds which filters? No, because filters exclude "loadedPrefixes".
+
+        // Strategy:
+        // 1. Calculate required prefixes for current view
+        const required = getGeohashPrefixesInBbox(this.currentBbox);
+        // 2. Force load them
+        this.loadAllPlaces(required);
+        // Note: we don't update loadedPrefixes here as they are already in the set,
+        // but we just want to refresh their data.
+      }
     });
   }
 
@@ -54,7 +75,35 @@ export default class StorageService extends Service {
 
   notifyChange() {
     this.version++;
-    this.loadAllPlaces();
+    // this.loadAllPlaces();
+  }
+
+  async loadPlacesInBounds(bbox) {
+    // 1. Calculate required prefixes
+    const requiredPrefixes = getGeohashPrefixesInBbox(bbox);
+
+    // 2. Filter out prefixes we've already loaded
+    const missingPrefixes = requiredPrefixes.filter(
+      (p) => !this.loadedPrefixes.includes(p)
+    );
+
+    if (missingPrefixes.length === 0) {
+      // console.log('All prefixes already loaded for this view');
+      return;
+    }
+
+    console.log('Loading new prefixes:', missingPrefixes);
+
+    // 3. Load places for only the new prefixes
+    await this.loadAllPlaces(missingPrefixes);
+
+    // 4. Update our tracked list of loaded prefixes
+    // Using assignment to trigger reactivity if needed, though simple push/mutation might suffice
+    // depending on usage. Tracked arrays need reassignment or specific Ember array methods
+    // if we want to observe the array itself, but here we just check inclusion.
+    // Let's do a reassignment to be safe and clean.
+    this.loadedPrefixes = [...this.loadedPrefixes, ...missingPrefixes];
+    this.currentBbox = bbox;
   }
 
   async loadAllPlaces(prefixes = null) {