mark stations currently playing

src/components/Table.vue

@@ -10,12 +10,15 @@
 			</tr>
 		</thead>
 		<tbody v-if="stationData">
-			<tr v-for="(station, idx) in stationData" :key="idx">
+			<tr
+				v-for="(station, idx) in stationData"
+				:key="idx"
+				:class="{ selected: idx === activeItem}">
 				<td @click="doPlay">
 					<div class="stationIcon"
 						:style="{ backgroundImage: `url('${ station.favicon }')` }" />
 				</td>
-				<td class="filenameColumn" @click="doPlay(station)">
+				<td class="filenameColumn" @click="doPlay(idx, station)">
 					<span class="innernametext">
 						{{ station.name }}
 					</span>
@@ -51,8 +54,14 @@ export default {
 			default() { return [] },
 		},
 	},
+	data() {
+		return {
+			activeItem: null,
+		}
+	},
 	methods: {
-		doPlay(station) {
+		doPlay(idx, station) {
+			this.activeItem = idx
 			this.$emit('doPlay', station)
 		},
 	},
@@ -107,6 +116,10 @@ table {
 			}
 		}
 
+		tr.selected {
+			background-color: var(--color-primary-light);
+		}
+
 		tr td:first-child {
 			padding-left: 40px;
 			width: 32px;