Minor QOL changes

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, reset, secondNumber]);
-	}, [input, isIntermediate, log, reset, secondNumber]);
 
 	const calculate = useCallback((intermediate = false) => {
 		if (firstNumber == null) {
@@ -89,9 +82,7 @@ export function Calculator({ active }) {
 		}
 
 		setIsIntermediate(intermediate);
-
+	}, [firstNumber, input, operation]);
-		log();
-	}, [firstNumber, input, log, operation]);
 
 	const changeOperation = useCallback((operation) => {
 		if (firstNumber != null && secondNumber == null) {
@@ -103,17 +94,13 @@ export function Calculator({ active }) {
 		}
 
 		setOperation(operation);
-
+	}, [calculate, firstNumber, input, secondNumber]);
-		log();
-	}, [calculate, firstNumber, input, log, secondNumber]);
 
 	useEffect(() => {
 		const onKeyDown = (event) => {
 			if (!active)
 				return;
 
-			console.log(event.key);
-
 			event.preventDefault();
 
 			switch (event.key) {

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}/>

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;

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>;

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 }) => 

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),