Add text message log to report display

ts/components/CommunicationColumnAction.vue

@@ -112,20 +112,7 @@
 									:key="index"
 									class="border-start border-2 ps-2 mb-2"
 								>
-									<div v-if="entry.type === 'created'">
-										<div class="text-muted">Initial Report</div>
-										<small class="text-muted">{{
-											formatDate(entry.created)
-										}}</small>
-									</div>
-									<div v-else-if="entry.type === 'message-text'">
-										<div class="text-muted">Text Message</div>
-										<div>{{ entry.message }}</div>
-										<small class="text-muted">{{
-											formatDate(entry.created)
-										}}</small>
-									</div>
-									<div v-else>{{ entry.type }}</div>
+									<ListCardActivityLog :entry="entry" />
 								</div>
 								<div
 									v-if="
@@ -148,6 +135,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { Communication, User } from "@/type/api";
+import ListCardActivityLog from "@/components/ListCardActivityLog.vue";
 interface Emits {
 	(e: "markSignal"): void;
 	(e: "markInvalid"): void;
@@ -173,9 +161,6 @@ function applyMessageTemplate(template: string) {
 		messageText.value = templates[template as keyof typeof templates];
 	}
 }
-function formatDate(date: Date) {
-	return date.toLocaleString();
-}
 function handleTemplateChange(event: Event) {
 	const target = event.target as HTMLSelectElement;
 	applyMessageTemplate(target.value);

ts/components/ListCardActivityLog.vue

@@ -0,0 +1,43 @@
+<template>
+	<div>
+		<div class="text-muted">
+			<i class="bi" :class="typeToIcon()" />{{ typeToTitle() }}
+		</div>
+		<div>{{ entry.message }}</div>
+		<small class="text-muted">{{ formatDate(entry.created) }}</small>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { LogEntry } from "@/type/api";
+
+interface Props {
+	entry: LogEntry;
+}
+const props = defineProps<Props>();
+function formatDate(date: Date) {
+	return date.toLocaleString();
+}
+function typeToIcon(): string {
+	if (props.entry.type == "message-text-incoming") {
+		return "bi-box-arrow-in-left";
+	} else if (props.entry.type == "message-text-outgoing") {
+		return "bi-box-arrow-out-right";
+	} else if (props.entry.type == "created") {
+		return "bi-stars";
+	} else {
+		return "bi-question";
+	}
+}
+function typeToTitle(): string {
+	if (props.entry.type == "message-text-incoming") {
+		return "Incoming Text";
+	} else if (props.entry.type == "message-text-outgoing") {
+		return "Outgoing Text";
+	} else if (props.entry.type == "created") {
+		return "Report Created";
+	} else {
+		return props.entry.type;
+	}
+}
+</script>