From bcf8ca42551ca81dc75e33fccd25df8eb577d35f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= Date: Thu, 19 Feb 2026 16:28:07 +0400 Subject: [PATCH 01/28] Add service for Photon requests --- app/services/photon.js | 102 +++++++++++++++++++++++++++++ tests/unit/services/photon-test.js | 90 +++++++++++++++++++++++++ 2 files changed, 192 insertions(+) create mode 100644 app/services/photon.js create mode 100644 tests/unit/services/photon-test.js diff --git a/app/services/photon.js b/app/services/photon.js new file mode 100644 index 0000000..4ea76cd --- /dev/null +++ b/app/services/photon.js @@ -0,0 +1,102 @@ +import Service from '@ember/service'; + +export default class PhotonService extends Service { + baseUrl = 'https://photon.komoot.io/api/'; + + async search(query, lat, lon, limit = 10) { + if (!query || query.length < 2) return []; + + const params = new URLSearchParams({ + q: query, + limit: String(limit), + }); + + if (lat && lon) { + params.append('lat', String(lat)); + params.append('lon', String(lon)); + } + + const url = `${this.baseUrl}?${params.toString()}`; + + try { + const res = await this.fetchWithRetry(url); + if (!res.ok) { + throw new Error(`Photon request failed with status ${res.status}`); + } + const data = await res.json(); + + if (!data.features) return []; + + return data.features.map((f) => this.normalizeFeature(f)); + } catch (e) { + console.error('Photon search error:', e); + // Return empty array on error so UI doesn't break + return []; + } + } + + normalizeFeature(feature) { + const props = feature.properties || {}; + const geom = feature.geometry || {}; + const coords = geom.coordinates || []; + + // Photon returns [lon, lat] for Point geometries + const lon = coords[0]; + const lat = coords[1]; + + // Construct a description from address fields + // Priority: name -> street -> city -> state -> country + const addressParts = []; + if (props.street) + addressParts.push( + props.housenumber + ? `${props.street} ${props.housenumber}` + : props.street + ); + if (props.city && props.city !== props.name) addressParts.push(props.city); + if (props.state && props.state !== props.city) + addressParts.push(props.state); + if (props.country) addressParts.push(props.country); + + const description = addressParts.join(', '); + const title = props.name || description || 'Unknown Place'; + + return { + title, + lat, + lon, + osmId: props.osm_id, + osmType: props.osm_type, // 'N', 'W', 'R' + osmTags: props, // Keep all properties as tags for now + description: props.name ? description : addressParts.slice(1).join(', '), + source: 'photon', + }; + } + + async fetchWithRetry(url, options = {}, retries = 3) { + try { + // eslint-disable-next-line warp-drive/no-external-request-patterns + const res = await fetch(url, options); + + // Retry on 5xx errors or 429 Too Many Requests + if (!res.ok && retries > 0 && [502, 503, 504, 429].includes(res.status)) { + console.warn( + `Photon request failed with ${res.status}. Retrying... (${retries} left)` + ); + // Exponential backoff or fixed delay? Let's do 1s fixed delay for simplicity + await new Promise((r) => setTimeout(r, 1000)); + return this.fetchWithRetry(url, options, retries - 1); + } + + return res; + } catch (e) { + // Retry on network errors (fetch throws) except AbortError + if (retries > 0 && e.name !== 'AbortError') { + console.debug(`Retrying Photon request... (${retries} left)`, e); + await new Promise((r) => setTimeout(r, 1000)); + return this.fetchWithRetry(url, options, retries - 1); + } + throw e; + } + } +} diff --git a/tests/unit/services/photon-test.js b/tests/unit/services/photon-test.js new file mode 100644 index 0000000..f0e76cd --- /dev/null +++ b/tests/unit/services/photon-test.js @@ -0,0 +1,90 @@ +import { module, test } from 'qunit'; +import { setupTest } from 'marco/tests/helpers'; + +module('Unit | Service | photon', function (hooks) { + setupTest(hooks); + + test('it exists', function (assert) { + let service = this.owner.lookup('service:photon'); + assert.ok(service); + }); + + test('search handles successful response', async function (assert) { + let service = this.owner.lookup('service:photon'); + + // Mock fetch + const originalFetch = window.fetch; + window.fetch = async () => { + return { + ok: true, + json: async () => ({ + features: [ + { + properties: { + name: 'Test Place', + osm_id: 123, + osm_type: 'N', + city: 'Test City', + country: 'Test Country', + }, + geometry: { + coordinates: [13.4, 52.5], // lon, lat + }, + }, + ], + }), + }; + }; + + try { + const results = await service.search('Test', 52.5, 13.4); + assert.strictEqual(results.length, 1); + assert.strictEqual(results[0].title, 'Test Place'); + assert.strictEqual(results[0].lat, 52.5); + assert.strictEqual(results[0].lon, 13.4); + assert.strictEqual(results[0].description, 'Test City, Test Country'); + } finally { + window.fetch = originalFetch; + } + }); + + test('search handles empty response', async function (assert) { + let service = this.owner.lookup('service:photon'); + + // Mock fetch + const originalFetch = window.fetch; + window.fetch = async () => { + return { + ok: true, + json: async () => ({ features: [] }), + }; + }; + + try { + const results = await service.search('Nonexistent', 52.5, 13.4); + assert.strictEqual(results.length, 0); + } finally { + window.fetch = originalFetch; + } + }); + + test('normalizeFeature handles missing properties', function (assert) { + let service = this.owner.lookup('service:photon'); + + const feature = { + properties: { + street: 'Main St', + housenumber: '123', + city: 'Metropolis', + }, + geometry: { + coordinates: [10, 20], + }, + }; + + const result = service.normalizeFeature(feature); + assert.strictEqual(result.title, 'Main St 123, Metropolis'); // Fallback to address description + assert.strictEqual(result.lat, 20); + assert.strictEqual(result.lon, 10); + }); +}); From 2aa59f938486f93db9ccca487936c5bdbd8c847b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= Date: Fri, 20 Feb 2026 12:34:48 +0400 Subject: [PATCH 02/28] Fetch place details from OSM API, support relations * Much faster * Has more place details, which allows us to locate relations, in addition to nodes and ways --- app/components/place-details.gjs | 2 +- app/routes/place.js | 9 ++- app/services/osm.js | 111 +++++++++++++++++++++++++++ tests/acceptance/navigation-test.js | 12 ++- tests/unit/services/osm-test.js | 113 ++++++++++++++++++++++++++++ 5 files changed, 242 insertions(+), 5 deletions(-) create mode 100644 tests/unit/services/osm-test.js diff --git a/app/components/place-details.gjs b/app/components/place-details.gjs index 5e7ad89..5a868fd 100644 --- a/app/components/place-details.gjs +++ b/app/components/place-details.gjs @@ -129,7 +129,7 @@ export default class PlaceDetails extends Component { const lat = this.place.lat; const lon = this.place.lon; if (!lat || !lon) return ''; - return `${lat}, ${lon}`; + return `${Number(lat).toFixed(6)}, ${Number(lon).toFixed(6)}`; } get osmUrl() { diff --git a/app/routes/place.js b/app/routes/place.js index 451f58c..f71397a 100644 --- a/app/routes/place.js +++ b/app/routes/place.js @@ -9,7 +9,11 @@ export default class PlaceRoute extends Route { async model(params) { const id = params.place_id; - if (id.startsWith('osm:node:') || id.startsWith('osm:way:')) { + if ( + id.startsWith('osm:node:') || + id.startsWith('osm:way:') || + id.startsWith('osm:relation:') + ) { const [, type, osmId] = id.split(':'); console.debug(`Fetching explicit OSM ${type}:`, osmId); return this.loadOsmPlace(osmId, type); @@ -62,7 +66,8 @@ export default class PlaceRoute extends Route { async loadOsmPlace(id, type = null) { try { - const poi = await this.osm.getPoiById(id, type); + // Use the direct OSM API fetch instead of Overpass for single object lookups + const poi = await this.osm.fetchOsmObject(id, type); if (poi) { console.debug('Found OSM POI:', poi); return poi; diff --git a/app/services/osm.js b/app/services/osm.js index d4579c6..ed2e4ed 100644 --- a/app/services/osm.js +++ b/app/services/osm.js @@ -124,4 +124,115 @@ out center; if (!data.elements[0]) return null; return this.normalizePoi(data.elements[0]); } + + async fetchOsmObject(osmId, osmType) { + if (!osmId || !osmType) return null; + + let url; + if (osmType === 'node') { + url = `https://www.openstreetmap.org/api/0.6/node/${osmId}.json`; + } else if (osmType === 'way') { + url = `https://www.openstreetmap.org/api/0.6/way/${osmId}/full.json`; + } else if (osmType === 'relation') { + url = `https://www.openstreetmap.org/api/0.6/relation/${osmId}/full.json`; + } else { + console.error('Unknown OSM type:', osmType); + return null; + } + + try { + const res = await this.fetchWithRetry(url); + if (!res.ok) { + if (res.status === 410) { + console.warn('OSM object has been deleted'); + return null; + } + throw new Error(`OSM API request failed: ${res.status}`); + } + const data = await res.json(); + return this.normalizeOsmApiData(data.elements, osmId, osmType); + } catch (e) { + console.error('Failed to fetch OSM object:', e); + return null; + } + } + + normalizeOsmApiData(elements, targetId, targetType) { + if (!elements || elements.length === 0) return null; + + const mainElement = elements.find( + (el) => String(el.id) === String(targetId) && el.type === targetType + ); + + if (!mainElement) return null; + + let lat = mainElement.lat; + let lon = mainElement.lon; + + // If it's a way, calculate center from nodes + if (targetType === 'way' && mainElement.nodes) { + const nodeMap = new Map(); + elements.forEach((el) => { + if (el.type === 'node') { + nodeMap.set(el.id, [el.lon, el.lat]); + } + }); + + const coords = mainElement.nodes + .map((id) => nodeMap.get(id)) + .filter(Boolean); + + if (coords.length > 0) { + // Simple average center + const sumLat = coords.reduce((sum, c) => sum + c[1], 0); + const sumLon = coords.reduce((sum, c) => sum + c[0], 0); + lat = sumLat / coords.length; + lon = sumLon / coords.length; + } + } else if (targetType === 'relation' && mainElement.members) { + // Find all nodes that are part of this relation (directly or via ways) + const allNodes = []; + const nodeMap = new Map(); + elements.forEach((el) => { + if (el.type === 'node') { + nodeMap.set(el.id, el); + } + }); + + mainElement.members.forEach((member) => { + if (member.type === 'node') { + const node = nodeMap.get(member.ref); + if (node) allNodes.push(node); + } else if (member.type === 'way') { + const way = elements.find( + (el) => el.type === 'way' && el.id === member.ref + ); + if (way && way.nodes) { + way.nodes.forEach((nodeId) => { + const node = nodeMap.get(nodeId); + if (node) allNodes.push(node); + }); + } + } + }); + + if (allNodes.length > 0) { + const sumLat = allNodes.reduce((sum, n) => sum + n.lat, 0); + const sumLon = allNodes.reduce((sum, n) => sum + n.lon, 0); + lat = sumLat / allNodes.length; + lon = sumLon / allNodes.length; + } + } + + return { + title: getLocalizedName(mainElement.tags), + lat, + lon, + url: mainElement.tags?.website, + osmId: String(mainElement.id), + osmType: mainElement.type, + osmTags: mainElement.tags || {}, + description: mainElement.tags?.description, + }; + } } diff --git a/tests/acceptance/navigation-test.js b/tests/acceptance/navigation-test.js index c3769d9..00e5d1d 100644 --- a/tests/acceptance/navigation-test.js +++ b/tests/acceptance/navigation-test.js @@ -25,6 +25,16 @@ class MockOsmService extends Service { osmType: 'node', }; } + async fetchOsmObject(id, type) { + return { + osmId: id, + osmType: type, + lat: 1, + lon: 1, + osmTags: { name: 'Test Place', amenity: 'cafe' }, + title: 'Test Place', + }; + } } class MockStorageService extends Service { @@ -82,7 +92,6 @@ module('Acceptance | navigation', function (hooks) { // Click the Close (X) button await click('.close-btn'); - assert.strictEqual(currentURL(), '/', 'Returned to index'); assert.false(mapUi.returnToSearch, 'Flag is reset after closing sidebar'); @@ -95,7 +104,6 @@ module('Acceptance | navigation', function (hooks) { assert.ok(currentURL().includes('/place/'), 'Visited place directly'); await click('.back-btn'); - assert.strictEqual(currentURL(), '/', 'Returned to index/map'); assert.true(backStub.notCalled, 'window.history.back() was NOT called'); diff --git a/tests/unit/services/osm-test.js b/tests/unit/services/osm-test.js new file mode 100644 index 0000000..1c28b1e --- /dev/null +++ b/tests/unit/services/osm-test.js @@ -0,0 +1,113 @@ +import { module, test } from 'qunit'; +import { setupTest } from 'marco/tests/helpers'; + +module('Unit | Service | osm', function (hooks) { + setupTest(hooks); + + test('it exists', function (assert) { + let service = this.owner.lookup('service:osm'); + assert.ok(service); + }); + + test('normalizeOsmApiData handles nodes correctly', function (assert) { + let service = this.owner.lookup('service:osm'); + const elements = [ + { + id: 123, + type: 'node', + lat: 52.5, + lon: 13.4, + tags: { name: 'Test Node' }, + }, + ]; + + const result = service.normalizeOsmApiData(elements, 123, 'node'); + + assert.strictEqual(result.title, 'Test Node'); + assert.strictEqual(result.lat, 52.5); + assert.strictEqual(result.lon, 13.4); + assert.strictEqual(result.osmId, '123'); + assert.strictEqual(result.osmType, 'node'); + }); + + test('normalizeOsmApiData calculates centroid for ways', function (assert) { + let service = this.owner.lookup('service:osm'); + const elements = [ + { + id: 456, + type: 'way', + nodes: [1, 2], + tags: { name: 'Test Way' }, + }, + { id: 1, type: 'node', lat: 10, lon: 10 }, + { id: 2, type: 'node', lat: 20, lon: 20 }, + ]; + + const result = service.normalizeOsmApiData(elements, 456, 'way'); + + assert.strictEqual(result.title, 'Test Way'); + assert.strictEqual(result.lat, 15); // (10+20)/2 + assert.strictEqual(result.lon, 15); // (10+20)/2 + assert.strictEqual(result.osmId, '456'); + assert.strictEqual(result.osmType, 'way'); + }); + + test('normalizeOsmApiData calculates centroid for relations with member nodes', function (assert) { + let service = this.owner.lookup('service:osm'); + const elements = [ + { + id: 789, + type: 'relation', + members: [ + { type: 'node', ref: 1, role: 'admin_centre' }, + { type: 'node', ref: 2, role: 'label' }, + ], + tags: { name: 'Test Relation' }, + }, + { id: 1, type: 'node', lat: 10, lon: 10 }, + { id: 2, type: 'node', lat: 30, lon: 30 }, + ]; + + const result = service.normalizeOsmApiData(elements, 789, 'relation'); + + assert.strictEqual(result.title, 'Test Relation'); + assert.strictEqual(result.lat, 20); // (10+30)/2 + assert.strictEqual(result.lon, 20); // (10+30)/2 + assert.strictEqual(result.osmId, '789'); + assert.strictEqual(result.osmType, 'relation'); + }); + + test('normalizeOsmApiData calculates centroid for relations with member ways', function (assert) { + let service = this.owner.lookup('service:osm'); + /* + Relation 999 + -> Way 888 + -> Node 1 (10, 10) + -> Node 2 (20, 20) + */ + const elements = [ + { + id: 999, + type: 'relation', + members: [{ type: 'way', ref: 888, role: 'outer' }], + tags: { name: 'Complex Relation' }, + }, + { + id: 888, + type: 'way', + nodes: [1, 2], + }, + { id: 1, type: 'node', lat: 10, lon: 10 }, + { id: 2, type: 'node', lat: 20, lon: 20 }, + ]; + + const result = service.normalizeOsmApiData(elements, 999, 'relation'); + + assert.strictEqual(result.title, 'Complex Relation'); + // It averages all nodes found. In this case, Node 1 and Node 2. + assert.strictEqual(result.lat, 15); // (10+20)/2 + assert.strictEqual(result.lon, 15); // (10+20)/2 + assert.strictEqual(result.osmId, '999'); + assert.strictEqual(result.osmType, 'relation'); + }); +}); From 2734f086089ddf0a235fcd790deac8905a2fa88d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= Date: Fri, 20 Feb 2026 12:38:57 +0400 Subject: [PATCH 03/28] Formatting --- app/components/map.gjs | 30 ++++++++++++++++++------------ app/components/place-details.gjs | 12 ++++++------ app/templates/application.gjs | 14 +++++++------- 3 files changed, 31 insertions(+), 25 deletions(-) diff --git a/app/components/map.gjs b/app/components/map.gjs index 2bcbfc4..dcb61b9 100644 --- a/app/components/map.gjs +++ b/app/components/map.gjs @@ -155,9 +155,6 @@ export default class MapComponent extends Component { `; element.appendChild(this.crosshairElement); - - - // Geolocation Pulse Overlay this.locationOverlayElement = document.createElement('div'); this.locationOverlayElement.className = 'search-pulse blue'; @@ -311,7 +308,7 @@ export default class MapComponent extends Component { }; const startLocating = () => { - console.debug('Getting current geolocation...') + console.debug('Getting current geolocation...'); // 1. Clear any previous session stopLocating(); @@ -374,11 +371,15 @@ export default class MapComponent extends Component { if (!this.mapInstance) return; // Remove existing DragPan interactions - this.mapInstance.getInteractions().getArray().slice().forEach((interaction) => { - if (interaction instanceof DragPan) { - this.mapInstance.removeInteraction(interaction); - } - }); + this.mapInstance + .getInteractions() + .getArray() + .slice() + .forEach((interaction) => { + if (interaction instanceof DragPan) { + this.mapInstance.removeInteraction(interaction); + } + }); // Add new DragPan with current setting const kinetic = this.settings.mapKinetic @@ -652,10 +653,15 @@ export default class MapComponent extends Component { const mapRect = this.mapInstance.getTargetElement().getBoundingClientRect(); const crosshairRect = this.crosshairElement.getBoundingClientRect(); - const centerX = crosshairRect.left + crosshairRect.width / 2 - mapRect.left; - const centerY = crosshairRect.top + crosshairRect.height / 2 - mapRect.top; + const centerX = + crosshairRect.left + crosshairRect.width / 2 - mapRect.left; + const centerY = + crosshairRect.top + crosshairRect.height / 2 - mapRect.top; - const coordinate = this.mapInstance.getCoordinateFromPixel([centerX, centerY]); + const coordinate = this.mapInstance.getCoordinateFromPixel([ + centerX, + centerY, + ]); const center = toLonLat(coordinate); const lat = parseFloat(center[1].toFixed(6)); diff --git a/app/components/place-details.gjs b/app/components/place-details.gjs index 5a868fd..d82ffd4 100644 --- a/app/components/place-details.gjs +++ b/app/components/place-details.gjs @@ -21,11 +21,7 @@ export default class PlaceDetails extends Component { } get name() { - return ( - this.place.title || - getLocalizedName(this.tags) || - 'Unnamed Place' - ); + return this.place.title || getLocalizedName(this.tags) || 'Unnamed Place'; } @action @@ -274,7 +270,11 @@ export default class PlaceDetails extends Component {

- + Google Maps diff --git a/app/templates/application.gjs b/app/templates/application.gjs index b5487df..1e99a01 100644 --- a/app/templates/application.gjs +++ b/app/templates/application.gjs @@ -17,8 +17,8 @@ export default class ApplicationComponent extends Component { @tracked isSettingsOpen = false; get isSidebarOpen() { - // We consider the sidebar "open" if we are in search or place routes. - // This helps the map know if it should shift the center or adjust view. + // We consider the sidebar "open" if we are in search or place routes. + // This helps the map know if it should shift the center or adjust view. return ( this.router.currentRouteName === 'place' || this.router.currentRouteName === 'place.new' || @@ -48,12 +48,12 @@ export default class ApplicationComponent extends Component { if (this.isSettingsOpen) { this.closeSettings(); } else if (this.router.currentRouteName === 'search') { - this.router.transitionTo('index'); + this.router.transitionTo('index'); } else if (this.router.currentRouteName === 'place') { - // If in place route, decide if we want to go back to search or index - // For now, let's go to index or maybe back to search if search params exist? - // Simplest behavior: clear selection - this.router.transitionTo('index'); + // If in place route, decide if we want to go back to search or index + // For now, let's go to index or maybe back to search if search params exist? + // Simplest behavior: clear selection + this.router.transitionTo('index'); } } From bf123056004567c657671f2ebd71bf24c747dcae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= Date: Fri, 20 Feb 2026 12:39:04 +0400 Subject: [PATCH 04/28] Add full-text search Add a search box with a quick results popover, as well full results in the sidebar on pressing enter. --- app/components/app-header.gjs | 3 + app/components/map.gjs | 17 +- app/components/places-sidebar.gjs | 26 +-- app/components/search-box.gjs | 178 ++++++++++++++++++ app/components/settings-pane.gjs | 46 +++-- app/controllers/search.js | 10 + app/routes/search.js | 111 +++++++---- app/services/map-ui.js | 5 + app/services/photon.js | 12 +- app/styles/app.css | 160 ++++++++++++++++ tests/acceptance/search-test.js | 147 +++++++++++++++ .../components/app-header-test.gjs | 19 ++ .../components/place-details-test.gjs | 37 ++++ .../components/search-box-test.gjs | 128 +++++++++++++ tests/unit/services/photon-test.js | 47 +++++ 15 files changed, 878 insertions(+), 68 deletions(-) create mode 100644 app/components/search-box.gjs create mode 100644 app/controllers/search.js create mode 100644 tests/acceptance/search-test.js create mode 100644 tests/integration/components/app-header-test.gjs create mode 100644 tests/integration/components/place-details-test.gjs create mode 100644 tests/integration/components/search-box-test.gjs diff --git a/app/components/app-header.gjs b/app/components/app-header.gjs index baad34a..d04b5bc 100644 --- a/app/components/app-header.gjs +++ b/app/components/app-header.gjs @@ -5,6 +5,7 @@ import { action } from '@ember/object'; import { on } from '@ember/modifier'; import Icon from '#components/icon'; import UserMenu from '#components/user-menu'; +import SearchBox from '#components/search-box'; export default class AppHeaderComponent extends Component { @service storage; @@ -31,6 +32,8 @@ export default class AppHeaderComponent extends Component { > + +

diff --git a/app/components/map.gjs b/app/components/map.gjs index dcb61b9..09dc19c 100644 --- a/app/components/map.gjs +++ b/app/components/map.gjs @@ -110,6 +110,10 @@ export default class MapComponent extends Component { }), }); + // Initialize the UI service with the map center + const initialCenter = toLonLat(view.getCenter()); + this.mapUi.updateCenter(initialCenter[1], initialCenter[0]); + apply(this.mapInstance, 'https://tiles.openfreemap.org/styles/liberty'); this.searchOverlayElement = document.createElement('div'); @@ -645,12 +649,18 @@ export default class MapComponent extends Component { handleMapMove = async () => { if (!this.mapInstance) return; + const view = this.mapInstance.getView(); + const center = toLonLat(view.getCenter()); + this.mapUi.updateCenter(center[1], center[0]); + // If in creation mode, update the coordinates in the service AND the URL if (this.mapUi.isCreating) { // Calculate coordinates under the crosshair element // We need the pixel position of the crosshair relative to the map viewport // The crosshair is positioned via CSS, so we can use getBoundingClientRect - const mapRect = this.mapInstance.getTargetElement().getBoundingClientRect(); + const mapRect = this.mapInstance + .getTargetElement() + .getBoundingClientRect(); const crosshairRect = this.crosshairElement.getBoundingClientRect(); const centerX = @@ -786,10 +796,9 @@ export default class MapComponent extends Component { const queryParams = { lat: lat.toFixed(6), lon: lon.toFixed(6), + q: null, // Clear q to force spatial search + selected: selectedFeatureName || null, }; - if (selectedFeatureName) { - queryParams.q = selectedFeatureName; - } this.router.transitionTo('search', { queryParams }); }; diff --git a/app/components/places-sidebar.gjs b/app/components/places-sidebar.gjs index 359028c..bd1afaa 100644 --- a/app/components/places-sidebar.gjs +++ b/app/components/places-sidebar.gjs @@ -23,8 +23,10 @@ export default class PlacesSidebar extends Component { if (lat && lon) { this.router.transitionTo('place.new', { queryParams: { lat, lon } }); } else { - // Fallback (shouldn't happen in search context) - this.router.transitionTo('place.new', { queryParams: { lat: 0, lon: 0 } }); + // Fallback (shouldn't happen in search context) + this.router.transitionTo('place.new', { + queryParams: { lat: 0, lon: 0 }, + }); } } @@ -152,7 +154,7 @@ export default class PlacesSidebar extends Component { {{on "click" this.clearSelection}} > {{else}} -

Nearby

+

Nearby

{{/if}} {{/each}} diff --git a/app/components/search-box.gjs b/app/components/search-box.gjs new file mode 100644 index 0000000..f0e1dc4 --- /dev/null +++ b/app/components/search-box.gjs @@ -0,0 +1,178 @@ +import Component from '@glimmer/component'; +import { service } from '@ember/service'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; +import { on } from '@ember/modifier'; +import { fn } from '@ember/helper'; +import { debounce } from '@ember/runloop'; +import Icon from '#components/icon'; + +export default class SearchBoxComponent extends Component { + @service photon; + @service router; + @service mapUi; + @service map; // Assuming we might need map context, but mostly we use router + + @tracked query = ''; + @tracked results = []; + @tracked isFocused = false; + @tracked isLoading = false; + + get showPopover() { + return this.isFocused && this.results.length > 0; + } + + @action + handleInput(event) { + this.query = event.target.value; + if (this.query.length < 2) { + this.results = []; + return; + } + + debounce(this, this.performSearch, 300); + } + + async performSearch() { + if (this.query.length < 2) return; + + this.isLoading = true; + try { + // Use map center if available for location bias + let lat, lon; + if (this.mapUi.currentCenter) { + ({ lat, lon } = this.mapUi.currentCenter); + } + const results = await this.photon.search(this.query, lat, lon); + this.results = results; + } catch (e) { + console.error('Search failed', e); + this.results = []; + } finally { + this.isLoading = false; + } + } + + @action + handleFocus() { + this.isFocused = true; + if (this.query.length >= 2 && this.results.length === 0) { + this.performSearch(); + } + } + + @action + handleBlur() { + // Delay hiding so clicks on results can register + setTimeout(() => { + this.isFocused = false; + }, 200); + } + + @action + handleSubmit(event) { + event.preventDefault(); + if (!this.query) return; + + let queryParams = { q: this.query, selected: null }; + + if (this.mapUi.currentCenter) { + const { lat, lon } = this.mapUi.currentCenter; + queryParams.lat = parseFloat(lat).toFixed(4); + queryParams.lon = parseFloat(lon).toFixed(4); + } + + this.router.transitionTo('search', { queryParams }); + this.isFocused = false; + } + + @action + selectResult(place) { + this.query = place.title; + this.results = []; // Hide popover + + // If it has an OSM ID, go to place details + if (place.osmId) { + // Format: osm:node:123 + // place.osmType is already normalized to 'node', 'way', or 'relation' by PhotonService + const id = `osm:${place.osmType}:${place.osmId}`; + this.router.transitionTo('place', id); + } else { + // Just a location (e.g. from Photon without OSM ID, though unlikely for Photon) + // Or we can treat it as a search query + this.router.transitionTo('search', { + queryParams: { + q: place.title, + lat: place.lat, + lon: place.lon, + selected: null, + }, + }); + } + } + + @action + clear() { + this.query = ''; + this.results = []; + this.router.transitionTo('index'); // Or stay on current page? + // Usually clear just clears the input. + } + + +} diff --git a/app/components/settings-pane.gjs b/app/components/settings-pane.gjs index 153a4c2..316edbc 100644 --- a/app/components/settings-pane.gjs +++ b/app/components/settings-pane.gjs @@ -62,7 +62,10 @@ export default class SettingsPane extends Component { {{#each this.settings.overpassApis as |api|}} @@ -73,24 +76,45 @@ export default class SettingsPane extends Component {

About

- Marco (as in Marco Polo) is an unhosted maps application - that respects your privacy and choices. + Marco + (as in + Marco Polo) is an unhosted maps application that respects your + privacy and choices.

- Connect your own remote storage to sync place bookmarks across - apps and devices. + Connect your own + remote storage + to sync place bookmarks across apps and devices.

  • - + Source Code - (AGPL) + + (AGPL)
  • - + Map Data © OpenStreetMap
    • diff --git a/app/controllers/search.js b/app/controllers/search.js new file mode 100644 index 0000000..a61e116 --- /dev/null +++ b/app/controllers/search.js @@ -0,0 +1,10 @@ +import Controller from '@ember/controller'; + +export default class SearchController extends Controller { + queryParams = ['lat', 'lon', 'q', 'selected']; + + lat = null; + lon = null; + q = null; + selected = null; +} diff --git a/app/routes/search.js b/app/routes/search.js index 6ec1323..4b33af0 100644 --- a/app/routes/search.js +++ b/app/routes/search.js @@ -5,6 +5,7 @@ import { getDistance } from '../utils/geo'; export default class SearchRoute extends Route { @service osm; + @service photon; @service mapUi; @service storage; @service router; @@ -13,50 +14,76 @@ export default class SearchRoute extends Route { lat: { refreshModel: true }, lon: { refreshModel: true }, q: { refreshModel: true }, + selected: { refreshModel: true }, }; async model(params) { - // If no coordinates, we can't search - if (!params.lat || !params.lon) { - return []; + const lat = params.lat ? parseFloat(params.lat) : null; + const lon = params.lon ? parseFloat(params.lon) : null; + let pois = []; + + // Case 1: Text Search (q parameter present) + if (params.q) { + // Search with Photon (using lat/lon for bias if available) + pois = await this.photon.search(params.q, lat, lon); + + // Search local bookmarks by name + const queryLower = params.q.toLowerCase(); + const localMatches = this.storage.savedPlaces.filter((p) => { + return ( + p.title?.toLowerCase().includes(queryLower) || + p.description?.toLowerCase().includes(queryLower) + ); + }); + + // Merge local matches + localMatches.forEach((local) => { + const exists = pois.find( + (poi) => + (local.osmId && poi.osmId === local.osmId) || + (poi.id && poi.id === local.id) + ); + if (!exists) { + pois.push(local); + } + }); } + // Case 2: Nearby Search (lat/lon present, no q) + else if (lat && lon) { + const searchRadius = 50; // Default radius - const lat = parseFloat(params.lat); - const lon = parseFloat(params.lon); - const searchRadius = params.q ? 30 : 50; + // Fetch POIs from Overpass + pois = await this.osm.getNearbyPois(lat, lon, searchRadius); - // Fetch POIs - let pois = await this.osm.getNearbyPois(lat, lon, searchRadius); + // Get cached/saved places in search radius + const localMatches = this.storage.savedPlaces.filter((p) => { + const dist = getDistance(lat, lon, p.lat, p.lon); + return dist <= searchRadius; + }); - // Get cached/saved places in search radius - const localMatches = this.storage.savedPlaces.filter((p) => { - const dist = getDistance(lat, lon, p.lat, p.lon); - return dist <= searchRadius; - }); + // Merge local matches + localMatches.forEach((local) => { + const exists = pois.find( + (poi) => + (local.osmId && poi.osmId === local.osmId) || + (poi.id && poi.id === local.id) + ); - // Add local matches to the list if they aren't already there - // We use osmId to deduplicate if possible - localMatches.forEach((local) => { - const exists = pois.find( - (poi) => - (local.osmId && poi.osmId === local.osmId) || - (poi.id && poi.id === local.id) - ); + if (!exists) { + pois.push(local); + } + }); - if (!exists) { - pois.push(local); - } - }); - - // Sort by distance from click - pois = pois - .map((p) => { - return { - ...p, - _distance: getDistance(lat, lon, p.lat, p.lon), - }; - }) - .sort((a, b) => a._distance - b._distance); + // Sort by distance from click + pois = pois + .map((p) => { + return { + ...p, + _distance: getDistance(lat, lon, p.lat, p.lon), + }; + }) + .sort((a, b) => a._distance - b._distance); + } // Check if any of these are already bookmarked // We resolve them to the bookmark version if they exist @@ -69,18 +96,24 @@ export default class SearchRoute extends Route { } afterModel(model, transition) { - const { q } = transition.to.queryParams; + const { q, selected } = transition.to.queryParams; // Heuristic Match Logic (ported from MapComponent) - if (q && model.length > 0) { + // If 'selected' is provided (from map click), try to find that specific feature. + // If 'q' is provided (from text search), try to find an exact match to auto-select. + const targetName = selected || q; + + if (targetName && model.length > 0) { let matchedPlace = null; // 1. Exact Name Match matchedPlace = model.find( - (p) => p.osmTags && (p.osmTags.name === q || p.osmTags['name:en'] === q) + (p) => + p.osmTags && + (p.osmTags.name === targetName || p.osmTags['name:en'] === targetName) ); - // 2. High Proximity Match (<= 10m) + // 2. High Proximity Match (<= 10m) - Only if we don't have a name match // Note: MapComponent had logic for <=20m + type match. // We might want to pass the 'type' in queryParams if we want to be that precise. // For now, let's stick to name or very close proximity. diff --git a/app/services/map-ui.js b/app/services/map-ui.js index abfa140..239c8d5 100644 --- a/app/services/map-ui.js +++ b/app/services/map-ui.js @@ -7,6 +7,7 @@ export default class MapUiService extends Service { @tracked isCreating = false; @tracked creationCoordinates = null; @tracked returnToSearch = false; + @tracked currentCenter = null; selectPlace(place) { this.selectedPlace = place; @@ -38,4 +39,8 @@ export default class MapUiService extends Service { updateCreationCoordinates(lat, lon) { this.creationCoordinates = { lat, lon }; } + + updateCenter(lat, lon) { + this.currentCenter = { lat, lon }; + } } diff --git a/app/services/photon.js b/app/services/photon.js index 4ea76cd..f096ced 100644 --- a/app/services/photon.js +++ b/app/services/photon.js @@ -12,8 +12,8 @@ export default class PhotonService extends Service { }); if (lat && lon) { - params.append('lat', String(lat)); - params.append('lon', String(lon)); + params.append('lat', parseFloat(lat).toFixed(4)); + params.append('lon', parseFloat(lon).toFixed(4)); } const url = `${this.baseUrl}?${params.toString()}`; @@ -61,12 +61,18 @@ export default class PhotonService extends Service { const description = addressParts.join(', '); const title = props.name || description || 'Unknown Place'; + const osmTypeMap = { + N: 'node', + W: 'way', + R: 'relation', + }; + return { title, lat, lon, osmId: props.osm_id, - osmType: props.osm_type, // 'N', 'W', 'R' + osmType: osmTypeMap[props.osm_type] || props.osm_type, // 'node', 'way', 'relation' osmTags: props, // Keep all properties as tags for now description: props.name ? description : addressParts.slice(1).join(', '), source: 'photon', diff --git a/app/styles/app.css b/app/styles/app.css index d0b8f14..10f7023 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -74,6 +74,11 @@ body { pointer-events: auto; /* Re-enable clicks for buttons */ } +.header-left { + display: flex; + align-items: center; +} + .btn-press { transition: transform 0.1s; } @@ -750,3 +755,158 @@ button.create-place { padding-bottom: env(safe-area-inset-bottom, 20px); } } + +/* Search Box Component */ +.search-box { + position: relative; + width: 100%; + max-width: 320px; + margin-left: 1rem; + z-index: 3002; /* Higher than menu button to be safe */ +} + +@media (max-width: 768px) { + .search-box { + max-width: 200px; /* Smaller on mobile */ + margin-left: 0.5rem; + } +} + +.search-form { + display: flex; + align-items: center; + background: white; + border-radius: 24px; /* Pill shape */ + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); + padding: 0 0.75rem; + height: 40px; + transition: box-shadow 0.2s; +} + +.search-form:focus-within { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +.search-icon { + display: flex; + align-items: center; + color: #666; + margin-right: 0.5rem; +} + +.search-input { + border: none; + background: transparent; + flex: 1; + height: 100%; + font-size: 1rem; + color: #333; + outline: none; + width: 100%; + padding: 0; + /* Remove native search cancel button in WebKit */ + -webkit-appearance: none; +} + +/* Remove 'x' from search input in Chrome/Safari */ +.search-input::-webkit-search-cancel-button { + -webkit-appearance: none; +} + +.search-clear-btn { + background: none; + border: none; + padding: 4px; + cursor: pointer; + display: flex; + align-items: center; + color: #999; + border-radius: 50%; +} + +.search-clear-btn:hover { + background: #f0f0f0; + color: #666; +} + +/* Search Results Popover */ +.search-results-popover { + position: absolute; + top: 100%; + left: 0; + right: 0; + margin-top: 8px; + background: white; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + overflow: hidden; + max-height: 400px; + overflow-y: auto; + z-index: 3002; +} + +.search-results-list { + list-style: none; + padding: 0; + margin: 0; +} + +.search-result-item { + width: 100%; + display: flex; + align-items: center; /* Vertical center alignment */ + gap: 0.75rem; + padding: 0.75rem 1rem; + border: none; + background: white; + text-align: left; + cursor: pointer; + transition: background 0.1s; + border-bottom: 1px solid #f0f0f0; +} + +.search-result-item:last-child { + border-bottom: none; +} + +.search-result-item:hover, +.search-result-item:focus { + background: #f5f5f5; + outline: none; +} + +.result-icon { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + background: #f0f0f0; + border-radius: 50%; + flex-shrink: 0; + color: #666; +} + +.result-info { + display: flex; + flex-direction: column; + overflow: hidden; /* For text truncation if needed */ +} + +.result-title { + font-weight: 500; + color: #333; + font-size: 0.95rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.result-desc { + font-size: 0.8rem; + color: #777; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-top: 2px; +} diff --git a/tests/acceptance/search-test.js b/tests/acceptance/search-test.js new file mode 100644 index 0000000..abac40f --- /dev/null +++ b/tests/acceptance/search-test.js @@ -0,0 +1,147 @@ +import { module, test } from 'qunit'; +import { visit, currentURL } from '@ember/test-helpers'; +import { setupApplicationTest } from 'marco/tests/helpers'; +import Service from '@ember/service'; + +module('Acceptance | search', function (hooks) { + setupApplicationTest(hooks); + + test('visiting /search with q parameter performs text search', async function (assert) { + // Mock Photon Service + class MockPhotonService extends Service { + async search(query) { + if (query === 'Berlin') { + return [ + { + title: 'Berlin', + lat: 52.52, + lon: 13.405, + osmId: '123', + osmType: 'R', + description: 'City in Germany', + }, + { + title: 'Berlin Alexanderplatz', + lat: 52.521, + lon: 13.41, + osmId: '456', + osmType: 'N', + description: 'Square in Berlin', + }, + ]; + } + return []; + } + } + this.owner.register('service:photon', MockPhotonService); + + // Mock Storage Service (empty) + class MockStorageService extends Service { + savedPlaces = []; + findPlaceById() { + return null; + } + rs = { + on: () => {}, + }; + // Add placesInView since map component accesses it + placesInView = []; + loadPlacesInBounds() { + return Promise.resolve(); + } + } + + this.owner.register('service:storage', MockStorageService); + + await visit('/search?q=Berlin'); + + assert.strictEqual(currentURL(), '/search?q=Berlin'); + assert.dom('.places-list li').exists({ count: 2 }); + assert.dom('.places-list li:first-child .place-name').hasText('Berlin'); + }); + + test('visiting /search with lat/lon performs nearby search', async function (assert) { + // Mock Osm Service + class MockOsmService extends Service { + async getNearbyPois() { + return [ + { + title: 'Nearby Cafe', + lat: 52.521, + lon: 13.406, + osmId: '789', + osmType: 'N', + _distance: 100, // Pre-calculated or ignored if mocked + }, + ]; + } + } + this.owner.register('service:osm', MockOsmService); + + // Mock Storage Service (empty) + class MockStorageService extends Service { + savedPlaces = []; + findPlaceById() { + return null; + } + rs = { + on: () => {}, + }; + // Add placesInView since map component accesses it + placesInView = []; + loadPlacesInBounds() { + return Promise.resolve(); + } + } + + this.owner.register('service:storage', MockStorageService); + + await visit('/search?lat=52.52&lon=13.405'); + + assert.strictEqual(currentURL(), '/search?lat=52.52&lon=13.405'); + assert.dom('.places-list li').exists({ count: 1 }); + assert.dom('.places-list li .place-name').hasText('Nearby Cafe'); + }); + + test('local bookmarks are merged into search results', async function (assert) { + // Mock Photon Service + class MockPhotonService extends Service { + async search() { + return []; + } + } + this.owner.register('service:photon', MockPhotonService); + + // Mock Storage Service with a bookmark + class MockStorageService extends Service { + savedPlaces = [ + { + title: 'My Secret Base', + lat: 50.0, + lon: 10.0, + osmId: '999', + osmType: 'N', + description: 'Top Secret', + }, + ]; + findPlaceById(id) { + if (id === '999') return this.savedPlaces[0]; + return null; + } + rs = { + on: () => {}, + }; + placesInView = []; + loadPlacesInBounds() { + return Promise.resolve(); + } + } + this.owner.register('service:storage', MockStorageService); + + await visit('/search?q=Secret'); + + assert.strictEqual(currentURL(), '/search?q=Secret'); + assert.dom('.places-list li').exists({ count: 1 }); + assert.dom('.places-list li .place-name').hasText('My Secret Base'); + }); +}); diff --git a/tests/integration/components/app-header-test.gjs b/tests/integration/components/app-header-test.gjs new file mode 100644 index 0000000..c96755e --- /dev/null +++ b/tests/integration/components/app-header-test.gjs @@ -0,0 +1,19 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'marco/tests/helpers'; +import { render } from '@ember/test-helpers'; +import AppHeader from 'marco/components/app-header'; + +module('Integration | Component | app-header', function (hooks) { + setupRenderingTest(hooks); + + test('it renders the search box', async function (assert) { + this.noop = () => {}; + await render( + + ); + + assert.dom('header.app-header').exists(); + assert.dom('.search-box').exists('Search box is present in the header'); + assert.dom('.menu-btn').exists('Menu button is present'); + }); +}); diff --git a/tests/integration/components/place-details-test.gjs b/tests/integration/components/place-details-test.gjs new file mode 100644 index 0000000..dcf7e53 --- /dev/null +++ b/tests/integration/components/place-details-test.gjs @@ -0,0 +1,37 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'marco/tests/helpers'; +import { render } from '@ember/test-helpers'; +import PlaceDetails from 'marco/components/place-details'; + +module('Integration | Component | place-details', function (hooks) { + setupRenderingTest(hooks); + + test('it formats coordinates correctly', async function (assert) { + const place = { + title: 'Test Place', + lat: 52.520006789, + lon: 13.404954123, + description: 'A place for testing.', + }; + + await render(); + + assert.dom('.place-details').exists(); + assert.dom('.place-details h3').hasText('Test Place'); + + // Check for the formatted coordinates link text + // "52.520007, 13.404954" (rounded) + assert.dom('.meta-info a[href*="geo:"]').hasText('52.520007, 13.404954'); + }); + + test('it handles missing coordinates gracefully', async function (assert) { + const place = { + title: 'Place without Coords', + }; + + await render(); + + assert.dom('.place-details h3').hasText('Place without Coords'); + assert.dom('.meta-info a[href*="geo:"]').doesNotExist(); + }); +}); diff --git a/tests/integration/components/search-box-test.gjs b/tests/integration/components/search-box-test.gjs new file mode 100644 index 0000000..f3007ec --- /dev/null +++ b/tests/integration/components/search-box-test.gjs @@ -0,0 +1,128 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'marco/tests/helpers'; +import { render, fillIn, click, waitFor } from '@ember/test-helpers'; +import SearchBox from 'marco/components/search-box'; +import Service from '@ember/service'; + +module('Integration | Component | search-box', function (hooks) { + setupRenderingTest(hooks); + + test('it renders and handles search input', async function (assert) { + // Mock Photon Service + class MockPhotonService extends Service { + async search(query) { + if (query === 'test') { + return [ + { + title: 'Test Place', + description: 'A test description', + lat: 10, + lon: 20, + osmId: '123', + osmType: 'node', + }, + ]; + } + return []; + } + } + this.owner.register('service:photon', MockPhotonService); + + // Mock Router Service + class MockRouterService extends Service { + transitionTo(routeName, ...args) { + assert.step(`transitionTo: ${routeName} ${JSON.stringify(args)}`); + } + } + this.owner.register('service:router', MockRouterService); + + await render(); + + assert.dom('.search-input').exists(); + assert.dom('.search-results-popover').doesNotExist(); + + // Type 'test' + await fillIn('.search-input', 'test'); + + // Wait for debounce and async search + await waitFor('.search-results-popover', { timeout: 2000 }); + + assert.dom('.search-result-item').exists({ count: 1 }); + assert.dom('.result-title').hasText('Test Place'); + assert.dom('.result-desc').hasText('A test description'); + + // Click result + await click('.search-result-item'); + + assert.verifySteps(['transitionTo: place ["osm:node:123"]']); + assert + .dom('.search-results-popover') + .doesNotExist('Popover closes after selection'); + }); + + test('it handles submit for full search', async function (assert) { + // Mock Photon Service + class MockPhotonService extends Service { + async search() { + return []; + } + } + this.owner.register('service:photon', MockPhotonService); + + // Mock MapUi Service + class MockMapUiService extends Service { + currentCenter = { lat: 52.52, lon: 13.405 }; + } + this.owner.register('service:map-ui', MockMapUiService); + + // Mock Router Service + class MockRouterService extends Service { + transitionTo(routeName, options) { + assert.step( + `transitionTo: ${routeName} ${JSON.stringify(options)}` + ); + } + } + this.owner.register('service:router', MockRouterService); + + await render(); + + await fillIn('.search-input', 'berlin'); + await click('.search-input'); // Focus + // Trigger submit event on the form + await this.element + .querySelector('form') + .dispatchEvent(new Event('submit', { bubbles: true, cancelable: true })); + + assert.verifySteps([ + 'transitionTo: search {"queryParams":{"q":"berlin","selected":null,"lat":"52.5200","lon":"13.4050"}}', + ]); + }); + + test('it uses map center for biased search', async function (assert) { + // Mock MapUi Service + class MockMapUiService extends Service { + currentCenter = { lat: 52.52, lon: 13.405 }; + } + this.owner.register('service:map-ui', MockMapUiService); + + // Mock Photon Service + class MockPhotonService extends Service { + async search(query, lat, lon) { + assert.step(`search: ${query}, ${lat}, ${lon}`); + return []; + } + } + this.owner.register('service:photon', MockPhotonService); + + await render(); + + await fillIn('.search-input', 'cafe'); + + // Wait for debounce (300ms) + execution + const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); + await delay(400); + + assert.verifySteps(['search: cafe, 52.52, 13.405']); + }); +}); diff --git a/tests/unit/services/photon-test.js b/tests/unit/services/photon-test.js index f0e76cd..fa80419 100644 --- a/tests/unit/services/photon-test.js +++ b/tests/unit/services/photon-test.js @@ -9,6 +9,34 @@ module('Unit | Service | photon', function (hooks) { assert.ok(service); }); + test('search truncates coordinates to 4 decimal places', async function (assert) { + let service = this.owner.lookup('service:photon'); + const originalFetch = window.fetch; + + let capturedUrl; + window.fetch = async (url) => { + capturedUrl = url; + return { + ok: true, + json: async () => ({ features: [] }), + }; + }; + + try { + await service.search('Test', 52.123456, 13.987654); + assert.ok( + capturedUrl.includes('lat=52.1235'), + 'lat is rounded to 4 decimals' + ); + assert.ok( + capturedUrl.includes('lon=13.9877'), + 'lon is rounded to 4 decimals' + ); + } finally { + window.fetch = originalFetch; + } + }); + test('search handles successful response', async function (assert) { let service = this.owner.lookup('service:photon'); @@ -43,6 +71,7 @@ module('Unit | Service | photon', function (hooks) { assert.strictEqual(results[0].lat, 52.5); assert.strictEqual(results[0].lon, 13.4); assert.strictEqual(results[0].description, 'Test City, Test Country'); + assert.strictEqual(results[0].osmType, 'node', 'Normalizes N to node'); } finally { window.fetch = originalFetch; } @@ -87,4 +116,22 @@ module('Unit | Service | photon', function (hooks) { assert.strictEqual(result.lat, 20); assert.strictEqual(result.lon, 10); }); + + test('normalizeFeature normalizes OSM types correctly', function (assert) { + let service = this.owner.lookup('service:photon'); + + const checkType = (input, expected) => { + const feature = { + properties: { osm_type: input, name: 'Test' }, + geometry: { coordinates: [0, 0] }, + }; + const result = service.normalizeFeature(feature); + assert.strictEqual(result.osmType, expected, `${input} -> ${expected}`); + }; + + checkType('N', 'node'); + checkType('W', 'way'); + checkType('R', 'relation'); + checkType('unknown', 'unknown'); // Fallback + }); }); From 00454c8fab2766c8838be857d05203f0d2eebbaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= Date: Fri, 20 Feb 2026 18:35:01 +0400 Subject: [PATCH 05/28] Integrate the menu button in the search box Allows us to make the search box wider, too --- app/components/app-header.gjs | 11 +-- app/components/icon.gjs | 2 + app/components/search-box.gjs | 23 ++++- app/styles/app.css | 97 ++++++++++++++----- .../components/app-header-test.gjs | 2 +- 5 files changed, 94 insertions(+), 41 deletions(-) diff --git a/app/components/app-header.gjs b/app/components/app-header.gjs index d04b5bc..7c38228 100644 --- a/app/components/app-header.gjs +++ b/app/components/app-header.gjs @@ -24,16 +24,7 @@ export default class AppHeaderComponent extends Component {