my eye

Make color mode and dictation icons appear only when JS is enabled

Committed d2df1c

--- a/canopy/static/enliven.js
+++ b/canopy/static/enliven.js

   const navDiv = document.querySelector("body > nav div")
   navDiv.innerHTML = `<button id=join>Join Room</button>` + navDiv.innerHTML
 
+  search.innerHTML =
+    `<svg id=colormode title="switch dark/light color mode" viewBox="-0.5 0 25 25"
+      fill=none xmlns=http://www.w3.org/2000/svg>
+      <path d="
+        M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2
+        12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z
+        M12,20.5 L12,3.5 C16.6944204,3.5 20.5,7.30557963 20.5,12
+        C20.5,16.6944204 16.6944204,20.5 12,20.5 Z"></path>
+    </svg>
+    <svg id=listen title=dictation viewBox="-0.5 0 25 25"
+      fill=none xmlns=http://www.w3.org/2000/svg></svg>`
+    + search.innerHTML
+
   microphoneStatus('off')
   colormode.onmouseup = toggleColorMode
   listen.onmouseup = initDictation

--- a/canopy/templates/template.html
+++ b/canopy/templates/template.html

 </div>
 <div class=search>
     <form id=search action=/search>
-    <svg id=colormode title="switch dark/light color mode" viewBox="-0.5 0 25 25"
-      fill=none xmlns=http://www.w3.org/2000/svg>
-      <path d="
-        M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2
-        12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z
-        M12,20.5 L12,3.5 C16.6944204,3.5 20.5,7.30557963 20.5,12
-        C20.5,16.6944204 16.6944204,20.5 12,20.5 Z"></path>
-    </svg>
-    <svg id=listen title=dictation viewBox="-0.5 0 25 25"
-      fill=none xmlns=http://www.w3.org/2000/svg></svg>
     $ query = resource.query if "query" in resource else ""
     <input name=q type=text value="$query"><br>
     <small class=partial></small> <a href=/guide>Guide</a>