Improving the 3 apps

.gitignore

@@ -7,4 +7,5 @@ db/*
 server/db/users.json
 server/.env
 abetaccredited.html
-qrCodes/qr_codes
+qrCodes/qr_codes
+.env

ui/_/code/quill.js

@@ -1,6 +1,7 @@
 /*
     Sam Russell
     Captured Sun
+    11.7.25 - changed registerShadow() to register(), changed onClick() to be like onHover()
     11.6.25 - adding default value for "button()" "children" parameter
     10.29.25 - adding "gap()" and "label()" functions
 */
@@ -186,7 +187,7 @@ window.Shadow = class extends HTMLElement {
         super()
     }
 }
-window.registerShadow = (el, tagname) => {
+window.register = (el, tagname) => {
     if (typeof el.prototype.render !== 'function') {
         throw new Error("Element must have a render: " + el.prototype.constructor.name)
     }
@@ -713,7 +714,10 @@ HTMLElement.prototype.onAppear = function(func) {
 };
 
 HTMLElement.prototype.onClick = function(func) {
-    this._storeListener("click", func);
+    const onMouseDown = () => func.call(this, true);
+    const onMouseUp = () => func.call(this, false);
+    this._storeListener("mousedown", onMouseDown);
+    this._storeListener("mouseup", onMouseUp);
     return this;
 };
 

ui/site/apps/Forum.js

@@ -1,49 +0,0 @@
-css(`
-    forum- input::placeholder {
-        font-size: 0.9em;
-        color: var(--accent);
-    }
-`)
-
-class Forum extends Shadow {
-
-    render() {
-        ZStack(() => {
-            p("Coming Soon!")
-                .position("absolute")
-                .x(50, vw).y(50, vh)
-                .transform("translate(-50%, -50%)")
-
-            HStack(() => {
-                input("Search...", "50vw")
-                    .attr({
-                        "type": "text"
-                    })
-                    .fontSize(1.1, em)
-                    .paddingLeft(1.3, em)
-                    .background("transparent")
-                    .border("1px solid var(--accent)")
-                    .outline("none")
-                    .color("var(--accent)")
-                    .borderRadius(10, px)
-                button("Search")
-                    .marginLeft(2, em)
-                    .borderRadius(10, px)
-                    .background("transparent")
-                    .border("1px solid var(--accent)")
-                    .color("var(--accent)")
-            })
-            .x(50, vw).y(5, vh)
-            .position("absolute")
-            .transform("translateX(-50%)")
-        })
-        .width(100, "%")
-        .height(100, "%")
-    }
-
-    connectedCallback() {
-        // Optional additional logic
-    }
-}
-
-registerShadow(Forum)

ui/site/apps/Jobs/Jobs.js

@@ -0,0 +1,116 @@
+import "./JobsSidebar.js"
+import "./JobsGrid.js"
+
+css(`
+    jobs- {
+        font-family: 'Bona';
+    }
+
+    jobs- input::placeholder {
+        font-family: 'Bona Nova';
+        font-size: 0.9em;
+        color: var(--accent);
+    }
+
+    input[type="checkbox"] {
+        appearance: none;        /* remove default style */
+        -webkit-appearance: none;
+        width: 1em;
+        height: 1em;
+        border: 1px solid var(--accent);
+    }
+
+    input[type="checkbox"]:checked {
+        background-color: var(--red);
+    }
+`)
+
+class Jobs extends Shadow {
+    jobs = [
+        {
+            title: "Austin Chapter Lead",
+            salary: "1% of Local Tax Revenue",
+            location: "Austin"
+        },
+        {
+            title: "San Marcos Chapter Lead",
+            salary: "1% of Local Tax Revenue"
+        }
+    ]
+
+    render() {
+        ZStack(() => {
+            HStack(() => {
+                JobsSidebar()
+    
+                JobsGrid(this.jobs)
+            })
+            .width(100, "%")
+            .x(0).y(13, vh)
+
+            HStack(() => {
+                input("Search jobs...", "45vw")
+                    .attr({
+                        "type": "text"
+                    })
+                    .fontSize(1.1, em)
+                    .paddingLeft(1.3, em)
+                    .background("transparent")
+                    .border("1px solid var(--periwinkle)")
+                    .outline("none")
+                    .color("var(--accent)")
+                    .borderRadius(10, px)
+
+                button("Search")
+                    .marginLeft(2, em)
+                    .borderRadius(10, px)
+                    .background("transparent")
+                    .border("1px solid var(--periwinkle)")
+                    .color("var(--accent)")
+                    .fontFamily("Bona Nova")
+                    .onHover(function (hovering) {
+                        if(hovering) {
+                            this.style.background = "var(--green)"
+
+                        } else {
+                            this.style.background = "transparent"
+
+                        }
+                    })
+
+                button("+ Add Job")
+                    .width(7, em)
+                    .marginLeft(1, em)
+                    .borderRadius(10, px)
+                    .background("transparent")
+                    .border("1px solid var(--periwinkle)")
+                    .color("var(--accent)")
+                    .fontFamily("Bona Nova")
+                    .onHover(function (hovering) {
+                        if(hovering) {
+                            this.style.background = "var(--green)"
+
+                        } else {
+                            this.style.background = "transparent"
+
+                        }
+                    })
+                    .onClick((clicking) => {
+                        console.log(this, "clicked")
+                    })
+
+            })
+            .x(55, vw).y(4, vh)
+            .position("absolute")
+            .transform("translateX(-50%)")
+        })
+        .width(100, "%")
+        .height(100, "%")
+    }
+
+    connectedCallback() {
+        // Optional additional logic
+    }
+}
+
+register(Jobs)

ui/site/apps/Jobs/JobsGrid.js

@@ -0,0 +1,43 @@
+class JobsGrid extends Shadow {
+    jobs;
+
+    constructor(jobs) {
+        super()
+        this.jobs = jobs
+    }
+
+    render() {
+        VStack(() => {
+            h3("Results")
+            .marginTop(0)
+            .marginBottom(1, em)
+            .marginLeft(0.4, em)
+            .color("var(--periwinkle)")
+
+            if (this.jobs.length > 0) {
+                ZStack(() => {
+                    for (let i = 0; i < this.jobs.length; i++) {
+                        p(this.jobs[i].title)
+                            .border("1px solid var(--periwinkle)")
+                            .padding(1, em)
+                            .borderRadius(5, "px")
+                        }
+                })
+                .display("grid")
+                .gridTemplateColumns("repeat(auto-fill, minmax(200px, 1fr))")
+                .gap(1, em)
+            } else {
+                p("No Jobs!")
+            }
+        })
+        .height(100, vh)
+        .paddingLeft(2, em)
+        .paddingRight(2, em)
+        .paddingTop(2, em)
+        .gap(0, em)
+        .width(100, "%")
+        .borderTop("1px solid var(--periwinkle)")
+    }
+}
+
+register(JobsGrid)

ui/site/apps/Jobs/JobsSidebar.js

@@ -0,0 +1,17 @@
+class JobsSidebar extends Shadow {
+    render() {
+        VStack(() => {
+            h3("Location")
+
+
+        })
+        .paddingTop(1, em)
+        .paddingLeft(3, em)
+        .paddingRight(3, em)
+        .gap(1, em)
+        .borderRight("1px solid var(--periwinkle)")
+        .minWidth(10, vw)
+    }
+}
+
+register(JobsSidebar)

ui/site/apps/Market.js

@@ -100,7 +100,7 @@ class Market extends Shadow {
                     .fontSize(1.1, em)
                     .paddingLeft(1.3, em)
                     .background("transparent")
-                    .border("1px solid var(--accent)")
+                    .border("1px solid var(--periwinkle)")
                     .outline("none")
                     .color("var(--accent)")
                     .borderRadius(10, px)
@@ -109,21 +109,42 @@ class Market extends Shadow {
                     .marginLeft(2, em)
                     .borderRadius(10, px)
                     .background("transparent")
-                    .border("1px solid var(--accent)")
+                    .border("1px solid var(--periwinkle)")
                     .color("var(--accent)")
                     .fontFamily("Bona Nova")
+                    .onHover(function (hovering) {
+                        if(hovering) {
+                            this.style.background = "var(--green)"
+
+                        } else {
+                            this.style.background = "transparent"
+
+                        }
+                    })
 
                 button("+ Add Item")
                     .width(7, em)
                     .marginLeft(1, em)
                     .borderRadius(10, px)
                     .background("transparent")
-                    .border("1px solid var(--accent)")
+                    .border("1px solid var(--periwinkle)")
                     .color("var(--accent)")
                     .fontFamily("Bona Nova")
+                    .onHover(function (hovering) {
+                        if(hovering) {
+                            this.style.background = "var(--green)"
+
+                        } else {
+                            this.style.background = "transparent"
+
+                        }
+                    })
+                    .onClick((clicking) => {
+                        console.log(this, "clicked")
+                    })
 
             })
-            .x(55, vw).y(5, vh)
+            .x(55, vw).y(4, vh)
             .position("absolute")
             .transform("translateX(-50%)")
         })
@@ -136,4 +157,4 @@ class Market extends Shadow {
     }
 }
 
-registerShadow(Market)
+register(Market)

ui/site/apps/Messages.js

@@ -1,39 +1,138 @@
 css(`
+    messages- {
+        font-family: 'Bona';
+    }
+
     messages- input::placeholder {
+        font-family: 'Bona Nova';
         font-size: 0.9em;
         color: var(--accent);
     }
+
+    input[type="checkbox"] {
+        appearance: none;        /* remove default style */
+        -webkit-appearance: none;
+        width: 1em;
+        height: 1em;
+        border: 1px solid var(--accent);
+    }
+
+    input[type="checkbox"]:checked {
+        background-color: var(--red);
+    }
 `)
 
 class Messages extends Shadow {
+    friends = []
+    conversations = []
 
     render() {
         ZStack(() => {
-            p("Coming Soon!")
+            HStack(() => {
+                VStack(() => {
+                    h3("Friends")
+                        .marginTop(0)
+                        .marginBottom(1, em)
+                        .marginLeft(0.4, em)
+
+                    if (this.friends.length > 1) {
+                        for(let i = 0; i < this.friends.length; i++) {
+                            p(this.friends[i].name)
+                        }
+                    } else {
+                        p("No Friends!")
+                    }
+                })
+                .height(100, vh)
+                .paddingLeft(2, em)
+                .paddingRight(2, em)
+                .paddingTop(2, em)
+                .gap(0, em)
+                .borderRight("1px solid var(--periwinkle)")
+
+                VStack(() => {
+                    h3("Conversations")
+                        .marginTop(0)
+                        .marginBottom(1, em)
+                        .marginLeft(0.4, em)
+
+                    if (this.conversations.length > 1) {
+                        for(let i = 0; i < this.conversations.length; i++) {
+                            p(this.conversations[i].name)
+                        }
+                    } else {
+                        p("No Conversations!")
+                    }
+                })
+                .height(100, vh)
+                .paddingLeft(2, em)
+                .paddingRight(2, em)
+                .paddingTop(2, em)
+                .gap(0, em)
+                .borderRight("1px solid var(--periwinkle)")
+            })
+            .width(100, "%")
+            .x(0).y(13, vh)
+            .borderTop("1px solid var(--periwinkle)")
+
+            p("0 Items")
                 .position("absolute")
                 .x(50, vw).y(50, vh)
                 .transform("translate(-50%, -50%)")
 
             HStack(() => {
-                input("Search...", "50vw")
+                input("Search messages...", "45vw")
                     .attr({
                         "type": "text"
                     })
                     .fontSize(1.1, em)
                     .paddingLeft(1.3, em)
                     .background("transparent")
-                    .border("1px solid var(--accent)")
+                    .border("1px solid var(--periwinkle)")
                     .outline("none")
                     .color("var(--accent)")
                     .borderRadius(10, px)
+
                 button("Search")
                     .marginLeft(2, em)
                     .borderRadius(10, px)
                     .background("transparent")
-                    .border("1px solid var(--accent)")
+                    .border("1px solid var(--periwinkle)")
                     .color("var(--accent)")
+                    .fontFamily("Bona Nova")
+                    .onHover(function (hovering) {
+                        if(hovering) {
+                            this.style.background = "var(--green)"
+
+                        } else {
+                            this.style.background = "transparent"
+
+                        }
+                    })
+
+                button("+ New Message")
+                    .width(15, em)
+                    .marginLeft(1, em)
+                    .borderRadius(10, px)
+                    .background("transparent")
+                    .border("1px solid var(--periwinkle)")
+                    .color("var(--accent)")
+                    .fontFamily("Bona Nova")
+                    .onHover(function (hovering) {
+                        if(hovering) {
+                            this.style.background = "var(--green)"
+
+                        } else {
+                            this.style.background = "transparent"
+
+                        }
+                    })
+                    .onClick((clicking) => {
+                        console.log(this, "clicked")
+                    })
+
             })
-            .x(50, vw).y(5, vh)
+            .x(55, vw).y(4, vh)
             .position("absolute")
             .transform("translateX(-50%)")
         })
@@ -41,9 +140,39 @@ class Messages extends Shadow {
         .height(100, "%")
     }
 
+    SidebarName(name) {
+        let firstLetter = name[0]
+
+        HStack(() => {
+            div(firstLetter)
+                .display("flex")
+                .justifyContent("center")
+                .alignItems("center")   
+                .width(1.5, em)
+                .height(1.5, em)
+                .border("1px solid var(--periwinkle)")
+                .borderRadius(100, "%")
+            p(name)
+                .marginLeft(1, em)
+        })
+        .alignItems("center")
+        .padding(5, px)
+        .borderRadius(0.5, em)
+        .cursor("default")
+        .onHover(function (hovering) {
+            if(hovering) {
+                this.style.background = "var(--green)"
+
+            } else {
+                this.style.background = "transparent"
+
+            }
+        })
+    }
+
     connectedCallback() {
         // Optional additional logic
     }
 }
 
-registerShadow(Messages)
+register(Messages)

ui/site/components/AppMenu.js

@@ -43,7 +43,7 @@ css(`
     }
 `)
 
-registerShadow(
+register(
     
 class AppMenu extends Shadow {
     selected;
@@ -56,12 +56,13 @@ class AppMenu extends Shadow {
     render() {
         VStack(() => {
             HStack(() => {
-                p("Forum")
                 p("Messages")
                 p("Market")
+                p("Jobs")
             })
             .justifyContent("center")
             .gap(1.5, em)
+            .paddingRight(2, em)
     
             img("_/images/divider.svg", "40vw")
                 .attr({

ui/site/components/AppWindow.js

@@ -1,4 +1,4 @@
-import "../apps/Forum.js"
+import "../apps/Jobs/Jobs.js"
 import "../apps/Messages.js"
 import "../apps/Market.js"
 
@@ -13,8 +13,8 @@ class AppWindow extends Shadow {
     render() {
         ZStack(() => {
             switch(this.app) {
-                case "Forum":
+                case "Jobs":
-                    Forum()
+                    Jobs()
                     break;
                 case "Messages":
                     Messages()
@@ -44,4 +44,4 @@ class AppWindow extends Shadow {
 
 }
 
-registerShadow(AppWindow, "app-window")
+register(AppWindow, "app-window")

ui/site/components/Home.js

@@ -8,10 +8,10 @@ class Home extends Shadow {
 
     render() {
         ZStack(() => {
-            img("_/icons/logo.svg", "3.5em")
+            img("_/icons/logo.svg", "2.5em")
                 .position("fixed")
                 .left("3em")
-                .top("2em")
+                .top("3vh")
                 .zIndex(3)
                 // .onClick(() => {
                 //     window.navigateTo("/")
@@ -32,9 +32,9 @@ class Home extends Shadow {
                     AppWindow()
                     AppMenu()
                     break
-                case "/app/forum":
+                case "/app/jobs":
-                    AppWindow("Forum")
+                    AppWindow("Jobs")
-                    AppMenu("Forum")
+                    AppMenu("Jobs")
                     break;
                 case "/app/messages":
                     AppWindow("Messages")
@@ -55,20 +55,17 @@ class Home extends Shadow {
 
             a("/signout", "Sign Out")
                 .position("fixed")
-                .top("3em")
+                .top("5vh")
                 .right("2em")
                 .background("transparent")
-                .border(window.location.pathname === "/" ? "1px solid var(--tan)" : "1px solid var(--accent)")
+                .border(window.location.pathname === "/" ? "1px solid var(--tan)" : "1px solid var(--periwinkle)")
                 .color(window.location.pathname === "/" ? "var(--tan)" : "var(--accent)")
                 .borderRadius(5, px)
                 .onHover(function (hovering) {
-                    console.log('hovering', hovering, this)
                     if(hovering) {
-                        this.style.background = "var(--tan)"
+                        this.style.background = "var(--green)"
-                        this.style.color = "black"
                     } else {
                         this.style.background = ""
-                        this.style.color = window.location.pathname === "/" ? "var(--tan)" : "var(--accent)"
                     }
                 })
                 .onNavigate(function () {
@@ -77,7 +74,7 @@ class Home extends Shadow {
                         this.style.border = "1px solid var(--tan)"
                         this.style.color = "var(--tan)"
                     } else {
-                        this.style.border = "1px solid var(--accent)"
+                        this.style.border = "1px solid var(--periwinkle)"
                         this.style.color = "var(--accent)"
                     }
                 })
@@ -85,4 +82,4 @@ class Home extends Shadow {
     }
 }
 
-registerShadow(Home)
+register(Home)

ui/site/components/ProfileButton.js

@@ -40,4 +40,4 @@ class ProfileButton extends Shadow {
     }
 }
 
-registerShadow(ProfileButton)
+register(ProfileButton)

ui/site/components/ProfileMenu.js

@@ -49,4 +49,4 @@ class ProfileMenu extends Shadow {
     }
 }
 
-registerShadow(ProfileMenu, "profile-menu")
+register(ProfileMenu, "profile-menu")