Oxicloud/static/js/app/navigation.js

/**
 * OxiCloud - View navigation actions
 * Extracted from main.js to keep navigation concerns isolated.
 */

/**
 * Sync the hidden class and inline display for the grid/list containers
 * based on the current view preference.
 */
function syncViewContainers() {
    const filesGrid = document.getElementById('files-grid');
    const filesListView = document.getElementById('files-list-view');
    const isGrid = window.app.currentView === 'grid';
    if (filesGrid) {
        filesGrid.style.display = isGrid ? 'grid' : 'none';
        filesGrid.classList.toggle('hidden', !isGrid);
    }
    if (filesListView) {
        filesListView.style.display = isGrid ? 'none' : 'flex';
        filesListView.classList.toggle('hidden', isGrid);
    }
}

/**
 * Hide both grid and list containers (used when switching to non-file views).
 */
function hideFileContainers() {
    const filesGrid = document.getElementById('files-grid');
    const filesListView = document.getElementById('files-list-view');
    if (filesGrid) { filesGrid.style.display = 'none'; filesGrid.classList.add('hidden'); }
    if (filesListView) { filesListView.style.display = 'none'; filesListView.classList.add('hidden'); }
}

/**
 * Mobile sidebar toggle functionality
 */
function initSidebarToggle() {
	const sidebarToggle = document.getElementById('sidebar-toggle');
	const sidebar = document.getElementById('sidebar');
	const sidebarOverlay = document.getElementById('sidebar-overlay');

	if (!sidebarToggle || !sidebar || !sidebarOverlay) return;

	function openSidebar() {
		sidebar.classList.add('open');
		sidebarOverlay.classList.add('active');
		document.body.style.overflow = 'hidden';
	}

	function closeSidebar() {
		sidebar.classList.remove('open');
		sidebarOverlay.classList.remove('active');
		document.body.style.overflow = '';
	}

	function toggleSidebar() {
		if (sidebar.classList.contains('open')) {
			closeSidebar();
		} else {
			openSidebar();
		}
	}

	// Toggle button click
	sidebarToggle.addEventListener('click', toggleSidebar);

	// Close sidebar when clicking overlay
	sidebarOverlay.addEventListener('click', closeSidebar);

	// Close sidebar on escape key
	document.addEventListener('keydown', (e) => {
		if (e.key === 'Escape' && sidebar.classList.contains('open')) {
			closeSidebar();
		}
	});

	// Close sidebar when navigating (nav item click on mobile)
	const navItems = sidebar.querySelectorAll('.nav-item');
	navItems.forEach(item => {
		item.addEventListener('click', () => {
			if (window.innerWidth <= 768) {
				closeSidebar();
			}
		});
	});

	// Expose functions globally
	window.sidebarToggle = {
		open: openSidebar,
		close: closeSidebar,
		toggle: toggleSidebar
	};
}

// Initialize sidebar toggle when DOM is ready
document.addEventListener('DOMContentLoaded', initSidebarToggle);

// Mapping of section names to their corresponding view flags
const VIEW_FLAGS = {
    'files': 'isFilesView',
    'shared': 'isSharedView',
    'recent': 'isRecentView',
    'favorites': 'isFavoritesView',
    'trash': 'isTrashView',
    'photos': 'isPhotosView'
};

/**
 * Derive section name from nav item's data-i18n attribute.
 * @param {HTMLElement} navItem - The nav item element
 * @returns {string|null} - Section name or null if not found
 */
function getSectionFromNavItem(navItem) {
    const i18nKey = navItem.querySelector('span[data-i18n]')?.getAttribute('data-i18n');
    return i18nKey ? i18nKey.replace('nav.', '') : null;
}

/**
 * Set the current active section, updating all view flags and nav UI.
 * @param {string} section - The section to activate ('files', 'shared', 'recent', 'favorites', 'trash')
 * @returns {boolean} true if the section changed
 */
function setCurrentSection(section) {

    if (window.app.currentSection == section) return false;

    // Set all view flags - true for active section, false for others
    Object.entries(VIEW_FLAGS).forEach(([key, flag]) => {
        window.app[flag] = (key === section);
    });

    window.app.currentSection = section;

    // Update nav item active classes by finding matching item from DOM
    window.appElements.navItems.forEach(item => {
        const itemSection = getSectionFromNavItem(item);
        item.classList.toggle('active', itemSection === section);
    });

    // Update page title
    const titleKey = `nav.${section}`;
    const defaultTitle = section.charAt(0).toUpperCase() + section.slice(1);
    window.appElements.pageTitle.textContent = window.i18n ? window.i18n.t(titleKey) : defaultTitle;
    window.appElements.pageTitle.setAttribute('data-i18n', titleKey);

    // Hide sharedView when switching to any other section
    if (section !== 'shared' && window.sharedView) {
        window.sharedView.hide();
    }

    // Hide photosView when switching to any other section
    if (section !== 'photos' && window.photosView) {
        window.photosView.hide();
    }

    return true;
}

function switchToSharedSection() {
    
    if (!setCurrentSection('shared')) return;

    // Hide breadcrumb (only shown in Files view)
    const breadcrumb = document.querySelector('.breadcrumb');
    if (breadcrumb) breadcrumb.style.display = 'none';

    // Hide actions-bar for shared view
    window.setActionsBarMode('hidden');

    const filesGrid = document.getElementById('files-grid');
    const filesListView = document.getElementById('files-list-view');
    if (filesGrid) filesGrid.style.display = 'none';
    if (filesListView) filesListView.style.display = 'none';
    if (filesGrid) filesGrid.classList.add('hidden');
    if (filesListView) filesListView.classList.add('hidden');

    //hide by default empty list
    window.showEmptyList(false);
    
    // Show shared view
    if (window.sharedView) {
        window.sharedView.init();
        window.sharedView.show();
    }
    if (window.multiSelect) window.multiSelect.clear();

}

function switchToFilesSection() {
    if (!setCurrentSection('files')) return;

    // Set actions bar mode
    window.setActionsBarMode('files', true);

    // Show breadcrumb (only in Files view)
    const breadcrumb = document.querySelector('.breadcrumb');
    if (breadcrumb) breadcrumb.style.display = '';

    const filesGrid = document.getElementById('files-grid');
    const filesListView = document.getElementById('files-list-view');
    if (filesGrid) filesGrid.style.display = window.app.currentView === 'grid' ? 'grid' : 'none';
    if (filesGrid) filesGrid.classList.toggle('hidden', window.app.currentView !== 'grid');
    if (filesListView) filesListView.style.display = window.app.currentView === 'list' ? 'flex' : 'none';
    if (filesListView) filesListView.classList.toggle('hidden', window.app.currentView !== 'list');

    //hide by default empty list
    window.showEmptyList(false);

    // Reset to home folder and update breadcrumb
    window.app.currentPath = window.app.userHomeFolderId || '';
    window.app.breadcrumbPath = [];
    window.ui.updateBreadcrumb();
    if (window.multiSelect) window.multiSelect.clear();

    window.loadFiles();
}

function switchToFavoritesSection() {
    if (!setCurrentSection('favorites')) return;

    // Set actions bar mode
    window.setActionsBarMode('favorites');

    // Hide breadcrumb (only shown in Files view)
    const breadcrumb = document.querySelector('.breadcrumb');
    if (breadcrumb) breadcrumb.style.display = 'none';

    const filesGrid = document.getElementById('files-grid');
    const filesListView = document.getElementById('files-list-view');
    if (filesGrid) filesGrid.style.display = window.app.currentView === 'grid' ? 'grid' : 'none';
    if (filesGrid) filesGrid.classList.toggle('hidden', window.app.currentView !== 'grid');
    if (filesListView) filesListView.style.display = window.app.currentView === 'list' ? 'flex' : 'none';
    if (filesListView) filesListView.classList.toggle('hidden', window.app.currentView !== 'list');
    
    //hide by default empty list
    window.showEmptyList(false);

    if (window.favorites) {
        window.favorites.displayFavorites();
    } else {
        console.error('Favorites module not loaded or initialized');
        const filesGridError = document.getElementById('files-grid');
        if (filesGridError) {
            filesGridError.innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-exclamation-circle empty-state-icon error"></i>
                    <p>Error loading the favorites module</p>
                </div>
            `;
        }
    }
    
    if (window.multiSelect) window.multiSelect.clear();

}

function switchToRecentFilesSection() {
    if (!setCurrentSection('recent')) return;

    // Set actions bar mode
    window.setActionsBarMode('recent');

    // Hide breadcrumb (only shown in Files view)
    const breadcrumb = document.querySelector('.breadcrumb');
    if (breadcrumb) breadcrumb.style.display = 'none';

    const filesGrid = document.getElementById('files-grid');
    const filesListView = document.getElementById('files-list-view');
    if (filesGrid) filesGrid.style.display = window.app.currentView === 'grid' ? 'grid' : 'none';
    if (filesGrid) filesGrid.classList.toggle('hidden', window.app.currentView !== 'grid');
    if (filesListView) filesListView.style.display = window.app.currentView === 'list' ? 'flex' : 'none';
    if (filesListView) filesListView.classList.toggle('hidden', window.app.currentView !== 'list');

    //hide by default empty list
    window.showEmptyList(false);

    if (window.recent) {
        window.recent.displayRecentFiles();
    } else {
        console.error('Recent files module not loaded or initialized');
        const filesGridError = document.getElementById('files-grid');
        if (filesGridError) {
            filesGridError.innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-exclamation-circle empty-state-icon error"></i>
                    <p>Error loading the recent files module</p>
                </div>
            `;
        }
    }
    if (window.multiSelect) window.multiSelect.clear();
}

function switchToPhotosSection() {
    if (!setCurrentSection('photos')) return;

    // Hide breadcrumb
    const breadcrumb = document.querySelector('.breadcrumb');
    if (breadcrumb) breadcrumb.style.display = 'none';

    // Hide actions-bar (photos has its own upload via selection bar)
    window.setActionsBarMode('hidden');

    // Hide file containers
    const filesGrid = document.getElementById('files-grid');
    const filesListView = document.getElementById('files-list-view');
    if (filesGrid) { filesGrid.style.display = 'none'; filesGrid.classList.add('hidden'); }
    if (filesListView) { filesListView.style.display = 'none'; filesListView.classList.add('hidden'); }

    //hide by default empty list
    window.showEmptyList(false);

    // Show photos view
    if (window.photosView) {
        window.photosView.show();
    }
    if (window.multiSelect) window.multiSelect.clear();

}

function switchToTrashSection() {
    setCurrentSection('trash');

    // Hide breadcrumb (only shown in Files view)
    const breadcrumb = document.querySelector('.breadcrumb');
    if (breadcrumb) breadcrumb.style.display = 'none';

    // Show files containers (to be filled with trash)
    const filesGrid = document.getElementById('files-grid');
    const filesListView = document.getElementById('files-list-view');
    if (filesGrid) { filesGrid.style.display = app.currentView === 'grid' ? 'grid' : 'none'; filesGrid.classList.toggle('hidden', app.currentView !== 'grid'); }
    if (filesListView) { filesListView.style.display = app.currentView === 'list' ? 'flex' : 'none'; filesListView.classList.toggle('hidden', app.currentView !== 'list'); }

    setActionsBarMode('trash');

    //hide by default empty list
    window.showEmptyList(false);

    // Load trash items
    window.loadTrashItems();

    if (window.multiSelect) window.multiSelect.clear();
}

window.switchToFilesSection = switchToFilesSection;
window.switchToSharedSection = switchToSharedSection;
window.switchToFavoritesSection = switchToFavoritesSection;
window.switchToRecentFilesSection = switchToRecentFilesSection;
window.switchToPhotosSection = switchToPhotosSection;
window.switchToTrashSection = switchToTrashSection;