From 311862ce4836075dda944240f987dd02c8e05d15 Mon Sep 17 00:00:00 2001
From: Kevin Boos <1139460+kevinaboos@users.noreply.github.com>
Date: Mon, 8 Apr 2024 11:03:21 -0700
Subject: [PATCH] Use rich HTML, fix avatar text, centralize style definitions
 (#62)

The HTML widget in makepad is mostly complete, so we can now use it
to display rich text formatting in messages.
* HTML works for almost everything (underline/strikethrough not working)
* avatars work properly now
* images work but don't shrink to fit the window properly
* caching of widget content works again
* centralized styles for text in room timeline
* Make avatar impl more canonical, and support `set_text()`
* update to latest makepad that includes our changes
---
 Cargo.lock                      |  72 ++++++++++++--------
 Cargo.toml                      |   1 -
 src/app.rs                      |   1 +
 src/discover/discover_screen.rs |   1 -
 src/home/room_screen.rs         |  88 ++++++++++---------------
 src/home/rooms_list.rs          |   7 +-
 src/profile/profile_screen.rs   |   1 -
 src/shared/avatar.rs            |  70 +++++++++++++-------
 src/shared/clickable_view.rs    |   1 -
 src/shared/header.rs            |   1 -
 src/shared/html_or_plaintext.rs | 113 ++++++++++++++++++++++++++++++++
 src/shared/mod.rs               |   1 +
 src/shared/styles.rs            |  40 ++++++++++-
 src/shared/text_or_image.rs     | 108 +++++++++++++++++-------------
 src/utils.rs                    |   2 +-
 15 files changed, 348 insertions(+), 159 deletions(-)
 create mode 100644 src/shared/html_or_plaintext.rs

diff --git a/Cargo.lock b/Cargo.lock
index 1b84b55c..efc72441 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1648,6 +1648,11 @@ version = "1.0.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "af150ab688ff2122fcef229be89cb50dd66af9e01a4ff320cc137eecc9bacc38"
 
+[[package]]
+name = "jni-sys"
+version = "0.4.0"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+
 [[package]]
 name = "js-sys"
 version = "0.3.64"
@@ -1828,7 +1833,7 @@ dependencies = [
 [[package]]
 name = "makepad-derive-live"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
  "makepad-live-id",
  "makepad-micro-proc-macro",
@@ -1837,7 +1842,7 @@ dependencies = [
 [[package]]
 name = "makepad-derive-wasm-bridge"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
  "makepad-micro-proc-macro",
 ]
@@ -1845,7 +1850,7 @@ dependencies = [
 [[package]]
 name = "makepad-derive-widget"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
  "makepad-live-id",
  "makepad-micro-proc-macro",
@@ -1854,9 +1859,10 @@ dependencies = [
 [[package]]
 name = "makepad-draw"
 version = "0.6.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
  "ab_glyph_rasterizer",
+ "makepad-html",
  "makepad-platform",
  "makepad-vector",
  "rustybuzz",
@@ -1867,17 +1873,17 @@ dependencies = [
 [[package]]
 name = "makepad-futures"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 
 [[package]]
 name = "makepad-futures-legacy"
 version = "0.7.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 
 [[package]]
 name = "makepad-html"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
  "makepad-live-id",
 ]
@@ -1885,12 +1891,12 @@ dependencies = [
 [[package]]
 name = "makepad-http"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 
 [[package]]
 name = "makepad-live-compiler"
 version = "0.5.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
  "makepad-derive-live",
  "makepad-live-tokenizer",
@@ -1900,7 +1906,7 @@ dependencies = [
 [[package]]
 name = "makepad-live-id"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
  "makepad-live-id-macros",
 ]
@@ -1908,7 +1914,7 @@ dependencies = [
 [[package]]
 name = "makepad-live-id-macros"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
  "makepad-micro-proc-macro",
 ]
@@ -1916,27 +1922,35 @@ dependencies = [
 [[package]]
 name = "makepad-live-tokenizer"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
  "makepad-live-id",
  "makepad-math",
  "makepad-micro-serde",
 ]
 
+[[package]]
+name = "makepad-markdown"
+version = "0.4.0"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+dependencies = [
+ "makepad-live-id",
+]
+
 [[package]]
 name = "makepad-math"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 
 [[package]]
 name = "makepad-micro-proc-macro"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 
 [[package]]
 name = "makepad-micro-serde"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
  "makepad-micro-serde-derive",
 ]
@@ -1944,7 +1958,7 @@ dependencies = [
 [[package]]
 name = "makepad-micro-serde-derive"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
  "makepad-micro-proc-macro",
 ]
@@ -1952,13 +1966,14 @@ dependencies = [
 [[package]]
 name = "makepad-objc-sys"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 
 [[package]]
 name = "makepad-platform"
 version = "0.6.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
+ "jni-sys",
  "makepad-futures",
  "makepad-futures-legacy",
  "makepad-http",
@@ -1972,7 +1987,7 @@ dependencies = [
 [[package]]
 name = "makepad-shader-compiler"
 version = "0.5.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
  "makepad-live-compiler",
 ]
@@ -1980,7 +1995,7 @@ dependencies = [
 [[package]]
 name = "makepad-vector"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
  "ttf-parser",
 ]
@@ -1988,7 +2003,7 @@ dependencies = [
 [[package]]
 name = "makepad-wasm-bridge"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
  "makepad-derive-wasm-bridge",
  "makepad-live-id",
@@ -1997,11 +2012,12 @@ dependencies = [
 [[package]]
 name = "makepad-widgets"
 version = "0.6.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
  "makepad-derive-widget",
  "makepad-draw",
  "makepad-html",
+ "makepad-markdown",
  "makepad-zune-jpeg",
  "makepad-zune-png",
 ]
@@ -2009,7 +2025,7 @@ dependencies = [
 [[package]]
 name = "makepad-windows"
 version = "0.51.1"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
  "windows-core 0.51.1 (git+https://github.com/makepad/makepad?branch=rik)",
  "windows-targets",
@@ -2018,7 +2034,7 @@ dependencies = [
 [[package]]
 name = "makepad-zune-core"
 version = "0.2.14"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
  "bitflags 2.4.1",
 ]
@@ -2026,7 +2042,7 @@ dependencies = [
 [[package]]
 name = "makepad-zune-inflate"
 version = "0.2.54"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
  "simd-adler32",
 ]
@@ -2034,7 +2050,7 @@ dependencies = [
 [[package]]
 name = "makepad-zune-jpeg"
 version = "0.3.17"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
  "makepad-zune-core",
 ]
@@ -2042,7 +2058,7 @@ dependencies = [
 [[package]]
 name = "makepad-zune-png"
 version = "0.2.1"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
  "makepad-zune-core",
  "makepad-zune-inflate",
@@ -4740,7 +4756,7 @@ dependencies = [
 [[package]]
 name = "windows-core"
 version = "0.51.1"
-source = "git+https://github.com/makepad/makepad?branch=rik#7f04a544373ea401c43e46c1713120c1cfebf649"
+source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
 dependencies = [
  "windows-targets",
 ]
diff --git a/Cargo.toml b/Cargo.toml
index a50bea1b..3b0c8f89 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -19,7 +19,6 @@ metadata.makepad-auto-version = "zqpv-Yj-K7WNVK2I8h5Okhho46Q="
 [dependencies]
 makepad-widgets = { git = "https://github.com/makepad/makepad", branch = "rik" }
 
-
 anyhow = "1.0"
 chrono = "0.4"
 clap = { version = "4.0.16", features = ["derive"] }
diff --git a/src/app.rs b/src/app.rs
index 63b4426f..436e6b93 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -235,6 +235,7 @@ impl LiveRegister for App {
         crate::shared::clickable_view::live_design(cx);
         crate::shared::avatar::live_design(cx);
         crate::shared::text_or_image::live_design(cx);
+        crate::shared::html_or_plaintext::live_design(cx);
 
         // home - chats
         crate::home::home_screen::live_design(cx);
diff --git a/src/discover/discover_screen.rs b/src/discover/discover_screen.rs
index 4eec6e9e..8a4dcc79 100644
--- a/src/discover/discover_screen.rs
+++ b/src/discover/discover_screen.rs
@@ -1,5 +1,4 @@
 use crate::shared::clickable_view::*;
-use makepad_widgets::widget::WidgetCache;
 use makepad_widgets::*;
 
 live_design! {
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index c718e69a..06172e3a 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -7,15 +7,11 @@ use imbl::Vector;
 use makepad_widgets::*;
 use matrix_sdk::ruma::{
     events::{
-        AnySyncTimelineEvent,
-        AnySyncMessageLikeEvent,
-        FullStateEventContent,
         room::{
             guest_access::GuestAccess,
             history_visibility::HistoryVisibility,
-            join_rules::JoinRule, message::{MessageType, RoomMessageEventContent}, MediaSource,
-        },
-        SyncMessageLikeEvent,
+            join_rules::JoinRule, message::{MessageFormat, MessageType, RoomMessageEventContent}, MediaSource,
+        }, AnySyncMessageLikeEvent, AnySyncTimelineEvent, FullStateEventContent, SyncMessageLikeEvent
     }, uint, MilliSecondsSinceUnixEpoch, OwnedRoomId,
 };
 use matrix_sdk_ui::timeline::{
@@ -35,7 +31,7 @@ use rangemap::RangeSet;
 use unicode_segmentation::UnicodeSegmentation;
 use crate::{
     media_cache::{MediaCache, MediaCacheEntry, AVATAR_CACHE},
-    shared::{avatar::{AvatarRef, AvatarWidgetRefExt}, text_or_image::TextOrImageWidgetRefExt},
+    shared::{avatar::{AvatarRef, AvatarWidgetRefExt}, html_or_plaintext::HtmlOrPlaintextWidgetRefExt, text_or_image::TextOrImageWidgetRefExt},
     sliding_sync::{submit_async_request, take_timeline_update_receiver, MatrixRequest},
     utils::{self, unix_time_millis_to_datetime, MediaFormatConst},
 };
@@ -50,6 +46,7 @@ live_design! {
     import crate::shared::search_bar::SearchBar;
     import crate::shared::avatar::Avatar;
     import crate::shared::text_or_image::TextOrImage;
+    import crate::shared::html_or_plaintext::HtmlOrPlaintext;
 
     IMG_DEFAULT_AVATAR = dep("crate://self/resources/img/default_avatar.png")
     ICO_FAV = dep("crate://self/resources/icon_favorite.svg")
@@ -60,16 +57,13 @@ live_design! {
     ICO_USER = dep("crate://self/resources/icon_user.svg")
     ICO_ADD = dep("crate://self/resources/icon_add.svg")
 
-    FONT_SIZE_SUB = 9.5
-    FONT_SIZE_P = 12.5
-    
     TEXT_SUB = {
-        font_size: (FONT_SIZE_SUB),
+        font_size: (10),
         font: {path: dep("crate://makepad-widgets/resources/GoNotoKurrent-Regular.ttf")}
     }
     
     TEXT_P = {
-        font_size: (FONT_SIZE_P),
+        font_size: (12),
         height_factor: 1.65,
         font: {path: dep("crate://makepad-widgets/resources/GoNotoKurrent-Regular.ttf")}
     }
@@ -85,7 +79,6 @@ live_design! {
     COLOR_DIVIDER_DARK = #x00000044
     COLOR_READ_MARKER = #xeb2733
     COLOR_PROFILE_CIRCLE = #xfff8ee
-    COLOR_P = #x999
     
     FillerY = <View> {width: Fill}
     
@@ -148,8 +141,8 @@ live_design! {
     Timestamp = <Label> {
         padding: { top: 10.0, bottom: 0.0, left: 0.0, right: 0.0 }
         draw_text: {
-            text_style: <TEXT_SUB> {},
-            color: (COLOR_META_TEXT)
+            text_style: <TIMESTAMP_TEXT_STYLE> {},
+            color: (TIMESTAMP_TEXT_COLOR)
         }
         text: " "
     }
@@ -231,22 +224,13 @@ live_design! {
                     width: Fill,
                     margin: {bottom: 10.0, top: 10.0, right: 10.0,}
                     draw_text: {
-                        text_style: <TEXT_SUB> {},
-                        color: (COLOR_META_TEXT)
+                        text_style: <USERNAME_TEXT_STYLE> {},
+                        color: (USERNAME_TEXT_COLOR)
                         wrap: Ellipsis,
                     }
                     text: "<Username not available>"
                 }
-                message = <Label> {
-                    width: Fill,
-                    height: Fit
-                    draw_text: {
-                        wrap: Word,
-                        text_style: <TEXT_P> {},
-                        color: (COLOR_P)
-                    }
-                    text: ""
-                }
+                message = <HtmlOrPlaintext> { }
                 
                 // <LineH> {
                 //     margin: {top: 13.0, bottom: 5.0}
@@ -260,6 +244,7 @@ live_design! {
     // The view used for a condensed message that came right after another message
     // from the same sender, and thus doesn't need to display the sender's profile again.
     CondensedMessage = <Message> {
+        padding: { top: 2.0, bottom: 2.0 }
         body = {
             padding: { top: 5.0, bottom: 5.0, left: 10.0, right: 10.0 },
             profile = <View> {
@@ -274,16 +259,7 @@ live_design! {
                 height: Fit,
                 flow: Down,
                 
-                message = <Label> {
-                    width: Fill,
-                    height: Fit
-                    draw_text: {
-                        wrap: Word,
-                        text_style: <TEXT_P> {},
-                        color: (COLOR_P)
-                    }
-                    text: ""
-                }
+                message = <HtmlOrPlaintext> { }
             }
         }
     }
@@ -295,7 +271,7 @@ live_design! {
             content = {
                 message = <TextOrImage> {
                     width: Fill, height: 300,
-                    // img_view = { img = { fit: Horizontal } }
+                    image_view = { image = { fit: Horizontal } }
                 }
             }
         }
@@ -309,7 +285,7 @@ live_design! {
             content = {
                 message = <TextOrImage> {
                     width: Fill, height: 300,
-                    // img_view = { img = { fit: Horizontal } }
+                    image_view = { image = { fit: Horizontal } }
                 }
             }
         }
@@ -323,7 +299,7 @@ live_design! {
         height: Fit,
         margin: 0.0
         flow: Right,
-        padding: 0.0,
+        padding: { top: 1.0, bottom: 1.0 }
         spacing: 0.0
         
         body = <View> {
@@ -342,8 +318,8 @@ live_design! {
                 timestamp = <Timestamp> {
                     padding: {top: 5.0}
                     draw_text: {
-                        text_style: <TEXT_SUB> {},
-                        color: (COLOR_META_TEXT)
+                        text_style: <TIMESTAMP_TEXT_STYLE> {},
+                        color: (TIMESTAMP_TEXT_COLOR)
                     }
                 }
             }
@@ -363,8 +339,8 @@ live_design! {
                 padding: {top: 5.0},
                 draw_text: {
                     wrap: Word,
-                    text_style: <TEXT_SUB> {},
-                    color: (COLOR_P)
+                    text_style: <SMALL_STATE_TEXT_STYLE> {},
+                    color: (SMALL_STATE_TEXT_COLOR)
                 }
                 text: ""
             }
@@ -493,7 +469,7 @@ live_design! {
                         color: #fff
                     }
                     draw_text: {
-                        text_style:<REGULAR_TEXT>{},
+                        text_style:<MESSAGE_TEXT_STYLE>{},
         
                         fn get_color(self) -> vec4 {
                             return #ccc
@@ -1097,7 +1073,13 @@ fn populate_message_view(
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
-                item.label(id!(content.message)).set_text(&text.body);
+                if let Some(formatted_body) = text.formatted.as_ref()
+                    .and_then(|fb| (fb.format == MessageFormat::Html).then(|| fb.body.clone()))
+                {
+                    item.html_or_plaintext(id!(message)).show_html(formatted_body);
+                } else {
+                    item.html_or_plaintext(id!(message)).show_plaintext(&text.body);
+                }
                 new_drawn_status.content_drawn = true;
                 (item, false)
             }
@@ -1129,10 +1111,11 @@ fn populate_message_view(
                         // now that we've obtained the image URI and its metadata, try to fetch the image.
                         match media_cache.try_get_media_or_fetch(mxc_uri.clone(), None) {
                             MediaCacheEntry::Loaded(data) => {
-                                let set_image_result = text_or_image_ref.set_image(
-                                    |img| utils::load_png_or_jpg(&img, cx, &data)
+                                let show_image_result = text_or_image_ref.show_image(|img|
+                                    utils::load_png_or_jpg(&img, cx, &data)
+                                        .map(|()| img.size_in_pixels(cx).unwrap())
                                 );
-                                if let Err(e) = set_image_result {
+                                if let Err(e) = show_image_result {
                                     let err_str = format!("Failed to display image: {e:?}");
                                     error!("{err_str}");
                                     text_or_image_ref.set_text(&err_str);
@@ -1164,7 +1147,8 @@ fn populate_message_view(
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
-                item.label(id!(content.message)).set_text(&format!("[TODO] {}", other.body()));
+                let kind = other.msgtype();
+                item.label(id!(content.message)).set_text(&format!("[TODO {kind:?}] {}", other.body()));
                 new_drawn_status.content_drawn = true;
                 (item, false)
             }
@@ -1609,7 +1593,7 @@ fn set_avatar_and_get_username(
     // A closure to set the item's avatar to text data,
     // skipping the first `skip` characters of the given `name`.
     let set_avatar_text = |name: &str, skip: usize| {
-        avatar.set_text(
+        avatar.show_text(
             name.graphemes(true)
                 .skip(skip)
                 .next()
@@ -1650,7 +1634,7 @@ fn set_avatar_and_get_username(
 
             // Draw the avatar image if available, otherwise set the avatar to text.
             let drew_avatar_img = avatar_img.map(|data|
-                avatar.set_image(|img|
+                avatar.show_image(|img|
                     utils::load_png_or_jpg(&img, cx, &data)
                 ).is_ok()
             ).unwrap_or(false);
diff --git a/src/home/rooms_list.rs b/src/home/rooms_list.rs
index bd2a17d6..cabe43f6 100644
--- a/src/home/rooms_list.rs
+++ b/src/home/rooms_list.rs
@@ -53,7 +53,8 @@ live_design! {
         timestamp = <Label> {
             width: Fit, height: Fit
             draw_text:{
-                text_style: <REGULAR_TEXT>{
+                color: (TIMESTAMP_TEXT_COLOR)
+                text_style: <TIMESTAMP_TEXT_STYLE>{
                     font_size: 8.
                 },
             }
@@ -344,10 +345,10 @@ impl Widget for RoomsList {
                     }
                     match room_info.avatar {
                         RoomPreviewAvatar::Text(ref text) => {
-                            item.avatar(id!(avatar)).set_text(text);
+                            item.avatar(id!(avatar)).show_text(text);
                         }
                         RoomPreviewAvatar::Image(ref img_bytes) => {
-                            let _ = item.avatar(id!(avatar)).set_image(
+                            let _ = item.avatar(id!(avatar)).show_image(
                                 |img| utils::load_png_or_jpg(&img, cx, img_bytes)
                             );
                         }
diff --git a/src/profile/profile_screen.rs b/src/profile/profile_screen.rs
index ae531cda..d0617d49 100644
--- a/src/profile/profile_screen.rs
+++ b/src/profile/profile_screen.rs
@@ -1,5 +1,4 @@
 use crate::shared::clickable_view::*;
-use makepad_widgets::widget::WidgetCache;
 use makepad_widgets::*;
 
 live_design! {
diff --git a/src/shared/avatar.rs b/src/shared/avatar.rs
index 946f609a..4fffbe68 100644
--- a/src/shared/avatar.rs
+++ b/src/shared/avatar.rs
@@ -4,7 +4,7 @@
 //! 
 //! By default, an avatar displays the one-character text label.
 //! You can use [AvatarRef::set_text] to set the content of that text label,
-//! or [AvatarRef::set_image] to display an image instead of the text.
+//! or [AvatarRef::show_image] to display an image instead of the text.
 
 use makepad_widgets::*;
 
@@ -91,9 +91,13 @@ impl Widget for Avatar {
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
         self.view.draw_walk(cx, scope, walk)
     }
+
+    fn set_text(&mut self, v: &str) {
+        self.show_text(v)
+    }
 }
 
-impl AvatarRef {
+impl Avatar {
     /// Sets the text content of this avatar, making the text visible
     /// and the image invisible.
     ///
@@ -101,12 +105,10 @@ impl AvatarRef {
     /// * `text`: the text that will be displayed in this avatar.
     ///    This should be a single character, but we accept anything that can be 
     ///    treated as a `&str` in order to support multi-character Unicode.
-    pub fn set_text<T: AsRef<str>>(&self, text: T) {
-        if let Some(mut inner) = self.borrow_mut() {
-            inner.label(id!(text_view.text)).set_text(text.as_ref());
-            inner.view(id!(img_view)).set_visible(false);
-            inner.view(id!(text_view)).set_visible(true);
-        }
+    pub fn show_text<T: AsRef<str>>(&mut self, text: T) {
+        self.label(id!(text_view.text)).set_text(text.as_ref());
+        self.view(id!(img_view)).set_visible(false);
+        self.view(id!(text_view)).set_visible(true);
     }
 
     /// Sets the image content of this avatar, making the image visible
@@ -117,31 +119,55 @@ impl AvatarRef {
     ///    to the image that will be displayed in this avatar.
     ///    This allows the caller to set the image contents in any way they want.
     ///    If `image_set_function` returns an error, no change is made to the avatar.
-    pub fn set_image<F, E>(&self, image_set_function: F) -> Result<(), E>
+    pub fn show_image<F, E>(&mut self, image_set_function: F) -> Result<(), E>
+        where F: FnOnce(ImageRef) -> Result<(), E>
+    {
+        let img_ref = self.image(id!(img_view.img));
+        let res = image_set_function(img_ref);
+        if res.is_ok() {
+            self.view(id!(img_view)).set_visible(true);
+            self.view(id!(text_view)).set_visible(false);
+        }
+        res
+    }
+
+    /// Returns whether this avatar is currently displaying an image or text.
+    pub fn status(&mut self) -> AvatarDisplayStatus {
+        if self.view(id!(img_view)).is_visible() {
+            AvatarDisplayStatus::Image
+        } else {
+            AvatarDisplayStatus::Text
+        }
+    }
+}
+
+impl AvatarRef {
+    /// See [`Avatar::show_text()`].
+    pub fn show_text<T: AsRef<str>>(&self, text: T) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.show_text(text);
+        }
+    }
+
+    /// See [`Avatar::show_image()`].
+    pub fn show_image<F, E>(&self, image_set_function: F) -> Result<(), E>
         where F: FnOnce(ImageRef) -> Result<(), E>
     {
         if let Some(mut inner) = self.borrow_mut() {
-            let img_ref = inner.image(id!(img_view.img));
-            let res = image_set_function(img_ref);
-            if res.is_ok() {
-                inner.view(id!(img_view)).set_visible(true);
-                inner.view(id!(text_view)).set_visible(false);
-            }
-            res
+            inner.show_image(image_set_function)
         } else {
             Ok(())
         }
     }
 
-    /// Returns whether this avatar is currently displaying an image or text.
+    /// See [`Avatar::status()`].
     pub fn status(&self) -> AvatarDisplayStatus {
         if let Some(mut inner) = self.borrow_mut() {
-            if inner.view(id!(img_view)).is_visible() {
-                return AvatarDisplayStatus::Image;
-            }
+            inner.status()
+        } else {
+            AvatarDisplayStatus::Text
         }
-        AvatarDisplayStatus::Text
-    }
+    }    
 }
 
 /// What an Avatar instance is currently displaying.
diff --git a/src/shared/clickable_view.rs b/src/shared/clickable_view.rs
index 9cc125d6..ca5977f6 100644
--- a/src/shared/clickable_view.rs
+++ b/src/shared/clickable_view.rs
@@ -1,4 +1,3 @@
-use makepad_widgets::widget::WidgetCache;
 use makepad_widgets::*;
 
 live_design! {
diff --git a/src/shared/header.rs b/src/shared/header.rs
index 19a55c3d..1d92f79d 100644
--- a/src/shared/header.rs
+++ b/src/shared/header.rs
@@ -1,4 +1,3 @@
-use makepad_widgets::widget::WidgetCache;
 use makepad_widgets::*;
 use crate::shared::dropdown_menu::*;
 
diff --git a/src/shared/html_or_plaintext.rs b/src/shared/html_or_plaintext.rs
new file mode 100644
index 00000000..9dab4327
--- /dev/null
+++ b/src/shared/html_or_plaintext.rs
@@ -0,0 +1,113 @@
+//! A `HtmlOrPlaintext` view can display either plaintext or rich HTML content.
+
+use makepad_widgets::*;
+
+live_design! {
+    import makepad_draw::shader::std::*;
+    import makepad_widgets::view::*;
+    import makepad_widgets::base::*;
+    import makepad_widgets::theme_desktop_dark::*;
+    import crate::shared::styles::*;
+
+    HTML_LINE_SPACING = 8.0
+    HTML_TEXT_HEIGHT_FACTOR = 1.3
+    // A centralized widget where we define styles and custom elements for HTML
+    // message content. This is a wrapper around Makepad's built-in `Html` widget.
+    RobrixHtml = <Html> {
+        padding: 0.0,
+        line_spacing: (HTML_LINE_SPACING),
+        width: Fill, height: Fit, // see comment in `HtmlOrPlaintext`
+        font_size: (MESSAGE_FONT_SIZE),
+        draw_normal:      { color: (MESSAGE_TEXT_COLOR), text_style: { height_factor: (HTML_TEXT_HEIGHT_FACTOR), line_spacing: (HTML_LINE_SPACING) } }
+        draw_italic:      { color: (MESSAGE_TEXT_COLOR), text_style: { height_factor: (HTML_TEXT_HEIGHT_FACTOR), line_spacing: (HTML_LINE_SPACING) } }
+        draw_bold:        { color: (MESSAGE_TEXT_COLOR), text_style: { height_factor: (HTML_TEXT_HEIGHT_FACTOR), line_spacing: (HTML_LINE_SPACING) } }
+        draw_bold_italic: { color: (MESSAGE_TEXT_COLOR), text_style: { height_factor: (HTML_TEXT_HEIGHT_FACTOR), line_spacing: (HTML_LINE_SPACING) } }
+        draw_fixed:       {                              text_style: { height_factor: (HTML_TEXT_HEIGHT_FACTOR), line_spacing: (HTML_LINE_SPACING) } }
+
+        list_item_layout: { line_spacing: 5.0, padding: {top: 1.0, bottom: 1.0}, }
+        body: "[<i> HTML message placeholder</i>]",
+    }
+
+    // A view container that displays either plaintext s(a simple `Label`)
+    // or rich HTML content (an instance of `RobrixHtml`).
+    //
+    // Key Usage Notes:
+    // * Labels need their width to be Fill *and* all of their parent views
+    //   also need to have their width set to Fill. Otherwise, the label
+    //   won't wrap text properly.
+    // * They also need their height to be Fit along with all of their parent views,
+    //   otherwise their total height will be zero (when a Fit is inside of a Fill),
+    //   resulting in nothing being displayed.
+    HtmlOrPlaintext = {{HtmlOrPlaintext}} {
+        width: Fill, height: Fit, // see above comment
+        flow: Overlay
+        
+        plaintext_view = <View> {
+            visible: true,
+            width: Fill, height: Fit, // see above comment
+            pt_label = <Label> {
+                width: Fill, height: Fit, // see above comment
+                draw_text: {
+                    wrap: Word,
+                    color: (MESSAGE_TEXT_COLOR),
+                    text_style: <MESSAGE_TEXT_STYLE> { },
+                }
+                text: "[plaintext message placeholder]",
+            }
+        }
+        
+        html_view = <View> {
+            visible: false,
+            width: Fill, height: Fit, // see above comment
+            html = <RobrixHtml> {}
+        }
+    }
+}
+
+
+#[derive(LiveHook, Live, Widget)]
+pub struct HtmlOrPlaintext {
+    #[deref] view: View,
+}
+
+impl Widget for HtmlOrPlaintext {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        self.view.handle_event(cx, event, scope)
+    }
+
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        self.view.draw_walk(cx, scope, walk)
+    }
+}
+
+impl HtmlOrPlaintext {
+    /// Sets the plaintext content and makes it visible, hiding the rich HTML content.
+    pub fn show_plaintext<T: AsRef<str>>(&mut self, text: T) {
+        self.view(id!(html_view)).set_visible(false);
+        self.view(id!(plaintext_view)).set_visible(true);
+        self.label(id!(plaintext_view.pt_label)).set_text(text.as_ref());
+    }
+
+    /// Sets the HTML content, making the HTML visible and the plaintext invisible.
+    pub fn show_html<T: AsRef<str>>(&mut self, html_body: T) {
+        self.html(id!(html_view.html)).set_text(html_body.as_ref());
+        self.view(id!(html_view)).set_visible(true);
+        self.view(id!(plaintext_view)).set_visible(false);
+    }
+}
+
+impl HtmlOrPlaintextRef {
+    /// See [`HtmlOrPlaintext::show_plaintext()`].
+    pub fn show_plaintext<T: AsRef<str>>(&self, text: T) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.show_plaintext(text);
+        }
+    }
+
+    /// See [`HtmlOrPlaintext::show_html()`].
+    pub fn show_html<T: AsRef<str>>(&self, html_body: T) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.show_html(html_body);
+        }
+    }
+}
diff --git a/src/shared/mod.rs b/src/shared/mod.rs
index d1cabec2..a1411179 100644
--- a/src/shared/mod.rs
+++ b/src/shared/mod.rs
@@ -7,3 +7,4 @@ pub mod search_bar;
 pub mod styles;
 pub mod avatar;
 pub mod text_or_image;
+pub mod html_or_plaintext;
diff --git a/src/shared/styles.rs b/src/shared/styles.rs
index 31cca05f..4a45d7e7 100644
--- a/src/shared/styles.rs
+++ b/src/shared/styles.rs
@@ -12,10 +12,48 @@ live_design! {
     }
 
     TEXT_SUB = {
-        font_size: (FONT_SIZE_SUB),
+        font_size: (10),
+        height_factor: 1.5,
         font: {path: dep("crate://makepad-widgets/resources/GoNotoKurrent-Regular.ttf")}
     }
 
+    USERNAME_FONT_SIZE = 13.0
+    USERNAME_TEXT_COLOR = #x060 // dark blue
+    USERNAME_TEXT_STYLE = {
+        font: {path: dep("crate://makepad-widgets/resources/GoNotoKurrent-Regular.ttf")}
+        font_size: (USERNAME_FONT_SIZE),
+        // height_factor: 1.5,
+    }
+
+
+    MESSAGE_FONT_SIZE = 12.0
+    MESSAGE_TEXT_COLOR = #x777
+    MESSAGE_TEXT_LINE_SPACING = 1.35
+    MESSAGE_TEXT_HEIGHT_FACTOR = 1.5
+    // This font should only be used for plaintext labels. Don't use this for Html content,
+    // as the Html widget sets different fonts for different text styles (e.g., bold, italic).
+    MESSAGE_TEXT_STYLE = {
+        font: {path: dep("crate://makepad-widgets/resources/GoNotoKurrent-Regular.ttf")}
+        font_size: (MESSAGE_FONT_SIZE),
+        height_factor: (MESSAGE_TEXT_HEIGHT_FACTOR),
+        line_spacing: (MESSAGE_TEXT_LINE_SPACING),
+    }
+
+    SMALL_STATE_FONT_SIZE = 9.5
+    SMALL_STATE_TEXT_COLOR = #x999
+    SMALL_STATE_TEXT_STYLE = {
+        font: {path: dep("crate://makepad-widgets/resources/GoNotoKurrent-Regular.ttf")}
+        font_size: (SMALL_STATE_FONT_SIZE),
+        height_factor: 1.3,
+    }
+
+    TIMESTAMP_FONT_SIZE = 8.5
+    TIMESTAMP_TEXT_COLOR = #x999
+    TIMESTAMP_TEXT_STYLE = {
+        font: {path: dep("crate://makepad-widgets/resources/GoNotoKurrent-Regular.ttf")}
+        font_size: (TIMESTAMP_FONT_SIZE),
+    }
+
     COLOR_PROFILE_CIRCLE = #xfff8ee
     COLOR_DIVIDER = #x00000018
     COLOR_DIVIDER_DARK = #x00000044
diff --git a/src/shared/text_or_image.rs b/src/shared/text_or_image.rs
index 401b5099..6dbce1a2 100644
--- a/src/shared/text_or_image.rs
+++ b/src/shared/text_or_image.rs
@@ -1,7 +1,7 @@
-//! A `TextOrImage` view displays a loading message while waiting for an image to be fetched.
+//! A `TextOrImage` view displays either a text label or an image.
 //!
-//! Once the image is fetched and loaded, it displays the image as normal.
-//! If the image fails to load, it displays an error message permanently.
+//! This is useful to display a loading message while waiting for an image to be fetched,
+//! or to display an error message if the image fails to load, etc.
 
 use makepad_widgets::*;
 
@@ -13,25 +13,24 @@ live_design! {
     import crate::shared::styles::*;
 
     TextOrImage = {{TextOrImage}} {
-        width: Fit, height: Fit,
-        flow: Overlay
-
-        text_view = <View> {
-            visible: true,
-            text = <Label> {
-                width: Fit, height: Fit,
+        width: Fill, height: Fit, 
+        text_view: <View> {
+            width: Fill, height: Fit,
+            label = <Label> {
+                width: Fill, height: Fit,
                 draw_text: {
-                    text_style: <REGULAR_TEXT>{ font_size: 12. }
+                    wrap: Word,
+                    text_style: <MESSAGE_TEXT_STYLE> { }
+                    color: (MESSAGE_TEXT_COLOR),
                 }
-                text: "Loading image..."
             }
         }
-
-        img_view = <View> {
-            visible: false,
-            img = <Image> {
+        image_view: <View> {
+            width: Fill, height: Fit,
+            image = <Image> {
+                width: Fill,
+                height: Fit,
                 fit: Smallest,
-                width: Fill, height: Fill,
             }
         }
     }
@@ -43,59 +42,72 @@ live_design! {
 /// This is useful for displaying alternate text when an image is not (yet) available
 /// or fails to load. It can also be used to display a loading message while an image
 /// is being fetched.
-#[derive(LiveHook, Live, Widget)]
+#[derive(Live, Widget, LiveHook)]
 pub struct TextOrImage {
-    #[deref] view: View,
+    #[redraw] #[live] text_view: View,
+    #[redraw] #[live] image_view: View,
+    #[walk] walk: Walk,
+    #[layout] layout: Layout,
+    #[rust] status: TextOrImageStatus,
+    // #[rust(TextOrImageStatus::Text)] status: TextOrImageStatus,
+    #[rust] size_in_pixels: (usize, usize),
 }
 
 impl Widget for TextOrImage {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
-        self.view.handle_event(cx, event, scope)
+        self.image_view.handle_event(cx, event, scope);
+        self.text_view.handle_event(cx, event, scope);
     }
 
-    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
-        self.view.draw_walk(cx, scope, walk)
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, mut walk: Walk) -> DrawStep {
+        walk.width = Size::Fixed(self.size_in_pixels.0 as f64 / cx.current_dpi_factor());
+        walk.height = Size::Fixed(self.size_in_pixels.1 as f64 / cx.current_dpi_factor());
+        cx.begin_turtle(walk, self.layout);
+        match self.status{
+            TextOrImageStatus::Image => self.image_view.draw_all(cx, scope),
+            TextOrImageStatus::Text  => self.text_view.draw_all(cx, scope),
+        }
+        cx.end_turtle();
+        DrawStep::done()
     }
 }
-
 impl TextOrImage {
-    /// Sets the text content, making the text visible and the image invisible.
+    /// Sets the text content, which will be displayed on future draw operations.
     ///
     /// ## Arguments
     /// * `text`: the text that will be displayed in this `TextOrImage`, e.g.,
     ///   a message like "Loading..." or an error message.
     pub fn show_text<T: AsRef<str>>(&mut self, text: T) {
-        self.label(id!(text_view.text)).set_text(text.as_ref());
-        self.view(id!(img_view)).set_visible(false);
-        self.view(id!(text_view)).set_visible(true);
+        self.text_view.label(id!(label)).set_text(text.as_ref());
+        self.status = TextOrImageStatus::Text;
     }
 
-    /// Sets the image content, making the image visible and the text invisible.
+    /// Sets the image content, which will be displayed on future draw operations.
     ///
     /// ## Arguments
     /// * `image_set_function`: this function will be called with an [ImageRef] argument,
     ///    which refers to the image that will be displayed within this `TextOrImage`.
     ///    This allows the caller to set the image contents in any way they want.
-    ///    If `image_set_function` returns an error, no change is made to this `TextOrImage`.
+    ///    * If successful, the `image_set_function` should return the size of the image
+    ///      in pixels as a tuple, `(width, height)`.
+    ///    * If `image_set_function` returns an error, no change is made to this `TextOrImage`.
     pub fn show_image<F, E>(&mut self, image_set_function: F) -> Result<(), E>
-        where F: FnOnce(ImageRef) -> Result<(), E>
+        where F: FnOnce(ImageRef) -> Result<(usize, usize), E>
     {
-        let img_ref = self.image(id!(img_view.img));
-        let res = image_set_function(img_ref);
-        if res.is_ok() {
-            self.view(id!(img_view)).set_visible(true);
-            self.view(id!(text_view)).set_visible(false);
+        let img_ref = self.image_view.image(id!(image));
+        match image_set_function(img_ref) {
+            Ok(size_in_pixels) => {
+                self.status = TextOrImageStatus::Image;
+                self.size_in_pixels = size_in_pixels;
+                Ok(())
+            }
+            Err(e) => Err(e),
         }
-        res
     }
 
     /// Returns whether this `TextOrImage` is currently displaying an image or text.
-    pub fn status(&mut self) -> DisplayStatus {
-        if self.view(id!(img_view)).is_visible() {
-            return DisplayStatus::Image;
-        } else {
-            DisplayStatus::Text
-        }
+    pub fn status(&self) -> TextOrImageStatus {
+        self.status
     }
 }
 
@@ -109,7 +121,7 @@ impl TextOrImageRef {
 
     /// See [TextOrImage::show_image()].
     pub fn show_image<F, E>(&self, image_set_function: F) -> Result<(), E>
-        where F: FnOnce(ImageRef) -> Result<(), E>
+        where F: FnOnce(ImageRef) -> Result<(usize, usize), E>
     {
         if let Some(mut inner) = self.borrow_mut() {
             inner.show_image(image_set_function)
@@ -119,17 +131,19 @@ impl TextOrImageRef {
     }
 
     /// See [TextOrImage::status()].
-    pub fn status(&self) -> DisplayStatus {
-        if let Some(mut inner) = self.borrow_mut() {
+    pub fn status(&self) -> TextOrImageStatus {
+        if let Some(inner) = self.borrow() {
             inner.status()
         } else {
-            DisplayStatus::Text
+            TextOrImageStatus::Text
         }
     }
 }
 
 /// Whether a `TextOrImage` instance is currently displaying text or an image.
-pub enum DisplayStatus {
+#[derive(Debug, Default, Copy, Clone, PartialEq)]
+pub enum TextOrImageStatus {
+    #[default]
     Text,
     Image,
 }
diff --git a/src/utils.rs b/src/utils.rs
index 9ed99aba..e2458846 100644
--- a/src/utils.rs
+++ b/src/utils.rs
@@ -1,7 +1,7 @@
 use std::time::SystemTime;
 
 use chrono::NaiveDateTime;
-use makepad_widgets::{ImageRef, ImageError, Cx, error};
+use makepad_widgets::{error, image_cache::ImageError, Cx, ImageRef};
 use matrix_sdk::{ruma::{MilliSecondsSinceUnixEpoch, api::client::media::get_content_thumbnail::v3::Method}, media::{MediaThumbnailSize, MediaFormat}};
 
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]