Update map markers when bookmarks are added/removed

app/components/map.gjs

@@ -75,18 +75,24 @@ export default class MapComponent extends Component {
     });
 
     // Listen to changes in the /places/ scope
+    // keeping this as a backup or for future real-time sync support
     this.storage.rs.scope('/places/').on('change', (event) => {
        console.log('RemoteStorage change detected:', event);
-       this.loadBookmarks();
+       // this.loadBookmarks(); // Disabling auto-update for now per instructions, using explicit version action instead
     });
   });
 
+  // Re-fetch bookmarks when the version changes (triggered by parent action)
+  updateBookmarks = modifier((element, [version]) => {
+     this.loadBookmarks();
+  });
+
   async loadBookmarks() {
     try {
       const places = await this.storage.places.listAll();
-      
+
       this.bookmarkSource.clear();
-      
+
       if (places && Array.isArray(places)) {
         places.forEach(place => {
           if (place.lat && place.lon) {
@@ -136,7 +142,7 @@ export default class MapComponent extends Component {
           }
           return;
        }
-       
+
        // Otherwise (empty map or non-bookmark feature), close the sidebar
        if (this.args.onOutsideClick) {
          this.args.onOutsideClick();
@@ -150,7 +156,7 @@ export default class MapComponent extends Component {
         if (this.args.onPlacesFound) {
            this.args.onPlacesFound([], clickedBookmark);
         }
-        return; 
+        return;
     }
 
     const coords = toLonLat(event.coordinate);
@@ -212,6 +218,7 @@ export default class MapComponent extends Component {
   <template>
     <div
       {{this.setupMap}}
+      {{this.updateBookmarks @bookmarksVersion}}
       style="position: absolute; inset: 0;"
     ></div>
   </template>

app/components/places-sidebar.gjs

@@ -42,6 +42,11 @@ export default class PlacesSidebar extends Component {
           if (place.id && place.geohash) {
             await this.storage.places.remove(place.id, place.geohash);
             console.log('Place deleted:', place.title);
+
+            // Notify parent to refresh map bookmarks
+            if (this.args.onBookmarkChange) {
+              this.args.onBookmarkChange();
+            }
             
             // Close sidebar after delete
             if (this.args.onClose) {
@@ -70,6 +75,11 @@ export default class PlacesSidebar extends Component {
         const savedPlace = await this.storage.places.store(placeData);
         console.log('Place saved:', placeData.title);
         
+        // Notify parent to refresh map bookmarks
+        if (this.args.onBookmarkChange) {
+           this.args.onBookmarkChange();
+        }
+
         // Update selection to the new saved place object
         if (this.args.onSelect) {
           this.args.onSelect(savedPlace);

app/templates/application.gjs

@@ -12,6 +12,7 @@ export default class ApplicationComponent extends Component {
   @tracked nearbyPlaces = null;
   @tracked selectedPlace = null;
   @tracked isSidebarOpen = false;
+  @tracked bookmarksVersion = 0;
 
   constructor() {
     super(...arguments);
@@ -39,6 +40,11 @@ export default class ApplicationComponent extends Component {
     this.selectedPlace = null;
   }
 
+  @action
+  refreshBookmarks() {
+    this.bookmarksVersion++;
+  }
+
   <template>
     {{pageTitle "M/\RCO"}}
 
@@ -46,6 +52,7 @@ export default class ApplicationComponent extends Component {
       @onPlacesFound={{this.showPlaces}} 
       @isSidebarOpen={{this.isSidebarOpen}}
       @onOutsideClick={{this.closeSidebar}}
+      @bookmarksVersion={{this.bookmarksVersion}}
     />
 
     {{#if this.isSidebarOpen}}
@@ -54,6 +61,7 @@ export default class ApplicationComponent extends Component {
         @selectedPlace={{this.selectedPlace}}
         @onSelect={{this.selectPlace}}
         @onClose={{this.closeSidebar}} 
+        @onBookmarkChange={{this.refreshBookmarks}}
       />
     {{/if}}