Extract icon imports to separate util

So icons can be used from anywhere, e.g. map component JS

app/components/icon.gjs

@@ -1,65 +1,10 @@
 import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
-
-import arrowLeft from 'feather-icons/dist/icons/arrow-left.svg?raw';
-import activity from 'feather-icons/dist/icons/activity.svg?raw';
-import bookmark from 'feather-icons/dist/icons/bookmark.svg?raw';
-import clock from 'feather-icons/dist/icons/clock.svg?raw';
-import edit from 'feather-icons/dist/icons/edit.svg?raw';
-import facebook from 'feather-icons/dist/icons/facebook.svg?raw';
-import globe from 'feather-icons/dist/icons/globe.svg?raw';
-import home from 'feather-icons/dist/icons/home.svg?raw';
-import instagram from 'feather-icons/dist/icons/instagram.svg?raw';
-import logIn from 'feather-icons/dist/icons/log-in.svg?raw';
-import logOut from 'feather-icons/dist/icons/log-out.svg?raw';
-import mail from 'feather-icons/dist/icons/mail.svg?raw';
-import map from 'feather-icons/dist/icons/map.svg?raw';
-import mapPin from 'feather-icons/dist/icons/map-pin.svg?raw';
-import menu from 'feather-icons/dist/icons/menu.svg?raw';
-import navigation from 'feather-icons/dist/icons/navigation.svg?raw';
-import phone from 'feather-icons/dist/icons/phone.svg?raw';
-import plus from 'feather-icons/dist/icons/plus.svg?raw';
-import server from 'feather-icons/dist/icons/server.svg?raw';
-import search from 'feather-icons/dist/icons/search.svg?raw';
-import settings from 'feather-icons/dist/icons/settings.svg?raw';
-import target from 'feather-icons/dist/icons/target.svg?raw';
-import user from 'feather-icons/dist/icons/user.svg?raw';
-import x from 'feather-icons/dist/icons/x.svg?raw';
-import zap from 'feather-icons/dist/icons/zap.svg?raw';
-import wikipedia from '../icons/wikipedia.svg?raw';
-
-const ICONS = {
-  'arrow-left': arrowLeft,
-  activity,
-  bookmark,
-  clock,
-  edit,
-  facebook,
-  globe,
-  home,
-  instagram,
-  'log-in': logIn,
-  'log-out': logOut,
-  mail,
-  map,
-  'map-pin': mapPin,
-  menu,
-  navigation,
-  phone,
-  plus,
-  server,
-  search,
-  settings,
-  target,
-  user,
-  wikipedia,
-  x,
-  zap,
-};
+import { getIcon } from '../utils/icons';
 
 export default class IconComponent extends Component {
   get svg() {
-    return ICONS[this.args.name];
+    return getIcon(this.args.name);
   }
 
   get size() {

app/components/map.gjs

@@ -60,9 +60,30 @@ export default class MapComponent extends Component {
 
     // Create a vector source and layer for bookmarks
     this.bookmarkSource = new VectorSource();
-    const bookmarkLayer = new VectorLayer({
-      source: this.bookmarkSource,
-      style: [
+
+    const bookmarkStyleFunction = (feature) => {
+      const originalPlace = feature.get('originalPlace');
+      let color =
+        getComputedStyle(document.documentElement)
+          .getPropertyValue('--default-list-color')
+          .trim() || '#000000'; // Fallback to black if variable is missing to make error obvious
+
+      if (
+        originalPlace &&
+        originalPlace._listIds &&
+        originalPlace._listIds.length > 0
+      ) {
+        // Find the first list color
+        // We need access to storage.lists.
+        // Since this is inside setupMap, 'this' refers to the component instance.
+        const firstListId = originalPlace._listIds[0];
+        const list = this.storage.lists.find((l) => l.id === firstListId);
+        if (list && list.color) {
+          color = list.color;
+        }
+      }
+
+      return [
         new Style({
           image: new Circle({
             radius: 10,
@@ -73,14 +94,19 @@ export default class MapComponent extends Component {
         new Style({
           image: new Circle({
             radius: 9,
-            fill: new Fill({ color: '#ffcc33' }), // Gold/Yellow
+            fill: new Fill({ color: color }),
             stroke: new Stroke({
               color: '#fff',
               width: 2,
             }),
           }),
         }),
-      ],
+      ];
+    };
+
+    const bookmarkLayer = new VectorLayer({
+      source: this.bookmarkSource,
+      style: bookmarkStyleFunction,
       zIndex: 10, // Ensure it sits above the map tiles
     });
 
@@ -441,6 +467,7 @@ export default class MapComponent extends Component {
   // Track the selected place from the UI Service (Router -> Map)
   updateSelectedPin = modifier(() => {
     const selected = this.mapUi.selectedPlace;
+    const options = this.mapUi.selectionOptions || {};
 
     if (!this.selectedPinOverlay || !this.selectedPinElement) return;
 
@@ -471,7 +498,12 @@ export default class MapComponent extends Component {
         }
       }
 
-      if (selected.bbox) {
+      if (options.preventZoom) {
+        // If we are preventing zoom (e.g. user clicked a bookmark), we still need to center
+        // but without changing the zoom level.
+        // We use animateToSmartCenter without a second argument (zoom=null).
+        this.animateToSmartCenter(coords);
+      } else if (selected.bbox) {
         this.zoomToBbox(selected.bbox);
       } else {
         this.handlePinVisibility(coords);
@@ -530,13 +562,22 @@ export default class MapComponent extends Component {
       padding: padding,
       duration: 1000,
       easing: (t) => t * (2 - t),
-      maxZoom: currentZoom,
+      maxZoom: Math.max(currentZoom, 18),
     });
   }
 
   handlePinVisibility(coords) {
     if (!this.mapInstance) return;
 
+    const view = this.mapInstance.getView();
+    const currentZoom = view.getZoom();
+
+    // If too far out (e.g. world view), zoom in to neighborhood level (16)
+    if (currentZoom < 16) {
+      this.animateToSmartCenter(coords, 16);
+      return;
+    }
+
     const pixel = this.mapInstance.getPixelFromCoordinate(coords);
     const size = this.mapInstance.getSize();
 
@@ -555,12 +596,17 @@ export default class MapComponent extends Component {
     }
   }
 
-  animateToSmartCenter(coords) {
+  animateToSmartCenter(coords, zoom = null) {
     if (!this.mapInstance) return;
 
     const size = this.mapInstance.getSize();
     const view = this.mapInstance.getView();
-    const resolution = view.getResolution();
+    let resolution = view.getResolution();
+
+    if (zoom !== null) {
+      resolution = view.getResolutionForZoom(zoom);
+    }
+
     let targetCenter = coords;
 
     // Check if mobile (width <= 768px matches CSS)
@@ -582,11 +628,17 @@ export default class MapComponent extends Component {
       targetCenter = [coords[0], coords[1] - offsetMapUnits];
     }
 
-    view.animate({
+    const animationOptions = {
       center: targetCenter,
       duration: 1000,
       easing: (t) => t * (2 - t), // Ease-out
-    });
+    };
+
+    if (zoom !== null) {
+      animationOptions.zoom = zoom;
+    }
+
+    view.animate(animationOptions);
   }
 
   panIfObscured(coords) {
@@ -850,6 +902,7 @@ export default class MapComponent extends Component {
           'Clicked bookmark while sidebar open (switching):',
           clickedBookmark
         );
+        this.mapUi.preventNextZoom = true;
         this.router.transitionTo('place', clickedBookmark);
         return;
       }
@@ -864,6 +917,7 @@ export default class MapComponent extends Component {
     // Normal behavior (sidebar is closed)
     if (clickedBookmark) {
       console.debug('Clicked bookmark:', clickedBookmark);
+      this.mapUi.preventNextZoom = true;
       this.router.transitionTo('place', clickedBookmark);
       return;
     }

app/components/place-details.gjs

@@ -1,23 +1,39 @@
 import Component from '@glimmer/component';
-import { fn } from '@ember/helper';
+import { service } from '@ember/service';
 import { on } from '@ember/modifier';
 import { htmlSafe } from '@ember/template';
 import { humanizeOsmTag } from '../utils/format-text';
 import { getLocalizedName, getPlaceType } from '../utils/osm';
+import { mapToStorageSchema } from '../utils/place-mapping';
 import { getSocialInfo } from '../utils/social-links';
 import Icon from '../components/icon';
 import PlaceEditForm from './place-edit-form';
+import PlaceListsManager from './place-lists-manager';
 
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 export default class PlaceDetails extends Component {
+  @service storage;
   @tracked isEditing = false;
+  @tracked showLists = false;
+
+  get isSaved() {
+    return this.storage.isPlaceSaved(this.place.id || this.place.osmId);
+  }
 
   get place() {
     return this.args.place || {};
   }
 
+  get saveablePlace() {
+    if (this.place.createdAt) {
+      return this.place;
+    }
+
+    return mapToStorageSchema(this.place);
+  }
+
   get tags() {
     return this.place.osmTags || {};
   }
@@ -28,7 +44,7 @@ export default class PlaceDetails extends Component {
 
   @action
   startEditing() {
-    if (!this.place.createdAt) return; // Only allow editing saved places
+    if (!this.isSaved) return; // Only allow editing saved places
     this.isEditing = true;
   }
 
@@ -37,6 +53,21 @@ export default class PlaceDetails extends Component {
     this.isEditing = false;
   }
 
+  @action
+  toggleLists(event) {
+    // Prevent this click from propagating to the document listener
+    // which handles the "click outside" logic.
+    if (event) {
+      event.stopPropagation();
+    }
+    this.showLists = !this.showLists;
+  }
+
+  @action
+  closeLists() {
+    this.showLists = false;
+  }
+
   @action
   async saveChanges(changes) {
     if (this.args.onSave) {
@@ -247,23 +278,29 @@ export default class PlaceDetails extends Component {
       {{/if}}
 
       <div class="actions">
-        <button
-          type="button"
-          class={{if
-            this.place.createdAt
-            "btn btn-secondary"
-            "btn btn-outline"
-          }}
-          {{on "click" (fn @onToggleSave this.place)}}
-        >
-          <Icon
-            @name="bookmark"
-            @color={{if this.place.createdAt "currentColor" "#007bff"}}
-          />
-          {{if this.place.createdAt "Saved" "Save"}}
-        </button>
+        <div class="save-button-wrapper">
+          <button
+            type="button"
+            class={{if this.isSaved "btn btn-secondary" "btn btn-outline"}}
+            {{on "click" this.toggleLists}}
+          >
+            <Icon
+              @name="bookmark"
+              @color={{if this.isSaved "currentColor" "#007bff"}}
+            />
+            {{if this.isSaved "Saved" "Save"}}
+          </button>
 
-        {{#if this.place.createdAt}}
+          {{#if this.showLists}}
+            <PlaceListsManager
+              @place={{this.saveablePlace}}
+              @onClose={{this.closeLists}}
+              @isSaved={{this.isSaved}}
+            />
+          {{/if}}
+        </div>
+
+        {{#if this.isSaved}}
           <button
             type="button"
             class="btn btn-outline"

app/components/place-lists-manager.gjs

@@ -0,0 +1,135 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { htmlSafe } from '@ember/template';
+import onClickOutside from '../modifiers/on-click-outside';
+
+export default class PlaceListsManager extends Component {
+  @service storage;
+  @service router;
+  @tracked _forceClear = false;
+
+  get isSaved() {
+    return this.args.isSaved;
+  }
+
+  get placeListIds() {
+    if (this._forceClear) return [];
+    return this.args.place._listIds || [];
+  }
+
+  styleFor(color) {
+    return htmlSafe(`background-color: ${color}`);
+  }
+
+  @action
+  isInList(list) {
+    if (!this.placeListIds) return false;
+    return this.placeListIds.includes(list.id);
+  }
+
+  @action
+  async toggleSaved() {
+    if (this.isSaved) {
+      const { osmId, osmType } = this.args.place;
+
+      await this.storage.removePlace(this.args.place);
+
+      // Clean up the local object reference immediately to prevent UI flicker
+      // or stale state if the transition is delayed/cancelled.
+      if (this.args.place) {
+        this.args.place.id = null;
+        this.args.place.createdAt = null;
+        this.args.place._listIds = [];
+        this._forceClear = true;
+      }
+
+      // Transition immediately to the canonical state
+      if (osmId && osmType) {
+        // Create a transient copy that looks like a fresh OSM result
+        const rawPlace = { ...this.args.place };
+        delete rawPlace.id;
+        delete rawPlace.createdAt;
+        delete rawPlace._listIds;
+
+        // Transition to the place route using the raw object
+        // This updates the URL to 'osm:...' and renders immediately
+        this.router.transitionTo('place', rawPlace);
+      } else {
+        // Custom place deleted -> go home
+        this.router.transitionTo('index');
+      }
+
+      if (this.args.onClose) this.args.onClose();
+    } else {
+      await this.storage.storePlace(this.args.place);
+    }
+  }
+
+  @action
+  async toggleList(list) {
+    const isMember = this.placeListIds.includes(list.id);
+    const shouldAdd = !isMember;
+
+    if (shouldAdd && !this.isSaved) {
+      // Auto-save if adding to list
+      await this.storage.storePlace(this.args.place);
+    }
+
+    try {
+      // Toggle membership
+      // We must pass the SAVED place (with ID) to the toggle function
+      // If we just saved it above, the args.place might still be the old object reference unless storage updates it in-place?
+      // StorageService.storePlace returns the new object.
+      // But togglePlaceList handles saving internally if ID is missing.
+
+      // Let's rely on storage.togglePlaceList to handle the "save if needed" part.
+      await this.storage.togglePlaceList(this.args.place, list.id, shouldAdd);
+    } catch (e) {
+      console.error(e);
+      alert('Failed to update list: ' + e.message);
+    }
+  }
+
+  <template>
+    <div class="place-lists-manager" {{onClickOutside @onClose}}>
+      <div class="list-item master-toggle">
+        <label>
+          <input
+            type="checkbox"
+            checked={{this.isSaved}}
+            {{on "change" this.toggleSaved}}
+          />
+          <span class="list-color"></span>
+          <span class="list-name">Saved places</span>
+        </label>
+      </div>
+
+      <div class="divider"></div>
+
+      <div class="lists-container">
+        {{#each this.storage.lists as |list|}}
+          <div class="list-item">
+            <label>
+              <input
+                type="checkbox"
+                checked={{this.isInList list}}
+                {{on "change" (fn this.toggleList list)}}
+                disabled={{unless this.isSaved true}}
+              />
+              {{! template-lint-disable no-inline-styles }}
+              <span
+                class="list-color"
+                style={{this.styleFor list.color}}
+              ></span>
+              <span class="list-name">{{list.title}}</span>
+            </label>
+          </div>
+        {{/each}}
+      </div>
+    </div>
+  </template>
+}

app/components/places-sidebar.gjs

@@ -51,40 +51,39 @@ export default class PlacesSidebar extends Component {
     if (!place) return;
 
     if (place.createdAt) {
-      if (confirm(`Delete "${place.title}"?`)) {
-        try {
-          await this.storage.removePlace(place);
-          console.debug('Place deleted:', place.title);
+      // Direct delete without confirmation
+      try {
+        await this.storage.removePlace(place);
+        console.debug('Place deleted:', place.title);
 
-          // Notify parent to refresh map bookmarks
-          if (this.args.onBookmarkChange) {
-            this.args.onBookmarkChange();
-          }
-
-          if (this.args.onUpdate) {
-            // Reconstruct the "original" place without ID/Geohash/CreatedAt
-            const freshPlace = {
-              ...place,
-              id: undefined,
-              geohash: undefined,
-              createdAt: undefined,
-            };
-            this.args.onUpdate(freshPlace);
-          }
-
-          // Also fire onSelect if it exists (for list view)
-          if (this.args.onSelect) {
-            this.args.onSelect(null);
-          }
-
-          // Close sidebar after delete
-          if (this.args.onClose) {
-            this.args.onClose();
-          }
-        } catch (e) {
-          console.error('Failed to delete:', e);
-          alert('Failed to delete: ' + e.message);
+        // Notify parent to refresh map bookmarks
+        if (this.args.onBookmarkChange) {
+          this.args.onBookmarkChange();
         }
+
+        if (this.args.onUpdate) {
+          // Reconstruct the "original" place without ID/Geohash/CreatedAt
+          const freshPlace = {
+            ...place,
+            id: undefined,
+            geohash: undefined,
+            createdAt: undefined,
+          };
+          this.args.onUpdate(freshPlace);
+        }
+
+        // Also fire onSelect if it exists (for list view)
+        if (this.args.onSelect) {
+          this.args.onSelect(null);
+        }
+
+        // Close sidebar after delete
+        if (this.args.onClose) {
+          this.args.onClose();
+        }
+      } catch (e) {
+        console.error('Failed to delete:', e);
+        alert('Failed to delete: ' + e.message);
       }
     } else {
       // It's a fresh POI -> Save it

app/modifiers/on-click-outside.js

@@ -0,0 +1,21 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier((element, [callback]) => {
+  const handler = (event) => {
+    // Check if the click target is contained within the element
+    if (element && !element.contains(event.target)) {
+      callback(event);
+    }
+  };
+
+  // Delay attaching the listener to avoid catching the opening click
+  // (using a microtask or setTimeout 0)
+  const timer = setTimeout(() => {
+    document.addEventListener('click', handler);
+  }, 0);
+
+  return () => {
+    clearTimeout(timer);
+    document.removeEventListener('click', handler);
+  };
+});

app/routes/place.js

@@ -72,7 +72,9 @@ export default class PlaceRoute extends Route {
 
     // Notify the Map UI to show the pin
     if (model) {
-      this.mapUi.selectPlace(model);
+      const options = { preventZoom: this.mapUi.preventNextZoom };
+      this.mapUi.selectPlace(model, options);
+      this.mapUi.preventNextZoom = false;
     }
     // Stop the pulse animation if it was running (e.g. redirected from search)
     this.mapUi.stopSearch();

app/services/map-ui.js

@@ -9,18 +9,24 @@ export default class MapUiService extends Service {
   @tracked returnToSearch = false;
   @tracked currentCenter = null;
   @tracked searchBoxHasFocus = false;
+  @tracked selectionOptions = {};
+  @tracked preventNextZoom = false;
 
-  selectPlace(place) {
+  selectPlace(place, options = {}) {
     this.selectedPlace = place;
+    this.selectionOptions = options;
   }
 
   clearSelection() {
     this.selectedPlace = null;
+    this.selectionOptions = {};
+    this.preventNextZoom = false;
   }
 
   startSearch() {
     this.isSearching = true;
     this.isCreating = false;
+    this.preventNextZoom = false;
   }
 
   stopSearch() {

app/services/storage.js

@@ -15,6 +15,7 @@ export default class StorageService extends Service {
   @tracked savedPlaces = [];
   @tracked loadedPrefixes = [];
   @tracked currentBbox = null;
+  @tracked lists = [];
   @tracked version = 0; // Shared version tracker for bookmarks
   @tracked initialSyncDone = false;
   @tracked connected = false;
@@ -46,6 +47,11 @@ export default class StorageService extends Service {
     this.rs.on('connected', () => {
       this.connected = true;
       this.userAddress = this.rs.remote.userAddress;
+      this.loadLists();
+    });
+
+    this.rs.on('not-connected', () => {
+      this.loadLists();
     });
 
     this.rs.on('disconnected', () => {
@@ -54,6 +60,7 @@ export default class StorageService extends Service {
       this.placesInView = [];
       this.savedPlaces = [];
       this.loadedPrefixes = [];
+      this.lists = [];
       this.initialSyncDone = false;
     });
 
@@ -61,13 +68,18 @@ export default class StorageService extends Service {
       // console.debug('[rs] sync done:', result);
       if (!this.initialSyncDone) {
         this.initialSyncDone = true;
+        this.loadLists();
       }
     });
 
     this.rs.scope('/places/').on('change', (event) => {
       // console.debug(event);
-      this.handlePlaceChange(event);
-      debounceTask(this, 'reloadCurrentView', 200);
+      if (event.relativePath.startsWith('_lists/')) {
+        this.loadLists();
+      } else {
+        this.handlePlaceChange(event);
+        debounceTask(this, 'reloadCurrentView', 200);
+      }
     });
   }
 
@@ -120,6 +132,98 @@ export default class StorageService extends Service {
     this.loadAllPlaces(required);
   }
 
+  async loadLists() {
+    try {
+      if (!this.places.lists) return; // Wait for module init
+
+      // Ensure defaults exist first
+      await this.places.lists.initDefaults();
+
+      const lists = await this.places.lists.getAll();
+      this.lists = lists || [];
+
+      // Decorate with hardcoded icons for default lists (in-memory only)
+      this.lists.forEach((list) => {
+        if (list.id === 'to-go') {
+          list.icon = 'bookmark';
+        } else if (list.id === 'to-do') {
+          list.icon = 'check-square';
+        }
+      });
+
+      this.refreshPlaceListAssociations();
+    } catch (e) {
+      console.error('Failed to load lists:', e);
+    }
+  }
+
+  refreshPlaceListAssociations() {
+    // 1. Build an index of PlaceID -> ListID[]
+    const placeToListMap = new Map();
+
+    this.lists.forEach((list) => {
+      if (list.placeRefs && Array.isArray(list.placeRefs)) {
+        list.placeRefs.forEach((ref) => {
+          if (!ref.id) return;
+          if (!placeToListMap.has(ref.id)) {
+            placeToListMap.set(ref.id, []);
+          }
+          placeToListMap.get(ref.id).push(list.id);
+        });
+      }
+    });
+
+    // 2. Helper to attach lists to a place object
+    const attachLists = (place) => {
+      const listIds = placeToListMap.get(place.id) || [];
+      // Assign directly to object property (non-tracked mutation is fine as we trigger updates below)
+      place._listIds = listIds;
+      return place;
+    };
+
+    // 3. Update savedPlaces
+    this.savedPlaces = this.savedPlaces.map((p) => attachLists({ ...p }));
+
+    // 4. Update placesInView
+    this.placesInView = this.placesInView.map((p) => attachLists({ ...p }));
+  }
+
+  async togglePlaceList(place, listId, shouldBeInList) {
+    if (!place) return;
+
+    // Ensure place is saved first if it's new
+    let savedPlace = place;
+    if (!place.id || !place.geohash) {
+      if (shouldBeInList) {
+        // If adding to a list, we must save the place first
+        savedPlace = await this.storePlace(place);
+      } else {
+        return; // Can't remove an unsaved place from a list
+      }
+    }
+
+    try {
+      if (shouldBeInList) {
+        await this.places.lists.addPlace(
+          listId,
+          savedPlace.id,
+          savedPlace.geohash
+        );
+      } else {
+        await this.places.lists.removePlace(listId, savedPlace.id);
+      }
+
+      // Reload lists to reflect changes
+      await this.loadLists();
+
+      // Return the updated place
+      return this.findPlaceById(savedPlace.id);
+    } catch (e) {
+      console.error('Failed to toggle place in list:', e);
+      throw e;
+    }
+  }
+
   async loadPlacesInBounds(bbox) {
     // 1. Calculate required prefixes
     const requiredPrefixes = getGeohashPrefixesInBbox(bbox);
@@ -173,6 +277,8 @@ export default class StorageService extends Service {
           // Full reload
           this.placesInView = places;
         }
+        // Refresh list associations
+        this.refreshPlaceListAssociations();
       } else {
         if (!prefixes) this.placesInView = [];
       }
@@ -190,11 +296,22 @@ export default class StorageService extends Service {
     let place = this.savedPlaces.find((p) => p.id && String(p.id) === strId);
     if (place) return place;
 
+    // Check placesInView as fallback
+    place = this.placesInView.find((p) => p.id && String(p.id) === strId);
+    if (place) return place;
+
     // Then search by OSM ID
     place = this.savedPlaces.find((p) => p.osmId && String(p.osmId) === strId);
+    if (place) return place;
+
+    place = this.placesInView.find((p) => p.osmId && String(p.osmId) === strId);
     return place;
   }
 
+  isPlaceSaved(id) {
+    return !!this.findPlaceById(id);
+  }
+
   async storePlace(placeData) {
     const savedPlace = await this.places.store(placeData);
 

app/styles/app.css

@@ -1,5 +1,9 @@
 /* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
 
+:root {
+  --default-list-color: #fc3;
+}
+
 html,
 body {
   height: 100%;
@@ -203,6 +207,7 @@ body {
   box-shadow: 2px 0 5px rgb(0 0 0 / 10%);
   display: flex;
   flex-direction: column;
+  overflow: hidden; /* Ensure flex children are contained */
 }
 
 .settings-pane.sidebar {
@@ -240,7 +245,10 @@ body {
   padding: 1rem;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
-  flex: 1; /* Take up remaining vertical space */
+  flex: 1;
+  min-height: 0;
+  touch-action: pan-y;
+  overscroll-behavior: contain;
 }
 
 .edit-form {
@@ -977,3 +985,64 @@ button.create-place {
   text-overflow: ellipsis;
   margin-top: 2px;
 }
+
+/* Place Lists Manager */
+.save-button-wrapper {
+  position: relative;
+}
+
+.place-lists-manager {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 0.5rem;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  width: 220px;
+  z-index: 10;
+  padding: 0.5rem 0;
+}
+
+.place-lists-manager .list-item {
+  padding: 0.5rem 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.place-lists-manager .list-item:hover {
+  background: #f8f9fa;
+}
+
+.place-lists-manager label {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  cursor: pointer;
+  margin: 0;
+  font-size: 0.95rem;
+  color: #333;
+}
+
+.place-lists-manager input[type='checkbox'] {
+  accent-color: #007bff;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.place-lists-manager .list-color {
+  width: 12px;
+  height: 12px;
+  background-color: var(--default-list-color);
+  border-radius: 50%;
+  flex-shrink: 0;
+  border: 1px solid rgb(0 0 0 / 10%);
+}
+
+.place-lists-manager .divider {
+  height: 1px;
+  background: #eee;
+  margin: 0.5rem 0;
+}

app/utils/icons.js

@@ -0,0 +1,61 @@
+import arrowLeft from 'feather-icons/dist/icons/arrow-left.svg?raw';
+import activity from 'feather-icons/dist/icons/activity.svg?raw';
+import bookmark from 'feather-icons/dist/icons/bookmark.svg?raw';
+import checkSquare from 'feather-icons/dist/icons/check-square.svg?raw';
+import clock from 'feather-icons/dist/icons/clock.svg?raw';
+import edit from 'feather-icons/dist/icons/edit.svg?raw';
+import facebook from 'feather-icons/dist/icons/facebook.svg?raw';
+import globe from 'feather-icons/dist/icons/globe.svg?raw';
+import home from 'feather-icons/dist/icons/home.svg?raw';
+import instagram from 'feather-icons/dist/icons/instagram.svg?raw';
+import logIn from 'feather-icons/dist/icons/log-in.svg?raw';
+import logOut from 'feather-icons/dist/icons/log-out.svg?raw';
+import mail from 'feather-icons/dist/icons/mail.svg?raw';
+import map from 'feather-icons/dist/icons/map.svg?raw';
+import mapPin from 'feather-icons/dist/icons/map-pin.svg?raw';
+import menu from 'feather-icons/dist/icons/menu.svg?raw';
+import navigation from 'feather-icons/dist/icons/navigation.svg?raw';
+import phone from 'feather-icons/dist/icons/phone.svg?raw';
+import plus from 'feather-icons/dist/icons/plus.svg?raw';
+import server from 'feather-icons/dist/icons/server.svg?raw';
+import search from 'feather-icons/dist/icons/search.svg?raw';
+import settings from 'feather-icons/dist/icons/settings.svg?raw';
+import target from 'feather-icons/dist/icons/target.svg?raw';
+import user from 'feather-icons/dist/icons/user.svg?raw';
+import x from 'feather-icons/dist/icons/x.svg?raw';
+import zap from 'feather-icons/dist/icons/zap.svg?raw';
+import wikipedia from '../icons/wikipedia.svg?raw';
+
+const ICONS = {
+  'arrow-left': arrowLeft,
+  activity,
+  bookmark,
+  'check-square': checkSquare,
+  clock,
+  edit,
+  facebook,
+  globe,
+  home,
+  instagram,
+  'log-in': logIn,
+  'log-out': logOut,
+  mail,
+  map,
+  'map-pin': mapPin,
+  menu,
+  navigation,
+  phone,
+  plus,
+  server,
+  search,
+  settings,
+  target,
+  user,
+  wikipedia,
+  x,
+  zap,
+};
+
+export function getIcon(name) {
+  return ICONS[name];
+}

app/utils/place-mapping.js

@@ -0,0 +1,15 @@
+import { getLocalizedName } from './osm';
+
+export function mapToStorageSchema(place) {
+  return {
+    title: place.title || getLocalizedName(place.osmTags, 'Untitled Place'),
+    lat: place.lat,
+    lon: place.lon,
+    tags: [],
+    url: place.osmTags?.website,
+    osmId: String(place.osmId || place.id),
+    osmType: place.osmType,
+    osmTags: place.osmTags || {},
+    description: place.description,
+  };
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "marco",
-  "version": "1.13.1",
+  "version": "1.13.3",
   "private": true,
   "description": "Unhosted maps app",
   "repository": {

release/index.html

@@ -39,8 +39,8 @@
     <meta name="msapplication-TileColor" content="#F6E9A6">
     <meta name="msapplication-TileImage" content="/icons/icon-144.png">
 
-  <script type="module" crossorigin src="/assets/main-CixkPz0h.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/main-CU2Ii0VD.css">
+  <script type="module" crossorigin src="/assets/main-gjk9d6Ld.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/main-DAo4Q0R2.css">
 </head>
   <body>
  </body>

tests/acceptance/navigation-test.js

@@ -42,6 +42,9 @@ class MockStorageService extends Service {
   findPlaceById() {
     return null;
   }
+  isPlaceSaved() {
+    return false;
+  }
   loadPlacesInBounds() {
     return [];
   }

tests/acceptance/search-test.js

@@ -41,6 +41,9 @@ module('Acceptance | search', function (hooks) {
       findPlaceById() {
         return null;
       }
+      isPlaceSaved() {
+        return false;
+      }
       rs = {
         on: () => {},
       };
@@ -85,6 +88,9 @@ module('Acceptance | search', function (hooks) {
       findPlaceById() {
         return null;
       }
+      isPlaceSaved() {
+        return false;
+      }
       rs = {
         on: () => {},
       };
@@ -130,6 +136,9 @@ module('Acceptance | search', function (hooks) {
         if (id === '999') return this.savedPlaces[0];
         return null;
       }
+      isPlaceSaved(id) {
+        return !!this.findPlaceById(id);
+      }
       rs = {
         on: () => {},
       };

tests/integration/components/place-details-test.gjs

@@ -1,11 +1,49 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'marco/tests/helpers';
-import { render } from '@ember/test-helpers';
+import { render, click } from '@ember/test-helpers';
+import Service from '@ember/service';
 import PlaceDetails from 'marco/components/place-details';
 
 module('Integration | Component | place-details', function (hooks) {
   setupRenderingTest(hooks);
 
+  class StorageService extends Service {
+    lists = [
+      { id: 'to-go', title: 'Want to go', color: '#2e9e4f' },
+      { id: 'to-do', title: 'To do', color: '#2a7fff' },
+    ];
+
+    isPlaceSaved() {
+      return false;
+    }
+
+    findPlaceById() {
+      return null;
+    }
+
+    async storePlace(place) {
+      return { ...place, id: '123', createdAt: new Date().toISOString() };
+    }
+
+    async removePlace() {
+      return true;
+    }
+
+    async togglePlaceList() {
+      return true;
+    }
+  }
+
+  hooks.beforeEach(function () {
+    this.owner.register('service:storage', StorageService);
+
+    // Mock Router for all tests
+    class MockRouter extends Service {
+      transitionTo() {}
+    }
+    this.owner.register('service:router', MockRouter);
+  });
+
   test('it formats coordinates correctly', async function (assert) {
     const place = {
       title: 'Test Place',
@@ -34,4 +72,187 @@ module('Integration | Component | place-details', function (hooks) {
     assert.dom('.place-details h3').hasText('Place without Coords');
     assert.dom('.meta-info a[href*="geo:"]').doesNotExist();
   });
+
+  test('it reveals the list manager when save is clicked', async function (assert) {
+    const place = {
+      title: 'Cool Cafe',
+      lat: 10,
+      lon: 10,
+    };
+
+    await render(<template><PlaceDetails @place={{place}} /></template>);
+
+    // Manager is initially hidden
+    assert.dom('.place-lists-manager').doesNotExist();
+
+    // Find the Save button
+    // It's the first button in .actions
+    const saveBtn = this.element.querySelector('.actions button');
+    await click(saveBtn);
+
+    // Manager should be visible now
+    assert.dom('.place-lists-manager').exists();
+
+    // Check for default lists from mock service
+    assert.dom('.place-lists-manager').includesText('Want to go');
+    assert.dom('.place-lists-manager').includesText('To do');
+    assert.dom('.place-lists-manager').includesText('Saved');
+  });
+
+  test('it handles saving a new place via master toggle', async function (assert) {
+    let storedPlace = null;
+
+    // Override mock service specifically for this test to spy on storePlace
+    class MockStorage extends Service {
+      lists = [];
+      async storePlace(place) {
+        storedPlace = place;
+        return { ...place, id: 'new-id', createdAt: new Date().toISOString() };
+      }
+      isPlaceSaved() {
+        return false;
+      }
+      findPlaceById() {
+        return null;
+      }
+    }
+    this.owner.register('service:storage', MockStorage);
+
+    const place = {
+      title: 'New Spot',
+      lat: 20,
+      lon: 20,
+    };
+
+    await render(<template><PlaceDetails @place={{place}} /></template>);
+
+    // Open manager
+    await click('.actions button');
+
+    // Find master "Saved" toggle
+    const masterToggle = this.element.querySelector(
+      '.place-lists-manager .master-toggle input'
+    );
+
+    // It should be unchecked initially for a new place
+    assert.dom(masterToggle).isNotChecked();
+
+    // Click it to save
+    await click(masterToggle);
+
+    // Verify storePlace was called
+    assert.ok(storedPlace, 'storePlace was called');
+    assert.strictEqual(storedPlace.title, 'New Spot');
+  });
+
+  test('it handles removing a saved place via master toggle', async function (assert) {
+    let removedPlaceId = null;
+
+    class MockStorage extends Service {
+      lists = [];
+      async removePlace(place) {
+        removedPlaceId = place.id;
+      }
+      isPlaceSaved() {
+        return true;
+      }
+    }
+    this.owner.register('service:storage', MockStorage);
+
+    const place = {
+      id: 'saved-id',
+      title: 'Saved Spot',
+      lat: 30,
+      lon: 30,
+      createdAt: '2023-01-01', // Marks it as saved
+    };
+
+    await render(<template><PlaceDetails @place={{place}} /></template>);
+
+    // Open manager
+    await click('.actions button');
+
+    // Find master "Saved" toggle
+    const masterToggle = this.element.querySelector(
+      '.place-lists-manager .master-toggle input'
+    );
+
+    // It should be checked initially for a saved place
+    assert.dom(masterToggle).isChecked();
+
+    // Click it to remove
+    await click(masterToggle);
+
+    assert.strictEqual(removedPlaceId, 'saved-id', 'removePlace was called');
+
+    assert.deepEqual(place._listIds, [], '_listIds was cleared on the object');
+  });
+
+  test('it adds place to a list', async function (assert) {
+    let listId = null;
+    let placeArg = null;
+    let shouldAdd = null;
+
+    class MockStorage extends Service {
+      lists = [{ id: 'favs', title: 'Favorites', color: 'red' }];
+      async togglePlaceList(place, id, add) {
+        placeArg = place;
+        listId = id;
+        shouldAdd = add;
+      }
+      isPlaceSaved() {
+        return true;
+      }
+    }
+    this.owner.register('service:storage', MockStorage);
+
+    // Provide a place that is already saved
+    const place = {
+      id: 'p1',
+      title: 'My Spot',
+      createdAt: '2023-01-01',
+      _listIds: [], // Not in any list yet
+    };
+
+    await render(<template><PlaceDetails @place={{place}} /></template>);
+
+    // Open manager
+    await click('.actions button');
+
+    // Find the checkbox for "Favorites"
+    const checkbox = this.element.querySelectorAll(
+      '.place-lists-manager input[type="checkbox"]'
+    )[1]; // Index 1 because 0 is master toggle
+
+    await click(checkbox);
+
+    assert.strictEqual(listId, 'favs');
+    assert.strictEqual(placeArg.id, 'p1');
+    assert.true(shouldAdd);
+  });
+
+  test('it respects storage service state over stale place object', async function (assert) {
+    class MockStorage extends Service {
+      lists = [];
+      isPlaceSaved() {
+        return false;
+      }
+      findPlaceById() {
+        return null;
+      }
+    }
+    this.owner.register('service:storage', MockStorage);
+
+    const place = {
+      id: 'stale-id',
+      title: 'Stale Place',
+      createdAt: '2023-01-01', // Looks saved
+    };
+
+    await render(<template><PlaceDetails @place={{place}} /></template>);
+
+    // Button should say "Save", not "Saved" because isPlaceSaved returns false
+    assert.dom('.actions button').hasText('Save');
+    assert.dom('.actions button').doesNotHaveClass('btn-secondary');
+  });
 });

tests/unit/utils/place-mapping-test.js

@@ -0,0 +1,58 @@
+import { mapToStorageSchema } from 'marco/utils/place-mapping';
+import { module, test } from 'qunit';
+
+module('Unit | Utility | place-mapping', function () {
+  test('it maps a raw place object to the storage schema', function (assert) {
+    const rawPlace = {
+      osmId: 12345,
+      osmType: 'node',
+      lat: 52.52,
+      lon: 13.405,
+      osmTags: {
+        name: 'Test Place',
+        website: 'https://example.com',
+      },
+      description: 'A test description',
+    };
+
+    const result = mapToStorageSchema(rawPlace);
+
+    assert.strictEqual(result.title, 'Test Place');
+    assert.strictEqual(result.lat, 52.52);
+    assert.strictEqual(result.lon, 13.405);
+    assert.strictEqual(result.osmId, '12345');
+    assert.strictEqual(result.osmType, 'node');
+    assert.strictEqual(result.url, 'https://example.com');
+    assert.strictEqual(result.description, 'A test description');
+    assert.deepEqual(result.osmTags, rawPlace.osmTags);
+    assert.deepEqual(result.tags, []);
+  });
+
+  test('it prioritizes place.title over osmTags.name', function (assert) {
+    const rawPlace = {
+      osmId: 123,
+      lat: 0,
+      lon: 0,
+      title: 'Custom Title',
+      osmTags: {
+        name: 'OSM Name',
+      },
+    };
+
+    const result = mapToStorageSchema(rawPlace);
+    assert.strictEqual(result.title, 'Custom Title');
+  });
+
+  test('it handles fallback title correctly when no name is present', function (assert) {
+    const rawPlace = {
+      id: 987,
+      lat: 10,
+      lon: 20,
+      osmTags: {},
+    };
+
+    const result = mapToStorageSchema(rawPlace);
+    assert.strictEqual(result.title, 'Untitled Place');
+    assert.strictEqual(result.osmId, '987');
+  });
+});

vite.config.mjs

@@ -4,7 +4,7 @@ import { babel } from '@rollup/plugin-babel';
 
 export default defineConfig({
   // server: {
-  //   host: '0.0.0.0'
+  //   host: '0.0.0.0',
   // },
   plugins: [
     ember(),