Merge pull request #4286 from BookStackApp/comment_threads

Comment threads

app/Activity/CommentRepo.php

@@ -7,27 +7,14 @@ use BookStack\Entities\Models\Entity;
 use BookStack\Facades\Activity as ActivityService;
 use League\CommonMark\CommonMarkConverter;
 
-/**
- * Class CommentRepo.
- */
 class CommentRepo
 {
-    /**
-     * @var Comment
-     */
-    protected $comment;
-
-    public function __construct(Comment $comment)
-    {
-        $this->comment = $comment;
-    }
-
     /**
      * Get a comment by ID.
      */
     public function getById(int $id): Comment
     {
-        return $this->comment->newQuery()->findOrFail($id);
+        return Comment::query()->findOrFail($id);
     }
 
     /**
@@ -36,7 +23,7 @@ class CommentRepo
     public function create(Entity $entity, string $text, ?int $parent_id): Comment
     {
         $userId = user()->id;
-        $comment = $this->comment->newInstance();
+        $comment = new Comment();
 
         $comment->text = $text;
         $comment->html = $this->commentToHtml($text);
@@ -83,7 +70,7 @@ class CommentRepo
             'allow_unsafe_links' => false,
         ]);
 
-        return $converter->convertToHtml($commentText);
+        return $converter->convert($commentText);
     }
 
     /**
@@ -91,9 +78,8 @@ class CommentRepo
      */
     protected function getNextLocalId(Entity $entity): int
     {
-        /** @var Comment $comment */
-        $comment = $entity->comments(false)->orderBy('local_id', 'desc')->first();
+        $currentMaxId = $entity->comments()->max('local_id');
 
-        return ($comment->local_id ?? 0) + 1;
+        return $currentMaxId + 1;
     }
 }

app/Activity/Controllers/CommentController.php

@@ -10,11 +10,9 @@ use Illuminate\Validation\ValidationException;
 
 class CommentController extends Controller
 {
-    protected $commentRepo;
-
-    public function __construct(CommentRepo $commentRepo)
-    {
-        $this->commentRepo = $commentRepo;
+    public function __construct(
+        protected CommentRepo $commentRepo
+    ) {
     }
 
     /**
@@ -43,7 +41,12 @@ class CommentController extends Controller
         $this->checkPermission('comment-create-all');
         $comment = $this->commentRepo->create($page, $request->get('text'), $request->get('parent_id'));
 
-        return view('comments.comment', ['comment' => $comment]);
+        return view('comments.comment-branch', [
+            'branch' => [
+                'comment' => $comment,
+                'children' => [],
+            ]
+        ]);
     }
 
     /**

app/Activity/Tools/CommentTree.php

@@ -0,0 +1,102 @@
+<?php
+
+namespace BookStack\Activity\Tools;
+
+use BookStack\Activity\Models\Comment;
+use BookStack\Entities\Models\Page;
+
+class CommentTree
+{
+    /**
+     * The built nested tree structure array.
+     * @var array{comment: Comment, depth: int, children: array}[]
+     */
+    protected array $tree;
+    protected array $comments;
+
+    public function __construct(
+        protected Page $page
+    ) {
+        $this->comments = $this->loadComments();
+        $this->tree = $this->createTree($this->comments);
+    }
+
+    public function enabled(): bool
+    {
+        return !setting('app-disable-comments');
+    }
+
+    public function empty(): bool
+    {
+        return count($this->tree) === 0;
+    }
+
+    public function count(): int
+    {
+        return count($this->comments);
+    }
+
+    public function get(): array
+    {
+        return $this->tree;
+    }
+
+    /**
+     * @param Comment[] $comments
+     */
+    protected function createTree(array $comments): array
+    {
+        $byId = [];
+        foreach ($comments as $comment) {
+            $byId[$comment->local_id] = $comment;
+        }
+
+        $childMap = [];
+        foreach ($comments as $comment) {
+            $parent = $comment->parent_id;
+            if (is_null($parent) || !isset($byId[$parent])) {
+                $parent = 0;
+            }
+
+            if (!isset($childMap[$parent])) {
+                $childMap[$parent] = [];
+            }
+            $childMap[$parent][] = $comment->local_id;
+        }
+
+        $tree = [];
+        foreach ($childMap[0] as $childId) {
+            $tree[] = $this->createTreeForId($childId, 0, $byId, $childMap);
+        }
+
+        return $tree;
+    }
+
+    protected function createTreeForId(int $id, int $depth, array &$byId, array &$childMap): array
+    {
+        $childIds = $childMap[$id] ?? [];
+        $children = [];
+
+        foreach ($childIds as $childId) {
+            $children[] = $this->createTreeForId($childId, $depth + 1, $byId, $childMap);
+        }
+
+        return [
+            'comment' => $byId[$id],
+            'depth' => $depth,
+            'children' => $children,
+        ];
+    }
+
+    protected function loadComments(): array
+    {
+        if (!$this->enabled()) {
+            return [];
+        }
+
+        return $this->page->comments()
+            ->with('createdBy')
+            ->get()
+            ->all();
+    }
+}

app/Entities/Controllers/PageController.php

@@ -3,6 +3,7 @@
 namespace BookStack\Entities\Controllers;
 
 use BookStack\Activity\Models\View;
+use BookStack\Activity\Tools\CommentTree;
 use BookStack\Entities\Models\Page;
 use BookStack\Entities\Repos\PageRepo;
 use BookStack\Entities\Tools\BookContents;
@@ -140,15 +141,10 @@ class PageController extends Controller
 
         $pageContent = (new PageContent($page));
         $page->html = $pageContent->render();
-        $sidebarTree = (new BookContents($page->book))->getTree();
         $pageNav = $pageContent->getNavigation($page->html);
 
-        // Check if page comments are enabled
-        $commentsEnabled = !setting('app-disable-comments');
-        if ($commentsEnabled) {
-            $page->load(['comments.createdBy']);
-        }
-
+        $sidebarTree = (new BookContents($page->book))->getTree();
+        $commentTree = (new CommentTree($page));
         $nextPreviousLocator = new NextPreviousContentLocator($page, $sidebarTree);
 
         View::incrementFor($page);
@@ -159,7 +155,7 @@ class PageController extends Controller
             'book'            => $page->book,
             'current'         => $page,
             'sidebarTree'     => $sidebarTree,
-            'commentsEnabled' => $commentsEnabled,
+            'commentTree'     => $commentTree,
             'pageNav'         => $pageNav,
             'next'            => $nextPreviousLocator->getNext(),
             'previous'        => $nextPreviousLocator->getPrevious(),

lang/en/entities.php

@@ -362,11 +362,10 @@ return [
     'comment_placeholder' => 'Leave a comment here',
     'comment_count' => '{0} No Comments|{1} 1 Comment|[2,*] :count Comments',
     'comment_save' => 'Save Comment',
-    'comment_saving' => 'Saving comment...',
-    'comment_deleting' => 'Deleting comment...',
     'comment_new' => 'New Comment',
     'comment_created' => 'commented :createDiff',
     'comment_updated' => 'Updated :updateDiff by :username',
+    'comment_updated_indicator' => 'Updated',
     'comment_deleted_success' => 'Comment deleted',
     'comment_created_success' => 'Comment added',
     'comment_updated_success' => 'Comment updated',

resources/js/components/index.js

@@ -34,6 +34,7 @@ export {MarkdownEditor} from './markdown-editor';
 export {NewUserPassword} from './new-user-password';
 export {Notification} from './notification';
 export {OptionalInput} from './optional-input';
+export {PageComment} from './page-comment';
 export {PageComments} from './page-comments';
 export {PageDisplay} from './page-display';
 export {PageEditor} from './page-editor';

resources/js/components/page-comment.js

@@ -0,0 +1,96 @@
+import {Component} from './component';
+import {getLoading, htmlToDom} from '../services/dom';
+
+export class PageComment extends Component {
+
+    setup() {
+        // Options
+        this.commentId = this.$opts.commentId;
+        this.commentLocalId = this.$opts.commentLocalId;
+        this.commentParentId = this.$opts.commentParentId;
+        this.deletedText = this.$opts.deletedText;
+        this.updatedText = this.$opts.updatedText;
+
+        // Element References
+        this.container = this.$el;
+        this.contentContainer = this.$refs.contentContainer;
+        this.form = this.$refs.form;
+        this.formCancel = this.$refs.formCancel;
+        this.editButton = this.$refs.editButton;
+        this.deleteButton = this.$refs.deleteButton;
+        this.replyButton = this.$refs.replyButton;
+        this.input = this.$refs.input;
+
+        this.setupListeners();
+    }
+
+    setupListeners() {
+        if (this.replyButton) {
+            this.replyButton.addEventListener('click', () => this.$emit('reply', {
+                id: this.commentLocalId,
+                element: this.container,
+            }));
+        }
+
+        if (this.editButton) {
+            this.editButton.addEventListener('click', this.startEdit.bind(this));
+            this.form.addEventListener('submit', this.update.bind(this));
+            this.formCancel.addEventListener('click', () => this.toggleEditMode(false));
+        }
+
+        if (this.deleteButton) {
+            this.deleteButton.addEventListener('click', this.delete.bind(this));
+        }
+    }
+
+    toggleEditMode(show) {
+        this.contentContainer.toggleAttribute('hidden', show);
+        this.form.toggleAttribute('hidden', !show);
+    }
+
+    startEdit() {
+        this.toggleEditMode(true);
+        const lineCount = this.$refs.input.value.split('\n').length;
+        this.$refs.input.style.height = `${(lineCount * 20) + 40}px`;
+    }
+
+    async update(event) {
+        event.preventDefault();
+        const loading = this.showLoading();
+        this.form.toggleAttribute('hidden', true);
+
+        const reqData = {
+            text: this.input.value,
+            parent_id: this.parentId || null,
+        };
+
+        try {
+            const resp = await window.$http.put(`/comment/${this.commentId}`, reqData);
+            const newComment = htmlToDom(resp.data);
+            this.container.replaceWith(newComment);
+            window.$events.success(this.updatedText);
+        } catch (err) {
+            console.error(err);
+            window.$events.showValidationErrors(err);
+            this.form.toggleAttribute('hidden', false);
+            loading.remove();
+        }
+    }
+
+    async delete() {
+        this.showLoading();
+
+        await window.$http.delete(`/comment/${this.commentId}`);
+        this.container.closest('.comment-branch').remove();
+        window.$events.success(this.deletedText);
+        this.$emit('delete');
+    }
+
+    showLoading() {
+        const loading = getLoading();
+        loading.classList.add('px-l');
+        this.container.append(loading);
+        return loading;
+    }
+
+}

resources/js/components/page-comments.js

@@ -1,6 +1,5 @@
-import {scrollAndHighlightElement} from '../services/util';
 import {Component} from './component';
-import {htmlToDom} from '../services/dom';
+import {getLoading, htmlToDom} from '../services/dom';
 
 export class PageComments extends Component {
 
@@ -10,190 +9,130 @@ export class PageComments extends Component {
 
         // Element references
         this.container = this.$refs.commentContainer;
-        this.formContainer = this.$refs.formContainer;
         this.commentCountBar = this.$refs.commentCountBar;
+        this.commentsTitle = this.$refs.commentsTitle;
         this.addButtonContainer = this.$refs.addButtonContainer;
         this.replyToRow = this.$refs.replyToRow;
+        this.formContainer = this.$refs.formContainer;
+        this.form = this.$refs.form;
+        this.formInput = this.$refs.formInput;
+        this.formReplyLink = this.$refs.formReplyLink;
+        this.addCommentButton = this.$refs.addCommentButton;
+        this.hideFormButton = this.$refs.hideFormButton;
+        this.removeReplyToButton = this.$refs.removeReplyToButton;
 
         // Translations
-        this.updatedText = this.$opts.updatedText;
-        this.deletedText = this.$opts.deletedText;
         this.createdText = this.$opts.createdText;
         this.countText = this.$opts.countText;
 
         // Internal State
-        this.editingComment = null;
         this.parentId = null;
+        this.formReplyText = this.formReplyLink.textContent;
 
-        if (this.formContainer) {
-            this.form = this.formContainer.querySelector('form');
-            this.formInput = this.form.querySelector('textarea');
-            this.form.addEventListener('submit', this.saveComment.bind(this));
-        }
-
-        this.elem.addEventListener('click', this.handleAction.bind(this));
-        this.elem.addEventListener('submit', this.updateComment.bind(this));
+        this.setupListeners();
     }
 
-    handleAction(event) {
-        const actionElem = event.target.closest('[action]');
+    setupListeners() {
+        this.removeReplyToButton.addEventListener('click', this.removeReplyTo.bind(this));
+        this.hideFormButton.addEventListener('click', this.hideForm.bind(this));
+        this.addCommentButton.addEventListener('click', this.showForm.bind(this));
 
-        if (event.target.matches('a[href^="#"]')) {
-            const id = event.target.href.split('#')[1];
-            scrollAndHighlightElement(document.querySelector(`#${id}`));
-        }
-
-        if (actionElem === null) return;
-        event.preventDefault();
-
-        const action = actionElem.getAttribute('action');
-        const comment = actionElem.closest('[comment]');
-        if (action === 'edit') this.editComment(comment);
-        if (action === 'closeUpdateForm') this.closeUpdateForm();
-        if (action === 'delete') this.deleteComment(comment);
-        if (action === 'addComment') this.showForm();
-        if (action === 'hideForm') this.hideForm();
-        if (action === 'reply') this.setReply(comment);
-        if (action === 'remove-reply-to') this.removeReplyTo();
-    }
-
-    closeUpdateForm() {
-        if (!this.editingComment) return;
-        this.editingComment.querySelector('[comment-content]').style.display = 'block';
-        this.editingComment.querySelector('[comment-edit-container]').style.display = 'none';
-    }
-
-    editComment(commentElem) {
-        this.hideForm();
-        if (this.editingComment) this.closeUpdateForm();
-        commentElem.querySelector('[comment-content]').style.display = 'none';
-        commentElem.querySelector('[comment-edit-container]').style.display = 'block';
-        const textArea = commentElem.querySelector('[comment-edit-container] textarea');
-        const lineCount = textArea.value.split('\n').length;
-        textArea.style.height = `${(lineCount * 20) + 40}px`;
-        this.editingComment = commentElem;
-    }
-
-    updateComment(event) {
-        const form = event.target;
-        event.preventDefault();
-        const text = form.querySelector('textarea').value;
-        const reqData = {
-            text,
-            parent_id: this.parentId || null,
-        };
-        this.showLoading(form);
-        const commentId = this.editingComment.getAttribute('comment');
-        window.$http.put(`/comment/${commentId}`, reqData).then(resp => {
-            const newComment = document.createElement('div');
-            newComment.innerHTML = resp.data;
-            this.editingComment.innerHTML = newComment.children[0].innerHTML;
-            window.$events.success(this.updatedText);
-            window.$components.init(this.editingComment);
-            this.closeUpdateForm();
-            this.editingComment = null;
-        }).catch(window.$events.showValidationErrors).then(() => {
-            this.hideLoading(form);
-        });
-    }
-
-    deleteComment(commentElem) {
-        const id = commentElem.getAttribute('comment');
-        this.showLoading(commentElem.querySelector('[comment-content]'));
-        window.$http.delete(`/comment/${id}`).then(() => {
-            commentElem.parentNode.removeChild(commentElem);
-            window.$events.success(this.deletedText);
+        this.elem.addEventListener('page-comment-delete', () => {
             this.updateCount();
             this.hideForm();
         });
+
+        this.elem.addEventListener('page-comment-reply', event => {
+            this.setReply(event.detail.id, event.detail.element);
+        });
+
+        if (this.form) {
+            this.form.addEventListener('submit', this.saveComment.bind(this));
+        }
     }
 
     saveComment(event) {
         event.preventDefault();
         event.stopPropagation();
+
+        const loading = getLoading();
+        loading.classList.add('px-l');
+        this.form.after(loading);
+        this.form.toggleAttribute('hidden', true);
+
         const text = this.formInput.value;
         const reqData = {
             text,
             parent_id: this.parentId || null,
         };
-        this.showLoading(this.form);
+
         window.$http.post(`/comment/${this.pageId}`, reqData).then(resp => {
             const newElem = htmlToDom(resp.data);
-            this.container.appendChild(newElem);
-            window.$components.init(newElem);
+            this.formContainer.after(newElem);
             window.$events.success(this.createdText);
-            this.resetForm();
+            this.hideForm();
             this.updateCount();
         }).catch(err => {
+            this.form.toggleAttribute('hidden', false);
             window.$events.showValidationErrors(err);
-            this.hideLoading(this.form);
         });
+
+        this.form.toggleAttribute('hidden', false);
+        loading.remove();
     }
 
     updateCount() {
-        const count = this.container.children.length;
-        this.elem.querySelector('[comments-title]').textContent = window.trans_plural(this.countText, count, {count});
+        const count = this.getCommentCount();
+        this.commentsTitle.textContent = window.trans_plural(this.countText, count, {count});
     }
 
     resetForm() {
         this.formInput.value = '';
-        this.formContainer.appendChild(this.form);
-        this.hideForm();
-        this.removeReplyTo();
-        this.hideLoading(this.form);
+        this.parentId = null;
+        this.replyToRow.toggleAttribute('hidden', true);
+        this.container.append(this.formContainer);
     }
 
     showForm() {
-        this.formContainer.style.display = 'block';
-        this.formContainer.parentNode.style.display = 'block';
-        this.addButtonContainer.style.display = 'none';
-        this.formInput.focus();
-        this.formInput.scrollIntoView({behavior: 'smooth'});
+        this.formContainer.toggleAttribute('hidden', false);
+        this.addButtonContainer.toggleAttribute('hidden', true);
+        this.formContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'});
+        setTimeout(() => {
+            this.formInput.focus();
+        }, 100);
     }
 
     hideForm() {
-        this.formContainer.style.display = 'none';
-        this.formContainer.parentNode.style.display = 'none';
+        this.resetForm();
+        this.formContainer.toggleAttribute('hidden', true);
         if (this.getCommentCount() > 0) {
-            this.elem.appendChild(this.addButtonContainer);
+            this.elem.append(this.addButtonContainer);
         } else {
-            this.commentCountBar.appendChild(this.addButtonContainer);
+            this.commentCountBar.append(this.addButtonContainer);
         }
-        this.addButtonContainer.style.display = 'block';
+        this.addButtonContainer.toggleAttribute('hidden', false);
     }
 
     getCommentCount() {
-        return this.elem.querySelectorAll('.comment-box[comment]').length;
+        return this.container.querySelectorAll('[component="page-comment"]').length;
     }
 
-    setReply(commentElem) {
+    setReply(commentLocalId, commentElement) {
+        const targetFormLocation = commentElement.closest('.comment-branch').querySelector('.comment-branch-children');
+        targetFormLocation.append(this.formContainer);
         this.showForm();
-        this.parentId = Number(commentElem.getAttribute('local-id'));
-        this.replyToRow.style.display = 'block';
+        this.parentId = commentLocalId;
+        this.replyToRow.toggleAttribute('hidden', false);
         const replyLink = this.replyToRow.querySelector('a');
-        replyLink.textContent = `#${this.parentId}`;
+        replyLink.textContent = this.formReplyText.replace('1234', this.parentId);
         replyLink.href = `#comment${this.parentId}`;
     }
 
     removeReplyTo() {
         this.parentId = null;
-        this.replyToRow.style.display = 'none';
-    }
-
-    showLoading(formElem) {
-        const groups = formElem.querySelectorAll('.form-group');
-        for (const group of groups) {
-            group.style.display = 'none';
-        }
-        formElem.querySelector('.form-group.loading').style.display = 'block';
-    }
-
-    hideLoading(formElem) {
-        const groups = formElem.querySelectorAll('.form-group');
-        for (const group of groups) {
-            group.style.display = 'block';
-        }
-        formElem.querySelector('.form-group.loading').style.display = 'none';
+        this.replyToRow.toggleAttribute('hidden', true);
+        this.container.append(this.formContainer);
+        this.showForm();
     }
 
 }

resources/sass/_components.scss

@@ -663,6 +663,12 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   }
 }
 
+.comments-container {
+  padding-inline: $-xl;
+  @include smaller-than($m) {
+    padding-inline: $-xs;
+  }
+}
 .comment-box {
   border-radius: 4px;
   border: 1px solid #DDD;
@@ -682,26 +688,51 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   &:hover .actions, &:focus-within .actions {
     opacity: 1;
   }
+  .actions button:focus {
+    outline: 1px dotted var(--color-primary);
+  }
+  @include smaller-than($m) {
+    .actions {
+      opacity: 1;
+    }
+  }
 }
 
 .comment-box .header {
-  .meta {
-    img, a, span {
-      display: inline-block;
-      vertical-align: top;
-    }
-    a, span {
-      padding: $-xxs 0 $-xxs 0;
-      line-height: 1.6;
-    }
-    a { color: #666; }
-    span {
-      padding-inline-start: $-xxs;
-    }
+  border-bottom: 1px solid #DDD;
+  @include lightDark(border-color, #DDD, #000);
+  button {
+    font-size: .8rem;
+  }
+  a {
+    color: inherit;
   }
   .text-muted {
     color: #999;
   }
+  .right-meta .text-muted {
+    opacity: .8;
+  }
+}
+
+.comment-thread-indicator {
+  border-inline-start: 3px dotted #DDD;
+  @include lightDark(border-color, #DDD, #444);
+  margin-inline-start: $-xs;
+  width: $-l;
+  height: calc(100% - $-m);
+}
+
+.comment-branch .comment-branch .comment-branch .comment-branch .comment-thread-indicator {
+  display: none;
+}
+
+.comment-reply {
+  display: none;
+}
+
+.comment-branch .comment-branch .comment-branch .comment-branch .comment-reply {
+  display: block;
 }
 
 #tag-manager .drag-card {

resources/views/comments/comment-branch.blade.php

@@ -0,0 +1,15 @@
+<div class="comment-branch">
+    <div class="mb-m">
+        @include('comments.comment', ['comment' => $branch['comment']])
+    </div>
+    <div class="flex-container-row">
+        <div class="comment-thread-indicator-parent">
+            <div class="comment-thread-indicator"></div>
+        </div>
+        <div class="comment-branch-children flex">
+            @foreach($branch['children'] as $childBranch)
+                @include('comments.comment-branch', ['branch' => $childBranch])
+            @endforeach
+        </div>
+    </div>
+</div>

resources/views/comments/comment.blade.php

@@ -1,78 +1,82 @@
-<div class="comment-box mb-m" comment="{{ $comment->id }}" local-id="{{$comment->local_id}}" parent-id="{{$comment->parent_id}}" id="comment{{$comment->local_id}}">
+<div component="page-comment"
+     option:page-comment:comment-id="{{ $comment->id }}"
+     option:page-comment:comment-local-id="{{ $comment->local_id }}"
+     option:page-comment:comment-parent-id="{{ $comment->parent_id }}"
+     option:page-comment:updated-text="{{ trans('entities.comment_updated_success') }}"
+     option:page-comment:deleted-text="{{ trans('entities.comment_deleted_success') }}"
+     id="comment{{$comment->local_id}}"
+     class="comment-box">
     <div class="header p-s">
-        <div class="grid half left-focus no-gap v-center">
-            <div class="meta text-muted text-small">
-                <a href="#comment{{$comment->local_id}}">#{{$comment->local_id}}</a>
-                &nbsp;&nbsp;
+        <div class="flex-container-row justify-space-between wrap">
+            <div class="meta text-muted flex-container-row items-center">
                 @if ($comment->createdBy)
-                    <img width="50" src="{{ $comment->createdBy->getAvatar(50) }}" class="avatar" alt="{{ $comment->createdBy->name }}">
+                    <img width="50" src="{{ $comment->createdBy->getAvatar(50) }}" class="avatar mx-xs" alt="{{ $comment->createdBy->name }}">
                     &nbsp;
-                    <a href="{{ $comment->createdBy->getProfileUrl() }}">{{ $comment->createdBy->name }}</a>
+                    <a href="{{ $comment->createdBy->getProfileUrl() }}">{{ $comment->createdBy->getShortName(16) }}</a>
                 @else
-                    <span>{{ trans('common.deleted_user') }}</span>
+                    {{ trans('common.deleted_user') }}
                 @endif
-                <span title="{{ $comment->created_at }}">{{ trans('entities.comment_created', ['createDiff' => $comment->created]) }}</span>
+                <span title="{{ $comment->created_at }}">&nbsp;{{ trans('entities.comment_created', ['createDiff' => $comment->created]) }}</span>
                 @if($comment->isUpdated())
-                    <span title="{{ $comment->updated_at }}">
-                &bull;&nbsp;
-                    {{ trans('entities.comment_updated', ['updateDiff' => $comment->updated, 'username' => $comment->updatedBy? $comment->updatedBy->name : trans('common.deleted_user')]) }}
-            </span>
+                    <span class="mx-xs">&bull;</span>
+                    <span title="{{ trans('entities.comment_updated', ['updateDiff' => $comment->updated_at, 'username' => $comment->updatedBy->name ?? trans('common.deleted_user')]) }}">
+                 {{ trans('entities.comment_updated_indicator') }}
+                    </span>
                 @endif
             </div>
-            <div class="actions text-right">
-                @if(userCan('comment-update', $comment))
-                    <button type="button" class="text-button" action="edit" aria-label="{{ trans('common.edit') }}" title="{{ trans('common.edit') }}">@icon('edit')</button>
-                @endif
-                @if(userCan('comment-create-all'))
-                    <button type="button" class="text-button" action="reply" aria-label="{{ trans('common.reply') }}" title="{{ trans('common.reply') }}">@icon('reply')</button>
-                @endif
-                @if(userCan('comment-delete', $comment))
-                    <div component="dropdown" class="dropdown-container">
-                        <button type="button" refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" class="text-button" title="{{ trans('common.delete') }}">@icon('delete')</button>
-                        <ul refs="dropdown@menu" class="dropdown-menu" role="menu">
-                            <li class="px-m text-small text-muted pb-s">{{trans('entities.comment_delete_confirm')}}</li>
-                            <li>
-                                <button action="delete" type="button" class="text-button text-neg icon-item">
-                                    @icon('delete')
-                                    <div>{{ trans('common.delete') }}</div>
-                                </button>
-                            </li>
-                        </ul>
-                    </div>
-                @endif
+            <div class="right-meta flex-container-row justify-flex-end items-center px-s">
+                <div class="actions mr-s">
+                    @if(userCan('comment-create-all'))
+                        <button refs="page-comment@reply-button" type="button" class="text-button text-muted hover-underline p-xs">@icon('reply') {{ trans('common.reply') }}</button>
+                    @endif
+                    @if(userCan('comment-update', $comment))
+                        <button refs="page-comment@edit-button" type="button" class="text-button text-muted hover-underline p-xs">@icon('edit') {{ trans('common.edit') }}</button>
+                    @endif
+                    @if(userCan('comment-delete', $comment))
+                        <div component="dropdown" class="dropdown-container">
+                            <button type="button" refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" class="text-button text-muted hover-underline p-xs">@icon('delete') {{ trans('common.delete') }}</button>
+                            <ul refs="dropdown@menu" class="dropdown-menu" role="menu">
+                                <li class="px-m text-small text-muted pb-s">{{trans('entities.comment_delete_confirm')}}</li>
+                                <li>
+                                    <button refs="page-comment@delete-button" type="button" class="text-button text-neg icon-item">
+                                        @icon('delete')
+                                        <div>{{ trans('common.delete') }}</div>
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
+                    @endif
+                    <span class="text-muted">
+                        &nbsp;&bull;&nbsp;
+                    </span>
+                </div>
+                <div>
+                    <a class="bold text-muted" href="#comment{{$comment->local_id}}">#{{$comment->local_id}}</a>
+                </div>
             </div>
         </div>
 
     </div>
 
-    @if ($comment->parent_id)
-        <div class="reply-row primary-background-light text-muted px-s py-xs mb-s">
-            {!! trans('entities.comment_in_reply_to', ['commentId' => '<a href="#comment'.$comment->parent_id.'">#'.$comment->parent_id.'</a>']) !!}
-        </div>
-    @endif
-
-    <div comment-content class="content px-s pb-s">
-        <div class="form-group loading" style="display: none;">
-            @include('common.loading-icon', ['text' => trans('entities.comment_deleting')])
-        </div>
+    <div refs="page-comment@content-container" class="content px-m py-s">
+        @if ($comment->parent_id)
+            <p class="comment-reply mb-xxs">
+                <a class="text-muted text-small" href="#comment{{ $comment->parent_id }}">@icon('reply'){{ trans('entities.comment_in_reply_to', ['commentId' => '#' . $comment->parent_id]) }}</a>
+            </p>
+        @endif
         {!! $comment->html  !!}
     </div>
 
     @if(userCan('comment-update', $comment))
-        <div comment-edit-container style="display: none;" class="content px-s">
-            <form novalidate>
-                <div class="form-group description-input">
-                    <textarea name="markdown" rows="3" placeholder="{{ trans('entities.comment_placeholder') }}">{{ $comment->text }}</textarea>
-                </div>
-                <div class="form-group text-right">
-                    <button type="button" class="button outline" action="closeUpdateForm">{{ trans('common.cancel') }}</button>
-                    <button type="submit" class="button">{{ trans('entities.comment_save') }}</button>
-                </div>
-                <div class="form-group loading" style="display: none;">
-                    @include('common.loading-icon', ['text' => trans('entities.comment_saving')])
-                </div>
-            </form>
-        </div>
+        <form novalidate refs="page-comment@form" hidden class="content pt-s px-s block">
+            <div class="form-group description-input">
+                <textarea refs="page-comment@input" name="markdown" rows="3" placeholder="{{ trans('entities.comment_placeholder') }}">{{ $comment->text }}</textarea>
+            </div>
+            <div class="form-group text-right">
+                <button type="button" class="button outline" refs="page-comment@form-cancel">{{ trans('common.cancel') }}</button>
+                <button type="submit" class="button">{{ trans('entities.comment_save') }}</button>
+            </div>
+        </form>
     @endif
 
 </div>

resources/views/comments/comments.blade.php

@@ -1,34 +1,34 @@
 <section component="page-comments"
          option:page-comments:page-id="{{ $page->id }}"
-         option:page-comments:updated-text="{{ trans('entities.comment_updated_success') }}"
-         option:page-comments:deleted-text="{{ trans('entities.comment_deleted_success') }}"
          option:page-comments:created-text="{{ trans('entities.comment_created_success') }}"
          option:page-comments:count-text="{{ trans('entities.comment_count') }}"
          class="comments-list"
          aria-label="{{ trans('entities.comments') }}">
 
-    <div refs="page-comments@commentCountBar" class="grid half left-focus v-center no-row-gap">
-        <h5 comments-title>{{ trans_choice('entities.comment_count', count($page->comments), ['count' => count($page->comments)]) }}</h5>
-        @if (count($page->comments) === 0 && userCan('comment-create-all'))
-            <div class="text-m-right" refs="page-comments@addButtonContainer">
-                <button type="button" action="addComment"
+    <div refs="page-comments@comment-count-bar" class="grid half left-focus v-center no-row-gap">
+        <h5 refs="page-comments@comments-title">{{ trans_choice('entities.comment_count', $commentTree->count(), ['count' => $commentTree->count()]) }}</h5>
+        @if ($commentTree->empty() && userCan('comment-create-all'))
+            <div class="text-m-right" refs="page-comments@add-button-container">
+                <button type="button"
+                        refs="page-comments@add-comment-button"
                         class="button outline">{{ trans('entities.comment_add') }}</button>
             </div>
         @endif
     </div>
 
     <div refs="page-comments@commentContainer" class="comment-container">
-        @foreach($page->comments as $comment)
-            @include('comments.comment', ['comment' => $comment])
+        @foreach($commentTree->get() as $branch)
+            @include('comments.comment-branch', ['branch' => $branch])
         @endforeach
     </div>
 
     @if(userCan('comment-create-all'))
         @include('comments.create')
 
-        @if (count($page->comments) > 0)
+        @if (!$commentTree->empty())
             <div refs="page-comments@addButtonContainer" class="text-right">
-                <button type="button" action="addComment"
+                <button type="button"
+                        refs="page-comments@add-comment-button"
                         class="button outline">{{ trans('entities.comment_add') }}</button>
             </div>
         @endif

resources/views/comments/create.blade.php

@@ -1,32 +1,32 @@
-<div class="comment-box" style="display:none;">
+<div refs="page-comments@form-container" hidden class="comment-branch mb-m">
+    <div class="comment-box">
 
-    <div class="header p-s">{{ trans('entities.comment_new') }}</div>
-    <div refs="page-comments@replyToRow" class="reply-row primary-background-light text-muted px-s py-xs mb-s" style="display: none;">
-        <div class="grid left-focus v-center">
-            <div>
-                {!! trans('entities.comment_in_reply_to', ['commentId' => '<a href=""></a>']) !!}
-            </div>
-            <div class="text-right">
-                <button class="text-button" action="remove-reply-to">{{ trans('common.remove') }}</button>
+        <div class="header p-s">{{ trans('entities.comment_new') }}</div>
+        <div refs="page-comments@reply-to-row" hidden class="primary-background-light text-muted px-s py-xs">
+            <div class="grid left-focus v-center">
+                <div>
+                    <a refs="page-comments@form-reply-link" href="#">{{ trans('entities.comment_in_reply_to', ['commentId' => '1234']) }}</a>
+                </div>
+                <div class="text-right">
+                    <button refs="page-comments@remove-reply-to-button" class="text-button">{{ trans('common.remove') }}</button>
+                </div>
             </div>
         </div>
-    </div>
 
-    <div refs="page-comments@formContainer" class="content px-s">
-        <form novalidate>
-            <div class="form-group description-input">
-                        <textarea name="markdown" rows="3"
-                                  placeholder="{{ trans('entities.comment_placeholder') }}"></textarea>
-            </div>
-            <div class="form-group text-right">
-                <button type="button" class="button outline"
-                        action="hideForm">{{ trans('common.cancel') }}</button>
-                <button type="submit" class="button">{{ trans('entities.comment_save') }}</button>
-            </div>
-            <div class="form-group loading" style="display: none;">
-                @include('common.loading-icon', ['text' => trans('entities.comment_saving')])
-            </div>
-        </form>
-    </div>
+        <div class="content px-s pt-s">
+            <form refs="page-comments@form" novalidate>
+                <div class="form-group description-input">
+                <textarea refs="page-comments@form-input" name="markdown"
+                          rows="3"
+                          placeholder="{{ trans('entities.comment_placeholder') }}"></textarea>
+                </div>
+                <div class="form-group text-right">
+                    <button type="button" class="button outline"
+                            refs="page-comments@hide-form-button">{{ trans('common.cancel') }}</button>
+                    <button type="submit" class="button">{{ trans('entities.comment_save') }}</button>
+                </div>
+            </form>
+        </div>
 
+    </div>
 </div>

resources/views/pages/show.blade.php

@@ -27,15 +27,15 @@
 
     @include('entities.sibling-navigation', ['next' => $next, 'previous' => $previous])
 
-    @if ($commentsEnabled)
+    @if ($commentTree->enabled())
         @if(($previous || $next))
             <div class="px-xl">
                 <hr class="darker">
             </div>
         @endif
 
-        <div class="px-xl comments-container mb-l print-hidden">
-            @include('comments.comments', ['page' => $page])
+        <div class="comments-container mb-l print-hidden">
+            @include('comments.comments', ['commentTree' => $commentTree, 'page' => $page])
             <div class="clearfix"></div>
         </div>
     @endif

tests/Entity/CommentTest.php

@@ -114,4 +114,25 @@ class CommentTest extends TestCase
         $pageView->assertDontSee($script, false);
         $pageView->assertSee('sometextinthecommentupdated');
     }
+
+    public function test_reply_comments_are_nested()
+    {
+        $this->asAdmin();
+        $page = $this->entities->page();
+
+        $this->postJson("/comment/$page->id", ['text' => 'My new comment']);
+        $this->postJson("/comment/$page->id", ['text' => 'My new comment']);
+
+        $respHtml = $this->withHtml($this->get($page->getUrl()));
+        $respHtml->assertElementCount('.comment-branch', 3);
+        $respHtml->assertElementNotExists('.comment-branch .comment-branch');
+
+        $comment = $page->comments()->first();
+        $resp = $this->postJson("/comment/$page->id", ['text' => 'My nested comment', 'parent_id' => $comment->local_id]);
+        $resp->assertStatus(200);
+
+        $respHtml = $this->withHtml($this->get($page->getUrl()));
+        $respHtml->assertElementCount('.comment-branch', 4);
+        $respHtml->assertElementContains('.comment-branch .comment-branch', 'My nested comment');
+    }
 }