Fix selecting items in the communication list

resource/communication.go

@@ -98,7 +98,8 @@ func (res *communicationR) List(ctx context.Context, r *http.Request, user platf
 	return result, nil
 }
 
-type communicationMarkRequest struct {}
+type communicationMarkRequest struct{}
+
 func (res *communicationR) MarkInvalid(ctx context.Context, r *http.Request, user platform.User, cmr communicationMarkRequest) (communication, *nhttp.ErrorWithStatus) {
 	return res.markReport(ctx, r, user, platform.CommunicationMarkInvalid)
 }

ts/components/CommunicationColumnList.vue

@@ -1,23 +1,3 @@
-<style scoped>
-.report-card {
-	cursor: pointer;
-	transition: background-color 0.2s;
-}
-
-.report-card:hover {
-	background-color: $secondary;
-}
-
-.report-card.active {
-	background-color: $primary;
-	color: white;
-}
-.reports-list {
-	overflow-y: auto;
-	max-height: 100vh;
-}
-</style>
-
 <template>
 	<div class="card shadow-sm h-100 reports-list">
 		<div class="card-header bg-light pane-header">
@@ -68,13 +48,12 @@
 					v-else-if="all.length > 0"
 					v-for="comm in filteredCommunications"
 					:key="comm.id"
-					class="list-group-item report-card p-3"
-					:class="{
-						active: selectedId && selectedId === comm.id,
-					}"
-					@click="handleClick(comm.id)"
 				>
-					<ListCardCommunication :comm="comm" />
+					<ListCardCommunication
+						@click="handleClick(comm.id)"
+						:comm="comm"
+						:isSelected="selectedID == comm.id"
+					/>
 				</div>
 			</div>
 		</div>
@@ -97,22 +76,20 @@ import { Communication, LogEntry, PublicReport } from "@/type/api";
 interface Props {
 	all: Communication[] | null;
 	loading: boolean;
-	selectedId?: string | null;
+	selectedID?: string;
 }
 interface Emits {
 	(e: "deselect", id: string): void;
 	(e: "select", id: string): void;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-	selectedId: null,
-});
+const props = defineProps<Props>();
 
 const emit = defineEmits<Emits>();
 const handleClick = (id: string) => {
-	if (props.selectedId == null) {
+	if (props.selectedID == undefined) {
 		emit("select", id);
-	} else if (props.selectedId == id) {
+	} else if (props.selectedID == id) {
 		emit("deselect", id);
 	} else {
 		emit("select", id);

ts/components/ListCardCommunication.vue

@@ -1,6 +1,29 @@
+<style scoped lang="scss">
+.report-card {
+	cursor: pointer;
+	transition: background-color 0.2s;
+}
+
+.report-card:hover {
+	background-color: $secondary;
+}
+
+.report-card.active {
+	background-color: $primary;
+	color: white;
+}
+.reports-list {
+	overflow-y: auto;
+	max-height: 100vh;
+}
+</style>
+
 <template>
 	<!-- First row: icon, type badge, and time -->
-	<div class="justify-content-between align-items-center">
+	<div
+		class="align-items-center justify-content-between list-group-item p-3 report-card"
+		:class="{ active: isSelected }"
+	>
 		<div class="row">
 			<div class="d-flex align-items-center">
 				<div class="col">
@@ -30,6 +53,7 @@ import { formatAddress, formatDate } from "@/format";
 import { Communication } from "@/type/api";
 interface Props {
 	comm: Communication;
+	isSelected: boolean;
 }
 const props = defineProps<Props>();
 function iconForCommunicationType(): string {

ts/view/Communication.vue

@@ -17,7 +17,7 @@
 				:all="storeCommunication.all"
 				@deselect="handleDeselect"
 				:loading="storeCommunication.loading"
-				:selected-id="selectedId"
+				:selectedID="selectedId"
 				@select="handleSelect"
 			/>
 		</template>
@@ -86,7 +86,7 @@ const session = useSessionStore();
 // Refs
 const currentImageIndex = ref<number>(0);
 const paramCommunication = useQueryParam("communication");
-const selectedId = ref<string | null>(null);
+const selectedId = ref<string | undefined>(undefined);
 const showImageModal = ref(false);
 const storeCommunication = useCommunicationStore();
 const storePublicReport = useStorePublicReport();
@@ -170,7 +170,7 @@ const mapMarkers = computed<Marker[]>((): Marker[] => {
 });
 const selectedCommunication = computed<Communication | null>(
 	(): Communication | null => {
-		if (selectedId.value == null) {
+		if (selectedId.value == undefined) {
 			return null;
 		}
 		if (storeCommunication.all == null) {
@@ -193,7 +193,7 @@ const selectedReport = computedAsync(
 	},
 );
 const handleDeselect = (id: string) => {
-	selectedId.value = null;
+	selectedId.value = undefined;
 };
 const handleSelect = (id: string) => {
 	selectedId.value = id;
@@ -255,7 +255,7 @@ function removeCurrentFromList() {
 		const nextIndex = Math.min(index, storeCommunication.all.length - 1);
 		selectedId.value = storeCommunication.all[nextIndex].id;
 	} else {
-		selectedId.value = null;
+		selectedId.value = undefined;
 	}
 }
 async function sendMessage(message: string) {