QOL improvements + SEO

src/components/applications/media-viewer/MediaViewer.jsx

@@ -1,4 +1,5 @@
 
+import { useEffect } from "react";
 import { VirtualFile } from "../../../features/virtual-drive/virtual-file.js";
 import { useWindowsManager } from "../../../hooks/windows/WindowsManagerContext.js";
 import styles from "./MediaViewer.module.css";
@@ -7,10 +8,16 @@ import styles from "./MediaViewer.module.css";
  * @param {object} props
  * @param {VirtualFile} props.file
  * @param {Function} props.close
+ * @param {Function} props.setTitle
  */
-export function MediaViewer({ file, close }) {
+export function MediaViewer({ file, close, setTitle }) {
 	const windowsManager = useWindowsManager();
 
+	useEffect(() => {
+		if (file != null)
+			setTitle(file.id);
+	}, [file, setTitle]);
+
 	if (file == null) {
 		setTimeout(() => {
 			windowsManager.open("file-explorer", { startPath: "~/Images" });

src/components/applications/settings/Settings.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import styles from "./Settings.module.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faHardDrive, faPalette } from "@fortawesome/free-solid-svg-icons";
+import { faCircleInfo, faHardDrive, faPalette } from "@fortawesome/free-solid-svg-icons";
 import { useVirtualRoot } from "../../../hooks/virtual-drive/VirtualRootContext.js";
 import { useSettings } from "../../../hooks/settings/SettingsContext.js";
 import { SettingsManager } from "../../../features/settings/settings.js";
@@ -11,6 +11,8 @@ import { round } from "../../../features/math/round.js";
 import { Button } from "../../utils/Button.jsx";
 import { ProgressBar } from "../../utils/ProgressBar.jsx";
 import utilStyles from "../../../styles/utils.module.css";
+import { useWindowsManager } from "../../../hooks/windows/WindowsManagerContext.js";
+import Vector2 from "../../../features/math/vector2.js";
 
 /**
  * @param {object} props 
@@ -75,21 +77,57 @@ function StorageTab({ virtualRoot }) {
 	</>);
 }
 
+function AboutTab({ windowsManager, virtualRoot }) {
+	return (<>
+		<div className={styles["Option"]}>
+			<p className={styles["Label"]}>About ProzillaOS</p>
+			<p className={utilStyles["Text-light"]}>ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows made with React.js by Prozilla.</p>
+			<Button
+				className={`${styles.Button} ${utilStyles["Text-bold"]}`}
+				onClick={(event) => {
+					event.preventDefault();
+					windowsManager.open("text-editor", {
+						mode: "view",
+						file: virtualRoot.navigate("~/Documents").findFile("info", "md"),
+						size: new Vector2(575, 675),
+					});
+				}}
+			>
+				Open info.md
+			</Button>
+			<Button
+				className={`${styles.Button} ${utilStyles["Text-bold"]}`}
+				onClick={(event) => {
+					event.preventDefault();
+					window.open("https://github.com/Prozilla/prozilla-os");
+				}}
+			>
+				View source
+			</Button>
+		</div>
+	</>);
+}
+
 export function Settings() {
 	const [tabIndex, setTabIndex] = useState(0);
 	const virtualRoot = useVirtualRoot();
 	const settingsManager = useSettings();
+	const windowsManager = useWindowsManager();
 
 	return (
 		<div className={styles.Container}>
 			<div className={styles.Tabs}>
-				<button title="Appearance" className={`${styles["Tab-button"]} ${utilStyles["Text-semibold"]}`} onClick={() => { setTabIndex(0); }}>
+				<button title="Appearance" className={styles["Tab-button"]} onClick={() => { setTabIndex(0); }}>
 					<FontAwesomeIcon icon={faPalette}/>
-					Appearance
+					<p className={utilStyles["Text-semibold"]}>Appearance</p>
 				</button>
-				<button title="Storage" className={`${styles["Tab-button"]} ${utilStyles["Text-semibold"]}`} onClick={() => { setTabIndex(1); }}>
+				<button title="Storage" className={styles["Tab-button"]} onClick={() => { setTabIndex(1); }}>
 					<FontAwesomeIcon icon={faHardDrive}/>
-					Storage
+					<p className={utilStyles["Text-semibold"]}>Storage</p>
+				</button>
+				<button title="Storage" className={styles["Tab-button"]} onClick={() => { setTabIndex(2); }}>
+					<FontAwesomeIcon icon={faCircleInfo}/>
+					<p className={utilStyles["Text-semibold"]}>About</p>
 				</button>
 			</div>
 			<div className={styles["Tab-panel"]}>
@@ -97,7 +135,9 @@ export function Settings() {
 					? <AppearanceTab virtualRoot={virtualRoot} settingsManager={settingsManager}/>
 					: tabIndex === 1
 						? <StorageTab virtualRoot={virtualRoot}/>
-						: null
+						: tabIndex === 2
+							? <AboutTab virtualRoot={virtualRoot} windowsManager={windowsManager}/>
+							: null
 				}
 			</div>
 		</div>

src/components/applications/settings/Settings.module.css

@@ -40,11 +40,15 @@
 	background-color: rgba(255, 255, 255, 10%);
 }
 
-.Tab-button svg {
+.Tab-button > svg {
 	height: 1.35rem;
 	aspect-ratio: 1;
 }
 
+.Tab-button > p {
+	margin: 0;
+}
+
 .Tab-panel {
 	flex: 1;
 	display: flex;
@@ -57,6 +61,10 @@
 }
 
 .Option {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	justify-content: flex-start;
 	text-align: start;
 	max-width: 100%;
 }
@@ -102,6 +110,7 @@
 .Button {
 	--hover-color: var(--background-color-b);
 
+	margin-bottom: 0.75rem;
 	padding: 0.5rem 1rem;
 	color: var(--foreground-color-a);
 	background-color: var(--background-color-a);

src/components/task-bar/TaskBar.jsx

@@ -27,8 +27,7 @@ function AppButton({ app }) {
 
 	useEffect(() => {
 		setActive(windowsManager.isAppActive(app.id));
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [windows]);
+	}, [app.id, windows, windowsManager]);
 
 	const classNames = [styles["App-icon"]];
 	if (active)

src/components/task-bar/menus/HomeMenu.module.css

@@ -64,5 +64,5 @@
 	text-align: left;
 	font-size: 1rem;
 	margin: 0;
-	margin-bottom: 1rem;
+	margin-bottom: 0.5rem;
 }

src/components/task-bar/menus/SearchMenu.jsx

@@ -5,6 +5,7 @@ import { useWindowsManager } from "../../../hooks/windows/WindowsManagerContext.
 import { ReactSVG } from "react-svg";
 import { useEffect } from "react";
 import { useState } from "react";
+import { useKeyboardListener } from "../../../hooks/utils/keyboard.js";
 
 /**
  * @param {object} props 
@@ -43,6 +44,15 @@ export function SearchMenu({ active, setActive, searchQuery, setSearchQuery, inp
 	if (active && apps)
 		classNames.push(styles.Active);
 
+	const onKeyDown = (event) => {
+		if (event.key === "f" && event.ctrlKey) {
+			event.preventDefault();
+			setActive(true);
+		}
+	};
+
+	useKeyboardListener({ onKeyDown });
+
 	return (
 		<div className={classNames.join(" ")}>
 			<div className={styles["Container-inner"]}>

src/features/applications/applications.js

@@ -10,7 +10,7 @@ import Vector2 from "../math/vector2.js";
 
 export default class ApplicationsManager {
 	static APPLICATIONS = [
-		new Application("Terminal", "terminal", Terminal),
+		new Application("Commands", "terminal", Terminal),
 		new Application("Settings", "settings", Settings),
 		// new Application("Browser", "browser"),
 		// new Application("Calculator", "calculator", Calculator, { size: new Vector2(400, 600) }),