refactor(file-browser): Granular item rendering and programmatic DOM list construction

src/pages/fileBrowser/fileBrowser.js

@@ -31,7 +31,7 @@ import Url from "utils/Url";
 import _addMenu from "./add-menu.hbs";
 import _addMenuHome from "./add-menu-home.hbs";
 import _template from "./fileBrowser.hbs";
-import _list from "./list.hbs";
+import _listItem from "./listItem.hbs";
 import util from "./util";
 
 /**
@@ -1708,14 +1708,43 @@ function FileBrowserInclude(mode, info, doesOpenLast = true) {
 			if (doesReload) reload();
 		}
 
+		/**
+		 * @param {string} [msg]
+		 * @returns {HTMLDivElement | null}
+		 */
+		function createPlaceholderEl(msg) {
+			return <div id="placeholder">{msg}</div>;
+		}
+
+		/**
+		 * @returns {HTMLUListElement}
+		 */
+		function createListEl() {
+			return <ul className="list" id="list"></ul>;
+		}
+
+		/**
+		 * @param {object} obj
+		 * @returns {HTMLLIElement}
+		 */
+		function createListItemEl(obj) {
+			return helpers.parseHTML(mustache.render(_listItem, obj));
+		}
+
 		function render(dir) {
 			const { list, scroll } = dir;
-			const $list = helpers.parseHTML(
-				mustache.render(_list, {
-					msg: strings["empty folder message"],
-					list,
-				}),
-			);
+			const $list = createListEl();
+
+			if (list.length) {
+				for (const item of list) {
+					const el = createListItemEl(item);
+					$list.appendChild(el);
+				}
+			} else {
+				const msg = strings["empty folder message"];
+				const el = createPlaceholderEl(msg);
+				$list.appendChild(el);
+			}
 
 			if (document.getElementById("search-bar")) {
 				hideSearchBar();

src/pages/fileBrowser/fileBrowser.scss

@@ -89,6 +89,17 @@
     height: calc(100% - 60px);
     overflow-y: auto;
 
+    > #placeholder {
+      width: 100%;
+      height: 100%;
+      font-size: 1.2em;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+    }
+
     .tile {
       &[disabled] {
         .text {

src/pages/fileBrowser/listItem.hbs

@@ -0,0 +1,24 @@
+<li
+  tabindex="1"
+  class="tile {{#isLink}}symlink{{/isLink}}"
+  action="open"
+  type="{{type}}"
+  name="{{name}}"
+  {{#home}}home="{{.}}"{{/home}}
+  {{#notSelectable}}data-not-selectable{{/notSelectable}}
+  {{#open-doc}}open-doc="true"{{/open-doc}}
+  {{#ftp-account}}ftp-account{{/ftp-account}}
+  {{#disabled}}disabled{{/disabled}}
+  {{#uuid}}uuid="{{uuid}}"{{/uuid}}
+  {{#storageType}}storageType="{{.}}"{{/storageType}}
+>
+  <span
+    class="icon {{icon}} {{#uuid}}user-added-storage{{/uuid}}"
+    {{#storageType}}storageType="{{.}}"{{/storageType}}
+  ></span>
+
+  <div class="text">
+    <span>{{name}}</span>
+  </div>
+  <data-url>{{url}}</data-url>
+</li>