[HTML] Prettier attachment preview for non-media files (#448)

DiscordChatExporter.Domain/Discord/Models/Common/FileSize.cs

@@ -52,7 +52,7 @@ namespace DiscordChatExporter.Domain.Discord.Models.Common
             if (Math.Abs(TotalKiloBytes) >= 1)
                 return "KB";
 
-            return "B";
+            return "bytes";
         }
 
         public override string ToString() => $"{GetLargestWholeNumberValue():0.##} {GetLargestWholeNumberSymbol()}";

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

@@ -266,6 +266,53 @@ img {
     border-radius: 3px;
 }
 
+.chatlog__attachment-container {
+    height: 40px;
+    width: 100%;
+    max-width: 520px;
+    padding: 10px;
+    border: 1px solid;
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.chatlog__attachment-icon {
+    float: left;
+    height: 100%;
+    margin-right: 10px;
+}
+
+.chatlog__attachment-icon > .a {
+    fill: #f4f5fb;
+    d: path("M50,935a25,25,0,0,1-25-25V50A25,25,0,0,1,50,25H519.6L695,201.32V910a25,25,0,0,1-25,25Z");
+}
+
+.chatlog__attachment-icon > .b {
+    fill: #7789c4;
+    d: path("M509.21,50,670,211.63V910H50V50H509.21M530,0H50A50,50,0,0,0,0,50V910a50,50,0,0,0,50,50H670a50,50,0,0,0,50-50h0V191Z");
+}
+
+.chatlog__attachment-icon > .c {
+    fill: #f4f5fb;
+    d: path("M530,215a25,25,0,0,1-25-25V50a25,25,0,0,1,16.23-23.41L693.41,198.77A25,25,0,0,1,670,215Z");
+}
+
+.chatlog__attachment-icon > .d {
+    fill: #7789c4;
+    d: path("M530,70.71,649.29,190H530V70.71M530,0a50,50,0,0,0-50,50V190a50,50,0,0,0,50,50H670a50,50,0,0,0,50-50Z");
+}
+
+.chatlog__attachment-filesize {
+    color: #72767d;
+    font-size: 12px;
+}
+
+.chatlog__attachment-filename {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
 .chatlog__embed {
     display: flex;
     margin-top: 0.3em;

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

@@ -62,6 +62,11 @@ a {
     background-color: rgba(249, 168, 37, 0.05);
 }
 
+.chatlog__attachment-container {
+    background-color: #2f3136;
+    border-color: #292b2f;
+}
+
 .chatlog__edited-timestamp {
     color: rgba(255, 255, 255, 0.2);
 }

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

@@ -64,6 +64,11 @@ a {
     background-color: rgba(249, 168, 37, 0.05);
 }
 
+.chatlog__attachment-container {
+    background-color: #f2f3f5;
+    border-color: #ebedef;
+}
+
 .chatlog__edited-timestamp {
     color: #747f8d;
 }

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

@@ -79,9 +79,22 @@
                                 }
                                 else
                                 {
-                                    <a href="@await ResolveUrlAsync(attachment.Url)">
-                                        @($"Attachment: {attachment.FileName} ({attachment.FileSize})")
-                                    </a>
+                                    <div class="chatlog__attachment-container">
+                                        <svg class="chatlog__attachment-icon" viewBox="0 0 720 960">
+                                            <path class="a"/>
+                                            <path class="b"/>
+                                            <path class="c"/>
+                                            <path class="d"/>
+                                        </svg>
+                                        <div class="chatlog__attachment-filename">
+                                            <a href="@await ResolveUrlAsync(attachment.Url)">
+                                                @attachment.FileName
+                                            </a>
+                                        </div>
+                                        <div class="chatlog__attachment-filesize">
+                                            @attachment.FileSize
+                                        </div>
+                                    </div>
                                 }
                             </div>
                         </div>