Refactored taskbar

src/components/task-bar/TaskBar.jsx

@@ -8,13 +8,13 @@ import { useWindowsManager } from "../../hooks/windows/WindowsManagerContext.js"
 import { ReactSVG } from "react-svg";
 // eslint-disable-next-line no-unused-vars
 import Application from "../../features/applications/application.js";
-import { HomeMenu } from "./HomeMenu.jsx";
+import { HomeMenu } from "./menus/HomeMenu.jsx";
 import OutsideClickListener from "../../hooks/utils/outsideClick.js";
-import { Battery } from "./Battery.jsx";
-import { Network } from "./Network.jsx";
-import { Volume } from "./Volume.jsx";
-import { SearchMenu } from "./SearchMenu.jsx";
-import { Calendar } from "./Calendar.jsx";
+import { Battery } from "./indicators/Battery.jsx";
+import { Network } from "./indicators/Network.jsx";
+import { Volume } from "./indicators/Volume.jsx";
+import { SearchMenu } from "./menus/SearchMenu.jsx";
+import { Calendar } from "./indicators/Calendar.jsx";
 import { useScrollWithShadow } from "../../hooks/utils/scrollWithShadows.js";
 
 /**

src/components/task-bar/indicators/Battery.jsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import styles from "./Battery.module.css";
 
 export function Battery() {
-	const [isCharging, setIsCharging] = useState(false);
+	const [isCharging, setIsCharging] = useState(true);
 	const [percentage, setPercentage] = useState(100);
 	// const [chargingTime, setChargingTime] = useState(0);
 	// const [dischargingTime, setDischargingTime] = useState(0);

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

@@ -1,7 +1,10 @@
 .App-list {
 	--scrollbar-color: rgba(0, 0, 0, 25%);
+	display: flex;
+	flex-direction: column;
 	overflow-y: auto;
 	max-height: 100%;
+	z-index: 0;
 }
 
 .App-button {

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

@@ -2,12 +2,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styles from "./HomeMenu.module.css";
 import appStyles from "./AppList.module.css";
 import { faCircleInfo, faFileLines, faGear, faImage, faPowerOff } from "@fortawesome/free-solid-svg-icons";
-import { useWindowsManager } from "../../hooks/windows/WindowsManagerContext.js";
-import ApplicationsManager from "../../features/applications/applications.js";
+import { useWindowsManager } from "../../../hooks/windows/WindowsManagerContext.js";
+import ApplicationsManager from "../../../features/applications/applications.js";
 import { ReactSVG } from "react-svg";
-import { closeTab } from "../../features/utils/browser.js";
-import { useKeyboardListener } from "../../hooks/utils/keyboard.js";
-import { useVirtualRoot } from "../../hooks/virtual-drive/VirtualRootContext.js";
+import { closeTab } from "../../../features/utils/browser.js";
+import { useKeyboardListener } from "../../../hooks/utils/keyboard.js";
+import { useVirtualRoot } from "../../../hooks/virtual-drive/VirtualRootContext.js";
 
 export function HomeMenu({ active, setActive, search }) {
 	const windowsManager = useWindowsManager();

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

@@ -8,13 +8,20 @@
 
 .Container-inner {
 	opacity: 1;
+	display: flex;
+	min-width: 16rem;
+	max-width: 32rem;
 	background-color: rgba(25, 25, 25, 75%);
+	border-top-left-radius: 0.5rem;
+	border-top-right-radius: 0.5rem;
+	border-bottom-right-radius: 0.5rem;
 	backdrop-filter: blur(15px);
 	transform: none;
 	transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
+	overflow: hidden;
+	resize: horizontal;
 }
 
-
 .Container-outer:not(.Active) {
 	pointer-events: none;
 }
@@ -24,17 +31,6 @@
 	transform: translateY(100px);
 }
 
-.Container-inner {
-	display: flex;
-	min-width: 16rem;
-	max-width: 32rem;
-	border-top-left-radius: 0.5rem;
-	border-top-right-radius: 0.5rem;
-	border-bottom-right-radius: 0.5rem;
-	overflow: hidden;
-	resize: horizontal;
-}
-
 .Buttons {
 	display: flex;
 	flex-direction: column-reverse;

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

@@ -1,34 +1,48 @@
 import styles from "./SearchMenu.module.css";
 import appStyles from "./AppList.module.css";
-import ApplicationsManager from "../../features/applications/applications.js";
-import { useWindowsManager } from "../../hooks/windows/WindowsManagerContext.js";
+import ApplicationsManager from "../../../features/applications/applications.js";
+import { useWindowsManager } from "../../../hooks/windows/WindowsManagerContext.js";
 import { ReactSVG } from "react-svg";
 import { useEffect } from "react";
+import { useState } from "react";
 
 export function SearchMenu({ active, setActive, searchQuery, setSearchQuery, inputRef }) {
 	const windowsManager = useWindowsManager();
+	const [apps, setApps] = useState(null);
 
 	useEffect(() => {
 		if (inputRef.current)
 			inputRef.current.focus();
 	}, [inputRef]);
 
+	useEffect(() => {
+		setApps(ApplicationsManager.APPLICATIONS.filter(({ name }) =>
+			name.toLowerCase().includes(searchQuery.toLowerCase().trim())
+		));
+	}, [searchQuery]);
+
 	const onChange = (event) => {
 		const value = event.target.value;
 		setSearchQuery(value);
 	}
 
 	const classNames = [styles["Container-outer"]];
-	if (active)
+	if (active && apps)
 		classNames.push(styles.Active);
 
 	return (
 		<div className={classNames.join(" ")}>
 			<div className={styles["Container-inner"]}>
+				<input
+					ref={inputRef}
+					className={styles.Input}
+					value={searchQuery}
+					onChange={onChange}
+					spellCheck={false}
+					autoFocus
+				/>
 				<div className={appStyles["App-list"]}>
-					{ApplicationsManager.APPLICATIONS.filter(({ name }) =>
-						name.toLowerCase().includes(searchQuery.toLowerCase().trim())
-					).map(({ name, id }) => 
+					{apps?.map(({ name, id }) => 
 						<button
 							key={id}
 							className={appStyles["App-button"]}
@@ -43,14 +57,6 @@ export function SearchMenu({ active, setActive, searchQuery, setSearchQuery, inp
 						</button>
 					)}
 				</div>
-				<input
-					ref={inputRef}
-					className={styles.Input}
-					value={searchQuery}
-					onChange={onChange}
-					spellCheck={false}
-					autoFocus
-				/>
 			</div>
 		</div>
 	);

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

@@ -1,17 +1,31 @@
 .Container-outer {
 	position: absolute;
+	display: flex;
+	flex-direction: column;
 	left: 0;
 	bottom: 100%;
 	height: auto !important;
+	max-height: 20rem;
 	overflow: hidden;
 }
 
 .Container-inner {
 	opacity: 1;
+	display: flex;
+	gap: 0.5rem;
+	flex-direction: column-reverse;
+	min-width: 13rem;
+	max-width: 19rem;
+	padding: 0.5rem;
 	background-color: rgba(25, 25, 25, 75%);
+	border-top-left-radius: 0.5rem;
+	border-top-right-radius: 0.5rem;
+	border-bottom-right-radius: 0.5rem;
 	backdrop-filter: blur(15px);
 	transform: none;
 	transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
+	overflow: hidden;
+	resize: horizontal;
 }
 
 .Container-outer:not(.Active) {
@@ -23,18 +37,8 @@
 	transform: translateY(100px);
 }
 
-.Container-inner {
-	display: flex;
-	flex-direction: column;
-	min-width: 13rem;
-	max-width: 29rem;
-	max-height: 20rem;
-	padding: 0.5rem;
-	border-top-left-radius: 0.5rem;
-	border-top-right-radius: 0.5rem;
-	border-bottom-right-radius: 0.5rem;
-	overflow: hidden;
-	resize: horizontal;
+.Container-inner > div {
+	margin-top: auto;
 }
 
 .Input {

src/features/utils/browser.js

@@ -1,4 +1,5 @@
 export function closeTab() {
-	// The following method only works in some browsers
-	window.close();
+	if (window.confirm("Are you sure you want to shut down ProzillaOS?")) {
+		window.open("about:blank", "_self");
+	}
 }