feat: support expandable quoteblock

src/assets/item.css

@@ -107,6 +107,89 @@
     border-radius: var(--box-border-radius);
   }
 
+  .tg-expandable {
+    margin: 16px 0;
+    font-size: 0.8em;
+    background: var(--cell-background-color);
+    border-left: 3px solid var(--highlight-color);
+    padding: 6px;
+    padding-left: 10px;
+    padding-right: 30px;
+    border-radius: var(--box-border-radius);
+    position: relative;
+    min-height: 3.6em;
+  }
+
+  .tg-expandable__checkbox {
+    display: none;
+  }
+
+  .tg-expandable__content {
+    display: block;
+    user-select: text;
+  }
+
+  /* use @supports to check :has() support */
+  @supports selector(:has(*)) {
+    /* when :has() is supported, default to collapsed */
+    .tg-expandable__content {
+      display: -webkit-box;
+      line-clamp: 3;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+
+    /* when checkbox is checked, expand */
+    .tg-expandable:has(.tg-expandable__checkbox:checked) .tg-expandable__content {
+      display: block;
+      line-clamp: unset;
+      -webkit-line-clamp: unset;
+      -webkit-box-orient: unset;
+      overflow: visible;
+      padding-bottom: 24px;
+    }
+  }
+
+  .tg-expandable__toggle {
+    /* default hidden, not show small triangle when :has() is not supported */
+    display: none;
+  }
+
+  @supports selector(:has(*)) {
+    .tg-expandable__toggle {
+      display: block;
+      position: absolute;
+      right: 6px;
+      bottom: 6px;
+      width: 22px;
+      height: 22px;
+      cursor: pointer;
+      user-select: none;
+      z-index: 2;
+    }
+
+    .tg-expandable__toggle::after {
+      content: '';
+      display: block;
+      width: 0;
+      height: 0;
+      border-left: 6px solid var(--secondary-color);
+      border-top: 6px solid transparent;
+      border-bottom: 6px solid transparent;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      transition: transform 0.2s ease;
+      filter: var(--icon-secondary-filter);
+    }
+
+    .tg-expandable:has(.tg-expandable__checkbox:checked) .tg-expandable__toggle::after {
+      transform: translate(-50%, -50%) rotate(90deg);
+    }
+  }
+
   .tgme_widget_message_sticker {
     display: block;
   }

src/lib/telegram/index.js

@@ -104,6 +104,17 @@ function modifyHTMLContent($, content, { index } = {}) {
   $(content).find('a')?.each((_index, a) => {
     $(a)?.attr('title', $(a)?.text())?.removeAttr('onclick')
   })
+  // Transform Telegram expandable quotes
+  $(content).find('blockquote[expandable]')?.each((_index, bq) => {
+    const innerHTML = $(bq).html()
+    const id = `expand-${index}-${_index}`
+    const expandable = `<div class="tg-expandable">
+      <input type="checkbox" id="${id}" class="tg-expandable__checkbox">
+      <div class="tg-expandable__content">${innerHTML}</div>
+      <label for="${id}" class="tg-expandable__toggle" aria-label="Expand/Collapse"></label>
+    </div>`
+    $(bq).replaceWith(expandable)
+  })
   $(content).find('tg-spoiler')?.each((_index, spoiler) => {
     const id = `spoiler-${index}-${_index}`
     $(spoiler)?.attr('id', id)