feat(file-viewer): enable viewing .eml files

Author: Kiarokh

etc/lime-elements.api.md

@@ -406,6 +406,7 @@ export namespace Components {
         "value": LabelValue;
     }
     export interface LimelEmailViewer {
+        "attachments"?: EmailAttachment[];
         "bodyHtml"?: string;
         "bodyText"?: string;
         "cc"?: string;
@@ -983,6 +984,13 @@ export type EditorTextLink = {
 // @beta (undocumented)
 export type EditorUiType = 'standard' | 'minimal' | 'no-toolbar';
 
+// @public
+export interface EmailAttachment {
+    filename?: string;
+    mimeType?: string;
+    size?: number;
+}
+
 // Warning: (ae-missing-release-tag) "EventEmitter" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -1010,7 +1018,7 @@ export interface FileInfo {
 }
 
 // @public (undocumented)
-export type FileType = 'pdf' | 'image' | 'video' | 'audio' | 'text' | 'office' | 'unknown';
+export type FileType = 'pdf' | 'image' | 'video' | 'audio' | 'text' | 'email' | 'office' | 'unknown';
 
 // @public (undocumented)
 export type FlexContainerAlign = 'start' | 'end' | 'center' | 'stretch';
@@ -1648,6 +1656,7 @@ export namespace JSX {
         "value"?: LabelValue;
     }
     export interface LimelEmailViewer {
+        "attachments"?: EmailAttachment[];
         "bodyHtml"?: string;
         "bodyText"?: string;
         "cc"?: string;

src/components/email-viewer/email-viewer.scss

@@ -67,6 +67,58 @@
     }
 }
 
+.attachments {
+    padding: 0.5rem 0.75rem;
+
+    label {
+        font-size: var(--limel-theme-small-font-size);
+        opacity: 0.6;
+    }
+
+    ul {
+        all: unset;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
+        gap: 0.5rem;
+
+        padding: 0.5rem 0;
+    }
+
+    li {
+        all: unset;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+
+        font-size: 0.6875rem;
+        line-height: normal;
+
+        padding: 0.75rem 0.5rem 0.5rem 0.5rem;
+        border-radius: 0.5rem;
+        border: 1px solid rgba(var(--contrast-600));
+        background-color: rgba(var(--contrast-400));
+    }
+
+    .attachment-filename {
+        font-weight: 500;
+    }
+
+    .attachment-mime-type {
+        opacity: 0.7;
+    }
+
+    limel-badge {
+        --badge-max-width: auto;
+        --badge-background-color: rgb(var(--contrast-1000), 0.7);
+        --badge-text-color: rgb(var(--color-white));
+        position: absolute;
+        top: 0.125rem;
+        right: 0.125rem;
+        box-shadow: var(--shadow-brighten-edges-outside);
+    }
+}
+
 .body {
     flex-grow: 1;
     max-width: 100%;

src/components/email-viewer/email-viewer.tsx

@@ -1,6 +1,8 @@
 import { Component, Prop, h } from '@stencil/core';
 import translate from '../../global/translations';
 import { Languages } from '../date-picker/date.types';
+import { EmailAttachment } from '../../util/email';
+import { formatBytes } from '../../util/format-bytes';
 
 /**
  * This is a private component, used to render `.eml` files inside
@@ -63,6 +65,12 @@ export class EmailViewer {
     @Prop()
     public bodyText?: string;
 
+    /**
+     * List of non-inline attachments.
+     */
+    @Prop()
+    public attachments?: EmailAttachment[];
+
     /**
      * Optional URL to render as a final fallback using an `<object type="text/plain">`.
      */
@@ -112,6 +120,7 @@ export class EmailViewer {
                     this.getTranslation('file-viewer.email.date'),
                     this.date
                 )}
+                {this.renderAttachments()}
             </div>
         );
     }
@@ -156,8 +165,8 @@ export class EmailViewer {
         return (
             <dl class={`headers ${type}`}>
                 <dt>{label}</dt>
-                {values.map((v) => (
-                    <dd>{v}</dd>
+                {values.map((headerValue, index) => (
+                    <dd key={`${type}-${index}`}>{headerValue}</dd>
                 ))}
             </dl>
         );
@@ -170,13 +179,52 @@ export class EmailViewer {
         if (type === 'to' || type === 'cc') {
             return value
                 .split(',')
-                .map((v) => v.trim())
+                .map((valuePart) => valuePart.trim())
                 .filter(Boolean);
         }
 
         return [value];
     }
 
+    private renderAttachments() {
+        if (!this.attachments || this.attachments.length === 0) {
+            return;
+        }
+
+        const label = this.getTranslation('file-viewer.email.attachments');
+
+        return (
+            <div class="attachments">
+                <span>{label}</span>
+                <ul>
+                    {this.attachments.map((attachment, index) => (
+                        <li key={`attachment-${index}`}>
+                            <span class="attachment-filename">
+                                {attachment.filename?.trim() ||
+                                    this.getTranslation(
+                                        'file-viewer.email.attachment.unnamed'
+                                    )}
+                            </span>
+                            <span class="attachment-mime-type">
+                                {attachment.mimeType?.trim()}
+                            </span>
+                            {this.renderSizeBadge(attachment.size)}
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        );
+    }
+
+    private renderSizeBadge(size: number) {
+        if (typeof size !== 'number') {
+            return;
+        }
+        return (
+            <limel-badge class="attachment-size" label={formatBytes(size)} />
+        );
+    }
+
     private getTranslation(key: string) {
         return translate.get(key, this.language);
     }