feat(file-browser): Add parent directory navigation item to list view

Add a dedicated '..' list tile at the top of directory listings to provide explicit one-level-up navigation.

Update list template (`src/pages/fileBrowser/list.hbs`):
- Render parent directory tile ('..') when `prevDir` flag is active
- Adjust handlebars conditionals for message displays and item list loop

Handle `prevDir` action in file browser (`src/pages/fileBrowser/fileBrowser.js`):
- Add `prevDir` action handler navigating to `navStack.get(-2)`
- Pass `prevDir` condition check (`navStack.length >= 2`) into list render template
- Ignore context menu actions triggered on the `prevDir` item

Adjust layout styling (`src/pages/fileBrowser/fileBrowser.scss`):
- Adjust height calculation for message and spinner containers when `prevDir` item is visible

(AI generated commit message)

Author: AuDevTist1C

src/pages/fileBrowser/fileBrowser.js

@@ -1011,23 +1011,24 @@ function FileBrowserInclude(mode, info, doesOpenLast = true) {
 				return;
 			}
 
-			if (isContextMenu) action = "contextmenu";
-			else if (isOpenDoc) action = "openDoc";
+			if (isContextMenu) return contextMenuHandler();
+			if (isOpenDoc) action = "openDoc";
 
 			switch (action) {
 				case "navigation":
 					folder();
 					break;
-				case "contextmenu":
-					contextMenuHandler();
-					break;
 				case "open":
 					if (isDir) folder();
 					else if (!$el.hasAttribute("disabled")) file();
 					break;
 				case "openDoc":
 					openDoc();
 					break;
+				case "prevDir": {
+					const dir = navStack.get(-2);
+					if (dir) navigate(dir);
+				}
 			}
 
 			async function folder() {
@@ -1080,6 +1081,7 @@ function FileBrowserInclude(mode, info, doesOpenLast = true) {
 			}
 
 			async function contextMenuHandler() {
+				if (action === "prevDir") return;
 				if (appSettings.value.vibrateOnTap) {
 					navigator.vibrate(config.VIBRATION_TIME);
 				}
@@ -1726,13 +1728,22 @@ function FileBrowserInclude(mode, info, doesOpenLast = true) {
 			currentDir = dir;
 			updatePasteToggler();
 
+			const hasPrevDir = navStack.length >= 2;
 			let $placeholder;
 			let errMsg;
 			let { list } = dir;
 			if (!list) {
-				$placeholder = helpers.parseHTML(mustache.render(_list, {}));
+				$placeholder = helpers.parseHTML(
+					mustache.render(_list, {
+						prevDir: hasPrevDir,
+					}),
+				);
 				$placeholder.classList.add("placeholder");
-				$placeholder.innerHTML = `<span id="spinner">${createTailSpinSvg()}</span>`;
+				$placeholder.insertAdjacentHTML(
+					"beforeend",
+					`<span id="spinner">${createTailSpinSvg()}</span>`,
+				);
+				/** @type {HTMLSpanElement} */
 				$content.appendChild($placeholder);
 
 				try {
@@ -1766,6 +1777,7 @@ function FileBrowserInclude(mode, info, doesOpenLast = true) {
 
 			const $list = helpers.parseHTML(
 				mustache.render(_list, {
+					prevDir: hasPrevDir,
 					msg: errMsg ?? (!list?.length && strings["empty folder message"]),
 					list,
 				}),

src/pages/fileBrowser/fileBrowser.scss

@@ -89,13 +89,18 @@
     height: calc(100% - 60px);
     overflow-y: auto;
 
-    > #spinner {
+    > :is(#msg, #spinner) {
       pointer-events: none;
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
+      font-weight: bold;
+      text-align: center;
+    }
+    &:has(> [data-action="prevDir"]) > :is(#msg, #spinner) {
+      height: calc(100% - 45px);
     }
 
     .tile {

src/pages/fileBrowser/list.hbs

@@ -1,29 +1,49 @@
-<ul class="list" id="list" empty-msg="{{msg}}">{{#list}}
-  {{#.}}
-  <li
-    tabindex="1"
-    class="tile {{#isLink}}symlink{{/isLink}}"
-    data-action="open"
-    data-type="{{type}}"
-    data-name="{{name}}"
-    {{#home}}data-home="{{.}}"{{/home}}
-    {{#notSelectable}}data-not-selectable{{/notSelectable}}
-    {{#openDoc}}data-open-doc{{/openDoc}}
-    {{#ftpAccount}}data-ftp-account{{/ftpAccount}}
-    {{#uuid}}data-uuid="{{uuid}}"{{/uuid}}
-    {{#storageType}}data-storage-type="{{.}}"{{/storageType}}
-    {{#disabled}}disabled{{/disabled}}
-  >
-    <span
-      class="icon {{icon}} {{#uuid}}user-added-storage{{/uuid}}"
+<ul class="list" id="list">
+  {{#prevDir}}
+    <li
+      tabindex="1"
+      class="tile"
+      data-action="prevDir"
+      data-not-selectable
+    >
+      <span class="icon"></span>
+      <div class="text">
+        <span>..</span>
+      </div>
+    </li>
+  {{/prevDir}}
+  {{^list}}
+    {{#msg}}
+      <div id="msg">{{.}}</div>
+    {{/msg}}
+  {{/list}}
+  {{#list}}
+    {{#.}}
+    <li
+      tabindex="1"
+      class="tile {{#isLink}}symlink{{/isLink}}"
+      data-action="open"
+      data-type="{{type}}"
+      data-name="{{name}}"
+      {{#home}}data-home="{{.}}"{{/home}}
+      {{#notSelectable}}data-not-selectable{{/notSelectable}}
+      {{#oneDirUp}}data-one-dir-up{{/oneDirUp}}
+      {{#openDoc}}data-open-doc{{/openDoc}}
+      {{#ftpAccount}}data-ftp-account{{/ftpAccount}}
+      {{#uuid}}data-uuid="{{.}}"{{/uuid}}
       {{#storageType}}data-storage-type="{{.}}"{{/storageType}}
-    ></span>
+      {{#disabled}}disabled{{/disabled}}
+    >
+      <span
+        class="icon {{icon}} {{#uuid}}user-added-storage{{/uuid}}"
+        {{#storageType}}data-storage-type="{{.}}"{{/storageType}}
+      ></span>
 
-    <div class="text">
-      <span>{{name}}</span>
-    </div>
-    <data-url>{{url}}</data-url>
-  </li>
-  {{/.}}
+      <div class="text">
+        <span>{{name}}</span>
+      </div>
+      <data-url>{{url}}</data-url>
+    </li>
+    {{/.}}
   {{/list}}
 </ul>