@yz-social/civildefense.io 4.5.8 → 4.5.16

package/public/javascripts/hashtags.js

@@ -5,6 +5,26 @@ import { showMessage } from './map.js';
 import { Alert } from './alert.js';
 import { resetInactivityTimer, clickTip } from './main.js';
 
+
+let allKnownHashtags = JSON.parse(localStorage.getItem('allKnownHashtags') || `[
+  "🍰 cake",
+  "🎸 classic rock",
+  "🎼 classical",
+  "🩷 community support",
+  "🤠 country",
+  "🎧 edm",
+  "🔥 fire",
+  "🌊 flood",
+  "🆘 help",
+  "🎤 hiphop",
+  "🧊 ice",
+  "🎷 jazz",
+  "🎙️ news",
+  "👁️ observer corps",
+  "🎵 pop",
+  "🧰 utility repairs"
+]`);
+
 // We subscribe to the cartesian product of the list of non-overlapping cells and all hashes.
 // We publish to just the first of these.
 export const Hashtags = {
@@ -25,8 +45,8 @@ export const Hashtags = {
   //     Later, we will allow a user to change what they see on their own device.)
   // 4. While an identicon is displayed, it is the same for all markers of this hashtag, regardless of whether the original posters
   //    were using the same emoji as each other.
-  hashtags: {},
-  canonical2extended: {},
+  hashtags: {}, // extended string => true/false/'pub'
+  canonical2extended: {}, // canonical string => extended string
   add(label, active = true, updateAlerts = true) { // Ensure label is a hashtag, initialized to active, and if existing, forcing it active.
     // Return our (possibly new) understanding of the extended hashtag.
     // Note that only startup-population of tags from persistence would ever specify active=false.
@@ -35,18 +55,24 @@ export const Hashtags = {
     // (We do not change the emoji of an existing extended.)
     const canonical = canonicalTag(label);                   // no emoji, lower case.
     const ourExtended = this.canonical2extended[canonical];  // our current version, if any
-    const oursHasEmoji = this.firstEmoji(ourExtended);
-    const extended = oursHasEmoji ? ourExtended : label;      // full emoji form to use
-    if (!oursHasEmoji) {
+    const replaceExisting = !this.firstEmoji(ourExtended);
+    const extended = replaceExisting ? label : ourExtended;      // full emoji form to use
+    if (replaceExisting) {
       active = this.hashtags[canonical] || active;
+      allKnownHashtags = allKnownHashtags.filter(tag => canonicalTag(tag) !== canonical);
       delete this.hashtags[ourExtended];
     }
     this.hashtags[extended] ||= active; // If it's 'pub', let it remain so.
     this.canonical2extended[canonical] = extended;
-    if (!oursHasEmoji) {
+    if (replaceExisting) {
       this.onchange({resetSubscriptions: false});
       if (updateAlerts) Alert.updateAlerts(canonical, extended);
     }
+    if (!allKnownHashtags.includes(extended)) {
+      allKnownHashtags.push(extended);
+      this.sort(allKnownHashtags);
+      localStorage.setItem('allKnownHashtags', JSON.stringify(allKnownHashtags));
+    }
     return extended;
   },
   getAll() { // List of all the user's hashtags.
@@ -59,7 +85,13 @@ export const Hashtags = {
     return this.hashtags[key] === 'pub';
   },
   getPublish() { // Return the one hashtag to which the user intends to publish.
-    return this.getAll().find(key => this.isPublish(key));
+    let pub = this.getAll().find(key => this.isPublish(key));
+    if (!pub) {
+      pub = this.lastRemainingPublisher || "🆘 help";
+      this.hashtags[pub] = 'pub';
+      this.onchange({highlightPublish: true});
+    }
+    return pub;
   },  
   firstEmoji(tag) { // First emoji that appears in string, else falsy.
     // I would prefer that it take just the first emoji, but that doesn't grab double-wide ones
@@ -74,9 +106,9 @@ export const Hashtags = {
   formatAlert(tag) { // HTML (possibly text) to represent tag as a marker on map.
     return this.firstEmoji(tag) || this.identicon(tag);
   },
-  formatPubtag(tag) { // HTML (possibly text) to represent tag with defaulted icon.
+  formatPubtag(tag, identiconData = tag) { // HTML (possibly text) to represent tag with defaulted icon.
     const emoji = this.firstEmoji(tag);
-    return emoji ? tag : this.identicon(tag) + tag;
+    return emoji ? tag : this.identicon(identiconData) + tag;
   },
   onchange({redisplaySubscribers = true, highlightPublish = false, resetSubscriptions = true} = {}) { // Update and persist internal data, and update visuals.
     // If redisplaySubscribers, the presence/order may have changed.
@@ -97,12 +129,136 @@ export const Hashtags = {
         <md-icon-button slot="remove-trailing-icon" title="fixme help"><md-icon class="material-icons"></md-icon></md-icon-button>
       </md-filter-chip>`;
   },
+
+  // Topic entry, with autocomplete.
+  // - When you click the input box, it shows all the topics we know about.
+  //   This includes topics you already have available, because you might not realize you have them.
+  // - As you type, it filters out entries that do not match:
+  //   - If you happen to start with an emoji and have not yet entered a separating space, it matches against those that use the same emoji.
+  //   - Otherwise, it matches text, ignoring the emoji, and it highlights the substring that matches.
+  // - up/down arrow or tab ==> highlights from among those shown and copies its text to the input box, but not yet accepting it.
+  //    - But if tab is used when something was already highlighted, then it is accepted (like enter).
+  // - click (regardless of highlighting) ==> what you click on is used.
+  // - enter:
+  //   - something highlighted ==> what is highlighted is used.
+  //   - otherwise => exact contents of input box is used.
+  closeSelector() { // Close the autocomplete tag selector
+    const { listbox, newtag } = this;
+    listbox.classList.toggle('hidden', true);
+    newtag.setAttribute('aria-expanded', 'false');
+    newtag.removeAttribute('aria-activedescendant');
+    newtag.value = '';
+    this.activeIndex = -1;
+  },
+  openSelector() { // Open the autocomplete tag selector
+    const { listbox, newtag } = this;
+    listbox.classList.toggle('hidden', false);
+    newtag?.setAttribute('aria-expanded', 'true');
+  },
+  setActive(index) { // Highlight the index among selectors, and copy it's value to newtag.
+    const { listbox, newtag } = this;
+    this.activeIndex = index;
+    listbox.querySelectorAll('.combobox-option').forEach((option, optionIndex) => {
+      const active = index === optionIndex;
+      option.classList.toggle('active', active);
+      if (active) {
+	option.scrollIntoView({ block: 'nearest' });
+	newtag.setAttribute('aria-activedescendant', option.id);
+      } else {
+	newtag.removeAttribute('aria-activedescendant');
+      }
+    });
+    newtag.value = this.selectors[this.activeIndex];
+  },
+  selectValue(value) { // Accept the specified string.
+    this.newtag.value = value;
+    this.acceptTag();
+  },
+  acceptTag() { // Add the new hashtag.
+    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(/\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.
+    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];
+      if (existingExtended !== tag) {
+	delete this.canonical2extended[canonical];
+	delete this.hashtags[existingExtended];
+      }
+    }
+    tag = this.add(tag); // Might exist, in which case tag might now be extended.
+    this.setPublish(tag);
+    this.onchange({highlightPublish: true});
+  },
+  activeIndex: -1,
+  selectors: [],
+  renderSelector(query) { // Render the autocompletion of query string.
+    const { listbox, newtag } = this;
+    function escapeRegExp(str) {
+      return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+    function highlight(text, query) {
+      if (!query) return text;
+      const re = new RegExp(`(${escapeRegExp(query)})`, 'ig');
+      return text.replace(re, '<mark>$1</mark>');
+    }
+
+    // TODO: create the elements only when allKnownHashtags changes. Then hide/highlight here.
+    listbox.innerHTML = '';
+    let matchString = canonicalTag(query);
+    this.selectors = allKnownHashtags.filter(item =>
+      // Subtle: Starting with emoji will match all/only those tags that start with the same tag. Cool.
+      // But because of the way canonicalTag() works, once you type a space after an emoji, we match
+      // against only the non-emoji, non-space text.
+      item.toLowerCase().includes(matchString)
+    );
+
+    if (matchString) {
+      const li = document.createElement('li');
+      li.className = 'combobox-empty combobox-option';
+      li.textContent = `Create tag "${query}"`;
+      li.onpointerdown = event => {
+	event.preventDefault();
+	event.stopPropagation();
+	this.acceptTag();
+      };
+      listbox.appendChild(li);
+    }
+    this.selectors.forEach((item, i) => {
+      const li = document.createElement('li');
+      li.className = 'combobox-option';
+      li.id = `tag-option-${i}`;
+      li.setAttribute('role', 'option');
+      li.innerHTML = this.formatPubtag(highlight(item, matchString), item);
+      li.onpointerdown = event => {
+        // pointerdown (not click) so it fires before the field's blur event
+        event.preventDefault();
+	event.stopPropagation();
+        this.selectValue(item);
+      };
+      listbox.appendChild(li);
+    });
+    setTimeout(() => { // Needs a tick.
+      const width = listbox.clientWidth;
+      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.
-    tags.sort((a, b) => stripLeadingEmoji(a).localeCompare(stripLeadingEmoji(b)));
+    this.sort(tags);
     const reordered = {};
     tags.forEach(tag => reordered[tag] = this.hashtags[tag]);
     this.hashtags = reordered;
@@ -134,29 +290,71 @@ export const Hashtags = {
 	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();
-	if (chip.selected) this.setPublish(chip.label);
 	this.onchange({redisplaySubscribers: false});
       });
     });
     this.chipset.insertAdjacentHTML("afterbegin",  // Chip to add a new hashtag.
-				    `<md-filled-text-field class="newtag" placeholder="➕${Int`add topic`}"></md-filled-text-field>`);
-    clickTip(this.chipset.firstChild, Int`Add a new topic for which the map should show any alerts.`, event => { // Focusing "add topic".
+				    `<div class="combobox">
+  <ul class="combobox-listbox hidden" id="knownTagsListbox" role="listbox"></ul>
+  <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.
+    const newtag = this.newtag = this.chipset.querySelector('.newtag');
+    const listbox = this.listbox = this.chipset.querySelector('.combobox-listbox');
+    clickTip(newtag, Int`Add a new topic for which the map should show any alerts.`, event => { // Focusing "add topic".
       event.stopPropagation();
       Alert.closePopup();
-      showMessage(Int`Type a new topic name to see any alerts on the map with this topic.`, 'instructions');
+      this.renderSelector('');
+      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');
+      }
     });
-    this.chipset.firstChild.onchange = event => { // Add the new hashtag.
-      resetInactivityTimer();
-      let tag = event.target.value.trim()  // Get into standard form, but do not strip emoji or case into canonical yet.
-	  .replace(/^#/, '')       // No leading hash
-	  .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.
-      if (!tag) return;
-      Alert.closePopup();
-      tag = this.add(tag); // Might exist, in which case tag might now be extended.
-      this.setPublish(tag);
-      this.onchange({highlightPublish: true});
+    newtag.onkeydown = event => {
+      if (listbox.classList.contains('hidden')) return;
+      const optionCount = listbox.querySelectorAll('.combobox-option').length;
+
+      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]);
+	}
+        break;
+
+      case 'Escape':
+	event.preventDefault();
+        this.closeSelector();
+        break;
+
+      case 'ArrowDown':
+	event.preventDefault();
+        if (optionCount > 0) this.setActive((this.activeIndex + 1) % optionCount);
+        break;
+
+      case 'ArrowUp':
+	event.preventDefault();
+        if (optionCount > 0) this.setActive((this.activeIndex - 1 + optionCount) % optionCount);
+        break;
+
+      case 'Tab':
+	event.preventDefault();
+	if (this.activeIndex < 0) this.setActive(0);
+	else this.selectValue(this.selectors[this.activeIndex]); // Otherwise select what is active.
+        break;
+      }
     };
+    newtag.oninput = () => this.renderSelector(newtag.value);
+    newtag.onblur = () => this.closeSelector();
+    //newtag.onchange = () => this.acceptTag();
   },
   remove(chip, redisplaySubscribers = false) { // Remove this topic, persistently.
     delete this.hashtags[chip.label];
@@ -164,20 +362,28 @@ export const Hashtags = {
     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 lastActivePublisher
     const label = chip.label;
-    const isPub = label === this.getPublish();
-    let altPub;
-    if (isPub) { // Find the next alternative, if possible.
-      let subs = this.getSubscribe();
-      if (subs.length > 1) {
-	let pubIndex = subs.indexOf(label);
-	let index = (pubIndex + 1) % subs.length;
-	altPub = subs[index];
-      }
+
+    // chip.selected is new state, after clicking.
+    if (chip.selected) return this.setPublish(label);  // Become publisher, clearing old publisher.
+
+    // 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;
+
+    // Find an alternative publisher if possible.
+    let subs = this.getSubscribe();
+    if (subs.length > 1) {
+      let pubIndex = subs.indexOf(label);
+      let index = (pubIndex + 1) % subs.length;
+      return this.setPublish(subs[index], false);
     }
-    if (altPub) this.setPublish(altPub);
-    else if (isPub && !chip.selected) { chip.selected = true; return; } // Don't allow deselecting the only pub tag.
-    this.hashtags[label] = chip.selected;
+
+    // No alternative. Clear it, but remember for use by getPublish.
+    this.lastRemainingPublisher = label;
+    return this.hashtags[label] = false;
   },
   getChip(label) { // Handy for scripting, but not otherwise used in app.
     for (const chip of this.chipset.children) {
@@ -185,9 +391,9 @@ export const Hashtags = {
     }
     return null;
   },
-  setPublish(newTag) { // Make this topic be the one to be used when we next publish an alert.
+  setPublish(newTag, isOldTagNowSubscribed = true) { // Make this topic be the one to be used when we next publish an alert.
     const oldTag = this.getPublish();
-    this.hashtags[oldTag] = true;
+    if (oldTag) this.hashtags[oldTag] = isOldTagNowSubscribed;
     this.hashtags[newTag] = 'pub';
     for (const chip of this.chipset.children) {
       if (chip.label === oldTag) chip.classList.remove('pub');
@@ -196,11 +402,9 @@ export const Hashtags = {
     return oldTag;
   }
 };
+globalThis.Hashtags = Hashtags; // for debugging
 
 // Populate hashtags data and display.
 // First the persisted/default data:
-const persisted = JSON.parse(localStorage.getItem('hashtags') ||
-			     `{"🍰 ${Int`cake`}": true, "🔥 ${Int`fire`}": true, "🌊 ${Int`flood`}": true, "🆘 ${Int`help`}": "pub", "🧊 ${Int`ice`}": true}`);
-			     //`{"🎙️ news":"pub", "🎸 classic rock":true, "🎷 jazz":true, "🎵 pop":true, "🎤 hiphop":true, "🎧 edm":true, "🤠 country":true, "🎼 classical":true}`);			     
-			     //`{"🍰 ${Int`cake`}": true, "🔥 ${Int`fire`}": true, "🌊 ${Int`flood`}": true, "🆘 ${Int`help`}": "pub", "🧊 ${Int`ice`}": true, "🎙️ news":true, "🎸 classic rock":true, "🎷 jazz":true, "🎵 pop":true, "🎤 hiphop":true, "🎧 edm":true, "🤠 country":true, "🎼 classical":true}`);
+const persisted = JSON.parse(localStorage.getItem('hashtags') || `{"🍰 ${Int`cake`}": true, "🆘 ${Int`help`}": "pub"}`);
 Object.entries(persisted).forEach(([tag, active]) => Hashtags.add(tag, active, false));

package/public/javascripts/main.js

@@ -8,6 +8,7 @@ import { getPointInCell } from './s2.js';
 import { Alert, getShareableURL, share } from './alert.js';
 import { map, showMessage, updateLocation, recenterMap } from './map.js';
 import './service-manager.js'; // Comment this out and kill service-workers for reload-to-get-latest behavior during development.
+window.P2PWebNetwork = P2PWebNetwork;
 
 document.getElementById('appVersion').textContent = appVersion;
 document.getElementById('kernelVersion').textContent = P2PWebNetwork.kernelVersion;
@@ -123,6 +124,9 @@ export function openAbout(event) {
   openDisplay('aboutContainer', event);
   noteNotificationPermission(window.Notification?.permission);
 }
+export function closeAbout() {
+  document.getElementById('aboutContainer').classList.toggle('hidden', true);
+}
 clickTip('#aboutButton', Int`Information about this app, and options to change notifications or how you appear to others.`, event => { // open about
   Alert.closePopup();
   openAbout(event);
@@ -243,7 +247,7 @@ function initializeGeolocation(subscribe = false) { // Arrange to constantly upd
     if (!subscribeOneShot) return;
     subscribeOneShot = false;
     resetInactivityTimer(false);
-    Alert.updateSubscriptions([]); // This was for a new node, so supply an empty oldSubscriptions.
+    Alert.updateSubscriptions({oldKeys: {}}); // This was for a new node, so supply an empty oldSubscriptions.
   };
   if (!geolocation) {
     showMessage(Int`Geolocation not supported. Using default location.`, 'error', 'fail');
@@ -291,7 +295,7 @@ async function initialize(event) { // Ensure there is a network promise and map,
   checking = true;
   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.
-    document.getElementById('aboutContainer').classList.toggle('hidden', true);
+    closeAbout();
 
     // If networkPromise has not yet been set (or cleared by disconnect), we will be subscribing.
     const needsConnection = !networkPromise;

package/public/javascripts/map.js

@@ -155,6 +155,8 @@ export function initMap(lat, lng, zoom, positionLabel) { // Set up appropriate z
     Alert.openPopup(await Alert.publish({lat, lng}));
     Agent.current.persistPublicMetadata(P2PWebNetwork.regionCode(lat, lng));
   });
-  tooltip('.leaflet-control-zoom-in', Int`Zoom in to show more detail in the map.`);
-  tooltip('.leaflet-control-zoom-out', Int`Zoom out to show a larger area in the map.`);
+  if (document.querySelector('.leaflet-control-zoom')) { // Not present in mobile
+    tooltip('.leaflet-control-zoom-in', Int`Zoom in to show more detail in the map.`);
+    tooltip('.leaflet-control-zoom-out', Int`Zoom out to show a larger area in the map.`);
+  }
 }

package/public/javascripts/p2pWebNetwork.js

@@ -1,8 +1,7 @@
 import { v4 as uuidv4 } from 'uuid';
-import { createNodeIdentity, createAuthorIdentity, geoCellId, geoCellCenter, WIRE_VERSION, KERNEL_VERSION } from '@axona/protocol';
+import { connect, createNodeIdentity, createAuthorIdentity, geoCellId, geoCellCenter, WIRE_VERSION, KERNEL_VERSION } from '@axona/protocol';
 import { stringToBytes, bytesToString, publishChunkedBytes, receiveChunkedBytes } from '@axona/protocol/std';
-import { connect } from '@axona/protocol/connect.js';
-globalThis.RTCPeerConnection ||= await import('node-datachannel/polyfill').then(ndc => ndc.RTCPeerConnection); // To support @axona/protocol < 4.26
+
 if (!Uint8Array.prototype.toBase64) { // NodeJS < 24
   Object.defineProperty(Uint8Array.prototype, 'toBase64', {
     value: function toBase64() { return Buffer.from(this.buffer, this.byteOffset, this.byteLength).toString('base64'); },
@@ -50,7 +49,7 @@ export class P2PWebNetwork {
     });
     //peer.onLog('debug', (...rest) => network.debug('DEBUG', ...rest));
     //peer.onLog('info', (...rest) => network.debug('INFO', ...rest));
-    peer.onLog('warn', (...rest) => network.info('WARNING', ...rest));
+    peer.onLog('warn', (string, data, ...rest) => (data?.why === 'not-seated') || network.info('WARNING', string, data, ...rest)); //peer.onLog('warn', (...rest) => network.info('WARNING', ...rest));
     peer.onLog('error', (...rest) => network.info('ERROR', ...rest));
     const { peers, ms } = status;
     network.info(`Connected ${peers} connections through ${bridgeUrl} in ${ms.toLocaleString()} ms.`);
@@ -58,10 +57,11 @@ export class P2PWebNetwork {
     return network;
   }
   
-  async disconnect() { // Politely close network connection.
+  async disconnect(debugLogger = this.debugLogger) { // Politely close network connection.
     const health = this.peer.health();
     await this.disconnector();
-    this.info(`disconnected with ${health.peers.length} connections and ${health.axonRoles.length} axons.`);
+    if (debugLogger) debugLogger(health);
+    else this.shortHealth(health);
     this.resetStatePromises();
   }
   async replicateStorage() { // Let the network know that we might go away without further notice.
@@ -99,7 +99,8 @@ export class P2PWebNetwork {
       img.src = URL.createObjectURL(file);
     });
   }
-  static  async downsampledBlob({blob, outputType = 'image/jpeg', maxDimension = 1024}) { // ONLY IN BROWSERS!
+  static  async downsampledBlob({blob, maxDimension = 1024, inputType = blob.type,
+				 outputType = inputType.startsWith('image/') ? 'image/jpeg' : inputType}) { // ONLY IN BROWSERS!
     // Promise a reasonably sized Blob (or File) for a given Blob of type image/*, else blob unchanged.
     if (!blob.type.startsWith('image/')) return blob;
 
@@ -175,6 +176,7 @@ export class P2PWebNetwork {
     await this.attachment;
     const topic = {region, name: eventName};
     if (owner) topic.owner = owner;
+    this.debug('subscribed', {topic, handler:!!handler});
     if (handler) {
       const callback = async envelope => {
 	const {message, deleted, msgId, signerPubkey, topic, ts} = envelope;
@@ -191,14 +193,14 @@ export class P2PWebNetwork {
     }
   }
   static currentPublishIdentity = null;
-  async publish({eventName, region, owner, signWith = this.constructor.currentPublishIdentity, issuedTime = Date.now(), killTag, payload, ...rest}) {
+  async publish({eventName, region, owner, signWith = this.constructor.currentPublishIdentity, issuedTime = Date.now(), subject, killTag = subject, payload, ...rest}) {
     // Publish data to subscribers of eventName.
     if (killTag && payload) throw new Error(`Specify killTag (${killTag}) or payload ($(JSON.stringify(payload)}), but not both.`);
     await this.attachment; // Get connected.
     const topic = {region, name: eventName};
     if (owner) topic.owner = owner;
     const options = {signWith};
-    this.debug('published', {topic, killTag, payload, issuedTime, rest, signWith});
+    this.debug('published', {topic, killTag, payload, issuedTime, rest, signWith:signWith.authorId});
     if (payload) return await this.peer.pub(topic, {issuedTime, payload, ...rest}, options);
     // The next would not normally happen, but until since:'latest' works, we need a way to send a null payload and have the handler delete the entry.
     if (!killTag) return await this.peer.pub(topic, {issuedTime, payload, ...rest}, options);
@@ -233,12 +235,31 @@ export class P2PWebNetwork {
     // E.g., a precise location gets anonymized to containing top-level cell center.
     return this.regionCenter(this.regionCode(lat, lng));
   }
-  // Todo: Integrate with AxonaPeer's complex logging.
   debug(...rest) { // Add debug logspam.
     this.debugLogger?.(this.nodeIdentity.id, ...rest);
   }
   info(...rest) { // Add debug logspam.
     (this.infoLogger || this.debugLogger)?.(this.nodeIdentity.id, ...rest);
   }
+  static short(tag) {
+    return tag.slice(0, 8);
+  }
+  shortHealth(health = this.peer.health()) { // Info-report a short form of health.
+    const roots = health.axonRoles.filter(r => r.isRoot);
+    this.info(`disconnected with connections ${health.peers.map(P2PWebNetwork.short)}\nand ${roots.length ? `roots ${roots.map(r => P2PWebNetwork.short(r.topic))}.` : 'no roots.'}`);
+  }
+  inRegionConnections(health = this.peer.health()) {
+    const region = this.nodeIdentity.id.slice(0, 2);
+    return health.peers.filter(tag => tag.startsWith(region));
+  }
+  ice(tags = this.peer.health().peers) {
+    const ice = {};
+    for (const nodeTag of tags) {
+      const meshTag = this.transport.webrtc.meshIdFor(BigInt('0x'+nodeTag));
+      const peer = this.transport.mesh._peers.get(meshTag);
+      ice[P2PWebNetwork.short(nodeTag)] = peer ? `${peer.localCand} => ${peer.remoteCand}` : 'no webrtc connection';
+    }
+    return ice;
+  }
 }
 export default P2PWebNetwork;

package/public/javascripts/s2.js

@@ -1,5 +1,7 @@
 import { s2 } from 's2js';
 const { cellid, LatLng, Point, Cell, Cap, RegionCoverer } = s2;
+import { cellHex } from './versions.js';
+const { BigInt } = globalThis;
 
 // s2 defines non-overlapping cells that completely cover the globe, at several different levels of cell-size.
 // Each cell, at each level, has its own unique id, which we use a pub/sub key.
@@ -16,7 +18,7 @@ const MAX_MAP_LEVEL = 17; // The max level that findCoverCellsByCenterAndRadius
 
 const EARTH_RADIUS_METERS = 6371e3;
 
-export function getPointInCell(cellId) { // answer [lat, lng] in degrees.
+export function getPointInCell(cellId) { // answer [lat, lng] in degrees from a BigInt
   let {lat, lng} = s2.cellid.latLng(cellId);
   const degrees = 180 / Math.PI;
   lat *= degrees;
@@ -24,6 +26,10 @@ export function getPointInCell(cellId) { // answer [lat, lng] in degrees.
   return [lat, lng];
 }
 
+export function getSubdivision(hexString) {
+  return cellid.children(BigInt('0x' + hexString)).map(childCell => cellHex(childCell));
+}
+
 // Return a list of the cell ids that contain the point.
 export function getContainingCells(lat, lng) {
   const userLatLng = LatLng.fromDegrees(lat, lng);
@@ -73,5 +79,3 @@ export function findCoverCellsByCenterAndRadius(lat, lng, interestRadiusMeters)
   const r = Cap.fromCenterAngle(point, interestRadiusMeters / EARTH_RADIUS_METERS);
   return rc.covering(r);
 }
-
-

package/public/javascripts/service-manager.js

@@ -1,8 +1,8 @@
 const { Request, Response, URL, localStorage, BroadcastChannel } = globalThis;
 import { appVersion } from './versions.js';
-import { resetInactivityTimer, clickTip } from './main.js';
+import { resetInactivityTimer, clickTip, closeAbout } from './main.js';
 import { openDisplay } from './display.js';
-import { go } from './alert.js';
+import { go, getShareableURL } from './alert.js';
 import { Int } from './translations.js';
 
 /*
@@ -73,12 +73,13 @@ function newVersionAvailable(newVersion) {
 }
 async function installUpdate(event, newVersion) {
   event.stopPropagation();
-  event.target.textContent = "Installing..."; // In case there is some delay, tell the user what we're trying to do. Will be cleared with reload.
+  event.target.textContent = Int`Installing...`; // In case there is some delay, tell the user what we're trying to do. Will be cleared with reload.
   event.target.disabled = true;
   await caches.delete(appVersion); // Must be before cacheSource, or we'll just recache the same files!
   await cacheSource(newVersion);
+  closeAbout();
   // Reload, but convince all browsers to re-"fetch" (through the new service worker that is now running).
-  const url = new URL(location.href);
+  const url = getShareableURL(null, []);
   url.searchParams.set('v', newVersion); // Preserving any other searchParams.
   // For any other tabs in THIS browser:
   new BroadcastChannel('site_control').postMessage({method: 'reload', params: url.href});

package/public/javascripts/translations.js

@@ -52,6 +52,7 @@ const translations = {
   ['does not support notifications on WebViews embedded in other programs. Please use CivilDefense.io in native']: {es: "no admite notificaciones en WebViews integrados en otros programas. Por favor, utilice CivilDefense.io en el navegador nativo"},
   ['Apple only supports mobile notifications for web pages that have been']: {es: "Apple solo admite notificaciones móviles para páginas web que hayan sido"},
   ['installed to the home screen']: {es: "instaladoi en la pantalla de inicio"},
+  ['Installing...']: {es: "Instalando..."},
   ['Enable notifications']: {es: "Habilitar notificaciones"},
   ['Allow notifications']: {es: "Permitir notificaciones"},
   ['Permissions can be re-enabled through the']: {es: "Los permisos se pueden volver a habilitar a través de"},

package/public/javascripts/versions.js

@@ -3,10 +3,11 @@ export const appVersion = pkg.version; // Overall semver of app. Used in display
 export const dataVersion = globalThis.process?.env.EVENT_VERSION || appVersion.split('.')[0];  // Compatability differentiator used below.
 
 export function stripLeadingEmoji(string) { // Return string without any leading emoji (which might be of varying
-    // length) followed by an optional emoji break character and any whitespace.
-    // {Extended_Pictographic} is often recommended instead of {Emoji} as the latter includes numbers
-    // and symbols. However, the former misses, e.g., the flag emojis.
-    return string.replace(/^\p{Emoji}*\uFE0F?\s*/u, '') || string;
+  // length) followed by an optional emoji break character and any whitespace.
+  // {Extended_Pictographic} is often recommended instead of {Emoji} as the latter includes numbers
+  // and symbols. However, the former misses, e.g., the flag emojis.
+  return string.replace(/^\p{Emoji}*\uFE0F?\s*/u, '') ||
+    (string.endsWith(' ') ? '' : string); // All emoji counts, but if ending with space, it is the start of an emoji + \s + tag for which just the tag counts.
 };
 export function canonicalTag(tag) { // A string representing tag, without the (leading) emoji if any.
   return stripLeadingEmoji(tag).toLowerCase();
@@ -18,6 +19,16 @@ export function agentPersistKey(metadataType, agentTag) { // A label for looking
 export function agentTopic(metadataType, agentTag) { // Return topic name for public info about agent specified by tag.
   return `public:${dataVersion}:${agentPersistKey(metadataType, agentTag)}`;
 }
+export function cellHex(cellid) { // Convert cellid BigInt to properly padded hex.
+  return cellid.toString(16).padStart(16, '0');
+}
 export function alertTopic(cellid, tag) { // Return topic name for public info about specified tag in cellid.
-  return `civildefense.io:${dataVersion}:${cellid}:${canonicalTag(tag)}`;
+  return `civildefense.io:${dataVersion}:${cellHex(cellid)}:${canonicalTag(tag)}`;
+}
+export function topicCell(topicName) { // Return the cell that is baked in to the topic.
+  // Note that canonicalTag(tag) may contain a colon, but dataVersion must not.
+  return topicName.match(/civildefense.io:[^:]+:([a-z0-9]+):/)[1];
+}
+export function topicRegion(topicName) { // Return the region that is baked in to the topic.
+  return '0x' + topicCell(topicName).slice(0, 2);
 }