cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Edouard Vanbelle
2026-05-06 17:43:30 +02:00
parent 405721c679
commit 8e1e9fe201
28 changed files with 217 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/application/dtos/favorites_dto.rs
+5
View File
@@ -46,6 +46,11 @@ pub struct FavoriteItemDto {
#[serde(skip_serializing_if = "Option::is_none")]
pub modified_at: Option<DateTime<Utc>>,
/// Full human-readable path (e.g. "Documents/Work" for a folder,
/// "Documents/Work/report.pdf" for a file)
#[serde(skip_serializing_if = "Option::is_none")]
pub item_path: Option<String>,
// ── Pre-computed display fields ──
/// FontAwesome icon CSS class (e.g. "fas fa-file-image", "fas fa-folder")
pub icon_class: String,
src/application/dtos/recent_dto.rs
+5
View File
@@ -42,6 +42,11 @@ pub struct RecentItemDto {
#[serde(skip_serializing_if = "Option::is_none")]
pub parent_id: Option<String>,
/// Full human-readable path (e.g. "Documents/Work" for a folder,
/// "Documents/Work/report.pdf" for a file)
#[serde(skip_serializing_if = "Option::is_none")]
pub item_path: Option<String>,
// ── Pre-computed display fields ──
/// FontAwesome icon CSS class (e.g. "fas fa-file-image", "fas fa-folder")
pub icon_class: String,
src/infrastructure/repositories/pg/favorites_pg_repository.rs
+9 -1
View File
@@ -33,10 +33,17 @@ impl FavoritesRepositoryPort for FavoritesPgRepository {
f.size AS "item_size",
f.mime_type AS "item_mime_type",
COALESCE(f.folder_id::TEXT, fld.parent_id::TEXT) AS "parent_id",
COALESCE(f.updated_at, fld.updated_at) AS "modified_at"
COALESCE(f.updated_at, fld.updated_at) AS "modified_at",
CASE
WHEN uf.item_type = 'folder' THEN fld.path
WHEN uf.item_type = 'file' THEN COALESCE(pfld.path || '/' || f.name, f.name)
ELSE NULL
END AS "item_path"
FROM auth.user_favorites uf
LEFT JOIN storage.files f ON uf.item_type = 'file'
AND f.id = uf.item_id::UUID
LEFT JOIN storage.folders pfld ON uf.item_type = 'file'
AND pfld.id = f.folder_id
LEFT JOIN storage.folders fld ON uf.item_type = 'folder'
AND fld.id = uf.item_id::UUID
WHERE uf.user_id = $1
@@ -70,6 +77,7 @@ impl FavoritesRepositoryPort for FavoritesPgRepository {
item_mime_type: row.try_get("item_mime_type").ok(),
parent_id: row.try_get("parent_id").ok(),
modified_at: row.try_get("modified_at").ok(),
item_path: row.try_get("item_path").ok(),
// Temporary defaults; with_display_fields() computes the real values
icon_class: String::new(),
icon_special_class: String::new(),
src/infrastructure/repositories/pg/recent_items_pg_repository.rs
+9 -1
View File
@@ -31,10 +31,17 @@ impl RecentItemsRepositoryPort for RecentItemsPgRepository {
COALESCE(f.name, fld.name) AS "item_name",
f.size AS "item_size",
f.mime_type AS "item_mime_type",
COALESCE(f.folder_id::TEXT, fld.parent_id::TEXT) AS "parent_id"
COALESCE(f.folder_id::TEXT, fld.parent_id::TEXT) AS "parent_id",
CASE
WHEN ur.item_type = 'folder' THEN fld.path
WHEN ur.item_type = 'file' THEN COALESCE(pfld.path || '/' || f.name, f.name)
ELSE NULL
END AS "item_path"
FROM auth.user_recent_files ur
LEFT JOIN storage.files f ON ur.item_type = 'file'
AND f.id = ur.item_id::UUID
LEFT JOIN storage.folders pfld ON ur.item_type = 'file'
AND pfld.id = f.folder_id
LEFT JOIN storage.folders fld ON ur.item_type = 'folder'
AND fld.id = ur.item_id::UUID
WHERE ur.user_id = $1
@@ -68,6 +75,7 @@ impl RecentItemsRepositoryPort for RecentItemsPgRepository {
item_size: row.try_get("item_size").ok(),
item_mime_type: row.try_get("item_mime_type").ok(),
parent_id: row.try_get("parent_id").ok(),
item_path: row.try_get("item_path").ok(),
// Temporary defaults; with_display_fields() computes the real values
icon_class: String::new(),
icon_special_class: String::new(),
static/css/base/variables.css
+2
View File
@@ -1,4 +1,6 @@
:root {
--sidebar-width: 250px;
/* Backgrounds */
--color-bg-page: #f5f7fa;
--color-bg-surface: #ffffff;
static/css/components/pathTooltip.css
+25
View File
@@ -0,0 +1,25 @@
.path-tooltip {
position: fixed;
bottom: 8px;
left: calc(var(--sidebar-width) + 8px);
z-index: 5;
max-width: 120ch;
padding: 4px 10px;
border-radius: 3px;
background-color: var(--color-bg-subtle);
border: 1px solid var(--color-border-faint);
color: var(--color-text-muted);
font-size: 0.75rem;
font-family: monospace;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
/* avoid blinking when pointer change items */
transition: display 0.2s allow-discrete;
}
static/css/layout/sidebar.css
+1 -1
View File
@@ -1,6 +1,6 @@
/* Sidebar */
.sidebar {
width: 250px;
width: var(--sidebar-width);
background: linear-gradient(180deg, var(--color-sidebar-bg-from) 0%, var(--color-sidebar-bg-to) 100%);
color: var(--color-sidebar-text-active);
display: flex;
static/index.html
+1
View File
@@ -17,6 +17,7 @@
<link rel="stylesheet" href="/css/views/photos.css">
<link rel="stylesheet" href="/css/views/photosLightbox.css">
<link rel="stylesheet" href="/css/views/music.css">
<link rel="stylesheet" href="/css/components/pathTooltip.css">
<!-- Scripts (defer: download in parallel, execute in order, after HTML parsed) -->
<script defer type="module" src="/js/core/i18n.js"></script>
static/js/app/ui.js
+20 -1
View File
@@ -20,7 +20,7 @@ import { thumbnail } from '../features/thumbnail.js';
import { sharedView } from '../views/shared/sharedView.js';
import { loadFiles } from './filesView.js';
import { updateHistory } from './main.js';
import { syncViewContainers } from './navigation.js';
import { switchToFilesSection, syncViewContainers } from './navigation.js';
import { app } from './state.js';
import { uiFileTypes } from './uiFileTypes.js';
import { uiNotifications } from './uiNotifications.js';
@@ -62,6 +62,7 @@ const ui = {
</div>
`;
document.body.appendChild(folderMenu);
i18n.translateElement(folderMenu);
}
// File context menu
@@ -82,6 +83,9 @@ const ui = {
<div class="context-menu-item" id="download-file-option">
<i class="fas fa-download"></i> <span data-i18n="actions.download">Download</span>
</div>
<div class="context-menu-item hidden" id="open-parent-folder-option">
<i class="fas fa-folder-open"></i> <span data-i18n="actions.open_parent_folder">Go to parent folder</span>
</div>
<div class="context-menu-separator"></div>
<div class="context-menu-item" id="favorite-file-option">
<i class="fas fa-star"></i> <span data-i18n="actions.favorite">Add to favorites</span>
@@ -105,6 +109,7 @@ const ui = {
</div>
`;
document.body.appendChild(fileMenu);
i18n.translateElement(fileMenu);
}
// Rename dialog — modern
@@ -912,6 +917,12 @@ const ui = {
const navigateFolder = (card) => {
const folderId = card.dataset.folderId;
const folderName = card.dataset.folderName;
if (app.currentSection === 'favorites' || app.currentSection === 'recent') {
switchToFilesSection();
app.currentPath = folderId;
loadFiles();
return;
}
app.breadcrumbPath.push({ id: folderId, name: folderName });
app.currentPath = folderId;
this.updateBreadcrumb();
@@ -1012,6 +1023,9 @@ const ui = {
if (contextMenus && typeof contextMenus.syncAddToPlaylistOption === 'function') {
contextMenus.syncAddToPlaylistOption();
}
if (contextMenus && typeof contextMenus.syncOpenParentFolderOption === 'function') {
contextMenus.syncOpenParentFolderOption();
}
if (menu) {
menu.style.left = `${e.pageX}px`;
menu.style.top = `${e.pageY}px`;
@@ -1295,6 +1309,7 @@ const ui = {
el.dataset.folderId = folder.id;
el.dataset.folderName = folder.name;
el.dataset.parentId = folder.parent_id || '';
if (folder.path) el.dataset.path = folder.path;
const isFav = favorites?.isFavorite(folder.id, 'folder');
const isShared = sharedView.isShared(folder.id, 'folder');
@@ -1345,6 +1360,7 @@ const ui = {
el.dataset.fileId = file.id;
el.dataset.fileName = file.name;
el.dataset.folderId = file.folder_id || '';
if (file.path) el.dataset.path = file.path;
el.setAttribute('draggable', 'true');
el.innerHTML = `
@@ -1557,6 +1573,9 @@ function showContextMenuAtElement(triggerElement, menuId) {
if (contextMenus && typeof contextMenus.syncAddToPlaylistOption === 'function') {
contextMenus.syncAddToPlaylistOption();
}
if (contextMenus && typeof contextMenus.syncOpenParentFolderOption === 'function') {
contextMenus.syncOpenParentFolderOption();
}
menu.style.left = `${left}px`;
menu.style.top = `${top}px`;
static/js/features/files/contextMenus.js
+18
View File
@@ -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
+8 -2
View File
@@ -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
+6 -2
View File
@@ -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
+78
View File
@@ -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 };
static/locales/ar.json
+2 -1
View File
@@ -116,7 +116,8 @@
"search_btn": "بحث",
"close": "إغلاق",
"delete_permanently": "حذف نهائياً",
"empty_trash": "تفريغ سلة المهملات"
"empty_trash": "تفريغ سلة المهملات",
"open_parent_folder": "الانتقال إلى المجلد الأصلي"
},
"user_menu": {
"appearance": "المظهر",
static/locales/de.json
+2 -1
View File
@@ -116,7 +116,8 @@
"search_btn": "Suchen",
"close": "Schließen",
"delete_permanently": "Endgültig löschen",
"empty_trash": "Papierkorb leeren"
"empty_trash": "Papierkorb leeren",
"open_parent_folder": "Zum übergeordneten Ordner"
},
"user_menu": {
"appearance": "Erscheinungsbild",
static/locales/en.json
+2 -1
View File
@@ -116,7 +116,8 @@
"search_btn": "Search",
"close": "Close",
"delete_permanently": "Delete permanently",
"empty_trash": "Empty trash"
"empty_trash": "Empty trash",
"open_parent_folder": "Go to parent folder"
},
"user_menu": {
"appearance": "Appearance",
static/locales/es.json
+2 -1
View File
@@ -235,7 +235,8 @@
"search_btn": "Buscar",
"close": "Cerrar",
"delete_permanently": "Eliminar permanentemente",
"empty_trash": "Vaciar papelera"
"empty_trash": "Vaciar papelera",
"open_parent_folder": "Ir a la carpeta padre"
},
"user_menu": {
"appearance": "Apariencia",
static/locales/fa.json
+2 -1
View File
@@ -116,7 +116,8 @@
"search_btn": "جست‌و‌جو",
"close": "بستن",
"delete_permanently": "Delete permanently",
"empty_trash": "Empty trash"
"empty_trash": "Empty trash",
"open_parent_folder": "رفتن به پوشه والد"
},
"user_menu": {
"appearance": "ظاهر",
static/locales/fr.json
+2 -1
View File
@@ -116,7 +116,8 @@
"search_btn": "Rechercher",
"close": "Fermer",
"delete_permanently": "Supprimer définitivement",
"empty_trash": "Vider la corbeille"
"empty_trash": "Vider la corbeille",
"open_parent_folder": "Aller au dossier parent"
},
"user_menu": {
"appearance": "Apparence",
static/locales/hi.json
+2 -1
View File
@@ -116,7 +116,8 @@
"search_btn": "खोजें",
"close": "बंद करें",
"delete_permanently": "स्थायी रूप से हटाएँ",
"empty_trash": "रद्दी खाली करें"
"empty_trash": "रद्दी खाली करें",
"open_parent_folder": "मूल फ़ोल्डर पर जाएं"
},
"user_menu": {
"appearance": "दिखावट",
static/locales/it.json
+2 -1
View File
@@ -116,7 +116,8 @@
"search_btn": "Cerca",
"close": "Chiudi",
"delete_permanently": "Elimina definitivamente",
"empty_trash": "Svuota il cestino"
"empty_trash": "Svuota il cestino",
"open_parent_folder": "Vai alla cartella padre"
},
"user_menu": {
"appearance": "Aspetto",
static/locales/ja.json
+2 -1
View File
@@ -116,7 +116,8 @@
"search_btn": "検索",
"close": "閉じる",
"delete_permanently": "完全に削除",
"empty_trash": "ゴミ箱を空にする"
"empty_trash": "ゴミ箱を空にする",
"open_parent_folder": "親フォルダへ移動"
},
"user_menu": {
"appearance": "外観",
static/locales/ko.json
+2 -1
View File
@@ -116,7 +116,8 @@
"search_btn": "검색",
"close": "닫기",
"delete_permanently": "영구 삭제",
"empty_trash": "휴지통 비우기"
"empty_trash": "휴지통 비우기",
"open_parent_folder": "상위 폴더로 이동"
},
"user_menu": {
"appearance": "외관",
static/locales/nl.json
+2 -1
View File
@@ -116,7 +116,8 @@
"search_btn": "Zoeken",
"close": "Sluiten",
"delete_permanently": "Permanent verwijderen",
"empty_trash": "Prullenbak legen"
"empty_trash": "Prullenbak legen",
"open_parent_folder": "Naar bovenliggende map"
},
"user_menu": {
"appearance": "Weergave",
static/locales/pl.json
+2 -1
View File
@@ -116,7 +116,8 @@
"search_btn": "Szukaj",
"close": "Zamknij",
"delete_permanently": "Usuń trwale",
"empty_trash": "Opróżnij kosz"
"empty_trash": "Opróżnij kosz",
"open_parent_folder": "Przejdź do folderu nadrzędnego"
},
"user_menu": {
"appearance": "Wygląd",
static/locales/pt.json
+2 -1
View File
@@ -116,7 +116,8 @@
"search_btn": "Pesquisar",
"close": "Fechar",
"delete_permanently": "Excluir permanentemente",
"empty_trash": "Esvaziar lixeira"
"empty_trash": "Esvaziar lixeira",
"open_parent_folder": "Ir para a pasta pai"
},
"user_menu": {
"appearance": "Aparência",
static/locales/ru.json
+2 -1
View File
@@ -116,7 +116,8 @@
"search_btn": "Найти",
"close": "Закрыть",
"delete_permanently": "Удалить навсегда",
"empty_trash": "Очистить корзину"
"empty_trash": "Очистить корзину",
"open_parent_folder": "Перейти в родительскую папку"
},
"user_menu": {
"appearance": "Оформление",
static/locales/zh.json
+2 -1
View File
@@ -116,7 +116,8 @@
"search_btn": "搜索",
"close": "关闭",
"delete_permanently": "Delete permanently",
"empty_trash": "Empty trash"
"empty_trash": "Empty trash",
"open_parent_folder": "转到父文件夹"
},
"user_menu": {
"appearance": "外观",