feat: revamped file tree (#1302)

- removed menu icon
- file tree is now horizontally scrollable when there is long file names
- added indent guide in file tree

Author: bajrangCoder

src/components/sidebar/style.scss

@@ -124,6 +124,10 @@ body.no-animation {
     width: 100%;
     height: 100%;
 
+    &.files {
+      overflow-x: auto;
+    }
+
     > .list {
       width: 100%;
       max-width: 100%;

src/lib/openFolder.js

@@ -72,7 +72,6 @@ function openFolder(_path, opts = {}) {
 	}
 
 	const $root = collapsableList(title, "folder", {
-		tail: <Tail target={() => $root.$title} />,
 		allCaps: true,
 		ontoggle: () => expandList($root),
 	});
@@ -747,7 +746,6 @@ function appendList($target, $list) {
  */
 function createFolderTile(name, url) {
 	const $list = collapsableList(name, "folder", {
-		tail: <Tail target={() => $list.$title} />,
 		ontoggle: () => expandList($list),
 	});
 	const { $title } = $list;
@@ -768,7 +766,6 @@ function createFileTile(name, url) {
 	const $tile = tile({
 		lead: <span className={helpers.getIconForFile(name)}></span>,
 		text: name,
-		tail: <Tail target={() => $tile} />,
 	});
 	$tile.dataset.url = url;
 	$tile.dataset.name = name;
@@ -783,22 +780,22 @@ function createFileTile(name, url) {
  * @param {HTMLElement} param0.target
  * @returns {HTMLElement}
  */
-function Tail({ target }) {
-	return (
-		<span
-			className="icon more_vert"
-			attr-action="close"
-			onclick={(e) => {
-				e.stopPropagation();
-				e.preventDefault();
-				handleItems({
-					target: target(),
-					type: "contextmenu",
-				});
-			}}
-		></span>
-	);
-}
+// function Tail({ target }) {
+// 	return (
+// 		<span
+// 			className="icon more_vert"
+// 			attr-action="close"
+// 			onclick={(e) => {
+// 				e.stopPropagation();
+// 				e.preventDefault();
+// 				handleItems({
+// 					target: target(),
+// 					type: "contextmenu",
+// 				});
+// 			}}
+// 		></span>
+// 	);
+// }
 
 /**
  * Add file or folder to the list if expanded

src/sidebarApps/files/index.js

@@ -22,6 +22,7 @@ function initApp(el) {
 	container = el;
 	container.classList.add("files");
 	container.setAttribute("data-msg", strings["open folder"]);
+	container.style.overflowX = "auto";
 	container.addEventListener("click", clickHandler);
 	editorManager.on(
 		["new-file", "int-open-file-list", "remove-file"],

src/sidebarApps/files/style.scss

@@ -12,17 +12,88 @@
     }
   }
 
-  .list .icon.more_vert {
-    position: sticky;
-    right: 0;
+  /* Make the container horizontally scrollable */
+  overflow-x: auto !important;
+  max-width: 100%;
+
+  &::-webkit-scrollbar {
+    height: 5px;
+    width: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.3);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
+
+  .list {
+    min-width: 100%;
+    width: max-content;
+    max-width: none;
+  }
+
+  ul {
+    min-width: 100%;
+    width: max-content;
+    overflow-x: visible !important;
+    max-width: none;
+    margin-left: 0;
+    &::-webkit-scrollbar-corner {
+      background: transparent;
+    }
   }
 
-  .tile:not(.light) .icon.more_vert::before {
-    background-color: rgb(153, 153, 255);
-    background-color: var(--primary-color);
-    color: rgb(255, 255, 255);
-    color: var(--primary-text-color);
-    box-shadow: 0 0 5px 0 rgb(153, 153, 255);
-    box-shadow: 0 0 5px 0 var(--primary-color);
+  li {
+    min-width: 100%;
+    width: max-content;
+  }
+
+  .tile {
+    > .text {
+      white-space: nowrap !important;
+      overflow: visible !important;
+      width: max-content !important;
+      text-overflow: clip !important;
+    }
+  }
+
+  /* Add indent guides for folders (excluding first level) */
+  .list.collapsible > ul > .collapsible > ul {
+    position: relative;
+    padding-left: 24px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 14px;
+      top: 0;
+      height: 100%;
+      width: 1px;
+      background: var(--border-color);
+      z-index: 0;
+    }
+
+    /* Add guides for deeper nesting */
+    .collapsible > ul {
+      padding-left: 24px;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: 14px;
+        top: 0;
+        height: 100%;
+        width: 1px;
+        background: var(--border-color);
+        z-index: 0;
+      }
+    }
   }
-}
+}