wip and render them

Author: gnprice

lib/widgets/message_list.dart

@@ -348,7 +348,8 @@ class _MessageListState extends State<MessageList> with PerAccountStoreAwareStat
           case MessageListDateSeparatorItem():
             final header = RecipientHeader(message: data.message, narrow: widget.narrow);
             return StickyHeaderItem(allowOverflow: true,
-              header: header, child: Text("a new day")); // TODO
+              header: header,
+              child: DateSeparator(message: data.message));
           case MessageListMessageItem():
             final header = RecipientHeader(message: data.message, narrow: widget.narrow);
             return MessageItem(
@@ -468,6 +469,61 @@ class RecipientHeader extends StatelessWidget {
   }
 }
 
+class DateSeparator extends StatelessWidget {
+  const DateSeparator({super.key, required this.message});
+
+  final Message message;
+
+  @override
+  Widget build(BuildContext context) {
+    final zulipLocalizations = ZulipLocalizations.of(context);
+
+    // This color matches recipient headers.  TODO is that what we want?
+    final color = Colors.black.withOpacity(0.4);
+
+    return ColoredBox(color: Colors.white,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 2),
+        child: Row(children: [
+          Expanded(
+            child: SizedBox(height: 0,
+              child: DecoratedBox(
+                decoration: BoxDecoration(
+                  border: Border(
+                    bottom: BorderSide(
+                      width: 0,
+                      color: color)))))),
+          Padding(padding: const EdgeInsets.symmetric(horizontal: 2),
+            // TODO dedupe with RecipientHeaderDate
+            child: Text(
+              style: TextStyle(
+                color: color,
+                fontFamily: 'Source Sans 3',
+                fontSize: 16,
+                // In Figma this has a line-height of 19, but using 18
+                // here to match the stream/topic text widgets helps
+                // to align all the text to the same baseline.
+                height: (18 / 16),
+                // This is equivalent to css `all-small-caps`, see:
+                //   https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps#all-small-caps
+                fontFeatures: const [FontFeature.enable('c2sc'), FontFeature.enable('smcp')],
+              ).merge(weightVariableTextStyle(context)),
+              formatHeaderDate(
+                zulipLocalizations,
+                DateTime.fromMillisecondsSinceEpoch(message.timestamp * 1000),
+                now: DateTime.now()))),
+          SizedBox(height: 0, width: 12,
+            child: DecoratedBox(
+              decoration: BoxDecoration(
+                border: Border(
+                  bottom: BorderSide(
+                    width: 0,
+                    color: color)))))
+        ])),
+    );
+  }
+}
+
 class MessageItem extends StatelessWidget {
   const MessageItem({
     super.key,