@yz-social/civildefense.io 4.5.9 → 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,15 +55,16 @@ 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);
     }
@@ -64,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
@@ -102,6 +129,19 @@ 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);
@@ -115,7 +155,7 @@ export const Hashtags = {
     listbox.classList.toggle('hidden', false);
     newtag?.setAttribute('aria-expanded', 'true');
   },
-  setActive(index) {
+  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) => {
@@ -128,19 +168,28 @@ export const Hashtags = {
 	newtag.removeAttribute('aria-activedescendant');
       }
     });
+    newtag.value = this.selectors[this.activeIndex];
   },
-  selectValue(value) {
+  selectValue(value) { // Accept the specified string.
     this.newtag.value = value;
     this.acceptTag();
   },
   acceptTag() { // Add the new hashtag.
     resetInactivityTimer();
-    let tag = this.newtag?.value.trim()  // Get into standard form, but do not strip emoji or case into canonical yet.
+    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});
@@ -160,13 +209,17 @@ export const Hashtags = {
 
     // TODO: create the elements only when allKnownHashtags changes. Then hide/highlight here.
     listbox.innerHTML = '';
+    let matchString = canonicalTag(query);
     this.selectors = allKnownHashtags.filter(item =>
-      item.toLowerCase().includes(query.toLowerCase())
+      // 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 (this.selectors.length === 0) {
+    if (matchString) {
       const li = document.createElement('li');
-      li.className = 'combobox-empty';
+      li.className = 'combobox-empty combobox-option';
       li.textContent = `Create tag "${query}"`;
       li.onpointerdown = event => {
 	event.preventDefault();
@@ -174,34 +227,28 @@ export const Hashtags = {
 	this.acceptTag();
       };
       listbox.appendChild(li);
-    } else {
-      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, query), 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.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();
-    if (this.selectors.length === 1) {
-	this.setActive(0);
-      } else {
-	this.setActive(-1);
-      }
   },
   sort(tags) { // Sort list of tags in place without regard to leding emoji
     tags.sort((a, b) => stripLeadingEmoji(a).localeCompare(stripLeadingEmoji(b)));
@@ -243,7 +290,6 @@ 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});
       });
     });
@@ -275,20 +321,10 @@ export const Hashtags = {
       const optionCount = listbox.querySelectorAll('.combobox-option').length;
 
       switch (event.key) {
-      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 'Enter':
 	event.preventDefault();
         if (this.activeIndex < 0) {
-	  this.acceptTag();
+	  this.acceptTag(); // As is, not from list.
         } else {
           this.selectValue(this.selectors[this.activeIndex]);
 	}
@@ -299,16 +335,26 @@ export const Hashtags = {
         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); // If nothing active, make the first line active.
+	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();
+    //newtag.onchange = () => this.acceptTag();
   },
   remove(chip, redisplaySubscribers = false) { // Remove this topic, persistently.
     delete this.hashtags[chip.label];
@@ -316,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) {
@@ -337,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');
@@ -348,26 +402,9 @@ export const Hashtags = {
     return oldTag;
   }
 };
+globalThis.Hashtags = Hashtags; // for debugging
 
 // Populate hashtags data and display.
 // First the persisted/default data:
-const 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"
-]`);
 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/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);
 }

package/public/service-worker.js

@@ -1,6 +1,6 @@
 const { Request, Response, URL, clients} = self;
 // Little point in trying to automatically pull this through package.json, as we need a byte change in THIS file to trigger a new worker.
-const serviceVersion = '4.5.9';
+const serviceVersion = '4.5.16';
 
 const cacheList = [ // The files we need.
   "/",
@@ -172,13 +172,13 @@ async function cacheSource(version, event) { // Cache source in the given versio
   await Promise.all([
     // These are referenced within material web, but missing. Turns out we don't need them,
     // but let's cache empty responses to keep the console cleaner.
-    "https://esm.run/npm/lit@3.3.1/+esm",
+    "https://esm.run/npm/lit@3.3.3/+esm",
     "https://esm.run/npm/tslib@2.8.1/+esm",
-    "https://esm.run/npm/lit@3.3.1/static-html.js/+esm",
-    "https://esm.run/npm/lit@3.3.1/decorators.js/+esm",
-    "https://esm.run/npm/lit@3.3.1/directives/style-map.js/+esm",
-    "https://esm.run/npm/lit@3.3.1/directives/class-map.js/+esm",
-    "https://esm.run/npm/lit@3.3.1/directives/when.js/+esm",
+    "https://esm.run/npm/lit@3.3.3/static-html.js/+esm",
+    "https://esm.run/npm/lit@3.3.3/decorators.js/+esm",
+    "https://esm.run/npm/lit@3.3.3/directives/style-map.js/+esm",
+    "https://esm.run/npm/lit@3.3.3/directives/class-map.js/+esm",
+    "https://esm.run/npm/lit@3.3.3/directives/when.js/+esm",
     "https://esm.run/npm/lit@3.3.1/directives/live.js/+esm",
   ].map(url => cache.put(new Request(url),
                          new Response("", {headers: { "Content-Type": "text/javascript" }}))));

package/public/stylesheets/style.css

@@ -323,6 +323,7 @@ md-filter-chip minidenticon-svg {
 md-outlined-icon-button minidenticon-svg, md-outlined-icon-button img {
     height: 40px;
     width: 40px;
+    object-fit: cover;
     border-radius: 12px;
 }
 .alert span minidenticon-svg {
@@ -388,9 +389,9 @@ md-menu {
 md-outlined-button {
     padding: 10px;
 }
-.attribution > div:last-child > span {
-    text-wrap: nowrap;
-}
+/* .attribution > div:last-child > span { */
+/*     text-wrap: nowrap; */
+/* } */
 md-menu-item minidenticon-svg {
     display: inline-block;
     height: 20px;
@@ -424,7 +425,7 @@ md-menu-item minidenticon-svg {
 .attribution-metadata {
     display: flex;
     flex-direction: column;
-    align-items: end;
+    /* align-items: end; */
 }
 .alert {
     font-family: roboto;