Improved modals + added dialog box modal

package.json

@@ -5,6 +5,14 @@
 	"author": "Prozilla",
 	"homepage": "https://os.prozilla.dev/",
 	"repository": "https://github.com/Prozilla/Prozilla-OS",
+	"scripts": {
+		"start": "react-scripts start",
+		"build": "react-scripts build",
+		"test": "react-scripts test",
+		"eject": "react-scripts eject",
+		"predeploy": "npm run build",
+		"deploy": "sh deploy.sh"
+	},
 	"dependencies": {
 		"@fortawesome/fontawesome-svg-core": "^6.4.0",
 		"@fortawesome/free-regular-svg-icons": "^6.4.0",
@@ -23,13 +31,10 @@
 		"react-tabs": "^6.0.2",
 		"web-vitals": "^2.1.4"
 	},
-	"scripts": {
+	"devDependencies": {
-		"start": "react-scripts start",
+		"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-		"build": "react-scripts build",
+		"eslint-plugin-jsdoc": "^46.4.6",
-		"test": "react-scripts test",
+		"gh-pages": "^5.0.0"
-		"eject": "react-scripts eject",
-		"predeploy": "npm run build",
-		"deploy": "sh deploy.sh"
 	},
 	"eslintConfig": {
 		"extends": [
@@ -98,10 +103,5 @@
 			"last 1 firefox version",
 			"last 1 safari version"
 		]
-	},
-	"devDependencies": {
-		"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-		"eslint-plugin-jsdoc": "^46.4.6",
-		"gh-pages": "^5.0.0"
 	}
 }

src/components/applications/file-explorer/FileExplorer.jsx

@@ -5,10 +5,13 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowUp, faCaretLeft, faCaretRight, faCog, faDesktop, faFile, faFileLines, faFolder, faHouse, faImage, faPlus, faSearch } from "@fortawesome/free-solid-svg-icons";
 import { VirtualFile } from "../../../features/virtual-drive/virtualFile.js";
 import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext.js";
-import utilStyles from "../../../styles/utils.module.css";
+import { useContextMenu } from "../../../hooks/modals/contextMenu.js";
-// import { useContextMenu } from "../../../hooks/modals/ContextMenu.js";
 import { useModals } from "../../../hooks/modals/modals.js";
 import { ModalsView } from "../../modals/ModalsView.jsx";
+import { QuickAccessButton } from "./QuickAccessButton.jsx";
+import { useDialogBox } from "../../../hooks/modals/dialogBox.js";
+import Vector2 from "../../../features/math/vector2.js";
+import { DIALOG_CONTENT_TYPES } from "../../modals/dialog-box/DialogBox.jsx";
 
 /**
  * @param {object} props
@@ -35,19 +38,36 @@ function FilePreview({ file }) {
 	return preview;
 }
 
-export function FileExplorer({ startPath }) {
+export function FileExplorer({ startPath, app }) {
 	const virtualRoot = useVirtualRoot();
 	const [currentDirectory, setCurrentDirectory] = useState(virtualRoot.navigate(startPath ?? "~"));
 	const [path, setPath] = useState(currentDirectory?.path ?? "");
 	const windowsManager = useWindowsManager();
 	const [showHidden] = useState(true);
 	const [modalsManager, modals] = useModals();
-	// const { onContextMenuFile } = useContextMenu({
+
-	// 	modalsManager,
+	const { onContextMenu: onContextMenuFile } = useContextMenu({
-	// 	options: {
+		modalsManager,
-	// 		"Open": () => {}
+		options: {
-	// 	}
+			"Open": ({ file }) => { windowsManager.openFile(file); },
-	// });
+			"Delete": ({ file }) => { file.delete(); },
+		}
+	});
+	const { onContextMenu: onContextMenuFolder } = useContextMenu({
+		modalsManager,
+		options: {
+			"Open": ({ name }) => { changeDirectory(name); },
+			"Delete": ({ name }) => { currentDirectory.findSubFolder(name)?.delete(); }
+		}
+	});
+	const { onContextMenu: onNew } = useContextMenu({
+		modalsManager,
+		options: {
+			"File": () => { currentDirectory.createFile("New File"); },
+			"Folder": () => { currentDirectory.createFolder("New Folder"); }
+		}
+	});
+	const { onDialogBox } = useDialogBox({ modalsManager });
 
 	const changeDirectory = (path, absolute = false) => {
 		if (currentDirectory == null)
@@ -94,7 +114,25 @@ export function FileExplorer({ startPath }) {
 				<button title="Up" tabIndex={0} className={styles["Icon-button"]} onClick={() => { changeDirectory(".."); }}>
 					<FontAwesomeIcon icon={faArrowUp}/>
 				</button>
-				<button title="New" tabIndex={0} className={styles["Icon-button"]}>
+				<button title="New" tabIndex={0} className={styles["Icon-button"]}
+					onClick={(event) => {
+						onDialogBox(event, {
+							app,
+							title: "Error",
+							size: new Vector2(300, 150),
+							children: <>
+								<p>This folder is protected.</p>
+								<button data-type={DIALOG_CONTENT_TYPES.CloseButton}>Ok</button>
+							</>
+						});
+
+						// if (currentDirectory.canBeEdited) {
+						// 	onNew(event);
+						// } else {
+							
+						// }
+					}}
+				>
 					<FontAwesomeIcon icon={faPlus}/>
 				</button>
 				<input
@@ -115,38 +153,17 @@ export function FileExplorer({ startPath }) {
 			</div>
 			<div className={styles.Body}>
 				<div className={styles.Sidebar}>
-					<button
+					<QuickAccessButton name={"Home"} onClick={() => { changeDirectory("~"); }} icon={faHouse}/>
-						tabIndex={0}
+					<QuickAccessButton name={"Desktop"} onClick={() => { changeDirectory("~/Desktop"); }} icon={faDesktop}/>
-						className={`${styles["Nav-button"]} ${utilStyles["Text-semibold"]}`}
+					<QuickAccessButton name={"Documents"} onClick={() => { changeDirectory("~/Documents"); }} icon={faFileLines}/>
-						onClick={() => { changeDirectory("~"); }}>
+					<QuickAccessButton name={"Images"} onClick={() => { changeDirectory("~/Images"); }} icon={faImage}/>
-						<FontAwesomeIcon icon={faHouse}/>
-						Home
-					</button>
-					<button
-						tabIndex={0}
-						className={`${styles["Nav-button"]} ${utilStyles["Text-semibold"]}`}
-						onClick={() => { changeDirectory("~/Desktop"); }}>
-						<FontAwesomeIcon icon={faDesktop}/>
-						Desktop
-					</button>
-					<button
-						tabIndex={0}
-						className={`${styles["Nav-button"]} ${utilStyles["Text-semibold"]}`}
-						onClick={() => { changeDirectory("~/Documents"); }}>
-						<FontAwesomeIcon icon={faFileLines}/>
-						Documents
-					</button>
-					<button
-						tabIndex={0}
-						className={`${styles["Nav-button"]} ${utilStyles["Text-semibold"]}`}
-						onClick={() => { changeDirectory("~/Images"); }}>
-						<FontAwesomeIcon icon={faImage}/>
-						Images
-					</button>
 				</div>
-				<div className={styles.Main}>
+				<div id="main" className={styles.Main}>
 					{currentDirectory?.getSubFolders(showHidden)?.map(({ name }, index) => 
 						<button key={index} tabIndex={0} className={styles["Folder-button"]}
+							onContextMenu={(event) => {
+								onContextMenuFolder(event, { name });
+							}}
 							onClick={() => {
 								changeDirectory(name);
 							}}
@@ -157,6 +174,9 @@ export function FileExplorer({ startPath }) {
 					)}
 					{currentDirectory?.getFiles(showHidden)?.map((file, index) => 
 						<button key={index} tabIndex={0} className={styles["File-button"]}
+							onContextMenu={(event) => {
+								onContextMenuFile(event, { file });
+							}}
 							onClick={(event) => {
 								event.preventDefault();
 								windowsManager.openFile(file);

src/components/applications/file-explorer/QuickAccessButton.jsx

@@ -0,0 +1,16 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import styles from "./FileExplorer.module.css";
+import utilStyles from "../../../styles/utils.module.css";
+
+export function QuickAccessButton({ onClick, icon, name }) {
+	return (
+		<button
+			tabIndex={0}
+			className={`${styles["Nav-button"]} ${utilStyles["Text-semibold"]}`}
+			onClick={onClick}
+		>
+			<FontAwesomeIcon icon={icon}/>
+			{name}
+		</button>
+	);
+}

src/components/desktop/Desktop.jsx

@@ -8,6 +8,7 @@ import { ModalsView } from "../modals/ModalsView.jsx";
 import { useWindowsManager } from "../../hooks/windows/windowsManagerContext.js";
 import { useContextMenu } from "../../hooks/modals/contextMenu.js";
 import { FALLBACK_WALLPAPER } from "../../constants/desktop.js";
+import { reloadViewport } from "../../features/utils/browser.js";
 
 export const Desktop = memo(() => {
 	const settingsManager = useSettingsManager();
@@ -17,8 +18,9 @@ export const Desktop = memo(() => {
 	const { onContextMenu } = useContextMenu({
 		modalsManager,
 		options: {
+			"Refresh": () => { reloadViewport(); },
 			"Change appearance": () => { windowsManager.open("settings", { initialTabIndex: 0 }); },
-			"Open in Files": () => { windowsManager.open("file-explorer", { startPath: "~/Desktop" }); }
+			"Open in Files": () => { windowsManager.open("file-explorer", { startPath: "~/Desktop" }); },
 		}
 	});
 

src/components/modals/ModalView.jsx

@@ -2,17 +2,37 @@ import { memo } from "react";
 import { Modal as ModalType } from "../../features/modals/modal.js";
 import OutsideClickListener from "../../hooks/utils/outsideClick.js";
 import styles from "./ModalView.module.css";
+import { useEffect } from "react";
 
 /**
  * @param {object} root 
  * @param {ModalType} root.modal 
  */
 export const ModalView = memo(({ modal }) => {
-	return (
+	useEffect(() => {
-		<OutsideClickListener onOutsideClick={() => { modal.close(); }}>
+		const onDismiss = (event) => {
-			<div className={styles.Container} style={{ "--position-x": modal.position.x, "--position-y": modal.position.y }}>
+			if (event.key === "Escape" && modal.dismissible)
-				<modal.element modal={modal} {...modal.props}/>
+				modal.close();
-			</div>
+		};
-		</OutsideClickListener>
+
-	);
+		if (modal.dismissible) {
+			document.addEventListener("keydown", onDismiss);
+		}
+
+		return () => {
+			document.removeEventListener("keydown", onDismiss);
+		};
+	}, [modal]);
+
+	const container = (<div className={styles.Container} style={{ "--position-x": modal.position.x, "--position-y": modal.position.y }}>
+		<modal.element modal={modal} {...modal.props}/>
+	</div>);
+
+	if (modal.dismissible) {
+		return (<OutsideClickListener onOutsideClick={() => { modal.close(); }}>
+			{container}
+		</OutsideClickListener>);
+	} else {
+		return container;
+	}
 });

src/components/modals/ModalView.module.css

@@ -8,7 +8,7 @@
 }
 
 .Container > * {
-	background-color: var(--background-color-a);
+	background: var(--background-color-a);
 	border-radius: 0.5rem;
 	box-shadow: var(--window-box-shadow);
 }

src/components/modals/ModalsView.jsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import { memo, useEffect, useRef } from "react";
 import { Modal } from "../../features/modals/modal.js";
 import ModalsManager from "../../features/modals/modals.js";
 import { ModalView } from "./ModalView.jsx";
@@ -12,8 +12,15 @@ import styles from "./ModalsView.module.css";
  * @param {import("react").className} root.className 
  */
 export const ModalsView = memo(({ modalsManager, modals, style, className }) => {
+	const ref = useRef(null);
+
+	useEffect(() => {
+		if (modalsManager)
+			modalsManager.containerRef = ref;
+	}, [modalsManager, ref]);
+
 	return (
-		<div style={style} className={`${styles.Container} ${className}`}>
+		<div ref={ref} style={style} className={`${styles.Container} ${className}`}>
 			{modals?.map((modal) =>
 				<ModalView key={modal.id} modal={modal}/>
 			)}

src/components/modals/ModalsView.module.css

@@ -1,3 +1,4 @@
 .Container {
 	position: relative;
+	z-index: 9;
 }

src/components/modals/context-menu/ContextMenu.jsx

@@ -13,7 +13,7 @@ export function ContextMenu({ modal, options, shortcuts }) {
 		{Object.entries(options).map(([label, callback]) =>
 			<button className={styles.Button} key={label} tabIndex={0} onClick={() => {
 				modal.close();
-				callback();
+				callback(modal.props?.params);
 			}}>
 				<p className={styles.Label}>{label}</p>
 				{shortcuts && Object.keys(shortcuts).includes(label)

src/components/modals/context-menu/ContextMenu.module.css

@@ -1,7 +1,7 @@
 .Container {
 	padding: 0.5rem;
-	border-top-left-radius: 0;
+	border-top-left-radius: 0 !important;
-	background-color: var(--background-color-b);
+	background-color: var(--background-color-b) !important;
 }
 
 .Button {

src/components/modals/dialog-box/DialogBox.jsx

@@ -0,0 +1,103 @@
+import { useEffect, useRef, useState } from "react";
+import styles from "./DialogBox.module.css";
+import Draggable from "react-draggable";
+import Vector2 from "../../../features/math/vector2.js";
+import { ReactSVG } from "react-svg";
+import utilStyles from "../../../styles/utils.module.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+
+export const DIALOG_CONTENT_TYPES = {
+	CloseButton: 0
+};
+
+export function DialogBox({ modal, params }) {
+	const { app, title, children } = params;
+
+	const nodeRef = useRef(null);
+
+	const [initialised, setInitialised] = useState(false);
+	const [startPosition, setStartPosition] = useState(modal.position);
+
+	const [screenWidth, setScreenWidth] = useState(100);
+	const [screenHeight, setScreenHeight] = useState(100);
+
+	useEffect(() => {
+		const resizeObserver = new ResizeObserver((event) => {
+			setScreenWidth(event[0].contentBoxSize[0].inlineSize);
+			setScreenHeight(event[0].contentBoxSize[0].blockSize);
+			setInitialised(true);
+		});
+
+		resizeObserver.observe(document.getElementById("root"));
+	}, []);
+
+	useEffect(() => {
+		if (!initialised)
+			return;
+
+		if (modal.size.x > screenWidth || modal.size.y > screenHeight) {
+			setStartPosition(new Vector2(0, 0));
+		} else {
+			if (modal.position.x > screenWidth) {
+				modal.position.x = 0;
+				setStartPosition(modal.position);
+			}
+			if (modal.position.y > screenHeight) {
+				modal.position.y = 0;
+				setStartPosition(modal.position);
+			}
+		}
+	}, [initialised, modal, screenHeight, screenWidth]);
+
+	const onClick = (event) => {
+		event.preventDefault();
+		const type = parseInt(event.target.getAttribute("data-type"));
+
+		switch (type) {
+			case DIALOG_CONTENT_TYPES.CloseButton:
+				modal.close();
+				break;
+		}
+	};
+
+	return (<Draggable
+		axis="both"
+		handle={".Dialog-handle"}
+		defaultPosition={startPosition}
+		position={null}
+		scale={1}
+		bounds={{
+			top: 0,
+			bottom: screenHeight - 55,
+			left: -modal.size.x + 85,
+			right: screenWidth - 5
+		}}
+		cancel="button"
+		nodeRef={nodeRef}
+	>
+		<div
+			className={styles.Container}
+			ref={nodeRef}
+			style={{
+				width: modal.size.x,
+				height: modal.size.y,
+			}}
+		>
+			<div className={`${styles.Header} Dialog-handle`}>
+				<ReactSVG
+					className={styles["Dialog-icon"]}
+					src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`}
+				/>
+				<p className={utilStyles["Text-semibold"]}>{title}</p>
+				<button aria-label="Close" className={`${styles["Header-button"]} ${styles["Exit-button"]}`} tabIndex={0} id="close-dialog"
+					onClick={() => { modal.close(); }}>
+					<FontAwesomeIcon icon={faXmark}/>
+				</button>
+			</div>
+			<div className={styles["Dialog-content"]} onClick={onClick}>
+				{children}
+			</div>
+		</div>
+	</Draggable>);
+}

src/components/modals/dialog-box/DialogBox.module.css

@@ -0,0 +1,111 @@
+.Container {
+	--header-height: 2.5rem;
+	--header-button-hover-color: rgba(255, 255, 255, 5%);
+
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	min-width: 300px;
+	min-height: 150px;
+	background-color: var(--background-color-c);
+	border-radius: 0.5rem;
+	box-shadow: var(--window-box-shadow);
+	resize: both;
+	overflow: hidden;
+}
+
+.Header {
+	--dialog-icon-size: 1.5rem;
+	--dialog-icon-margin: 0.75rem;
+
+	display: flex;
+	align-items: center;
+	height: var(--header-height);
+	padding: 0.25rem;
+	padding-left: var(--dialog-icon-margin);
+	padding-right: 0;
+	background-color: var(--background-color-b);
+	cursor: grab;
+}
+
+.Dialog-icon,
+.Dialog-icon > div,
+.Dialog-icon > div > svg {
+	height: 100%;
+	width: auto;
+}
+
+.Dialog-icon {
+	height: var(--dialog-icon-size);
+	margin-right: calc(var(--dialog-icon-margin) - 0.1rem);
+}
+
+.Dialog-icon > div {
+	display: flex;
+	align-items: center;
+}
+
+.Header > p {
+	user-select: none;
+	width: auto;
+	margin: 0;
+	margin-right: auto;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.Header-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: var(--header-height);
+	margin: 0;
+	padding: 0.75rem;
+	color: var(--foreground-color-a);
+	background: none;
+	cursor: pointer;
+	border: none;
+	outline: none;
+	aspect-ratio: 1;
+}
+
+.Header-button > svg {
+	height: 100%;
+}
+
+.Exit-button {
+	--header-button-hover-color: var(--red-b);
+}
+
+.Header-button:hover, .Header-button:focus-visible {
+	background-color: var(--header-button-hover-color);
+}
+
+.Dialog-content {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+.Dialog-content button {
+	margin-bottom: 0.75rem;
+	padding: 0.5rem 1rem;
+	width: fit-content;
+	color: var(--foreground-color-a);
+	background-color: var(--background-color-a);
+	border: none;
+	border-radius: 0.5rem;
+	outline: none;
+	transition: background-color 100ms ease-in-out;
+	cursor: pointer;
+}
+
+.Dialog-content button:hover, .Dialog-content button:focus-visible {
+	background-color: var(--background-color-b);
+}

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

@@ -5,7 +5,7 @@ import { faCircleInfo, faFileLines, faGear, faImage, faPowerOff } from "@fortawe
 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 { closeViewport } from "../../../features/utils/browser.js";
 import { useKeyboardListener } from "../../../hooks/utils/keyboard.js";
 import { useVirtualRoot } from "../../../hooks/virtual-drive/virtualRootContext.js";
 import { useEffect, useState } from "react";
@@ -61,7 +61,7 @@ export function HomeMenu({ active, setActive, search }) {
 		<div className={classNames.join(" ")}>
 			<div className={styles["Container-inner"]}>
 				<div className={styles.Buttons}>
-					<button title="Shut Down" tabIndex={tabIndex} onClick={() => { closeTab(); }}>
+					<button title="Shut Down" tabIndex={tabIndex} onClick={() => { closeViewport(); }}>
 						<FontAwesomeIcon icon={faPowerOff}/>
 					</button>
 					<button title="Settings" tabIndex={tabIndex} onClick={() => {

src/components/windows/WindowView.jsx

@@ -110,7 +110,7 @@ export const WindowView = memo(({ id, app, size, position, onInteract, options,
 		<Draggable
 			key={id}
 			axis="both"
-			handle={".Handle"}
+			handle={".Window-handle"}
 			defaultPosition={startPosition}
 			position={null}
 			scale={1}
@@ -134,7 +134,7 @@ export const WindowView = memo(({ id, app, size, position, onInteract, options,
 				}}
 				onClick={focus}
 			>
-				<div className={`${styles.Header} Handle`} onContextMenu={onContextMenu}>
+				<div className={`${styles.Header} Window-handle`} onContextMenu={onContextMenu}>
 					<ReactSVG
 						className={styles["Window-icon"]}
 						src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`}

src/components/windows/WindowView.module.css

@@ -1,9 +1,7 @@
-:root {
+.Window-container {
 	--header-height: 2.5rem;
 	--header-button-hover-color: rgba(255, 255, 255, 5%);
-}
 
-.Window-container {
 	position: absolute;
 	display: flex;
 	flex-direction: column;

src/features/modals/modal.js

@@ -21,7 +21,7 @@ export default class Modal {
 	/** @type {number | null} */
 	id = null;
 	/** @type {boolean} */
-	closeOnOutsideClick = true;
+	dismissible = true;
 
 	/**
 	 * @param {import("react").ReactElement} element
@@ -60,6 +60,15 @@ export default class Modal {
 		return this;
 	}
 
+	/**
+	 * @param {Vector2} size 
+	 * @returns {Modal}
+	 */
+	setSize(size) {
+		this.size = size;
+		return this;
+	}
+
 	/**
 	 * @param {object} props 
 	 * @returns {Modal}
@@ -70,11 +79,11 @@ export default class Modal {
 	}
 
 	/**
-	 * @param {boolean} closeOnOutsideClick 
+	 * @param {boolean} dismissible 
 	 * @returns {Modal}
 	 */
-	setCloseOnOutsideClick(closeOnOutsideClick) {
+	setDismissible(dismissible) {
-		this.closeOnOutsideClick = closeOnOutsideClick;
+		this.dismissible = dismissible;
 		return this;
 	}
 

src/features/utils/browser.js

@@ -1,5 +1,17 @@
-export function closeTab() {
+/**
-	if (window.confirm("Are you sure you want to shut down ProzillaOS?")) {
+ * Simulates closing the viewport by opening a blank page
+ * @param {boolean} requireConfirmation
+ */
+export function closeViewport(requireConfirmation = false) {
+	if (requireConfirmation && window.confirm("Are you sure you want to shut down ProzillaOS?")) {
 		window.open("about:blank", "_self");
 	}
 }
+
+/**
+ * Reloads the viewport
+ * @param {boolean} bypassCache 
+ */
+export function reloadViewport(bypassCache = false) {
+	window.location.reload(bypassCache);
+}

src/features/virtual-drive/virtualBase.js

@@ -73,6 +73,8 @@ export class VirtualBase extends EventEmitter {
 		if (!this.canBeEdited)
 			return;
 
+		console.log(this);
+
 		const parent = this.parent;
 
 		if (parent == null)
@@ -85,13 +87,13 @@ export class VirtualBase extends EventEmitter {
 	/**
 	 * @param {VirtualRoot} [root] 
 	 */
-	confirmChanges(root = null) {
+	confirmChanges(root) {
-		if (this.getRoot().loadedDefaultData)
-			this.editedByUser = true;
-
 		if (root == null)
 			root = this.getRoot();
 
+		if (root?.loadedDefaultData)
+			this.editedByUser = true;
+
 		root?.saveData();
 	}
 

src/features/virtual-drive/virtualFolder.js

@@ -316,8 +316,8 @@ export class VirtualFolder extends VirtualBase {
 				object.fds = folders;
 		}
 
-		// Don't store folder if it's empty
+		// Don't store folder if it's empty and untouched
-		if ((!object.fls || object.fls.length === 0) && (!object.fds || object.fds.length === 0))
+		if (!this.editedByUser && (!object.fls || object.fls.length === 0) && (!object.fds || object.fds.length === 0))
 			return null;
 
 		return object;

src/features/windows/windowsManager.js

@@ -57,7 +57,9 @@ export default class WindowsManager {
 	 * @returns {object}
 	 */
 	openFile(file) {
+		console.log(file);
 		const app = ApplicationsManager.getFileApplication(file.extension);
+		console.log(app);
 		if (app != null)
 			return this.open(app.id, { file });
 	}

src/hooks/modals/ContextMenu.js

@@ -1,22 +1,43 @@
+import { useCallback } from "react";
 import { ContextMenu } from "../../components/modals/context-menu/ContextMenu.jsx";
 import Vector2 from "../../features/math/vector2.js";
 import Modal from "../../features/modals/modal.js";
 import ModalsManager from "../../features/modals/modals.js";
 import { useShortcuts } from "../utils/keyboard.js";
 
+/**
+ * @typedef {Function} onContextMenuType
+ * @param {object} event
+ * @param {object} params
+ * @returns {Modal}
+ */
+
 /**
  * @param {object} props 
  * @param {ModalsManager} props.modalsManager
  * @param {Object<string, Object<string, Function>>} props.options
  * @param {Object<string, Object<string, string[]>>} props.shortcuts
- * @returns {{ onContextMenu: Function }}
+ * @returns {{ onContextMenu: onContextMenuType }}
  */
 export function useContextMenu({ modalsManager, options, shortcuts }) {
-	const onContextMenu = (event) => {
+	// Open a new modal when context menu is triggered
-		modalsManager.open(new Modal(ContextMenu)
+	const onContextMenu = useCallback((event, params = {}) => {
-			.setPosition(new Vector2(event?.clientX ?? 0, event?.clientY ?? 0))
+		let positionX = (event?.clientX ?? 0);
-			.setProps({ options, shortcuts }));
+		let positionY = (event?.clientY ?? 0);
-	};
+
+		if (modalsManager.containerRef?.current) {
+			const containerRect = modalsManager.containerRef.current.getBoundingClientRect();
+			positionX -= containerRect.x;
+			positionY -= containerRect.y / 2;
+		}
+
+		const newModal = new Modal(ContextMenu)
+			.setPosition(new Vector2(positionX, positionY))
+			.setProps({ options, shortcuts, params });
+
+		modalsManager.open(newModal);
+		return newModal;
+	}, [modalsManager, options, shortcuts]);
 
 	useShortcuts({ options, shortcuts, useCategories: false });
 

src/hooks/modals/dialogBox.js

@@ -0,0 +1,31 @@
+import { useCallback } from "react";
+import Modal from "../../features/modals/modal.js";
+import { DialogBox } from "../../components/modals/dialog-box/DialogBox.jsx";
+import Vector2 from "../../features/math/vector2.js";
+
+const DEFAULT_SIZE = new Vector2(400, 200);
+
+export function useDialogBox({ modalsManager }) {
+	const onDialogBox = useCallback((event, params = {}) => {
+		const size = params.size ?? DEFAULT_SIZE;
+		let positionX = (window.innerWidth - size.x) / 4;
+		let positionY = (window.innerHeight - size.y) / 4;
+
+		if (modalsManager.containerRef?.current) {
+			const containerRect = modalsManager.containerRef.current.getBoundingClientRect();
+			positionX -= containerRect.x / 2;
+			positionY -= containerRect.y / 2;
+		}
+
+		const newModal = new Modal(DialogBox)
+			.setPosition(new Vector2(positionX, positionY))
+			.setSize(size)
+			.setDismissible(false)
+			.setProps({ params });
+
+		modalsManager.open(newModal);
+		return newModal;
+	}, [modalsManager]);
+
+	return { onDialogBox };
+}