improved frontend, started csv upload endpoint

ui/app/components/Home.js

@@ -1,20 +1,20 @@
 import "./LocationList.js"
+import "./Sidebar.js"
+import "./MainPanel.js"
 
 class Home extends Shadow {
     render() {
         ZStack(() => {
-            p("BLOCKCATCHER")
-                .x(2, em).y(1, em)
-                .fontSize(1.2, em)
-                .fontFamily("Arial")
-
-            LocationList()
+            HStack(() => {
+                Sidebar()
+                MainPanel()
+            })
         })
-        .backgroundColor("#aebdff")
+        .backgroundColor("rgb(146, 160, 219)")
         .display("block")
         .width(100, vw).height(100, vh)
-        .color("#60759f")
+        .color("#203051ff")
     }
 }
 
-registerShadow(Home)
+register(Home)

ui/app/components/LocationList.js

@@ -14,13 +14,15 @@ class LocationList extends Shadow {
                 .gap(1, em)
             })
         })
+        .gap(0.5, em)
+        .paddingLeft(5, em)
+        .paddingTop(2, em)
         .onEvent("update-location", (e) => {
             console.log("location received: ", e.detail)
             this.list.unshift(e.detail)
             this.rerender()
         })
-        .x(2, em).y(5, em)
     }
 }
 
-window.registerShadow(LocationList)
+window.register(LocationList)

ui/app/components/MainPanel.js

@@ -0,0 +1,25 @@
+class MainPanel extends Shadow {
+    render() {
+        ZStack(() => {
+            input("Search", "70vw")
+                .marginLeft(5, em)
+                .marginTop(2, em)
+                .paddingVertical(0.5, em)
+                .paddingHorizontal(1, em)
+                .border("none")
+                .background("rgb(146, 160, 219)")
+                .outline("none")
+
+            switch(window.location.pathname) {
+                case "/":
+                    LocationList()
+                    break;
+            }
+        })
+        .width(100, "%")
+        .height(100, vh)
+        .backgroundColor("rgb(174, 189, 255)")
+    }
+}
+
+register(MainPanel)

ui/app/components/Sidebar.js

@@ -0,0 +1,61 @@
+class Sidebar extends Shadow {
+    render() {
+        VStack(() => {
+            HStack(() => {
+                img("./_/icons/runner.svg", "40px", "40px")
+                p("Blockcatcher")
+                    .fontSize(1.2, em)
+                    .fontFamily("Inknut Antiqua")
+                    .marginTop(0.5, em)
+            })
+            .marginTop(2, em)
+            .paddingLeft(6, em)
+            .width(100, "%")
+            .borderBottom("2px solid rgb(100 115 177)")
+
+            button("Walkers")
+                .background("rgb(100 115 177)")
+                .paddingVertical(0.5, em)
+                .border("none")
+                .borderRadius(6, px)
+                .marginTop(3, em)
+                .width(80, "%")
+
+            button("Voters")
+                .background("transparent")
+                .paddingVertical(0.5, em)
+                .border("none")
+                .borderRadius(6, px)
+                .marginTop(1, em)
+                .width(80, "%")
+                .onHover(function (hovering) {
+                    if(hovering) {
+                        this.style.outline = "1px solid rgb(100 115 177)"
+                    } else {
+                        this.style.outline = ""
+                    }
+                })
+
+            button("Data")
+                .background("transparent")
+                .paddingVertical(0.5, em)
+                .border("none")
+                .borderRadius(6, px)
+                .marginTop(1, em)
+                .width(80, "%")
+                .onHover(function (hovering) {
+                    if(hovering) {
+                        this.style.outline = "1px solid rgb(100 115 177)"
+                    } else {
+                        this.style.outline = ""
+                    }
+                })
+        })
+        .width(20, vw)
+        .height(100, vh)
+        .borderRight("2px solid rgb(100 115 177)")
+        .alignItems("center")
+    }
+}
+
+register(Sidebar)

ui/app/index.html

@@ -4,6 +4,7 @@
     <title>Blockcatcher</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" href="/_/icons/logo.svg">
+    <link rel="stylesheet" href="/_/code/styles.css">
     <script src="/_/code/quill.js"></script>
     <script type="module" src="/index.js"></script>
 </head>