Show content warnings and allow expand/contract

Author: cinnamon-bun

lib/depject/message/html/layout/default.js

@@ -74,15 +74,33 @@ exports.create = function (api) {
       classList.push('-unread')
     }
 
+    let cw = msg.value.content.contentWarning
+    if (typeof cw !== 'string' || cw.length === 0) {
+      cw = undefined;
+    } else {
+      // TODO: emoji shortcodes?
+      // TODO: truncate very long content warning, maybe use max-height?
+      classList.push('-hasContentWarning');
+    }
+
     return h('div', {
       classList,
       hooks
     }, [
       messageHeader(msg, { replyInfo, priority }),
-      h('section', {
+      cw
+        ? h('a.contentWarning',
+          {
+            href: '#',
+            'ev-click': toggleAndTrack(expanded),
+          },
+          cw,
+        )
+        : undefined,
+      h('section.content', {
         classList: [when(expanded, '-expanded')],
         hooks: [ExpanderHook(needsExpand)]
-      }, [content]),
+      }, content),
       computed(msg.key, (key) => {
         if (ref.isMsg(key)) {
           return h('footer', [

lib/depject/message/html/layout/mini.js

@@ -73,7 +73,7 @@ exports.create = function (api) {
       messageHeader(msg, {
         replyInfo, priority, miniContent
       }),
-      h('section', {
+      h('section.content', {
         classList: [when(expanded, '-expanded')],
         hooks: [ExpanderHook(needsExpand)]
       }, [content]),

styles/base/message.mcss

@@ -118,7 +118,11 @@ Message {
       }
     }
   }
-  section {
+  a.contentWarning {
+    padding: 10px 20px
+    font-weight: bold
+  }
+  section.content {
     margin: 0
     padding: 0 20px
     max-height: 1170px
@@ -293,4 +297,16 @@ Message {
   -new, -unread {
     z-index: 1
   }
+  -hasContentWarning {
+    section.content {
+      max-height: 0px
+    }
+    footer {
+      div.expander {
+          -webkit-mask-image: none !important
+          padding-top: 0px !important
+          margin-top: 0px !important
+      }
+    }
+  }
 }

styles/dark/message.mcss

@@ -79,6 +79,9 @@ Message {
       }
     }
   }
+  a.contentWarning {
+    background: #000
+  }
   a.backlink {
     padding: 10px 20px
     background: #2d2c2c

styles/light/message.mcss

@@ -69,6 +69,9 @@ Message {
       }
     }
   }
+  a.contentWarning {
+    background: #ddd
+  }
   a.backlink {
     border-top: 1px solid #eee
     padding: 10px 15px