Fix sidebar interactivity and other changes

summary:
- dragging sidebar resizer works
- toggling in/out by clicking resizer works
- persist sidebar preferences to local storage (closes #1479)
- fix "viewport jumps after toggling sidebar" (closes #1468)
  (though the resizing is still jerky as it fights with map draws and I'd like to improve that.)
- a few places rename systems to use shortnames (e.g. photosystem -> photos)
- we don't need utilFastMouse anymore

todo:
- I left the sidebar resizer red - need to style it nicer
- Remove that "Inspect" button?  It's unnecessary with a proper resizer
- ui.resize doesn't pan the map completely correctly to account for the resize
  I divided pan amount by half, expecting that the map will grow on both sides (from center) now
  But this still isn't totally right - the math needs to be based on main-map dims not sidebar dims.
  (for fun, this effect of weird pan is worse when the map is rotated)

css/80_app.css

@@ -23,6 +23,7 @@
     "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
     sans-serif;
   color: #333;
+  background-color: #333;
 
   touch-action: none;
   -ms-user-select: none;
@@ -797,7 +798,6 @@ a.hide-toggle {
   display: flex;
   flex: 0 0 400px;
   flex-flow: column nowrap;
-  min-width: 240px;
 
   z-index: 10;
   background: #f6f6f6;
@@ -806,13 +806,22 @@ a.hide-toggle {
 }
 
 .sidebar-resizer {
-  flex: 0 0 10px;
+  flex: 0 0 15px;
 
+  z-index: 10;
   cursor: col-resize;
   user-select: none;
   background-color: #f00;
 }
 
+/* collapsing; the sidebar has been set to a width that is too small,
+  set some opacity and hide the child contents */
+.sidebar.collapsing { opacity: 0.5 }
+.sidebar.collapsing > * { display: none; }
+
+/* collapsed; the sidebar is hidden completely */
+.sidebar.collapsed { display: none; }
+
 /*.sidebar-resizer {*/
 /*    position: absolute;*/
 /*    top: 0;*/
@@ -980,7 +989,7 @@ a.hide-toggle {
 }
 
 .feature-list-item .label .icon {
-    opacity: .5;
+    opacity: 0.5;
 }
 .feature-list-item .close {
     padding: 10px;

modules/core/UiSystem.js

@@ -1,5 +1,5 @@
 import { select as d3_select } from 'd3-selection';
-import { vecAdd } from '@rapid-sdk/math';
+import { vecAdd, vecRotate } from '@rapid-sdk/math';
 
 import { AbstractSystem } from './AbstractSystem.js';
 import { utilDetect } from '../util/detect.js';
@@ -486,6 +486,9 @@ export class UiSystem extends AbstractSystem {
 
     // When adjusting the sidebar width, pan the map so it stays centered on the same location.
     if (offset !== undefined) {
+      //const t = context.viewport.transform;              // Add rotation - because `map.pan()` will try to cancel
+      //const [dx, dy] = vecRotate(offset, t.r, [0, 0]);   // it out, and we want the pan applied in screen coords.
+      //map.pan([dx, dy]);
       map.pan(offset);
     }
 

modules/services/OsmService.js

@@ -931,9 +931,9 @@ export class OsmService extends AbstractSystem {
     if (cache.loaded.has(tile.id) || cache.inflight[tile.id]) return;
 
     // Exit if this tile covers a blocked region (all corners are blocked)
-    const locationSystem = this.context.systems.locations;
+    const locations = this.context.systems.locations;
     const corners = tile.wgs84Extent.polygon().slice(0, 4);
-    const tileBlocked = corners.every(loc => locationSystem.blocksAt(loc).length);
+    const tileBlocked = corners.every(loc => locations.blocksAt(loc).length);
     if (tileBlocked) {
       cache.loaded.add(tile.id);   // don't try again
       return;
@@ -1032,9 +1032,9 @@ export class OsmService extends AbstractSystem {
       if (cache.loaded.has(tile.id) || cache.inflight[tile.id]) continue;
 
       // Skip if this tile covers a blocked region (all corners are blocked)
-      const locationSystem = this.context.systems.locations;
+      const locations = this.context.systems.locations;
       const corners = tile.wgs84Extent.polygon().slice(0, 4);
-      const tileBlocked = corners.every(loc => locationSystem.blocksAt(loc).length);
+      const tileBlocked = corners.every(loc => locations.blocksAt(loc).length);
       if (tileBlocked) {
         cache.loaded.add(tile.id);   // don't try again
         continue;

modules/services/StreetsideService.js

@@ -769,9 +769,9 @@ export class StreetsideService extends AbstractSystem {
     this._connectSequences();
 
     if (selectBubbleID) {
-      const photoSystem = this.context.systems.photos;
-      photoSystem.selectPhoto();                              // deselect
-      photoSystem.selectPhoto('streetside', selectBubbleID);  // reselect
+      const photos = this.context.systems.photos;
+      photos.selectPhoto();                              // deselect
+      photos.selectPhoto('streetside', selectBubbleID);  // reselect
     }
 
     this.context.deferredRedraw();