Added context menu modal

src/components/applications/settings/Settings.jsx

@@ -108,8 +108,11 @@ function AboutTab({ windowsManager, virtualRoot }) {
 	</>);
 }
 
-export function Settings() {
-	const [tabIndex, setTabIndex] = useState(0);
+/**
+ * @param {number} param0 
+ */
+export function Settings({ initialTabIndex }) {
+	const [tabIndex, setTabIndex] = useState(initialTabIndex ?? 0);
 	const virtualRoot = useVirtualRoot();
 	const settingsManager = useSettings();
 	const windowsManager = useWindowsManager();

src/components/desktop/Desktop.jsx

@@ -8,11 +8,13 @@ import { ModalsView } from "../modals/ModalsView.jsx";
 import Vector2 from "../../features/math/vector2.js";
 import { ContextMenu } from "../modals/context-menu/ContextMenu.jsx";
 import Modal from "../../features/modals/modal.js";
+import { useWindowsManager } from "../../hooks/windows/WindowsManagerContext.js";
 
 export function Desktop() {
 	const settingsManager = useSettings();
 	const [wallpaper, setWallpaper] = useState(null);
 	const [modalsManager, modals] = useModals();
+	const windowsManager = useWindowsManager();
 
 	useEffect(() => {
 		(async () => {
@@ -23,7 +25,14 @@ export function Desktop() {
 
 	const onContextMenu = (event) => {
 		event.preventDefault();
-		modalsManager.open(new Modal(ContextMenu).setPosition(new Vector2(event.clientX, event.clientY)));
+		modalsManager.open(new Modal(ContextMenu)
+			.setPosition(new Vector2(event.clientX, event.clientY))
+			.setProps({
+				options: {
+					"Change appearance": () => { windowsManager.open("settings", { initialTabIndex: 0 }); },
+					"Open in Files": () => { windowsManager.open("file-explorer", { startPath: "~/Desktop" }); }
+				}
+			}));
 	};
 
 	return (<>

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

@@ -1,5 +1,26 @@
+import Modal from "../../../features/modals/modal.js";
+import { formatShortcut } from "../../../features/utils/string.js";
 import styles from "./ContextMenu.module.css";
 
-export function ContextMenu() {
-	return <p className={styles.Container} onContextMenu={(event) => { event.preventDefault(); }}>This is a context menu!</p>;
+/**
+ * @param {object} props 
+ * @param {Modal} props.modal 
+ * @param {Object<string, Function>} props.options 
+ * @param {Object<string, string[]>} props.shortcuts 
+ */
+export function ContextMenu({ modal, options, shortcuts }) {
+	return (<div className={styles.Container}>
+		{Object.entries(options).map(([label, callback]) =>
+			<button title={label} className={styles.Button} key={label} tabIndex={0} onClick={() => {
+				modal.close();
+				callback();
+			}}>
+				<p className={styles.Label}>{label}</p>
+				{shortcuts && Object.keys(shortcuts).includes(label)
+					? <p className={styles.Shortcut}>{formatShortcut(shortcuts[label])}</p>
+					: null
+				}
+			</button>
+		)}
+	</div>);
 }

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

@@ -1,5 +1,32 @@
 .Container {
-	margin: 0;
 	padding: 0.5rem;
 	border-top-left-radius: 0;
+}
+
+.Button {
+	display: flex;
+	gap: 0.75rem;
+	justify-content: space-between;
+	width: 100%;
+	padding: 0.25rem 0.5rem;
+	background: none;
+	border: none;
+	border-radius: 0.5rem;
+	outline: none;
+	font-size: 0.875rem;
+	text-align: start;
+	white-space: nowrap;
+	cursor: pointer;
+}
+
+.Button:hover, .Button:focus-visible {
+	background-color: rgba(255, 255, 255, 5%);
+}
+
+.Label {
+	margin: 0;
+}
+
+.Shortcut {
+	color: var(--foreground-color-b);
 }

src/features/modals/modals.js

@@ -46,7 +46,7 @@ export default class ModalsManager {
 			return;
 		}
 
-		console.log(`Closing window ${modalId}`);
+		console.log(`Closing modal ${modalId}`);
 		delete this.modals[modalId];
 
 		if (sendModalsUpdate)