From f7d5ffef720786617f311a84f94ce972d44eaa6a Mon Sep 17 00:00:00 2001
From: Prozilla <business@prozilla.dev>
Date: Mon, 4 Mar 2024 11:18:49 +0100
Subject: [PATCH] Minor QOL changes

---
 src/components/apps/calculator/Calculator.jsx | 21 ++++---------------
 .../apps/file-explorer/FileExplorer.jsx       |  1 +
 .../apps/settings/Settings.module.css         |  5 +++++
 .../apps/settings/tabs/AppsSettings.jsx       |  4 +++-
 src/components/taskbar/menus/SearchMenu.jsx   |  3 +++
 src/features/apps/appsManager.js              |  1 +
 6 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/components/apps/calculator/Calculator.jsx b/src/components/apps/calculator/Calculator.jsx
index 60da984..1e3b455 100644
--- a/src/components/apps/calculator/Calculator.jsx
+++ b/src/components/apps/calculator/Calculator.jsx
@@ -10,18 +10,12 @@ export function Calculator({ active }) {
 	const [operation, setOperation] = useState(null);
 	const [isIntermediate, setIsIntermediate] = useState(false);
 
-	const log = useCallback(() => {
-		console.info({ input, firstNumber, secondNumber, operation });
-	}, [firstNumber, input, operation, secondNumber]);
-
 	const reset = useCallback(() => {
 		setInput("0");
 		setFirstNumber(null);
 		setSecondNumber(null);
 		setOperation(null);
-
-		log();
-	}, [log]);
+	}, []);
 
 	const addInput = useCallback((string) => {
 		let hasReset = false;
@@ -57,8 +51,7 @@ export function Calculator({ active }) {
 			setInput(input + string);
 		}
 
-		log();
-	}, [input, isIntermediate, log, reset, secondNumber]);
+	}, [input, isIntermediate, reset, secondNumber]);
 
 	const calculate = useCallback((intermediate = false) => {
 		if (firstNumber == null) {
@@ -89,9 +82,7 @@ export function Calculator({ active }) {
 		}
 
 		setIsIntermediate(intermediate);
-
-		log();
-	}, [firstNumber, input, log, operation]);
+	}, [firstNumber, input, operation]);
 
 	const changeOperation = useCallback((operation) => {
 		if (firstNumber != null && secondNumber == null) {
@@ -103,17 +94,13 @@ export function Calculator({ active }) {
 		}
 
 		setOperation(operation);
-
-		log();
-	}, [calculate, firstNumber, input, log, secondNumber]);
+	}, [calculate, firstNumber, input, secondNumber]);
 
 	useEffect(() => {
 		const onKeyDown = (event) => {
 			if (!active)
 				return;
 
-			console.log(event.key);
-
 			event.preventDefault();
 
 			switch (event.key) {
diff --git a/src/components/apps/file-explorer/FileExplorer.jsx b/src/components/apps/file-explorer/FileExplorer.jsx
index 0c75af7..a8bfb1e 100644
--- a/src/components/apps/file-explorer/FileExplorer.jsx
+++ b/src/components/apps/file-explorer/FileExplorer.jsx
@@ -214,6 +214,7 @@ export function FileExplorer({ startPath, selectorMode, Footer, modalsManager, o
 					tabIndex={0}
 					onChange={onPathChange}
 					onKeyDown={onKeyDown}
+					placeholder="Enter a path..."
 				/>
 				<button title="Search" tabIndex={0} className={styles["Icon-button"]}>
 					<FontAwesomeIcon icon={faSearch}/>
diff --git a/src/components/apps/settings/Settings.module.css b/src/components/apps/settings/Settings.module.css
index 5365d31..6c98f0e 100644
--- a/src/components/apps/settings/Settings.module.css
+++ b/src/components/apps/settings/Settings.module.css
@@ -73,12 +73,17 @@
 	justify-content: flex-start;
 	text-align: start;
 	width: 100%;
+	padding-bottom: 1rem;
 }
 
 .Option-list {
 	gap: 0.5rem;
 }
 
+.Option-list .Option {
+	padding-bottom: 0;
+}
+
 .Option-horizontal {
 	flex-direction: row;
 	justify-content: space-between;
diff --git a/src/components/apps/settings/tabs/AppsSettings.jsx b/src/components/apps/settings/tabs/AppsSettings.jsx
index f31f5e7..40267af 100644
--- a/src/components/apps/settings/tabs/AppsSettings.jsx
+++ b/src/components/apps/settings/tabs/AppsSettings.jsx
@@ -23,7 +23,9 @@ export function AppsSettings({ modalsManager }) {
 
 	return <div className={`${styles["Option"]} ${styles["Option-list"]}`}>
 		<p className={styles["Label"]}>Apps</p>
-		{AppsManager.APPS.map((app) => 
+		{AppsManager.APPS.sort((a, b) =>
+			a.name.toLowerCase().localeCompare(b.name.toLowerCase())
+		).map((app) => 
 			<AppOption key={app.id} app={app} modalsManager={modalsManager} pins={pins} setPins={setPins}/>
 		)}
 	</div>;
diff --git a/src/components/taskbar/menus/SearchMenu.jsx b/src/components/taskbar/menus/SearchMenu.jsx
index eaa830a..eda7d7c 100644
--- a/src/components/taskbar/menus/SearchMenu.jsx
+++ b/src/components/taskbar/menus/SearchMenu.jsx
@@ -33,6 +33,8 @@ export function SearchMenu({ active, setActive, searchQuery, setSearchQuery, inp
 	useEffect(() => {
 		setApps(AppsManager.APPS.filter(({ name }) =>
 			name.toLowerCase().includes(searchQuery.toLowerCase().trim())
+		).sort((a, b) =>
+			a.name.toLowerCase().localeCompare(b.name.toLowerCase())
 		));
 	}, [searchQuery]);
 
@@ -72,6 +74,7 @@ export function SearchMenu({ active, setActive, searchQuery, setSearchQuery, inp
 					value={searchQuery}
 					onChange={onChange}
 					spellCheck={false}
+					placeholder="Search..."
 				/>
 				<div className={appStyles["App-list"]}>
 					{apps?.map(({ name, id }) => 
diff --git a/src/features/apps/appsManager.js b/src/features/apps/appsManager.js
index 4dafcf4..e24397e 100644
--- a/src/features/apps/appsManager.js
+++ b/src/features/apps/appsManager.js
@@ -12,6 +12,7 @@ import { Browser } from "../../components/apps/browser/Browser.jsx";
 import { IMAGE_FORMATS } from "../../config/apps/mediaViewer.config.js";
 
 export default class AppsManager {
+	/** @type {App[]} */
 	static APPS = [
 		new App(APP_NAMES.TERMINAL, APPS.TERMINAL, Terminal),
 		new App(APP_NAMES.SETTINGS, APPS.SETTINGS, Settings),