toggle favorite icon

src/components/Main.vue

@@ -79,6 +79,12 @@ export default {
 					vm.offset += 20
 				})
 		},
+		watch: {
+	    $route(to, from) {
+	        console.log(to)
+	        console.log(from)
+			},
+	  },
 		scroll() {
 			window.onscroll = () => {
 				if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {

src/components/Table.vue

@@ -17,7 +17,7 @@
 				<td @click="doPlay">
 					<div class="stationIcon"
 						:style="{ backgroundImage: `url('${ station.favicon }')` }">
-						<span class="icon-starred" />
+						<span :class="{ 'icon-starred': idx === activeItem}" />
 					</div>
 				</td>
 				<td class="filenameColumn" @click="doPlay(idx, station)">
@@ -59,6 +59,7 @@ export default {
 	data() {
 		return {
 			activeItem: null,
+			stationsFavored: [1, 2],
 		}
 	},
 	methods: {
@@ -121,9 +122,10 @@ table {
 				background-color: var(--color-background-hover);
 			}
 
-			tr.selected {
+		}
-				background-color: var(--color-primary-light);
+
-			}
+		tr.selected {
+			background-color: var(--color-primary-light);
 		}
 
 		tr td:first-child {
@@ -148,6 +150,7 @@ table {
 			background-repeat: no-repeat;
 			background-size: contain;
 			background-position: center;
+			cursor: pointer;
 		}
 
 		.icon-starred {
@@ -159,6 +162,12 @@ table {
 			background-position: center;
 			min-width: 16px;
 			min-height: 16px;
+			cursor: pointer;
+			pointer-events: none;
+			right: -7px;
+			top: -7px;
+			float: right;
+			position: relative;
 		}
 
 		.actionColumn {