Adding tasks and forum

ui/site/apps/Forum/Forum.js

@@ -1,9 +1,9 @@
 css(`
-    messages- {
+    forum- {
         font-family: 'Bona';
     }
 
-    messages- input::placeholder {
+    forum- input::placeholder {
         font-family: 'Bona Nova';
         font-size: 0.9em;
         color: var(--accent);
@@ -22,7 +22,7 @@ css(`
     }
 `)
 
-class Messages extends Shadow {
+class Forum extends Shadow {
     friends = []
     conversations = []
 
@@ -49,27 +49,6 @@ class Messages extends Shadow {
                 .paddingTop(2, em)
                 .gap(0, em)
                 .borderRight("1px solid var(--accent2)")
-
-                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(--accent2)")
             })
             .width(100, "%")
             .x(0).y(13, vh)
@@ -175,4 +154,4 @@ class Messages extends Shadow {
     }
 }
 
-register(Messages)
+register(Forum)

ui/site/apps/Market/MarketGrid.js

@@ -22,7 +22,8 @@ class MarketGrid extends Shadow {
                 .marginTop(0.1, em)
                 .marginBottom(1, em)
                 .marginLeft(0.4, em)
-                .color("var(--accent2)")
+                .color("var(--accent)")
+                .opacity(0.7)
 
             if (this.listings.length > 0) {
                 ZStack(() => {
@@ -98,7 +99,6 @@ class MarketGrid extends Shadow {
         .height(100, vh)
         .paddingLeft(2, em)
         .paddingRight(2, em)
-        .paddingTop(2, em)
         .gap(0, em)
         .width(100, "%")
     }

ui/site/apps/Tasks/Tasks.js

@@ -0,0 +1,153 @@
+css(`
+    tasks- {
+        font-family: 'Bona';
+    }
+
+    tasks- 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 Tasks extends Shadow {
+    projects = [
+        {
+            "title": "Blockcatcher",
+            "tasks": {}
+        }
+    ]
+    columns = [
+        {
+            "title": "backlog",
+            "tasks": {}
+        }
+    ]
+
+    render() {
+        ZStack(() => {
+            HStack(() => {
+                VStack(() => {
+                    h3("Projects")
+                        .marginTop(0)
+                        .marginBottom(1, em)
+                        .marginLeft(0.4, em)
+
+                    if (this.projects.length >= 1) {
+                        for(let i = 0; i < this.projects.length; i++) {
+                            p(this.projects[i].title)
+                        }
+                    } else {
+                        p("No Projects!")
+                    }
+                })
+                .height(100, vh)
+                .paddingLeft(2, em)
+                .paddingRight(2, em)
+                .paddingTop(2, em)
+                .gap(0, em)
+                .borderRight("0.5px solid var(--accent2)")
+
+                HStack(() => {
+                    if (this.columns.length >= 1) {
+                        for(let i = 0; i < this.columns.length; i++) {
+                            p(this.columns[i].name)
+                        }
+                    } else {
+                        p("No Conversations!")
+                    }
+                })
+                .height(100, vh)
+                .paddingLeft(2, em)
+                .paddingRight(2, em)
+                .paddingTop(2, em)
+                .gap(0, em)
+                .borderRight("0.5px solid var(--accent2)")
+            })
+            .width(100, "%")
+            .x(0).y(13, vh)
+            .borderTop("0.5px solid var(--accent2)")
+
+            p("0 Items")
+                .position("absolute")
+                .x(50, vw).y(50, vh)
+                .transform("translate(-50%, -50%)")
+
+            HStack(() => {
+                input("Search tasks...", "45vw")
+                    .attr({
+                        "type": "text"
+                    })
+                    .fontSize(1.1, em)
+                    .paddingLeft(1.3, em)
+                    .background("transparent")
+                    .border("0.5px solid var(--accent2)")
+                    .outline("none")
+                    .color("var(--accent)")
+                    .borderRadius(10, px)
+
+                button("Search")
+                    .marginLeft(2, em)
+                    .borderRadius(10, px)
+                    .background("transparent")
+                    .border("0.5px solid var(--accent2)")
+                    .color("var(--accent)")
+                    .fontFamily("Bona Nova")
+                    .onHover(function (hovering) {
+                        if(hovering) {
+                            this.style.background = "var(--green)"
+
+                        } else {
+                            this.style.background = "transparent"
+
+                        }
+                    })
+
+                button("+ New Task")
+                    .width(9, em)
+                    .marginLeft(1, em)
+                    .borderRadius(10, px)
+                    .background("transparent")
+                    .border("0.5px solid var(--accent2)")
+                    .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(Tasks)

ui/site/components/AppMenu.js

@@ -16,8 +16,9 @@ css(`
         padding-bottom: 4em;
         bottom: 1em;
         border-radius: 12px;
+        background-color: var(--main);
     }
-
+    
     app-menu p {
         cursor: default;
         transition: transform .3s, text-decoration .3s;
@@ -56,6 +57,8 @@ class AppMenu extends Shadow {
     render() {
         VStack(() => {
             HStack(() => {
+                p("Forum")
+                p("Tasks")
                 p("Messages")
                 p("Market")
                 p("Jobs")

ui/site/components/AppWindow.js

@@ -1,6 +1,8 @@
-import "../apps/Jobs/Jobs.js"
+import "../apps/Forum/Forum.js"
+import "../apps/Tasks/Tasks.js"
 import "../apps/Messages/Messages.js"
 import "../apps/Market/Market.js"
+import "../apps/Jobs/Jobs.js"
 
 class AppWindow extends Shadow {
     app;
@@ -13,8 +15,11 @@ class AppWindow extends Shadow {
     render() {
         ZStack(() => {
             switch(this.app) {
-                case "Jobs":
+                case "Forum":
-                    Jobs()
+                    Forum()
+                    break;
+                case "Tasks":
+                    Tasks()
                     break;
                 case "Messages":
                     Messages()
@@ -22,6 +27,9 @@ class AppWindow extends Shadow {
                 case "Market":
                     Market()
                     break;
+                case "Jobs":
+                    Jobs()
+                    break;
             }
         })
         .display(this.app ? '' : 'none')

ui/site/components/Home.js

@@ -43,6 +43,16 @@ class Home extends Shadow {
                     AppWindow("Market")
                     AppMenu("Market")
                     break;
+                case "/app/tasks":
+                    AppWindow("Tasks")
+                    AppMenu("Tasks")
+                    break;
+                case "/app/forum":
+                    AppWindow("Forum")
+                    AppMenu("Forum")
+                    break;
+                default:
+                    throw new Error("Unknown route!")
             }
 
             ProfileButton()