[HTML] Add indication for pinned messages

Closes #193

DiscordChatExporter.Core.Models/Message.cs

@@ -29,9 +29,12 @@ namespace DiscordChatExporter.Core.Models
 
         public IReadOnlyList<User> MentionedUsers { get; }
 
+        public bool IsPinned { get; }
+
         public Message(string id, string channelId, MessageType type, User author, DateTimeOffset timestamp,
             DateTimeOffset? editedTimestamp, string content, IReadOnlyList<Attachment> attachments,
-            IReadOnlyList<Embed> embeds, IReadOnlyList<Reaction> reactions, IReadOnlyList<User> mentionedUsers)
+            IReadOnlyList<Embed> embeds, IReadOnlyList<Reaction> reactions, IReadOnlyList<User> mentionedUsers,
+            bool isPinned)
         {
             Id = id;
             ChannelId = channelId;
@@ -44,6 +47,7 @@ namespace DiscordChatExporter.Core.Models
             Embeds = embeds;
             Reactions = reactions;
             MentionedUsers = mentionedUsers;
+            IsPinned = isPinned;
         }
 
         public override string ToString() => Content;

DiscordChatExporter.Core.Rendering/Resources/HtmlDark.css

@@ -54,6 +54,10 @@ a {
     color: rgba(255, 255, 255, 0.2);
 }
 
+.chatlog__message--pinned {
+    background-color: rgba(249, 168, 37, 0.05);
+}
+
 .chatlog__edited-timestamp {
     color: rgba(255, 255, 255, 0.2);
 }

DiscordChatExporter.Core.Rendering/Resources/HtmlLight.css

@@ -55,6 +55,10 @@ a {
     color: #99aab5;
 }
 
+.chatlog__message--pinned {
+    background-color: rgba(249, 168, 37, 0.05);
+}
+
 .chatlog__edited-timestamp {
     color: #99aab5;
 }

DiscordChatExporter.Core.Rendering/Resources/HtmlShared.css

@@ -179,8 +179,13 @@ img {
     font-size: .75em;
 }
 
+.chatlog__message {
+    padding: 2px 5px;
+    margin-right: -5px;
+    margin-left: -5px;
+}
+
 .chatlog__content {
-    padding-top: 5px;
     font-size: .9375em;
     word-wrap: break-word;
 }
@@ -190,20 +195,17 @@ img {
     font-size: .8em;
 }
 
-.chatlog__attachment {
-    margin: 5px 0;
-}
-
 .chatlog__attachment-thumbnail {
+    margin-top: 5px;
     max-width: 50%;
     max-height: 500px;
     border-radius: 3px;
 }
 
 .chatlog__embed {
+    margin-top: 5px;
     display: flex;
     max-width: 520px;
-    margin-top: 5px;
 }
 
 .chatlog__embed-color-pill {

DiscordChatExporter.Core.Rendering/Resources/HtmlShared.html

@@ -68,14 +68,17 @@
             <div class="chatlog__messages">
                 {{~ # Author name and timestamp ~}}
                 <span class="chatlog__author-name" title="{{ group.Author.FullName | html.escape }}" data-user-id="{{ group.Author.Id | html.escape }}">{{ group.Author.Name | html.escape }}</span>
+
+                {{~ # Bot tag ~}}
                 {{~ if group.Author.IsBot ~}}
                     <span class="chatlog__bot-tag">BOT</span>
                 {{~ end ~}}
+
                 <span class="chatlog__timestamp">{{ group.Timestamp | FormatDate | html.escape }}</span>
 
                 {{~ # Messages ~}}
                 {{~ for message in group.Messages ~}}
-                    <div class="chatlog__message" data-message-id="{{ message.Id }}">
+                    <div class="chatlog__message {{if message.IsPinned }}chatlog__message--pinned{{ end }}" data-message-id="{{ message.Id }}">
                     {{~ # Content ~}}
                     {{~ if message.Content ~}}
                         <div class="chatlog__content">

DiscordChatExporter.Core.Services/DataService.Parsers.cs

@@ -201,8 +201,11 @@ namespace DiscordChatExporter.Core.Services
             // Get mentioned users
             var mentionedUsers = json["mentions"].EmptyIfNull().Select(ParseUser).ToArray();
 
+            // Get whether this message is pinned
+            var isPinned = json["pinned"].Value<bool>();
+
             return new Message(id, channelId, type, author, timestamp, editedTimestamp, content, attachments, embeds,
-                reactions, mentionedUsers);
+                reactions, mentionedUsers, isPinned);
         }
     }
 }