toggle favorite icon

src/components/Main.vue

@@ -78,6 +78,12 @@ export default {
 					vm.tableData = vm.tableData.concat(data)
 					vm.offset += 20
 				})
+		},
+		watch: {
+	    $route(to, from) {
+	        console.log(to)
+	        console.log(from)
+			},
 	  },
 		scroll() {
 			window.onscroll = () => {

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,10 +122,11 @@ table {
 				background-color: var(--color-background-hover);
 			}
 
+		}
+
 		tr.selected {
 			background-color: var(--color-primary-light);
 		}
-		}
 
 		tr td:first-child {
 			padding-left: 40px;
@@ -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 {