@yz-social/civildefense.io 4.5.7 → 4.5.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yz-social/civildefense.io",
   "description": "Browser app to safely share live sightings on a map.",
-  "version": "4.5.7",
+  "version": "4.5.9",
   "keywords": [
     "map",
     "browser",
@@ -17,7 +17,7 @@
     ".": "./index.js"
   },
   "dependencies": {
-    "@axona/protocol": "github:axona-net/axona-protocol#semver:^4.29.0",
+    "@axona/protocol": "github:axona-net/axona-protocol#semver:^4.48.0",
     "cors": "^2.8.6",
     "express": "^4.22.1",
     "leaflet": "^1.9.4",

package/public/about/en.html

@@ -128,7 +128,7 @@
   <!-- <hr class="rule"> -->
 
   <h1>The Bigger Picture</h1>
-  <p>The Civil Defense software was created by a group of experienced system developers, running on the <a href="https://github.com/axona-net/axona-protocol" target="yz.other" rel="noopener">Axona network</a>. Both are free and open source.</p>
+  <p>The Civil Defense runs on the <a href="https://github.com/axona-net/axona-protocol" target="yz.other" rel="noopener">Axona network</a>. Both are free and open source.</p>
   <p>Axona is a modern descendant of the old <a href="https://en.wikipedia.org/wiki/Peer-to-peer" target="yz.other" rel="noopener">peer-to-peer networks</a> such as <a href="https://en.wikipedia.org/wiki/Napster">Napster</a>. It has a unique self-healing routing mechanism that uses neuron learning techniques to find the best way to distribute alerts. It is analogous to <a href="https://en.wikipedia.org/wiki/Tor_(network)" target="yz.other" rel="noopener">TOR</a> (The Onion Router), but designed from the ground up to run in mobile and desktop browsers.</p>
   <p>We are also developing a comprehensive quantum-ready cryptography system that will add private-groups for Civil Defense and any software on the network. We believe there are many applications where developers, users, and the public all benefit from open software and secure, decentralized networks — without app stores, servers, or data centers. Beyond Civil Defense, we are also developing large-scale <a href="https://en.wikipedia.org/wiki/Distributed_computing" target="yz.other" rel="noopener">multiuser collaboration</a> and <a href="https://poverty-action.org/inclusive-instant-payment-systems-evidence-based-approach-design-impact" target="yz.other" rel="noopener">Inclusive Instant Payment Systems</a>.</p>
 

package/public/about/es.html

@@ -113,7 +113,7 @@
   </ul>
 
   <h1>El Panorama General</h1>
-  <p>El software de Defensa Civil fue creado por un grupo de desarrolladores de sistemas experimentados, que se ejecuta en el <a href="https://github.com/axona-net/axona-protocol" target="yz.other" rel="noopener">red Axona</a>. Ambos son gratuitos y de código abierto.</p>
+  <p>La Defensa Civil opera en la <a href="https://github.com/axona-net/axona-protocol" target="yz.other" rel="noopener">red Axona</a>. Ambos son gratuitos y de código abierto.</p>
   <p>Axona es un descendiente moderno de las antiguas <a href="https://en.wikipedia.org/wiki/Peer-to-peer" target="yz.other" rel="noopener">redes entre pares</a> como <a href="https://en.wikipedia.org/wiki/Napster">Napster</a>. Tiene un mecanismo único de enrutamiento autocurativo que utiliza técnicas de aprendizaje neuronal para encontrar la mejor manera de distribuir alertas. Es análogo a <a href="https://en.wikipedia.org/wiki/Tor_(network)" target="yz.other" rel="noopener">TOR</a> (The Onion Router), pero diseñado desde cero para funcionar en navegadores móviles y de escritorio.</p>
   <p>También estamos desarrollando un sistema integral de criptografía preparado para la era cuántica que añadirá grupos privados para Defensa Civil y cualquier software en la red. Creemos que hay muchas aplicaciones en las que los desarrolladores, los usuarios y el público en general se benefician del software abierto y las redes seguras y descentralizadas, sin tiendas de aplicaciones, servidores ni centros de datos. Más allá de Defensa Civil, también estamos desarrollando <a href="https://en.wikipedia.org/wiki/Distributed_computing" target="yz.other" rel="noopener">colaboración multiusuario a gran escala</a> y <a href="https://poverty-action.org/inclusive-instant-payment-systems-evidence-based-approach-design-impact" target="yz.other" rel="noopener">Sistemas de Pago Instantáneo Inclusivos</a>.</p>
 

package/public/index.html

@@ -26,7 +26,7 @@
           "@material/web/": "https://esm.run/@material/web/",
           "s2js": "./s2js/s2js.esm.js",
 	  "bigfloat": "./bigfloat/esm/index.js",
-	  "leaflet": "./leaflet/leaflet-src.esm.js",
+      "leaflet": "./leaflet/leaflet-src.esm.js",
 	  "minidenticons": "./minidenticons/minidenticons.min.js",
 	  "@axona/protocol": "./axona-protocol/src/index.js",
           "@axona/protocol/std": "./axona-protocol/std/index.js",
@@ -45,123 +45,123 @@
   </head>
   <body>
     <section data-nosnippet>
-    <div id="mapCapture">
-      <div id="map"></div>
-      <img src="images/civil-defense-240.png" alt="civildefense" class="about-image">
-    </div>
-
-    <div id="subPopoverControls"> <!-- Our control, that appear within the map and the marker popups in stack order -->
+      <div id="mapCapture">
+	<div id="map"></div>
+	<img src="images/civil-defense-240.png" alt="civildefense" class="about-image">
+      </div>
 
-      <button id="aboutButton" class="about-button">
-        <img src="images/civil-defense-240.png" alt="civildefense" class="about-image"></img>
-      </button>
+      <div id="subPopoverControls"> <!-- Our control, that appear within the map and the marker popups in stack order -->
 
-      <div class="button-container">
-	<button id="qrButton">
-          <img src="images/qr-scan.svg" alt="qr code" class="button-image">
-	</button>
-	<button id="share">
-          <img src="images/share.svg" alt="share" class="button-image">
+	<button id="aboutButton" class="about-button">
+          <img src="images/civil-defense-240.png" alt="civildefense" class="about-image"></img>
 	</button>
-	<button id="recenterButton">
-          <img src="images/recenter.svg" alt="recenter on position" class="button-image">
-	</button>
-      </div>
 
-      <md-chip-set class="watching-hashtags"></md-chip-set>
-    </div>
+	<div class="button-container">
+	  <button id="qrButton">
+            <img src="images/qr-scan.svg" alt="qr code" class="button-image">
+	  </button>
+	  <button id="share">
+            <img src="images/share.svg" alt="share" class="button-image">
+	  </button>
+	  <button id="recenterButton">
+            <img src="images/recenter.svg" alt="recenter on position" class="button-image">
+	  </button>
+	</div>
 
-    <div id="info" class="info-banner loading"></div>
+	<md-chip-set class="watching-hashtags"></md-chip-set>
+      </div>
 
-    <div id="qrContainer" class="hidden">
-      <div class="display-content"></div>
-    </div>
+      <div id="info" class="info-banner loading"></div>
 
-    <div id="aboutContainer" class="hidden">
-      <div class="display-content">
-        <h1>Civil Defense</h1>
-        <ul>
-          <li id="aboutReport"></li>
-          <li id="aboutShared"></li>
-          <li id="aboutFade"></li>
-        </ul>
-        <p> <a id="learnMore" href="about/index.html" target="yz.sidebar">Learn More</a> </p>
-        <p>
-          <span id="aboutAnyone1"></span>
-          <a id="aboutAnyone2" href="https://github.com/YZ-social/Yz.social" target="yz.sidebar"></a>
-          <span id="aboutAnyone3"></span>
-        </p>
-	<hr>
-	<div>
-	  <label>
-	    <md-checkbox id="showNotifications" touch-target="wrapper"></md-checkbox>
-	    <span id="showNotificationsLabel"></span>
-	  </label>
-	</div>
-	<div class="handle-avatar">
-	  <md-outlined-text-field id="myHandle" placeholder="anonymous"></md-outlined-text-field>
-	  <md-outlined-icon-button id="myAvatar"></md-outlined-icon-button>
-	</div>
-	<hr>
-        <div class="source-updates">
-	  <md-elevated-button id="checkForUpdates"></md-elevated-button>
-          <md-elevated-button id="downloadUpdates" class="hidden"></md-elevated-button>
-          <span id="updateStatus"></span>
-        </div>
-	<p><small>
-	    <label for="scriptChooser"> <span id="version">Version</span></label>
-	    <span id="appVersion"></span>,
-	    kernel: <span id="kernelVersion"></span>.
-	  </small>
-	  <small><a id="wipe" href="#"></a></small></p>
-	<input id="scriptChooser" type="file" accept="text/javascript"></input>
+      <div id="qrContainer" class="hidden">
+	<div class="display-content"></div>
       </div>
-    </div>
 
-    <div id="correspondentContainer" class="hidden">
-      <div class="display-content">
-	<div class="private-label">
-	  <div class="describe">
-	    <span id="describePrivate1"></span>
-	    <span class="handle"></span>
-	    <md-icon class="avatar"></md-icon>
-	    <span id="describePrivate2"></span>
+      <div id="aboutContainer" class="hidden">
+	<div class="display-content">
+          <h1>Civil Defense</h1>
+          <ul>
+            <li id="aboutReport"></li>
+            <li id="aboutShared"></li>
+            <li id="aboutFade"></li>
+          </ul>
+          <p> <a id="learnMore" href="about/index.html" target="yz.sidebar">Learn More</a> </p>
+          <p>
+            <span id="aboutAnyone1"></span>
+            <a id="aboutAnyone2" href="https://github.com/YZ-social/Yz.social" target="yz.sidebar"></a>
+            <span id="aboutAnyone3"></span>
+          </p>
+	  <hr>
+	  <div>
+	    <label>
+	      <md-checkbox id="showNotifications" touch-target="wrapper"></md-checkbox>
+	      <span id="showNotificationsLabel"></span>
+	    </label>
 	  </div>
-	  <md-outlined-text-field></md-outlined-text-field>
-	  <md-outlined-icon-button></md-outlined-icon-button>
-	</div>
-	<div id="pickLabels"></div>
-	<div class="public-label">
-	  <div id="describePublic" class="describe"></div>
-	  <md-outlined-button></md-outlined-button>
-	  <md-outlined-icon-button></md-outlined-icon-button>
-	</div>
-	<div class="system-label">
-	  <div id="describeSystem" class="describe"></div>
-	  <md-outlined-button></md-outlined-button>
-	  <md-outlined-icon-button></md-outlined-icon-button>
+	  <div class="handle-avatar">
+	    <md-outlined-text-field id="myHandle" placeholder="anonymous"></md-outlined-text-field>
+	    <md-outlined-icon-button id="myAvatar"></md-outlined-icon-button>
+	  </div>
+	  <hr>
+          <div class="source-updates">
+	    <md-elevated-button id="checkForUpdates"></md-elevated-button>
+            <md-elevated-button id="downloadUpdates" class="hidden"></md-elevated-button>
+            <span id="updateStatus"></span>
+          </div>
+	  <p><small>
+	      <label for="scriptChooser"> <span id="version">Version</span></label>
+	      <span id="appVersion"></span>,
+	      kernel: <span id="kernelVersion"></span>.
+	    </small>
+	    <small><a id="wipe" href="#"></a></small></p>
+	  <input id="scriptChooser" type="file" accept="text/javascript"></input>
 	</div>
-	<input type="file" accept="image/*"></input>
-	<div>
-	  <md-text-button id="correspondentCancel">Cancel</md-text-button>
-	  <md-text-button id="correspondentOK">OK</md-text-button>
+      </div>
+
+      <div id="correspondentContainer" class="hidden">
+	<div class="display-content">
+	  <div class="private-label">
+	    <div class="describe">
+	      <span id="describePrivate1"></span>
+	      <span class="handle"></span>
+	      <md-icon class="avatar"></md-icon>
+	      <span id="describePrivate2"></span>
+	    </div>
+	    <md-outlined-text-field></md-outlined-text-field>
+	    <md-outlined-icon-button></md-outlined-icon-button>
+	  </div>
+	  <div id="pickLabels"></div>
+	  <div class="public-label">
+	    <div id="describePublic" class="describe"></div>
+	    <md-outlined-button></md-outlined-button>
+	    <md-outlined-icon-button></md-outlined-icon-button>
+	  </div>
+	  <div class="system-label">
+	    <div id="describeSystem" class="describe"></div>
+	    <md-outlined-button></md-outlined-button>
+	    <md-outlined-icon-button></md-outlined-icon-button>
+	  </div>
+	  <input type="file" accept="image/*"></input>
+	  <div>
+	    <md-text-button id="correspondentCancel">Cancel</md-text-button>
+	    <md-text-button id="correspondentOK">OK</md-text-button>
+	  </div>
 	</div>
       </div>
-    </div>
 
-    <div id="updateContainer" class="hidden">
-      <div class="display-content">
-        <h1 id="newVersionHeader">New version available</h1>
-	<p id="updateNowQuestion"></p>
-	<p id="updateReload"></p>
-	<p id="updateDefer"></p>
-	<md-elevated-button id="downloadUpdates2"></md-elevated-button>
-	<md-elevated-button id="downloadDefer"></md-elevated-button>
+      <div id="updateContainer" class="hidden">
+	<div class="display-content">
+          <h1 id="newVersionHeader">New version available</h1>
+	  <p id="updateNowQuestion"></p>
+	  <p id="updateReload"></p>
+	  <p id="updateDefer"></p>
+	  <md-elevated-button id="downloadUpdates2"></md-elevated-button>
+	  <md-elevated-button id="downloadDefer"></md-elevated-button>
+	</div>
       </div>
-    </div>
 
-    <md-menu positioning="popover" id="popoverMenu"></md-menu>
-    <script type="module" src="javascripts/main.js"></script>
+      <md-menu positioning="popover" id="popoverMenu"></md-menu>
     </section>
+    <script type="module" src="javascripts/main.js"></script>
   </body>
 </html>

package/public/javascripts/alert.js

@@ -42,7 +42,7 @@ export async function share(properties) {  // Invoke platform share API on prope
   if (!properties.files) {
     Alert.closePopup();
     await delay(500); // Allow popup time to close. It doesn't render well because of the web component style sheets.
-    const target = document.getElementById('mapCapture');
+    const target = document.getElementById('mapCapture'); // For capturing a screen shot.
     const icon = target.lastElementChild;
     const subPopoverControls = document.getElementById('subPopoverControls');
     const leafletControls = document.querySelector('.leaflet-control-container');
@@ -85,7 +85,7 @@ class AlertReply extends Reply {
     // a promise to reassemble the attachment, have formatReply create a findable placeholder to later replace with the A element
     // and contents, and then have ensureContent() arrange in its delayed followup to replace the placeholder when the promise
     // resolves.
-    super.initialize(properties);
+    await super.initialize(properties);
     const {container, agent, issuedTime, payload} = properties;
     const {file:attachmentTopic} = payload;
     if (attachmentTopic) {
@@ -127,7 +127,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
       const newCells = findCoverCellsByCenterAndPoint(center.lat, center.lng, northEast.lat, northEast.lng); // array of cell IDs (BigInts)
       region = P2PWebNetwork.regionCode(center.lat, center.lng);
       newKeys = newCells.flatMap(cell => Hashtags.getSubscribe().map(hash => alertTopic(cell, hash)));
-      Agent.current.trackPublicChanges(region);
+      Agent.current?.trackPublicChanges(region);
       // Record a zoomed-out cell id in case next session does not have geolocation services.
       let level9Cell = getContainingCells(center.lat, center.lng)[9];
       if (level9Cell !== lastLevel9Cell) localStorage.setItem('level9Cell', lastLevel9Cell = level9Cell);
@@ -221,6 +221,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
   static noMessage = Int`No additional information.`;
   static closePopup() { // Close any open popup.
     map.closePopup();
+    Hashtags.closeSelector();
   }
   static openPopup(alertTag) { // Open the marker specified by subject.
     const wrapper = this.getItem(alertTag);
@@ -235,7 +236,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
     }
     this.marker.openPopup();
   }
-  static makeIcon(hashtag) { // Return a Leaflet icon
+  static makeIcon(hashtag) { // Return a Leaflet icon. TODO: are these cacheable and reusable?
     return L.divIcon({
       html: `<div class="alert-commented"></div><div class="alert-pin">${Hashtags.formatAlert(hashtag)}</div>`,
       iconSize: [40, 40],
@@ -472,12 +473,12 @@ export class Alert extends Conversation { // A wrapper around L.marker
   }
   deleteReply(replyElement) {
     resetInactivityTimer();
-    const {lat, lng} = this;
+    const {lat, lng, subject} = this;
     const region = P2PWebNetwork.regionCode(lat, lng);
     const killTag = replyElement.dataset.subject;
     networkPromise.then(async contact => {
       // We won't be here unless we are the signer.
-      await contact.publish({eventName: this.subject, region, killTag, payload: null});
+      await contact.publish({eventName: subject, region, killTag, payload: null});
       // IFF there's an attachment AND we're given msgIds by receiveChunkedBytes, then delete the attachment.
       const reply = this.getItem(killTag);
       const {attachmentTopic, msgIds = []} = reply?.payload || {};

package/public/javascripts/conversation.js

@@ -26,13 +26,14 @@ export class Tagged { // Maintains cached existence within a (possibly instance-
   destroy() { // Subclasses extend to remove UI.
     // Subclass extensions of ensure may expect this answer falsy, indicating that an item was removed.
     // NOTE: Does not destroy replies, as these may have been published by others.
-    return null; 
+    this.container.removeItem(this.tag);
+    return null;
   }
 
   static async ensureIn(data, container, kind = container.itemKind) { // update() or initialize() item and remember what those answer. (Falsy is deleted).
     const {tag, payload, ...rest} = data;
     let item = container.getItem(tag);
-    if (!payload) return item && container.removeItem(tag)?.destroy();
+    if (!payload) return item?.destroy();
     if (item) item = await item.update(data);
     else item = await (new kind().initialize({...data, container}));
 
@@ -59,8 +60,10 @@ export class Conversation extends Tagged { // A conversation with replies.
     return item;
   }
   removeItem(tag) { // Remove reply from cache.
-    const { items } = this;    
-    return items.splice(items.findIndex(reply => reply.tag === tag), 1)?.[0];
+    const { items } = this;
+    const index = items.findIndex(reply => reply.tag === tag);
+    if (index < 0) return null;
+    return items.splice(index, 1)?.[0];
   }
   get itemKind() { // Answer class of reply items.
     return Reply;
@@ -76,7 +79,7 @@ export class Conversation extends Tagged { // A conversation with replies.
     if (!Object.hasOwn(this, '_conversations')) this._conversations = {};
     return this._conversations;
   }
-  static items() {
+  static get items() {
     return Object.values(this.conversations);
   }
   static getItem(tag) { // Get conversation if known, else falsy.

package/public/javascripts/hashtags.js

@@ -47,6 +47,11 @@ export const Hashtags = {
       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.
@@ -74,9 +79,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 +102,116 @@ 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>`;
   },
+  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) {
+    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');
+      }
+    });
+  },
+  selectValue(value) {
+    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.
+	.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;
+    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 = '';
+    this.selectors = allKnownHashtags.filter(item =>
+      item.toLowerCase().includes(query.toLowerCase())
+    );
+
+    if (this.selectors.length === 0) {
+      const li = document.createElement('li');
+      li.className = 'combobox-empty';
+      li.textContent = `Create tag "${query}"`;
+      li.onpointerdown = event => {
+	event.preventDefault();
+	event.stopPropagation();
+	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.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)));
+  },
   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;
@@ -139,24 +248,67 @@ export const Hashtags = {
       });
     });
     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 '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();
+        } else {
+          this.selectValue(this.selectors[this.activeIndex]);
+	}
+        break;
+
+      case 'Escape':
+	event.preventDefault();
+        this.closeSelector();
+        break;
+
+      case 'Tab':
+	event.preventDefault();
+	if (this.activeIndex < 0) this.setActive(0); // If nothing active, make the first line active.
+	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];
@@ -199,8 +351,23 @@ export const Hashtags = {
 
 // 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 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/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.`);
+  }
 }