From 57162df1228e72c1f252fb1bc960ab0ba60a1967 Mon Sep 17 00:00:00 2001
From: Raphael Schweikert <Raphael.Schweikert1@swisscom.com>
Date: Mon, 28 Oct 2024 21:50:36 +0100
Subject: [PATCH] feat(editor): display size in file summary

---
 src/main/frontend/sections/output/FileMessageOutput.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/main/frontend/sections/output/FileMessageOutput.tsx b/src/main/frontend/sections/output/FileMessageOutput.tsx
index 061405c..25eb557 100644
--- a/src/main/frontend/sections/output/FileMessageOutput.tsx
+++ b/src/main/frontend/sections/output/FileMessageOutput.tsx
@@ -15,7 +15,7 @@ const Elm = styled('div')`
 	border-radius: 12px;
 	display: grid;
 	gap: 6px;
-	grid-template-areas: 'icon name . download' 'icon type . download';
+	grid-template-areas: 'icon name name download' 'icon type size download';
 	grid-template-columns: max-content max-content 1fr max-content;
 	> coral-icon {
 		grid-area: icon;
@@ -28,6 +28,9 @@ const Elm = styled('div')`
 	> .type {
 		grid-area: type;
 	}
+	> .size {
+		grid-area: size;
+	}
 	> a {
 		grid-area: download;
 	}
@@ -71,13 +74,15 @@ function iconFor(mimeType: MimeType): CoralIcon {
 
 export const FileMessageOutput: FC<{ message: FileMessage }> = ({ message }) => {
 	const icon = iconFor(message.mime);
+	const blob = message.blob!;
 
 	return (
 		<Elm>
 			<coral-icon icon={icon} size="L" />
 			<span className="name">{message.name}</span>
 			<small className="type">{message.mime}</small>
-			<a href={URL.createObjectURL(message.blob!)} download={message.name}>
+			<small className="size">{blob.size} bytes</small>
+			<a href={URL.createObjectURL(blob)} download={message.name}>
 				<button type="button" is="coral-button" icon="download">
 					Download
 				</button>