show item path on Recent + Favorites, add go to parent folder, fix Folder browsing in Favorites

static/js/features/files/contextMenus.js

@@ -5,6 +5,7 @@
 
 import { resolveHomeFolder } from '../../app/authSession.js';
 import { loadFiles } from '../../app/filesView.js';
+import { switchToFilesSection } from '../../app/navigation.js';
 import { app } from '../../app/state.js';
 import { showConfirmDialog, ui } from '../../app/ui.js';
 import { getCsrfHeaders } from '../../core/csrf.js';
@@ -64,6 +65,13 @@ const contextMenus = {
         }
     },
 
+    syncOpenParentFolderOption() {
+        const option = document.getElementById('open-parent-folder-option');
+        if (!option) return;
+        const folderId = app?.contextMenuTargetFile?.folder_id;
+        option.classList.toggle('hidden', !folderId);
+    },
+
     syncAddToPlaylistOption() {
         const option = document.getElementById('add-to-playlist-option');
         if (!option) return;
@@ -198,6 +206,16 @@ const contextMenus = {
             ui.closeFileContextMenu();
         });
 
+        document.getElementById('open-parent-folder-option').addEventListener('click', () => {
+            const folderId = app.contextMenuTargetFile?.folder_id;
+            ui.closeFileContextMenu();
+            if (folderId) {
+                switchToFilesSection();
+                app.currentPath = folderId;
+                loadFiles();
+            }
+        });
+
         document.getElementById('favorite-file-option').addEventListener('click', async () => {
             if (app.contextMenuTargetFile) {
                 const file = app.contextMenuTargetFile;

static/js/features/library/favorites.js

@@ -10,6 +10,7 @@ import { ui } from '../../app/ui.js';
 import { getCsrfHeaders } from '../../core/csrf.js';
 import { i18n } from '../../core/i18n.js';
 import { multiSelect } from '../files/multiSelect.js';
+import * as pathTooltip from '../pathTooltip.js';
 
 const favorites = {
     /** @type {Map<string, object>} key = "file:<id>" | "folder:<id>" */
@@ -190,7 +191,8 @@ const favorites = {
                         id: item.item_id,
                         name: item.item_name || item.item_id,
                         parent_id: item.parent_id || '',
-                        modified_at: item.modified_at || item.created_at
+                        modified_at: item.modified_at || item.created_at,
+                        path: item.item_path || ''
                     });
                 } else {
                     files.push({
@@ -203,12 +205,16 @@ const favorites = {
                         category: item.category,
                         size: item.item_size || 0,
                         size_formatted: item.size_formatted,
-                        modified_at: item.modified_at || item.created_at
+                        modified_at: item.modified_at || item.created_at,
+                        path: item.item_path || ''
                     });
                 }
             }
             if (folders.length) ui.renderFolders(folders);
             if (files.length) ui.renderFiles(files);
+
+            const filesList = document.getElementById('files-list');
+            if (filesList) pathTooltip.init(filesList);
         } catch (error) {
             console.error('Error displaying favorites:', error);
             if (ui?.showNotification) {

static/js/features/library/recent.js

@@ -10,6 +10,7 @@ import { ui } from '../../app/ui.js';
 import { getCsrfHeaders } from '../../core/csrf.js';
 import { i18n } from '../../core/i18n.js';
 import { multiSelect } from '../files/multiSelect.js';
+import * as pathTooltip from '../pathTooltip.js';
 
 const recent = {
     /** Maximum items to request from the server */
@@ -128,7 +129,8 @@ const recent = {
                         id: item.item_id,
                         name: item.item_name || item.item_id,
                         parent_id: item.parent_id || '',
-                        modified_at: item.accessed_at
+                        modified_at: item.accessed_at,
+                        path: item.item_path || ''
                     });
                 } else {
                     files.push({
@@ -141,12 +143,14 @@ const recent = {
                         category: item.category,
                         size: item.item_size || 0,
                         size_formatted: item.size_formatted,
-                        modified_at: item.accessed_at
+                        modified_at: item.accessed_at,
+                        path: item.item_path || ''
                     });
                 }
             }
             if (folders.length) ui.renderFolders(folders);
             if (files.length) ui.renderFiles(files);
+            if (filesList) pathTooltip.init(filesList);
         } catch (error) {
             console.error('Error displaying recent files:', error);
             if (ui?.showNotification) {

static/js/features/pathTooltip.js

@@ -0,0 +1,78 @@
+/**
+ * Path tooltip — shows the full path of a hovered file/folder item
+ * in an overlay at the bottom-left of the content area.
+ *
+ * Usage: call init(container) after rendering items, destroy(container) on teardown.
+ * Only file-item elements with a data-path attribute trigger the tooltip.
+ */
+
+/** @type {HTMLElement|null} */
+let _tooltip = null;
+
+function _getOrCreateTooltip() {
+    if (_tooltip) return _tooltip;
+    _tooltip = document.getElementById('path-tooltip');
+    if (!_tooltip) {
+        _tooltip = document.createElement('div');
+        _tooltip.id = 'path-tooltip';
+        _tooltip.className = 'path-tooltip hidden';
+        document.querySelector('.main-content')?.appendChild(_tooltip);
+    }
+    return _tooltip;
+}
+
+/**
+ * @param {MouseEvent} e
+ */
+function _onEnter(e) {
+    const item = /** @type {HTMLElement} */ (e.currentTarget);
+    const path = item.dataset.path;
+    if (!path) return;
+
+    const tooltip = _getOrCreateTooltip();
+    tooltip.textContent = path;
+    tooltip.classList.remove('hidden');
+}
+
+function _onLeave() {
+    _tooltip?.classList.add('hidden');
+}
+
+/** @type {WeakMap<HTMLElement, {enter: Function, leave: Function}>} */
+const _listeners = new WeakMap();
+
+/**
+ * Attach path tooltip listeners to all file-item elements inside container.
+ * @param {HTMLElement} container
+ */
+function init(container) {
+    const items = container.querySelectorAll('.file-item[data-path]');
+    items.forEach((item) => {
+        const el = /** @type {HTMLElement} */ (item);
+        const enter = (e) => _onEnter(e);
+        const leave = () => _onLeave();
+        el.addEventListener('mouseenter', enter);
+        el.addEventListener('mouseleave', leave);
+        _listeners.set(el, { enter, leave });
+    });
+}
+
+/**
+ * Remove path tooltip listeners from all file-item elements inside container.
+ * @param {HTMLElement} container
+ */
+function destroy(container) {
+    const items = container.querySelectorAll('.file-item');
+    items.forEach((item) => {
+        const el = /** @type {HTMLElement} */ (item);
+        const fns = _listeners.get(el);
+        if (fns) {
+            el.removeEventListener('mouseenter', fns.enter);
+            el.removeEventListener('mouseleave', fns.leave);
+            _listeners.delete(el);
+        }
+    });
+    _onLeave();
+}
+
+export { destroy, init };