Introducing dark mode, deriving apps in bottom bar from db

src/Home/ConnectionError.js

@@ -0,0 +1,23 @@
+class ConnectionError extends Shadow {
+
+    render() {
+        VStack(() => {
+            img("/_/icons/column.svg", window.isMobile() ? "5vmax" : "3vmax")
+                .position("absolute")
+                .top(2, em)
+                .left(2, em)
+                .onClick((done) => {
+                    window.navigateTo("/")
+                })
+                
+            p("Error connecting to server. Please try again later!")
+        })
+        .verticalAlign("center")
+        .paddingHorizontal(20, vw)
+        .backgroundColor("var(--main)")
+        .overflowX("hidden")
+        .height(100, vh)
+    }
+}
+
+register(ConnectionError)

src/_/code/shared.css

@@ -11,11 +11,22 @@
     --quillred: #DE3F3F;
     --brown: #812A18;
     --darkbrown: #3f0808;
+
+    --column-src: /_/icons/column2.svg;
+    --nodes-src: /_/icons/nodes.svg;
+    --forum-src: /_/icons/forum.svg;
+    --people-src: /_/icons/people.svg;
 }
 
 @media (prefers-color-scheme: dark) {
 :root {
+    --main: rgb(42, 20, 13);
+    --accent: rgb(106, 44, 28);
 
+    --column-src: /_/icons/column2.svg;
+    --nodes-src: /_/icons/nodes.svg;
+    --forum-src: /_/icons/forum.svg;
+    --people-src: /_/icons/people.svg;
 }
 }
 

src/apps/People/People.js

@@ -75,7 +75,6 @@ class People extends Shadow {
         })
         .position("relative")
         .boxSizing("border-box")
-        .background("var(--bone)")
         .paddingVertical(1, em)
         .height(100, pct)
         .width(100, pct)

src/components/AppMenu.js

@@ -1,53 +1,48 @@
 class AppMenu extends Shadow {
     selected = ""
 
+    images = {
+        "Dashboard": {src: "column-src"},
+        "Messages": {src: "letter-src"},
+        "People": {src: "people-src"},
+    }
+
     onNewSelection() {
         this.$$("img").forEach((image) => {
             image.style.outline = ""
         })
     }
 
+    cssVariable(value) {
+        return getComputedStyle(document.documentElement)
+        .getPropertyValue("--" + value)
+        .trim();
+    }
+
     render() {
         HStack(() => {
-            img("/_/icons/Column.svg", "1.5em", "1.5em")
-                .attr({app: "forum"})
-                .padding(0.5, em)
-                .borderRadius(10, px)
-                .outline(global.currentApp() === "Dashboard" ? "1px solid black" : "none")
-                .onClick((finished, e) => {
-                    if(finished) {
-                        this.onNewSelection()
-                        e.target.style.outline = "1px solid black"
-                        global.openApp("Dashboard")
-                    }
-                })
 
-            img("/_/icons/letter.svg", "1.5em", "1.5em")
-                .attr({app: "messages"})
-                .padding(0.5, em)
-                .borderRadius(10, px)
-                .outline(global.currentApp() === "Messages" ? "1px solid black" : "none")
-                .onClick((finished, e) => {
-                    if(finished) {
-                        this.onNewSelection()
-                        e.target.style.outline = "1px solid black"
-                        global.openApp("Messages")
-                    }
-                })
-            img("/_/icons/people.svg", "1.5em", "1.5em") 
-                .attr({app: "people"})
-                .padding(0.5, em)
-                .borderRadius(10, px)
-                .outline(global.currentApp() === "People" ? "1px solid black" : "none")
-                .onClick((finished, e) => {
-                    if(finished) {
-                        this.onNewSelection()
-                        e.target.style.outline = "1px solid black"
-                        global.openApp("People")
-                    }
-                })
+            let currentNetwork = global.currentNetwork
+            for(let i = 0; i < currentNetwork.apps.length; i++) {
+                let app = currentNetwork.apps[i]
+                console.log(app)
+                img(this.cssVariable(this.images[app].src), this.images[app].size)
+                    .attr({app: app})
+                    .padding(0.5, em)
+                    .borderRadius(10, px)
+                    .outline(global.currentApp() === app ? "1px solid var(--accent)" : "none")
+                    .onClick((done, e) => {
+                        if(done) {
+                            this.onNewSelection()
+                            e.target.style.outline = "1px solid var(--accent)"
+                            global.openApp(app)
+                        }
+                    })
+            }
+
+
         })
-        .borderTop("1px solid black")
+        .borderTop("1px solid var(--accent)")
         .height("auto")
         .background("var(--main)")
         .zIndex(1)

src/index.html

@@ -21,8 +21,8 @@
 
     <link rel="icon" type="image/x-icon" href="./_/icons/columnwhite.svg" />
     <link rel="manifest" href="./manifest.json" />
-    <link rel="stylesheet" href="./_/code/styles.css" />
-    <script src="./_/code/quill.js"></script>
+    <link rel="stylesheet" href="./_/code/shared.css" />
+    <script src="/_/code/quill.js"></script>
     <script type="module" src="./index.js"></script>
     <meta name="theme-color" content="#31d53d" />
   </head>

src/index.js

@@ -1,6 +1,7 @@
 import Socket from "/_/code/ws/Socket.js"
 import "./Home.js"
-import "./Login.js"
+import "./Home/Login.js"
+import "./Home/ConnectionError.js"
 
 let Global = class {
     Socket = new Socket()
@@ -133,9 +134,9 @@ let Global = class {
             console.log("getProfile: ", profile);
             this.profile = profile
             return 200;
-        } catch (err) {
+        } catch (err) { // Network error / Error reaching server
             console.error(err);
-            return 401;
+            return 500;
         }
     }
 
@@ -145,12 +146,15 @@ let Global = class {
         this.getProfile().then(async (status) => {
             if (status === 401) {
                 Login()
+            } else if(status === 500) {
+                ConnectionError()
             } else {
+                console.log("else")
                 await this.Socket.init()
                 await this.onNavigate()
                 Home()
             }
-        });
+        })
     }
 }