Svelte: Restore blinking icons

src/lib/Icon.svelte

@@ -1,6 +1,7 @@
 <script>
 	export let icon;
 	export let info;
+	export let activity;
 
 	import { createEventDispatcher } from 'svelte';
 	const dispatch = createEventDispatcher();
@@ -11,7 +12,7 @@
 </script>
 
 <div 
-	class="p-3 cursor-pointer text-center hover:text-gray-100"
+	class="p-3 cursor-pointer text-center {$activity ? "text-lime-500" : "hover:text-gray-100"}"
 	on:mouseenter={handleMouseover}
 	>
 		<i class='{icon} fa-xl'></i>

src/lib/SideBar.svelte

@@ -3,15 +3,16 @@
 	import NetworkingTab from './NetworkingTab.svelte';
 	import CpuTab from './CpuTab.svelte';
 	import DiskTab from './DiskTab.svelte';
+	import { cpuActivity, diskActivity } from './activities.js'
 
 	const icons = [
-		//{ icon: 'fas fa-info-circle', info: 'Information' },
-		{ icon: 'fas fa-wifi', info: 'Networking' },
-		{ icon: 'fas fa-microchip', info: 'CPU' },
-		{ icon: 'fas fa-compact-disc', info: 'Disk' },
+		//{ icon: 'fas fa-info-circle', info: 'Information', activity: null },
+		{ icon: 'fas fa-wifi', info: 'Networking', activity: null },
+		{ icon: 'fas fa-microchip', info: 'CPU', activity: cpuActivity },
+		{ icon: 'fas fa-compact-disc', info: 'Disk', activity: diskActivity },
 		null,
-		{ icon: 'fab fa-discord', info: 'Discord' },
-		{ icon: 'fab fa-github', info: 'GitHub' },
+		{ icon: 'fab fa-discord', info: 'Discord', activity: null },
+		{ icon: 'fab fa-github', info: 'GitHub', activity: null },
 	];
 
 	let activeInfo = null;
@@ -32,6 +33,7 @@
 				<Icon
 					icon={i.icon}
 					info={i.info}
+					activity={i.activity}
 					on:mouseover={(e) => showInfo(e.detail)}
 				/>
 			{:else}

src/lib/activities.js

@@ -0,0 +1,4 @@
+import { writable } from 'svelte/store';
+
+export const cpuActivity = writable(false);
+export const diskActivity = writable(false);

src/routes/+page.svelte

@@ -11,6 +11,7 @@
 	import '@xterm/xterm/css/xterm.css'
 	import '@fortawesome/fontawesome-free/css/all.min.css'
 	import { networkInterface, startLogin } from '$lib/network.js'
+	import { cpuActivity, diskActivity } from '$lib/activities.js'
 
 	var term = new Terminal({cursorBlink:true, convertEol:true, fontFamily:"monospace", fontWeight: 400, fontWeightBold: 700});
 	var cx = null;
@@ -30,6 +31,14 @@
 		for(var i=0;i<str.length;i++)
 			cxReadFunc(str.charCodeAt(i));
 	}
+	function hddCallback(state)
+	{
+		diskActivity.set(state != "ready");
+	}
+	function cpuCallback(state)
+	{
+		cpuActivity.set(state != "ready");
+	}
 	term.onData(readData);
 	function initTerminal()
 	{
@@ -111,7 +120,8 @@
 			// TODO: Print error message on console
 			throw e;
 		}
-		// TODO: Register activity callbacks
+		cx.registerCallback("cpuActivity", cpuCallback);
+		cx.registerCallback("diskActivity", hddCallback);
 		term.scrollToBottom();
 		cxReadFunc = cx.setCustomConsole(writeData, term.cols, term.rows);
 		// Reasonable defaults for local deployments