People app and navigation + fixes

Index.js
- Fixed issue where incorrect pathname was set while not part of an organization.
- onNavigate(), fetchAppData(), getDefaultNetworkName(), and getDefaultAppName() all modified to account for user not being part of an organization (default path set to /my/dashboard)
- onNavigate() modified to properly set defaults for currentNetwork and currentApp, and modified to fix issue where app would crash when attempting to access nonexistent 'this.currentNetwork.data'
- onNavigate() now correctly switches currentApp

Home.js
- Changed ZStack to a VStack
- Replaced Jobs switch case with People
- Adjusted styling for AppMenu() and VStack height values
- Changed .onNavigate() from function() to () => {} for correct this binding
- !!!(TEMP FIX)!!!: Added extra rerender() call in an .onClick() after .onNavigate()

AppMenu()
- Modified app icons to be highlighted when active
- Changed Forum's app icon to redirect from "/" to "/dashboard"
- Removed fixed styling to account for Home's new responsive VStack layout

People.js
- Added People.js

Messages.js
- Fixed missing 'global." before Socket.send
- Changed 'vh' height values to 'pct' to account for AppMenu() at bottom
- Fixed misnamed modifiers

Forum.js
- Adjusted styling
- Changed 'vh' height values to 'pct' to account for AppMenu() at bottom

styles.css
- Added missing custom color vars

src/apps/Forum/Forum.js

@@ -56,12 +56,14 @@ class Forum extends Shadow {
                     })
             })
             .gap(0.5, em)
+            .boxSizing("border-box")
             .width(100, pct)
-            .height(100, vh)
+            .height(100, pct)
             .horizontalAlign("center")
             .verticalAlign("end")
         })
         .backgroundColor("var(--main)")
+        .boxSizing("border-box")
         .width(100, pct)
         .height(100, pct)
     }

src/apps/Messages/Messages.js

@@ -76,7 +76,7 @@ class Messages extends Shadow {
                 .verticalAlign("end")
             })
             .onAppear(async () => {
-                let res = await Socket.send({app: "MESSAGES", operation: "GET"})
+                let res = await global.Socket.send({app: "MESSAGES", operation: "GET"})
                 if(!res) console.error("failed to get messages")
 
                 if(res.msg.length > 0 && this.conversations.length === 0) {
@@ -93,9 +93,9 @@ class Messages extends Shadow {
                     this.rerender()
                 })
             })
-            .width(100, "%")
-            .height(87, vh)
-            .x(0).y(13, vh)
+            .width(100, pct)
+            .height(87, pct)
+            .x(0).y(13, pct)
 
             VStack(() => {
                 p("Add Message")
@@ -121,15 +121,15 @@ class Messages extends Shadow {
                 
             })
             .gap(1, em)
-            .alignVertical("center")
-            .alignHorizontal("center")
+            .verticalAlign("center")
+            .horizontalAlign("center")
             .backgroundColor("black")
             .border("1px solid var(--accent)")
             .position("fixed")
-            .x(50, vw).y(50, vh)
+            .x(50, vw).y(50, pct)
             .center()
             .width(60, vw)
-            .height(60, vh)
+            .height(60, pct)
             .display("none")
             .attr({id: "addPanel"})
 
@@ -176,12 +176,13 @@ class Messages extends Shadow {
                     })
 
             })
-            .x(55, vw).y(4, vh)
+            .x(55, vw).y(4, pct)
             .position("absolute")
             .transform("translateX(-50%)")
         })
-        .width(100, "%")
-        .height(100, "%")
+        .boxSizing("border-box")
+        .height(100, pct)
+        .width(100, pct)
     }
 }
 

src/apps/People/People.js

@@ -0,0 +1,108 @@
+css(`
+    people- {
+        font-family: 'Arial';
+    }
+
+    people- h1 {
+      font-family: 'Bona';
+    }
+
+    people- p {
+        color: var(--accent);
+    }
+
+    people- p b {
+        color: var(--darkbrown);
+    }
+`)
+
+class People extends Shadow {
+    people = "";
+
+    constructor() {
+        super()
+        this.people = global.currentNetwork.data.members;
+    }
+
+    render() {
+        VStack(() => {
+            h1("People")
+                .color("var(--quillred)")
+                .textAlign("center")
+
+            if (this.people == "") {
+                LoadingCircle()
+            } else if (this.people.length > 0) {
+                for (let i = 0; i < this.people.length; i++) {
+                    HStack(() => {
+                        HStack(() => { })
+                            .boxSizing("border-box")
+                            .height(3.5, em)
+                            .width(3.5, em)
+                            .padding(0.5, em)
+                            .border("1px solid var(--accent)")
+                            .borderRadius(3, px)
+                            .background("var(--bone)")
+
+                        VStack(() => {
+                            h3(this.people[i].firstName + " " + this.people[i].lastName)
+                                .color("var(--brown)")
+                                .fontSize(1.2, em)
+                                .fontWeight("bold")
+                                .marginVertical(0, em)
+                            p("<b>Member since: </b>" + " " + this.convertDate(this.people[i].created))
+                        })
+                        .verticalAlign("center")
+                        .gap(0.5, em)
+                    })
+                    .height(3.5, em)
+                    .padding(0.75, em)
+                    .gap(1, em)
+                    .borderBottom("1px solid var(--divider)")
+                    .borderTop(i == 0 ? "1px solid var(--divider)" : "")
+                }
+            } else {
+                h2("No Members")
+                    .color("var(--brown)")
+                    .fontWeight("bold")
+                    .marginTop(7.5, em)
+                    .marginBottom(0.5, em)
+                    .textAlign("center")
+                p("Invite people to this network!")
+                    .textAlign("center")
+                    .color("var(--darkbrown)")
+            }
+        })
+        .position("relative")
+        .boxSizing("border-box")
+        .background("var(--bone)")
+        .paddingVertical(1, em)
+        .height(100, pct)
+        .width(100, pct)
+    }
+
+    convertDate(rawDate) {
+        const date = rawDate.split("-", 1)[0]; // "01.31.2026
+        const [mm, dd, yyyy] = date.split(".").map(Number);
+
+        const months = [
+            "January", "February", "March", "April", "May", "June",
+            "July", "August", "September", "October", "November", "December"
+        ];
+
+        const ordinal = (n) => {
+            const mod100 = n % 100;
+            if (mod100 >= 11 && mod100 <= 13) return `${n}th`;
+            switch (n % 10) {
+                case 1: return `${n}st`;
+                case 2: return `${n}nd`;
+                case 3: return `${n}rd`;
+                default: return `${n}th`;
+            }
+        };
+
+        return `${months[mm - 1]} ${ordinal(dd)}, ${yyyy}`;
+    }
+}
+
+register(People)