Added active app indicator in taskbar

src/App.js

@@ -1,5 +1,5 @@
 import "./App.css";
-import { TaskBar } from "./components/TaskBar.js";
+import { Taskbar } from "./components/Taskbar.js";
 import { WindowsManagerProvider } from "./hooks/WindowsManagerContext.js";
 import { WindowsView } from "./components/WindowsView.js";
 
@@ -7,7 +7,7 @@ function App() {
 	return (
 		<WindowsManagerProvider>
 			<div className="App">
-				<TaskBar/>
+				<Taskbar/>
 				<WindowsView/>
 			</div>
 		</WindowsManagerProvider>

src/components/TaskBar.css

@@ -53,6 +53,31 @@
 	width: auto;
 }
 
+.App-icon {
+	position: relative;
+}
+
+.App-icon::after {
+	content: "";
+	position: absolute;
+	left: 50%;
+	bottom: 0;
+	width: 90%;
+	height: 0.15rem;
+	background-color: var(--grey-a);
+	transition: height 200ms ease-in-out, width 200ms ease-in-out;
+	transform: translateX(-50%);
+	-webkit-transform: translateX(-50%);
+}
+
+.App-icon:hover::after {
+	width: 100%;
+}
+
+.App-icon:not(.Active)::after {
+	height: 0;
+}
+
 .Util-icons {
 	display: flex;
 	justify-content: flex-end;

src/components/TaskBar.js

@@ -1,14 +1,12 @@
 import { useEffect, useState } from "react";
-import "./TaskBar.css";
+import "./Taskbar.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBatteryFull, faSearch, faVolumeHigh, faWifi } from "@fortawesome/free-solid-svg-icons";
-import { ReactSVG } from "react-svg";
 import ApplicationsManager from "../modules/applications/applications.js";
-import { useWindowsManager } from "../hooks/WindowsManagerContext.js";
+import { AppButton } from "./task-bar/AppButton.js";
 
-export function TaskBar() {
+export function Taskbar() {
 	const [date, setDate] = useState(new Date());
-	const windowsManager = useWindowsManager();
 
 	useEffect(() => {
 		setInterval(() => {
@@ -22,11 +20,9 @@ export function TaskBar() {
 				<button>
 					<FontAwesomeIcon icon={faSearch}/>
 				</button>
-				{ApplicationsManager.APPLICATIONS.map((app) => {
+				{ApplicationsManager.APPLICATIONS.map((app) => 
-					return (<button key={app.id} onClick={() => { windowsManager.open(app.id); }}>
+					<AppButton app={app} key={app.id}/>
-						<ReactSVG src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`}/>
+				)}
-					</button>);
-				})}
 			</div>
 			<div className="Util-icons">
 				<button>

src/components/task-bar/AppButton.js

@@ -0,0 +1,19 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useState } from "react";
+import { useWindows } from "../../hooks/WindowsContext.js";
+import { useWindowsManager } from "../../hooks/WindowsManagerContext.js";
+import { ReactSVG } from "react-svg";
+
+export function AppButton({ app }) {
+	const [active, setActive] = useState(false);
+	const windows = useWindows();
+	const windowsManager = useWindowsManager();
+
+	useEffect(() => {
+		setActive(windowsManager.isAppActive(app.id));
+	}, [windows]);
+
+	return (<button className={active ? "App-icon Active" : "App-icon"} key={app.id} onClick={() => { windowsManager.open(app.id); }}>
+		<ReactSVG src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`}/>
+	</button>);
+}

src/modules/windows/windows.js

@@ -47,6 +47,20 @@ export default class WindowsManager {
 		// console.log(this);
 	}
 
+	isAppActive(appId) {
+		let active = false;
+
+		Object.values(this.windows).forEach((window) => {
+			console.log(window.app.id, appId);
+			if (window.app.id === appId) {
+				active = true;
+				return;
+			}
+		});
+
+		return active;
+	}
+
 	setUpdateWindows(updateWindows) {
 		this.updateWindows = updateWindows;
 	}
@@ -54,8 +68,4 @@ export default class WindowsManager {
 	get windowIds() {
 		return Object.keys(this.windows);
 	}
-
-	get windowsData() {
-		return Object.values(this.windows);
-	}
 }