Removed /db from getImageURL

src/Home/AuthPage/Signup.js

@@ -103,7 +103,6 @@ class Signup extends Shadow {
             e.preventDefault();
             const data = new FormData(e.target);
             if (this.verifyInput(data)) {
-                this.errorMessage = "";
                 await this.requestSignup(data);
             } else {
                 console.log(this.errorMessage)
@@ -111,6 +110,11 @@ class Signup extends Shadow {
         })
     }
 
+    /*
+    *******************************************************************************
+    NO LONGER WORKS - SEE AUTH ENDPOINT IN SERVER
+    *******************************************************************************
+    */
     async requestSignup(data) {
         const networkId = this.attr("networkid");
         const res = await fetch(`${util.HOST}/auth/signup`, {

src/_/code/shared.css

@@ -15,6 +15,7 @@
 
     --sidebar: #698b6f;
     --divider: #523636;
+    --lightDivider: #52363681;
     --darkbrown: #3f0808;
     --darkgrey: #5c4646;
 
@@ -55,6 +56,7 @@
 
     --sidebar: #240609;
     --divider: #523636;
+    --lightDivider: #52363680;
     --darktext: #62473E;
     --headertext: #ffd8bb;
     --darkred: #6b2c1d;

src/components/AppMenu.js

@@ -7,7 +7,7 @@ class AppMenu extends Shadow {
     darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
 
     getImageURL(appName) {
-        let imgUrl = `${util.HOST}/db/apps/${appName}/icons/${appName}`
+        let imgUrl = `${util.HOST}/apps/${appName}/icons/${appName}`
         if(this.darkMode) {
             imgUrl += "light"
         }

src/public/_/code/quill.js

@@ -1,10 +1,14 @@
 /*
     Sam Russell
     Captured Sun
-    2.24.26 - Allowing state() to watch other elements
-    2.21.26 - Making state() be called on initial definition, fixing fontSize so it works with clamp(), other strings
-    2.20.26 - Adding state()
-    2.19.26 - Adding dynamicText()
+    3.28.26 - Stopping state() from duplicating on rerender()
+    3.27.26 - Adding quill router, removing dynamicText(), removing horizontal and verticalAlign() checks
+    3.24.26 - Allowing state() to watch other elements
+    3.21.26 - Making state() be called on initial definition, fixing fontSize so it works with clamp(), other strings
+    3.20.26 - Adding state()
+    3.19.26 - Adding dynamicText()
+    3.4.26 - Making horizontalAlign() and verticalAlign() methods of checking for stacks more robust
+    2.27.26 - Adding parentShadow() function
     2.16.26 - Adding event objects to the onTouch callbacks
     1.16.26 - Moving nav event dispatch out of pushState, adding null feature to attr()
     1.5.26 - Switching verticalAlign and horizontalAlign names, adding borderVertical and Horizontal
@@ -182,6 +186,63 @@ Object.defineProperty(Array.prototype, 'last', {
 window.quill = {
     rendering: [],
     lastState: null,
+    router: null,
+    storedState: new WeakMap(),
+
+    router: class {
+        routes = []
+
+        route(route, cb) {
+            this.routes.push({route: route, cb: cb})
+        }
+
+        async findMatch() {
+            let matched;
+            for (const route of this.routes) {
+                const [match, params] = this.matchPath(route.route, window.location.pathname)
+                if (match) {
+                    await route.cb(params)
+                    return;
+                }
+            }
+            if(!matched) throw new Error("Quill: couldn't match route!")
+            return null
+        }
+
+        matchPath(pattern, pathname) {
+            const patternParts = pattern.split('/').filter(Boolean)
+            const pathParts = pathname.split('/').filter(Boolean)
+
+            if (patternParts.length !== pathParts.length) return [false]
+
+            const params = []
+
+            for (let i = 0; i < patternParts.length; i++) {
+                if (patternParts[i].startsWith(':')) {
+                    params.push(pathParts[i])
+                } else if (patternParts[i] !== pathParts[i]) {
+                    return [false]
+                }
+            }
+
+            return [true, params]
+        }
+    },
+
+    init: async (home, router) => {
+        if(router) {
+            quill.router = router
+            window.addEventListener("navigate", () => {
+                if(quill.router) {
+                    router.findMatch()
+                }
+            })
+            if(quill.router) {
+                await router.findMatch()
+            }
+        }
+        home()
+    },
 
     render: (el) => {
         if(el instanceof Shadow) {
@@ -202,7 +263,19 @@ window.quill = {
         quill.rendering.pop(el)
     },
 
+    removeState: (el) => {
+        let state = quill.storedState.get(el)
+        if(state) {
+            state.forEach(observer => { 
+                observer.disconnect()
+            })
+        }
+        quill.storedState.delete(el)
+    },
+
     rerender: (el) => {
+        quill.removeState(el)
+
         Array.from(el.attributes).forEach(attr => el.removeAttribute(attr.name));
         el.innerHTML = ""
         el.removeAllListeners()
@@ -315,6 +388,17 @@ HTMLElement.prototype.rerender = function() {
     quill.rerender(this)
 }
 
+HTMLElement.prototype.parentShadow = function(selector) {
+    let el = this
+    while(el !== document.body) {
+        el = el.parentElement
+        if(el instanceof Shadow) {
+            return el
+        }
+    }
+    return null
+}
+
 /* Styling */
 
 window.pct = "%"
@@ -672,10 +756,6 @@ HTMLElement.prototype.centerY = function () {
 
 HTMLElement.prototype.verticalAlign = function (value) {
     const direction = getComputedStyle(this).flexDirection;
-    if(!direction) {
-        throw new Error("verticalAlign can be only be used on HStacks or VStacks!")
-    }
-
     if (direction === "column" || direction === "column-reverse") {
         this.style.justifyContent = value;
     } else {
@@ -686,10 +766,6 @@ HTMLElement.prototype.verticalAlign = function (value) {
 
 HTMLElement.prototype.horizontalAlign = function (value) {
     const direction = getComputedStyle(this).flexDirection;
-    if(!direction) {
-        throw new Error("horizontalAlign can be only be used on HStacks or VStacks!")
-    }
-
     if (direction === "column" || direction === "column-reverse") {
         this.style.alignItems = value;
     } else {
@@ -701,54 +777,64 @@ HTMLElement.prototype.horizontalAlign = function (value) {
 
 /* Elements */
 
-HTMLElement.prototype.state = function(arg1, arg2, arg3) {
+/*
+    STATE RULES:
+        reset on rerender()
+        elements not connected to the dom have their state listeners removed
+*/
+
+HTMLElement.prototype.state = function(arg1, arg2, arg3, arg4) {
     let el;
     let attr;
     let cb;
+    let runImmediately;
 
-    if(arg3) {
-        el = arg1
-        attr = arg2
-        cb = arg3
+    // element, attr, callback
+    // element, attr, callback, bool
+    // attr, callback
+    // attr, callback, bool
+
+    if(arg1 instanceof Element) {
+        if(typeof arg4 === 'boolean') {
+            el = arg1; attr = arg2; cb = arg3; runImmediately = arg4;
         } else {
-        el = this
-        attr = arg1
-        cb = arg2
+            el = arg1; attr = arg2; cb = arg3; runImmediately = true;
+        }
+    } else {
+        if(typeof arg3 === 'boolean') {
+            el = this; attr = arg1; cb = arg2; runImmediately = arg3
+        } else {
+            el = this; attr = arg1; cb = arg2; runImmediately = true
+        }
     }
 
     if (attr !== attr.toLowerCase()) {
-        throw new Error(`quill: dynamicText() attr "${attr}" must be lowercase`);
+        throw new Error(`quill: state() attr "${attr}" must be lowercase`);
     }
 
     let handler = () => {
         const value = el.getAttribute(attr);
+        if(!this.isConnected) {
+            quill.removeState(this)
+        } else {
             cb.call(this, value)
         }
+    }
 
-    new MutationObserver(handler)
-        .observe(el, { attributes: true, attributeFilter: [attr] });
+    let observer = new MutationObserver(handler)
+    observer.observe(el, { attributes: true, attributeFilter: [attr] })
 
+    if(!quill.storedState.get(this)) {
+        quill.storedState.set(this, [])
+    }
+    quill.storedState.get(this).push(observer)
+
+    if(runImmediately) {
         handler()
+    }
     return this
 }
 
-HTMLElement.prototype.dynamicText = function(attr, template) {
-    // Set initial text if attr already has a value
-    if (attr !== attr.toLowerCase()) {
-        throw new Error(`quill: dynamicText() attr "${attr}" must be lowercase`);
-    }
-    if (this.getAttribute(attr)) {
-        this.innerText = template.replace('{{}}', this.getAttribute(attr));
-    }
-
-    new MutationObserver(() => {
-        const value = this.getAttribute(attr);
-        this.innerText = template.replace('{{}}', value ?? '');
-    }).observe(this, { attributes: true, attributeFilter: [attr] });
-
-    return this
-};
-
 quill.setChildren = function(el, innerContent) {
     if(typeof innerContent === "string") {
         el.innerText = innerContent

vite.config.ts

@@ -35,6 +35,10 @@ export default defineConfig({
       "/auth": {
         target: "http://localhost:10002",
         changeOrigin: true
+      },
+      "/@server": {
+        target: "http://localhost:10002",
+        changeOrigin: true
       }
     },
     host: true,