hey it's something

assets/less/mio/classes/comment.less

@@ -4,8 +4,16 @@
         margin-bottom: 4px;
     }
 
-    &--hidden {
+    &__reply-toggle {
-        //display: none;
+        display: none;
+
+        &:checked ~ .comment--reply {
+            display: block;
+        }
+    }
+
+    &--reply {
+        display: none;
     }
 
     &__container {
@@ -30,6 +38,7 @@
         color: inherit;
         text-decoration: none;
         vertical-align: middle;
+        cursor: pointer;
 
         &:not(:last-child) {
             margin-right: 6px;

src/comments.php

@@ -133,15 +133,17 @@ define('MSZ_COMMENTS_CATEGORY_QUERY', '
     ON r.`role_id` = u.`display_role`
     WHERE p.`category_id` = :category
     %s
-    ORDER BY p.`comment_pinned` DESC, p.`comment_id` DESC
+    ORDER BY p.`comment_pinned` DESC, p.`comment_id` %s
 ');
 define('MSZ_COMMENTS_CATEGORY_QUERY_ROOT', sprintf(
     MSZ_COMMENTS_CATEGORY_QUERY,
-    'AND p.`comment_reply_to` IS NULL'
+    'AND p.`comment_reply_to` IS NULL',
+    'DESC'
 ));
 define('MSZ_COMMENTS_CATEGORY_QUERY_REPLIES', sprintf(
     MSZ_COMMENTS_CATEGORY_QUERY,
-    'AND p.`comment_reply_to` = :parent'
+    'AND p.`comment_reply_to` = :parent',
+    'ASC'
 ));
 
 // heavily recursive

views/mio/_layout/comments.twig

@@ -1,13 +1,15 @@
 {% macro comments_input(category, user, perms, reply_to) %}
     {% set reply_mode = reply_to is not null %}
 
-    <form class="comment comment--input{% if reply_mode %} comment--hidden{% endif %}"
+    <form class="comment comment--input{% if reply_mode %} comment--reply{% endif %}"
         method="post" action="/comments.php"
         id="comment-{{ reply_mode ? 'reply-' ~ reply_to.comment_id : 'create-' ~ category.category_id }}">
         <input type="hidden" name="comment[category]" value="{{ category.category_id }}">
+
         {% if reply_mode %}
             <input type="hidden" name="comment[reply]" value="{{ reply_to.comment_id }}">
         {% endif %}
+
         <div class="comment__container">
             <div class="avatar comment__avatar"
                 style="background-image:url('/profile.php?m=avatar&amp;u={{ user.user_id }}')">
@@ -169,7 +171,7 @@
                         <a class="comment__action comment__action--link" href="javascript:void(0)" onclick="commentVote(this, {{ comment.comment_id }}, -1)">Dislike</a>
                     {% endif %}
                     {% if perms.can_comment %}
-                        <a class="comment__action comment__action--link" href="#">Reply</a>
+                        <label class="comment__action comment__action--link" for="comment-reply-toggle-{{ comment.comment_id }}">Reply</label>
                     {% endif %}
                     {% if user is not null %}
                         <a class="comment__action comment__action--link comment__action--hide" href="#">Report</a>
@@ -181,6 +183,7 @@
         <div class="comment__replies comment__replies--indent-{{ indent }}" id="comment-{{ comment.comment_id }}-replies">
             {% from _self import comments_entry, comments_input %}
             {% if user|default(null) is not null and category|default(null) is not null and perms|default(null) is not null and perms.can_comment %}
+                <input type="checkbox" class="comment__reply-toggle" id="comment-reply-toggle-{{ comment.comment_id }}">
                 {{ comments_input(category, user, perms, comment) }}
             {% endif %}
             {% if comment.comment_replies is defined and comment.comment_replies|length > 0 %}

views/mio/errors/master.twig

@@ -19,5 +19,12 @@
     </div>
 
     {{ navigation(mio_navigation) }}
+
+    {% if error_code|default(0) >= 500 %}
+        <audio autoplay>
+            <source src="https://static.flash.moe/sounds/wbrb.ogg" type="audio/ogg">
+            <source src="https://static.flash.moe/sounds/wbrb.mp3" type="audio/mp3">
+        </audio>
+    {% endif %}
 {% endblock %}