Updated docs + renamed /media to /assets

README.md

@@ -1,12 +1,12 @@
 <img alt="License" src="https://img.shields.io/github/license/prozilla/Prozilla-OS?style=flat-square&color=ee5253&label=License"> <img alt="Stars" src="https://img.shields.io/github/stars/prozilla/prozilla-os?style=flat-square&color=feca57&label=%E2%AD%90">  <img alt="Forks" src="https://img.shields.io/github/forks/prozilla/prozilla-os?style=flat-square&color=54a0ff&label=Forks">
 
-# <img src="public/media/logo.svg" align="left" width=40 height=40 alt="Logo"/> ProzillaOS
+# <img src="public/assets/logo.svg" align="left" width=40 height=40 alt="Logo"/> ProzillaOS
 
 ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows made with React by Prozilla.
 
 **Live demo: [os.prozilla.dev](https://os.prozilla.dev/)**
 
-<img src="public/media/banner-logo-title.png" alt="Banner with ProzillaOS' name and logo"/>
+<img src="public/assets/banner-logo-title.png" alt="Banner with ProzillaOS' name and logo"/>
 
 > Please note that ProzillaOS is a WIP and far from complete. Many additional features will be added in the near future.
 
@@ -29,7 +29,7 @@ ProzillaOS was designed in Figma by Prozilla. You can view the design file [here
 
 ### Preview
 
-<img src="public/media/screenshots/screenshot-files-settings-taskbar-desktop.png" alt="Screenshot of ProzillaOS"/>
+<img src="public/assets/screenshots/screenshot-files-settings-taskbar-desktop.png" alt="Screenshot of ProzillaOS"/>
 
 ## Support ProzillaOS
 

docs/README.md

@@ -34,7 +34,7 @@
 
 Once the initial setup is complete, you can simply run `npm run deploy` and your website will be built and deployed to GitHub Pages.
 
-> Note: When the deployment process is complete, you won't see the changes reflected on your website until a few moments later. This is because GitHub Pages needs to run its own build step before the website updates. You can view details about this process in the Actions tab on GitHub.
+> Note: When the deployment process is complete, you won't see the changes reflected on your website until a few moments later. This is because GitHub Pages needs to run its own build step before the website updates. You can view details about this process in the `Actions` tab on GitHub.
 
 ### Structure
 
@@ -72,5 +72,5 @@ Functions | camelCase | ```function focusWindow() { }```
 
 ### External files
 
-- [Design file (Figma)](https://www.figma.com/file/bEE5RyWgV0QILcXpZWEk2r/ProzillaOS?type=design&node-id=0%3A1&mode=design&t=7KR1tKCp9H5cK3hf-1)
-- [Task board (Notion)](https://prozilla.notion.site/8325fabca1fb4f9885b6d6dfd5aa64c8?v=1a59f7ce50914f5ea711fe6460e52868&pvs=4)
+- [Design file - Figma](https://www.figma.com/file/bEE5RyWgV0QILcXpZWEk2r/ProzillaOS?type=design&node-id=0%3A1&mode=design&t=7KR1tKCp9H5cK3hf-1)
+- [Task board - Notion](https://prozilla.notion.site/8325fabca1fb4f9885b6d6dfd5aa64c8?v=1a59f7ce50914f5ea711fe6460e52868&pvs=4)

docs/design/README.md

@@ -6,7 +6,7 @@ ProzillaOS is designed in Figma by Prozilla. You can view the design file [here]
 
 ### Preview
 
-<img src="../../public/media/screenshots/screenshot-files-settings-taskbar-desktop.png" alt="Screenshot of ProzillaOS"/>
+<img src="../../public/assets/screenshots/screenshot-files-settings-taskbar-desktop.png" alt="Screenshot of ProzillaOS"/>
 
 ### Font
 
@@ -14,11 +14,11 @@ The font used by ProzillaOS is [Poppins](https://fonts.google.com/specimen/Poppi
 
 ### UI Icons
 
-ProzillaOS uses [Font Awesome](https://fontawesome.com/) icons in its UI.
+ProzillaOS uses [Font Awesome](https://fontawesome.com/) icons (some modified) in its UI.
 
 ### App Icons
 
-The apps use icons that are either modified versions of FontAwesome icons or originals, designed by Prozilla.
+The apps use icons that are either modified versions of FontAwesome icons or custom icons, designed by Prozilla.
 
 ### Color Palette
 

docs/features/README.md

@@ -10,10 +10,11 @@ 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)
-- [Virtual Drive](virtual-drive//README.md)
-- [Windows](windows/README.md)
-- [Taskbar](taskbar/README.md)
-- [Settings](settings/README.md)
 - [Modals](modals/README.md)
+- [Settings](settings/README.md)
 - [Storage](storage/README.md)
+- [Taskbar](taskbar/README.md)
+- [Virtual Drive](virtual-drive//README.md)
+- [Windows](windows/README.md)

docs/features/actions/README.md

@@ -0,0 +1,28 @@
+[← Back](../README.md)
+
+# Actions
+
+A React component used to group and display actions together. This is used in the context menu for example, where each option is a separate action. It can take in a certain style and be passed to a modal, it also supports shortcuts and icons.
+
+## Example
+
+```jsx
+<Actions className={STYLES.SHORTCUTS_LISTENER}>
+	<ClickAction
+		label="Reload"
+		shortcut={["Control", "r"]}
+		icon={faArrowsRotate}
+		onTrigger={() => {
+			reloadViewport();
+		}}
+	/>
+	<ClickAction
+		label="Exit"
+		shortcut={["Control", "q"]}
+		icon={faTimes}
+		onTrigger={() => {
+			closeViewport();
+		}}
+	/>
+</Actions>
+```

docs/features/applications/README.md

@@ -10,11 +10,11 @@ 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: text-bottom; background: none;"/> Terminal ("Commands")](terminal/README.md)
-- [<img src="../../../public/media/applications/icons/file-explorer.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> File Explorer ("Files")](file-explorer/README.md)
-- [<img src="../../../public/media/applications/icons/media-viewer.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> Media Viewer ("Photos")](media-viewer/README.md)
-- [<img src="../../../public/media/applications/icons/text-editor.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> Text Editor ("Notes")](text-editor/README.md)
-- [<img src="../../../public/media/applications/icons/settings.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> Settings](settings/README.md)
+- [<img src="../../../public/assets/applications/icons/terminal.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> Terminal ("Commands")](terminal/README.md)
+- [<img src="../../../public/assets/applications/icons/file-explorer.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> File Explorer ("Files")](file-explorer/README.md)
+- [<img src="../../../public/assets/applications/icons/media-viewer.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> Media Viewer ("Photos")](media-viewer/README.md)
+- [<img src="../../../public/assets/applications/icons/text-editor.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> Text Editor ("Notes")](text-editor/README.md)
+- [<img src="../../../public/assets/applications/icons/settings.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> Settings](settings/README.md)
 
 ## Common components
 

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

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

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

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

docs/features/applications/settings/README.md

@@ -1,5 +1,9 @@
 [← Back](../README.md)
 
-# <img src="../../../../public/media/applications/icons/settings.svg" width=30 height=30 style="vertical-align: middle; background: none;"/> Settings 
+# <img src="../../../../public/assets/applications/icons/settings.svg" width=30 height=30 style="vertical-align: middle; background: none;"/> Settings 
 
-Allows the user to change their settings and personalize their instance of ProzillaOS.
+Allows the user to change their settings and personalize their instance of ProzillaOS.
+
+## Screenshot
+
+![Settings window on appearance tab with wallpaper option](screenshot.png)

docs/features/applications/terminal/README.md

@@ -1,26 +1,42 @@
 [← Back](../README.md)
 
-# <img src="../../../../public/media/applications/icons/terminal.svg" width=30 height=30 style="vertical-align: middle; background: none;"/> Terminal ("Commands")
+# <img src="../../../../public/assets/applications/icons/terminal.svg" width=30 height=30 style="vertical-align: middle; background: none;"/> Terminal ("Commands")
 
 A command line tool.
 
+## Screenshot
+
+![Terminal window with neofetch command](screenshot.png)
+
 ## 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.
 
-### Examples
+## Examples
+
+### Touch command
 
 ```js
-// features/applications/terminal/commands.js
+// features/applications/terminal/commands/touch.js
 
-new Command("cd", (args, { currentDirectory, setCurrentDirectory }) => {
-	const path = args[0] ?? "~"; // Default to home directory
-	const destination = currentDirectory.navigate(path);
-
-	if (!destination)
-		return `cd: ${args[0]}: No such file or directory`;
-
-	setCurrentDirectory(destination);
-	return { blank: true }; // Returns without printing anything to the terminal
-}),
+export const touch = new Command("touch")
+	.setRequireArgs(true)
+	.setManual({
+		purpose: "Change file timestamps",
+		usage: "touch [OPTION]... FILE...",
+		description: "Update the access and modification times of each FILE to the current time.\n\n"
+			+ "A FILE argument that does not exist is created empty."
+	})
+	.setExecute(function(args, { currentDirectory }) {
+		if (args[0] === "girls\\" && args[1] === "boo**")
+			return `${this.name}: Cannot touch 'girls boo**': Permission denied`;
+	
+		const [name, extension] = args[0].split(".");
+	
+		if (currentDirectory.findFile(name, extension))
+			return { blank: true };
+	
+		currentDirectory.createFile(name, extension);
+		return { blank: true };
+	});
 ```

docs/features/applications/text-editor/README.md

@@ -1,5 +1,9 @@
 [← Back](../README.md)
 
-# <img src="../../../../public/media/applications/icons/text-editor.svg" width=30 height=30 style="vertical-align: middle; background: none;"/> Text Editor ("Notes")
+# <img src="../../../../public/assets/applications/icons/text-editor.svg" width=30 height=30 style="vertical-align: middle; background: none;"/> Text Editor ("Notes")
 
-An application for editing text documents.
+An application for editing text documents.
+
+## Screenshot
+
+![Text Editor window displaying info.md in preview mode](screenshot.png)

docs/features/settings/README.md

@@ -4,7 +4,9 @@
 
 Each group of settings is controlled by a separate xml file. The virtual directory for these files is `~/.config`. The default values for these files can be viewed and edited inside the [public/config](../../../public/config/) directory.
 
-## Example
+## Examples
+
+### Example of config file containing settings
 
 ```xml
 <!-- public/config/desktop.xml -->
@@ -14,8 +16,27 @@ Each group of settings is controlled by a separate xml file. The virtual directo
  	The virtual file can be found at "~/.config/desktop.xml".
 -->
 
-<?xml version="1.0"?>
 <options>
-	<wallpaper>/media/wallpapers/wallpaper-1.png</wallpaper>
+	<wallpaper>/assets/wallpapers/vibrant-wallpaper-purple-yellow.png</wallpaper>
 </options>
+```
+
+### Example of component reading settings
+
+```js
+// components/desktop/Desktop.jsx
+
+export function Desktop() {
+	const settingsManager = useSettingsManager();
+	const [wallpaper, setWallpaper] = useState(null);
+
+	useEffect(() => {
+		(async () => {
+			const settings = settingsManager.get(SettingsManager.VIRTUAL_PATHS.desktop);
+			settings.get("wallpaper", setWallpaper);
+		})();
+	}, [settingsManager]);
+
+	return <img src={wallpaper}/>;
+}
 ```

docs/features/taskbar/README.md

@@ -8,6 +8,6 @@ The taskbar can be split up into 3 main segments:
 
 - Menus - This includes the home menu, where you can find quick access and a list of applications and the search menu, where you can search for applications by name.
 
-- Apps list - This is a list of pinned applications, similar to how Window's taskbar pinning works.
+- App list - This is a list of pinned and active applications.
 
 - Indicators - This is a group of indicators that are used to display information, like battery power, network connection and volume.

docs/features/virtual-drive/README.md

@@ -6,12 +6,6 @@
 
 The virtual drive is a virtual file and directory system. The root directory is a virtual folder and the access point for all interactions with the virtual drive.
 
-## Table of Contents
-
-- [Virtual Root](./virtual-root/README.md)
-- [Virtual File](./virtual-file/README.md)
-- [Virtual Folder](./virtual-folder/README.md)
-
 ## Examples
 
 ### Component interacting with virtual drive
@@ -27,4 +21,24 @@ export function Example() {
 		file.setContent("Foo bar.");
 	});
 }
-```
+```
+
+## Virtual Root
+
+The virtual root is a virtual folder that contains all other folders and files. It serves as the root directory for the virtual drive and is used as an access point in applications.
+
+The default data for the virtual root is set in the `loadDefaultData()` function in the `VirtualRoot` class.
+
+For more information about how the virtual root is stored and loaded, check the [Storage](../storage/README.md) docs.
+
+## Virtual File
+
+Virtual files can have content or a source URL. Content is mainly used for text files, while the source property is mainly used for images.
+
+## Virtual Folder
+
+Virtual folders can contain files and sub-folders.
+
+## Virtual File & Folder link
+
+Virtual file links are files with no content or source URL, that simply point to another file on the virtual drive. Virtual folder links are folders with no sub-folders or files, that point to another folder. Virtual links can have some properties of their own, like a name or an icon URL.

docs/features/virtual-drive/virtual-file/README.md

@@ -1,5 +0,0 @@
-[← Back](../README.md)
-
-# Virtual File
-
-Virtual files can have content or a source URL. Content is mostly used for text files, while the source property is mostly used for images.

docs/features/virtual-drive/virtual-folder/README.md

@@ -1,5 +0,0 @@
-[← Back](../README.md)
-
-# Virtual Folder
-
-Virtual folders can contain files and sub-folders.

docs/features/virtual-drive/virtual-root/README.md

@@ -1,9 +0,0 @@
-[← Back](../README.md)
-
-# Virtual Root
-
-The virtual root is a virtual folder that contains all other folders and files. It serves as the root directory for the virtual drive and is used as an access point in applications.
-
-The default data for the virtual root is set in the `loadDefaultData()` function in the `VirtualRoot` class.
-
-For more information about how the virtual root is stored and loaded, check the [Storage](../../storage/README.md) docs.

docs/roadmap/README.md

@@ -6,10 +6,6 @@ This is a list of planned/in progress features.
 
 For more detailed information, check the [task board](https://prozilla.notion.site/8325fabca1fb4f9885b6d6dfd5aa64c8?v=1a59f7ce50914f5ea711fe6460e52868&pvs=4) on Notion.
 
-## Desktop
-
-A customizable desktop with a wallpaper and shortcuts to applications, files or folders.
-
 ## Visual Studio Code clone
 
 A fully functional VSC clone called Code Editor.

public/config/desktop.xml

@@ -1,3 +1,3 @@
 <options>
-	<wallpaper>/media/wallpapers/mesh-gradient-wallpaper-red-purple.png</wallpaper>
+	<wallpaper>/assets/wallpapers/vibrant-wallpaper-purple-yellow.png</wallpaper>
 </options>

public/documents/info.md

@@ -1,4 +1,4 @@
-<img src="/media/banner-logo-title.png" width="1440" height="700" style="aspect-ratio: 3 / 1; width: 100%; height: auto; object-fit: cover;" alt="Banner with ProzillaOS' name and logo"/>
+<img src="/assets/banner-logo-title.png" width="1440" height="700" style="aspect-ratio: 3 / 1; width: 100%; height: auto; object-fit: cover;" alt="Banner with ProzillaOS' name and logo"/>
 
 # Info
 

public/index.html

@@ -10,8 +10,8 @@
 
 		<!-- Favicon -->
 		<link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
-		<link rel="shortcut icon" type="image/svg+xml" href="%PUBLIC_URL%/media/logo.svg"/>
-		<link rel="mask-icon" href="%PUBLIC_URL%/media/logo.svg" color="#1dd1a1"/>
+		<link rel="shortcut icon" type="image/svg+xml" href="%PUBLIC_URL%/assets/logo.svg"/>
+		<link rel="mask-icon" href="%PUBLIC_URL%/assets/logo.svg" color="#1dd1a1"/>
 		<meta name="msapplication-TileColor" content="#222f3e"/>
 		<meta name="theme-color" content="#54a0ff"/>
 
@@ -20,15 +20,15 @@
 		<meta property="og:site_name" content="ProzillaOS"/>
 		<meta property="og:description" content="ProzillaOS is an open-source web-based operating system inspired by Ubuntu Linux and Windows made with React.js by Prozilla."/>
 		<meta property="og:type" content="website"/>
-		<meta property="og:image" content="%PUBLIC_URL%/media/banner-logo-title.png"/>
+		<meta property="og:image" content="%PUBLIC_URL%/assets/banner-logo-title.png"/>
 		<meta property="og:locale" content="en_US">
 
 		<!-- Fonts -->
-		<link rel="preload" href="%PUBLIC_URL%/media/fonts/poppins/Poppins-Light.ttf" as="font" type="font/ttf" crossorigin>
-		<link rel="preload" href="%PUBLIC_URL%/media/fonts/poppins/Poppins-Regular.ttf" as="font" type="font/ttf" crossorigin>
-		<link rel="preload" href="%PUBLIC_URL%/media/fonts/poppins/Poppins-SemiBold.ttf" as="font" type="font/ttf" crossorigin>
-		<link rel="preload" href="%PUBLIC_URL%/media/fonts/poppins/Poppins-Bold.ttf" as="font" type="font/ttf" crossorigin>
-		<link rel="preload" href="%PUBLIC_URL%/media/fonts/roboto-mono/RobotoMono-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin>
+		<link rel="preload" href="%PUBLIC_URL%/assets/fonts/poppins/Poppins-Light.ttf" as="font" type="font/ttf" crossorigin>
+		<link rel="preload" href="%PUBLIC_URL%/assets/fonts/poppins/Poppins-Regular.ttf" as="font" type="font/ttf" crossorigin>
+		<link rel="preload" href="%PUBLIC_URL%/assets/fonts/poppins/Poppins-SemiBold.ttf" as="font" type="font/ttf" crossorigin>
+		<link rel="preload" href="%PUBLIC_URL%/assets/fonts/poppins/Poppins-Bold.ttf" as="font" type="font/ttf" crossorigin>
+		<link rel="preload" href="%PUBLIC_URL%/assets/fonts/roboto-mono/RobotoMono-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin>
 
 		<!-- FAQ -->
 		<script type="application/ld+json">

public/sitemap.xml

@@ -5,34 +5,34 @@
 	<url>
 		<loc>https://os.prozilla.dev/</loc>
 		<image:image>
-			<image:loc>https://os.prozilla.dev/media/banner-logo-title.png</image:loc>
+			<image:loc>https://os.prozilla.dev/assets/banner-logo-title.png</image:loc>
 		</image:image>
 		<image:image>
-			<image:loc>https://os.prozilla.dev/media/screenshots/screenshot-files-settings-taskbar-desktop.png</image:loc>
+			<image:loc>https://os.prozilla.dev/assets/screenshots/screenshot-files-settings-taskbar-desktop.png</image:loc>
 		</image:image>
 		<image:image>
-			<image:loc>https://os.prozilla.dev/media/wallpapers/abstract-mesh-gradient-orange-red-purple.png</image:loc>
+			<image:loc>https://os.prozilla.dev/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png</image:loc>
 		</image:image>
 		<image:image>
-			<image:loc>https://os.prozilla.dev/media/wallpapers/abstract-wallpaper-mesh-gradient-cyan.png</image:loc>
+			<image:loc>https://os.prozilla.dev/assets/wallpapers/abstract-wallpaper-mesh-gradient-cyan.png</image:loc>
 		</image:image>
 		<image:image>
-			<image:loc>https://os.prozilla.dev/media/wallpapers/colorful-abstract-wallpaper-blue-red-green.png</image:loc>
+			<image:loc>https://os.prozilla.dev/assets/wallpapers/colorful-abstract-wallpaper-blue-red-green.png</image:loc>
 		</image:image>
 		<image:image>
-			<image:loc>https://os.prozilla.dev/media/wallpapers/colorful-mesh-gradient-yellow-blue-green.png</image:loc>
+			<image:loc>https://os.prozilla.dev/assets/wallpapers/colorful-mesh-gradient-yellow-blue-green.png</image:loc>
 		</image:image>
 		<image:image>
-			<image:loc>https://os.prozilla.dev/media/wallpapers/mesh-gradient-wallpaper-red-purple.png</image:loc>
+			<image:loc>https://os.prozilla.dev/assets/wallpapers/mesh-gradient-wallpaper-red-purple.png</image:loc>
 		</image:image>
 		<image:image>
-			<image:loc>https://os.prozilla.dev/media/wallpapers/vibrant-wallpaper-blue-purple-red.png</image:loc>
+			<image:loc>https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png</image:loc>
 		</image:image>
 		<image:image>
-			<image:loc>https://os.prozilla.dev/media/wallpapers/vibrant-wallpaper-purple-yellow.png</image:loc>
+			<image:loc>https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-purple-yellow.png</image:loc>
 		</image:image>
 		<image:image>
-			<image:loc>https://os.prozilla.dev/media/wallpapers/wave-abstract-wallpaper-teal.png</image:loc>
+			<image:loc>https://os.prozilla.dev/assets/wallpapers/wave-abstract-wallpaper-teal.png</image:loc>
 		</image:image>
 	</url>
 </urlset>

src/components/modals/dialog-box/DialogBox.jsx

@@ -72,7 +72,7 @@ export function DialogBox({ modal, params }) {
 			<div className={`${styles.Header} Dialog-handle`}>
 				<ReactSVG
 					className={styles["Dialog-icon"]}
-					src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`}
+					src={process.env.PUBLIC_URL + `/assets/applications/icons/${app.id}.svg`}
 				/>
 				<p className={utilStyles["Text-semibold"]}>{title}</p>
 				<button aria-label="Close" className={`${styles["Header-button"]} ${styles["Exit-button"]}`} tabIndex={0} id="close-dialog"

src/components/taskbar/Taskbar.jsx

@@ -139,7 +139,7 @@ export const Taskbar = memo(() => {
 							className={`${styles["Menu-button"]} ${styles["Home-button"]}`}
 							onClick={() => { updateShowHome(!showHome); }}
 						>
-							<ReactSVG src={process.env.PUBLIC_URL + "/media/logo.svg"}/>
+							<ReactSVG src={process.env.PUBLIC_URL + "/assets/logo.svg"}/>
 						</button>
 						<HomeMenu active={showHome} setActive={updateShowHome} search={search}/>
 					</OutsideClickListener>

src/components/taskbar/app-icon/AppIcon.jsx

@@ -60,7 +60,7 @@ export const AppButton = memo(({ app, modalsManager, pins, active, visible }) =>
 			}}
 			title={app.name}
 		>
-			<ReactSVG src={`${process.env.PUBLIC_URL}/media/applications/icons/${app.id}.svg`}/>
+			<ReactSVG src={`${process.env.PUBLIC_URL}/assets/applications/icons/${app.id}.svg`}/>
 		</button>
 	);
 });

src/constants/desktop.js

@@ -1,12 +1,12 @@
 export const WALLPAPERS = [
-	"/media/wallpapers/abstract-mesh-gradient-orange-red-purple.png",
-	"/media/wallpapers/abstract-wallpaper-mesh-gradient-cyan.png",
-	"/media/wallpapers/colorful-abstract-wallpaper-blue-red-green.png",
-	"/media/wallpapers/colorful-mesh-gradient-yellow-blue-green.png",
-	"/media/wallpapers/mesh-gradient-wallpaper-red-purple.png",
-	"/media/wallpapers/vibrant-wallpaper-blue-purple-red.png",
-	"/media/wallpapers/vibrant-wallpaper-purple-yellow.png",
-	"/media/wallpapers/wave-abstract-wallpaper-teal.png",
+	"/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png",
+	"/assets/wallpapers/abstract-wallpaper-mesh-gradient-cyan.png",
+	"/assets/wallpapers/colorful-abstract-wallpaper-blue-red-green.png",
+	"/assets/wallpapers/colorful-mesh-gradient-yellow-blue-green.png",
+	"/assets/wallpapers/mesh-gradient-wallpaper-red-purple.png",
+	"/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png",
+	"/assets/wallpapers/vibrant-wallpaper-purple-yellow.png",
+	"/assets/wallpapers/wave-abstract-wallpaper-teal.png",
 ];
 
-export const FALLBACK_WALLPAPER = WALLPAPERS[4];
+export const FALLBACK_WALLPAPER = WALLPAPERS[6];

src/features/applications/applications.js

@@ -81,9 +81,9 @@ export default class AppsManager {
 	 */
 	static getAppIconUrl(appId, iconName) {
 		if (iconName == null) {
-			return `${process.env.PUBLIC_URL}/media/applications/icons/${appId}.svg`;
+			return `${process.env.PUBLIC_URL}/assets/applications/icons/${appId}.svg`;
 		} else {
-			return `${process.env.PUBLIC_URL}/media/applications/${appId}/icons/${iconName}.svg`;
+			return `${process.env.PUBLIC_URL}/assets/applications/${appId}/icons/${iconName}.svg`;
 		}
 	}
 }

src/features/virtual-drive/virtualRoot.js

@@ -70,7 +70,7 @@ export class VirtualRoot extends VirtualFolder {
 								});
 							}
 						}).createFile("ProzillaOS", "png", (file) => {
-							file.setSource("/media/banner-logo-title.png");
+							file.setSource("/assets/banner-logo-title.png");
 						});
 						linkedPaths.images = folder.path;
 					})

src/styles/global/fonts.css

@@ -7,62 +7,62 @@
 
 @font-face {
 	font-family: "Poppins";
-	src: url("/public/media/fonts/poppins/Poppins-Thin.ttf");
+	src: url("/public/assets/fonts/poppins/Poppins-Thin.ttf");
 	font-weight: 100;
 	font-display: swap;
 }
 
 @font-face {
 	font-family: "Poppins";
-	src: url("/public/media/fonts/poppins/Poppins-ExtraLight.ttf");
+	src: url("/public/assets/fonts/poppins/Poppins-ExtraLight.ttf");
 	font-weight: 200;
 	font-display: swap;
 }
 
 @font-face {
 	font-family: "Poppins";
-	src: url("/public/media/fonts/poppins/Poppins-Light.ttf");
+	src: url("/public/assets/fonts/poppins/Poppins-Light.ttf");
 	font-weight: 300;
 	font-display: swap;
 }
 
 @font-face {
 	font-family: "Poppins";
-	src: url("/public/media/fonts/poppins/Poppins-Regular.ttf");
+	src: url("/public/assets/fonts/poppins/Poppins-Regular.ttf");
 	font-weight: 400;
 	font-display: swap;
 }
 
 @font-face {
 	font-family: "Poppins";
-	src: url("/public/media/fonts/poppins/Poppins-SemiBold.ttf");
+	src: url("/public/assets/fonts/poppins/Poppins-SemiBold.ttf");
 	font-weight: 500;
 	font-display: swap;
 }
 
 @font-face {
 	font-family: "Poppins";
-	src: url("/public/media/fonts/poppins/Poppins-Bold.ttf");
+	src: url("/public/assets/fonts/poppins/Poppins-Bold.ttf");
 	font-weight: 600;
 	font-display: swap;
 }
 
 @font-face {
 	font-family: "Poppins";
-	src: url("/public/media/fonts/poppins/Poppins-ExtraBold.ttf");
+	src: url("/public/assets/fonts/poppins/Poppins-ExtraBold.ttf");
 	font-weight: 700;
 	font-display: swap;
 }
 
 @font-face {
 	font-family: "Poppins";
-	src: url("/public/media/fonts/poppins/Poppins-Black.ttf");
+	src: url("/public/assets/fonts/poppins/Poppins-Black.ttf");
 	font-weight: 800;
 	font-display: swap;
 }
 
 @font-face {
 	font-family: "Roboto Mono";
-	src: url("/public/media/fonts/roboto-mono/RobotoMono-VariableFont_wght.ttf");
+	src: url("/public/assets/fonts/roboto-mono/RobotoMono-VariableFont_wght.ttf");
 	font-display: swap;
 }