[HTML] Fix up replies

DiscordChatExporter.Domain/Exporting/Writers/Html/Core.css

@@ -93,24 +93,20 @@ img {
     filter: blur(44px);
 }
 
-    .spoiler--hidden .spoiler-image:after {
-        content: "SPOILER";
-        color: #dcddde;
-        background-color: rgba(0, 0, 0, 0.6);
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        font-weight: 600;
-        /* padding: 0.5em 0.7em; */
-        padding: 100%;
-        /* This ruins those beutifully rounded buttons, but it's needed to prevent a FireFox bug with video and audio elemnts. */
-        /* The bug is that you can click trough the spoiler layer and play the video or audio, I could not identify the cause. */
-        /* I leave this here, in case someone is brave enough to venture in to madness that is undocumented browser behaviour. */
-        border-radius: 20px;
-        letter-spacing: 0.05em;
-        font-size: 0.9em;
-    }
+.spoiler--hidden .spoiler-image:after {
+    content: "SPOILER";
+    color: #dcddde;
+    background-color: rgba(0, 0, 0, 0.6);
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-weight: 600;
+    padding: 100%;
+    border-radius: 20px;
+    letter-spacing: 0.05em;
+    font-size: 0.9em;
+}
 
 .spoiler--hidden:hover .spoiler-image:after {
     color: #fff;
@@ -221,27 +217,46 @@ img {
 }
 
 .chatlog__reference {
+    display: flex;
     grid-column: 2;
     margin-left: 1.2em;
-    font-size: smaller;
+    margin-bottom: 0.25em;
+    font-size: 0.875em;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    align-items: center;
 }
 
 .chatlog__reference-avatar {
     border-radius: 50%;
     height: 16px;
     width: 16px;
-    vertical-align: middle;
+    margin-right: 0.25em;
 }
 
 .chatlog__reference-name {
-    font-weight: 500;
+    margin-right: 0.25em;
+    font-weight: 600;
+}
+
+.chatlog__reference-link {
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
-.chatlog__reference-content {
-    margin-left: .2em;
+.chatlog__reference-link:hover {
+    text-decoration: none;
+}
+
+.chatlog__reference-content > * {
+    display: inline;
+}
+
+.chatlog__reference-edited-timestamp {
+    margin-left: 0.25em;
+    font-size: 0.8em;
 }
 
 .chatlog__author-avatar-container {

DiscordChatExporter.Domain/Exporting/Writers/Html/Dark.css

@@ -54,6 +54,18 @@ a {
     color: #b5b6b8;
 }
 
+.chatlog__reference-link {
+    color: #b5b6b8;
+}
+
+.chatlog__reference-link:hover {
+    color: #ffffff;
+}
+
+.chatlog__reference-edited-timestamp {
+    color: rgba(255, 255, 255, 0.2);
+}
+
 .chatlog__author-name {
     color: #ffffff;
 }

DiscordChatExporter.Domain/Exporting/Writers/Html/Light.css

@@ -55,6 +55,18 @@ a {
     color: #5f5f60;
 }
 
+.chatlog__reference-link {
+    color: #5f5f60;
+}
+
+.chatlog__reference-link:hover {
+    color: #2f3136;
+}
+
+.chatlog__reference-edited-timestamp {
+    color: #747f8d;
+}
+
 .chatlog__author-name {
     font-weight: 600;
     color: #2f3136;

DiscordChatExporter.Domain/Exporting/Writers/Html/MessageGroupTemplate.cshtml

@@ -14,13 +14,34 @@
     ValueTask<string> ResolveUrlAsync(string url) => Model.ExportContext.ResolveMediaUrlAsync(url);
 
     var userMember = Model.ExportContext.TryGetMember(Model.MessageGroup.Author.Id);
+
     var userColor = Model.ExportContext.TryGetUserColor(Model.MessageGroup.Author.Id);
-    var userNick = Model.MessageGroup.Author.IsBot ? Model.MessageGroup.Author.Name : userMember?.Nick ?? Model.MessageGroup.Author.Name;
-    var referencedUserNick = Model.MessageGroup.Author.IsBot ? Model.MessageGroup.Author.Name : userMember?.Nick ?? Model.MessageGroup.Author.Name;
 
     var userColorStyle = userColor != null
         ? $"color: rgb({userColor?.R},{userColor?.G},{userColor?.B})"
         : null;
+
+    var userNick = Model.MessageGroup.Author.IsBot
+        ? Model.MessageGroup.Author.Name
+        : userMember?.Nick ?? Model.MessageGroup.Author.Name;
+
+    var referencedUserMember = Model.MessageGroup.ReferencedMessage != null
+        ? Model.ExportContext.TryGetMember(Model.MessageGroup.ReferencedMessage.Author.Id)
+        : null;
+
+    var referencedUserColor = Model.MessageGroup.ReferencedMessage != null
+        ? Model.ExportContext.TryGetUserColor(Model.MessageGroup.ReferencedMessage.Author.Id)
+        : null;
+
+    var referencedUserColorStyle = referencedUserColor != null
+        ? $"color: rgb({referencedUserColor?.R},{referencedUserColor?.G},{referencedUserColor?.B})"
+        : null;
+
+    var referencedUserNick = Model.MessageGroup.ReferencedMessage != null
+        ? Model.MessageGroup.ReferencedMessage.Author.IsBot
+            ? Model.MessageGroup.ReferencedMessage.Author.Name
+            : referencedUserMember?.Nick ?? Model.MessageGroup.ReferencedMessage.Author.Name
+        : null;
 }
 
 <div class="chatlog__message-group">
@@ -32,15 +53,29 @@
             @if (Model.MessageGroup.ReferencedMessage != null)
             {
                 <img class="chatlog__reference-avatar" src="@await ResolveUrlAsync(Model.MessageGroup.ReferencedMessage.Author.AvatarUrl)" alt="Avatar">
-                <span class="chatlog__reference-name" title="@Model.MessageGroup.ReferencedMessage.Author.FullName" data-user-id="@Model.MessageGroup.ReferencedMessage.Author.Id">@Model.MessageGroup.ReferencedMessage.Author.FullName</span>
-                <span class="chatlog__reference-content">
-                    @Raw(FormatMarkdown(Model.MessageGroup.ReferencedMessage.Content))
-                </span>
+                <span class="chatlog__reference-name" title="@Model.MessageGroup.ReferencedMessage.Author.FullName" style="@referencedUserColorStyle">@referencedUserNick</span>
+                <a class="chatlog__reference-link" href="#" onclick="scrollToMessage(event, '@Model.MessageGroup.ReferencedMessage.Id')">
+                    <span class="chatlog__reference-content">
+                        @if (!string.IsNullOrWhiteSpace(Model.MessageGroup.ReferencedMessage.Content))
+                        {
+                            @Raw(FormatMarkdown(Model.MessageGroup.ReferencedMessage.Content))
+                        }
+                        else
+                        {
+                            <em>Click to see original message</em>
+                        }
+                    </span>
+
+                    @if (Model.MessageGroup.ReferencedMessage.EditedTimestamp != null)
+                    {
+                        <span class="chatlog__reference-edited-timestamp" title="@FormatDate(Model.MessageGroup.ReferencedMessage.EditedTimestamp.Value)">(edited)</span>
+                    }
+                </a>
             }
             else
             {
                 <span class="chatlog__reference-unknown">
-                    In reply to an unknown message
+                    Original message was deleted.
                 </span>
             }
         </div>

DiscordChatExporter.Domain/Exporting/Writers/JsonMessageWriter.cs

@@ -258,19 +258,19 @@ namespace DiscordChatExporter.Domain.Exporting.Writers
 
             // Mentions
             _writer.WriteStartArray("mentions");
+
             foreach (var mention in message.MentionedUsers)
                 await WriteMentionAsync(mention);
 
             _writer.WriteEndArray();
 
-            // Reference
-
-            if (message.Reference is not null)
+            // Message reference
+            if (message.Reference != null)
             {
                 _writer.WriteStartObject("reference");
-                _writer.WriteString("messageId", message.Reference.MessageId);
-                _writer.WriteString("channelId", message.Reference.ChannelId);
-                _writer.WriteString("guildId", message.Reference.GuildId);
+                _writer.WriteString("messageId", message.Reference.MessageId?.ToString());
+                _writer.WriteString("channelId", message.Reference.ChannelId?.ToString());
+                _writer.WriteString("guildId", message.Reference.GuildId?.ToString());
                 _writer.WriteEndObject();
             }