Added image previews for file explorer

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

@@ -16,7 +16,9 @@ function FilePreview({ file }) {
 
 	switch (file.extension) {
 		case "png":
-			preview = <FontAwesomeIcon icon={faImage}/>
+			preview = (<div className={styles["File-button-preview"]}>
+				<img src={file.source} alt={file.id}/>
+			</div>)
 			break;
 		case "txt":
 			preview = <FontAwesomeIcon icon={faFileLines}/>

src/components/applications/file-explorer/FileExplorer.module.css

@@ -1,7 +1,7 @@
 .Container {
 	--header-height: 3.5rem;
 	--sidebar-width: 10rem;
-	--scale: 1rem;
+	--scale: 1.15rem;
 
 	display: flex;
 	flex-direction: column;
@@ -141,6 +141,17 @@
 	background-color: rgba(255, 255, 255, 10%);
 }
 
+.File-button-preview {
+	height: 100%;
+	overflow: hidden;
+}
+
+.File-button-preview > * {
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
+
 .File-button svg, .Folder-button svg {
 	width: 50%;
 	height: auto;

src/components/task-bar/HomeMenu.jsx

@@ -16,8 +16,6 @@ export function HomeMenu({ active, setActive }) {
 
 	let onlyAltKey = false;
 	const onKeyDown = (event) => {
-		console.log(event);
-		
 		if (event.key === "Alt") {
 			event.preventDefault();
 			onlyAltKey = true;
@@ -27,8 +25,6 @@ export function HomeMenu({ active, setActive }) {
 	}
 
 	const onKeyUp = (event) => {
-		console.log(event);
-
 		if (event.key === "Alt" && onlyAltKey) {
 			event.preventDefault();
 			setActive(!active);

src/components/task-bar/HomeMenu.module.css

@@ -22,6 +22,7 @@
 .Container-inner {
 	display: flex;
 	min-width: 16rem;
+	max-width: 32rem;
 	border-top-left-radius: 0.5rem;
 	border-top-right-radius: 0.5rem;
 	border-bottom-right-radius: 0.5rem;

src/hooks/virtual-drive/VirtualRootContext.js

@@ -38,13 +38,13 @@ function initVirtualRoot(virtualRoot) {
 		folder.createFolder("prozilla-os", (folder) => {
 			folder.setAlias("~")
 				.createFolder("Images", (folder) => {
-					folder.createFile("Wallpaper_1", "png", (file) => {
+					folder.createFile("Wallpaper1", "png", (file) => {
 						file.setSource("/media/wallpapers/wallpaper1.png")
-					}).createFile("Wallpaper_2", "png", (file) => {
+					}).createFile("Wallpaper2", "png", (file) => {
 						file.setSource("/media/wallpapers/wallpaper2.png")
-					}).createFile("Wallpaper_3", "png", (file) => {
+					}).createFile("Wallpaper3", "png", (file) => {
 						file.setSource("/media/wallpapers/wallpaper3.png")
-					}).createFile("Wallpaper_4", "png", (file) => {
+					}).createFile("Wallpaper4", "png", (file) => {
 						file.setSource("/media/wallpapers/wallpaper4.png")
 					});
 				})