refactor: Adopt granular item rendering and restore empty folder placeholder

Overhaul the directory rendering logic in the file browser by replacing monolithic template compilation with programmatic DOM element construction and individual item parsing.

Previously, directory list rendering relied on a single template (`list.hbs`) that wrapped the outer `<ul>` element, handled list iteration (`{{#list}}`), and relied on the `mustache` package's built-in capability to render placeholder text if the element had no children when the `empty-msg` HTML attribute was provided.

This commit refactors the template down to a granular single-item scale and adds the empty state placeholder back explicitly via programmatic rendering. By splitting template rendering into granular helper functions (`createListEl`, `createListItemEl`, and `createPlaceholderEl`), directory rendering now builds list elements individually and explicitly appends a styled placeholder node whenever a directory contains no files or folders.

* **Template Scope Reduction (`src/pages/fileBrowser/listItem.hbs`):**
* Removed the enclosing `<ul class="list" id="list">` container tag and the surrounding `{{#list}}...{{/list}}` iteration block from the Handlebars template.
* Converted the file into a standalone item partial that takes an entry object and produces a single `<li>` element representing a file or directory row.

* **DOM Element Construction Helpers (`src/pages/fileBrowser/fileBrowser.js`):**
* Added `createListEl()` to dynamically generate the parent `<ul className="list" id="list">` element.
* Added `createListItemEl(obj)` to parse individual item objects through `mustache.render(_listItem, obj)` into single `HTMLLIElement` nodes.
* Added `createPlaceholderEl(msg)` to create dedicated empty-state DOM elements (`<div id="placeholder">{msg}</div>`).

* **Render Loop & Empty State Logic (`src/pages/fileBrowser/fileBrowser.js`):**
* Updated `render(dir)` to construct list containers programmatically and append rendered child elements via standard DOM iteration (`$list.appendChild(el)`).
* Re-implemented empty directory handling: if `list.length` is zero, a placeholder element containing the localized empty folder string is appended to the list, restoring the empty message functionality previously supplied via Mustache's `empty-msg` attribute.

* **Placeholder Layout Styling (`src/pages/fileBrowser/fileBrowser.scss`):**
* Defined CSS rules for `#placeholder` utilizing Flexbox (`display: flex`, `align-items: center`, `justify-content: center`) to ensure empty folder messages are centered within the file browser container.

(AI generated commit message)

Author: AuDevTist1C

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";
 
 /**
@@ -1720,14 +1720,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

@@ -1,29 +1,24 @@
-<ul class="list" id="list" empty-msg="{{msg}}">{{#list}}
-  {{#.}}
-  <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>
-  {{/.}}
-  {{/list}}
-</ul>
+<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>