Default sidebar and WIP PluginLoader

styles/PluginLoader.module.css

@@ -0,0 +1,77 @@
+.no-top-margin {
+  margin-top: 0;
+}
+
+.plugin-list {
+  list-style-type: none;
+  padding: 0;
+}
+
+.plugin-list li {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+}
+
+.plugin-error {
+  color: #ff0000;
+}
+
+.plugin-label {
+  margin-left: 8px;
+}
+
+/* From: https://stackoverflow.com/a/28074607/6620612 */
+.processing:after {
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: bottom;
+  -webkit-animation: ellipsis steps(4, end) 900ms infinite;
+  animation: ellipsis steps(4, end) 900ms infinite;
+  content: "\2026"; /* ascii code for the ellipsis character */
+  width: 0px;
+}
+
+@keyframes ellipsis {
+  to {
+    width: 1.25em;
+  }
+}
+
+@-webkit-keyframes ellipsis {
+  to {
+    width: 1.25em;
+  }
+}
+
+.plugins-txt-dialog {
+  top: 12px;
+  z-index: 4;
+  background-color: #fbefd5;
+  box-shadow: 0 0 1em black;
+  max-width: 400px;
+}
+
+.plugins-txt-dialog h3 {
+  margin-top: 0px;
+}
+
+.plugins-txt-dialog textarea {
+  width: 100%;
+  min-height: 100px;
+  resize: vertical;
+}
+
+.plugins-txt-dialog menu {
+  padding: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.drop-area {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+}

styles/SearchBar.module.css

@@ -11,6 +11,10 @@
   left: calc(50% - max(20vw, 125px));
 }
 
+.search-bar.search-bar-sidebar-open {
+  left: calc(50% + 75px);
+}
+
 .search-bar input {
   width: 150px;
   border-radius: 8px;

styles/Sidebar.module.css

@@ -9,8 +9,8 @@
   width: 300px;
   padding: 12px;
   padding-top: 24px;
-  border-right: 1px solid #222222;
   font-size: 0.875rem;
+  border: 1px solid #222222;
 }
 
 @media only screen and (max-width: 600px) {
@@ -29,13 +29,12 @@
   position: sticky;
   top: 0px;
   width: 100%;
+  display: flex;
+  justify-content: right;
 }
 
 .close {
-  position: absolute;
   display: block;
-  top: 0px;
-  right: 0px;
   font-size: 24px;
   border: none;
   background: none;
@@ -47,7 +46,114 @@
   color: #888888;
 }
 
+.hide {
+  position: fixed;
+  display: block;
+  font-size: 16px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  top: 46%;
+  left: 299px;
+  z-index: 4;
+  background-color: #fbefd5;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  border-top: 2px solid #222222;
+  border-bottom: 2px solid #222222;
+  border-right: 2px solid #222222;
+}
+
+.hide:after {
+  content: "🠈";
+}
+
+@media only screen and (max-width: 600px) {
+  .hide {
+    top: calc(55% - 22px);
+    left: 47%;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 0px;
+    border-top-left-radius: 8px;
+    padding-left: 12px;
+    padding-right: 12px;
+    border-bottom: none;
+    border-left: 2px solid #222222;
+  }
+
+  .hide:after {
+    content: "🠋";
+  }
+}
+
+.hide:hover {
+  color: #888888;
+}
+
+.open {
+  position: fixed;
+  display: block;
+  font-size: 16px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  top: 46%;
+  left: -1px;
+  z-index: 3;
+  background-color: #fbefd5;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  border-top: 2px solid #222222;
+  border-bottom: 2px solid #222222;
+  border-right: 2px solid #222222;
+}
+
+.open:after {
+  content: "🠊";
+}
+
+@media only screen and (max-width: 600px) {
+  .open {
+    top: initial;
+    bottom: 0;
+    left: 47%;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 0px;
+    border-top-left-radius: 8px;
+    padding-left: 12px;
+    padding-right: 12px;
+    border-bottom: none;
+    border-left: 2px solid #222222;
+  }
+
+  .open:after {
+    content: "🠉";
+  }
+}
+
 .cell-name-header {
   line-height: 1.75rem;
   word-wrap: break-word;
 }
+
+.default-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.sidebar-modified-date {
+  margin-top: auto;
+}
+
+.subheader {
+  margin-top: 0;
+}

styles/ToggleLayersControl.module.css

@@ -11,7 +11,8 @@
 }
 
 .heatmap-toggle span {
-  background-image: url(/img/heatmap.svg);
+  background: rgba(255, 255, 255, 0.2) url(/img/heatmap.svg);
+  background-blend-mode: lighten;
 }
 
 .grid-toggle {
@@ -19,7 +20,8 @@
 }
 
 .grid-toggle span {
-  background-image: url(/img/grid.svg);
+  background: rgba(255, 255, 255, 0.2) url(/img/grid.svg);
+  background-blend-mode: lighten;
 }
 
 .labels-toggle {
@@ -27,7 +29,8 @@
 }
 
 .labels-toggle span {
-  background-image: url(/img/labels.svg);
+  background: rgba(255, 255, 255, 0.2) url(/img/labels.svg);
+  background-blend-mode: lighten;
 }
 
 .toggle-off {