feat: add breadcrumb navigation and refactor SPA view management

- Add breadcrumb navigation with folder hierarchy display - Create setCurrentSection() helper to centralize view state management - Derive nav item section dynamically from DOM data-i18n attribute - Remove remnant /shared page and consolidate to SPA sharedView - Add search input to sharedView for client-side filtering - Fix 'Go to Files' button to use switchToFilesView()
2026-02-22 20:20:00 -08:00
parent 85908311dc
commit 6a9554d23f
10 changed files with 196 additions and 903 deletions
@@ -467,41 +467,8 @@ function setupEventListeners() {
                // Load trash items
                window.loadTrashItems();
            } else {
-                // Check if we need to reset shared view
-                if (app.isSharedView) {
-                    // Hide shared view
-                    if (window.sharedView) {
-                        window.sharedView.hide();
-                    }
-                    
-                    // Reset shared view flag
-                    app.isSharedView = false;
-                    
-                    // Clean up shared containers if they exist
-                    const sharedContainer = document.getElementById('shared-container');
-                    if (sharedContainer) {
-                        sharedContainer.style.display = 'none';
-                    }
-                }
-                
-                // Show regular files view
-                app.isTrashView = false;
-                app.currentSection = 'files';
-                
-                // Reset UI
-                elements.pageTitle.textContent = window.i18n ? window.i18n.t('nav.files') : 'Files';
-                setActionsBarMode('files');
-                
-                // Show files containers
-                const filesGrid = document.getElementById('files-grid');
-                const filesListView = document.getElementById('files-list-view');
-                if (filesGrid) filesGrid.style.display = app.currentView === 'grid' ? 'grid' : 'none';
-                if (filesListView) filesListView.style.display = app.currentView === 'list' ? 'block' : 'none';
-                
-                // Load regular files
-                app.currentPath = '';
-                ui.updateBreadcrumb('');
-                window.loadFiles();
+                // Use the proper switchToFilesView function which handles all UI restoration
+                window.switchToFilesView();
            }
        });
    });
@@ -3,35 +3,71 @@
 * Extracted from main.js to keep navigation concerns isolated.
 */

-function switchToSharedView() {
-    window.app.isTrashView = false;
-    window.app.isSharedView = true;
-    window.app.currentSection = 'shared';
+// Mapping of section names to their corresponding view flags
+const VIEW_FLAGS = {
+    'files': 'isFilesView',
+    'shared': 'isSharedView',
+    'recent': 'isRecentView',
+    'favorites': 'isFavoritesView',
+    'trash': 'isTrashView'
+};

-    window.appElements.navItems.forEach(navItem => navItem.classList.remove('active'));
+/**
+ * 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;
+}

-    const sharedNavItem = document.querySelector('.nav-item:nth-child(2)');
-    if (sharedNavItem) {
-        sharedNavItem.classList.add('active');
+/**
+ * Set the current active section, updating all view flags and nav UI.
+ * @param {string} section - The section to activate ('files', 'shared', 'recent', 'favorites', 'trash')
+ */
+function setCurrentSection(section) {
+    // 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();
    }
+}

-    window.appElements.pageTitle.textContent = window.i18n ? window.i18n.t('nav.shared') : 'Shared';
-    window.appElements.pageTitle.setAttribute('data-i18n', 'nav.shared');
-
-    window.ui.updateBreadcrumb('');
+function switchToSharedView() {
+    setCurrentSection('shared');

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

-    if (window.appElements.actionsBar) {
-        window.appElements.actionsBar.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';

+    // Show shared view
    if (window.sharedView) {
        window.sharedView.init();
        window.sharedView.show();
@@ -39,92 +75,47 @@ function switchToSharedView() {
 }

 function switchToFilesView() {
-    window.app.isTrashView = false;
-    window.app.isSharedView = false;
-    window.app.isFavoritesView = false;
-    window.app.isRecentView = false;
-    window.app.currentSection = 'files';
+    setCurrentSection('files');

-    window.appElements.pageTitle.textContent = window.i18n ? window.i18n.t('nav.files') : 'Files';
-    window.appElements.pageTitle.setAttribute('data-i18n', 'nav.files');
+    // Set actions bar mode
+    window.setActionsBarMode('files', true);

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

-    window.appElements.navItems.forEach(navItem => navItem.classList.remove('active'));
-
-    const filesNavItem = document.querySelector('.nav-item:first-child');
-    if (filesNavItem) {
-        filesNavItem.classList.add('active');
-    }
-
-    window.setActionsBarMode('files');
-
-    if (window.sharedView) {
-        window.sharedView.hide();
-    }
-
    const filesGrid = document.getElementById('files-grid');
-    if (filesGrid) {
-        filesGrid.style.display = window.app.currentView === 'grid' ? 'grid' : 'none';
-    }
-
    const filesListView = document.getElementById('files-list-view');
-    if (filesListView) {
-        filesListView.style.display = window.app.currentView === 'list' ? 'block' : 'none';
-    }
+    if (filesGrid) filesGrid.style.display = window.app.currentView === 'grid' ? 'grid' : 'none';
+    if (filesListView) filesListView.style.display = window.app.currentView === 'list' ? 'block' : 'none';
+
+    // Reset to home folder and update breadcrumb
+    window.app.currentPath = window.app.userHomeFolderId || '';
+    window.app.breadcrumbPath = [];
+    window.ui.updateBreadcrumb();

-    if (window.app.userHomeFolderId) {
-        window.app.currentPath = window.app.userHomeFolderId;
-        window.app.breadcrumbPath = [];
-        window.ui.updateBreadcrumb();
-    } else {
-        window.app.currentPath = '';
-    }
    window.loadFiles();
 }

 function switchToFavoritesView() {
-    window.app.isTrashView = false;
-    window.app.isSharedView = false;
-
-    window.app.isFavoritesView = true;
-    window.app.currentSection = 'favorites';
-
-    window.appElements.navItems.forEach(navItem => navItem.classList.remove('active'));
-
-    const favoritesNavItem = document.querySelector('.nav-item:nth-child(4)');
-    if (favoritesNavItem) {
-        favoritesNavItem.classList.add('active');
-    }
-
-    window.appElements.pageTitle.textContent = window.i18n ? window.i18n.t('nav.favorites') : 'Favorites';
-    window.appElements.pageTitle.setAttribute('data-i18n', 'nav.favorites');
-
-    window.ui.updateBreadcrumb('');
-
-    if (window.sharedView) {
-        window.sharedView.hide();
-    }
+    setCurrentSection('favorites');

+    // 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 (filesListView) {
-        filesListView.style.display = window.app.currentView === 'list' ? 'block' : 'none';
-    }
+    if (filesGrid) filesGrid.style.display = window.app.currentView === 'grid' ? 'grid' : 'none';
+    if (filesListView) filesListView.style.display = window.app.currentView === 'list' ? 'block' : 'none';

    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 = `
@@ -138,47 +129,24 @@ function switchToFavoritesView() {
 }

 function switchToRecentFilesView() {
-    window.app.isTrashView = false;
-    window.app.isSharedView = false;
-    window.app.isFavoritesView = false;
-
-    window.app.isRecentView = true;
-    window.app.currentSection = 'recent';
-
-    window.appElements.navItems.forEach(navItem => navItem.classList.remove('active'));
-
-    const recentNavItem = document.querySelector('.nav-item:nth-child(3)');
-    if (recentNavItem) {
-        recentNavItem.classList.add('active');
-    }
-
-    window.appElements.pageTitle.textContent = window.i18n ? window.i18n.t('nav.recent') : 'Recent';
-    window.appElements.pageTitle.setAttribute('data-i18n', 'nav.recent');
-
-    window.ui.updateBreadcrumb('');
-
-    if (window.sharedView) {
-        window.sharedView.hide();
-    }
+    setCurrentSection('recent');

+    // 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 (filesListView) {
-        filesListView.style.display = window.app.currentView === 'list' ? 'block' : 'none';
-    }
+    if (filesGrid) filesGrid.style.display = window.app.currentView === 'grid' ? 'grid' : 'none';
+    if (filesListView) filesListView.style.display = window.app.currentView === 'list' ? 'block' : 'none';

    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 = `
@@ -11,6 +11,7 @@ window.app = {
    contextMenuTargetFile: null,
    selectedTargetFolderId: '',
    moveDialogMode: 'file',
+    isFilesView: true,
    isTrashView: false,
    isSharedView: false,
    isFavoritesView: false,
@@ -20,6 +21,8 @@ window.app = {
    shareDialogItem: null,
    shareDialogItemType: null,
    notificationShareUrl: null,
+    userHomeFolderId: null,
+    userHomeFolderName: null,
    breadcrumbPath: [] // Array of {id, name} tracking folder navigation hierarchy
 };

@@ -129,7 +129,7 @@ const ui = {
            `;
            document.body.appendChild(moveDialog);
        }
-        
+
        // Share dialog
        if (!document.getElementById('share-dialog')) {
            const shareDialog = document.createElement('div');
@@ -144,25 +144,25 @@ const ui = {
                    <div class="shared-item-info">
                        <strong>Item:</strong> <span id="shared-item-name"></span>
                    </div>
-                    
+
                    <div id="existing-shares-section" style="display:none; margin: 15px 0;">
                        <h3 data-i18n="dialogs.existing_shares">Existing shared links</h3>
                        <div id="existing-shares-container"></div>
                    </div>
-                    
+
                    <div class="share-options">
                        <h3 data-i18n="dialogs.share_options">Share options</h3>
-                        
+
                        <div class="form-group">
                            <label for="share-password" data-i18n="dialogs.password">Password (optional):</label>
                            <input type="password" id="share-password" placeholder="Protect with password">
                        </div>
-                        
+
                        <div class="form-group">
                            <label for="share-expiration" data-i18n="dialogs.expiration">Expiration date (optional):</label>
                            <input type="date" id="share-expiration">
                        </div>
-                        
+
                        <div class="form-group">
                            <label data-i18n="dialogs.permissions">Permissions:</label>
                            <div class="permission-options">
@@ -181,7 +181,7 @@ const ui = {
                            </div>
                        </div>
                    </div>
-                    
+
                    <div id="new-share-section" style="display:none; margin: 15px 0;">
                        <h3 data-i18n="dialogs.generated_link">Generated link</h3>
                        <div class="form-group">
@@ -196,7 +196,7 @@ const ui = {
                            </div>
                        </div>
                    </div>
-                    
+
                    <div class="share-dialog-buttons">
                        <button class="btn btn-secondary" id="share-cancel-btn" data-i18n="actions.cancel">Cancel</button>
                        <button class="btn btn-primary" id="share-confirm-btn" data-i18n="actions.share">Share</button>
@@ -204,27 +204,27 @@ const ui = {
                </div>
            `;
            document.body.appendChild(shareDialog);
-            
+
            // Add event listeners for share dialog
            document.getElementById('share-cancel-btn').addEventListener('click', () => {
                contextMenus.closeShareDialog();
            });
-            
+
            document.getElementById('share-confirm-btn').addEventListener('click', async () => {
                await contextMenus.createSharedLink();
            });
-            
+
            document.getElementById('copy-share-btn').addEventListener('click', async () => {
                const shareUrl = document.getElementById('generated-share-url').value;
                await fileSharing.copyLinkToClipboard(shareUrl);
            });
-            
+
            document.getElementById('notify-share-btn').addEventListener('click', () => {
                const shareUrl = document.getElementById('generated-share-url').value;
                contextMenus.showEmailNotificationDialog(shareUrl);
            });
        }
-        
+
        // Notification dialog
        if (!document.getElementById('notification-dialog')) {
            const notificationDialog = document.createElement('div');
@@ -236,19 +236,19 @@ const ui = {
                        <i class="fas fa-envelope" style="color:#ff5e3a"></i>
                        <span data-i18n="dialogs.notify">Notify shared link</span>
                    </div>
-                    
+
                    <p><strong>URL:</strong> <span id="notification-share-url"></span></p>
-                    
+
                    <div class="form-group">
                        <label for="notification-email" data-i18n="dialogs.recipient">Recipient:</label>
                        <input type="email" id="notification-email" placeholder="Email address">
                    </div>
-                    
+
                    <div class="form-group">
                        <label for="notification-message" data-i18n="dialogs.message">Message (optional):</label>
                        <textarea id="notification-message" rows="3"></textarea>
                    </div>
-                    
+
                    <div class="share-dialog-buttons">
                        <button class="btn btn-secondary" id="notification-cancel-btn" data-i18n="actions.cancel">Cancel</button>
                        <button class="btn btn-primary" id="notification-send-btn" data-i18n="actions.send">Send</button>
@@ -256,12 +256,12 @@ const ui = {
                </div>
            `;
            document.body.appendChild(notificationDialog);
-            
+
            // Add event listeners for notification dialog
            document.getElementById('notification-cancel-btn').addEventListener('click', () => {
                contextMenus.closeNotificationDialog();
            });
-            
+
            document.getElementById('notification-send-btn').addEventListener('click', () => {
                contextMenus.sendShareNotification();
            });
@@ -495,24 +495,50 @@ const ui = {
            return window.i18n.t(key);
        };

-        // -- Home item (always present) --
-        const homeItem = document.createElement('span');
-        homeItem.className = 'breadcrumb-item';
-        homeItem.textContent = getTranslatedText('breadcrumb.home', 'Home');
+        // -- Home icon (always present, clickable to go to root) --
+        const homeIcon = document.createElement('span');
+        homeIcon.className = 'breadcrumb-item breadcrumb-home';
+        homeIcon.innerHTML = '<i class="fas fa-home"></i>';
+        homeIcon.title = getTranslatedText('breadcrumb.home', 'Home');

-        // If we have deeper segments, Home is clickable
-        if (path.length > 0 && window.app.userHomeFolderId) {
-            homeItem.classList.add('breadcrumb-link');
-            homeItem.addEventListener('click', () => {
+        // Home is always clickable if we have a home folder
+        if (window.app.userHomeFolderId) {
+            homeIcon.classList.add('breadcrumb-link');
+            homeIcon.addEventListener('click', () => {
                window.app.breadcrumbPath = [];
                window.app.currentPath = window.app.userHomeFolderId;
                self.updateBreadcrumb();
                window.loadFiles();
            });
-        } else {
-            homeItem.classList.add('breadcrumb-current');
        }
-        breadcrumb.appendChild(homeItem);
+        breadcrumb.appendChild(homeIcon);
+
+        // -- Root/Home folder name (if available) --
+        if (window.app.userHomeFolderName) {
+            const separator1 = document.createElement('span');
+            separator1.className = 'breadcrumb-separator';
+            separator1.textContent = '>';
+            breadcrumb.appendChild(separator1);
+
+            const rootFolderItem = document.createElement('span');
+            rootFolderItem.className = 'breadcrumb-item';
+            rootFolderItem.textContent = window.app.userHomeFolderName;
+
+            // If we're at the home folder level (no deeper navigation), show as current
+            if (path.length === 0) {
+                rootFolderItem.classList.add('breadcrumb-current');
+            } else {
+                // Otherwise clickable to go back to home
+                rootFolderItem.classList.add('breadcrumb-link');
+                rootFolderItem.addEventListener('click', () => {
+                    window.app.breadcrumbPath = [];
+                    window.app.currentPath = window.app.userHomeFolderId;
+                    self.updateBreadcrumb();
+                    window.loadFiles();
+                });
+            }
+            breadcrumb.appendChild(rootFolderItem);
+        }

        // -- Intermediate + current segments --
        path.forEach((segment, index) => {
@@ -1,406 +0,0 @@
-/**
- * OxiCloud - Shared Resources Page (/shared)
- * All operations go through the backend API at /api/shares.
- */
-
-// Authentication check
-function checkAuthentication() {
-    const token = localStorage.getItem('oxicloud_token');
-    const tokenExpiry = localStorage.getItem('oxicloud_token_expiry');
-    if (!token || !tokenExpiry || new Date(tokenExpiry) < new Date()) {
-        window.location.href = '/login';
-    }
-}
-
-document.addEventListener('DOMContentLoaded', async () => {
-    // ── i18n ── (translatePage is called automatically by i18n.js on init)
-
-    function t(key, fallback) {
-        return (window.i18n && window.i18n.t) ? window.i18n.t(key, fallback) : fallback;
-    }
-
-    // ── Auth headers helper ──
-    function authHeaders(json = false) {
-        const h = {};
-        const token = localStorage.getItem('oxicloud_token');
-        if (token) h['Authorization'] = `Bearer ${token}`;
-        if (json) h['Content-Type'] = 'application/json';
-        return h;
-    }
-
-    // ── Elements ──
-    const sharedItemsList = document.getElementById('shared-items-list');
-    const emptySharedState = document.getElementById('empty-shared-state');
-    const filterType = document.getElementById('filter-type');
-    const sortBy = document.getElementById('sort-by');
-    const sharedSearch = document.getElementById('shared-search');
-    const sharedSearchBtn = document.getElementById('shared-search-btn');
-    const goToFilesBtn = document.getElementById('go-to-files');
-
-    // Share dialog elements
-    const shareDialog = document.getElementById('share-dialog');
-    const shareDialogCloseBtn = shareDialog ? shareDialog.querySelector('.close-dialog-btn') : null;
-    const shareDialogIcon = document.getElementById('share-dialog-icon');
-    const shareDialogName = document.getElementById('share-dialog-name');
-    const shareLinkUrl = document.getElementById('share-link-url');
-    const copyLinkBtn = document.getElementById('copy-link-btn');
-    const enablePassword = document.getElementById('enable-password');
-    const sharePassword = document.getElementById('share-password');
-    const generatePasswordBtn = document.getElementById('generate-password');
-    const enableExpiration = document.getElementById('enable-expiration');
-    const shareExpiration = document.getElementById('share-expiration');
-    const permissionRead = document.getElementById('permission-read');
-    const permissionWrite = document.getElementById('permission-write');
-    const permissionReshare = document.getElementById('permission-reshare');
-    const updateShareBtn = document.getElementById('update-share-btn');
-    const removeShareBtn = document.getElementById('remove-share-btn');
-
-    // Notification dialog elements
-    const notificationDialog = document.getElementById('share-notification-dialog');
-    const notificationCloseBtn = notificationDialog ? notificationDialog.querySelector('.close-dialog-btn') : null;
-    const notifyDialogIcon = document.getElementById('notify-dialog-icon');
-    const notifyDialogName = document.getElementById('notify-dialog-name');
-    const notificationEmail = document.getElementById('notification-email');
-    const notificationMessage = document.getElementById('notification-message');
-    const sendNotificationBtn = document.getElementById('send-notification-btn');
-
-    // Notification banner
-    const notificationBanner = document.getElementById('notification-banner');
-    const notificationBannerMessage = document.getElementById('notification-message');
-    const closeNotificationBtn = document.getElementById('close-notification');
-
-    // ── State ──
-    let currentSharedItem = null;
-    let allSharedItems = [];
-    let filteredItems = [];
-
-    // ── Init ──
-    checkAuthentication();
-    await loadSharedItems();
-
-    // ── Event listeners ──
-    if (filterType) filterType.addEventListener('change', filterAndSortItems);
-    if (sortBy) sortBy.addEventListener('change', filterAndSortItems);
-    if (sharedSearchBtn) sharedSearchBtn.addEventListener('click', filterAndSortItems);
-    if (sharedSearch) {
-        let searchDebounce;
-        sharedSearch.addEventListener('input', () => {
-            clearTimeout(searchDebounce);
-            searchDebounce = setTimeout(filterAndSortItems, 250);
-        });
-        sharedSearch.addEventListener('keyup', e => { if (e.key === 'Enter') { clearTimeout(searchDebounce); filterAndSortItems(); } });
-    }
-    if (goToFilesBtn) goToFilesBtn.addEventListener('click', () => window.location.href = '/');
-
-    if (shareDialogCloseBtn) shareDialogCloseBtn.addEventListener('click', closeShareDialog);
-    if (copyLinkBtn) copyLinkBtn.addEventListener('click', copyShareLink);
-    if (enablePassword) enablePassword.addEventListener('change', () => {
-        if (sharePassword) { sharePassword.disabled = !enablePassword.checked; if (enablePassword.checked) sharePassword.focus(); }
-    });
-    if (generatePasswordBtn) generatePasswordBtn.addEventListener('click', generatePassword);
-    if (enableExpiration) enableExpiration.addEventListener('change', () => {
-        if (shareExpiration) { shareExpiration.disabled = !enableExpiration.checked; if (enableExpiration.checked) shareExpiration.focus(); }
-    });
-    if (updateShareBtn) updateShareBtn.addEventListener('click', updateSharedItem);
-    if (removeShareBtn) removeShareBtn.addEventListener('click', removeSharedItem);
-
-    if (notificationCloseBtn) notificationCloseBtn.addEventListener('click', closeNotificationDialog);
-    if (sendNotificationBtn) sendNotificationBtn.addEventListener('click', sendNotification);
-    if (closeNotificationBtn) closeNotificationBtn.addEventListener('click', () => {
-        if (notificationBanner) notificationBanner.classList.remove('active');
-    });
-
-    // ── Load shares from backend ──
-    async function loadSharedItems() {
-        try {
-            const res = await fetch('/api/shares?page=1&per_page=1000', {
-                headers: authHeaders()
-            });
-            if (res.ok) {
-                const data = await res.json();
-                allSharedItems = data.items || [];
-            } else {
-                allSharedItems = [];
-            }
-        } catch (err) {
-            console.error('Error loading shared items:', err);
-            allSharedItems = [];
-        }
-        filterAndSortItems();
-    }
-
-    // ── Filter & sort ──
-    function filterAndSortItems() {
-        const type = filterType ? filterType.value : 'all';
-        const sort = sortBy ? sortBy.value : 'date';
-        const searchTerm = sharedSearch ? sharedSearch.value.toLowerCase() : '';
-
-        filteredItems = allSharedItems.filter(item => {
-            if (type !== 'all' && item.item_type !== type) return false;
-            const name = (item.item_name || item.item_id || '').toLowerCase();
-            return name.includes(searchTerm);
-        });
-
-        filteredItems.sort((a, b) => {
-            if (sort === 'name') {
-                return (a.item_name || a.item_id || '').localeCompare(b.item_name || b.item_id || '');
-            } else if (sort === 'date') {
-                return (b.created_at || 0) - (a.created_at || 0);
-            } else if (sort === 'expiration') {
-                if (!a.expires_at && !b.expires_at) return 0;
-                if (!a.expires_at) return 1;
-                if (!b.expires_at) return -1;
-                return a.expires_at - b.expires_at;
-            }
-            return 0;
-        });
-
-        displaySharedItems();
-    }
-
-    // ── Display table ──
-    function displaySharedItems() {
-        if (!sharedItemsList) return;
-        sharedItemsList.innerHTML = '';
-
-        if (filteredItems.length === 0) {
-            if (emptySharedState) emptySharedState.style.display = 'flex';
-            const listContainer = document.querySelector('.shared-list-container');
-            if (listContainer) listContainer.style.display = 'none';
-            return;
-        }
-
-        if (emptySharedState) emptySharedState.style.display = 'none';
-        const listContainer = document.querySelector('.shared-list-container');
-        if (listContainer) listContainer.style.display = 'block';
-
-        filteredItems.forEach(item => {
-            const row = document.createElement('tr');
-            const displayName = item.item_name || item.item_id || 'Unknown';
-
-            // Name
-            const nameCell = document.createElement('td');
-            nameCell.className = 'shared-item-name';
-            nameCell.innerHTML = `<span class="item-icon">${item.item_type === 'file' ? '📄' : '📁'}</span><span>${displayName}</span>`;
-
-            // Type
-            const typeCell = document.createElement('td');
-            typeCell.textContent = item.item_type === 'file' ? t('shared_typeFile', 'File') : t('shared_typeFolder', 'Folder');
-
-            // Date
-            const dateCell = document.createElement('td');
-            dateCell.textContent = formatDate(item.created_at);
-
-            // Expiration
-            const expirationCell = document.createElement('td');
-            expirationCell.textContent = item.expires_at ? formatDate(item.expires_at) : t('shared_noExpiration', 'No expiration');
-
-            // Permissions
-            const permissionsCell = document.createElement('td');
-            const perms = [];
-            if (item.permissions?.read) perms.push(t('share_permissionRead', 'Read'));
-            if (item.permissions?.write) perms.push(t('share_permissionWrite', 'Write'));
-            if (item.permissions?.reshare) perms.push(t('share_permissionReshare', 'Reshare'));
-            permissionsCell.textContent = perms.join(', ') || 'Read';
-
-            // Password
-            const passwordCell = document.createElement('td');
-            passwordCell.textContent = item.has_password ? t('shared_hasPassword', 'Yes') : t('shared_noPassword', 'No');
-
-            // Actions
-            const actionsCell = document.createElement('td');
-            actionsCell.className = 'shared-item-actions';
-
-            const editBtn = document.createElement('button');
-            editBtn.className = 'action-btn edit-btn';
-            editBtn.innerHTML = '<span class="action-icon">✏️</span>';
-            editBtn.title = t('shared_editShare', 'Edit Share');
-            editBtn.addEventListener('click', () => openShareDialog(item));
-
-            const notifyBtn = document.createElement('button');
-            notifyBtn.className = 'action-btn notify-btn';
-            notifyBtn.innerHTML = '<span class="action-icon">📧</span>';
-            notifyBtn.title = t('shared_notifyShare', 'Notify Someone');
-            notifyBtn.addEventListener('click', () => openNotificationDialog(item));
-
-            const cpBtn = document.createElement('button');
-            cpBtn.className = 'action-btn copy-btn';
-            cpBtn.innerHTML = '<span class="action-icon">📋</span>';
-            cpBtn.title = t('shared_copyLink', 'Copy Link');
-            cpBtn.addEventListener('click', () => {
-                navigator.clipboard.writeText(item.url)
-                    .then(() => showNotification(t('shared_linkCopied', 'Link copied!')))
-                    .catch(() => showNotification(t('shared_linkCopyFailed', 'Failed to copy link'), 'error'));
-            });
-
-            const rmBtn = document.createElement('button');
-            rmBtn.className = 'action-btn remove-btn';
-            rmBtn.innerHTML = '<span class="action-icon">🗑️</span>';
-            rmBtn.title = t('shared_removeShare', 'Remove Share');
-            rmBtn.addEventListener('click', () => { currentSharedItem = item; removeSharedItem(); });
-
-            actionsCell.append(editBtn, notifyBtn, cpBtn, rmBtn);
-            row.append(nameCell, typeCell, dateCell, expirationCell, permissionsCell, passwordCell, actionsCell);
-            sharedItemsList.appendChild(row);
-        });
-    }
-
-    // ── Share dialog ──
-    function openShareDialog(item) {
-        currentSharedItem = item;
-        const dn = item.item_name || item.item_id || 'Unknown';
-
-        if (shareDialogIcon) shareDialogIcon.textContent = item.item_type === 'file' ? '📄' : '📁';
-        if (shareDialogName) shareDialogName.textContent = dn;
-        if (shareLinkUrl) shareLinkUrl.value = item.url || '';
-
-        if (permissionRead) permissionRead.checked = item.permissions?.read !== false;
-        if (permissionWrite) permissionWrite.checked = !!item.permissions?.write;
-        if (permissionReshare) permissionReshare.checked = !!item.permissions?.reshare;
-
-        if (enablePassword) {
-            enablePassword.checked = item.has_password;
-            if (sharePassword) { sharePassword.disabled = !enablePassword.checked; sharePassword.value = ''; }
-        }
-        if (enableExpiration) {
-            enableExpiration.checked = !!item.expires_at;
-            if (shareExpiration) {
-                shareExpiration.disabled = !enableExpiration.checked;
-                shareExpiration.value = item.expires_at ? new Date(item.expires_at * 1000).toISOString().split('T')[0] : '';
-            }
-        }
-
-        if (shareDialog) shareDialog.classList.add('active');
-    }
-
-    function closeShareDialog() {
-        if (shareDialog) shareDialog.classList.remove('active');
-        currentSharedItem = null;
-    }
-
-    // ── Notification dialog ──
-    function openNotificationDialog(item) {
-        currentSharedItem = item;
-        const dn = item.item_name || item.item_id || 'Unknown';
-        if (notifyDialogIcon) notifyDialogIcon.textContent = item.item_type === 'file' ? '📄' : '📁';
-        if (notifyDialogName) notifyDialogName.textContent = dn;
-        if (notificationEmail) notificationEmail.value = '';
-        if (notificationMessage) notificationMessage.value = '';
-        if (notificationDialog) notificationDialog.classList.add('active');
-    }
-
-    function closeNotificationDialog() {
-        if (notificationDialog) notificationDialog.classList.remove('active');
-        currentSharedItem = null;
-    }
-
-    function copyShareLink() {
-        if (!shareLinkUrl) return;
-        navigator.clipboard.writeText(shareLinkUrl.value)
-            .then(() => showNotification(t('shared_linkCopied', 'Link copied!')))
-            .catch(() => showNotification(t('shared_linkCopyFailed', 'Failed to copy link'), 'error'));
-    }
-
-    // ── Generate secure password with crypto API ──
-    function generatePassword() {
-        if (!sharePassword || !enablePassword) return;
-        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*';
-        const array = new Uint32Array(16);
-        crypto.getRandomValues(array);
-        let password = '';
-        for (let i = 0; i < 16; i++) {
-            password += chars[array[i] % chars.length];
-        }
-        sharePassword.value = password;
-        enablePassword.checked = true;
-        sharePassword.disabled = false;
-    }
-
-    // ── Update share via API ──
-    async function updateSharedItem() {
-        if (!currentSharedItem) return;
-
-        const body = {
-            permissions: {
-                read: permissionRead ? permissionRead.checked : true,
-                write: permissionWrite ? permissionWrite.checked : false,
-                reshare: permissionReshare ? permissionReshare.checked : false
-            },
-            password: (enablePassword && enablePassword.checked && sharePassword && sharePassword.value) ? sharePassword.value : null,
-            expires_at: (enableExpiration && enableExpiration.checked && shareExpiration && shareExpiration.value)
-                ? Math.floor(new Date(shareExpiration.value).getTime() / 1000)
-                : null
-        };
-
-        try {
-            const res = await fetch(`/api/shares/${currentSharedItem.id}`, {
-                method: 'PUT',
-                headers: authHeaders(true),
-                body: JSON.stringify(body)
-            });
-            if (!res.ok) {
-                const err = await res.json().catch(() => ({}));
-                throw new Error(err.error || `Server error ${res.status}`);
-            }
-            showNotification(t('shared_itemUpdated', 'Share settings updated'));
-        } catch (err) {
-            console.error('Error updating share:', err);
-            showNotification(err.message || 'Error updating share', 'error');
-        }
-        closeShareDialog();
-        await loadSharedItems();
-    }
-
-    // ── Remove share via API ──
-    async function removeSharedItem() {
-        if (!currentSharedItem) return;
-        try {
-            const res = await fetch(`/api/shares/${currentSharedItem.id}`, {
-                method: 'DELETE',
-                headers: authHeaders()
-            });
-            if (!res.ok && res.status !== 204) throw new Error(`Server error ${res.status}`);
-            showNotification(t('shared_itemRemoved', 'Share removed'));
-        } catch (err) {
-            console.error('Error removing share:', err);
-            showNotification('Error removing share', 'error');
-        }
-        closeShareDialog();
-        await loadSharedItems();
-    }
-
-    // ── Send notification (stub) ──
-    function sendNotification() {
-        if (!currentSharedItem) return;
-        const email = notificationEmail ? notificationEmail.value.trim() : '';
-        const message = notificationMessage ? notificationMessage.value.trim() : '';
-
-        if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-            showNotification(t('shared_invalidEmail', 'Please enter a valid email address'), 'error');
-            return;
-        }
-
-        if (window.fileSharing && window.fileSharing.sendShareNotification) {
-            window.fileSharing.sendShareNotification(currentSharedItem.url, email, message)
-                .then(() => { closeNotificationDialog(); showNotification(t('shared_notificationSent', 'Notification sent')); })
-                .catch(() => showNotification(t('shared_notificationFailed', 'Failed to send notification'), 'error'));
-        }
-    }
-
-    // ── Helpers ──
-    function showNotification(message, type = 'success') {
-        if (notificationBannerMessage && notificationBanner) {
-            notificationBannerMessage.textContent = message;
-            notificationBanner.className = 'notification-banner active ' + type;
-            setTimeout(() => notificationBanner.classList.remove('active'), 5000);
-        } else if (window.ui && window.ui.showNotification) {
-            window.ui.showNotification(message, type);
-        } else {
-            alert(message);
-        }
-    }
-
-    function formatDate(value) {
-        return window.formatDateShort ? window.formatDateShort(value) : String(value);
-    }
-});
@@ -68,6 +68,9 @@ const sharedView = {
        container.style.display = 'block';
        container.innerHTML = `
            <div class="shared-header">
+                <div class="shared-search">
+                    <input type="text" id="shared-search-input" data-i18n-placeholder="actions.search" placeholder="Search shared items...">
+                </div>
                <div class="shared-filters">
                    <div class="shared-custom-select" id="filter-type-wrapper">
                        <button class="shared-select-toggle" id="filter-type-toggle">
@@ -98,6 +101,7 @@ const sharedView = {
                <i class="fas fa-share-alt" style="font-size: 48px; color: #ddd; margin-bottom: 16px;"></i>
                <p data-i18n="shared_emptyStateTitle">No shared items</p>
                <p data-i18n="shared_emptyStateDesc">Items you share will appear here</p>
+                <button id="go-to-files-btn" class="button primary" data-i18n="shared.goToFiles">Go to Files</button>
            </div>

            <div class="shared-list-container" style="display:none;">
@@ -239,6 +243,30 @@ const sharedView = {
            const sendBtn = document.getElementById('sv-send-notification-btn');
            if (sendBtn) sendBtn.addEventListener('click', () => this.sendNotification());
        }
+
+        // "Go to Files" button in empty state
+        const goToFilesBtn = document.getElementById('go-to-files-btn');
+        if (goToFilesBtn) {
+            goToFilesBtn.addEventListener('click', () => {
+                if (window.switchToFilesView) window.switchToFilesView();
+            });
+        }
+
+        // Search input
+        const searchInput = document.getElementById('shared-search-input');
+        if (searchInput) {
+            let searchDebounce;
+            searchInput.addEventListener('input', () => {
+                clearTimeout(searchDebounce);
+                searchDebounce = setTimeout(() => this.filterAndSortItems(), 250);
+            });
+            searchInput.addEventListener('keyup', e => {
+                if (e.key === 'Enter') {
+                    clearTimeout(searchDebounce);
+                    this.filterAndSortItems();
+                }
+            });
+        }
    },

    // Initialize a custom select dropdown
@@ -282,9 +310,9 @@ const sharedView = {
        const type = filterTypeActive ? filterTypeActive.dataset.value : 'all';
        const sort = sortByActive ? sortByActive.dataset.value : 'date';

-        // Use the top-bar search if available, otherwise no filter
-        const topSearch = document.getElementById('shared-search');
-        const searchTerm = topSearch ? topSearch.value.toLowerCase() : '';
+        // Use the shared view search input
+        const searchInput = document.getElementById('shared-search-input');
+        const searchTerm = searchInput ? searchInput.value.toLowerCase() : '';

        this.filteredItems = this.items.filter(item => {
            if (type !== 'all' && item.item_type !== type) return false;