And that should be it.

assets/common.css/loading.css

@@ -5,6 +5,11 @@
     min-width: var(--msz-loading-container-width, calc(var(--msz-loading-size, 1) * 100px));
     min-height: var(--msz-loading-container-height, calc(var(--msz-loading-size, 1) * 100px));
 }
+.msz-loading-inline {
+    display: inline-flex;
+    min-width: 0;
+    min-height: 0;
+}
 
 .msz-loading-frame {
     display: flex;

assets/common.js/html.js

@@ -3,8 +3,44 @@ const $query = document.querySelector.bind(document);
 const $queryAll = document.querySelectorAll.bind(document);
 const $text = document.createTextNode.bind(document);
 
-const $insertBefore = function(ref, elem) {
+const $insertBefore = function(target, element) {
-    ref.parentNode.insertBefore(elem, ref);
+    target.parentNode.insertBefore(element, target);
+};
+
+const $appendChild = function(element, child) {
+    switch(typeof child) {
+        case 'undefined':
+            break;
+
+        case 'string':
+            element.appendChild($text(child));
+            break;
+
+        case 'function':
+            $appendChild(element, child());
+            break;
+
+        case 'object':
+            if(child === null)
+                break;
+
+            if(child instanceof Node)
+                element.appendChild(child);
+            else if(child?.element instanceof Node)
+                element.appendChild(child.element);
+            else if(typeof child?.toString === 'function')
+                element.appendChild($text(child.toString()));
+            break;
+
+        default:
+            element.appendChild($text(child.toString()));
+            break;
+    }
+};
+
+const $appendChildren = function(element, ...children) {
+    for(const child of children)
+        $appendChild(element, child);
 };
 
 const $removeChildren = function(element) {
@@ -12,147 +48,87 @@ const $removeChildren = function(element) {
         element.firstChild.remove();
 };
 
-const $jsx = (type, props, ...children) => $create({ tag: type, attrs: props, child: children });
+const $fragment = function(props, ...children) {
-const $jsxf = window.DocumentFragment;
+    const fragment = new DocumentFragment(props);
+    $appendChildren(fragment, ...children);
+    return fragment;
+};
 
-const $create = function(info, attrs, child, created) {
+const $element = function(type, props, ...children) {
-    info = info || {};
+    if(typeof type === 'function')
+        return new type(props ?? {}, ...children);
 
-    if(typeof info === 'string') {
+    const element = document.createElement(type ?? 'div');
-        info = {tag: info};
-        if(attrs)
-            info.attrs = attrs;
-        if(child)
-            info.child = child;
-        if(created)
-            info.created = created;
-    }
 
-    let elem;
+    if(props)
+        for(let key in props) {
+            const prop = props[key];
+            if(prop === undefined || prop === null)
+                continue;
 
-    if(typeof info.tag === 'function') {
+            switch(typeof prop) {
-        elem = new info.tag(info.attrs || {});
+                case 'function':
-    } else {
+                    if(key.substring(0, 2) === 'on')
-        elem = document.createElement(info.tag || 'div');
+                        key = key.substring(2).toLowerCase();
-
+                    element.addEventListener(key, prop);
-        if(info.attrs) {
-            const attrs = info.attrs;
-
-            for(let key in attrs) {
-                const attr = attrs[key];
-                if(attr === undefined || attr === null)
-                    continue;
-
-                switch(typeof attr) {
-                    case 'function':
-                        if(key.substring(0, 2) === 'on')
-                            key = key.substring(2).toLowerCase();
-                        elem.addEventListener(key, attr);
-                        break;
-
-                    case 'object':
-                        if(attr instanceof Array) {
-                            if(key === 'class')
-                                key = 'classList';
-
-                            const prop = elem[key];
-                            let addFunc = null;
-
-                            if(prop instanceof Array)
-                                addFunc = prop.push.bind(prop);
-                            else if(prop instanceof DOMTokenList)
-                                addFunc = prop.add.bind(prop);
-
-                            if(addFunc !== null) {
-                                for(let j = 0; j < attr.length; ++j)
-                                    addFunc(attr[j]);
-                            } else {
-                                if(key === 'classList')
-                                    key = 'class';
-                                elem.setAttribute(key, attr.toString());
-                            }
-                        } else {
-                            if(key === 'class' || key === 'className')
-                                key = 'classList';
-
-                            let setFunc = null;
-                            if(elem[key] instanceof DOMTokenList)
-                                setFunc = (ak, av) => { if(av) elem[key].add(ak); };
-                            else if(elem[key] instanceof CSSStyleDeclaration)
-                                setFunc = (ak, av) => { elem[key].setProperty(ak, av); }
-                            else
-                                setFunc = (ak, av) => { elem[key][ak] = av; };
-
-                            for(const attrKey in attr) {
-                                const attrValue = attr[attrKey];
-                                if(attrValue)
-                                    setFunc(attrKey, attrValue);
-                            }
-                        }
-                        break;
-
-                    case 'boolean':
-                        if(attr)
-                            elem.setAttribute(key, '');
-                        break;
-
-                    default:
-                        if(key === 'className')
-                            key = 'class';
-                        elem.setAttribute(key, attr.toString());
-                        break;
-                }
-            }
-        }
-    }
-
-    if(info.child) {
-        let children = info.child;
-
-        if(!Array.isArray(children))
-            children = [children];
-
-        for(const child of children) {
-            switch(typeof child) {
-                case 'undefined':
-                    break;
-
-                case 'string':
-                    elem.appendChild(document.createTextNode(child));
                     break;
 
                 case 'object':
-                    if(child === null)
+                    if(prop instanceof Array) {
-                        break;
+                        if(key === 'class')
+                            key = 'classList';
 
-                    if(child instanceof Node) {
+                        const attr = element[key];
-                        elem.appendChild(child);
+                        let addFunc = null;
-                    } else if('element' in child) {
+
-                        const childElem = child.element;
+                        if(attr instanceof Array)
-                        if(childElem instanceof Node)
+                            addFunc = attr.push.bind(attr);
-                            elem.appendChild(childElem);
+                        else if(attr instanceof DOMTokenList)
-                        else
+                            addFunc = attr.add.bind(attr);
-                            elem.appendChild($create(child));
+
-                    } else if('getElement' in child) {
+                        if(addFunc !== null) {
-                        const childElem = child.getElement();
+                            for(let j = 0; j < prop.length; ++j)
-                        if(childElem instanceof Node)
+                                addFunc(prop[j]);
-                            elem.appendChild(childElem);
+                        } else {
-                        else
+                            if(key === 'classList')
-                            elem.appendChild($create(child));
+                                key = 'class';
+                            element.setAttribute(key, prop.toString());
+                        }
                     } else {
-                        elem.appendChild($create(child));
+                        if(key === 'class' || key === 'className')
+                            key = 'classList';
+
+                        let setFunc = null;
+                        if(element[key] instanceof DOMTokenList)
+                            setFunc = (ak, av) => { if(av) element[key].add(ak); };
+                        else if(element[key] instanceof CSSStyleDeclaration)
+                            setFunc = (ak, av) => { element[key].setProperty(ak, av); }
+                        else
+                            setFunc = (ak, av) => { element[key][ak] = av; };
+
+                        for(const attrKey in prop) {
+                            const attrValue = prop[attrKey];
+                            if(attrValue)
+                                setFunc(attrKey, attrValue);
+                        }
                     }
                     break;
 
+                case 'boolean':
+                    if(prop)
+                        element.setAttribute(key, '');
+                    break;
+
                 default:
-                    elem.appendChild(document.createTextNode(child.toString()));
+                    if(key === 'className')
+                        key = 'class';
+
+                    element.setAttribute(key, prop.toString());
                     break;
             }
         }
-    }
 
-    if(info.created)
+    $appendChildren(element, ...children);
-        info.created(elem);
 
-    return elem;
+    return element;
 };

assets/common.js/loading.jsx

@@ -62,7 +62,7 @@ const MszLoading = function(options=null) {
 
     let {
         element, size, colour,
-        width, height,
+        width, height, inline,
         containerWidth, containerHeight,
         gap, margin, hidden,
     } = options ?? {};
@@ -74,6 +74,8 @@ const MszLoading = function(options=null) {
 
     if(!element.classList.contains('msz-loading'))
         element.classList.add('msz-loading');
+    if(inline)
+        element.classList.add('msz-loading-inline');
     if(hidden)
         element.classList.add('hidden');
 

assets/misuzu.css/comments/entry.css

@@ -1,9 +1,6 @@
-.comments-entry {
-    /**/
-}
-
 .comments-entry-main {
-    display: flex;
+    display: grid;
+    grid-template-columns: 46px 1fr;
     gap: 2px;
 }
 
@@ -18,7 +15,7 @@
 
 .comments-entry-avatar {
     flex: 0 0 auto;
-    margin: 4px;
+    padding: 4px;
 }
 .comments-entry-wrap {
     flex: 0 1 auto;
@@ -68,9 +65,6 @@
     text-decoration: underline;
 }
 
-.comments-entry-body {
-}
-
 .comments-entry-actions {
     display: flex;
     gap: 2px;

assets/misuzu.css/comments/form.css

@@ -1,26 +1,75 @@
 .comments-form {
     border: 1px solid var(--accent-colour);
     border-radius: 3px;
-    display: flex;
+    margin: 2px 0;
-    gap: 2px;
+    display: grid;
+    grid-template-columns: 46px 1fr;
+    transition: opacity .1s;
+}
+.comments-form-root {
+    margin: 2px;
+}
+.comments-form-disabled {
+    opacity: .5;
 }
 
 .comments-form-avatar {
     flex: 0 0 auto;
-    margin: 3px;
+    padding: 3px;
 }
 .comments-form-wrap {
-    flex: 0 1 auto;
+    display: grid;
-    display: flex;
+    grid-template-rows: 1fr 32px;
-    flex-direction: column;
     gap: 2px;
+    margin: 3px;
+    margin-left: 0;
+    overflow: hidden;
 }
 
 .comments-form-input {
-    display: flex;
+    overflow: hidden;
 }
 .comments-form-input textarea {
     min-width: 100%;
     max-width: 100%;
     width: 100%;
+    min-height: 40px;
+    height: 0;
+}
+.comments-form-root .comments-form-input textarea {
+    min-height: 60px;
+}
+
+.comments-form-actions {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    gap: 6px;
+}
+
+.comments-form-status {
+    flex: 1 1 auto;
+    font-size: 1.2em;
+    line-height: 1.4em;
+    padding: 0 6px;
+    overflow: hidden;
+    transition: color .2s;
+}
+.comments-form-status-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.comments-form-status-error {
+    color: #c00;
+}
+
+.comments-form-pin {
+    flex: 0 0 auto;
+    font-size: 1.2em;
+    line-height: 1.4em;
+}
+
+.comments-form-post {
+    flex: 0 0 auto;
 }

assets/misuzu.js/comments/api.js

@@ -1,226 +1,142 @@
 const MszCommentsApi = (() => {
     return {
         getCategory: async name => {
-            if(typeof name !== 'string')
+            if(typeof name !== 'string' || name.trim() === '')
-                throw 'name must be a string';
+                throw new Error('name is not a valid category name');
-            if(name.trim() === '')
-                throw 'name may not be empty';
 
             const { status, body } = await $xhr.get(
                 `/comments/categories/${name}`,
                 { type: 'json' }
             );
-            if(status === 404)
-                throw 'that category does not exist';
             if(status !== 200)
-                throw 'something went wrong';
+                throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
 
             return body;
         },
         updateCategory: async (name, args) => {
-            if(typeof name !== 'string')
+            if(typeof name !== 'string' || name.trim() === '')
-                throw 'name must be a string';
+                throw new Error('name is not a valid category name');
-            if(name.trim() === '')
-                throw 'name may not be empty';
             if(typeof args !== 'object' || args === null)
-                throw 'args must be a non-null object';
+                throw new Error('args must be a non-null object');
 
             const { status, body } = await $xhr.post(
                 `/comments/categories/${name}`,
                 { csrf: true, type: 'json' },
                 args
             );
-            if(status === 400)
-                throw 'your update is not acceptable';
-            if(status === 401)
-                throw 'you must be logged in to do that';
-            if(status === 403)
-                throw 'you are not allowed to edit that part of the category';
-            if(status === 404)
-                throw 'that category does not exist';
-            if(status === 410)
-                throw 'that category disappeared while attempting to edit it';
             if(status !== 200)
-                throw 'something went wrong';
+                throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
 
             return body;
         },
         getPost: async post => {
-            if(typeof post !== 'string')
+            if(typeof post !== 'string' || post.trim() === '')
-                throw 'post id must be a string';
+                throw new Error('post is not a valid post id');
-            if(post.trim() === '')
-                throw 'post id may not be empty';
 
             const { status, body } = await $xhr.get(
                 `/comments/posts/${post}`,
                 { type: 'json' }
             );
-            if(status === 404)
-                throw 'that post does not exist';
             if(status !== 200)
-                throw 'something went wrong';
+                throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
 
             return body;
         },
         getPostReplies: async post => {
-            if(typeof post !== 'string')
+            if(typeof post !== 'string' || post.trim() === '')
-                throw 'post id must be a string';
+                throw new Error('post is not a valid post id');
-            if(post.trim() === '')
-                throw 'post id may not be empty';
 
             const { status, body } = await $xhr.get(
                 `/comments/posts/${post}/replies`,
                 { type: 'json' }
             );
-            if(status === 404)
-                throw 'that post does not exist';
             if(status !== 200)
-                throw 'something went wrong';
+                throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
 
             return body;
         },
-        createPost: async (post, args) => {
+        createPost: async args => {
-            if(typeof post !== 'string')
-                throw 'post id must be a string';
-            if(post.trim() === '')
-                throw 'post id may not be empty';
             if(typeof args !== 'object' || args === null)
-                throw 'args must be a non-null object';
+                throw new Error('args must be a non-null object');
 
             const { status, body } = await $xhr.post(
                 '/comments/posts',
-                { csrf: true },
+                { csrf: true, type: 'json' },
                 args
             );
+            if(status !== 201)
+                throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
 
-            return status;
+            return body;
         },
         updatePost: async (post, args) => {
-            if(typeof post !== 'string')
+            if(typeof post !== 'string' || post.trim() === '')
-                throw 'post id must be a string';
+                throw new Error('post is not a valid post id');
-            if(post.trim() === '')
-                throw 'post id may not be empty';
             if(typeof args !== 'object' || args === null)
-                throw 'args must be a non-null object';
+                throw new Error('args must be a non-null object');
 
             const { status, body } = await $xhr.post(
                 `/comments/posts/${post}`,
                 { csrf: true, type: 'json' },
                 args
             );
-            if(status === 400)
-                throw 'your update is not acceptable';
-            if(status === 401)
-                throw 'you must be logged in to do that';
-            if(status === 403)
-                throw 'you are not allowed to edit that part of the post';
-            if(status === 404)
-                throw 'that post does not exist';
-            if(status === 410)
-                throw 'that post disappeared while attempting to edit it';
             if(status !== 200)
-                throw 'something went wrong';
+                throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
 
             return body;
         },
         deletePost: async post => {
-            if(typeof post !== 'string')
+            if(typeof post !== 'string' || post.trim() === '')
-                throw 'post id must be a string';
+                throw new Error('post is not a valid post id');
-            if(post.trim() === '')
-                throw 'post id may not be empty';
 
-            const { status } = await $xhr.delete(`/comments/posts/${post}`, { csrf: true });
+            const { status, body } = await $xhr.delete(`/comments/posts/${post}`, { csrf: true, type: 'json' });
-            if(status === 401)
-                throw 'you must be logged in to do that';
-            if(status === 403)
-                throw 'you are not allowed to delete that post';
-            if(status === 404)
-                throw 'that post does not exist';
             if(status !== 204)
-                throw 'something went wrong';
+                throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
         },
         restorePost: async post => {
-            if(typeof post !== 'string')
+            if(typeof post !== 'string' || post.trim() === '')
-                throw 'post id must be a string';
+                throw new Error('post is not a valid post id');
-            if(post.trim() === '')
-                throw 'post id may not be empty';
 
-            const { status } = await $xhr.post(`/comments/posts/${post}/restore`, { csrf: true });
+            const { status, body } = await $xhr.post(`/comments/posts/${post}/restore`, { csrf: true, type: 'json' });
-            if(status === 400)
-                throw 'that post is not deleted';
-            if(status === 401)
-                throw 'you must be logged in to do that';
-            if(status === 403)
-                throw 'you are not allowed to restore posts';
-            if(status === 404)
-                throw 'that post does not exist';
             if(status !== 200)
-                throw 'something went wrong';
+                throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
         },
         nukePost: async post => {
-            if(typeof post !== 'string')
+            if(typeof post !== 'string' || post.trim() === '')
-                throw 'post id must be a string';
+                throw new Error('post is not a valid post id');
-            if(post.trim() === '')
-                throw 'post id may not be empty';
 
-            const { status } = await $xhr.post(`/comments/posts/${post}/nuke`, { csrf: true });
+            const { status } = await $xhr.post(`/comments/posts/${post}/nuke`, { csrf: true, type: 'json' });
-            if(status === 400)
-                throw 'that post is not deleted';
-            if(status === 401)
-                throw 'you must be logged in to do that';
-            if(status === 403)
-                throw 'you are not allowed to nuke posts';
-            if(status === 404)
-                throw 'that post does not exist';
             if(status !== 200)
-                throw 'something went wrong';
+                throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
         },
         createVote: async (post, vote) => {
-            if(typeof post !== 'string')
+            if(typeof post !== 'string' || post.trim() === '')
-                throw 'post id must be a string';
+                throw new Error('post is not a valid post id');
-            if(post.trim() === '')
-                throw 'post id may not be empty';
             if(typeof vote === 'string')
                 vote = parseInt(vote);
             if(typeof vote !== 'number' || isNaN(vote))
-                throw 'vote must be a number';
+                throw new Error('vote must be a number');
 
             const { status, body } = await $xhr.post(
                 `/comments/posts/${post}/vote`,
                 { csrf: true, type: 'json' },
                 { vote }
             );
-            if(status === 400)
+            if(status !== 201)
-                throw 'your vote is not acceptable';
+                throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
-            if(status === 401)
-                throw 'you must be logged in to do that';
-            if(status === 403)
-                throw 'you are not allowed to like or dislike comments';
-            if(status === 404)
-                throw 'that post does not exist';
-            if(status !== 200)
-                throw 'something went wrong';
 
             return body;
         },
         deleteVote: async post => {
-            if(typeof post !== 'string')
+            if(typeof post !== 'string' || post.trim() === '')
-                throw 'post id must be a string';
+                throw new Error('post is not a valid post id');
-            if(post.trim() === '')
-                throw 'post id may not be empty';
 
             const { status, body } = await $xhr.delete(
                 `/comments/posts/${post}/vote`,
                 { csrf: true, type: 'json' }
             );
-            if(status === 401)
-                throw 'you must be logged in to do that';
-            if(status === 403)
-                throw 'you are not allowed to like or dislike comments';
-            if(status === 404)
-                throw 'that post does not exist';
             if(status !== 200)
-                throw 'something went wrong';
+                throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
 
             return body;
         },

assets/misuzu.js/comments/form.jsx

@@ -1,4 +1,7 @@
-const MszCommentsFormNotice = function(body) {
+#include comments/api.js
+
+const MszCommentsFormNotice = function(args) {
+    const { body } = args ?? {};
     const element = <div class="comments-notice">
         <div class="comments-notice-inner">{body}</div>
     </div>;
@@ -8,25 +11,109 @@ const MszCommentsFormNotice = function(body) {
     };
 };
 
-const MszCommentsForm = function(userInfo, root) {
+const MszCommentsForm = function(args) {
-    const element = <form class="comments-form" style={`--user-colour: ${userInfo.colour}; display: flex;`}>
+    const {
+        userInfo, catInfo, postInfo,
+        listing, repliesToggle, replyToggle,
+    } = args ?? {};
+
+    const defaultStatus = () => <>Press <kbd>enter</kbd> to submit, use <kbd>shift</kbd>+<kbd>enter</kbd> to start a new line.</>;
+    const status = <div class="comments-form-status-text">{defaultStatus}</div>;
+
+    const element = <form class={{ 'comments-form': true, 'comments-form-root': !postInfo }} style={`--user-colour: ${userInfo.colour}`}>
+        <input type="hidden" name="category" value={catInfo.name} />
+        {postInfo ? <input type="hidden" name="reply_to" value={postInfo.id} /> : null}
         <div class="comments-form-avatar">
             <img src={userInfo.avatar} alt="" width="40" height="40" class="avatar" />
         </div>
         <div class="comments-form-wrap">
             <div class="comments-form-input">
-                <textarea class="input__textarea" placeholder="Share your extensive insights..." />
+                <textarea class="input__textarea" name="body" placeholder="Share your extensive insights..." onkeydown={ev => {
+                    if(status.classList.contains('comments-form-status-error')) {
+                        status.classList.remove('comments-form-status-error');
+                        $removeChildren(status);
+                        $appendChild(status, defaultStatus);
+                    }
+
+                    if(ev.key === 'Enter' && !ev.shiftKey) {
+                        ev.preventDefault();
+                        element.requestSubmit();
+                    }
+
+                    if(ev.key === 'p' && ev.altKey) {
+                        ev.preventDefault();
+                        if(element.elements.pin)
+                            element.elements.pin.checked = !element.elements.pin.checked;
+                    }
+                }} />
             </div>
-            <div style="display: flex;">
+            <div class="comments-form-actions">
-                <div>Press enter to submit, use shift+enter to start a new line.</div>
+                <div class="comments-form-status">{status}</div>
-                <div style="flex-grow: 1;" />
+                {userInfo.can_pin && !postInfo ? <div class="comments-form-pin"><label><input type="checkbox" name="pin" /> Pin</label></div> : null}
-                {userInfo.can_pin ? <div><label><input type="checkbox"/> Pin</label></div> : null}
+                <div class="comments-form-post"><button class="input__button">Post</button></div>
-                <div><button class="input__button">Post</button></div>
             </div>
         </div>
     </form>;
 
+    const forAllFields = closure => {
+        for(let i = 0; i < element.elements.length; ++i)
+            closure(element.elements[i]);
+    };
+
+    const setDisabled = state => {
+        element.classList.toggle('comments-form-disabled', state);
+        forAllFields(field => field.disabled = state);
+    };
+
+    element.onsubmit = async ev => {
+        ev.preventDefault();
+
+        if(element.classList.contains('comments-form-disabled'))
+            return;
+
+        setDisabled(true);
+
+        try {
+            const fields = {};
+            forAllFields(field => {
+                if(!field.name)
+                    return;
+
+                if(field.type === 'checkbox') {
+                    if(field.checked)
+                        fields[field.name] = field.value;
+                } else
+                    fields[field.name] = field.value;
+            });
+
+            listing.addPost(catInfo, userInfo, await MszCommentsApi.createPost(fields));
+            listing.reorder();
+            listing.visible = true;
+
+            if(repliesToggle) {
+                repliesToggle.open = true;
+                ++repliesToggle.count;
+            }
+
+            if(replyToggle?.active)
+                replyToggle.click();
+
+            element.elements.body.value = '';
+            if(element.elements.pin)
+                element.elements.pin.checked = false;
+        } catch(ex) {
+            status.classList.add('comments-form-status-error');
+            status.textContent = ex;
+        } finally {
+            setDisabled(false);
+        }
+    };
+
     return {
         get element() { return element; },
+
+        focus() {
+            element.elements.body.focus();
+        },
     };
 };

assets/misuzu.js/comments/init.js

@@ -3,9 +3,7 @@
 const MszCommentsInit = () => {
     const targets = Array.from($queryAll('.js-comments'));
     for(const target of targets) {
-        const section = new MszCommentsSection({
+        const section = new MszCommentsSection({ category: target.dataset.category });
-            category: target.dataset.category,
-        });
         target.replaceWith(section.element);
     }
 };

assets/misuzu.js/comments/listing.jsx

@@ -2,7 +2,9 @@
 #include comments/api.js
 #include comments/form.jsx
 
-const MszCommentsEntryVoteButton = function(name, title, icon, vote) {
+const MszCommentsEntryVoteButton = function(args) {
+    const { name, title, icon, vote } = args ?? {};
+
     let element, counter;
     const isCast = () => element?.classList.contains('comments-entry-action-vote-cast') === true;
 
@@ -44,19 +46,21 @@ const MszCommentsEntryVoteButton = function(name, title, icon, vote) {
     };
 };
 
-const MszCommentsEntryVoteActions = function(vote) {
+const MszCommentsEntryVoteActions = function(args) {
-    const like = new MszCommentsEntryVoteButton(
+    const { vote } = args ?? {};
-        'like',
+
-        '$0 like$s',
+    const like = new MszCommentsEntryVoteButton({
-        <i class="fas fa-chevron-up" />,
+        name: 'like',
-        cast => { vote(cast ? 0 : 1); }
+        title: '$0 like$s',
-    );
+        icon: <i class="fas fa-chevron-up" />,
-    const dislike = new MszCommentsEntryVoteButton(
+        vote: cast => { vote(cast ? 0 : 1); }
-        'dislike',
+    });
-        '$0 dislike$s',
+    const dislike = new MszCommentsEntryVoteButton({
-        <i class="fas fa-chevron-down" />,
+        name: 'dislike',
-        cast => { vote(cast ? 0 : -1); }
+        title: '$0 dislike$s',
-    );
+        icon: <i class="fas fa-chevron-down" />,
+        vote: cast => { vote(cast ? 0 : -1); }
+    });
 
     const element = <div class="comments-entry-actions-group comments-entry-actions-group-votes">
         {like}
@@ -81,9 +85,11 @@ const MszCommentsEntryVoteActions = function(vote) {
     };
 };
 
-const MszCommentsEntryReplyToggleButton = function(replies, toggleReplies) {
+const MszCommentsEntryReplyToggleButton = function(args) {
+    const { replies, toggle } = args ?? {};
+
     let icon, counter;
-    const element = <button class="comments-entry-action" title="No replies" onclick={() => { toggleReplies(); }}>
+    const element = <button class="comments-entry-action" title="No replies" onclick={() => { toggle(); }}>
         {icon = <i class="fas fa-plus" />}
         {counter = <span />}
     </button>;
@@ -118,8 +124,10 @@ const MszCommentsEntryReplyToggleButton = function(replies, toggleReplies) {
     };
 };
 
-const MszCommentsEntryReplyCreateButton = function(toggleForm) {
+const MszCommentsEntryReplyCreateButton = function(args) {
-    const element = <button class="comments-entry-action" title="Reply" onclick={() => { toggleForm(); }}>
+    const { toggle } = args ?? {};
+
+    const element = <button class="comments-entry-action" title="Reply" onclick={() => { toggle(); }}>
         <i class="fas fa-reply" />
         <span>Reply</span>
     </button>;
@@ -132,12 +140,18 @@ const MszCommentsEntryReplyCreateButton = function(toggleForm) {
 
         get active() { return element.classList.contains('comments-entry-action-reply-active'); },
         set active(state) { element.classList.toggle('comments-entry-action-reply-active', state); },
+
+        click() {
+            element.click();
+        },
     };
 };
 
-const MszCommentsEntryReplyActions = function(replies, toggleReplies, toggleForm) {
+const MszCommentsEntryReplyActions = function(args) {
-    const toggle = new MszCommentsEntryReplyToggleButton(replies, toggleReplies);
+    const { replies, toggleReplies, toggleForm } = args ?? {};
-    const button = toggleForm ? new MszCommentsEntryReplyCreateButton(toggleForm) : undefined;
+
+    const toggle = new MszCommentsEntryReplyToggleButton({ replies, toggle: toggleReplies });
+    const button = toggleForm ? new MszCommentsEntryReplyCreateButton({ toggle: toggleForm }) : undefined;
 
     const element = <div class="comments-entry-actions-group comments-entry-actions-group-replies">
         {toggle}
@@ -163,7 +177,8 @@ const MszCommentsEntryReplyActions = function(replies, toggleReplies, toggleForm
     };
 };
 
-const MszCommentsEntryGeneralButton = function(icon, title, action) {
+const MszCommentsEntryGeneralButton = function(args) {
+    const { icon, title, action } = args ?? {};
     const element = <button class="comments-entry-action" title={title} onclick={() => { action(); }}>{icon}</button>;
 
     return {
@@ -177,21 +192,21 @@ const MszCommentsEntryGeneralButton = function(icon, title, action) {
     };
 };
 
-const MszCommentsEntryGeneralActions = function(deleteAction, restoreAction, nukeAction, pinAction, unpinAction) {
+const MszCommentsEntryGeneralActions = function(args) {
     let deleteButton, restoreButton, nukeButton, pinButton, unpinButton;
     const element = <div class="comments-entry-actions-group">
-        {deleteButton = deleteAction ? new MszCommentsEntryGeneralButton(<i class="fas fa-trash" />, 'Delete', deleteAction) : null}
+        {deleteButton = args.delete ? new MszCommentsEntryGeneralButton({ icon: <i class="fas fa-trash" />, title: 'Delete', action: args.delete }) : null}
-        {restoreButton = restoreAction ? new MszCommentsEntryGeneralButton(<i class="fas fa-trash-restore" />, 'Restore', restoreAction) : null}
+        {restoreButton = args.restore ? new MszCommentsEntryGeneralButton({ icon: <i class="fas fa-trash-restore" />, title: 'Restore', action: args.restore }) : null}
-        {nukeButton = nukeAction ? new MszCommentsEntryGeneralButton(<i class="fas fa-radiation-alt" />, 'Permanently delete', nukeAction) : null}
+        {nukeButton = args.nuke ? new MszCommentsEntryGeneralButton({ icon: <i class="fas fa-radiation-alt" />, title: 'Permanently delete', action: args.nuke }) : null}
-        {pinButton = pinAction ? new MszCommentsEntryGeneralButton(<i class="fas fa-thumbtack" />, 'Pin', pinAction) : null}
+        {pinButton = args.pin ? new MszCommentsEntryGeneralButton({ icon: <i class="fas fa-thumbtack" />, title: 'Pin', action: args.pin }) : null}
-        {unpinButton = unpinAction ? new MszCommentsEntryGeneralButton(<i class="fas fa-screwdriver" />, 'Unpin', unpinAction) : null}
+        {unpinButton = args.unpin ? new MszCommentsEntryGeneralButton({ icon: <i class="fas fa-screwdriver" />, title: 'Unpin', action: args.unpin }) : null}
     </div>;
 
     return {
         get element() { return element; },
 
         get visible() { return !element.classList.contains('hidden'); },
-        set visible(state) { setVisible(state); },
+        set visible(state) { element.classList.toggle('hidden', !state); },
 
         get disabled() { return element.classList.contains('comments-entry-actions-group-disabled'); },
         set disabled(state) {
@@ -256,24 +271,30 @@ const MszCommentsEntryActions = function() {
 const MszCommentsEntry = function(catInfo, userInfo, postInfo, listing, root) {
     const actions = new MszCommentsEntryActions;
 
-    const voteActions = new MszCommentsEntryVoteActions(async vote => {
+    const voteActions = new MszCommentsEntryVoteActions({
-        if(voteActions.disabled)
+        vote: async vote => {
-            return;
+            if(voteActions.disabled)
+                return;
 
-        voteActions.disabled = true;
+            voteActions.disabled = true;
-        try {
+            try {
-            voteActions.updateVotes(vote === 0
+                voteActions.updateVotes(vote === 0
-                ? await MszCommentsApi.deleteVote(postInfo.id)
+                    ? await MszCommentsApi.deleteVote(postInfo.id)
-                : await MszCommentsApi.createVote(postInfo.id, vote));
+                    : await MszCommentsApi.createVote(postInfo.id, vote));
-        } catch(ex) {
+            } catch(ex) {
-            console.error(ex);
+                console.error(ex);
-        } finally {
+            } finally {
-            voteActions.disabled = false;
+                enableVoteActionsMaybe();
+            }
         }
     });
     actions.appendGroup(voteActions);
 
-    voteActions.disabled = !userInfo.can_vote || !!postInfo.deleted;
+    const enableVoteActionsMaybe = () => {
+        voteActions.disabled = !userInfo.can_vote || !!postInfo.deleted || !!catInfo.locked;
+    };
+
+    enableVoteActionsMaybe();
     voteActions.updateVotes(postInfo);
 
     const repliesIsArray = Array.isArray(postInfo.replies);
@@ -287,9 +308,9 @@ const MszCommentsEntry = function(catInfo, userInfo, postInfo, listing, root) {
 
     let replyForm;
     let repliesLoaded = replies.loaded;
-    const replyActions = new MszCommentsEntryReplyActions(
+    const replyActions = new MszCommentsEntryReplyActions({
-        postInfo.replies,
+        replies: postInfo.replies,
-        async () => {
+        toggleReplies: async () => {
             replyActions.toggle.open = replies.visible = !replies.visible;
             if(!repliesLoaded) {
                 repliesLoaded = true;
@@ -302,34 +323,49 @@ const MszCommentsEntry = function(catInfo, userInfo, postInfo, listing, root) {
                 }
             }
         },
-        userInfo.can_create ? () => {
+        toggleForm: userInfo.can_create ? () => {
             if(replyForm) {
                 replyActions.button.active = false;
                 repliesElem.removeChild(replyForm.element);
                 replyForm = null;
             } else {
                 replyActions.button.active = true;
-                replyForm = new MszCommentsForm(userInfo);
+                replyForm = new MszCommentsForm({
+                    userInfo, catInfo, postInfo,
+                    listing: replies,
+                    repliesToggle: replyActions.toggle,
+                    replyToggle: replyActions.button,
+                });
                 $insertBefore(replies.element, replyForm.element);
+                replyForm.focus();
             }
         } : null,
-    );
+    });
     actions.appendGroup(replyActions);
 
-    replyActions.toggle.open = replies.visible;
+    const enableReplyButtonMaybe = () => {
-    if(replyActions.button)
+        if(replyActions.button)
-        replyActions.button.visible = !catInfo.locked;
+            replyActions.button.visible = !catInfo.locked && !postInfo.deleted;
-    replyActions.updateVisible();
+        replyActions.updateVisible();
+    };
 
-    const generalActions = new MszCommentsEntryGeneralActions(
+    replyActions.toggle.open = replies.visible;
-        postInfo.can_delete ? async () => {
+    enableReplyButtonMaybe();
+
+    const generalActions = new MszCommentsEntryGeneralActions({
+        delete: postInfo.can_delete ? async () => {
             generalActions.disabled = true;
             try {
+                if(!await MszShowConfirmBox(`Are you sure you want to delete comment #${postInfo.id}?`, 'Deleting a comment'))
+                    return;
+
                 postInfo.deleted = new Date;
                 await MszCommentsApi.deletePost(postInfo.id);
-                if(restoreButton) {
+                if(generalActions.restoreButton) {
                     setOptionalTime(deletedElem, new Date, 'commentDeleted');
                     generalActions.deleteVisible = false;
+                    enableVoteActionsMaybe();
+                    enableReplyButtonMaybe();
                     listing.reorder();
                 } else
                     nukeThePost();
@@ -340,7 +376,7 @@ const MszCommentsEntry = function(catInfo, userInfo, postInfo, listing, root) {
                 generalActions.disabled = false;
             }
         } : null,
-        postInfo.can_delete_any ? async () => {
+        restore: postInfo.can_delete_any ? async () => {
             generalActions.disabled = true;
             const deleted = postInfo.deleted;
             try {
@@ -348,7 +384,8 @@ const MszCommentsEntry = function(catInfo, userInfo, postInfo, listing, root) {
                 await MszCommentsApi.restorePost(postInfo.id);
                 setOptionalTime(deletedElem, null, 'commentDeleted');
                 generalActions.deleteVisible = true;
-                voteActions.disabled = false;
+                enableVoteActionsMaybe();
+                enableReplyButtonMaybe();
                 listing.reorder();
             } catch(ex) {
                 postInfo.deleted = deleted;
@@ -357,7 +394,7 @@ const MszCommentsEntry = function(catInfo, userInfo, postInfo, listing, root) {
                 generalActions.disabled = false;
             }
         } : null,
-        postInfo.can_delete_any ? async () => {
+        nuke: postInfo.can_delete_any ? async () => {
             generalActions.disabled = true;
             try {
                 await MszCommentsApi.nukePost(postInfo.id);
@@ -368,13 +405,13 @@ const MszCommentsEntry = function(catInfo, userInfo, postInfo, listing, root) {
                 generalActions.disabled = false;
             }
         } : null,
-        root && userInfo.can_pin ? async () => {
+        pin: root && userInfo.can_pin ? async () => {
             generalActions.disabled = true;
             try {
                 if(!await MszShowConfirmBox(`Are you sure you want to pin comment #${postInfo.id}?`, 'Pinning a comment'))
                     return;
 
-                const result = await MszCommentsApi.updatePost(postInfo.id, { pin: '1' });
+                const result = await MszCommentsApi.updatePost(postInfo.id, { pin: 'on' });
                 generalActions.pinVisible = !result.pinned;
                 setOptionalTime(pinnedElem, result.pinned, 'commentPinned');
                 listing.reorder();
@@ -384,10 +421,10 @@ const MszCommentsEntry = function(catInfo, userInfo, postInfo, listing, root) {
                 generalActions.disabled = false;
             }
         } : null,
-        root && userInfo.can_pin ? async () => {
+        unpin: root && userInfo.can_pin ? async () => {
             generalActions.disabled = true;
             try {
-                const result = await MszCommentsApi.updatePost(postInfo.id, { pin: '0' });
+                const result = await MszCommentsApi.updatePost(postInfo.id, { pin: '' });
                 generalActions.pinVisible = !result.pinned;
                 setOptionalTime(pinnedElem, result.pinned, 'commentPinned');
                 listing.reorder();
@@ -397,7 +434,7 @@ const MszCommentsEntry = function(catInfo, userInfo, postInfo, listing, root) {
                 generalActions.disabled = false;
             }
         } : null,
-    );
+    });
     actions.appendGroup(generalActions);
 
     generalActions.deleteVisible = !postInfo.deleted;
@@ -529,9 +566,9 @@ const MszCommentsEntry = function(catInfo, userInfo, postInfo, listing, root) {
             listing.element.removeChild(element);
         else {
             generalActions.visible = false;
-            voteActions.disabled = true;
-            voteActions.updateVotes();
             generalActions.disabled = true;
+            enableVoteActionsMaybe();
+            enableReplyButtonMaybe();
             setUserInfo(null);
             setBody(null);
             setOptionalTime(deletedElem, true, 'commentDeleted', true, 'deleted');
@@ -540,16 +577,11 @@ const MszCommentsEntry = function(catInfo, userInfo, postInfo, listing, root) {
     };
 
     return {
-        get element() {
+        get element() { return element; },
-            return element;
-        },
 
         updateLocked() {
-            if(replyActions.button) {
+            enableVoteActionsMaybe();
-                replyActions.button.visible = !catInfo.locked;
+            enableReplyButtonMaybe();
-                replyActions.updateVisible();
-            }
-
             replies.updateLocked();
         },
     };
@@ -590,10 +622,14 @@ const MszCommentsListing = function(options) {
         },
         updateLocked() {
             for(const [, value] of entries)
-                entries.updateLocked();
+                value.updateLocked();
         },
 
-        addPost(catInfo, userInfo, postInfo, parentId=null) {
+        addPost(catInfo, userInfo, postInfo) {
+            const existing = element.querySelector(`[data-comment="${postInfo.id}"]`);
+            if(existing)
+                element.removeChild(existing);
+
             const entry = new MszCommentsEntry(catInfo ?? {}, userInfo ?? {}, postInfo, pub, root);
             entries.set(postInfo.id, entry);
             element.appendChild(entry.element);

assets/misuzu.js/comments/section.jsx

@@ -28,15 +28,15 @@ const MszCommentsSection = function(args) {
         form = elem;
         $insertBefore(element.firstChild, form.element);
     };
-    const initForm = (user, category) => {
+    const initForm = (userInfo, catInfo) => {
-        if(!user)
+        if(!userInfo)
-            setForm(new MszCommentsFormNotice('You must be logged in to post comments.'));
+            setForm(new MszCommentsFormNotice({ body: 'You must be logged in to post comments.' }));
-        else if(!user.can_create)
+        else if(!userInfo.can_create)
-            setForm(new MszCommentsFormNotice('You are not allowed to comment.'));
+            setForm(new MszCommentsFormNotice({ body: 'You are not allowed to comment.' }));
-        else if(category.locked)
+        else if(catInfo.locked)
-            setForm(new MszCommentsFormNotice('This comment section is closed.'));
+            setForm(new MszCommentsFormNotice({ body: 'This comment section is closed.' }));
         else
-            setForm(new MszCommentsForm(user, true));
+            setForm(new MszCommentsForm({ userInfo, catInfo, listing }));
     };
 
     const pub = {
@@ -59,6 +59,7 @@ const MszCommentsSection = function(args) {
                         category,
                         () => {
                             initForm(user, category);
+                            listing.updateLocked();
                         }
                     ));
 
@@ -67,7 +68,7 @@ const MszCommentsSection = function(args) {
                 console.error(ex);
                 listing.removeLoading();
 
-                form = new MszCommentsFormNotice('Failed to load comments.');
+                form = new MszCommentsFormNotice({ body: 'Failed to load comments.' });
                 $insertBefore(element.firstChild, form.element);
 
                 if(!retryAct)

assets/misuzu.js/embed/audio.js

@@ -9,41 +9,32 @@ const MszAudioEmbedPlayerEvents = function() {
 };
 
 const MszAudioEmbed = function(player) {
-    const elem = $create({
+    const element = $element('div', { classList: ['aembed', 'aembed-' + player.getType()] }, player);
-        attrs: {
-            classList: ['aembed', 'aembed-' + player.getType()],
-        },
-        child: player,
-    });
 
     return {
-        getElement: function() {
+        get element() { return element; },
-            return elem;
+        get player() { return player; },
-        },
         appendTo: function(target) {
-            target.appendChild(elem);
+            target.appendChild(element);
         },
         insertBefore: function(ref) {
-            $insertBefore(ref, elem);
+            $insertBefore(ref, element);
         },
         nuke: function() {
-            elem.remove();
+            element.remove();
         },
         replaceElement(target) {
-            $insertBefore(target, elem);
+            $insertBefore(target, element);
             target.remove();
         },
-        getPlayer: function() {
-            return player;
-        },
     };
 };
 
 const MszAudioEmbedPlayer = function(metadata, options) {
     options = options || {};
 
-    const shouldAutoplay = options.autoplay === undefined || options.autoplay,
+    const shouldAutoplay = options.autoplay === undefined || options.autoplay;
-        haveNativeControls = options.nativeControls !== undefined && options.nativeControls;
+    const haveNativeControls = options.nativeControls !== undefined && options.nativeControls;
 
     const playerAttrs = {
         src: metadata.url,
@@ -58,26 +49,21 @@ const MszAudioEmbedPlayer = function(metadata, options) {
     const watchers = new MszWatchers;
     watchers.define(MszAudioEmbedPlayerEvents());
 
-    const player = $create({
+    const element = $element('audio', playerAttrs);
-        tag: 'audio',
-        attrs: playerAttrs,
-    });
 
     const pub = {
-        getElement: function() {
+        get element() { return element; },
-            return player;
-        },
         appendTo: function(target) {
-            target.appendChild(player);
+            target.appendChild(element);
         },
         insertBefore: function(ref) {
-            $insertBefore(ref, player);
+            $insertBefore(ref, element);
         },
         nuke: function() {
-            player.remove();
+            element.remove();
         },
         replaceElement(target) {
-            $insertBefore(target, player);
+            $insertBefore(target, element);
             target.remove();
         },
         getType: function() { return 'external'; },
@@ -86,76 +72,76 @@ const MszAudioEmbedPlayer = function(metadata, options) {
     pub.watch = (name, handler) => watchers.watch(name, handler);
     pub.unwatch = (name, handler) => watchers.unwatch(name, handler);
 
-    player.addEventListener('play', function() { watchers.call('play', pub); });
+    element.addEventListener('play', function() { watchers.call('play', pub); });
 
-    const pPlay = function() { player.play(); };
+    const pPlay = function() { element.play(); };
     pub.play = pPlay;
 
-    const pPause = function() { player.pause(); };
+    const pPause = function() { element.pause(); };
     pub.pause = pPause;
 
     let stopCalled = false;
-    player.addEventListener('pause', function() {
+    element.addEventListener('pause', function() {
         watchers.call(stopCalled ? 'stop' : 'pause', pub);
         stopCalled = false;
     });
 
     const pStop = function() {
         stopCalled = true;
-        player.pause();
+        element.pause();
-        player.currentTime = 0;
+        element.currentTime = 0;
     };
     pub.stop = pStop;
 
-    const pIsPlaying = function() { return !player.paused; };
+    const pIsPlaying = function() { return !element.paused; };
     pub.isPlaying = pIsPlaying;
 
-    const pIsMuted = function() { return player.muted; };
+    const pIsMuted = function() { return element.muted; };
     pub.isMuted = pIsMuted;
 
-    let lastMuteState = player.muted;
+    let lastMuteState = element.muted;
-    player.addEventListener('volumechange', function() {
+    element.addEventListener('volumechange', function() {
-        if(lastMuteState !== player.muted) {
+        if(lastMuteState !== element.muted) {
-            lastMuteState = player.muted;
+            lastMuteState = element.muted;
             watchers.call('mute', pub, [lastMuteState]);
         } else
-            watchers.call('volume', pub, [player.volume]);
+            watchers.call('volume', pub, [element.volume]);
     });
 
-    const pSetMuted = function(state) { player.muted = state; };
+    const pSetMuted = function(state) { element.muted = state; };
     pub.setMuted = pSetMuted;
 
-    const pGetVolume = function() { return player.volume; };
+    const pGetVolume = function() { return element.volume; };
     pub.getVolume = pGetVolume;
 
-    const pSetVolume = function(volume) { player.volume = volume; };
+    const pSetVolume = function(volume) { element.volume = volume; };
     pub.setVolume = pSetVolume;
 
-    const pGetPlaybackRate = function() { return player.playbackRate; };
+    const pGetPlaybackRate = function() { return element.playbackRate; };
     pub.getPlaybackRate = pGetPlaybackRate;
 
-    player.addEventListener('ratechange', function() {
+    element.addEventListener('ratechange', function() {
-        watchers.call('rate', pub, [player.playbackRate]);
+        watchers.call('rate', pub, [element.playbackRate]);
     });
 
-    const pSetPlaybackRate = function(rate) { player.playbackRate = rate; };
+    const pSetPlaybackRate = function(rate) { element.playbackRate = rate; };
     pub.setPlaybackRate = pSetPlaybackRate;
 
     window.addEventListener('durationchange', function() {
-        watchers.call('duration', pub, [player.duration]);
+        watchers.call('duration', pub, [element.duration]);
     });
 
-    const pGetDuration = function() { return player.duration; };
+    const pGetDuration = function() { return element.duration; };
     pub.getDuration = pGetDuration;
 
     window.addEventListener('timeupdate', function() {
-        watchers.call('time', pub, [player.currentTime]);
+        watchers.call('time', pub, [element.currentTime]);
     });
 
-    const pGetTime = function() { return player.currentTime; };
+    const pGetTime = function() { return element.currentTime; };
     pub.getTime = pGetTime;
 
-    const pSeek = function(time) { player.currentTime = time; };
+    const pSeek = function(time) { element.currentTime = time; };
     pub.seek = pSeek;
 
     return pub;
@@ -167,38 +153,32 @@ const MszAudioEmbedPlaceholder = function(metadata, options) {
     if(typeof options.player !== 'function' && typeof options.onclick !== 'function')
         throw 'Neither a player nor an onclick handler were provided.';
 
-    let title = [],
+    let title = [];
-        album = undefined;
+    let album;
     if(metadata.media !== undefined && metadata.media.tags !== undefined) {
         const tags = metadata.media.tags;
 
         if(tags.title !== undefined) {
             if(tags.artist !== undefined) {
-                title.push({
+                title.push($element(
-                    tag: 'span',
+                    'span',
-                    attrs: {
+                    { className: 'aembedph-info-title-artist' },
-                        className: 'aembedph-info-title-artist',
+                    tags.artist,
-                    },
+                ));
-                    child: tags.artist,
-                });
                 title.push(' - ');
             }
 
-            title.push({
+            title.push($element(
-                tag: 'span',
+                'span',
-                attrs: {
+                { className: 'aembedph-info-title-title' },
-                    className: 'aembedph-info-title-title',
+                tags.title,
-                },
+            ));
-                child: tags.title,
-            });
         } else {
-            title.push({
+            title.push($element(
-                tag: 'span',
+                'span',
-                attrs: {
+                { className: 'aembedph-info-title-title' },
-                    className: 'aembedph-info-title-title',
+                metadata.title,
-                },
+            ));
-                child: metadata.title,
-            });
         }
 
         if(tags.album !== undefined && tags.album !== tags.title)
@@ -207,159 +187,131 @@ const MszAudioEmbedPlaceholder = function(metadata, options) {
 
     const infoChildren = [];
 
-    infoChildren.push({
+    infoChildren.push($element(
-        tag: 'h1',
+        'h1',
-        attrs: {
+        { className: 'aembedph-info-title' },
-            className: 'aembedph-info-title',
+        ...title,
-        },
+    ));
-        child: title,
-    });
 
-    infoChildren.push({
+    infoChildren.push($element(
-        tags: 'p',
+        'p',
-        attrs: {
+        { className: 'aembedph-info-album' },
-            className: 'aembedph-info-album',
+        album,
-        },
+    ));
-        child: album,
-    });
 
-    infoChildren.push({
+    infoChildren.push($element(
-        tag: 'div',
+        'div',
-        attrs: {
+        { className: 'aembedph-info-site' },
-            className: 'aembedph-info-site',
+        metadata.site_name,
-        },
+    ));
-        child: metadata.site_name,
-    });
 
     const style = [];
     if(typeof metadata.color !== 'undefined')
         style.push('--aembedph-colour: ' + metadata.color);
 
-    const coverBackground = $create({
+    const coverBackground = $element(
-        attrs: {
+        'div',
-            className: 'aembedph-bg',
+        { className: 'aembedph-bg' },
-        },
+        $element('img', {
-        child: {
+            alt: '',
-            tag: 'img',
+            src: metadata.image,
-            attrs: {
+            onerror: function(ev) {
-                alt: '',
+                coverBackground.classList.add('aembedph-bg-none');
-                src: metadata.image,
-                onerror: function(ev) {
-                    coverBackground.classList.add('aembedph-bg-none');
-                },
             },
-        },
+        }),
-    });
+    );
 
-    const coverPreview = $create({
+    const coverPreview = $element(
-        attrs: {
+        'div',
-            className: 'aembedph-info-cover',
+        { className: 'aembedph-info-cover' },
-        },
+        $element('img', {
-        child: {
+            alt: '',
-            tag: 'img',
+            src: metadata.image,
-            attrs: {
+            onerror: function(ev) {
-                alt: '',
+                coverPreview.classList.add('aembedph-info-cover-none');
-                src: metadata.image,
-                onerror: function(ev) {
-                    coverPreview.classList.add('aembedph-info-cover-none');
-                },
             },
-        },
+        }),
-    });
+    );
 
-    const pub = {};
+    let element;
+    const pub = {
+        get element() { return element; },
+    };
 
-    const elem = $create({
+    element = $element(
-        attrs: {
+        'div',
+        {
             className: ('aembedph aembedph-' + (options.type || 'external')),
             style: style.join(';'),
             title: metadata.title,
         },
-        child: [
+        coverBackground,
-            coverBackground,
+        $element(
-            {
+            'div',
-                attrs: {
+            { className: 'aembedph-fg' },
-                    className: 'aembedph-fg',
+            $element(
-                },
+                'div',
-                child: [
+                { className: 'aembedph-info' },
-                    {
+                coverPreview,
-                        attrs: {
+                $element(
-                            className: 'aembedph-info',
+                    'div',
-                        },
+                    { className: 'aembedph-info-body' },
-                        child: [
+                    ...infoChildren
-                            coverPreview,
+                ),
-                            {
+            ),
-                                attrs: {
+            $element(
-                                    className: 'aembedph-info-body',
+                'div',
-                                },
+                {
-                                child: infoChildren,
+                    className: 'aembedph-play',
-                            }
+                    onclick: function(ev) {
-                        ],
+                        if(ev.target.tagName.toLowerCase() === 'a')
+                            return;
+
+                        if(typeof options.onclick === 'function') {
+                            options.onclick(ev);
+                            return;
+                        }
+
+                        const player = new options.player(metadata, options);
+
+                        const embed = new MszAudioEmbed(player);
+                        if(options.autoembed === undefined || options.autoembed)
+                            embed.replaceElement(element);
+
+                        if(typeof options.onembed === 'function')
+                            options.onembed(embed);
                     },
-                    {
+                },
-                        attrs: {
+                $element(
-                            className: 'aembedph-play',
+                    'div',
-                            onclick: function(ev) {
+                    { className: 'aembedph-play-internal', },
-                                if(ev.target.tagName.toLowerCase() === 'a')
+                    $element('i', { className: 'fas fa-play fa-3x fa-fw' }),
-                                    return;
+                ),
-
+                $element(
-                                if(typeof options.onclick === 'function') {
+                    'div',
-                                    options.onclick(ev);
+                    { className: 'aembedph-play-external' },
-                                    return;
+                    $element(
-                                }
+                        'a',
-
+                        {
-                                const player = new options.player(metadata, options);
+                            className: 'aembedph-play-external-link',
-
+                            href: metadata.url,
-                                const embed = new MszAudioEmbed(player);
+                            target: '_blank',
-                                if(options.autoembed === undefined || options.autoembed)
+                            rel: 'noopener',
-                                    embed.replaceElement(elem);
-
-                                if(typeof options.onembed === 'function')
-                                    options.onembed(embed);
-                            },
                         },
-                        child: [
+                        `or listen on ${metadata.site_name}?`
-                            {
+                    ),
-                                attrs: {
+                ),
-                                    className: 'aembedph-play-internal',
+            ),
-                                },
+        ),
-                                child: {
+    );
-                                    tag: 'i',
-                                    attrs: {
-                                        className: 'fas fa-play fa-3x fa-fw',
-                                    },
-                                },
-                            },
-                            {
-                                attrs: {
-                                    className: 'aembedph-play-external',
-                                },
-                                child: {
-                                    tag: 'a',
-                                    attrs: {
-                                        className: 'aembedph-play-external-link',
-                                        href: metadata.url,
-                                        target: '_blank',
-                                        rel: 'noopener',
-                                    },
-                                    child: ('or listen on ' + metadata.site_name + '?')
-                                },
-                            }
-                        ],
-                    }
-                ],
-            },
-        ],
-    });
 
-    pub.getElement = function() { return elem; };
+    pub.appendTo = function(target) { target.appendChild(element); };
-    pub.appendTo = function(target) { target.appendChild(elem); };
+    pub.insertBefore = function(ref) { $insertBefore(ref, element); };
-    pub.insertBefore = function(ref) { $insertBefore(ref, elem); };
     pub.nuke = function() {
-        elem.remove();
+        element.remove();
     };
     pub.replaceElement = function(target) {
-        $insertBefore(target, elem);
+        $insertBefore(target, element);
         target.remove();
     };
 

assets/misuzu.js/embed/embed.js

@@ -30,18 +30,7 @@ const MszEmbed = (function() {
                 }
 
                 $removeChildren(target);
-                target.appendChild($create({
+                target.appendChild((new MszLoading({ inline: true })).element);
-                    tag: 'i',
-                    attrs: {
-                        className: 'fas fa-2x fa-spinner fa-pulse',
-                        style: {
-                            width: '32px',
-                            height: '32px',
-                            lineHeight: '32px',
-                            textAlign: 'center',
-                        },
-                    },
-                }));
 
                 if(filtered.has(cleanUrl))
                     filtered.get(cleanUrl).push(target);
@@ -51,16 +40,16 @@ const MszEmbed = (function() {
 
             const replaceWithUrl = function(targets, url) {
                 for(const target of targets) {
-                    let body = $create({
+                    let body = $element(
-                        tag: 'a',
+                        'a',
-                        attrs: {
+                        {
                             className: 'link',
                             href: url,
                             target: '_blank',
                             rel: 'noopener noreferrer',
                         },
-                        child: url
+                        url
-                    });
+                    );
                     $insertBefore(target, body);
                     target.remove();
                 }

assets/misuzu.js/embed/image.js

@@ -1,29 +1,24 @@
 const MszImageEmbed = function(metadata, options, target) {
     options = options || {};
 
-    const image = $create({
+    const element = $element('img', {
-        tag: 'img',
+        alt: target.dataset.mszEmbedAlt || '',
-        attrs: {
+        src: metadata.url,
-            alt: target.dataset.mszEmbedAlt || '',
-            src: metadata.url,
-        },
     });
 
     const pub = {
-        getElement: function() {
+        get element() { return element; },
-            return image;
-        },
         appendTo: function(target) {
-            target.appendChild(image);
+            target.appendChild(element);
         },
         insertBefore: function(ref) {
-            $insertBefore(ref, image);
+            $insertBefore(ref, element);
         },
         nuke: function() {
-            image.remove();
+            element.remove();
         },
         replaceElement(target) {
-            $insertBefore(target, image);
+            $insertBefore(target, element);
             target.remove();
         },
         getType: function() { return 'external'; },

assets/misuzu.js/embed/video.js

@@ -45,38 +45,33 @@ const MszVideoConstrainSize = function(w, h, mw, mh) {
 
 const MszVideoEmbed = function(playerOrFrame) {
     const frame = playerOrFrame;
-    const player = 'getPlayer' in frame ? frame.getPlayer() : frame;
+    const player = frame?.player ?? frame;
 
-    const elem = $create({
+    const element = $element(
-        attrs: {
+        'div',
-            classList: ['embed', 'embed-' + player.getType()],
+        { classList: ['embed', 'embed-' + player.getType()] },
-        },
+        frame,
-        child: frame,
+    );
-    });
 
     return {
-        getElement: function() {
+        get element() { return element; },
-            return elem;
+        get player() { return player; },
-        },
         appendTo: function(target) {
-            target.appendChild(elem);
+            target.appendChild(element);
         },
         insertBefore: function(ref) {
-            $insertBefore(ref, elem);
+            $insertBefore(ref, element);
         },
         nuke: function() {
-            elem.remove();
+            element.remove();
         },
         replaceElement(target) {
-            $insertBefore(target, elem);
+            $insertBefore(target, element);
             target.remove();
         },
         getFrame: function() {
             return frame;
         },
-        getPlayer: function() {
-            return player;
-        },
     };
 };
 
@@ -91,119 +86,78 @@ const MszVideoEmbedFrame = function(player, options) {
         icoVolQuiet = 'fa-volume-down',
         icoVolLoud = 'fa-volume-up';
 
-    const btnPlayPause = $create({
+    const btnPlayPause = $element('div', null, $element(
-        attrs: {},
+        'i', { classList: ['fas', 'fa-fw', icoStatePlay] }
-        child: {
+    ));
-            tag: 'i',
+
-            attrs: {
+    const btnStop = $element('div', null, $element(
-                classList: ['fas', 'fa-fw', icoStatePlay],
+        'i', { classList: ['fas', 'fa-fw', icoStateStop] }
-            },
+    ));
+
+    const numCurrentTime = $element('div');
+    const sldProgress = $element('div');
+    const numDurationRemaining = $element('div');
+
+    const btnVolMute = $element('div', null, $element(
+        'i', {
+            // isMuted === icoVolMute
+            // vol < 0.01 === icoVolOff
+            // vol < 0.5 === icoVolQuiet
+            // vol < 1.0 === icoVolLoud
+            classList: ['fas', 'fa-fw', icoVolLoud],
         }
-    });
+    ));
 
-    const btnStop = $create({
+    const element = $element(
-        attrs: {},
+        'div',
-        child: {
+        {
-            tag: 'i',
-            attrs: {
-                classList: ['fas', 'fa-fw', icoStateStop],
-            },
-        },
-    });
-
-    const numCurrentTime = $create({
-        attrs: {},
-    });
-
-    const sldProgress = $create({
-        attrs: {},
-        child: [],
-    });
-
-    const numDurationRemaining = $create({
-        attrs: {},
-    });
-
-    const btnVolMute = $create({
-        attrs: {},
-        child: {
-            tag: 'i',
-            attrs: {
-                // isMuted === icoVolMute
-                // vol < 0.01 === icoVolOff
-                // vol < 0.5 === icoVolQuiet
-                // vol < 1.0 === icoVolLoud
-                classList: ['fas', 'fa-fw', icoVolLoud],
-            },
-        },
-    });
-
-    const elem = $create({
-        attrs: {
             className: 'embedvf',
             style: {
                 width: player.getWidth().toString() + 'px',
                 height: player.getHeight().toString() + 'px',
             },
         },
-        child: [
+        $element('div', { className: 'embedvf-player' }, player),
-            {
+        $element(
-                attrs: {
+            'div',
-                    className: 'embedvf-player',
+            { className: 'embedvf-overlay' },
-                },
+            $element(
-                child: player,
+                'div',
-            },
+                { className: 'embedvf-controls' },
-            {
+                btnPlayPause,
-                attrs: {
+                btnStop,
-                    className: 'embedvf-overlay',
+                numCurrentTime,
-                },
+                sldProgress,
-                child: [
+                numDurationRemaining,
-                    {
+            ),
-                        attrs: {
+        ),
-                            className: 'embedvf-controls',
+    );
-                        },
-                        child: [
-                            btnPlayPause,
-                            btnStop,
-                            numCurrentTime,
-                            sldProgress,
-                            numDurationRemaining,
-                        ],
-                    },
-                ],
-            },
-        ],
-    });
 
     return {
-        getElement: function() {
+        get element() { return element; },
-            return elem;
+        get player() { return player; },
-        },
         appendTo: function(target) {
-            target.appendChild(elem);
+            target.appendChild(element);
         },
         insertBefore: function(ref) {
-            $insertBefore(ref, elem);
+            $insertBefore(ref, element);
         },
         nuke: function() {
-            elem.remove();
+            element.remove();
         },
         replaceElement(target) {
-            $insertBefore(target, elem);
+            $insertBefore(target, element);
             target.remove();
         },
-        getPlayer: function() {
-            return player;
-        },
     };
 };
 
 const MszVideoEmbedPlayer = function(metadata, options) {
     options = options || {};
 
-    const shouldAutoplay = options.autoplay === undefined || options.autoplay,
+    const shouldAutoplay = options.autoplay === undefined || options.autoplay;
-        haveNativeControls = options.nativeControls !== undefined && options.nativeControls,
+    const haveNativeControls = options.nativeControls !== undefined && options.nativeControls;
-        shouldObserveResize = options.observeResize === undefined || options.observeResize;
+    const shouldObserveResize = options.observeResize === undefined || options.observeResize;
 
     const videoAttrs = {
         src: metadata.url,
@@ -230,32 +184,27 @@ const MszVideoEmbedPlayer = function(metadata, options) {
     const watchers = new MszWatchers;
     watchers.define(MszVideoEmbedPlayerEvents());
 
-    const player = $create({
+    const element = $element('video', videoAttrs);
-        tag: 'video',
-        attrs: videoAttrs,
-    });
 
     const setSize = function(w, h) {
         const size = constrainSize(w, h, initialSize[0], initialSize[1]);
-        player.style.width = size[0].toString() + 'px';
+        element.style.width = size[0].toString() + 'px';
-        player.style.height = size[1].toString() + 'px';
+        element.style.height = size[1].toString() + 'px';
     };
 
     const pub = {
-        getElement: function() {
+        get element() { return element; },
-            return player;
-        },
         appendTo: function(target) {
-            target.appendChild(player);
+            target.appendChild(element);
         },
         insertBefore: function(ref) {
-            $insertBefore(ref, player);
+            $insertBefore(ref, element);
         },
         nuke: function() {
-            player.remove();
+            element.remove();
         },
         replaceElement(target) {
-            $insertBefore(target, player);
+            $insertBefore(target, element);
             target.remove();
         },
         getType: function() { return 'external'; },
@@ -267,78 +216,78 @@ const MszVideoEmbedPlayer = function(metadata, options) {
     pub.unwatch = (name, handler) => watchers.unwatch(name, handler);
 
     if(shouldObserveResize)
-        player.addEventListener('resize', function() { setSize(player.videoWidth, player.videoHeight); });
+        element.addEventListener('resize', function() { setSize(element.videoWidth, element.videoHeight); });
 
-    player.addEventListener('play', function() { watchers.call('play'); });
+    element.addEventListener('play', function() { watchers.call('play'); });
 
-    const pPlay = function() { player.play(); };
+    const pPlay = function() { element.play(); };
     pub.play = pPlay;
 
-    const pPause = function() { player.pause(); };
+    const pPause = function() { element.pause(); };
     pub.pause = pPause;
 
     let stopCalled = false;
-    player.addEventListener('pause', function() {
+    element.addEventListener('pause', function() {
         watchers.call(stopCalled ? 'stop' : 'pause');
         stopCalled = false;
     });
 
     const pStop = function() {
         stopCalled = true;
-        player.pause();
+        element.pause();
-        player.currentTime = 0;
+        element.currentTime = 0;
     };
     pub.stop = pStop;
 
-    const pIsPlaying = function() { return !player.paused; };
+    const pIsPlaying = function() { return !element.paused; };
     pub.isPlaying = pIsPlaying;
 
-    const pIsMuted = function() { return player.muted; };
+    const pIsMuted = function() { return element.muted; };
     pub.isMuted = pIsMuted;
 
-    let lastMuteState = player.muted;
+    let lastMuteState = element.muted;
-    player.addEventListener('volumechange', function() {
+    element.addEventListener('volumechange', function() {
-        if(lastMuteState !== player.muted) {
+        if(lastMuteState !== element.muted) {
-            lastMuteState = player.muted;
+            lastMuteState = element.muted;
             watchers.call('mute', lastMuteState);
         } else
-            watchers.call('volume', player.volume);
+            watchers.call('volume', element.volume);
     });
 
-    const pSetMuted = function(state) { player.muted = state; };
+    const pSetMuted = function(state) { element.muted = state; };
     pub.setMuted = pSetMuted;
 
-    const pGetVolume = function() { return player.volume; };
+    const pGetVolume = function() { return element.volume; };
     pub.getVolume = pGetVolume;
 
-    const pSetVolume = function(volume) { player.volume = volume; };
+    const pSetVolume = function(volume) { element.volume = volume; };
     pub.setVolume = pSetVolume;
 
-    const pGetPlaybackRate = function() { return player.playbackRate; };
+    const pGetPlaybackRate = function() { return element.playbackRate; };
     pub.getPlaybackRate = pGetPlaybackRate;
 
-    player.addEventListener('ratechange', function() {
+    element.addEventListener('ratechange', function() {
-        watchers.call('rate', player.playbackRate);
+        watchers.call('rate', element.playbackRate);
     });
 
-    const pSetPlaybackRate = function(rate) { player.playbackRate = rate; };
+    const pSetPlaybackRate = function(rate) { element.playbackRate = rate; };
     pub.setPlaybackRate = pSetPlaybackRate;
 
     window.addEventListener('durationchange', function() {
-        watchers.call('duration', player.duration);
+        watchers.call('duration', element.duration);
     });
 
-    const pGetDuration = function() { return player.duration; };
+    const pGetDuration = function() { return element.duration; };
     pub.getDuration = pGetDuration;
 
     window.addEventListener('timeupdate', function() {
-        watchers.call('time', player.currentTime);
+        watchers.call('time', element.currentTime);
     });
 
-    const pGetTime = function() { return player.currentTime; };
+    const pGetTime = function() { return element.currentTime; };
     pub.getTime = pGetTime;
 
-    const pSeek = function(time) { player.currentTime = time; };
+    const pSeek = function(time) { element.currentTime = time; };
     pub.seek = pSeek;
 
     return pub;
@@ -347,9 +296,9 @@ const MszVideoEmbedPlayer = function(metadata, options) {
 const MszVideoEmbedYouTube = function(metadata, options) {
     options = options || {};
 
-    const ytOrigin = 'https://www.youtube.com',
+    const ytOrigin = 'https://www.youtube.com';
-        playerId = 'yt-' + $rngs(8),
+    const playerId = 'yt-' + $rngs(8);
-        shouldAutoplay = options.autoplay === undefined || options.autoplay;
+    const shouldAutoplay = options.autoplay === undefined || options.autoplay;
 
     let embedUrl = 'https://www.youtube.com/embed/' + metadata.youtube_video_id + '?enablejsapi=1';
 
@@ -376,31 +325,26 @@ const MszVideoEmbedYouTube = function(metadata, options) {
     const watchers = new MszWatchers;
     watchers.define(MszVideoEmbedPlayerEvents());
 
-    const player = $create({
+    const element = $element('iframe', {
-        tag: 'iframe',
+        frameborder: 0,
-        attrs: {
+        allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',
-            frameborder: 0,
+        allowfullscreen: 'allowfullscreen',
-            allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',
+        src: embedUrl,
-            allowfullscreen: 'allowfullscreen',
-            src: embedUrl,
-        },
     });
 
     const pub = {
-        getElement: function() {
+        get element() { return element; },
-            return player;
-        },
         appendTo: function(target) {
-            target.appendChild(player);
+            target.appendChild(element);
         },
         insertBefore: function(ref) {
-            $insertBefore(ref, player);
+            $insertBefore(ref, element);
         },
         nuke: function() {
-            player.remove();
+            element.remove();
         },
         replaceElement(target) {
-            $insertBefore(target, player);
+            $insertBefore(target, element);
             target.remove();
         },
         getType: function() { return 'youtube'; },
@@ -413,7 +357,7 @@ const MszVideoEmbedYouTube = function(metadata, options) {
     pub.unwatch = (name, handler) => watchers.unwatch(name, handler);
 
     const postMessage = function(data) {
-        player.contentWindow.postMessage(JSON.stringify(data), ytOrigin);
+        element.contentWindow.postMessage(JSON.stringify(data), ytOrigin);
     };
     const postCommand = function(name, args) {
         postMessage({
@@ -532,7 +476,7 @@ const MszVideoEmbedYouTube = function(metadata, options) {
         }
     });
 
-    player.addEventListener('load', function(ev) {
+    element.addEventListener('load', function(ev) {
         postMessage({
             id: playerId,
             event: 'listening',
@@ -559,49 +503,44 @@ const MszVideoEmbedYouTube = function(metadata, options) {
 const MszVideoEmbedNicoNico = function(metadata, options) {
     options = options || {};
 
-    const nndOrigin = 'https://embed.nicovideo.jp',
+    const nndOrigin = 'https://embed.nicovideo.jp';
-        playerId = 'nnd-' + $rngs(8),
+    const playerId = 'nnd-' + $rngs(8);
-        shouldAutoplay = options.autoplay === undefined || options.autoplay;
+    const shouldAutoplay = options.autoplay === undefined || options.autoplay;
 
     let embedUrl = 'https://embed.nicovideo.jp/watch/' + metadata.nicovideo_video_id + '?jsapi=1&playerId=' + playerId;
 
     if(metadata.nicovideo_start_time)
         embedUrl += '&from=' + encodeURIComponent(metadata.nicovideo_start_time);
 
-    let isMuted = undefined,
+    let isMuted = undefined;
-        volume = undefined,
+    let volume = undefined;
-        duration = undefined,
+    let duration = undefined;
-        currentTime = undefined,
+    let currentTime = undefined;
-        isPlaying = false;
+    let isPlaying = false;
 
     const watchers = new MszWatchers;
     watchers.define(MszVideoEmbedPlayerEvents());
 
-    const player = $create({
+    const element = $element('iframe', {
-        tag: 'iframe',
+        frameborder: 0,
-        attrs: {
+        allow: 'autoplay',
-            frameborder: 0,
+        allowfullscreen: 'allowfullscreen',
-            allow: 'autoplay',
+        src: embedUrl,
-            allowfullscreen: 'allowfullscreen',
-            src: embedUrl,
-        },
     });
 
     const pub = {
-        getElement: function() {
+        get element() { return element; },
-            return player;
-        },
         appendTo: function(target) {
-            target.appendChild(player);
+            target.appendChild(element);
         },
         insertBefore: function(ref) {
-            $insertBefore(ref, player);
+            $insertBefore(ref, element);
         },
         nuke: function() {
-            player.remove();
+            element.remove();
         },
         replaceElement(target) {
-            $insertBefore(target, player);
+            $insertBefore(target, element);
             target.remove();
         },
         getType: function() { return 'nicovideo'; },
@@ -617,7 +556,7 @@ const MszVideoEmbedNicoNico = function(metadata, options) {
         if(name === undefined)
             throw 'name must be specified';
 
-        player.contentWindow.postMessage({
+        element.contentWindow.postMessage({
             playerId: playerId,
             sourceConnectorType: 1,
             eventName: name,
@@ -742,35 +681,29 @@ const MszVideoEmbedPlaceholder = function(metadata, options) {
 
     const infoChildren = [];
 
-    infoChildren.push({
+    infoChildren.push($element(
-        tag: 'h1',
+        'h1',
-        attrs: {
+        { className: 'embedph-info-title' },
-            className: 'embedph-info-title',
+        metadata.title,
-        },
+    ));
-        child: metadata.title,
-    });
 
     if(metadata.description) {
         let firstLine = metadata.description.split("\n")[0].trim();
         if(firstLine.length > 300)
             firstLine = firstLine.substring(0, 300).trim() + '...';
 
-        infoChildren.push({
+        infoChildren.push($element(
-            tag: 'div',
+            'div',
-            attrs: {
+            { className: 'embedph-info-desc' },
-                className: 'embedph-info-desc',
+            firstLine,
-            },
+        ));
-            child: firstLine,
-        });
     }
 
-    infoChildren.push({
+    infoChildren.push($element(
-        tag: 'div',
+        'div',
-        attrs: {
+        { className: 'embedph-info-site' },
-            className: 'embedph-info-site',
+        metadata.site_name,
-        },
+    ));
-        child: metadata.site_name,
-    });
 
     const style = [];
     if(typeof metadata.color !== 'undefined')
@@ -788,116 +721,88 @@ const MszVideoEmbedPlaceholder = function(metadata, options) {
         style.push('height: ' + size[1].toString() + 'px');
     }
 
-    const pub = {};
+    let element;
+    const pub = {
+        get element() { return element; },
+    };
 
-    const elem = $create({
+    element = $element(
-        attrs: {
+        'div',
+        {
             className: ('embedph embedph-' + (options.type || 'external')),
             style: style.join(';'),
         },
-        child: [
+        $element(
-            {
+            'div',
-                attrs: {
+            { className: 'embedph-bg' },
-                    className: 'embedph-bg',
+            $element('img', { src: metadata.image }),
-                },
+        ),
-                child: {
+        $element(
-                    tag: 'img',
+            'div',
-                    attrs: {
+            { className: 'embedph-fg' },
-                        src: metadata.image,
+            $element(
+                'div',
+                { className: 'embedph-info' },
+                $element(
+                    'div',
+                    { className: 'embedph-info-wrap' },
+                    $element('div', { className: 'embedph-info-bar' }),
+                    $element('div', { className: 'embedph-info-body' }, ...infoChildren),
+                ),
+            ),
+            $element(
+                'div',
+                {
+                    className: 'embedph-play',
+                    onclick: function(ev) {
+                        if(ev.target.tagName.toLowerCase() === 'a')
+                            return;
+
+                        if(typeof options.onclick === 'function') {
+                            options.onclick(ev);
+                            return;
+                        }
+
+                        const player = new options.player(metadata, options);
+                        let frameOrPlayer = player;
+
+                        if(typeof options.frame === 'function')
+                            frameOrPlayer = new options.frame(player, options);
+
+                        const embed = new MszVideoEmbed(frameOrPlayer);
+                        if(options.autoembed === undefined || options.autoembed)
+                            embed.replaceElement(element);
+
+                        if(typeof options.onembed === 'function')
+                            options.onembed(embed);
                     },
                 },
-            },
+                $element(
-            {
+                    'div',
-                attrs: {
+                    { className: 'embedph-play-internal' },
-                    className: 'embedph-fg',
+                    $element('i', { className: 'fas fa-play fa-4x fa-fw' }),
-                },
+                ),
-                child: [
+                $element(
+                    'a',
                     {
-                        attrs: {
+                        className: 'embedph-play-external',
-                            className: 'embedph-info',
+                        href: metadata.url,
-                        },
+                        target: '_blank',
-                        child: {
+                        rel: 'noopener',
-                            attrs: {
-                                className: 'embedph-info-wrap',
-                            },
-                            child: [
-                                {
-                                    attrs: {
-                                        className: 'embedph-info-bar',
-                                    },
-                                },
-                                {
-                                    attrs: {
-                                        className: 'embedph-info-body',
-                                    },
-                                    child: infoChildren,
-                                }
-                            ],
-                        },
                     },
-                    {
+                    `or watch on ${metadata.site_name}?`
-                        attrs: {
+                ),
-                            className: 'embedph-play',
+            ),
-                            onclick: function(ev) {
+        ),
-                                if(ev.target.tagName.toLowerCase() === 'a')
+    );
-                                    return;
 
-                                if(typeof options.onclick === 'function') {
+    pub.appendTo = function(target) { target.appendChild(element); };
-                                    options.onclick(ev);
+    pub.insertBefore = function(ref) { $insertBefore(ref, element); };
-                                    return;
-                                }
-
-                                const player = new options.player(metadata, options);
-                                let frameOrPlayer = player;
-
-                                if(typeof options.frame === 'function')
-                                    frameOrPlayer = new options.frame(player, options);
-
-                                const embed = new MszVideoEmbed(frameOrPlayer);
-                                if(options.autoembed === undefined || options.autoembed)
-                                    embed.replaceElement(elem);
-
-                                if(typeof options.onembed === 'function')
-                                    options.onembed(embed);
-                            },
-                        },
-                        child: [
-                            {
-                                attrs: {
-                                    className: 'embedph-play-internal',
-                                },
-                                child: {
-                                    tag: 'i',
-                                    attrs: {
-                                        className: 'fas fa-play fa-4x fa-fw',
-                                    },
-                                },
-                            },
-                            {
-                                tag: 'a',
-                                attrs: {
-                                    className: 'embedph-play-external',
-                                    href: metadata.url,
-                                    target: '_blank',
-                                    rel: 'noopener',
-                                },
-                                child: ('or watch on ' + metadata.site_name + '?'),
-                            }
-                        ],
-                    },
-                ],
-            },
-        ],
-    });
-
-    pub.getElement = function() { return elem; };
-    pub.appendTo = function(target) { target.appendChild(elem); };
-    pub.insertBefore = function(ref) { $insertBefore(ref, elem); };
     pub.nuke = function() {
-        elem.remove();
+        element.remove();
     };
     pub.replaceElement = function(target) {
-        $insertBefore(target, elem);
+        $insertBefore(target, element);
         target.remove();
     };
 

assets/misuzu.js/forum/editor.jsx

@@ -9,15 +9,15 @@ const MszForumEditor = function(form) {
     if(!(form instanceof Element))
         throw 'form must be an instance of element';
 
-    const buttonsElem = form.querySelector('.js-forum-posting-buttons'),
+    const buttonsElem = form.querySelector('.js-forum-posting-buttons');
-        textElem = form.querySelector('.js-forum-posting-text'),
+    const textElem = form.querySelector('.js-forum-posting-text');
-        parserElem = form.querySelector('.js-forum-posting-parser'),
+    const parserElem = form.querySelector('.js-forum-posting-parser');
-        previewElem = form.querySelector('.js-forum-posting-preview'),
+    const previewElem = form.querySelector('.js-forum-posting-preview');
-        modeElem = form.querySelector('.js-forum-posting-mode'),
+    const modeElem = form.querySelector('.js-forum-posting-mode');
-        markupActs = form.querySelector('.js-forum-posting-actions');
+    const markupActs = form.querySelector('.js-forum-posting-actions');
 
-    let lastPostText = '',
+    let lastPostText = '';
-        lastPostParser;
+    let lastPostParser;
 
     const eepromClient = new MszEEPROM(peepApp, peepPath);
     const eepromHistory = <div class="eeprom-widget-history-items"/>;

assets/misuzu.js/main.js

@@ -53,7 +53,7 @@
 
         for(const elem of elems)
             elem.addEventListener('keydown', ev => {
-                if((ev.code === 'Enter' || ev.code === 'NumpadEnter') && ev.ctrlKey && !ev.altKey && !ev.shiftKey && !ev.metaKey) {
+                if(ev.key === 'Enter' && ev.ctrlKey && !ev.altKey && !ev.shiftKey && !ev.metaKey) {
                     // hack: prevent forum editor from screaming when using this keycombo
                     //       can probably be done in a less stupid manner
                     MszForumEditorAllowClose = true;

assets/misuzu.js/messages/list.js

@@ -55,7 +55,7 @@ const MsgMessagesList = function(list) {
         },
         removeItem: item => {
             $arrayRemoveValue(items, item);
-            item.getElement().remove();
+            item.element.remove();
             recountSelected();
             watchers.call('select', selectedCount, items.length);
         },
@@ -150,7 +150,7 @@ const MsgMessagesEntry = function(entry) {
 
     return {
         getId: () => msgId,
-        getElement: () => entry,
+        get element() { return entry; },
         isRead: isRead,
         setRead: setRead,
         isSent: isSent,

assets/misuzu.js/messages/messages.js

@@ -107,7 +107,11 @@ const MszMessages = () => {
             if(typeof body === 'object' && typeof body.unread === 'number')
                 if(body.unread > 0)
                     for(const msgsUserBtn of msgsUserBtns)
-                        msgsUserBtn.append($create({ child: body.unread.toLocaleString(), attrs: { className: 'header__desktop__user__button__count' } }));
+                        msgsUserBtn.append($element(
+                            'div',
+                            { className: 'header__desktop__user__button__count' },
+                            body.unread.toLocaleString()
+                        ));
         });
 
     const msgsListElem = $query('.js-messages-list');

assets/misuzu.js/messages/recipient.js

@@ -37,7 +37,7 @@ const MszMessagesRecipient = function(element) {
     update().finally(() => nameTimeout = undefined);
 
     return {
-        getElement: () => element,
+        get element() { return element; },
         onUpdate: handler => {
             if(typeof handler !== 'function')
                 throw 'handler must be a function';

assets/misuzu.js/messages/reply.jsx

@@ -134,7 +134,7 @@ const MszMessagesReply = function(element) {
     });
 
     return {
-        getElement: () => element,
+        get element() { return element; },
         setWarning: text => {
             if(warnElem === undefined || warnText === undefined)
                 return;

build.js

@@ -12,8 +12,8 @@ const fs = require('fs');
         debug: isDebug,
         swc: {
             es: 'es2021',
-            jsx: '$jsx',
+            jsx: '$element',
-            jsxf: '$jsxf',
+            jsxf: '$fragment',
         },
         housekeep: [
             pathJoin(__dirname, 'public', 'assets'),

src/Comments/CommentsPostInfo.php

@@ -31,7 +31,7 @@ class CommentsPostInfo {
         );
     }
 
-    public bool $isReply {
+    public bool $reply {
         get => $this->replyingTo !== null;
     }
 

src/Comments/CommentsRoutes.php

@@ -132,25 +132,38 @@ class CommentsRoutes implements RouteHandler, UrlSource {
         return $post;
     }
 
+    private static function error(HttpResponseBuilder $response, int $code, string $name, string $text, array $extra = []): array {
+        $response->statusCode = $code;
+
+        return [
+            'error' => array_merge($extra, [
+                'name' => $name,
+                'text' => $text,
+            ]),
+        ];
+    }
+
     /** @return void|int|array{error: array{name: string, text: string}} */
     #[HttpMiddleware('/comments')]
     public function checkCsrf(HttpResponseBuilder $response, HttpRequest $request) {
         if(in_array($request->method, ['DELETE', 'PATCH', 'POST'])) {
             if(!$this->authInfo->loggedIn)
-                return 401;
+                return self::error($response, 401, 'comments:auth', 'You must be logged in to use the comments system.');
             if(!CSRF::validate($request->getHeaderLine('x-csrf-token')))
-                return 403;
+                return self::error($response, 403, 'comments:csrf', 'Request could not be verified. Please try again.');
+            if($this->usersCtx->hasActiveBan($this->authInfo->userInfo))
+                return self::error($response, 403, 'comments:csrf', 'You are banned, check your profile for more information.');
         }
 
         $response->setHeader('X-CSRF-Token', CSRF::token());
     }
 
     #[HttpGet('/comments/categories/([A-Za-z0-9-]+)')]
-    public function getCategory(HttpResponseBuilder $response, HttpRequest $request, string $categoryName): int|array {
+    public function getCategory(HttpResponseBuilder $response, HttpRequest $request, string $categoryName): array {
         try {
             $catInfo = $this->commentsCtx->categories->getCategory(name: $categoryName);
         } catch(RuntimeException $ex) {
-            return 404;
+            return self::error($response, 404, 'comments:category-not-found', 'No comment section with that name exists.');
         }
 
         $perms = $this->getGlobalPerms();
@@ -177,7 +190,7 @@ class CommentsRoutes implements RouteHandler, UrlSource {
 
             if($perms->check(Perm::G_COMMENTS_CREATE))
                 $user['can_create'] = true;
-            if($perms->check(Perm::G_COMMENTS_PIN))
+            if($perms->check(Perm::G_COMMENTS_PIN) || $catInfo->ownerId === $this->authInfo->userId)
                 $user['can_pin'] = true;
             if($perms->check(Perm::G_COMMENTS_VOTE))
                 $user['can_vote'] = true;
@@ -202,14 +215,14 @@ class CommentsRoutes implements RouteHandler, UrlSource {
     }
 
     #[HttpPost('/comments/categories/([A-Za-z0-9-]+)')]
-    public function patchCategory(HttpResponseBuilder $response, HttpRequest $request, string $categoryName): int|array {
+    public function patchCategory(HttpResponseBuilder $response, HttpRequest $request, string $categoryName): array {
         if(!($request->content instanceof FormHttpContent))
-            return 400;
+            return self::error($response, 400, 'comments:content', 'Provided content could not be understood.');
 
         try {
             $catInfo = $this->commentsCtx->categories->getCategory(name: $categoryName);
         } catch(RuntimeException $ex) {
-            return 404;
+            return self::error($response, 404, 'comments:category-not-found', 'No comment section with that name exists.');
         }
 
         $perms = $this->getGlobalPerms();
@@ -217,7 +230,7 @@ class CommentsRoutes implements RouteHandler, UrlSource {
 
         if($request->content->hasParam('lock')) {
             if(!$perms->check(Perm::G_COMMENTS_LOCK))
-                return 403;
+                return self::error($response, 403, 'comments:lock-not-allowed', 'You are not allowed to lock this comment section.');
 
             $locked = !empty($request->content->getParam('lock'));
         }
@@ -230,7 +243,7 @@ class CommentsRoutes implements RouteHandler, UrlSource {
         try {
             $catInfo = $this->commentsCtx->categories->getCategory(categoryId: $catInfo->id);
         } catch(RuntimeException $ex) {
-            return 410;
+            return self::error($response, 404, 'comments:category-not-found', 'No comment section with that name exists.');
         }
 
         $result = ['name' => $catInfo->name];
@@ -241,25 +254,73 @@ class CommentsRoutes implements RouteHandler, UrlSource {
     }
 
     #[HttpPost('/comments/posts')]
-    public function postPost(HttpResponseBuilder $response, HttpRequest $request): int|array {
+    public function postPost(HttpResponseBuilder $response, HttpRequest $request): array {
-        if(!$this->getGlobalPerms()->check(Perm::G_COMMENTS_CREATE))
+        if(!($request->content instanceof FormHttpContent))
-            return 403;
+            return self::error($response, 400, 'comments:content', 'Provided content could not be understood.');
 
-        return 501;
+        $perms = $this->getGlobalPerms();
-    }
+        if(!$perms->check(Perm::G_COMMENTS_CREATE))
+            return self::error($response, 403, 'comments:create-not-allowed', 'You are not allowed to post comments.');
+
+        if(!$request->content->hasParam('category') || !$request->content->hasParam('body'))
+            return self::error($response, 400, 'comments:missing-fields', 'Required fields are not specified.');
+
+        $pinned = false;
+        $body = preg_replace("/[\r\n]{2,}/", "\n", (string)$request->content->getParam('body'));
+        if(mb_strlen(mb_trim($body)) < 1)
+            return self::error($response, 400, 'comments:body-too-short', 'Your comment must be longer.');
+        if(mb_strlen($body) > 5000)
+            return self::error($response, 400, 'comments:body-too-long', 'Your comment is too long.');
 
-    #[HttpGet('/comments/posts/([0-9]+)')]
-    public function getPost(HttpResponseBuilder $response, HttpRequest $request, string $commentId): int|array {
         try {
-            $postInfo = $this->commentsCtx->posts->getPost($commentId);
+            $catInfo = $this->commentsCtx->categories->getCategory(name: (string)$request->content->getParam('category'));
         } catch(RuntimeException $ex) {
-            return 404;
+            return self::error($response, 404, 'comments:category-not-found', 'No comment section with that name exists.');
+        }
+
+        if($request->content->hasParam('reply_to')) {
+            try {
+                $replyToInfo = $this->commentsCtx->posts->getPost((string)$request->content->getParam('reply_to'));
+                if($replyToInfo->deleted)
+                    return self::error($response, 404, 'comments:parent-not-found', 'The comment you are trying to reply to does not exist.');
+            } catch(RuntimeException $ex) {
+                return self::error($response, 404, 'comments:parent-not-found', 'The comment you are trying to reply to does not exist.');
+            }
+        } else
+            $replyToInfo = null;
+
+        if($request->content->hasParam('pin')) {
+            if(!$perms->check(Perm::G_COMMENTS_PIN) && $catInfo->ownerId !== $this->authInfo->userId)
+                return self::error($response, 403, 'comments:pin-not-allowed', 'You are not allowed to pin comments.');
+            if($replyToInfo !== null)
+                return self::error($response, 400, 'comments:post-not-root', 'Replies cannot be pinned.');
+
+            $pinned = !empty($request->content->getParam('pin'));
         }
 
         try {
+            $postInfo = $this->commentsCtx->posts->createPost(
+                $catInfo,
+                $replyToInfo,
+                $this->authInfo->userInfo,
+                $body,
+                $pinned
+            );
+        } catch(RuntimeException $ex) {
+            return self::error($response, 500, 'comments:create-failed', 'Failed to create your comment. Please report this as a bug if it persists.');
+        }
+
+        $response->statusCode = 201;
+        return $this->convertPost($perms, $catInfo, $postInfo);
+    }
+
+    #[HttpGet('/comments/posts/([0-9]+)')]
+    public function getPost(HttpResponseBuilder $response, HttpRequest $request, string $commentId): array {
+        try {
+            $postInfo = $this->commentsCtx->posts->getPost($commentId);
             $catInfo = $this->commentsCtx->categories->getCategory(postInfo: $postInfo);
         } catch(RuntimeException $ex) {
-            return 404;
+            return self::error($response, 404, 'comments:post-not-found', 'Comment not found.');
         }
 
         $perms = $this->getGlobalPerms();
@@ -270,23 +331,18 @@ class CommentsRoutes implements RouteHandler, UrlSource {
             $this->commentsCtx->posts->getPosts(parentInfo: $postInfo)
         );
         if(isset($post['deleted']) && $post['deleted'] === true && empty($post['replies']))
-            return 404;
+            return self::error($response, 404, 'comments:post-not-found', 'Comment not found.');
 
         return $post;
     }
 
     #[HttpGet('/comments/posts/([0-9]+)/replies')]
-    public function getPostReplies(HttpResponseBuilder $response, HttpRequest $request, string $commentId): int|array {
+    public function getPostReplies(HttpResponseBuilder $response, HttpRequest $request, string $commentId): array {
         try {
             $postInfo = $this->commentsCtx->posts->getPost($commentId);
-        } catch(RuntimeException $ex) {
-            return 404;
-        }
-
-        try {
             $catInfo = $this->commentsCtx->categories->getCategory(postInfo: $postInfo);
         } catch(RuntimeException $ex) {
-            return 404;
+            return self::error($response, 404, 'comments:post-not-found', 'Comment not found.');
         }
 
         return $this->convertPosts(
@@ -299,42 +355,44 @@ class CommentsRoutes implements RouteHandler, UrlSource {
     // this should be HttpPatch but PHP doesn't parse into $_POST for PATCH...
     // fix this in the v3 router for index by just ignoring PHP's parsing altogether
     #[HttpPost('/comments/posts/([0-9]+)')]
-    public function patchPost(HttpResponseBuilder $response, HttpRequest $request, string $commentId): int|array {
+    public function patchPost(HttpResponseBuilder $response, HttpRequest $request, string $commentId): array {
         if(!($request->content instanceof FormHttpContent))
-            return 400;
+            return self::error($response, 400, 'comments:content', 'Provided content could not be understood.');
 
         try {
             $postInfo = $this->commentsCtx->posts->getPost($commentId);
-        } catch(RuntimeException $ex) {
-            return 404;
-        }
-
-        try {
             $catInfo = $this->commentsCtx->categories->getCategory(postInfo: $postInfo);
         } catch(RuntimeException $ex) {
-            return 404;
+            return self::error($response, 404, 'comments:post-not-found', 'Comment not found.');
         }
 
         $perms = $this->getGlobalPerms();
         if(!$perms->check(Perm::G_COMMENTS_DELETE_ANY) && ($catInfo->locked || $postInfo->deleted))
-            return 404;
+            return self::error($response, 404, 'comments:post-not-found', 'Comment not found.');
 
         $body = null;
         $pinned = null;
         $edited = false;
 
         if($request->content->hasParam('pin')) {
-            if(!$perms->check(Perm::G_COMMENTS_PIN) || $catInfo->ownerId !== $this->authInfo->userId)
+            if(!$perms->check(Perm::G_COMMENTS_PIN) && $catInfo->ownerId !== $this->authInfo->userId)
-                return 403;
+                return self::error($response, 403, 'comments:pin-not-allowed', 'You are not allowed to pin comments.');
+            if($postInfo->reply)
+                return self::error($response, 400, 'comments:post-not-root', 'Replies cannot be pinned.');
 
             $pinned = !empty($request->content->getParam('pin'));
         }
 
         if($request->content->hasParam('body')) {
             if(!$perms->check(Perm::G_COMMENTS_EDIT_ANY) && !($perms->check(Perm::G_COMMENTS_EDIT_OWN) && $this->authInfo->userId === $postInfo->userId))
-                return 403;
+                return self::error($response, 403, 'comments:edit-not-allowed', 'You are not allowed to edit comments.');
+
+            $body = preg_replace("/[\r\n]{2,}/", "\n", (string)$request->content->getParam('body'));
+            if(mb_strlen(mb_trim($body)) < 1)
+                return self::error($response, 400, 'comments:body-too-short', 'Your comment must be longer.');
+            if(mb_strlen($body) > 5000)
+                return self::error($response, 400, 'comments:body-too-long', 'Your comment is too long.');
 
-            $body = (string)$request->content->getParam('body');
             $edited = $body !== $postInfo->body;
             if(!$edited)
                 $body = null;
@@ -350,7 +408,7 @@ class CommentsRoutes implements RouteHandler, UrlSource {
         try {
             $postInfo = $this->commentsCtx->posts->getPost($postInfo->id);
         } catch(RuntimeException $ex) {
-            return 410;
+            return self::error($response, 404, 'comments:post-not-found', 'Comment not found.');
         }
 
         $result = ['id' => $postInfo->id];
@@ -365,112 +423,97 @@ class CommentsRoutes implements RouteHandler, UrlSource {
     }
 
     #[HttpDelete('/comments/posts/([0-9]+)')]
-    public function deletePost(HttpResponseBuilder $response, HttpRequest $request, string $commentId): int|array {
+    public function deletePost(HttpResponseBuilder $response, HttpRequest $request, string $commentId): array|string {
         try {
             $postInfo = $this->commentsCtx->posts->getPost($commentId);
             if($postInfo->deleted)
-                return 404;
+                return self::error($response, 404, 'comments:post-not-found', 'Comment not found.');
-        } catch(RuntimeException $ex) {
-            return 404;
-        }
 
-        try {
             $catInfo = $this->commentsCtx->categories->getCategory(postInfo: $postInfo);
             if($catInfo->locked)
-                return 403;
+                return self::error($response, 403, 'comments:category-locked-delete', 'The comment section this comment is in is locked, it cannot be deleted.');
         } catch(RuntimeException $ex) {
-            return 404;
+            return self::error($response, 404, 'comments:post-not-found', 'Comment not found.');
         }
 
         $perms = $this->getGlobalPerms();
         if(!$perms->check(Perm::G_COMMENTS_DELETE_ANY) && !(
             ($postInfo->userId === $this->authInfo->userId || $catInfo->ownerId === $this->authInfo->userId)
             && $perms->check(Perm::G_COMMENTS_DELETE_OWN)
-        )) return 403;
+        )) return self::error($response, 403, 'comments:delete-not-allowed', 'You are not allowed to delete this comment.');
 
         $this->commentsCtx->posts->deletePost($postInfo);
 
-        return 204;
+        $response->statusCode = 204;
+        return '';
     }
 
     #[HttpPost('/comments/posts/([0-9]+)/restore')]
-    public function postPostRestore(HttpResponseBuilder $response, HttpRequest $request, string $commentId): int {
+    public function postPostRestore(HttpResponseBuilder $response, HttpRequest $request, string $commentId): array {
         if(!$this->getGlobalPerms()->check(Perm::G_COMMENTS_DELETE_ANY))
-            return 403;
+            return self::error($response, 403, 'comments:restore-not-allowed', 'You are not allowed to restore comments.');
 
         try {
             $postInfo = $this->commentsCtx->posts->getPost($commentId);
             if(!$postInfo->deleted)
-                return 400;
+                return self::error($response, 400, 'comments:post-not-deleted', 'This comment is not currently deleted.');
-        } catch(RuntimeException $ex) {
-            return 404;
-        }
 
-        try {
             $catInfo = $this->commentsCtx->categories->getCategory(postInfo: $postInfo);
             if($catInfo->locked)
-                return 403;
+                return self::error($response, 403, 'comments:category-locked-restore', 'The comment section this comment is in is locked, it cannot be restored.');
         } catch(RuntimeException $ex) {
-            return 404;
+            return self::error($response, 404, 'comments:post-not-found', 'Comment not found.');
         }
 
         $this->commentsCtx->posts->restorePost($postInfo);
 
-        return 200;
+        return [];
     }
 
     #[HttpPost('/comments/posts/([0-9]+)/nuke')]
-    public function postPostNuke(HttpResponseBuilder $response, HttpRequest $request, string $commentId): int {
+    public function postPostNuke(HttpResponseBuilder $response, HttpRequest $request, string $commentId): array {
         if(!$this->getGlobalPerms()->check(Perm::G_COMMENTS_DELETE_ANY))
-            return 403;
+            return self::error($response, 403, 'comments:nuke-not-allowed', 'You are not allowed to permanently delete comments.');
 
         try {
             $postInfo = $this->commentsCtx->posts->getPost($commentId);
             if(!$postInfo->deleted)
-                return 400;
+                return self::error($response, 400, 'comments:post-not-deleted', 'This comment is not currently (soft-)deleted.');
-        } catch(RuntimeException $ex) {
-            return 404;
-        }
 
-        try {
             $catInfo = $this->commentsCtx->categories->getCategory(postInfo: $postInfo);
             if($catInfo->locked)
-                return 403;
+                return self::error($response, 403, 'comments:category-locked-nuke', 'The comment section this comment is in is locked, it cannot be permanently deleted.');
         } catch(RuntimeException $ex) {
-            return 404;
+            return self::error($response, 404, 'comments:post-not-found', 'Comment not found.');
         }
 
         $this->commentsCtx->posts->nukePost($postInfo);
 
-        return 200;
+        return [];
     }
 
     #[HttpPost('/comments/posts/([0-9]+)/vote')]
-    public function postPostVote(HttpResponseBuilder $response, HttpRequest $request, string $commentId): int|array {
+    public function postPostVote(HttpResponseBuilder $response, HttpRequest $request, string $commentId): array {
         if(!($request->content instanceof FormHttpContent))
-            return 400;
+            return self::error($response, 400, 'comments:content', 'Provided content could not be understood.');
 
         $vote = (int)$request->content->getParam('vote', FILTER_SANITIZE_NUMBER_INT);
         if($vote === 0)
-            return 400;
+            return self::error($response, 400, 'comments:vote', 'Could not process vote.');
 
         if(!$this->getGlobalPerms()->check(Perm::G_COMMENTS_VOTE))
-            return 403;
+            return self::error($response, 403, 'comments:vote-not-allowed', 'You are not allowed to vote on comments.');
 
         try {
             $postInfo = $this->commentsCtx->posts->getPost($commentId);
             if($postInfo->deleted)
-                return 404;
+                return self::error($response, 404, 'comments:post-not-found', 'Comment not found.');
-        } catch(RuntimeException $ex) {
-            return 404;
-        }
 
-        try {
             $catInfo = $this->commentsCtx->categories->getCategory(postInfo: $postInfo);
             if($catInfo->locked)
-                return 403;
+                return self::error($response, 403, 'comments:category-locked-vote', 'The comment section this comment is in is locked, you cannot vote on it.');
         } catch(RuntimeException $ex) {
-            return 404;
+            return self::error($response, 404, 'comments:post-not-found', 'Comment not found.');
         }
 
         $this->commentsCtx->votes->addVote(
@@ -482,6 +525,7 @@ class CommentsRoutes implements RouteHandler, UrlSource {
         $voteInfo = $this->commentsCtx->votes->getVote($postInfo, $this->authInfo->userInfo);
         $votes = $this->commentsCtx->votes->getVotesAggregate($postInfo);
 
+        $response->statusCode = 201;
         return [
             'vote' => $voteInfo->weight,
             'positive' => $votes->positive,
@@ -490,24 +534,20 @@ class CommentsRoutes implements RouteHandler, UrlSource {
     }
 
     #[HttpDelete('/comments/posts/([0-9]+)/vote')]
-    public function deletePostVote(HttpResponseBuilder $response, HttpRequest $request, string $commentId): int|array {
+    public function deletePostVote(HttpResponseBuilder $response, HttpRequest $request, string $commentId): array {
         if(!$this->getGlobalPerms()->check(Perm::G_COMMENTS_VOTE))
-            return 403;
+            return self::error($response, 403, 'comments:vote-not-allowed', 'You are not allowed to vote on comments.');
 
         try {
             $postInfo = $this->commentsCtx->posts->getPost($commentId);
             if($postInfo->deleted)
-                return 404;
+                return self::error($response, 404, 'comments:post-not-found', 'Comment not found.');
-        } catch(RuntimeException $ex) {
-            return 404;
-        }
 
-        try {
             $catInfo = $this->commentsCtx->categories->getCategory(postInfo: $postInfo);
             if($catInfo->locked)
-                return 403;
+                return self::error($response, 403, 'comments:category-locked-vote', 'The comment section this comment is in is locked, you cannot vote on it.');
         } catch(RuntimeException $ex) {
-            return 404;
+            return self::error($response, 404, 'comments:post-not-found', 'Comment not found.');
         }
 
         $this->commentsCtx->votes->removeVote(
@@ -518,7 +558,6 @@ class CommentsRoutes implements RouteHandler, UrlSource {
         $voteInfo = $this->commentsCtx->votes->getVote($postInfo, $this->authInfo->userInfo);
         $votes = $this->commentsCtx->votes->getVotesAggregate($postInfo);
 
-        $response->statusCode = 200;
         return [
             'vote' => $voteInfo->weight,
             'positive' => $votes->positive,