ui: collapse problem_solution long content by default

packages/ui-default/components/discussion/collapsible.page.styl

@@ -0,0 +1,40 @@
+.collapsible-content
+  position: relative
+
+  &::after
+    content: ""
+    position: absolute
+    bottom: rem(16px)
+    left: 0
+    right: 0
+    height: rem(55px)
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1))
+    pointer-events: none
+    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1)
+    opacity: 1
+    z-index: 1
+
+  &__inner
+    overflow: hidden
+    max-height: rem(300px)
+    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1)
+
+  .collapsible-toggle
+    text-align: center
+    opacity: 0
+
+    &.visible
+      opacity: 1
+
+    &__link
+      color: $primary-color
+      text-decoration: none
+      display: inline-block
+      position: relative
+      overflow: hidden
+
+.collapsible-content.expanded
+  &::after
+    opacity: 0 !important
+  .collapsible-content__inner
+    max-height: none

packages/ui-default/components/discussion/collapsible.page.tsx

@@ -0,0 +1,62 @@
+import 'jquery.easing';
+
+import $ from 'jquery';
+import { AutoloadPage } from 'vj/misc/Page';
+import { i18n } from 'vj/utils';
+
+function initCollapsibleContent() {
+  $('.collapsible-content').each(function () {
+    const $content = $(this);
+    let $inner = $content.find('.collapsible-content__inner');
+    if ($inner.length) return;
+    const $children = $content.children().detach();
+    $inner = $('<div class="collapsible-content__inner"></div>');
+    $inner.append($children);
+    $content.append($inner);
+    $content.find('.collapsible-toggle').remove();
+    const scrollHeight = $inner[0].scrollHeight;
+    const clientHeight = $inner[0].clientHeight;
+    if (scrollHeight > clientHeight + 10) {
+      const $toggle = $(`<div class="collapsible-toggle">
+        <a href="javascript:;" class="collapsible-toggle__link">${i18n('Show more')}</a>
+      </div>`);
+      $content.append($toggle);
+      const $toggleLink = $toggle.find('.collapsible-toggle__link');
+      requestAnimationFrame(() => {
+        $toggle.addClass('visible');
+      });
+      $toggleLink.on('click', (e) => {
+        e.preventDefault();
+        if ($content.hasClass('expanded')) {
+          const currentHeight = $inner[0].scrollHeight;
+          $inner.css('max-height', `${currentHeight}px`);
+          requestAnimationFrame(() => {
+            $content.removeClass('expanded');
+            $inner.css('max-height', '');
+            $toggleLink.text(i18n('Show more'));
+          });
+        } else {
+          // Expand: get full height by temporarily removing max-height, then animate to it
+          const currentMaxHeight = $inner.css('max-height');
+          $inner.css('max-height', 'none');
+          const fullHeight = $inner[0].scrollHeight;
+          $inner.css('max-height', currentMaxHeight);
+          requestAnimationFrame(() => {
+            $inner.css('max-height', `${fullHeight}px`);
+            $content.addClass('expanded');
+            $toggleLink.text(i18n('Show less'));
+          });
+        }
+      });
+    } else $content.addClass('expanded');
+  });
+}
+
+const commentsPage = new AutoloadPage('commentsPage', () => {
+  initCollapsibleContent();
+  $(document).on('vjContentNew', () => {
+    initCollapsibleContent();
+  });
+});
+
+export default commentsPage;

packages/ui-default/components/discussion/comments.page.styl

@@ -133,6 +133,8 @@ $downvote-color = red
       box-shadow: none !important
       cursor: default
 
+.dczcomments__replies .collapsible-content__inner
+  max-height: rem(200px)
 
 +mobile()
   .dczcomments__item

packages/ui-default/components/discussion/comments.page.tsx

@@ -1,11 +1,11 @@
 import 'jquery.easing';
 
 import $ from 'jquery';
-import { ConfirmDialog } from 'vj/components/dialog';
+import { confirm } from 'vj/components/dialog';
 import CommentBox from 'vj/components/discussion/CommentBox';
 import { AutoloadPage } from 'vj/misc/Page';
 import {
-  delay, i18n, request, slideDown, slideUp, tpl,
+  delay, i18n, request, slideDown, slideUp,
 } from 'vj/utils';
 
 const $replyTemplate = $('.commentbox-container').eq(0).clone();
@@ -162,10 +162,7 @@ async function onCommentClickDelete(type, ev) {
   const message = (type === 'comment')
     ? 'Confirm deleting this comment? Its replies will be deleted as well.'
     : 'Confirm deleting this reply?';
-  const action = await new ConfirmDialog({
-    $body: tpl.typoMsg(i18n(message)),
-  }).open();
-  if (action !== 'yes') return;
+  if (!await confirm(i18n(message))) return;
 
   const $evTarget = $(ev.currentTarget);
   const form = JSON.parse($evTarget.attr('data-form'));