ProzillaOS/docs/features/apps/README.md

← Back

Apps

Related document: Windows

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")
• File Explorer ("Files")
• Media Viewer ("Photos")
• Text Editor ("Notes")
• Settings

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

// components/apps/_common/HeaderMenu.jsx

<HeaderMenu
	options={{
		"File": {
			"New": () => {
				// ...
			},
			"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

// 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

// components/apps/example/Example.jsx

export function Example() {
	return (
		<p>Application interface goes here.</p>
	)
}

// features/apps/apps.js

import { Example } from "../../components/apps/example/Example.jsx";

export default class AppsManager {
	static APPLICATIONS = [
		// ...
		new App("Example App", "example", Example),
	]

	// ...
}