1.18.4

* Fixes flash of bold text on app launch
* Fixes Noto Sans being used instead of system font where not available

.env.production

@@ -0,0 +1,3 @@
+# OpenStreetMap OAuth
+VITE_OSM_CLIENT_ID=jIn8l5mT8FZOGYiIYXG1Yvj_2FZKB9TJ1edZwOJPsRU
+VITE_OSM_OAUTH_URL=https://www.openstreetmap.org

app/components/map.gjs

@@ -284,7 +284,9 @@ export default class MapComponent extends Component {
     const initialCenter = toLonLat(view.getCenter());
     this.mapUi.updateCenter(initialCenter[1], initialCenter[0]);
 
-    apply(this.mapInstance, 'https://tiles.openfreemap.org/styles/liberty');
+    apply(this.mapInstance, 'https://tiles.openfreemap.org/styles/liberty', {
+      webfonts: 'data:text/css,',
+    });
 
     this.searchOverlayElement = document.createElement('div');
     this.searchOverlayElement.className = 'search-pulse';
@@ -392,7 +394,10 @@ export default class MapComponent extends Component {
     const locateElement = document.createElement('div');
     locateElement.className = 'ol-control ol-locate';
     const locateBtn = document.createElement('button');
-    locateBtn.innerHTML = '⊙';
+    locateBtn.style.display = 'flex';
+    locateBtn.style.alignItems = 'center';
+    locateBtn.style.justifyContent = 'center';
+    locateBtn.innerHTML = `<span class="icon" style="width: 14px; height: 14px; display: flex;">${getIcon('navigation')}</span>`;
     locateBtn.title = 'Locate Me';
     locateElement.appendChild(locateBtn);
 

app/components/user-menu.gjs

@@ -55,7 +55,7 @@ export default class UserMenuComponent extends Component {
           </div>
           <div class="account-status">
             {{#if @storage.connected}}
-              {{@storage.userAddress}}
+              <strong>{{@storage.userAddress}}</strong>
             {{else}}
               Not connected
             {{/if}}
@@ -84,7 +84,7 @@ export default class UserMenuComponent extends Component {
           </div>
           <div class="account-status">
             {{#if this.osmAuth.isConnected}}
-              {{this.osmAuth.userDisplayName}}
+              <strong>{{this.osmAuth.userDisplayName}}</strong>
             {{else}}
               Not connected
             {{/if}}

app/services/osm-auth.js

@@ -7,7 +7,15 @@ class MarcoOsmAuthStorage {
     localStorage.setItem('marco:osm_auth_state', serializedState);
   }
   loadState() {
-    return localStorage.getItem('marco:osm_auth_state');
+    const state = localStorage.getItem('marco:osm_auth_state');
+    if (!state) return false;
+    try {
+      JSON.parse(state);
+      return state;
+    } catch (e) {
+      console.warn('Failed to parse OSM auth state', e);
+      return false;
+    }
   }
 }
 
@@ -45,6 +53,11 @@ export default class OsmAuthService extends Service {
   }
 
   async restoreSession() {
+    try {
+      await this.oauthClient.ready;
+    } catch (e) {
+      console.warn('oauthClient.ready failed', e);
+    }
     const isAuthorized = await this.oauthClient.isAuthorized();
     if (isAuthorized) {
       this.isConnected = true;

app/styles/app.css

@@ -14,6 +14,8 @@ html,
 body {
   height: 100%;
   overscroll-behavior: none; /* Prevent pull-to-refresh on mobile */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
   -webkit-tap-highlight-color: transparent;
 }
@@ -26,6 +28,7 @@ body {
   margin: 0;
   font-family: 'Noto Sans', sans-serif;
   font-size: 16px;
+  font-weight: normal;
   color: #333;
 }
 
@@ -246,12 +249,15 @@ body {
 
 .account-status {
   font-size: 0.85rem;
-  font-weight: bold;
   color: #898989;
   margin-top: 0.35rem;
   margin-left: calc(18px + 0.75rem);
 }
 
+.account-status strong {
+  font-weight: 600;
+}
+
 .account-item.disabled {
   opacity: 0.5;
   pointer-events: none;
@@ -261,7 +267,6 @@ body {
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  font-weight: 500;
 }
 
 .btn-text {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "marco",
-  "version": "1.18.0",
+  "version": "1.18.4",
   "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-CqvZua00.js"></script>
+  <script type="module" crossorigin src="/assets/main-0ky279gM.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/main-uF6fmHZ4.css">
+  <link rel="stylesheet" crossorigin href="/assets/main-BF2Ls-fG.css">
 </head>
   <body>
  </body>

tests/unit/services/osm-auth-test.js

@@ -52,6 +52,7 @@ module('Unit | Service | osm-auth', function (hooks) {
     // Because restoreSession runs in the constructor, we might need to overwrite it after, but it's async.
     // Let's just create it, let the original restoreSession fail or do nothing, and then we stub and re-call it.
 
+    service.oauthClient.ready = Promise.resolve();
     service.oauthClient.isAuthorized = async () => true;
     window.localStorage.setItem('marco:osm_user_display_name', 'CachedName');
 
@@ -68,6 +69,7 @@ module('Unit | Service | osm-auth', function (hooks) {
   test('it fetches user info when logged in but no cached name', async function (assert) {
     let service = this.owner.factoryFor('service:osm-auth').create();
 
+    service.oauthClient.ready = Promise.resolve();
     service.oauthClient.isAuthorized = async () => true;
     service.oauthClient.getTokens = async () => ({ accessToken: 'fake-token' });
     // Ensure localStorage is empty for this key