Added support for app icons inside a ClickAction

src/components/actions/actions/ClickAction.jsx

@@ -1,11 +1,17 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { formatShortcut } from "../../../features/utils/string.js";
 import styles from "../Actions.module.css";
+import { ImagePreview } from "../../applications/file-explorer/directory-list/ImagePreview.jsx";
 
 export function ClickAction({ actionId, label, shortcut, onTrigger, icon }) {
 	return (<button key={actionId} className={styles.Button} tabIndex={0} onClick={onTrigger}>
 		<span className={styles.Label}>
-			{icon && <div className={styles.Icon}><FontAwesomeIcon icon={icon}/></div>}
+			{icon && <div className={styles.Icon}>
+				{typeof icon == "string"
+					? <ImagePreview source={icon} className={styles["Image-icon"]}/>
+					: <FontAwesomeIcon icon={icon}/>
+				}
+			</div>}
 			<p>{label}</p>
 		</span>
 		{shortcut && <p className={styles.Shortcut}>{formatShortcut(shortcut)}</p>}

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

@@ -15,10 +15,11 @@ import { ClickAction } from "../../actions/actions/ClickAction.jsx";
 import utilStyles from "../../../styles/utils.module.css";
 import { DialogBox } from "../../modals/dialog-box/DialogBox.jsx";
 import AppsManager from "../../../features/applications/applications.js";
-import { APPS } from "../../../constants/applications.js";
+import { APPS, APP_ICONS, APP_NAMES } from "../../../constants/applications.js";
 import { TITLE_SEPARATOR } from "../../../constants/windows.js";
 import { FileProperties } from "../../modals/file-properties/FileProperties.jsx";
 import { useHistory } from "../../../hooks/utils/history.js";
+import { Divider } from "../../actions/actions/Divider.jsx";
 
 /**
  * @param {import("../../windows/WindowView.jsx").windowProps} props 
@@ -54,8 +55,12 @@ export function FileExplorer({ startPath, app, modalsManager }) {
 	const { onContextMenu: onContextMenuFolder } = useContextMenu({ modalsManager, Actions: (props) =>
 		<Actions {...props}>
 			<ClickAction label="Open" onTrigger={(event, folder) => {
-				changeDirectory(folder.name);
+				folder.open(windowsManager);
 			}}/>
+			<ClickAction label={`Open in ${APP_NAMES.TERMINAL}`} icon={APP_ICONS.TERMINAL} onTrigger={(event, folder) => {
+				windowsManager.open(APPS.TERMINAL, { startPath: folder.path });
+			}}/>
+			<Divider/>
 			<ClickAction label="Delete" icon={faTrash} onTrigger={(event, folder) => {
 				folder.delete();
 			}}/>

src/components/desktop/Desktop.jsx

@@ -11,11 +11,11 @@ import { FALLBACK_ICON_SIZE, FALLBACK_WALLPAPER } from "../../constants/desktop.
 import { reloadViewport } from "../../features/utils/browser.js";
 import { useVirtualRoot } from "../../hooks/virtual-drive/virtualRootContext.js";
 import { DirectoryList } from "../applications/file-explorer/directory-list/DirectoryList.jsx";
-import { APPS, APP_NAMES } from "../../constants/applications.js";
+import { APPS, APP_ICONS, APP_NAMES } from "../../constants/applications.js";
 import Vector2 from "../../features/math/vector2.js";
 import { Actions } from "../actions/Actions.jsx";
 import { ClickAction } from "../actions/actions/ClickAction.jsx";
-import { faArrowsRotate, faEye, faFolder, faPaintBrush, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faArrowsRotate, faEye, faFolder, faPaintBrush, faTerminal, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { ToggleAction } from "../actions/actions/ToggleAction.jsx";
 import { DropdownAction } from "../actions/actions/DropdownAction.jsx";
 import { RadioAction } from "../actions/actions/RadioAction.jsx";
@@ -31,6 +31,8 @@ export const Desktop = memo(() => {
 	const [showIcons, setShowIcons] = useState(false);
 	const [iconSize, setIconSize] = useState(FALLBACK_ICON_SIZE);
 
+	const directory = virtualRoot.navigate("~/Desktop");
+
 	const { onContextMenu, ShortcutsListener } = useContextMenu({ modalsManager, Actions: (props) =>
 		<Actions {...props}>
 			<DropdownAction label="View" icon={faEye}>
@@ -54,8 +56,12 @@ export const Desktop = memo(() => {
 			<ClickAction label="Change appearance" icon={faPaintBrush} onTrigger={() => {
 				windowsManager.open("settings", { initialTabIndex: 0 });
 			}}/>
-			<ClickAction label={`Open in ${APP_NAMES.FILE_EXPLORER}`} icon={faFolder} onTrigger={() => {
+			<Divider/>
-				windowsManager.open(APPS.FILE_EXPLORER, { startPath: "~/Desktop" });
+			<ClickAction label={`Open in ${APP_NAMES.FILE_EXPLORER}`} icon={APP_ICONS.FILE_EXPLORER} onTrigger={() => {
+				windowsManager.open(APPS.FILE_EXPLORER, { startPath: directory.path });
+			}}/>
+			<ClickAction label={`Open in ${APP_NAMES.TERMINAL}`} icon={APP_ICONS.TERMINAL} onTrigger={() => {
+				windowsManager.open(APPS.TERMINAL, { startPath: directory.path });
 			}}/>
 		</Actions>
 	});
@@ -77,9 +83,13 @@ export const Desktop = memo(() => {
 			<ClickAction label="Open" onTrigger={(event, folder) => {
 				folder.open(windowsManager);
 			}}/>
+			<ClickAction label={`Open in ${APP_NAMES.TERMINAL}`} icon={faTerminal} onTrigger={(event, folder) => {
+				windowsManager.open(APPS.TERMINAL, { startPath: folder.path });
+			}}/>
 			<ClickAction label={`Reveal in ${APP_NAMES.FILE_EXPLORER}`} icon={faFolder} onTrigger={(event, folder) => {
 				folder.parent.open(windowsManager);
 			}}/>
+			<Divider/>
 			<ClickAction label="Delete" icon={faTrash} onTrigger={(event, folder) => {
 				folder.delete();
 			}}/>
@@ -104,8 +114,6 @@ export const Desktop = memo(() => {
 		})();
 	}, [settingsManager]);
 
-	const directory = virtualRoot.navigate("~/Desktop");
-
 	const onError = () => {
 		const settings = settingsManager.get(SettingsManager.VIRTUAL_PATHS.desktop);
 		settings.set("wallpaper", FALLBACK_WALLPAPER);

src/components/modals/file-properties/FileProperties.jsx

@@ -23,11 +23,11 @@ export function FileProperties({ modal, params, file, ...props }) {
 		</span>
 		<span className={styles["Section"]}>
 			<p className={styles["Line"]}>Type: {file.getType()}</p>
-			<p className={styles["Line"]}>
+			<span className={styles["Line"]}>
 				Opens with: 
 				<ImagePreview className={styles["App-icon"]} source={AppsManager.getAppIconUrl(associatedApp.id)}/>
 				{associatedApp.name}
-			</p>
+			</span>
 		</span>
 		<span className={styles["Section"]}>
 			<p className={styles["Line"]}>Location: {file.path}</p>

src/constants/applications.js

@@ -12,4 +12,12 @@ export const APP_NAMES = {
 	MEDIA_VIEWER: "Photos",
 	TEXT_EDITOR: "Notes",
 	FILE_EXPLORER: "Files"
+};
+
+export const APP_ICONS = {
+	TERMINAL: `${process.env.PUBLIC_URL}/assets/applications/icons/${APPS.TERMINAL}.svg`,
+	SETTINGS: `${process.env.PUBLIC_URL}/assets/applications/icons/${APPS.SETTINGS}.svg`,
+	MEDIA_VIEWER: `${process.env.PUBLIC_URL}/assets/applications/icons/${APPS.MEDIA_VIEWER}.svg`,
+	TEXT_EDITOR: `${process.env.PUBLIC_URL}/assets/applications/icons/${APPS.TEXT_EDITOR}.svg`,
+	FILE_EXPLORER: `${process.env.PUBLIC_URL}/assets/applications/icons/${APPS.FILE_EXPLORER}.svg`,
 };