Comments: Fixed display, added archive list support for editor toolbox

lang/en/entities.php

@@ -396,6 +396,7 @@ return [
     'comment_placeholder' => 'Leave a comment here',
     'comment_thread_count' => ':count Comment Thread|:count Comment Threads',
     'comment_archived_count' => ':count Archived',
+    'comment_archived_threads' => 'Archived Threads',
     'comment_save' => 'Save Comment',
     'comment_new' => 'New Comment',
     'comment_created' => 'commented :createDiff',

resources/js/components/page-comment-reference.ts

@@ -34,13 +34,26 @@ export class PageCommentReference extends Component {
         window.addEventListener('editor-toolbox-change', (event) => {
              const tabName: string = (event as {detail: {tab: string, open: boolean}}).detail.tab;
              const isOpen = (event as {detail: {tab: string, open: boolean}}).detail.open;
-             if (tabName === 'comments' && isOpen) {
+             if (tabName === 'comments' && isOpen && this.link.checkVisibility()) {
                  this.showForEditor();
              } else {
                  this.hideMarker();
              }
         });
 
+        // Handle visibility changes within editor toolbox archived details dropdown
+        window.addEventListener('toggle', event => {
+            if (event.target instanceof HTMLElement && event.target.contains(this.link)) {
+                window.requestAnimationFrame(() => {
+                    if (this.link.checkVisibility()) {
+                        this.showForEditor();
+                    } else {
+                        this.hideMarker();
+                    }
+                });
+            }
+        }, {capture: true});
+
         // Handle comments tab changes to hide/show markers & indicators
         window.addEventListener('tabs-change', event => {
             const sectionId = (event as {detail: {showing: string}}).detail.showing;

resources/sass/_components.scss

@@ -1203,3 +1203,18 @@ input.scroll-box-search, .scroll-box-header-item {
 .scroll-box > li.empty-state:last-child {
   display: list-item;
 }
+
+details.section-expander summary {
+  border-top: 1px solid #DDD;
+  font-weight: bold;
+  font-size: 12px;
+  color: #888;
+  cursor: pointer;
+  padding-block: vars.$xs;
+}
+details.section-expander:open summary {
+  margin-bottom: vars.$s;
+}
+details.section-expander {
+  border-bottom: 1px solid #DDD;
+}

resources/views/pages/parts/toolbox-comments.blade.php

@@ -1,3 +1,6 @@
+{{--
+$comments - CommentTree
+--}}
 <div refs="editor-toolbox@tab-content" data-tab-content="comments" class="toolbox-tab-content">
     <h4>{{ trans('entities.comments') }}</h4>
 
@@ -5,11 +8,19 @@
         <p class="text-muted small mb-m">
             {{ trans('entities.comment_editor_explain') }}
         </p>
-        @foreach($comments->get() as $branch)
+        @foreach($comments->getActive() as $branch)
             @include('comments.comment-branch', ['branch' => $branch, 'readOnly' => true])
         @endforeach
         @if($comments->empty())
-            <p class="italic text-muted">{{ trans('common.no_items') }}</p>
+            <p class="italic text-muted">{{ trans('entities.comment_none') }}</p>
+        @endif
+        @if($comments->archivedThreadCount() > 0)
+            <details class="section-expander mt-s">
+                <summary>{{ trans('entities.comment_archived_threads') }}</summary>
+                @foreach($comments->getArchived() as $branch)
+                    @include('comments.comment-branch', ['branch' => $branch, 'readOnly' => true])
+                @endforeach
+            </details>
         @endif
     </div>
 </div>