wip spoilers

TODO tests

Author: chrisbobbe

assets/l10n/app_en.arb

@@ -366,6 +366,10 @@
   "@serverUrlValidationErrorUnsupportedScheme": {
     "description": "Error message when URL has an unsupported scheme."
   },
+  "spoilerDefaultHeaderText": "Spoiler",
+  "@spoilerDefaultHeaderText": {
+    "description": "The default header text in a spoiler block ( https://zulip.com/help/spoilers )."
+  },
   "markAllAsReadLabel": "Mark all messages as read",
   "@markAllAsReadLabel": {
     "description": "Button text to mark messages as read."

lib/model/content.dart

@@ -1,3 +1,4 @@
+import 'package:collection/collection.dart';
 import 'package:flutter/foundation.dart';
 import 'package:html/dom.dart' as dom;
 import 'package:html/parser.dart';
@@ -256,6 +257,13 @@ class QuotationNode extends BlockContentNode {
   }
 }
 
+class SpoilerNode extends BlockContentNode {
+  const SpoilerNode({super.debugHtmlNode, required this.header, required this.content});
+
+  final List<BlockContentNode> header;
+  final List<BlockContentNode> content;
+}
+
 class CodeBlockNode extends BlockContentNode {
   const CodeBlockNode(this.spans, {super.debugHtmlNode});
 
@@ -760,6 +768,36 @@ class _ZulipContentParser {
     return ListNode(listStyle!, items, debugHtmlNode: debugHtmlNode);
   }
 
+  BlockContentNode parseSpoilerNode(dom.Element divElement) {
+    List<BlockContentNode> title;
+    List<BlockContentNode> content;
+
+    assert(_debugParserContext == _ParserContext.block);
+    assert(divElement.localName == 'div'
+        && divElement.className == 'spoiler-block');
+
+    BlockContentNode unimplemented() => UnimplementedBlockContentNode(htmlNode: divElement);
+
+    if (divElement.nodes case [
+      dom.Element(
+        localName: 'div', className: 'spoiler-header',
+        nodes: var headerNodes,
+      ),
+      dom.Element(
+        localName: 'div', className: 'spoiler-content',
+        nodes: var contentNodes,
+      )
+    ]) {
+      return SpoilerNode(
+        header: parseBlockContentList(headerNodes),
+        content: parseBlockContentList(contentNodes),
+      );
+    } else {
+      return unimplemented();
+    }
+
+  }
+
   BlockContentNode parseCodeBlock(dom.Element divElement) {
     assert(_debugParserContext == _ParserContext.block);
     final mainElement = () {
@@ -930,6 +968,10 @@ class _ZulipContentParser {
         parseBlockContentList(element.nodes));
     }
 
+    if (localName == 'div' && className == 'spoiler-block') {
+      return parseSpoilerNode(element);
+    }
+
     if (localName == 'div' && className == 'codehilite') {
       return parseCodeBlock(element);
     }

lib/widgets/content.dart

@@ -1,7 +1,10 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:flutter/widgets.dart';
 import 'package:html/dom.dart' as dom;
+import 'package:flutter_gen/gen_l10n/zulip_localizations.dart';
 
 import '../api/core.dart';
 import '../api/model/model.dart';
@@ -78,6 +81,8 @@ class BlockContentList extends StatelessWidget {
           return Quotation(node: node);
         } else if (node is ListNode) {
           return ListNodeWidget(node: node);
+        } else if (node is SpoilerNode) {
+          return Spoiler(node: node);
         } else if (node is CodeBlockNode) {
           return CodeBlock(node: node);
         } else if (node is MathBlockNode) {
@@ -228,6 +233,97 @@ class ListItemWidget extends StatelessWidget {
   }
 }
 
+class Spoiler extends StatefulWidget {
+  const Spoiler({super.key, required this.node});
+
+  final SpoilerNode node;
+
+  @override
+  State<Spoiler> createState() => _SpoilerState();
+}
+
+class _SpoilerState extends State<Spoiler> with TickerProviderStateMixin {
+  bool expanded = false;
+  late final AnimationController _controller = AnimationController(
+    duration: const Duration(milliseconds: 400),
+    vsync: this,
+  );
+  late final Animation<double> _animation = CurvedAnimation(
+    parent: _controller,
+    curve: Curves.easeInOut,
+  );
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  void _handleTap() {
+    setState(() {
+      if (!expanded) {
+        _controller.forward();
+        expanded = true;
+      } else {
+        _controller.reverse();
+        expanded = false;
+      }
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final zulipLocalizations = ZulipLocalizations.of(context);
+    final header = widget.node.header;
+    final effectiveHeader = header.isNotEmpty
+      ? header
+      : [ParagraphNode(links: null,
+           nodes: [TextNode(zulipLocalizations.spoilerDefaultHeaderText)])];
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(0, 5, 0, 15),
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          border: Border.all(color: const Color(0xff808080)),
+          borderRadius: BorderRadius.circular(10),
+        ),
+        child: Padding(padding: const EdgeInsetsDirectional.fromSTEB(10, 2, 8, 2),
+          child: Column(
+            children: [
+              GestureDetector(
+                behavior: HitTestBehavior.translucent,
+                onTap: _handleTap,
+                child: Padding(
+                  padding: const EdgeInsets.all(5),
+                  child: Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
+                    Expanded(
+                      child: DefaultTextStyle.merge(
+                        style: weightVariableTextStyle(context, wght: 700),
+                        child: BlockContentList(
+                          nodes: effectiveHeader))),
+                    RotationTransition(
+                      turns: _animation.drive(Tween(begin: 0, end: 0.5)),
+                      child: const Icon(color: Color(0xffd4d4d4), size: 25,
+                        Icons.expand_more)),
+                  ]))),
+              FadeTransition(
+                opacity: _animation,
+                child: const SizedBox(height: 0, width: double.infinity,
+                  child: DecoratedBox(
+                    decoration: BoxDecoration(
+                      border: Border(
+                        bottom: BorderSide(width: 1, color: Color(0xff808080))))))),
+              SizeTransition(
+                sizeFactor: _animation,
+                axis: Axis.vertical,
+                axisAlignment: -1,
+                child: Padding(
+                  padding: const EdgeInsets.all(5),
+                  child: BlockContentList(nodes: widget.node.content))),
+            ]))));
+  }
+}
+
+
 class MessageImage extends StatelessWidget {
   const MessageImage({super.key, required this.node});