From 7dd61a06e271c14e0be2e5db5a07891c9033d620 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Sun, 22 Mar 2026 04:08:16 +0000
Subject: [PATCH] Get to where I can select communications and see them

---
 build.js                                  |  8 +++++
 ts/components/CommunicationColumnList.vue |  7 ++--
 ts/style/style.scss                       | 40 +----------------------
 ts/style/variables.scss                   | 39 ++++++++++++++++++++++
 ts/types.ts                               | 11 +++++++
 5 files changed, 62 insertions(+), 43 deletions(-)
 create mode 100644 ts/style/variables.scss
 create mode 100644 ts/types.ts

diff --git a/build.js b/build.js
index 65515427..6f5713d1 100644
--- a/build.js
+++ b/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",
 		}),
diff --git a/ts/components/CommunicationColumnList.vue b/ts/components/CommunicationColumnList.vue
index 80308961..cdbbb495 100644
--- a/ts/components/CommunicationColumnList.vue
+++ b/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();
 }
diff --git a/ts/style/style.scss b/ts/style/style.scss
index cf977fa2..db2a5526 100644
--- a/ts/style/style.scss
+++ b/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% {
diff --git a/ts/style/variables.scss b/ts/style/variables.scss
new file mode 100644
index 00000000..794e889f
--- /dev/null
+++ b/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
+);
diff --git a/ts/types.ts b/ts/types.ts
new file mode 100644
index 00000000..38b1ed7c
--- /dev/null
+++ b/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;
+}