Add generic layout of listing cards

This should eventually by ported to other interfaces for consistency.

ts/components/ListCardContact.vue

@@ -0,0 +1,57 @@
+<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="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">
+					<i
+						class="bi fs-4 me-2"
+						:class="{ 'bi-envelope': contact.emails.length != 0 }"
+					/>
+					<i
+						class="bi fs-4 me-2"
+						:class="{ 'bi-phone': contact.phones.length != 0 }"
+					/>
+				</div>
+				<div class="col-6 text-end">
+					<small>{{ contact.name }}</small>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import TimeRelative from "@/components/TimeRelative.vue";
+import Tooltip from "@/components/Tooltip.vue";
+import { formatAddress, formatDate } from "@/format";
+import { Contact } from "@/type/api";
+interface Props {
+	contact: Contact;
+	isSelected: boolean;
+}
+const props = defineProps<Props>();
+</script>