@yz-social/civildefense.io 5.0.0 → 5.1.1

package/public/javascripts/hashtags.js

@@ -23,6 +23,7 @@ let allKnownHashtags = JSON.parse(localStorage.getItem('allKnownHashtags') || `[
   "🎙️ news",
   "👁️ observer corps",
   "🎵 pop",
+  "🚂 train",
   "🧰 utility repairs"
 ]`);
 
@@ -141,6 +142,116 @@ export const Hashtags = {
         <md-icon-button slot="remove-trailing-icon"><md-icon class="material-icons"></md-icon></md-icon-button>
       </md-filter-chip>`;
   },
+  sort(tags) { // Sort list of tags in place without regard to leding emoji
+    tags.sort((a, b) => stripLeadingEmoji(a).localeCompare(stripLeadingEmoji(b)));
+  },
+  resetSubscriberDisplay() { // Lay out all the hashtag chips display, including the input for adding new ones.
+    this.chipset.innerHTML = '';
+    const tags = this.getAll();
+
+    // Sort alphabetically, ignoring any leading emoji, as these have unexpected orderings.
+    this.sort(tags);
+    const reordered = {};
+    tags.forEach(tag => reordered[tag] = this.hashtags[tag]);
+    this.hashtags = reordered;
+
+    // Add a chip for each hashtag.
+    tags.forEach(label => { // Elements are displayed from the bottom up.
+      this.chipset.insertAdjacentHTML("afterbegin", this.chipHTML(label));
+    });
+    // IWBNI we just added handlers once to the chipset and relied on bubbling up, but there's something not working about that.
+    [...this.chipset.children].forEach(element => {
+      // Material design will update the displays. We have to handle the data changes.
+      element.addEventListener('remove', event => { // Clicking the button WITHIN the chip (which is the material design 'remove' event).
+	resetInactivityTimer();
+	const chip = event.target;
+	if (!chip.selected) { // 'x' icon. Not currently selected. Go ahead and remove it.
+	  showMessage(Int`Topic "${chip.label}" has been removed. You can add it back with "add topic".`, 'instructions');
+	  return this.remove(chip);
+	} // radio button icon. Chip is already selected. We are setting the publishing tag.
+	event.preventDefault();
+	showMessage(Int`Tapping the map will now produce an alert for the "${chip.label}" topic.`, 'instructions');
+	if (chip.classList.contains('pub')) return false;
+	return this.setPublish(chip.label);
+      });
+      clickTip(element, Int`Toggle whether alerts for this topic shown on the map. Separately, a radio button is shown when selected and sets this as the initial topic of the next alert you make, while an x button is shown when deselected and removes the topic.`, event => { // Toggle action on whole chip.
+	event.stopPropagation();
+	resetInactivityTimer();
+	const chip = event.target;
+	if (chip.selected) showMessage(Int`Turning "${chip.label}" alerts back on in the map.`, 'instructions');
+	else showMessage(Int`Turning off "${chip.label}" alerts in the map. You can delete the topic altogether with the X.`, 'instructions');
+	this.toggleChip(chip);
+	Alert.closePopup();
+	this.onchange({redisplaySubscribers: false});
+      });
+    });
+    this.chipset.insertAdjacentHTML("afterbegin",  // Chip to add a new hashtag.
+				    `<div class="combobox">
+  <md-filled-text-field class="newtag"
+     aria-expanded="false"
+     aria-controls="knownTagsListbox"
+     aria-autocomplete="list"
+     autocomplete="off"
+     tabindex="0"
+     placeholder="➕${Int`add topic`}"></md-filled-text-field>
+</div>`);
+    // I've tried also supplying a datalist, e.g., to supply the mobile keyboard completions, but
+    // I have not been able to get it to work.
+    this.initializeTopicInput();
+  },
+  remove(chip, redisplaySubscribers = false) { // Remove this topic, persistently.
+    delete this.hashtags[chip.label];
+    delete this.canonical2extended[canonicalTag(chip.label)];
+    this.onchange({redisplaySubscribers, resetSubscriptions: false});
+  },
+  toggleChip(chip) { // Switch whether the topic is or is not subscribed.
+    // Now selected => hashtags[label] becomes 'pub' (selected and the publisher) and clear old pub
+    // NOT now selected => hashtags[label] becomes false (through mechanism as follows)
+    //    but if publisher => set alt publisher if possible, else remember as backupPublisher
+    const label = chip.label;
+
+    // chip.selected is new state, after clicking.
+    if (chip.selected) return this.setPublish(label);  // Become publisher, clearing old publisher.
+
+    // Not selected:
+
+    // If we're not publisher, just clear. But don't go through getPublish, as that can have side effects.
+    if (this.hashtags[label] !== 'pub') return this.hashtags[label] = false;
+
+    // Also clear, but...
+    const subs = this.getSubscribe();
+    if (subs.length > 1) {  // Find and set alternative publisher if possible.
+      const pubIndex = subs.indexOf(label);
+      const index = (pubIndex + 1) % subs.length;
+      this.setPublish(subs[index]);
+    } else {
+      // No alternative available. Clear it, but remember for use by getPublish.
+      // It will stay .pub styled while toggled, until anything toggles on.
+      this.backupPublisher = label;
+    }
+    return this.hashtags[label] = false;
+  },
+  getChip(label) { // Handy for scripting, but not otherwise used in app.
+    for (const chip of this.chipset.children) {
+      if (chip.label === label) return chip;
+    }
+    return null;
+  },
+  setPublish(newTag) { // Make this topic be the one to be used when we next publish an alert.
+    // newTag will be marked for publishing (in this.hashtags and element style)
+    // Old publish tag (if any) will be set back to merely be subscribed (in same)
+    let oldTag = this.getPublish();
+    const backup = this.backupPublisher;
+    if (oldTag) this.hashtags[oldTag] = true; // true (instead of 'pub')
+    else if (backup) oldTag = backup;
+    this.backupPublisher = false;
+    this.hashtags[newTag] = 'pub';
+    for (const chip of this.chipset.children) {
+      if (chip.label === newTag) chip.classList.add('pub');
+      else if (chip.label === oldTag) chip.classList.remove('pub');
+    }
+    return oldTag;
+  },
 
   // Topic entry, with autocomplete.
   // - When you click the input box, it shows all the topics we know about.
@@ -156,6 +267,7 @@ export const Hashtags = {
   //   - otherwise => exact contents of input box is used.
   closeSelector() { // Close the autocomplete tag selector
     const { listbox, newtag } = this;
+    for (const li of listbox.children) li.classList.toggle('active', false);
     listbox.classList.toggle('hidden', true);
     newtag.setAttribute('aria-expanded', 'false');
     newtag.removeAttribute('aria-activedescendant');
@@ -188,17 +300,20 @@ export const Hashtags = {
     this.acceptTag();
   },
   acceptTag() { // Add the new hashtag.
+    console.log('acceptTag', this.newtag?.value);
     resetInactivityTimer();
     let tag = this.newtag?.value  // Get into standard form, but do not strip emoji or case into canonical yet.
 	.replace(/^#/, '')        // No leading hash
 	.replace(':', '.')        // Replace colon with some other separator.
 	.replace(/\s+/g, ' ')     // Replace multiple spaces with a single space
 	.normalize('NFD');        // Standardize different ways of making accents into decomposed form - but do not remove them.
+    console.log('tag:', tag);
     Alert.closePopup();
     if (!tag) return;
     if (this.firstEmoji(tag)) { // Possibly REPLACE existing with the new tag.
       const canonical = canonicalTag(tag);
       const existingExtended = this.canonical2extended[canonical];
+      console.log({canonical, existingExtended});
       if (existingExtended !== tag) {
 	delete this.canonical2extended[canonical];
 	delete this.hashtags[existingExtended];
@@ -206,6 +321,7 @@ export const Hashtags = {
     }
     tag = this.add(tag); // Might exist, in which case tag might now be extended.
     this.setPublish(tag);
+    console.log('onchange with', this.hashtags);
     this.onchange({highlightPublish: true});
   },
   activeIndex: -1,
@@ -240,14 +356,6 @@ export const Hashtags = {
       li.id = `tag-option-${i}`;
       li.setAttribute('role', 'option');
       li.innerHTML = this.formatPubtag(highlight(item, matchString), item);
-      li.onclick = event => {
-	// pointerdown would fire before the text field's blur event,
-	// so we would not have to delay that. But then we would not
-	// scroll properly by touch drag.
-        event.preventDefault();
-	event.stopPropagation();
-        this.selectValue(item);
-      };
       listbox.appendChild(li);
     });
     setTimeout(() => { // Needs a tick.
@@ -255,67 +363,45 @@ export const Hashtags = {
       const max = Math.max(125, width);
       newtag.style.width = max + 'px'; // Set newtag so that input box makes room for floating lis
     }, 50);
-
     this.openSelector();
   },
-  sort(tags) { // Sort list of tags in place without regard to leding emoji
-    tags.sort((a, b) => stripLeadingEmoji(a).localeCompare(stripLeadingEmoji(b)));
-  },
-  resetSubscriberDisplay() { // Lay out all the hashtag chips display, including the input for adding new ones.
-    this.chipset.innerHTML = '';
-    const tags = this.getAll();
-
-    // Sort alphabetically, ignoring any leading emoji, as these have unexpected orderings.
-    this.sort(tags);
-    const reordered = {};
-    tags.forEach(tag => reordered[tag] = this.hashtags[tag]);
-    this.hashtags = reordered;
-
-    // Add a chip for each hashtag.
-    tags.forEach(label => { // Elements are displayed from the bottom up.
-      this.chipset.insertAdjacentHTML("afterbegin", this.chipHTML(label));
-    });
-    // IWBNI we just added handlers once to the chipset and relied on bubbling up, but there's something not working about that.
-    [...this.chipset.children].forEach(element => {
-      // Material design will update the displays. We have to handle the data changes.
-      element.addEventListener('remove', event => { // Clicking the button WITHIN the chip (which is the material design 'remove' event).
-	resetInactivityTimer();
-	const chip = event.target;
-	if (!chip.selected) { // 'x' icon. Not currently selected. Go ahead and remove it.
-	  showMessage(Int`Topic "${chip.label}" has been removed. You can add it back with "add topic".`, 'instructions');
-	  return this.remove(chip);
-	} // radio button icon. Chip is already selected. We are setting the publishing tag.
-	event.preventDefault();
-	showMessage(Int`Tapping the map will now produce an alert for the "${chip.label}" topic.`, 'instructions');
-	if (chip.classList.contains('pub')) return false;
-	return this.setPublish(chip.label);
-      });
-      clickTip(element, Int`Toggle whether alerts for this topic shown on the map. Separately, a radio button is shown when selected and sets this as the initial topic of the next alert you make, while an x button is shown when deselected and removes the topic.`, event => { // Toggle action on whole chip.
-	event.stopPropagation();
-	resetInactivityTimer();
-	const chip = event.target;
-	if (chip.selected) showMessage(Int`Turning "${chip.label}" alerts back on in the map.`, 'instructions');
-	else showMessage(Int`Turning off "${chip.label}" alerts in the map. You can delete the topic altogether with the X.`, 'instructions');
-	this.toggleChip(chip);
-	Alert.closePopup();
-	this.onchange({redisplaySubscribers: false});
-      });
-    });
-    this.chipset.insertAdjacentHTML("afterbegin",  // Chip to add a new hashtag.
-				    `<div class="combobox">
-  <md-filled-text-field class="newtag"
-     aria-expanded="false"
-     aria-controls="knownTagsListbox"
-     aria-autocomplete="list"
-     autocomplete="off"
-     tabindex="0"
-     placeholder="➕${Int`add topic`}"></md-filled-text-field>
-</div>`);
-    // I've tried also supplying a datalist, e.g., to supply the mobile keyboard completions, but
-    // I have not been able to get it to work.
+  initializeTopicInput() {
+    // Getting this correct is hard.
+    // We want all of the following to be true, on ALL BROWSERS, INCLUDING MOBILE BROWSERS:
+    // 0. The UL listbox starts as display:none.
+    // 1. When the INPUT newtag is clicked, the UL and it's LI become visible.
+    // 2. When the combined height of the LI elements exceeds that of the UL, they must be scrollable.
+    // 3. When a UL > LI is visible and clicked, an action is taken in the app, and the UL becomes display:none again.
+    // 4. When the INPUT loses focus by any other action, the UL becomes display:none again without the app action.
+    // 5. When a UL > LI is visible and clicked, the map underneath does NOT receive a click.
     const newtag = this.newtag = this.chipset.querySelector('.newtag');
     const listbox = this.listbox = document.querySelector('.combobox-listbox');
+    // Specifically mousedown, not pointerdown.
+    // Stop the dropdown from stealing focus -> stops premature blur
+    // and is also what keeps the UL on top for the WHOLE mousedown->mouseup->click
+    // sequence, which is what keeps us from click through to map.
+    listbox.onmousedown = event => event.preventDefault();
+    listbox.onclick = event => {
+      const li = event.target.closest('li');
+      console.log('listbox click', li);
+      if (!li) return;
+      this.selectValue(li.textContent);
+      this.closeSelector();       // safe here — this click's path is already resolved
+    };
+    newtag.oninput = () => this.renderSelector(newtag.value);
+    newtag.onchange = () => {
+      if (this.activeIndex < 0) {
+	this.acceptTag(); // As is, not from list.
+      } else {
+        this.selectValue(this.selectors[this.activeIndex]);
+      }
+    },
+    newtag.onblur = () => {
+      console.log('input blur');
+      this.closeSelector();
+    },
     clickTip(newtag, Int`Add a new topic for which the map should show any alerts.`, event => { // Focusing "add topic".
+      console.log('input click');
       event.stopPropagation();
       Alert.closePopup();
       resetInactivityTimer();
@@ -323,7 +409,7 @@ export const Hashtags = {
       if (navigator.maxTouchPoints <= 1) { // Only when no multi-touch. On-screen keyboard makes it shoot off the top.
 	showMessage(Int`Type a new topic name to see any alerts on the map with this topic.`, 'instructions');
       }
-    });
+    }),
     newtag.onkeydown = event => {
       if (listbox.classList.contains('hidden')) return;
       const optionCount = listbox.querySelectorAll('.combobox-option').length;
@@ -331,11 +417,7 @@ export const Hashtags = {
       switch (event.key) {
       case 'Enter':
 	event.preventDefault();
-        if (this.activeIndex < 0) {
-	  this.acceptTag(); // As is, not from list.
-        } else {
-          this.selectValue(this.selectors[this.activeIndex]);
-	}
+	newtag.onchange();
         break;
 
       case 'Escape':
@@ -362,63 +444,6 @@ export const Hashtags = {
 	this.activeIndex = -1;
       }
     };
-    newtag.oninput = () => this.renderSelector(newtag.value);
-    // When we click on the listbox, the browser will first blur newtag, and then
-    // we would not get the click! So here we delay closing a bit.
-    newtag.onblur = () => setTimeout(() => this.closeSelector(), 200);
-  },
-  remove(chip, redisplaySubscribers = false) { // Remove this topic, persistently.
-    delete this.hashtags[chip.label];
-    delete this.canonical2extended[canonicalTag(chip.label)];
-    this.onchange({redisplaySubscribers, resetSubscriptions: false});
-  },
-  toggleChip(chip) { // Switch whether the topic is or is not subscribed.
-    // Now selected => hashtags[label] becomes 'pub' (selected and the publisher) and clear old pub
-    // NOT now selected => hashtags[label] becomes false (through mechanism as follows)
-    //    but if publisher => set alt publisher if possible, else remember as backupPublisher
-    const label = chip.label;
-
-    // chip.selected is new state, after clicking.
-    if (chip.selected) return this.setPublish(label);  // Become publisher, clearing old publisher.
-
-    // Not selected:
-
-    // If we're not publisher, just clear. But don't go through getPublish, as that can have side effects.
-    if (this.hashtags[label] !== 'pub') return this.hashtags[label] = false;
-
-    // Also clear, but...
-    const subs = this.getSubscribe();
-    if (subs.length > 1) {  // Find and set alternative publisher if possible.
-      const pubIndex = subs.indexOf(label);
-      const index = (pubIndex + 1) % subs.length;
-      this.setPublish(subs[index]);
-    } else {
-      // No alternative available. Clear it, but remember for use by getPublish.
-      // It will stay .pub styled while toggled, until anything toggles on.
-      this.backupPublisher = label;
-    }
-    return this.hashtags[label] = false;
-  },
-  getChip(label) { // Handy for scripting, but not otherwise used in app.
-    for (const chip of this.chipset.children) {
-      if (chip.label === label) return chip;
-    }
-    return null;
-  },
-  setPublish(newTag) { // Make this topic be the one to be used when we next publish an alert.
-    // newTag will be marked for publishing (in this.hashtags and element style)
-    // Old publish tag (if any) will be set back to merely be subscribed (in same)
-    let oldTag = this.getPublish();
-    const backup = this.backupPublisher;
-    if (oldTag) this.hashtags[oldTag] = true; // true (instead of 'pub')
-    else if (backup) oldTag = backup;
-    this.backupPublisher = false;
-    this.hashtags[newTag] = 'pub';
-    for (const chip of this.chipset.children) {
-      if (chip.label === newTag) chip.classList.add('pub');
-      else if (chip.label === oldTag) chip.classList.remove('pub');
-    }
-    return oldTag;
   }
 };
 globalThis.Hashtags = Hashtags; // for debugging

package/public/javascripts/main.js

@@ -16,24 +16,16 @@ window.P2PWebNetwork = P2PWebNetwork;
 document.getElementById('appVersion').textContent = appVersion;
 document.getElementById('kernelVersion').textContent = P2PWebNetwork.kernelVersion;
 
-const RETRY_SECONDS = 90;
-const INACTIVITY_SECONDS = 5 * 60; // five minutes
-
 export function delay(ms = 800, value = undefined) { // Promise resolves to value after specified milliseconds.
   return new Promise(resolve => setTimeout(resolve, ms, value));
 }
 
-var inactivityTimer = null, reconnectCountdown, networkPromise = null;
-export { networkPromise };
-export async function resetInactivityTimer(clearMessage = true) { // if !network, initialize(false), else disconnect after INACTIVITY_SECONDSif not restarted
+export var networkPromise = null;
+export async function resetInactivityTimer(clearMessage = true) { // if !networkPromise, initialize(false).
+  // Historically, this also managed a timer that disconnected from network after a perdiod with no activity.
   //console.log('resetInactivityTimer, networkPromise:', networkPromise);
   if (clearMessage) showMessage('');
-  clearTimeout(inactivityTimer);
-  clearInterval(reconnectCountdown);
   if (!networkPromise) return initialize(false);
-  // return inactivityTimer = setTimeout(() => {
-  //   networkPromise?.then(contact => contact.disconnect());
-  // }, INACTIVITY_SECONDS * 1e3);
 }
 
 function asElement(elementOrQuerySelector) { // Return an element - treating a string arg as a query selector, or just return the arg.
@@ -81,7 +73,7 @@ export function notificationsAllowed() { // Combined result.
   return postServiceMessage && (Notification?.permission === 'granted') && notificationsRequested();
 }
 let notificationsPreviouslyAllowed = notificationsAllowed();
-function noteNotificationPermission(permission) { // Update permission controls/text/persistence.
+function noteNotificationPermission(permission = window.Notification?.permission) { // Update permission controls/text/persistence.
   // Called when checkbox is toggled, opening dialog, or if platform happens to tell us permission was externally changed (e.g., even if dialog already open).
   if (isWebView()) {
     showNotifications.checked = false;
@@ -121,7 +113,7 @@ function noteNotificationPermission(permission) { // Update permission controls/
   }
   if (showNotifications.checked === notificationsPreviouslyAllowed) return;
   notificationsPreviouslyAllowed = showNotifications.checked;
-  Alert.refreshPushSubscriptions();
+  Alert.updateSubscriptions('stickyChange');
 }
 clickTip(showNotifications.parentElement, Int`Enable local ${osName()} notifcations for map alerts, without going through any servers. Requires that the app be running.`, event => {
   resetInactivityTimer();
@@ -132,12 +124,9 @@ showNotifications.onchange = () => {
     localStorage.setItem('notificationsRequested', showNotifications.checked ? '1' : '');
     noteNotificationPermission('granted');
   } else {
-    window.Notification?.requestPermission().then(noteNotificationPermission());
+    window.Notification?.requestPermission().then(noteNotificationPermission);
   }
 };
-// Safari never fires 'change': https://webkit.org/b/259432
-navigator.permissions.query({ name: 'notifications'})
-  .then(status => status.onchange = () => noteNotificationPermission(window.Notification?.permission));
 
 export function closeAll() { // Close anything that might be open.
   closeAbout();
@@ -146,11 +135,17 @@ export function closeAll() { // Close anything that might be open.
   ['aboutContainer', 'updateContainer', 'correspondentContainer', 'qrContainer']
     .forEach(tag => document.getElementById(tag).classList.toggle('hidden', true));
 }
+let notificationPermissionInterval;
 export function openAbout(event) {
   openDisplay('aboutContainer', event);
-  noteNotificationPermission(window.Notification?.permission);
+  noteNotificationPermission();
+  // I'd rather do:
+  // navigator.permissions.query({ name: 'notifications'}).then(status => status.onchange = () => noteNotificationPermission());
+  // but Safari never fires 'change' - https://webkit.org/b/259432 - and it's simpler to the following for all rather than just for some.
+  notificationPermissionInterval = setInterval(noteNotificationPermission, 1e3);
 }
 export function closeAbout() {
+  clearInterval(notificationPermissionInterval);
   document.getElementById('aboutContainer').classList.toggle('hidden', true);
 }
 document.getElementById('scriptChooser').onchange = event => { // Run a script module chosen by the user. e.g., for testing.
@@ -192,35 +187,21 @@ document.querySelector('#correspondentContainer md-outlined-text-field').onclick
   event.stopPropagation();
 };
 
-clickTip('#share', Int`${osName()} share a link to this map and topics, with picture of map.`, event => {
-  event.stopPropagation();
+export function shareMap(event) {
+  event?.stopPropagation();
   share({text: "CivilDefense.io", url: getShareableURL().href });
-});
+}
+clickTip('#share', Int`${osName()} share a link to this map and topics, with picture of map.`, shareMap);
 
 clickTip('#recenterButton', Int`Recenter the map to where you are in the world.`, recenterMap);
 
-function checkOnline() { //true if online and visible, else cancel reconnectCountdown and inactivityTimeout, and show "offline"
+function checkOnline() { //true if online and visible, else cancel inactivityTimeout, and show "offline"
   //console.log('checkOnline', navigator.onLine && !document.hidden);
   if (navigator.onLine && !document.hidden) return true;
-  clearTimeout(inactivityTimer);
-  clearInterval(reconnectCountdown);
   if (!navigator.onLine) showMessage(Int`No network connection.`, 'error');
   else console.warn('hidden');
   return false;
 }
-function resetReconnectCountdown() { // if !checkOnline each second, show time remaining; at expiration initialize(false)
-  console.log('resetReconnectCountdown');
-  clearInterval(reconnectCountdown);
-  let counter = RETRY_SECONDS;
-  reconnectCountdown = setInterval(() => {
-    if (!checkOnline()) return null;
-    if (counter > 1) return showMessage(Int`Disconnected. Retrying in ` + counter-- + Int` seconds.`, 'error');
-    showMessage('');
-    console.log('countdown timer expired');
-    clearInterval(reconnectCountdown);
-    return initialize(false);
-  }, 1e3);
-}
 
 export let positionWatch;
 let subscribeOneShot;
@@ -265,7 +246,7 @@ function initializeGeolocation(subscribe = false) { // Arrange to constantly upd
     if (!subscribeOneShot) return;
     subscribeOneShot = false;
     resetInactivityTimer(false);
-    Alert.updateSubscriptions({oldKeys: {}}); // This was for a new node, so supply an empty oldSubscriptions.
+    Alert.updateSubscriptions('newNode');
   };
   if (!geolocation) {
     showMessage(Int`Geolocation not supported. Using default location.`, 'error', 'fail');
@@ -304,6 +285,7 @@ let checking = false; // For debouncing.
 // On startup, get last persisted portals list, else the portal we came in on.
 //fixme let portals = new Set(JSON.parse(localStorage.getItem('portals') || `["${new URL('/kdht', window.location).href}"]`));
 async function initialize(event) { // Ensure there is a network promise and map, and reset geolocation:
+  // Called with no event by startup and resetInactivityTimer, and with event by handlers for visibilitychange and online.
   // debounce
   // if !checkOnline(), return
   // set network to promise a new Contact, set ondisconnect, and connect.
@@ -314,6 +296,7 @@ async function initialize(event) { // Ensure there is a network promise and map,
   try {
     // Always close about display, because notification permissions and the like can change in the OS while we're hidden, and safari and mobile chrome don't issue change events for them.
     closeAbout();
+    if (event) await delay(); // In some cases (iOS PWA), we may get online or visibilitychange BEFORE the previous network close event. So give that a moment.
 
     // If networkPromise has not yet been set (or cleared by disconnect), we will be subscribing.
     const needsConnection = !networkPromise;
@@ -359,15 +342,6 @@ async function initialize(event) { // Ensure there is a network promise and map,
 	  // so as not to confuse other nodes that have given up on the unresponsive old GUID.
 	  showMessage(message, 'error');
 	});
-	//contact.connect(/*fixme ...portals*/)
-	  // .then(() => contact.subscribe({ // Add and persist any new portals we haven't heard about.
-	  //   eventName: 'sys:portals',
-	  //   handler: data => {
-	  //     const operation = data.payload ? 'add' : 'delete';
-	  //     const resultSet = portals[operation](data.subject);
-	  //     localStorage.setItem('portals', JSON.stringify([...resultSet]));
-	  //   }
-	  // }))
       });
     }
     await Agent.initialize();
@@ -384,6 +358,9 @@ window.addEventListener("appinstalled", async () => {
   // In such cases, we need to re-initialize stuff. We could go point by point, but for now, just hit everything.
   location.reload();
 });
+document.body.addEventListener('animationend', event => {
+  event.target.style.animation = '';
+});
 
 const titleLabel = document.querySelector('#titleLabel');
 titleLabel.textContent = Int([titleLabel.textContent]);

package/public/javascripts/map.js

@@ -32,9 +32,13 @@ export function showMessage(message, type = 'loading', errorObject) { // Show lo
   }
 }
 
+function  flashElement(selector) {
+  const element = document.querySelector(selector);
+  setTimeout(() => element.style.animation = 'pulse20border ease 2s 1', 100);
+}
+
 let yourLocation; // marker
 let lastLatitude, lastLongitude;
-
 export function updateLocation(lat, lng, zoom, positionLabel) { // initMap if necessary, and set our position.
   //console.log('updateLocation', lat, lng, map, yourLocation);
   // Can't call getCurrentPosition while watching. So set it here for use in recenterMap.
@@ -48,15 +52,16 @@ export function updateLocation(lat, lng, zoom, positionLabel) { // initMap if ne
     const params = url.searchParams;
     const tags = params.get('tags');
     const tagsArray = tags?.split(',') || [];
+    const highlight = params.get('highlight');
     tagsArray.forEach(tag => Hashtags.add(decodeURIComponent(tag)));
     Hashtags.onchange({resetSubscriptions: false}); // Too early to subscribe, but will be done during initialization.
     go({lat: params.get('lat'), lng: params.get('lng'), zoom: params.get('z'), alert: params.get('alert')});
     // We don't need the query parameters now. Get rid of them. They're annoying.
     if (params.size > 0) {
-      ['tags', 'lat', 'lng', 'z', 'alert'].forEach(key => params.delete(key));
+      ['tags', 'lat', 'lng', 'z', 'alert', 'highlight'].forEach(key => params.delete(key));
       history.replaceState(null, '', url);
     }
-
+    if (highlight) flashElement(highlight);
     return;
   }
   // Otherwise just update the yourLocation marker if appropriate (and not update zoom).

package/public/javascripts/p2pWebNetwork.js

@@ -79,7 +79,7 @@ export class P2PWebNetwork {
       const [pushId, ...topics] = JSON.parse(lastPushed);
       await Promise.all([
 	navigator.serviceWorker.ready
-	  .then(registration => registration.pushManager.getSubscription())
+	  .then(registration => registration.pushManager?.getSubscription())
 	  .then(subscription => subscription?.unsubscribe()),
 	...topics.map(topic => peer.unsub(topic, {pushId}))
       ]);

package/public/javascripts/protocol.js

@@ -95,15 +95,18 @@ if (dht < 1) {
 	socket.onmessage = event => {
 	  const [tag, ...rest] = JSON.parse(event.data);
 	  const subHandler = handlers[tag];
+	  if (subHandler) {
+	    const [ackTag, ...parameters] = rest;
+	    console.log('event', ackTag);
+	    socket.send(JSON.stringify([0, ackTag]));
+	    return subHandler(...parameters);
+	  }
 	  const inFlightResolver = inFlight[tag];
-
-	  // if ((!subHandler && !inFlightResolver) || // debug
-	  //     ((typeof(subHandler) !== 'function') && (typeof(inFlightResolver) !== 'function')))
-	  //   console.warn('no handler or request', {tag, rest, subHandler, inFlightResolver, handlers, inFlight});
-
-	  if (subHandler) return subHandler(...rest);
-	  delete inFlight[tag];
-	  return inFlightResolver?.(...rest);
+	  if (inFlightResolver) {
+	    delete inFlight[tag];
+	    return inFlightResolver(...rest);
+	  }
+	  return console.log('unexpected message', event.data);
 	};
 	socket.onopen = () => {
 	  if (socket.readyState !== WebSocket.OPEN) return; // You would think that can't happen, but...
@@ -123,7 +126,7 @@ if (dht < 1) {
 	disconnect = () => socket.close();
       } else {
 	disconnect = () => null;
-	operator.setReceiver((nodeTag, id, ...rest) => handlers[id](...rest));
+	operator.setSender((nodeTag, id, ...rest) => handlers[id](...rest));
 	resolve((methodName, ...rest) => operator[methodName](...rest)); // send()
       }
     });