optimize code

src/Frontend/src/components/LetterWithEnvelope.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+
+interface Props {
+  from?: string
+  to?: string
+  subject?: string
+  returnPath?: string
+}
+
+defineProps<Props>()
+
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xml:space="preserve"
+    width="100%"
+    height="600"
+    version="1.1"
+    viewBox="0 0 32 32"
+  >
+    <g id="mail"><path
+      d="m2.43 29.04 13.55-9.88 13.55 9.88"
+      style="fill:none;stroke:#263238;stroke-width:.8;stroke-dasharray:none;"
+    /><path
+      d="m2.43 13.55 3.25-2.35"
+      style="fill:none;stroke:#263238;stroke-width:.8;stroke-dasharray:none;"
+    /><path
+      d="m26.48 11.2 3.05 2.46"
+      style="fill:none;stroke:#263238;stroke-width:.8;stroke-dasharray:none;"
+    /><path
+      d="M5.48 15.94c.12-.3 0-14.43 0-14.43H20.5l6.15 6.15v8.13"
+      style="fill:none;stroke:#666666;stroke-width:.8;"
+    /><path
+      d="M7 12 20 12 Z"
+      style="fill:none;stroke:#CCCCCC;stroke-width:.3;"
+    /><path
+      d="M7 14 24 14 Z"
+      style="fill:none;stroke:#CCCCCC;stroke-width:.3;"
+    /><path
+      d="M7 16 24 16 Z"
+      style="fill:none;stroke:#CCCCCC;stroke-width:.3;"
+    /><path
+      d="m11.6 20.16-9.17-6.61v16.87h27.1V13.66l-9.09 6.5"
+      style="fill:none;stroke:#263238;stroke-width:.8;stroke-linejoin:round;"
+    /></g>
+
+    <g
+      id="letter"
+      transform="translate(0,-2)"
+    >
+      <text
+        x="7"
+        y="5.9"
+        style="font:normal 0.5px sans-serif; fill: #666;;"
+      >From</text>
+      <text
+        x="7"
+        y="6.8"
+        style="font:normal 0.7px sans-serif;"
+      >{{ from }}</text>
+
+      <text
+        x="7"
+        y="7.6"
+        style="font:normal 0.5px sans-serif; fill: #666;;"
+      >To</text>
+      <text
+        x="7"
+        y="8.5"
+        style="font:normal 0.7px sans-serif;"
+      >{{ to }}</text>
+
+      <text
+        x="7"
+        y="12"
+        style="font:normal 0.7px sans-serif; font-weight: bold;"
+      >{{ subject?.slice(0, 50) }}</text>
+    </g>
+
+    <g>
+      <text
+        x="11"
+        y="26"
+        style="font:normal 0.5px sans-serif; fill: #666;;"
+      >ReturnPath</text>
+      <text
+        x="11"
+        y="27"
+        style="font:italic 1.0px sans-serif;"
+      >{{ returnPath }}</text>
+    </g>
+  </svg>
+</template>

src/Frontend/src/components/MailDetailBox.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+
+interface Props {
+  name: string
+  details?: string[]
+  preformatted: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  details: undefined,
+  preformatted: false
+})
+
+</script>
+
+<template>
+  <div class="row">
+    <div class="col-2 bg-grey-4 q-pa-sm">
+      {{ name }}
+    </div>
+    <div class="col-10 q-pa-sm bg-grey text-white">
+      <div
+        v-for="(detail, index) in details"
+        :key="`detail-${index}`"
+      >
+        <template v-if="preformatted">
+          <pre style="margin: 0px;">{{ detail }}</pre>
+        </template>
+        <template v-else>
+          <div style="font-family: monospace;">
+            {{ detail }}
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>

src/Frontend/src/components/MailFlowTable.vue

@@ -73,12 +73,10 @@ const columns : QTableProps['columns'] = [
 <template>
   <q-table
     flat
-
     bordered
     :rows="receivedHeaders"
     :columns="columns"
     :rows-per-page-options="[0]"
-
     no-paginate
   >
     <template #body-cell-dateTime="props">