Get to where the comms page at least loads

Still got some warnings, still lots broken

ts/components/CommunicationColumnList.vue

@@ -40,7 +40,9 @@
 		</div>
 
 		<div class="list-group list-group-flush">
+			<div v-if="loading" class="loading">Loading...</div>
 			<div
+				v-else-if="all.length > 0"
 				v-for="comm in filteredCommunications"
 				:key="comm.id"
 				class="list-group-item report-card p-3"
@@ -114,18 +116,38 @@
 </template>
 
 <script setup lang="ts">
-interface Props {}
+import { computed, ref } from "vue";
+import TimeRelative from "../components/TimeRelative.vue";
 
-const props = withDefaults(defineProps<Props>(), {
-	onFilterChange,
-});
+interface Props {
+	all: string[] | null;
+	loading: boolean;
+}
+const props = defineProps<Props>();
+
+const searchFilter = ref("");
+const typeFilter = ref("all");
 
 // Computed properties
 const filteredCommunications = computed(() => {
-	return communication.all.value.filter((c) => {
+	if (props.all == null) {
+		return [];
+	}
+	return props.all.filter((c) => {
 		const matchesType =
 			typeFilter.value === "all" || c.type === typeFilter.value;
 		return matchesType && filterMatches(searchFilter.value, c);
 	});
 });
+// Methods
+function filterMatches(filter, comm) {
+	// Implement your filter logic here
+	return true;
+}
+function formatAddress(a) {
+	if (a.number === "" && a.street === "") {
+		return "no address provided";
+	}
+	return `$${a.number} $${a.street}, ${a.locality}`;
+}
 </script>

ts/view/Communication.vue

@@ -3,7 +3,7 @@
 		<div class="container-fluid h-100">
 			<div class="row h-100">
 				<!-- Left Column - Communications List -->
-				<CommunicationColumnList all="communication.all" />
+				<CommunicationColumnList :all="communication.all" :loading="loading" />
 
 				<!-- Middle Column - Report Details -->
 				<div class="col-md-6 p-0">
@@ -651,7 +651,7 @@
 	</div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, computed, onMounted, nextTick } from "vue";
 import maplibregl from "maplibre-gl";
 
@@ -670,14 +670,13 @@ onMounted(() => {
 // Refs
 const apiBase = ref("/api");
 const selectedCommunication = ref(null);
-const typeFilter = ref("all");
 const messageText = ref("");
 const showPhotoModal = ref(false);
 const currentPhotoIndex = ref(0);
 const showToast = ref(false);
 const toastTitle = ref("");
 const toastMessage = ref("");
-const loading = ref(false);
+const loading = ref(true);
 const error = ref(null);
 const mapRef = ref(null);
 
@@ -926,7 +925,9 @@ function updateMap() {
 		padding: 50,
 	});
 }
-
+function onFilterChange(filters) {
+	console.log("Filters changed");
+}
 // Lifecycle hooks
 onMounted(async () => {
 	await loadFromAPI();