Added dynamic title and favicon

src/components/windows/WindowView.jsx

@@ -16,6 +16,8 @@ import AppsManager from "../../features/apps/appsManager.js";
 import { ClickAction } from "../actions/actions/ClickAction.jsx";
 import { Actions } from "../actions/Actions.jsx";
 import { useScreenDimensions } from "../../hooks/utils/screen.js";
+import { NAME } from "../../config/branding.config.js";
+import { setViewportIcon, setViewportTitle } from "../../features/utils/browser.utils.js";
 
 /**
  * @typedef {object} windowProps
@@ -83,6 +85,13 @@ export const WindowView = memo(({ id, app, size, position, onInteract, options,
 		}
 	}, [position, size, screenHeight, screenWidth]);
 
+	useEffect(() => {
+		if (active) {
+			setViewportTitle(`${title} | ${NAME}`);
+			setViewportIcon(iconUrl);
+		}
+	}, [active, iconUrl, title]);
+
 	const close = (event) => {
 		event?.preventDefault();
 		windowsManager.close(id);

src/components/windows/WindowsView.jsx

@@ -4,6 +4,8 @@ import { memo, useEffect, useState } from "react";
 import { WindowView } from "./WindowView.jsx";
 import { useSettingsManager } from "../../hooks/settings/settingsManagerContext.js";
 import { SettingsManager } from "../../features/settings/settingsManager.js";
+import { NAME, TAG_LINE } from "../../config/branding.config.js";
+import { setViewportIcon, setViewportTitle } from "../../features/utils/browser.utils.js";
 
 export const WindowsView = memo(() => {
 	const settingsManager = useSettingsManager();
@@ -16,6 +18,11 @@ export const WindowsView = memo(() => {
 		setSortedWindows([...windows].sort((windowA, windowB) =>
 			windowA.lastInteraction - windowB.lastInteraction
 		));
+
+		if (windows.length === 0) {
+			setViewportTitle(`${NAME} | ${TAG_LINE}`);
+			setViewportIcon(`${process.env.PUBLIC_URL}/favicon.ico`);
+		}
 	}, [windows]);
 
 	// Launch startup apps
@@ -34,7 +41,7 @@ export const WindowsView = memo(() => {
 			<WindowView
 				key={id}
 				onInteract={() => { windowsManager.focus(id); }}
-				active={index === 0}
+				active={index === sortedWindows.length - 1}
 				id={id}
 				app={app}
 				size={size}

src/config/branding.config.js

@@ -1,6 +1,7 @@
 import { ANSI } from "./apps/terminal.config.js";
 
 export const NAME = "Prozilla OS";
+export const TAG_LINE = "Web-based Operating System";
 
 export const ASCII_LOGO = `
               :.           

src/features/utils/browser.utils.js

@@ -31,4 +31,24 @@ export function isValidUrl(string) {
 	} catch (err) {
 		return false;
 	}
+}
+
+/**
+ * @param {string} title 
+ */
+export function setViewportTitle(title) {
+	document.title = title;
+}
+
+/**
+ * @param {string} url 
+ */
+export function setViewportIcon(url) {
+	let link = document.querySelector("link[rel~='icon']");
+	if (!link) {
+		link = document.createElement("link");
+		link.rel = "icon";
+		document.head.appendChild(link);
+	}
+	link.href = url;
 }