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

feat(ui): add section 'Shared with me'

Browse Source
This commit is contained in:
Edouard Vanbelle
2026-05-22 10:15:25 +02:00
parent 143b13d7bc
commit 60d53ea779
26 changed files with 816 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/app/filesView.js
+24 -7
View File
@@ -42,7 +42,17 @@ async function getFolder(id) {
}
/**
* rebuild breadcrumb from selected folder (iterate up to root)
* Rebuild breadcrumb from selected folder (iterate up to root).
*
* Stops traversal gracefully when a parent folder is not accessible
* (e.g. the user entered via a "Shared with me" grant whose parent
* folder they have no permission on). In that case the partial
* breadcrumb built so far is kept — the deepest reachable ancestor
* acts as the visual root, matching how Google Drive / Dropbox handle
* shared subtrees.
*
* An error on the *target folder itself* (first iteration) is still
* treated as a real error and redirects to the home folder.
*/
async function rebuildBreadCrumb() {
/**
@@ -80,12 +90,19 @@ async function rebuildBreadCrumb() {
// iterate to parent folder
id = folderInfo.parent_id;
} catch (_e) {
console.log(`Error loading information from folder ${app.currentPath}, falling back to ${app.userHomeFolderId}`);
// fallback of root
uiNotifications.show('error: folder not found or permission denied', 'the given folder is not available or you do not have sufficient rights');
app.breadcrumbPath = [];
id = app.userHomeFolderId;
if (id) app.currentPath = id;
if (currentFolderInfo === null) {
// Failed on the target folder itself — real error, fall back to home.
console.warn(`Cannot access target folder ${app.currentPath}, falling back to home`);
uiNotifications.show('error: folder not found or permission denied', 'the given folder is not available or you do not have sufficient rights');
app.breadcrumbPath = [];
id = app.userHomeFolderId;
if (id) app.currentPath = id;
} else {
// Failed on a parent — hit the permission boundary of a shared subtree.
// Stop traversal; the partial breadcrumb is the best we can show.
console.log(`Stopped breadcrumb traversal at permission boundary (parent of ${currentFolderInfo.id} is not accessible)`);
break;
}
}
}
static/js/app/main.js
+21 -1
View File
@@ -16,10 +16,12 @@ import { multiSelect } from '../features/files/multiSelect.js';
import { favorites } from '../features/library/favorites.js';
import { recent } from '../features/library/recent.js';
import { fileSharing } from '../features/sharing/fileSharing.js';
import { grants } from '../model/grants.js';
import { sharedView } from '../views/shared/sharedView.js';
import { checkAuthentication } from './authSession.js';
import { loadFiles } from './filesView.js';
import {
activateFilesUI,
SECTIONS_MAPPER,
switchToFavoritesSection,
switchToFilesSection,
@@ -27,6 +29,7 @@ import {
switchToPhotosSection,
switchToRecentFilesSection,
switchToSharedSection,
switchToSharedWithMeSection,
switchToTrashSection
} from './navigation.js';
import { performSearch } from './searchView.js';
@@ -140,12 +143,16 @@ const ACTIONS_BAR_TEMPLATES = {
</div>
${_multiSelectButons}
${_toggleButtons}
`,
sharedwithme: `
<div class="action-buttons" id="default-buttons"></div>
${_toggleButtons}
`
};
/**
*
* @param {'files' | 'trash' | 'favorites' | 'recent' | 'hidden'} mode
* @param {'files' | 'trash' | 'favorites' | 'recent' | 'sharedwithme' | 'hidden'} mode
* @param {boolean} [force=false]
* @returns
*/
@@ -398,6 +405,9 @@ function initApp() {
app.viewFile = hashContext.file;
}
// get grants (xxx: async methods)
await grants.fetchIncomingGrants();
await grants.fetchOutgoingGrants();
loadFiles();
}
});
@@ -652,6 +662,10 @@ function setupEventListeners() {
switchToSharedSection();
break;
case 'nav.sharedwithme':
switchToSharedWithMeSection();
break;
case 'nav.favorites':
// Switch to favorites view
switchToFavoritesSection();
@@ -723,6 +737,12 @@ function setupEventListeners() {
* @param {string} name
*/
export function selectFolder(id, name) {
// When entering from a non-files section (e.g. "Shared with me"),
// activate the Files UI (nav active state, breadcrumb, action bar,
// container) without resetting the current path.
if (app.currentSection !== 'files') {
activateFilesUI();
}
app.breadcrumbPath.push({ id, name });
app.currentPath = id;
ui.updateBreadcrumb();
static/js/app/navigation.js
+48
View File
@@ -10,6 +10,7 @@ import { musicView } from '../features/library/music.js';
import { photosView } from '../features/library/photos.js';
import { recent } from '../features/library/recent.js';
import { sharedView } from '../views/shared/sharedView.js';
import { sharedWithMeView } from '../views/sharedWithMe/sharedWithMeView.js';
import { loadFiles } from './filesView.js';
import { setActionsBarMode } from './main.js';
import { app, appElements } from './state.js';
@@ -122,6 +123,7 @@ function getSectionFromNavItem(navItem) {
export const SECTIONS_MAPPER = {
files: switchToFilesSection,
shared: switchToSharedSection,
sharedwithme: switchToSharedWithMeSection,
recent: switchToRecentFilesSection,
favorites: switchToFavoritesSection,
trash: switchToTrashSection,
@@ -157,6 +159,11 @@ function setCurrentSection(section) {
sharedView.hide();
}
// Hide "Load more" button when leaving the sharedwithme section
if (section !== 'sharedwithme' && sharedWithMeView) {
sharedWithMeView.hide();
}
// Hide photosView when switching to any other section
if (section !== 'photos' && photosView) {
photosView.hide();
@@ -194,6 +201,26 @@ function switchToSharedSection() {
if (multiSelect) multiSelect.clear();
}
function switchToSharedWithMeSection() {
if (!setCurrentSection('sharedwithme')) return;
// Hide breadcrumb (only shown in Files view)
const breadcrumb = document.querySelector('.breadcrumb');
breadcrumb?.classList.add('hidden');
// Show actions-bar with view toggle (no upload / new-folder in this view)
setActionsBarMode('sharedwithme');
// Show the standard files container and respect grid/list preference
toggleFileContainer(true);
syncViewContainers();
if (multiSelect) multiSelect.clear();
// Load and render items into the files container
sharedWithMeView.init();
}
function switchToFilesSection() {
if (!setCurrentSection('files')) return;
@@ -368,13 +395,34 @@ function switchToMusicSection() {
if (multiSelect) multiSelect.clear();
}
/**
* Activate the Files section UI (nav state, breadcrumb, actions bar,
* files container, grid/list sync) WITHOUT resetting `app.currentPath`
* or `app.breadcrumbPath`.
*
* Used by `selectFolder` when the user clicks a folder from a
* non-files section (e.g. "Shared with me") so the Files view is
* fully set up before the folder content loads.
*/
function activateFilesUI() {
setCurrentSection('files');
setActionsBarMode('files', true);
const breadcrumb = document.querySelector('.breadcrumb');
breadcrumb?.classList.remove('hidden');
toggleFileContainer(true);
syncViewContainers();
if (multiSelect) multiSelect.clear();
}
export {
activateFilesUI,
switchToFavoritesSection,
switchToFilesSection,
switchToMusicSection,
switchToPhotosSection,
switchToRecentFilesSection,
switchToSharedSection,
switchToSharedWithMeSection,
switchToTrashSection,
syncViewContainers
};
static/js/app/ui.js
+15 -9
View File
@@ -17,10 +17,10 @@ import { favorites } from '../features/library/favorites.js';
import { recent } from '../features/library/recent.js';
import { fileSharing } from '../features/sharing/fileSharing.js';
import { thumbnail } from '../features/thumbnail.js';
import { sharedView } from '../views/shared/sharedView.js';
import { grants } from '../model/grants.js';
import { loadFiles } from './filesView.js';
import { updateHistory } from './main.js';
import { switchToFilesSection, syncViewContainers } from './navigation.js';
import { activateFilesUI, switchToFilesSection, syncViewContainers } from './navigation.js';
import { app } from './state.js';
import { uiFileTypes } from './uiFileTypes.js';
import { uiNotifications } from './uiNotifications.js';
@@ -54,7 +54,7 @@ const ui = {
<i class="fas fa-star"></i> <span data-i18n="actions.favorite">Add to favorites</span>
</div>
<div class="context-menu-item" id="share-folder-option">
<i class="fas fa-share-alt"></i> <span data-i18n="actions.share">Share</span>
<i class="fas fa-oxiexport"></i> <span data-i18n="actions.share">Share</span>
</div>
<div class="context-menu-separator"></div>
<div class="context-menu-item" id="rename-folder-option">
@@ -98,7 +98,7 @@ const ui = {
<i class="fas fa-star"></i> <span data-i18n="actions.favorite">Add to favorites</span>
</div>
<div class="context-menu-item" id="share-file-option">
<i class="fas fa-share-alt"></i> <span data-i18n="actions.share">Share</span>
<i class="fas fa-oxiexport"></i> <span data-i18n="actions.share">Share</span>
</div>
<div class="context-menu-item hidden" id="add-to-playlist-option">
<i class="fas fa-compact-disc"></i> <span data-i18n="music.add_to_playlist">Add to Playlist</span>
@@ -154,7 +154,7 @@ const ui = {
shareDialog.innerHTML = `
<div class="share-dialog-content">
<div class="share-dialog-header">
<i class="fas fa-share-alt dialog-header-icon"></i>
<i class="fas fa-oxiexport dialog-header-icon"></i>
<span data-i18n="dialogs.share_file">Share file</span>
</div>
<div class="shared-item-info">
@@ -937,6 +937,11 @@ const ui = {
loadFiles();
return;
}
if (app.currentSection === 'sharedwithme') {
// Activate Files UI (nav, breadcrumb, actions bar) without
// resetting the path — the shared folder becomes the entry point.
activateFilesUI();
}
app.breadcrumbPath.push({ id: folderId, name: folderName });
app.currentPath = folderId;
this.updateBreadcrumb();
@@ -1334,7 +1339,7 @@ const ui = {
if (folder.path) el.dataset.path = folder.path;
const isFav = favorites?.isFavorite(folder.id, 'folder');
const isShared = sharedView.isShared(folder.id, 'folder');
const isShared = grants.getOutgoingGrantsFor('folder', folder.id).length > 0; //sharedView.isShared(folder.id, 'folder');
const formattedDate = formatDateTime(folder.modified_at);
el.innerHTML = `
@@ -1345,7 +1350,7 @@ const ui = {
</div>
<span>${escapeHtml(folder.name)}</span>
<div class="file-badge file-badge-favorite ${isFav ? '' : 'hidden'}"><i class="fas fa-star favorite-star-inline"></i></div>
<div class="file-badge file-badge-shared ${isShared ? '' : 'hidden'}"><i class="fas fa-share-alt"></i></div>
<div class="file-badge file-badge-shared ${isShared ? '' : 'hidden'}"><i class="fas fa-oxiexport"></i></div>
</div>
<div class="type-cell">${i18n.t('files.file_types.folder')}</div>
<div class="size-cell">--</div>
@@ -1377,7 +1382,8 @@ const ui = {
const fileSize = file.size_formatted || formatFileSize(file.size);
const formattedDate = formatDateTime(file.modified_at);
const isFav = favorites?.isFavorite(file.id, 'file');
const isShared = sharedView.isShared(file.id, 'file');
const isShared = grants.getOutgoingGrantsFor('file', file.id).length > 0;
//const isShared = sharedView.isShared(file.id, 'file');
const canThumbnail = thumbnail.canHandle(file);
const el = document.createElement('div');
@@ -1398,7 +1404,7 @@ const ui = {
</div>
<span>${escapeHtml(file.name)}</span>
<div class="file-badge file-badge-favorite ${isFav ? '' : 'hidden'}"><i class="fas fa-star favorite-star-inline"></i></div>
<div class="file-badge file-badge-shared ${isShared ? '' : 'hidden'}"><i class="fas fa-share-alt"></i></div>
<div class="file-badge file-badge-shared ${isShared ? '' : 'hidden'}"><i class="fas fa-oxiexport"></i></div>
</div>
<div class="type-cell">${typeLabel}</div>
<div class="size-cell">${fileSize}</div>
static/js/core/icons.js
+8
View File
@@ -246,6 +246,14 @@ const OxiIcons = {
384,
'M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z'
],
oxiexport: [
576,
'M384.5 24l0 72-64 0c-79.5 0-144 64.5-144 144 0 93.4 82.8 134.8 100.6 142.6 2.2 1 4.6 1.4 7.1 1.4l2.5 0c9.8 0 17.8-8 17.8-17.8 0-8.3-5.9-15.5-12.8-20.3-8.9-6.2-19.2-18.2-19.2-40.5 0-45 36.5-81.5 81.5-81.5l30.5 0 0 72c0 9.7 5.8 18.5 14.8 22.2s19.3 1.7 26.2-5.2l136-136c9.4-9.4 9.4-24.6 0-33.9L425.5 7c-6.9-6.9-17.2-8.9-26.2-5.2S384.5 14.3 384.5 24zm-272 72c-44.2 0-80 35.8-80 80l0 256c0 44.2 35.8 80 80 80l256 0c44.2 0 80-35.8 80-80l0-32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 32c0 8.8-7.2 16-16 16l-256 0c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l16 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-16 0z'
],
oxiimport: [
576,
'm 360.55,24 v 72 h 64 c 79.5,0 144,64.5 144,144 0,93.4 -82.8,134.8 -100.6,142.6 -2.2,1 -4.6,1.4 -7.1,1.4 h -2.5 c -9.8,0 -17.8,-8 -17.8,-17.8 0,-8.3 5.9,-15.5 12.8,-20.3 8.9,-6.2 19.2,-18.2 19.2,-40.5 0,-45 -36.5,-81.5 -81.5,-81.5 h -30.5 v 72 c 0,9.7 -5.8,18.5 -14.8,22.2 -9,3.7 -19.3,1.7 -26.2,-5.2 l -136,-136 c -9.4,-9.4 -9.4,-24.6 0,-33.9 l 136,-136 c 6.9,-6.9 17.2,-8.9 26.2,-5.2 9,3.7 14.8,12.5 14.8,22.2 z M 112.5,96 c -44.2,0 -80,35.8 -80,80 v 256 c 0,44.2 35.8,80 80,80 h 256 c 44.2,0 80,-35.8 80,-80 v -32 c 0,-17.7 -14.3,-32 -32,-32 -17.7,0 -32,14.3 -32,32 v 32 c 0,8.8 -7.2,16 -16,16 h -256 c -8.8,0 -16,-7.2 -16,-16 V 176 c 0,-8.8 7.2,-16 16,-16 h 16 c 17.7,0 32,-14.3 32,-32 0,-17.7 -14.3,-32 -32,-32 z'
],
pen: [
512,
'M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z'
static/js/core/types.js
+60
View File
@@ -253,3 +253,63 @@
* @property {number|null} width
* @property {number|null} height
*/
// ------------------- grants
/**
* @typedef {'read'|'create'|'share'|'comment'|'delete'|'update'} PermissionTypeEnum
*/
/**
* @typedef {'folder'|'file'} ResourceTypeEnum
*/
/**
* @typedef {Object} Resource
* @property {ResourceTypeEnum} type
* @property {String} id
*/
/**
* @typedef {'user'|'group'|'external'} SubjectTypeEnum
*/
/**
* @typedef {Object} Subject
* @property {SubjectTypeEnum} type
* @property {String} id
*/
/**
* @typedef {Object} Grant
* @property {string} id
* @property {number} granted_at
* @property {string} granted_by
* @property {Subject} subject
* @property {PermissionTypeEnum} permission
* @property {Resource} resource
*/
/**
* Roles: `viewer`, `commenter`, `editor`, `manager`, `admin`
*/
/**
* One item returned by `GET /api/grants/incoming/resources`.
* Exactly one of `file` / `folder` is populated (indicated by `resource_type`).
* @typedef {Object} SharedWithMeItem
* @property {ResourceTypeEnum} resource_type
* @property {PermissionTypeEnum[]} permissions - All permissions the caller holds on this resource.
* @property {string} granted_at - ISO-8601 timestamp of the earliest grant.
* @property {string} granted_by - UUID of the user who created the grant.
* @property {FileItem|undefined} [file] - Populated when resource_type === 'file'.
* @property {FolderItem|undefined} [folder] - Populated when resource_type === 'folder'.
*/
/**
* Response for `GET /api/grants/incoming/resources`.
* @typedef {Object} SharedWithMeResponse
* @property {SharedWithMeItem[]} items
* @property {string|undefined} [next_cursor] - Absent when the last page is reached.
*/
static/js/model/grants.js
+111
View File
@@ -0,0 +1,111 @@
/**
* @import {Grant, ResourceTypeEnum, SharedWithMeResponse} from '../core/types.js'
*/
const grants = {
/** @type {Record<String, Record<String, Grant[]>>} */
outgoingGrants: {},
/** @type {Record<String, Record<String, Grant[]>>} */
incomingGrants: {},
async fetchOutgoingGrants() {
const response = await fetch('/api/grants/outgoing');
if (!response.ok) {
console.log(`error ${response.status} while fetching /api/grants/outgoing:`, await response.json());
return;
}
/** @type {Grant[]} */
const outgoingGrants = await response.json();
console.log(outgoingGrants);
// store grants by type, then by id
outgoingGrants.forEach((grant) => {
this.outgoingGrants[grant.resource.type] ??= {};
this.outgoingGrants[grant.resource.type][grant.resource.id] ??= [];
this.outgoingGrants[grant.resource.type][grant.resource.id].push(grant);
});
console.log(`outgoing grants: `, this.outgoingGrants);
},
/**
* get grant for a resource
* @param {ResourceTypeEnum} resourceType
* @param {String} id
* @returns {Grant[] | null}
*/
getOutgoingGrantsFor(resourceType, id) {
try {
return this.outgoingGrants[resourceType][id] ?? [];
} catch {
return [];
}
},
async fetchIncomingGrants() {
const response = await fetch('/api/grants/incoming');
if (!response.ok) {
console.log(`error ${response.status} while fetching /api/grants/incoming:`, await response.json);
return;
}
/** @type {Grant[]} */
const incomingGrants = await response.json();
// store grants by type, then by id
incomingGrants.forEach((grant) => {
this.incomingGrants[grant.resource.type] ??= {};
this.incomingGrants[grant.resource.type][grant.resource.id] ??= [];
this.incomingGrants[grant.resource.type][grant.resource.id].push(grant);
});
console.log(`incoming grants: `, this.incomingGrants);
},
/**
* get grant for a resource
* @param {ResourceTypeEnum} resourceType
* @param {String} id
* @returns {Grant[] | null}
*/
getIncomingGrantsFor(resourceType, id) {
try {
return this.incomingGrants[resourceType][id] ?? [];
} catch {
return [];
}
},
/**
* Fetch a cursor-paginated list of resources shared with the current user,
* with full file / folder metadata resolved server-side.
*
* @param {object} [opts]
* @param {ResourceTypeEnum[]} [opts.resourceTypes] - Resource types to include (default: ['file','folder']).
* @param {number} [opts.limit] - Max items per page (1–200, default 50).
* @param {string} [opts.cursor] - Opaque cursor from a previous call; omit for first page.
* @returns {Promise<SharedWithMeResponse>}
*/
async fetchSharedWithMe({ resourceTypes = ['file', 'folder'], limit = 50, cursor } = {}) {
const params = new URLSearchParams({
limit: String(limit),
resource_types: resourceTypes.join(',')
});
if (cursor) params.set('cursor', cursor);
const response = await fetch(`/api/grants/incoming/resources?${params}`);
if (!response.ok) {
throw new Error(`Failed to fetch shared-with-me items: HTTP ${response.status}`);
}
return response.json();
}
};
export { grants };
static/js/views/sharedWithMe/sharedWithMeView.js
+248
View File
@@ -0,0 +1,248 @@
/**
* OxiCloud – "Shared with me" view.
*
* Renders files and folders that other users have explicitly granted the
* current user access to, using the cursor-paginated
* `GET /api/grants/incoming/resources` endpoint.
*
* Reuses the existing `#files-list` container and `ui.renderFolders` /
* `ui.renderFiles` so the grid ↔ list toggle and all card components work
* out of the box. A "Load more" button is injected below the files container
* for cursor-based pagination.
*
* NOTE: the grid/list container will be extracted into a reusable component
* in a future refactor — this view is intentionally kept thin.
*/
import { ui } from '../../app/ui.js';
import { i18n } from '../../core/i18n.js';
import { ownerTooltip } from '../../features/ownerTooltip.js';
import { multiSelect } from '../../features/files/multiSelect.js';
import { grants } from '../../model/grants.js';
import { systemUsers } from '../../model/systemUsers.js';
/** @import {SharedWithMeItem, FileItem, FolderItem, ResourceTypeEnum} from '../../core/types.js' */
/** ID of the "Load more" wrapper injected below `.files-container`. */
const LOAD_MORE_ID = 'swm-load-more-wrapper';
const sharedWithMeView = {
// ── State ─────────────────────────────────────────────────────────────────
/** @type {string|null} */
_nextCursor: null,
_loading: false,
// ── Public API ────────────────────────────────────────────────────────────
/**
* (Re-)load from page 1 and render into the existing files container.
* Called every time the user switches to this section.
*/
async init() {
this._nextCursor = null;
this._loading = false;
this._ensureLoadMoreButton();
// Start fetching system users in background so tooltips resolve instantly
// by the time the user hovers over an item.
systemUsers.prefetch();
// Standard files-view setup: clear list, show container, init multiselect
ui.resetFilesList();
multiSelect.init();
ui.updateBreadcrumb();
await this._loadPage();
},
/**
* Hide the "Load more" button when leaving this section.
* The files container itself is managed by navigation.js.
*/
hide() {
const w = document.getElementById(LOAD_MORE_ID);
if (w) w.classList.add('hidden');
const filesList = document.getElementById('files-list');
if (filesList) ownerTooltip.destroy(filesList);
},
// ── Internal helpers ──────────────────────────────────────────────────────
/**
* Fetch one page, map items → FileItem / FolderItem, render them, then
* stamp `data-owner-id` and wire the owner tooltip.
* @returns {Promise<void>}
*/
async _loadPage() {
if (this._loading) return;
this._loading = true;
try {
const data = await grants.fetchSharedWithMe({
resourceTypes: /** @type {ResourceTypeEnum[]} */ (['file', 'folder']),
limit: 50,
cursor: this._nextCursor ?? undefined
});
this._nextCursor = data.next_cursor ?? null;
if (data.items.length === 0 && !this._nextCursor) {
// First page came back empty
ui.showError(`
<i class="fas fa-inbox empty-state-icon"></i>
<p>${i18n.t('sharedwithme_emptyStateTitle', 'Nothing shared with you yet')}</p>
<p>${i18n.t('sharedwithme_emptyStateDesc', 'Items shared with you by other users will appear here')}</p>
`);
this._setLoadMoreVisible(false);
return;
}
const { folders, files, ownerMap } = this._mapItems(data.items);
if (folders.length) ui.renderFolders(folders);
if (files.length) ui.renderFiles(files);
// Stamp data-owner-id on the freshly-rendered cards and attach tooltips.
const filesList = document.getElementById('files-list');
if (filesList) {
this._stampOwnerIds(filesList, ownerMap);
ownerTooltip.init(filesList);
}
this._setLoadMoreVisible(!!this._nextCursor);
} catch (err) {
ui.showError(`
<i class="fas fa-exclamation-circle empty-state-icon error"></i>
<p>${i18n.t('errors_loadFailed', 'Failed to load items')}</p>
`);
console.error('sharedWithMeView: load error', err);
} finally {
this._loading = false;
}
},
/**
* Map `SharedWithMeItem[]` to separate arrays for rendering plus an
* `ownerMap` (itemId → grantedBy userId) used to stamp `data-owner-id`
* after the cards are in the DOM.
*
* The backend already includes all display fields (`icon_class`,
* `icon_special_class`, `category`, `size_formatted`) inside the nested
* `file` / `folder` objects, so no client-side enrichment is needed.
*
* @param {SharedWithMeItem[]} items
* @returns {{ folders: FolderItem[], files: FileItem[], ownerMap: Map<string,string> }}
*/
_mapItems(items) {
/** @type {FolderItem[]} */
const folders = [];
/** @type {FileItem[]} */
const files = [];
/** @type {Map<string, string>} itemId → grantedBy userId */
const ownerMap = new Map();
for (const item of items) {
if (item.resource_type === 'folder' && item.folder) {
const f = item.folder;
folders.push(
/** @type {FolderItem} */ ({
id: f.id,
name: f.name,
path: f.path ?? '',
parent_id: f.parent_id ?? '',
owner_id: f.owner_id ?? '',
is_root: f.is_root ?? false,
created_at: f.created_at,
modified_at: f.modified_at,
icon_class: f.icon_class,
icon_special_class: f.icon_special_class ?? '',
category: 'folder'
})
);
ownerMap.set(f.id, item.granted_by);
} else if (item.resource_type === 'file' && item.file) {
const f = item.file;
files.push(
/** @type {FileItem} */ ({
id: f.id,
name: f.name,
path: f.path ?? '',
folder_id: f.folder_id ?? '',
owner_id: f.owner_id ?? '',
mime_type: f.mime_type,
size: f.size,
size_formatted: f.size_formatted,
created_at: f.created_at,
modified_at: f.modified_at,
sort_date: f.modified_at,
icon_class: f.icon_class,
icon_special_class: f.icon_special_class ?? '',
category: f.category
})
);
ownerMap.set(f.id, item.granted_by);
}
}
return { folders, files, ownerMap };
},
/**
* Walk `ownerMap` and set `data-owner-id` on matching `.file-item` cards
* inside `container`. Must be called after `renderFolders`/`renderFiles`.
*
* @param {HTMLElement} container
* @param {Map<string,string>} ownerMap itemId → grantedBy userId
*/
_stampOwnerIds(container, ownerMap) {
for (const [itemId, ownerId] of ownerMap) {
const el = container.querySelector(
`[data-folder-id="${itemId}"], [data-file-id="${itemId}"]`
);
if (el instanceof HTMLElement) {
el.dataset.ownerId = ownerId;
}
}
},
// ── "Load more" button ────────────────────────────────────────────────────
/**
* Create the "Load more" wrapper once and attach it below `.files-container`.
* Subsequent calls are no-ops.
*/
_ensureLoadMoreButton() {
if (document.getElementById(LOAD_MORE_ID)) return;
const filesContainer = document.querySelector('.files-container');
if (!filesContainer) return;
const wrapper = document.createElement('div');
wrapper.id = LOAD_MORE_ID;
wrapper.className = 'swm-load-more-wrapper hidden';
const btn = document.createElement('button');
btn.id = 'swm-load-more';
btn.className = 'button secondary';
btn.textContent = i18n.t('sharedwithme_loadMore', 'Load more');
btn.addEventListener('click', () => this._loadPage());
wrapper.appendChild(btn);
filesContainer.after(wrapper);
},
/**
* @param {boolean} visible
*/
_setLoadMoreVisible(visible) {
const w = document.getElementById(LOAD_MORE_ID);
if (w) w.classList.toggle('hidden', !visible);
}
};
export { sharedWithMeView };