Get to where I can select communications and see them

build.js

@@ -48,6 +48,14 @@ const config = {
 		buildStatusPlugin, // Add this first
 		sassPlugin({
 			quietDeps: true,
+			precompile(source, pathname) {
+				// Only inject variables into Vue component styles
+				// (not the main scss files to avoid circular imports)
+				if (pathname.endsWith(".vue")) {
+					return `@import "./ts/style/variables.scss";\n${source}`;
+				}
+				return source;
+			},
 			silenceDeprecations: ["import"],
 			type: "css",
 		}),

ts/components/CommunicationColumnList.vue

@@ -5,11 +5,11 @@
 }
 
 .report-card:hover {
-	background-color: #f8f9fa;
+	background-color: $secondary;
 }
 
 .report-card.active {
-	background-color: #0d6efd;
+	background-color: $primary;
 	color: white;
 }
 </style>
@@ -63,7 +63,7 @@
 				:key="comm.id"
 				class="list-group-item report-card p-3"
 				:class="{
-					active: selectedCommunication && selectedCommunication.id === comm.id,
+					active: selectedId && selectedId === comm.id,
 				}"
 				@click="handleClick(comm.id)"
 			>
@@ -161,7 +161,6 @@ function selectCommunication(communication: Communication) {
 	console.log("selected", communication);
 	emit("select-item", communication);
 	emit("update:selectedItem", communication);
-	//selectedCommunication.value = comm;
 	//messageText.value = "";
 	//updateMap();
 }

ts/style/style.scss

@@ -1,44 +1,6 @@
 @use "sass:map";
 // 1. Include specific theme variables
-$primary: #f76436;
-$secondary: #3c552d;
-$success: #8bae67;
-$warning: #ffc01b;
-$danger: #6b2737;
-$info: #d7b26d;
-$dark: #3b1002;
-$light: #fde1d8;
-
-$off-white: #f8f9fa;
-$off-black: #495057;
-
-$primary-light-4: #faa489;
-// 2. Configure color contrast
-$color-contrast-dark: #000;
-$color-contrast-light: #fff;
-$min-contrast-ratio: 2;
-
-$custom-colors: (
-	"color1": $primary,
-	"color2": $secondary,
-	"color3": $success,
-	"color4": $danger,
-	"color5": $warning,
-	"color6": $info,
-);
-$theme-colors: map.merge(
-	(
-		"primary": $primary,
-		"secondary": $secondary,
-		"success": $success,
-		"danger": $danger,
-		"warning": $warning,
-		"info": $info,
-		"dark": $dark,
-		"light": $light,
-	),
-	$custom-colors
-);
+@import "variables.scss";
 
 @keyframes spin {
 	0% {

ts/style/variables.scss

@@ -0,0 +1,39 @@
+$primary: #f76436;
+$secondary: #3c552d;
+$success: #8bae67;
+$warning: #ffc01b;
+$danger: #6b2737;
+$info: #d7b26d;
+$dark: #3b1002;
+$light: #fde1d8;
+
+$off-white: #f8f9fa;
+$off-black: #495057;
+
+$primary-light-4: #faa489;
+// 2. Configure color contrast
+$color-contrast-dark: #000;
+$color-contrast-light: #fff;
+$min-contrast-ratio: 2;
+
+$custom-colors: (
+	"color1": $primary,
+	"color2": $secondary,
+	"color3": $success,
+	"color4": $danger,
+	"color5": $warning,
+	"color6": $info,
+);
+$theme-colors: map.merge(
+	(
+		"primary": $primary,
+		"secondary": $secondary,
+		"success": $success,
+		"danger": $danger,
+		"warning": $warning,
+		"info": $info,
+		"dark": $dark,
+		"light": $light,
+	),
+	$custom-colors
+);

ts/types.ts

@@ -0,0 +1,11 @@
+export interface PublicReport {
+	created: string;
+	type: string;
+}
+
+export interface Communication {
+	created: string;
+	id: string;
+	public_report: PublicReport | null;
+	type: string;
+}