[Feature] Collapsable Directories(Folders) in Application Editor

src/assets/styles/components/_web-ide.scss

@@ -81,7 +81,7 @@
 					padding: 0 !important;
 					padding-inline-start: 8px !important;
 
-					.folder-container {
+					.file-container {
 						button::before,
 						i::before {
 							background: transparent !important;
@@ -109,15 +109,6 @@
 							text-align: left;
 							white-space: nowrap;
 
-							.project-icon,
-							.package-icon {
-								color: $color-success;
-							}
-
-							.folder-icon {
-								color: $color-info;
-							}
-
 							.filetype-js {
 								color: $color-warning;
 							}
@@ -130,6 +121,59 @@
 								color: $color-lightgrey;
 							}
 
+							&.file-selected {
+								.filename-text {
+									color: $color-white !important;
+
+									&::after {
+										content: '\f35a' !important;
+										font-family: 'Font Awesome 5 Free', sans-serif !important;
+										font-size: 16px;
+										position: absolute;
+										right: 8px;
+									}
+								}
+							}
+						}
+					}
+
+					.folder-container {
+						button::before,
+						i::before {
+							background: transparent !important;
+							border: 0;
+							font-size: 16px !important;
+							margin: 0;
+							outline: none !important;
+							padding: 0;
+						}
+
+						.package-text,
+						.filename-text {
+							color: $color-grey !important;
+							font-size: 14px !important;
+							padding-left: 8px;
+						}
+
+						.file,
+						.package {
+							background: transparent;
+							border: 0;
+							margin: 1px 0;
+							outline: none !important; // TODO: fix this because it is not accessible; style differently
+							padding: 3px;
+							text-align: left;
+							white-space: nowrap;
+
+							.project-icon,
+							.package-icon {
+								color: $color-success;
+							}
+
+							.folder-icon {
+								color: $color-info;
+							}
+
 							&.folder-selected {
 								.filename-text {
 									color: $color-white !important;
@@ -158,6 +202,12 @@
 						}
 					}
 				}
+				.folder-open ~ li {
+					display: block;
+				}
+				.folder-closed ~ li {
+					display: none;
+				}
 			}
 		}
 	}

src/components/auth/AuthLayout.jsx

@@ -1,7 +1,7 @@
 import { Outlet } from 'react-router';
 import { Col, Container, Row } from 'reactstrap';
 
-function AuthLayout({ children }) {
+function AuthLayout() {
 	return (
 		<Container fluid="xs" className="h-100">
 			<Row xs="1" sm="2" className="h-100">

src/components/instance/functions/manage/applicationsEditor/FileBrowser.js

@@ -43,9 +43,20 @@ const isFolder = (entry) => Boolean(entry.entries);
 function ProjectIcon() {
 	return <i className={cn(`project-icon fas fa-file-code`)} />;
 }
-function FolderIcon({ toggleClosed }) {
-	// eslint-disable-next-line
-	return <i onClick={toggleClosed} onKeyDown={toggleClosed} className={cn(`folder-icon fas fa-folder-open`)} />;
+function FolderIcon({ toggleClosed, isOpen }) {
+	return (
+		// TODO: A11y on this is not good at all..... Need to refactor the file tree to make the file tree more accessible for ALL users.
+		<i
+			onClick={toggleClosed}
+			onKeyDown={toggleClosed}
+			className={cn(`folder-icon fas ${isOpen ? 'fa-folder-open' : 'fa-folder'}`)}
+			tabIndex={0}
+			aria-expanded={isOpen}
+			aria-controls="folder"
+			aria-label={isOpen ? 'close folder' : 'open folder'}
+			role="button"
+		/>
+	);
 }
 
 function FiletypeIcon({ extension }) {
@@ -99,7 +110,6 @@ function File({ directoryEntry, selectedFile, selectedFolder, onFileSelect, onFo
 	const deployFileIconClass = 'deploy-project';
 	const isFileSelected = directoryEntry.path === selectedFile;
 	const isFolderSelected = directoryEntry.path === selectedFolder?.path;
-
 	// file receives open/close toggle func from
 	// parent. if it's a dir, calls toggle func on click
 	// if it's a flat file, calls onFileSelect so
@@ -119,7 +129,6 @@ function File({ directoryEntry, selectedFile, selectedFolder, onFileSelect, onFo
 		// that we don't untoggle directory selection; leave selected if icon clicked.
 		const iconWasClicked =
 			e.target.classList.contains(renameFileIconClass) || e.target.classList.contains(deployFileIconClass);
-
 		// if icon's clicked, select, but don't unselect.
 		// if (iconWasClicked) return;
 
@@ -188,7 +197,12 @@ function Folder({
 			{
 				// FIXME: don't hardcode 'components', get from root .name property of fileTree.
 				directoryEntry.name !== 'components' ? (
-					<li key={directoryEntry.key} className={cn('folder-container')}>
+					<li
+						key={directoryEntry.key}
+						className={cn(
+							`${directoryEntry.entries ? 'folder-container' : 'file-container'} ${open ? 'folder-open' : 'folder-closed'}`
+						)}
+					>
 						{directoryEntry.package ? (
 							<Package
 								selectedPackage={selectedPackage}