Updated docu for file explorer and media viewer

docs/features/applications/README.md

@@ -6,24 +6,15 @@ Applications (sometimes shortened to apps) are processes that open a window when
 
 ## Table of Contents
 
-- [<img src="../../../public/media/applications/icons/terminal.svg" width=20 height=20 style="vertical-align: middle; background: none;"/> Terminal](./terminal/README.md)
+- [<img src="../../../public/media/applications/icons/terminal.svg" width=20 height=20 style="vertical-align: middle; background: none;"/> Terminal](terminal/README.md)
+- [<img src="../../../public/media/applications/icons/file-explorer.svg" width=20 height=20 style="vertical-align: middle; background: none;"/> File Explorer](file-explorer/README.md)
+- [<img src="../../../public/media/applications/icons/media-viewer.svg" width=20 height=20 style="vertical-align: middle; background: none;"/> Media Viewer](media-viewer/README.md)
 
 ## Examples
 
 ### Adding a new application
 
 ```js
-// src/features/applications/applications.js
-
-export default class ApplicationsManager {
-	static APPLICATIONS = [
-		// ...
-		new Application("Example App", "example", <Example/>),
-	]
-
-	// ...
-}
-
 // src/components/applications/example/Example.jsx
 
 export function Example() {
@@ -33,15 +24,32 @@ export function Example() {
 }
 ```
 
+```js
+// src/features/applications/applications.js
+
+import { Example } from "../../components/applications/example/Example.jsx";
+
+export default class ApplicationsManager {
+	static APPLICATIONS = [
+		// ...
+		new Application("Example App", "example", Example),
+	]
+
+	// ...
+}
+```
+
 ### Turning a webpage into an application
 
 ```js
 // src/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/"/>),
+		new Application("Web App", "web-app",  WebView, { source: "https://prozilla.dev/" }),
 	]
 
 	// ...

docs/features/applications/file-explorer/README.md

@@ -0,0 +1,5 @@
+[← Back](../README.md)
+
+# <img src="../../../../public/media/applications/icons/file-explorer.svg" width=30 height=30 style="vertical-align: middle; background: none;"/> File Explorer 
+
+A tool for exploring and managing files with a user interface.

docs/features/applications/media-viewer/README.md

@@ -0,0 +1,5 @@
+[← Back](../README.md)
+
+# <img src="../../../../public/media/applications/icons/media-viewer.svg" width=30 height=30 style="vertical-align: middle; background: none;"/> Media Viewer 
+
+An application for viewing media like images and videos.

src/features/applications/application.js

@@ -1,18 +1,21 @@
 export default class Application {
 	/**
 	 * @param {String} name 
-	 * @param {String} id 
+	 * @param {String} id
 	 * @param {React.ReactElement} windowContent 
+	 * @param {Object|null} windowOptions - Default window options
 	 */
 	constructor(name, id, windowContent, windowOptions) {
 		Object.assign(this, { name, id, windowContent, windowOptions });
+
+		if (this.windowContent == null)
+			console.warn(`App (${this.id}) is missing the windowContent property.`);
 	}
 
 	WindowContent = (props) => {
 		props = {...props, ...this.windowOptions};
 
 		if (this.windowContent == null) {
-			console.warn(`App (${this.id}) is missing the windowContent property.`);
 			return null;
 		}
 

src/features/applications/applications.js

@@ -35,6 +35,7 @@ export default class ApplicationsManager {
 	}
 
 	/**
+	 * Get the application associated with a file extension
 	 * @param {String} fileExtension 
 	 * @returns {Application}
 	 */

src/hooks/virtual-drive/VirtualRootContext.js

@@ -4,6 +4,7 @@ import { VirtualRoot } from "../../features/virtual-drive/virtual-root.js";
 const VirtualRootContext = createContext();
 
 /**
+ * Initializes the virtual root with folders and files
  * @param {VirtualRoot} virtualRoot 
  */
 function initVirtualRoot(virtualRoot) {