Filter communications in the frontend

Since we will know about communications we just moved into another state
in frontend land.

ts/type/api.ts

@@ -533,6 +533,7 @@ export interface CommunicationDTO {
 	created: string;
 	id: string;
 	source: string;
+	status: string;
 	type: string;
 	uri: string;
 }
@@ -541,6 +542,7 @@ export class Communication {
 		public created: Date,
 		public id: string,
 		public source: string,
+		public status: string,
 		public type: string,
 		public uri: string,
 	) {}
@@ -549,6 +551,7 @@ export class Communication {
 			new Date(json.created),
 			json.id,
 			json.source,
+			json.status,
 			json.type,
 			json.uri,
 		);

ts/view/Communication.vue

@@ -14,7 +14,7 @@
 		</template>
 		<template #left>
 			<CommunicationColumnList
-				:all="storeCommunication.all"
+				:all="visibleCommunications"
 				@deselect="handleDeselect"
 				:loading="storeCommunication.loading"
 				:selectedID="selectedId"
@@ -192,6 +192,14 @@ const selectedReport = computedAsync(
 		return await storePublicReport.byURI(selectedCommunication.value.source);
 	},
 );
+const visibleCommunications = computed((): Communication[] => {
+	if (!storeCommunication.all) {
+		return [];
+	}
+	return storeCommunication.all.filter((c: Communication) => {
+		return c.status == "new" || c.status == "opened";
+	});
+});
 const handleDeselect = (id: string) => {
 	selectedId.value = undefined;
 };