implement recursive mentions folding tree

public/css/default.css

@@ -95,36 +95,32 @@ main ul
 
 main ul ul
 {
-    margin-bottom: 16px;
+    margin-left: 24px;
-    margin-left: 16px;
-    margin-top: 16px;
 }
 
-main ul > li
+main ul li
 {
-    margin: 8px 0;
+    border-top: 1px var(--color-default) solid;
-    padding: 8px 0;
     word-wrap: break-word;
-    border-bottom: 1px var(--color-default) solid;
 }
 
-main ul > li:last-child
+main ul li div
 {
-    border-bottom: none;
+    padding: 16px 0;
 }
 
-main ul > li > p
+main ul li p
 {
     padding: 8px 0;
 }
 
-main ul > li > p > br /* tmp solution for current twig filters implementation */
+main ul li p > br /* tmp solution for current twig filters implementation */
 {
     display: block;
     margin: 4px 0;
 }
 
-main ul li > span > svg
+main ul li span > svg
 {
     cursor: default;
     fill: var(--color-default);

src/Controller/RoomController.php

@@ -103,14 +103,23 @@ class RoomController extends AbstractController
             // Require valid kevachat meta
             if ($data = $this->_post($pending))
             {
-                $feed[] =
+                // Detect parent post
+                preg_match('/^@([A-z0-9]{64})\s/i', $data->message, $mention);
+
+                $feed[$data->id] =
                 [
                     'id'      => $data->id,
                     'user'    => $data->user,
                     'icon'    => $data->icon,
-                    'message'   => $data->message,
+                    'time'    => $data->time,
-                    'timestamp' => $data->time,
+                    'parent'  => isset($mention[1]) ? $mention[1] : null,
-                    'time'      => date('c', $data->time),
+                    'message' => trim(
+                        preg_replace( // remove mention from folded message
+                            '/^@([A-z0-9]{64})\s/i',
+                            '',
+                            $data->message
+                        )
+                    ),
                     'pending' => true
                 ];
             }
@@ -128,14 +137,23 @@ class RoomController extends AbstractController
             // Require valid kevachat meta
             if ($data = $this->_post($post))
             {
-                $feed[] =
+                // Detect parent post
+                preg_match('/^@([A-z0-9]{64})\s/i', $data->message, $mention);
+
+                $feed[$data->id] =
                 [
                     'id'      => $data->id,
                     'user'    => $data->user,
                     'icon'    => $data->icon,
-                    'message'   => $data->message,
+                    'time'    => $data->time,
-                    'timestamp' => $data->time,
+                    'parent'  => isset($mention[1]) ? $mention[1] : null,
-                    'time'      => date('c', $data->time),
+                    'message' => trim(
+                        preg_replace( // remove mention from folded message
+                            '/^@([A-z0-9]{64})\s/i',
+                            '',
+                            $data->message
+                        )
+                    ),
                     'pending' => false
                 ];
             }
@@ -151,6 +169,14 @@ class RoomController extends AbstractController
             $feed
         );
 
+        // Init folding &data pool
+        $fold = $feed;
+
+        // Build threading tree
+        $tree = $this->_tree(
+            $fold
+        );
+
         // RSS
         if ('rss' === $request->get('feed'))
         {
@@ -176,6 +202,7 @@ class RoomController extends AbstractController
             'default/room/index.html.twig',
             [
                 'feed'    => $feed,
+                'tree'    => $tree,
                 'request' => $request
             ]
         );
@@ -440,4 +467,36 @@ class RoomController extends AbstractController
 
         return $identicon->getImageDataUri('webp');
     }
+
+    private function _tree(
+        array &$feed,
+        ?string $parent = null
+    ): array
+    {
+        $tree = [];
+
+        foreach ($feed as $post)
+        {
+            if ($post['parent'] == $parent)
+            {
+                $children = $this->_tree(
+                    $feed,
+                    $post['id']
+                );
+
+                if ($children)
+                {
+                    $post['tree'] = $children;
+                }
+
+                $tree[$post['id']] = $post;
+
+                unset(
+                    $feed[$post['id']]
+                );
+            }
+        }
+
+        return $tree;
+    }
 }

templates/default/room/index.html.twig

@@ -1,20 +1,10 @@
-{% extends 'default/layout.html.twig' %}
+{% macro recursive_post_tree(namespace, tree) %}
-{% block head_title_content %}{{ request.get('namespace') | keva_namespace_value }} - {{ 'KevaChat' | trans }}{% endblock %}
+    {% import _self as self %}
-{% block main_content %}
+    {% if tree | length %}
-    {{
-        render(
-            controller(
-                'App\\Controller\\ModuleController::room',
-                {
-                    request: request
-                }
-            )
-        )
-    }}
-    {% if feed %}
         <ul>
-            {% for post in feed %}
+            {% for post in tree %}
                 <li>
+                    <div>
                         <a name="{{ post.id }}"></a>
                         {% if post.icon %}
                             <img src="{{ post.icon }}" alt="icon" />
@@ -24,9 +14,9 @@
                             </strong>
                         {% endif %}
                         &bull;
-                    <a rel="nofollow" href="{{ path('room_namespace', { namespace : request.get('namespace') }) }}#{{ post.id }}" title="{{ post.time }}">{{ post.timestamp | format_ago }}</a>
+                        <a rel="nofollow" href="{{ path('room_namespace', { namespace : namespace }) }}#{{ post.id }}" title="{{ post.time | date('c') }}">{{ post.time | format_ago }}</a>
                         &bull;
-                    <a rel="nofollow" href="{{ path('room_namespace', { namespace : request.get('namespace'), txid : post.id }) }}#{{ post.id }}">{{ 'reply' | trans }}</a>
+                        <a rel="nofollow" href="{{ path('room_namespace', { namespace : namespace, txid : post.id }) }}#{{ post.id }}">{{ 'reply' | trans }}</a>
                         {% if post.pending %}
                             <span title="{{ 'pending in pool' | trans }}">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16">
@@ -44,13 +34,37 @@
                                          | nl2br
                                          | markdown_to_html
                         }}
+                    </div>
+                    {% if post.tree | length %}
+                        {{ self.recursive_post_tree(namespace, post.tree) }}
+                    {% endif %}
                 </li>
             {% endfor %}
         </ul>
+    {% endif %}
+{% endmacro %}
+{% from _self import recursive_post_tree %}
+{% extends 'default/layout.html.twig' %}
+{% block head_title_content %}{{ request.get('namespace') | keva_namespace_value }} - {{ 'KevaChat' | trans }}{% endblock %}
+{% block main_content %}
+    {{
+        render(
+            controller(
+                'App\\Controller\\ModuleController::room',
+                {
+                    request: request
+                }
+            )
+        )
+    }}
+    {% if tree %}
+        {{ recursive_post_tree(request.get('namespace'), tree) }}
     {% else %}
         <ul>
             <li>
+                <div>
                     {{ 'room does not contain kevachat messages' | trans }}
+                </div>
             </li>
         </ul>
     {% endif %}