diff --git a/docs/features/README.md b/docs/features/README.md index 93eb612..995d978 100644 --- a/docs/features/README.md +++ b/docs/features/README.md @@ -11,7 +11,7 @@ To see the status and to-do's of each feature, check the [task board](https://pr ## Table of Contents - [Actions](storage/README.md) -- [Applications](applications/README.md) +- [Apps](apps/README.md) - [Modals](modals/README.md) - [Settings](settings/README.md) - [Storage](storage/README.md) diff --git a/docs/features/applications/README.md b/docs/features/applications/README.md deleted file mode 100644 index 66d80cb..0000000 --- a/docs/features/applications/README.md +++ /dev/null @@ -1,104 +0,0 @@ -[← Back](../README.md) - -# Applications - -> Related document: [Windows](../windows/README.md) - -Applications (sometimes shortened to apps) are processes that open a window when ran. The window allows the user to view and interact with the app. Apps have a `title`, `id` and a `windowContent` property that refers to the React component of the application interface. - -> Some applications have a different name in the UI, these names are written between brackets and quotation marks. The other name is the one used in code and file/folder names. - -## Table of Contents - -- [ Terminal ("Commands")](terminal/README.md) -- [ File Explorer ("Files")](file-explorer/README.md) -- [ Media Viewer ("Photos")](media-viewer/README.md) -- [ Text Editor ("Notes")](text-editor/README.md) -- [ Settings](settings/README.md) - -## Common components - -### Header menu - -The header menu is a useful component that can be added to app windows for quick access to useful functions, like saving and opening files. The header menu can also be used to add shortcuts for functions. - -#### Example - -```js -// components/applications/.common/HeaderMenu.jsx - - { - // ... - }, - "Save": () => { - // ... - }, - "Exit": () => { - // ... - }, - }, - }} - shortcuts={{ - "File": { - "New": ["Control", "e"], - "Save": ["Control", "s"], - "Exit": ["Control", "x"], - }, - }} -/> -``` - -## App templates - -### Webview - -The webview template can be used to turn a webpage into an application by simply setting a source property. - -#### Example - -```js -// features/applications/applications.js - -import { WebView } from "../../components/applications/templates/WebView.jsx"; - -export default class ApplicationsManager { - static APPLICATIONS = [ - // ... - new Application("Web App", "web-app", WebView, { source: "https://prozilla.dev/" }), - ] - - // ... -} -``` - -## App examples - -### Adding a new application - -```js -// components/applications/example/Example.jsx - -export function Example() { - return ( -

Application interface goes here.

- ) -} -``` - -```js -// features/applications/applications.js - -import { Example } from "../../components/applications/example/Example.jsx"; - -export default class ApplicationsManager { - static APPLICATIONS = [ - // ... - new Application("Example App", "example", Example), - ] - - // ... -} -``` \ No newline at end of file diff --git a/docs/features/applications/media-viewer/README.md b/docs/features/applications/media-viewer/README.md deleted file mode 100644 index 704d0e0..0000000 --- a/docs/features/applications/media-viewer/README.md +++ /dev/null @@ -1,9 +0,0 @@ -[← Back](../README.md) - -# Media Viewer ("Photos") - -An application for viewing media like images and videos. - -## Screenshot - -![Media Viewer window showing Prozilla OS.png](screenshot.png) \ No newline at end of file diff --git a/docs/features/applications/text-editor/README.md b/docs/features/applications/text-editor/README.md deleted file mode 100644 index c6147be..0000000 --- a/docs/features/applications/text-editor/README.md +++ /dev/null @@ -1,9 +0,0 @@ -[← Back](../README.md) - -# Text Editor ("Notes") - -An application for editing text documents. - -## Screenshot - -![Text Editor window displaying info.md in preview mode](screenshot.png) \ No newline at end of file diff --git a/docs/features/apps/README.md b/docs/features/apps/README.md new file mode 100644 index 0000000..a70129a --- /dev/null +++ b/docs/features/apps/README.md @@ -0,0 +1,104 @@ +[← Back](../README.md) + +# Apps + +> Related document: [Windows](../windows/README.md) + +Applications (often shortened to apps) are processes that open a window when ran. The window allows the user to view and interact with the app. Apps have a `title`, `id` and a `windowContent` property that refers to the React component of the application interface. + +> Some apps have a different name in the UI, these names are written between brackets and quotation marks. The other name is the one used in code and file/folder names. + +## Table of Contents + +- [ Terminal ("Commands")](terminal/README.md) +- [ File Explorer ("Files")](file-explorer/README.md) +- [ Media Viewer ("Photos")](media-viewer/README.md) +- [ Text Editor ("Notes")](text-editor/README.md) +- [ Settings](settings/README.md) + +## Common components + +### Header menu + +The header menu is a useful component that can be added to app windows for quick access to useful functions, like saving and opening files. The header menu can also be used to add shortcuts for functions. + +#### Example + +```js +// components/apps/_common/HeaderMenu.jsx + + { + // ... + }, + "Save": () => { + // ... + }, + "Exit": () => { + // ... + }, + }, + }} + shortcuts={{ + "File": { + "New": ["Control", "e"], + "Save": ["Control", "s"], + "Exit": ["Control", "x"], + }, + }} +/> +``` + +## App templates + +### Webview + +The webview template can be used to turn a webpage into an application by simply setting a source property. + +#### Example + +```js +// features/apps/apps.js + +import { WebView } from "../../components/apps/templates/WebView.jsx"; + +export default class AppsManager { + static APPLICATIONS = [ + // ... + new App("Web App", "web-app", WebView, { source: "https://prozilla.dev/" }), + ] + + // ... +} +``` + +## App examples + +### Adding a new app + +```js +// components/apps/example/Example.jsx + +export function Example() { + return ( +

Application interface goes here.

+ ) +} +``` + +```js +// features/apps/apps.js + +import { Example } from "../../components/apps/example/Example.jsx"; + +export default class AppsManager { + static APPLICATIONS = [ + // ... + new App("Example App", "example", Example), + ] + + // ... +} +``` \ No newline at end of file diff --git a/docs/features/applications/file-explorer/README.md b/docs/features/apps/file-explorer/README.md similarity index 51% rename from docs/features/applications/file-explorer/README.md rename to docs/features/apps/file-explorer/README.md index 9a89500..c36a416 100644 --- a/docs/features/applications/file-explorer/README.md +++ b/docs/features/apps/file-explorer/README.md @@ -1,6 +1,6 @@ [← Back](../README.md) -# File Explorer ("Files") +# File Explorer ("Files") A tool for exploring and managing files and folders with a user interface. diff --git a/docs/features/applications/file-explorer/screenshot.png b/docs/features/apps/file-explorer/screenshot.png similarity index 100% rename from docs/features/applications/file-explorer/screenshot.png rename to docs/features/apps/file-explorer/screenshot.png diff --git a/docs/features/apps/media-viewer/README.md b/docs/features/apps/media-viewer/README.md new file mode 100644 index 0000000..48e9e61 --- /dev/null +++ b/docs/features/apps/media-viewer/README.md @@ -0,0 +1,9 @@ +[← Back](../README.md) + +# Media Viewer ("Photos") + +An app for viewing media like images and videos. + +## Screenshot + +![Media Viewer window showing Prozilla OS.png](screenshot.png) \ No newline at end of file diff --git a/docs/features/applications/media-viewer/screenshot.png b/docs/features/apps/media-viewer/screenshot.png similarity index 100% rename from docs/features/applications/media-viewer/screenshot.png rename to docs/features/apps/media-viewer/screenshot.png diff --git a/docs/features/applications/settings/README.md b/docs/features/apps/settings/README.md similarity index 57% rename from docs/features/applications/settings/README.md rename to docs/features/apps/settings/README.md index 93894fb..326c91b 100644 --- a/docs/features/applications/settings/README.md +++ b/docs/features/apps/settings/README.md @@ -1,6 +1,6 @@ [← Back](../README.md) -# Settings +# Settings Allows the user to change their settings and personalize their instance of Prozilla OS. diff --git a/docs/features/applications/settings/screenshot.png b/docs/features/apps/settings/screenshot.png similarity index 100% rename from docs/features/applications/settings/screenshot.png rename to docs/features/apps/settings/screenshot.png diff --git a/docs/features/applications/terminal/README.md b/docs/features/apps/terminal/README.md similarity index 68% rename from docs/features/applications/terminal/README.md rename to docs/features/apps/terminal/README.md index f77a86d..ee218ec 100644 --- a/docs/features/applications/terminal/README.md +++ b/docs/features/apps/terminal/README.md @@ -1,6 +1,6 @@ [← Back](../README.md) -# Terminal ("Commands") +# Terminal ("Commands") A command line tool. @@ -10,14 +10,14 @@ A command line tool. ## Commands -See [features/applications/terminal/commands.js](../../../../src/features/applications/terminal/commands.js) for a list of commands. You can edit this file to add/remove/edit commands. +See [features/apps/terminal/commands.js](../../../../src/features/apps/terminal/commands.js) for a list of commands. You can edit this file to add/remove/edit commands. ## Examples ### Touch command ```js -// features/applications/terminal/commands/touch.js +// features/apps/terminal/commands/touch.js export const touch = new Command("touch") .setRequireArgs(true) diff --git a/docs/features/applications/terminal/screenshot.png b/docs/features/apps/terminal/screenshot.png similarity index 100% rename from docs/features/applications/terminal/screenshot.png rename to docs/features/apps/terminal/screenshot.png diff --git a/docs/features/apps/text-editor/README.md b/docs/features/apps/text-editor/README.md new file mode 100644 index 0000000..217f598 --- /dev/null +++ b/docs/features/apps/text-editor/README.md @@ -0,0 +1,9 @@ +[← Back](../README.md) + +# Text Editor ("Notes") + +An app for editing text documents. + +## Screenshot + +![Text Editor window displaying info.md in preview mode](screenshot.png) \ No newline at end of file diff --git a/docs/features/applications/text-editor/screenshot.png b/docs/features/apps/text-editor/screenshot.png similarity index 100% rename from docs/features/applications/text-editor/screenshot.png rename to docs/features/apps/text-editor/screenshot.png diff --git a/docs/features/virtual-drive/README.md b/docs/features/virtual-drive/README.md index bc1af52..34330f1 100644 --- a/docs/features/virtual-drive/README.md +++ b/docs/features/virtual-drive/README.md @@ -11,7 +11,7 @@ The virtual drive is a virtual file and directory system. The root directory is ### Component interacting with virtual drive ```js -// components/applications/example/Example.jsx +// components/apps/example/Example.jsx export function Example() { const virtualRoot = useVirtualRoot(); diff --git a/docs/features/windows/README.md b/docs/features/windows/README.md index 2f8eb06..9db0e87 100644 --- a/docs/features/windows/README.md +++ b/docs/features/windows/README.md @@ -2,6 +2,6 @@ # Windows -> Related document: [Applications](../applications/README.md) +> Related document: [Apps](../apps/README.md) -The windows components are used to view and interact with running applications. Each application opens a window when ran. \ No newline at end of file +The windows components are used to view and interact with running applications. Each app opens a window when ran. \ No newline at end of file diff --git a/public/assets/applications/file-explorer/icons/file-code.svg b/public/assets/apps/file-explorer/icons/file-code.svg similarity index 100% rename from public/assets/applications/file-explorer/icons/file-code.svg rename to public/assets/apps/file-explorer/icons/file-code.svg diff --git a/public/assets/applications/file-explorer/icons/file-info.svg b/public/assets/apps/file-explorer/icons/file-info.svg similarity index 100% rename from public/assets/applications/file-explorer/icons/file-info.svg rename to public/assets/apps/file-explorer/icons/file-info.svg diff --git a/public/assets/applications/file-explorer/icons/file-text.svg b/public/assets/apps/file-explorer/icons/file-text.svg similarity index 100% rename from public/assets/applications/file-explorer/icons/file-text.svg rename to public/assets/apps/file-explorer/icons/file-text.svg diff --git a/public/assets/applications/file-explorer/icons/file.svg b/public/assets/apps/file-explorer/icons/file.svg similarity index 100% rename from public/assets/applications/file-explorer/icons/file.svg rename to public/assets/apps/file-explorer/icons/file.svg diff --git a/public/assets/applications/file-explorer/icons/folder-images.svg b/public/assets/apps/file-explorer/icons/folder-images.svg similarity index 100% rename from public/assets/applications/file-explorer/icons/folder-images.svg rename to public/assets/apps/file-explorer/icons/folder-images.svg diff --git a/public/assets/applications/file-explorer/icons/folder-link.svg b/public/assets/apps/file-explorer/icons/folder-link.svg similarity index 100% rename from public/assets/applications/file-explorer/icons/folder-link.svg rename to public/assets/apps/file-explorer/icons/folder-link.svg diff --git a/public/assets/applications/file-explorer/icons/folder-text.svg b/public/assets/apps/file-explorer/icons/folder-text.svg similarity index 100% rename from public/assets/applications/file-explorer/icons/folder-text.svg rename to public/assets/apps/file-explorer/icons/folder-text.svg diff --git a/public/assets/applications/file-explorer/icons/folder.svg b/public/assets/apps/file-explorer/icons/folder.svg similarity index 100% rename from public/assets/applications/file-explorer/icons/folder.svg rename to public/assets/apps/file-explorer/icons/folder.svg diff --git a/public/assets/applications/icons/balls.svg b/public/assets/apps/icons/balls.svg similarity index 100% rename from public/assets/applications/icons/balls.svg rename to public/assets/apps/icons/balls.svg diff --git a/public/assets/applications/icons/browser.svg b/public/assets/apps/icons/browser.svg similarity index 100% rename from public/assets/applications/icons/browser.svg rename to public/assets/apps/icons/browser.svg diff --git a/public/assets/applications/icons/calculator.svg b/public/assets/apps/icons/calculator.svg similarity index 100% rename from public/assets/applications/icons/calculator.svg rename to public/assets/apps/icons/calculator.svg diff --git a/public/assets/applications/icons/code-editor.svg b/public/assets/apps/icons/code-editor.svg similarity index 100% rename from public/assets/applications/icons/code-editor.svg rename to public/assets/apps/icons/code-editor.svg diff --git a/public/assets/applications/icons/file-explorer.svg b/public/assets/apps/icons/file-explorer.svg similarity index 100% rename from public/assets/applications/icons/file-explorer.svg rename to public/assets/apps/icons/file-explorer.svg diff --git a/public/assets/applications/icons/media-viewer.svg b/public/assets/apps/icons/media-viewer.svg similarity index 100% rename from public/assets/applications/icons/media-viewer.svg rename to public/assets/apps/icons/media-viewer.svg diff --git a/public/assets/applications/icons/minesweeper.svg b/public/assets/apps/icons/minesweeper.svg similarity index 100% rename from public/assets/applications/icons/minesweeper.svg rename to public/assets/apps/icons/minesweeper.svg diff --git a/public/assets/applications/icons/settings.svg b/public/assets/apps/icons/settings.svg similarity index 100% rename from public/assets/applications/icons/settings.svg rename to public/assets/apps/icons/settings.svg diff --git a/public/assets/applications/icons/terminal.svg b/public/assets/apps/icons/terminal.svg similarity index 100% rename from public/assets/applications/icons/terminal.svg rename to public/assets/apps/icons/terminal.svg diff --git a/public/assets/applications/icons/text-editor.svg b/public/assets/apps/icons/text-editor.svg similarity index 100% rename from public/assets/applications/icons/text-editor.svg rename to public/assets/apps/icons/text-editor.svg diff --git a/public/assets/applications/icons/wordle.svg b/public/assets/apps/icons/wordle.svg similarity index 100% rename from public/assets/applications/icons/wordle.svg rename to public/assets/apps/icons/wordle.svg diff --git a/public/config/applications.xml b/public/config/apps.xml similarity index 100% rename from public/config/applications.xml rename to public/config/apps.xml diff --git a/src/components/actions/actions/ClickAction.jsx b/src/components/actions/actions/ClickAction.jsx index 52b142e..7e78e68 100644 --- a/src/components/actions/actions/ClickAction.jsx +++ b/src/components/actions/actions/ClickAction.jsx @@ -1,7 +1,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { formatShortcut } from "../../../features/utils/string.js"; +import { formatShortcut } from "../../../features/utils/string.utils.js"; import styles from "../Actions.module.css"; -import { ImagePreview } from "../../applications/file-explorer/directory-list/ImagePreview.jsx"; +import { ImagePreview } from "../../apps/file-explorer/directory-list/ImagePreview.jsx"; import { memo } from "react"; export const ClickAction = memo(({ actionId, label, shortcut, onTrigger, icon }) => { diff --git a/src/components/actions/actions/RadioAction.jsx b/src/components/actions/actions/RadioAction.jsx index 533d1fd..3fa30ae 100644 --- a/src/components/actions/actions/RadioAction.jsx +++ b/src/components/actions/actions/RadioAction.jsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { formatShortcut } from "../../../features/utils/string.js"; +import { formatShortcut } from "../../../features/utils/string.utils.js"; import styles from "../Actions.module.css"; import { faCircleDot } from "@fortawesome/free-solid-svg-icons"; import { useState } from "react"; diff --git a/src/components/actions/actions/ToggleAction.jsx b/src/components/actions/actions/ToggleAction.jsx index 06456b2..bf04697 100644 --- a/src/components/actions/actions/ToggleAction.jsx +++ b/src/components/actions/actions/ToggleAction.jsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { formatShortcut } from "../../../features/utils/string.js"; +import { formatShortcut } from "../../../features/utils/string.utils.js"; import styles from "../Actions.module.css"; import { useState } from "react"; import { faSquare } from "@fortawesome/free-regular-svg-icons"; diff --git a/src/components/applications/file-explorer/directory-list/ImagePreview.jsx b/src/components/applications/file-explorer/directory-list/ImagePreview.jsx deleted file mode 100644 index 65e83d3..0000000 --- a/src/components/applications/file-explorer/directory-list/ImagePreview.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import { useState } from "react"; -import styles from "./ImagePreview.module.css"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faFile } from "@fortawesome/free-solid-svg-icons"; -import { ReactSVG } from "react-svg"; - -export function ImagePreview({ source, className, ...props }) { - const [loadingFailed, setLoadingFailed] = useState(false); - - if (loadingFailed) - return ; - - const classNames = [styles["Image-preview"]]; - if (className != null) - classNames.push(className); - - return (
- {source.endsWith(".svg") - ? - : { setLoadingFailed(true); }} alt="Preview" draggable="false"/> - } -
); -} \ No newline at end of file diff --git a/src/components/applications/.common/HeaderMenu.jsx b/src/components/apps/_common/HeaderMenu.jsx similarity index 96% rename from src/components/applications/.common/HeaderMenu.jsx rename to src/components/apps/_common/HeaderMenu.jsx index 76d8304..f463069 100644 --- a/src/components/applications/.common/HeaderMenu.jsx +++ b/src/components/apps/_common/HeaderMenu.jsx @@ -3,7 +3,7 @@ import { DropdownButton } from "../../utils/dropdown-button/DropdownButton.jsx"; import styles from "./HeaderMenu.module.css"; /** - * @param {Object} props + * @param {object} props * @param {Object>} props.options * @param {Object>} props.shortcuts */ diff --git a/src/components/applications/.common/HeaderMenu.module.css b/src/components/apps/_common/HeaderMenu.module.css similarity index 100% rename from src/components/applications/.common/HeaderMenu.module.css rename to src/components/apps/_common/HeaderMenu.module.css diff --git a/src/components/applications/.templates/WebView.jsx b/src/components/apps/_templates/WebView.jsx similarity index 92% rename from src/components/applications/.templates/WebView.jsx rename to src/components/apps/_templates/WebView.jsx index b722cb0..2cc5e60 100644 --- a/src/components/applications/.templates/WebView.jsx +++ b/src/components/apps/_templates/WebView.jsx @@ -2,8 +2,8 @@ import { forwardRef, useEffect, useState } from "react"; import styles from "./WebView.module.css"; /** - * @param {Object} props - * @param {String} props.source + * @param {object} props + * @param {string} props.source */ export const WebView = forwardRef(({ source, focus, ...props }, ref) => { const [hovered, setHovered] = useState(false); @@ -22,7 +22,7 @@ export const WebView = forwardRef(({ source, focus, ...props }, ref) => { return () => { window.removeEventListener("blur", onBlur); }; - }, [hovered]); + }, [focus, hovered]); const onMouseOver = () => { setHovered(true); diff --git a/src/components/applications/.templates/WebView.module.css b/src/components/apps/_templates/WebView.module.css similarity index 100% rename from src/components/applications/.templates/WebView.module.css rename to src/components/apps/_templates/WebView.module.css diff --git a/src/components/applications/browser/Browser.jsx b/src/components/apps/browser/Browser.jsx similarity index 92% rename from src/components/applications/browser/Browser.jsx rename to src/components/apps/browser/Browser.jsx index 22c514d..9daa063 100644 --- a/src/components/applications/browser/Browser.jsx +++ b/src/components/apps/browser/Browser.jsx @@ -1,10 +1,10 @@ import { useEffect, useRef, useState } from "react"; import styles from "./Browser.module.css"; -import { WebView } from "../.templates/WebView.jsx"; +import { WebView } from "../_templates/WebView.jsx"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCaretLeft, faCaretRight, faHome, faRotateRight } from "@fortawesome/free-solid-svg-icons"; -import { HOME_URL, SEARCH_URL } from "../../../constants/applications/browser.js"; -import { isValidUrl } from "../../../features/utils/browser.js"; +import { HOME_URL, SEARCH_URL } from "../../../config/apps/browser.config.js"; +import { isValidUrl } from "../../../features/utils/browser.utils.js"; import { useHistory } from "../../../hooks/utils/history.js"; /** @type {import("../../windows/WindowView.jsx").windowProps} */ diff --git a/src/components/applications/browser/Browser.module.css b/src/components/apps/browser/Browser.module.css similarity index 100% rename from src/components/applications/browser/Browser.module.css rename to src/components/apps/browser/Browser.module.css diff --git a/src/components/applications/calculator/Calculator.jsx b/src/components/apps/calculator/Calculator.jsx similarity index 100% rename from src/components/applications/calculator/Calculator.jsx rename to src/components/apps/calculator/Calculator.jsx diff --git a/src/components/applications/calculator/Calculator.module.css b/src/components/apps/calculator/Calculator.module.css similarity index 100% rename from src/components/applications/calculator/Calculator.module.css rename to src/components/apps/calculator/Calculator.module.css diff --git a/src/components/applications/file-explorer/FileExplorer.jsx b/src/components/apps/file-explorer/FileExplorer.jsx similarity index 95% rename from src/components/applications/file-explorer/FileExplorer.jsx rename to src/components/apps/file-explorer/FileExplorer.jsx index 9d2e831..7c6eb3b 100644 --- a/src/components/applications/file-explorer/FileExplorer.jsx +++ b/src/components/apps/file-explorer/FileExplorer.jsx @@ -8,15 +8,15 @@ import { useContextMenu } from "../../../hooks/modals/contextMenu.js"; import { QuickAccessButton } from "./QuickAccessButton.jsx"; import { useWindowedModal } from "../../../hooks/modals/windowedModal.js"; import Vector2 from "../../../features/math/vector2.js"; -import { DIALOG_CONTENT_TYPES } from "../../../constants/modals.js"; +import { DIALOG_CONTENT_TYPES } from "../../../config/modals.config.js"; import { DirectoryList } from "./directory-list/DirectoryList.jsx"; import { Actions } from "../../actions/Actions.jsx"; 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, APP_ICONS, APP_NAMES } from "../../../constants/applications.js"; -import { TITLE_SEPARATOR } from "../../../constants/windows.js"; +import AppsManager from "../../../features/apps/appsManager.js"; +import { APPS, APP_ICONS, APP_NAMES } from "../../../config/apps.config.js"; +import { TITLE_SEPARATOR } from "../../../config/windows.config.js"; import { FileProperties } from "../../modals/file-properties/FileProperties.jsx"; import { useHistory } from "../../../hooks/utils/history.js"; import { Divider } from "../../actions/actions/Divider.jsx"; @@ -83,8 +83,6 @@ export function FileExplorer({ startPath, app, modalsManager }) { const directory = absolute ? virtualRoot.navigate(path) : currentDirectory.navigate(path); - console.debug(directory); - if (directory != null) { setCurrentDirectory(directory); setPath(directory.root ? "/" : directory.path); @@ -164,6 +162,7 @@ export function FileExplorer({ startPath, app, modalsManager }) { tabIndex={0} className={styles["Icon-button"]} onClick={() => { changeDirectory(".."); }} + disabled={currentDirectory.root} > @@ -189,6 +188,7 @@ export function FileExplorer({ startPath, app, modalsManager }) { // } }} + disabled={!currentDirectory.canBeEdited} > diff --git a/src/components/applications/file-explorer/FileExplorer.module.css b/src/components/apps/file-explorer/FileExplorer.module.css similarity index 100% rename from src/components/applications/file-explorer/FileExplorer.module.css rename to src/components/apps/file-explorer/FileExplorer.module.css diff --git a/src/components/applications/file-explorer/QuickAccessButton.jsx b/src/components/apps/file-explorer/QuickAccessButton.jsx similarity index 100% rename from src/components/applications/file-explorer/QuickAccessButton.jsx rename to src/components/apps/file-explorer/QuickAccessButton.jsx diff --git a/src/components/applications/file-explorer/directory-list/DirectoryList.jsx b/src/components/apps/file-explorer/directory-list/DirectoryList.jsx similarity index 95% rename from src/components/applications/file-explorer/directory-list/DirectoryList.jsx rename to src/components/apps/file-explorer/directory-list/DirectoryList.jsx index 3ad524d..0b8bb97 100644 --- a/src/components/applications/file-explorer/directory-list/DirectoryList.jsx +++ b/src/components/apps/file-explorer/directory-list/DirectoryList.jsx @@ -1,6 +1,6 @@ import { useEffect, useRef, useState } from "react"; -import { VirtualFile } from "../../../../features/virtual-drive/virtualFile.js"; -import { VirtualFolder } from "../../../../features/virtual-drive/virtualFolder.js"; +import { VirtualFile } from "../../../../features/virtual-drive/file/virtualFile.js"; +import { VirtualFolder } from "../../../../features/virtual-drive/folder/virtualFolder.js"; import { Interactable } from "../../../utils/interactable/Interactable.jsx"; import styles from "./DirectoryList.module.css"; import { ImagePreview } from "./ImagePreview.jsx"; @@ -159,7 +159,7 @@ export function DirectoryList({ directory, showHidden = false, folderClassName, }} >
- + { folder.setIconUrl(null); }}/>

{folder.name}

@@ -181,7 +181,7 @@ export function DirectoryList({ directory, showHidden = false, folderClassName, }} >
- + { file.setIconUrl(null); }}/>

{file.id}

diff --git a/src/components/applications/file-explorer/directory-list/DirectoryList.module.css b/src/components/apps/file-explorer/directory-list/DirectoryList.module.css similarity index 100% rename from src/components/applications/file-explorer/directory-list/DirectoryList.module.css rename to src/components/apps/file-explorer/directory-list/DirectoryList.module.css diff --git a/src/components/apps/file-explorer/directory-list/ImagePreview.jsx b/src/components/apps/file-explorer/directory-list/ImagePreview.jsx new file mode 100644 index 0000000..42df32a --- /dev/null +++ b/src/components/apps/file-explorer/directory-list/ImagePreview.jsx @@ -0,0 +1,27 @@ +import { useState } from "react"; +import styles from "./ImagePreview.module.css"; +import { ReactSVG } from "react-svg"; +import AppsManager from "../../../../features/apps/appsManager.js"; +import { APPS } from "../../../../config/apps.config.js"; + +export function ImagePreview({ source, className, onError, ...props }) { + const [loadingFailed, setLoadingFailed] = useState(false); + + const onLoadingError = () => { + setLoadingFailed(true); + onError?.(); + }; + + const classNames = [styles["Image-preview"]]; + if (className != null) + classNames.push(className); + + return (
+ {loadingFailed + ? + : source.endsWith(".svg") + ? + : Preview + } +
); +} \ No newline at end of file diff --git a/src/components/applications/file-explorer/directory-list/ImagePreview.module.css b/src/components/apps/file-explorer/directory-list/ImagePreview.module.css similarity index 92% rename from src/components/applications/file-explorer/directory-list/ImagePreview.module.css rename to src/components/apps/file-explorer/directory-list/ImagePreview.module.css index b2daeaa..918f47f 100644 --- a/src/components/applications/file-explorer/directory-list/ImagePreview.module.css +++ b/src/components/apps/file-explorer/directory-list/ImagePreview.module.css @@ -4,6 +4,7 @@ align-items: center; height: 100%; overflow: hidden; + pointer-events: none; } .Image-preview > * { diff --git a/src/components/applications/media-viewer/MediaViewer.jsx b/src/components/apps/media-viewer/MediaViewer.jsx similarity index 93% rename from src/components/applications/media-viewer/MediaViewer.jsx rename to src/components/apps/media-viewer/MediaViewer.jsx index 40a177d..fb05adb 100644 --- a/src/components/applications/media-viewer/MediaViewer.jsx +++ b/src/components/apps/media-viewer/MediaViewer.jsx @@ -2,7 +2,7 @@ import { useEffect } from "react"; import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext.js"; import styles from "./MediaViewer.module.css"; -import { APPS } from "../../../constants/applications.js"; +import { APPS } from "../../../config/apps.config.js"; /** * @param {import("../../windows/WindowView.jsx").windowProps} props diff --git a/src/components/applications/media-viewer/MediaViewer.module.css b/src/components/apps/media-viewer/MediaViewer.module.css similarity index 100% rename from src/components/applications/media-viewer/MediaViewer.module.css rename to src/components/apps/media-viewer/MediaViewer.module.css diff --git a/src/components/applications/settings/AboutSettings.jsx b/src/components/apps/settings/AboutSettings.jsx similarity index 90% rename from src/components/applications/settings/AboutSettings.jsx rename to src/components/apps/settings/AboutSettings.jsx index 1d132f7..fe5be8d 100644 --- a/src/components/applications/settings/AboutSettings.jsx +++ b/src/components/apps/settings/AboutSettings.jsx @@ -4,7 +4,7 @@ import utilStyles from "../../../styles/utils.module.css"; import Vector2 from "../../../features/math/vector2.js"; import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext.js"; import { useVirtualRoot } from "../../../hooks/virtual-drive/virtualRootContext.js"; -import { NAME } from "../../../constants/branding.js"; +import { NAME } from "../../../config/branding.config.js"; export function AboutSettings() { const windowsManager = useWindowsManager(); @@ -21,7 +21,7 @@ export function AboutSettings() { event.preventDefault(); windowsManager.open("text-editor", { mode: "view", - file: virtualRoot.navigate("~/Documents").findFile("info", "md"), + file: virtualRoot.navigate("~/Documents/info.md"), size: new Vector2(575, 675), }); }} diff --git a/src/components/applications/settings/AppearanceSettings.jsx b/src/components/apps/settings/AppearanceSettings.jsx similarity index 94% rename from src/components/applications/settings/AppearanceSettings.jsx rename to src/components/apps/settings/AppearanceSettings.jsx index 10edc68..a2d7a87 100644 --- a/src/components/applications/settings/AppearanceSettings.jsx +++ b/src/components/apps/settings/AppearanceSettings.jsx @@ -3,7 +3,7 @@ import { SettingsManager } from "../../../features/settings/settingsManager.js"; import styles from "./Settings.module.css"; import { useVirtualRoot } from "../../../hooks/virtual-drive/virtualRootContext.js"; import { useSettingsManager } from "../../../hooks/settings/settingsManagerContext.js"; -import { WALLPAPERS_PATH } from "../../../constants/applications/settings.js"; +import { WALLPAPERS_PATH } from "../../../config/apps/settings.config.js"; export function AppearanceSettings() { const virtualRoot = useVirtualRoot(); diff --git a/src/components/applications/settings/Settings.jsx b/src/components/apps/settings/Settings.jsx similarity index 100% rename from src/components/applications/settings/Settings.jsx rename to src/components/apps/settings/Settings.jsx diff --git a/src/components/applications/settings/Settings.module.css b/src/components/apps/settings/Settings.module.css similarity index 100% rename from src/components/applications/settings/Settings.module.css rename to src/components/apps/settings/Settings.module.css diff --git a/src/components/applications/settings/StorageSettings.jsx b/src/components/apps/settings/StorageSettings.jsx similarity index 100% rename from src/components/applications/settings/StorageSettings.jsx rename to src/components/apps/settings/StorageSettings.jsx diff --git a/src/components/applications/terminal/Ansi.jsx b/src/components/apps/terminal/Ansi.jsx similarity index 100% rename from src/components/applications/terminal/Ansi.jsx rename to src/components/apps/terminal/Ansi.jsx diff --git a/src/components/applications/terminal/InputLine.jsx b/src/components/apps/terminal/InputLine.jsx similarity index 100% rename from src/components/applications/terminal/InputLine.jsx rename to src/components/apps/terminal/InputLine.jsx diff --git a/src/components/applications/terminal/OutputLine.jsx b/src/components/apps/terminal/OutputLine.jsx similarity index 100% rename from src/components/applications/terminal/OutputLine.jsx rename to src/components/apps/terminal/OutputLine.jsx diff --git a/src/components/applications/terminal/Terminal.jsx b/src/components/apps/terminal/Terminal.jsx similarity index 96% rename from src/components/applications/terminal/Terminal.jsx rename to src/components/apps/terminal/Terminal.jsx index 02257cc..921200d 100644 --- a/src/components/applications/terminal/Terminal.jsx +++ b/src/components/apps/terminal/Terminal.jsx @@ -4,9 +4,9 @@ import { useVirtualRoot } from "../../../hooks/virtual-drive/virtualRootContext. import { clamp } from "../../../features/math/clamp.js"; import { OutputLine } from "./OutputLine.jsx"; import { InputLine } from "./InputLine.jsx"; -import { ANSI, HOSTNAME, USERNAME } from "../../../constants/applications/terminal.js"; -import CommandsManager from "../../../features/applications/terminal/commands.js"; -import { removeFromArray } from "../../../features/utils/array.js"; +import { ANSI, HOSTNAME, USERNAME } from "../../../config/apps/terminal.config.js"; +import CommandsManager from "../../../features/apps/terminal/commands.js"; +import { removeFromArray } from "../../../features/utils/array.utils.js"; /** * @param {import("../../windows/WindowView.jsx").windowProps} props diff --git a/src/components/applications/terminal/Terminal.module.css b/src/components/apps/terminal/Terminal.module.css similarity index 100% rename from src/components/applications/terminal/Terminal.module.css rename to src/components/apps/terminal/Terminal.module.css diff --git a/src/components/applications/text-editor/TextEditor.jsx b/src/components/apps/text-editor/TextEditor.jsx similarity index 92% rename from src/components/applications/text-editor/TextEditor.jsx rename to src/components/apps/text-editor/TextEditor.jsx index 27afba5..258a700 100644 --- a/src/components/applications/text-editor/TextEditor.jsx +++ b/src/components/apps/text-editor/TextEditor.jsx @@ -1,10 +1,10 @@ import React, { useEffect, useState } from "react"; import styles from "./TextEditor.module.css"; -import { HeaderMenu } from "../.common/HeaderMenu.jsx"; +import { HeaderMenu } from "../_common/HeaderMenu.jsx"; import Markdown from "markdown-to-jsx"; -import { DEFAULT_ZOOM, ZOOM_FACTOR } from "../../../constants/applications/textEditor.js"; -import AppsManager from "../../../features/applications/applications.js"; -import { TITLE_SEPARATOR } from "../../../constants/windows.js"; +import { DEFAULT_ZOOM, ZOOM_FACTOR } from "../../../config/apps/textEditor.config.js"; +import AppsManager from "../../../features/apps/appsManager.js"; +import { TITLE_SEPARATOR } from "../../../config/windows.config.js"; /** * @param {import("../../windows/WindowView.jsx").windowProps} props diff --git a/src/components/applications/text-editor/TextEditor.module.css b/src/components/apps/text-editor/TextEditor.module.css similarity index 100% rename from src/components/applications/text-editor/TextEditor.module.css rename to src/components/apps/text-editor/TextEditor.module.css diff --git a/src/components/desktop/Desktop.jsx b/src/components/desktop/Desktop.jsx index 72598e1..b7c0892 100644 --- a/src/components/desktop/Desktop.jsx +++ b/src/components/desktop/Desktop.jsx @@ -7,11 +7,11 @@ import { useModals } from "../../hooks/modals/modals.js"; import { ModalsView } from "../modals/ModalsView.jsx"; import { useWindowsManager } from "../../hooks/windows/windowsManagerContext.js"; import { useContextMenu } from "../../hooks/modals/contextMenu.js"; -import { FALLBACK_ICON_SIZE, FALLBACK_WALLPAPER } from "../../constants/desktop.js"; -import { reloadViewport } from "../../features/utils/browser.js"; +import { FALLBACK_ICON_SIZE, FALLBACK_WALLPAPER } from "../../config/desktop.config.js"; +import { reloadViewport } from "../../features/utils/browser.utils.js"; import { useVirtualRoot } from "../../hooks/virtual-drive/virtualRootContext.js"; -import { DirectoryList } from "../applications/file-explorer/directory-list/DirectoryList.jsx"; -import { APPS, APP_ICONS, APP_NAMES } from "../../constants/applications.js"; +import { DirectoryList } from "../apps/file-explorer/directory-list/DirectoryList.jsx"; +import { APPS, APP_ICONS, APP_NAMES } from "../../config/apps.config.js"; import Vector2 from "../../features/math/vector2.js"; import { Actions } from "../actions/Actions.jsx"; import { ClickAction } from "../actions/actions/ClickAction.jsx"; @@ -20,7 +20,7 @@ import { ToggleAction } from "../actions/actions/ToggleAction.jsx"; import { DropdownAction } from "../actions/actions/DropdownAction.jsx"; import { RadioAction } from "../actions/actions/RadioAction.jsx"; import { Divider } from "../actions/actions/Divider.jsx"; -import { isValidInteger } from "../../features/utils/number.js"; +import { isValidInteger } from "../../features/utils/number.utils.js"; export const Desktop = memo(() => { const settingsManager = useSettingsManager(); diff --git a/src/components/modals/ModalsView.jsx b/src/components/modals/ModalsView.jsx index cd8e563..1c12d5c 100644 --- a/src/components/modals/ModalsView.jsx +++ b/src/components/modals/ModalsView.jsx @@ -1,6 +1,6 @@ import { memo, useEffect, useRef } from "react"; import { Modal } from "../../features/modals/modal.js"; -import ModalsManager from "../../features/modals/modals.js"; +import ModalsManager from "../../features/modals/modalsManager.js"; import { ModalView } from "./ModalView.jsx"; import styles from "./ModalsView.module.css"; diff --git a/src/components/modals/.templates/WindowedModal.jsx b/src/components/modals/_templates/WindowedModal.jsx similarity index 100% rename from src/components/modals/.templates/WindowedModal.jsx rename to src/components/modals/_templates/WindowedModal.jsx diff --git a/src/components/modals/.templates/WindowedModal.module.css b/src/components/modals/_templates/WindowedModal.module.css similarity index 100% rename from src/components/modals/.templates/WindowedModal.module.css rename to src/components/modals/_templates/WindowedModal.module.css diff --git a/src/components/modals/dialog-box/DialogBox.jsx b/src/components/modals/dialog-box/DialogBox.jsx index 6fae257..58ba426 100644 --- a/src/components/modals/dialog-box/DialogBox.jsx +++ b/src/components/modals/dialog-box/DialogBox.jsx @@ -1,5 +1,5 @@ -import { DIALOG_CONTENT_TYPES } from "../../../constants/modals.js"; -import { WindowedModal } from "../.templates/WindowedModal.jsx"; +import { DIALOG_CONTENT_TYPES } from "../../../config/modals.config.js"; +import { WindowedModal } from "../_templates/WindowedModal.jsx"; export function DialogBox({ modal, params, children, ...props }) { const onClick = (event) => { diff --git a/src/components/modals/file-properties/FileProperties.jsx b/src/components/modals/file-properties/FileProperties.jsx index 8419a0c..63c1e90 100644 --- a/src/components/modals/file-properties/FileProperties.jsx +++ b/src/components/modals/file-properties/FileProperties.jsx @@ -1,11 +1,11 @@ -import { ImagePreview } from "../../applications/file-explorer/directory-list/ImagePreview.jsx"; -import { WindowedModal } from "../.templates/WindowedModal.jsx"; +import { ImagePreview } from "../../apps/file-explorer/directory-list/ImagePreview.jsx"; +import { WindowedModal } from "../_templates/WindowedModal.jsx"; import styles from "./FileProperties.module.css"; import utilStyles from "../../../styles/utils.module.css"; import Modal from "../../../features/modals/modal.js"; -import { VirtualFile } from "../../../features/virtual-drive/virtualFile.js"; +import { VirtualFile } from "../../../features/virtual-drive/file/virtualFile.js"; import { StorageManager } from "../../../features/storage/storageManager.js"; -import AppsManager from "../../../features/applications/applications.js"; +import AppsManager from "../../../features/apps/appsManager.js"; /** * @param {object} props @@ -14,7 +14,7 @@ import AppsManager from "../../../features/applications/applications.js"; * @param {VirtualFile} props.file */ export function FileProperties({ modal, params, file, ...props }) { - const associatedApp = AppsManager.getFileApp(file.extension); + const associatedApp = AppsManager.getAppByFileExtension(file.extension); return diff --git a/src/components/taskbar/Taskbar.jsx b/src/components/taskbar/Taskbar.jsx index 937016c..7412e5b 100644 --- a/src/components/taskbar/Taskbar.jsx +++ b/src/components/taskbar/Taskbar.jsx @@ -2,7 +2,7 @@ import { memo, useEffect, useMemo, useRef, useState } from "react"; import styles from "./Taskbar.module.css"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCog, faSearch } from "@fortawesome/free-solid-svg-icons"; -import AppsManager from "../../features/applications/applications.js"; +import AppsManager from "../../features/apps/appsManager.js"; import { ReactSVG } from "react-svg"; import { HomeMenu } from "./menus/HomeMenu.jsx"; import OutsideClickListener from "../../hooks/utils/outsideClick.js"; @@ -17,10 +17,10 @@ import { useContextMenu } from "../../hooks/modals/contextMenu.js"; import { Actions } from "../actions/Actions.jsx"; import { useModals } from "../../hooks/modals/modals.js"; import { ClickAction } from "../actions/actions/ClickAction.jsx"; -import { APPS, APP_NAMES } from "../../constants/applications.js"; +import { APPS, APP_NAMES } from "../../config/apps.config.js"; import { useWindowsManager } from "../../hooks/windows/windowsManagerContext.js"; import { ModalsView } from "../modals/ModalsView.jsx"; -import { TASKBAR_HEIGHT } from "../../constants/taskBar.js"; +import { TASKBAR_HEIGHT } from "../../config/taskbar.config.js"; import { useSettingsManager } from "../../hooks/settings/settingsManagerContext.js"; import { SettingsManager } from "../../features/settings/settingsManager.js"; import { useWindows } from "../../hooks/windows/windowsContext.js"; @@ -50,7 +50,7 @@ export const Taskbar = memo(() => { }); const [pins, setPins] = useState([]); - const apps = useMemo(() => AppsManager.APPLICATIONS.sort((appA, appB) => { + const apps = useMemo(() => AppsManager.APPS.sort((appA, appB) => { const indexA = pins.indexOf(appA.id); const indexB = pins.indexOf(appB.id); if (indexA < 0 && indexB > 0) { diff --git a/src/components/taskbar/app-icon/AppIcon.jsx b/src/components/taskbar/app-icon/AppIcon.jsx index 2a20672..9131b86 100644 --- a/src/components/taskbar/app-icon/AppIcon.jsx +++ b/src/components/taskbar/app-icon/AppIcon.jsx @@ -1,20 +1,20 @@ import { memo } from "react"; -import Application from "../../../features/applications/application.js"; +import App from "../../../features/apps/app.js"; import styles from "./AppIcon.module.css"; import { ReactSVG } from "react-svg"; import { useSettingsManager } from "../../../hooks/settings/settingsManagerContext.js"; import { useContextMenu } from "../../../hooks/modals/contextMenu.js"; -import ModalsManager from "../../../features/modals/modals.js"; +import ModalsManager from "../../../features/modals/modalsManager.js"; import { Actions } from "../../actions/Actions.jsx"; import { ClickAction } from "../../actions/actions/ClickAction.jsx"; import { faThumbTack, faTimes } from "@fortawesome/free-solid-svg-icons"; import { SettingsManager } from "../../../features/settings/settingsManager.js"; -import { removeFromArray } from "../../../features/utils/array.js"; -import AppsManager from "../../../features/applications/applications.js"; +import { removeFromArray } from "../../../features/utils/array.utils.js"; +import AppsManager from "../../../features/apps/appsManager.js"; /** * @param {object} props - * @param {Application} props.app + * @param {App} props.app * @param {ModalsManager} props.modalsManager * @param {string[]} props.pins * @param {boolean} props.focused @@ -76,7 +76,7 @@ export const AppButton = memo(({ app, windowsManager, modalsManager, pins, activ }} title={app.name} > - + ); }); \ No newline at end of file diff --git a/src/components/taskbar/menus/HomeMenu.jsx b/src/components/taskbar/menus/HomeMenu.jsx index 191babd..d1b5862 100644 --- a/src/components/taskbar/menus/HomeMenu.jsx +++ b/src/components/taskbar/menus/HomeMenu.jsx @@ -3,16 +3,16 @@ import styles from "./HomeMenu.module.css"; import appStyles from "./AppList.module.css"; import { faCircleInfo, faFileLines, faGear, faImage, faPowerOff } from "@fortawesome/free-solid-svg-icons"; import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext.js"; -import AppsManager from "../../../features/applications/applications.js"; +import AppsManager from "../../../features/apps/appsManager.js"; import { ReactSVG } from "react-svg"; -import { closeViewport } from "../../../features/utils/browser.js"; +import { closeViewport } from "../../../features/utils/browser.utils.js"; import { useKeyboardListener } from "../../../hooks/utils/keyboard.js"; import { useVirtualRoot } from "../../../hooks/virtual-drive/virtualRootContext.js"; import { useEffect, useState } from "react"; import Vector2 from "../../../features/math/vector2.js"; import utilStyles from "../../../styles/utils.module.css"; -import { APPS } from "../../../constants/applications.js"; -import { NAME } from "../../../constants/branding.js"; +import { APPS } from "../../../config/apps.config.js"; +import { NAME } from "../../../config/branding.config.js"; /** * @param {object} props @@ -76,7 +76,7 @@ export function HomeMenu({ active, setActive, search }) { setActive(false); windowsManager.open("text-editor", { mode: "view", - file: virtualRoot.navigate("~/Documents").findFile("info", "md"), + file: virtualRoot.navigate("~/Documents/info.md"), size: new Vector2(575, 675), }); }}> @@ -98,7 +98,7 @@ export function HomeMenu({ active, setActive, search }) {

{NAME}

- {AppsManager.APPLICATIONS.map(({ name, id }) => + {AppsManager.APPS.map(({ name, id }) =>