feat(photos): add Photos timeline view with lightbox and infinite scroll

Backend: new GET /api/photos endpoint with cursor-based pagination that
queries image/video files sorted by EXIF captured_at (falling back to
created_at), joining file_metadata for sort dates.

Frontend: dense photo grid grouped by day with lazy-loaded thumbnails,
IntersectionObserver infinite scroll, multi-select with batch
download/delete, and a full-screen lightbox with prev/next navigation,
EXIF metadata display, and download/favorite/delete toolbar.

Includes navigation wiring, CSS (with dark theme), and i18n translations
for all 9 locales.

static/css/views/photos.css

@@ -0,0 +1,258 @@
+/* Photos timeline view */
+.photos-container {
+    padding: 0;
+    display: none;
+}
+
+.photos-container.active {
+    display: block;
+}
+
+/* Day group header */
+.photos-day-header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    padding: 12px 4px 8px;
+    font-size: 15px;
+    font-weight: 600;
+    color: #2d3748;
+    background: rgba(255, 255, 255, 0.92);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+}
+
+.photos-day-header .photos-day-count {
+    font-weight: 400;
+    color: #94a3b8;
+    font-size: 13px;
+    margin-left: 8px;
+}
+
+/* Photo grid */
+.photos-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 4px;
+    padding: 0 4px 4px;
+}
+
+/* Individual photo tile */
+.photo-tile {
+    position: relative;
+    aspect-ratio: 1;
+    overflow: hidden;
+    border-radius: 4px;
+    cursor: pointer;
+    background: #e2e8f0;
+}
+
+.photo-tile img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.2s ease;
+}
+
+.photo-tile:hover img {
+    transform: scale(1.05);
+}
+
+/* Selection checkbox */
+.photo-tile .photo-check {
+    position: absolute;
+    top: 6px;
+    left: 6px;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    border: 2px solid rgba(255, 255, 255, 0.8);
+    background: rgba(0, 0, 0, 0.25);
+    opacity: 0;
+    transition: opacity 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 11px;
+    z-index: 2;
+}
+
+.photo-tile:hover .photo-check,
+.photo-tile.selected .photo-check {
+    opacity: 1;
+}
+
+.photo-tile.selected .photo-check {
+    background: #ff5e3a;
+    border-color: #ff5e3a;
+}
+
+.photo-tile.selected {
+    outline: 3px solid #ff5e3a;
+    outline-offset: -3px;
+}
+
+.photo-tile.selected img {
+    transform: scale(0.92);
+}
+
+/* Video badge */
+.photo-tile .video-badge {
+    position: absolute;
+    bottom: 6px;
+    right: 6px;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.55);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 12px;
+    z-index: 2;
+}
+
+/* Duration badge for videos */
+.photo-tile .video-duration {
+    position: absolute;
+    bottom: 6px;
+    left: 6px;
+    font-size: 11px;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.55);
+    padding: 2px 6px;
+    border-radius: 4px;
+    z-index: 2;
+}
+
+/* Empty state */
+.photos-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 80px 20px;
+    text-align: center;
+    color: #94a3b8;
+}
+
+.photos-empty i {
+    font-size: 56px;
+    margin-bottom: 16px;
+    color: #cbd5e1;
+}
+
+.photos-empty p {
+    margin: 4px 0;
+    font-size: 15px;
+}
+
+.photos-empty .photos-empty-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #64748b;
+}
+
+/* Infinite scroll sentinel */
+.photos-sentinel {
+    height: 1px;
+    width: 100%;
+}
+
+/* Loading spinner */
+.photos-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    color: #94a3b8;
+    font-size: 14px;
+    gap: 8px;
+}
+
+.photos-loading i {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Selection bar */
+.photos-selection-bar {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #1e293b;
+    color: #fff;
+    padding: 10px 20px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    font-size: 14px;
+}
+
+.photos-selection-bar button {
+    background: none;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+    padding: 6px 10px;
+    border-radius: 6px;
+    font-size: 14px;
+    transition: background 0.15s;
+}
+
+.photos-selection-bar button:hover {
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.photos-selection-bar .selection-count {
+    font-weight: 600;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .photos-grid {
+        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+        gap: 2px;
+        padding: 0 2px 2px;
+    }
+
+    .photo-tile .photo-check {
+        opacity: 1;
+    }
+
+    .photos-day-header {
+        font-size: 14px;
+        padding: 10px 2px 6px;
+    }
+}
+
+/* Dark theme */
+[data-theme="dark"] .photos-day-header {
+    color: #e2e8f0;
+    background: rgba(15, 23, 42, 0.92);
+}
+
+[data-theme="dark"] .photo-tile {
+    background: #334155;
+}
+
+[data-theme="dark"] .photos-empty i {
+    color: #475569;
+}
+
+[data-theme="dark"] .photos-empty .photos-empty-title {
+    color: #94a3b8;
+}
+
+[data-theme="dark"] .photos-empty p {
+    color: #64748b;
+}

static/css/views/photosLightbox.css

@@ -0,0 +1,194 @@
+/* Photos lightbox overlay */
+.photos-lightbox {
+    position: fixed;
+    inset: 0;
+    z-index: 10000;
+    background: rgba(0, 0, 0, 0.92);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    pointer-events: none;
+}
+
+.photos-lightbox.active {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+/* Main content area */
+.lightbox-content {
+    position: relative;
+    max-width: 90vw;
+    max-height: 85vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.lightbox-content img,
+.lightbox-content video {
+    max-width: 90vw;
+    max-height: 85vh;
+    object-fit: contain;
+    border-radius: 4px;
+    user-select: none;
+}
+
+/* Navigation arrows */
+.lightbox-nav {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(255, 255, 255, 0.12);
+    color: #fff;
+    font-size: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s;
+    z-index: 10001;
+}
+
+.lightbox-nav:hover {
+    background: rgba(255, 255, 255, 0.25);
+}
+
+.lightbox-prev {
+    left: 20px;
+}
+
+.lightbox-next {
+    right: 20px;
+}
+
+/* Close button */
+.lightbox-close {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(255, 255, 255, 0.12);
+    color: #fff;
+    font-size: 18px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s;
+    z-index: 10001;
+}
+
+.lightbox-close:hover {
+    background: rgba(255, 255, 255, 0.25);
+}
+
+/* Top info bar */
+.lightbox-info {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 16px 70px 16px 20px;
+    background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
+    color: #fff;
+    z-index: 10001;
+}
+
+.lightbox-filename {
+    font-size: 15px;
+    font-weight: 600;
+    margin-bottom: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.lightbox-meta {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.7);
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+/* Bottom toolbar */
+.lightbox-toolbar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 16px 20px;
+    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    z-index: 10001;
+}
+
+.lightbox-toolbar button {
+    background: rgba(255, 255, 255, 0.12);
+    border: none;
+    color: #fff;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    transition: background 0.15s;
+}
+
+.lightbox-toolbar button:hover {
+    background: rgba(255, 255, 255, 0.25);
+}
+
+.lightbox-toolbar button.active {
+    color: #ff5e3a;
+}
+
+/* Counter */
+.lightbox-counter {
+    position: absolute;
+    bottom: 16px;
+    left: 20px;
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 13px;
+    z-index: 10001;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .lightbox-nav {
+        width: 36px;
+        height: 36px;
+        font-size: 16px;
+    }
+
+    .lightbox-prev {
+        left: 8px;
+    }
+
+    .lightbox-next {
+        right: 8px;
+    }
+
+    .lightbox-content img,
+    .lightbox-content video {
+        max-width: 100vw;
+        max-height: 80vh;
+    }
+}

static/index.html

@@ -14,6 +14,8 @@
     <link rel="stylesheet" href="/css/views/recent.css">
     <link rel="stylesheet" href="/css/views/shared.css">
     <link rel="stylesheet" href="/css/views/trash.css">
+    <link rel="stylesheet" href="/css/views/photos.css">
+    <link rel="stylesheet" href="/css/views/photosLightbox.css">
 
     <!-- Scripts (defer: download in parallel, execute in order, after HTML parsed) -->
     <script defer src="/js/core/i18n.js"></script>
@@ -32,6 +34,8 @@
     <script defer src="/js/features/files/search.js"></script>
     <script defer src="/js/features/library/favorites.js"></script>
     <script defer src="/js/features/library/recent.js"></script>
+    <script defer src="/js/features/library/photos.js"></script>
+    <script defer src="/js/features/library/photosLightbox.js"></script>
     <script defer src="/js/features/sharing/fileSharing.js"></script>
     <script defer src="/js/views/shared/sharedView.js"></script>
     <script defer src="/js/features/files/inlineViewer.js"></script>
@@ -81,6 +85,10 @@
                 <i class="fas fa-star"></i>
                 <span data-i18n="nav.favorites">Favorites</span>
             </div>
+            <div class="nav-item" id="nav-photos">
+                <i class="fas fa-images"></i>
+                <span data-i18n="nav.photos">Photos</span>
+            </div>
             <div class="nav-item">
                 <i class="fas fa-trash"></i>
                 <span data-i18n="nav.trash">Trash</span>

static/js/app/main.js

@@ -271,7 +271,7 @@ function cacheElements() {
     elements.pageTitle = document.querySelector('.page-title');
     elements.actionsBar = document.querySelector('.actions-bar');
     elements.navItems = document.querySelectorAll('.nav-item');
-    elements.trashBtn = document.querySelector('.nav-item:nth-child(5)'); // The trash nav item
+    elements.trashBtn = document.querySelector('.nav-item:nth-child(6)'); // The trash nav item (after Photos)
     elements.searchInput = document.querySelector('.search-container input');
 }
 
@@ -436,7 +436,13 @@ function setupEventListeners() {
                 switchToRecentFilesView();
                 return;
             }
-            
+
+            // Check if this is the photos item
+            if (item.querySelector('span').getAttribute('data-i18n') === 'nav.photos') {
+                switchToPhotosView();
+                return;
+            }
+
             // Check if this is the trash item
             if (item === elements.trashBtn) {
                 // Hide shared view if active

static/js/app/navigation.js

@@ -73,7 +73,8 @@ const VIEW_FLAGS = {
     'shared': 'isSharedView',
     'recent': 'isRecentView',
     'favorites': 'isFavoritesView',
-    'trash': 'isTrashView'
+    'trash': 'isTrashView',
+    'photos': 'isPhotosView'
 };
 
 /**
@@ -114,6 +115,11 @@ function setCurrentSection(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();
+    }
 }
 
 function switchToSharedView() {
@@ -223,7 +229,30 @@ function switchToRecentFilesView() {
     }
 }
 
+function switchToPhotosView() {
+    setCurrentSection('photos');
+
+    // 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';
+    if (filesListView) filesListView.style.display = 'none';
+
+    // Show photos view
+    if (window.photosView) {
+        window.photosView.show();
+    }
+}
+
 window.switchToFilesView = switchToFilesView;
 window.switchToSharedView = switchToSharedView;
 window.switchToFavoritesView = switchToFavoritesView;
 window.switchToRecentFilesView = switchToRecentFilesView;
+window.switchToPhotosView = switchToPhotosView;

static/js/app/state.js

@@ -16,6 +16,7 @@ window.app = {
     isSharedView: false,
     isFavoritesView: false,
     isRecentView: false,
+    isPhotosView: false,
     currentSection: 'files',
     isSearchMode: false,
     shareDialogItem: null,

static/js/features/library/photos.js

@@ -0,0 +1,328 @@
+/**
+ * OxiCloud - Photos Timeline View
+ * Dense photo grid grouped by day, with infinite scroll and multi-select.
+ */
+
+const photosView = {
+    /** @type {Array} All loaded photo items */
+    items: [],
+    /** @type {string|null} Cursor for next page */
+    nextCursor: null,
+    /** @type {boolean} Currently fetching */
+    loading: false,
+    /** @type {boolean} All items loaded */
+    exhausted: false,
+    /** @type {Set<string>} Selected item IDs */
+    selected: new Set(),
+    /** @type {IntersectionObserver|null} */
+    _observer: null,
+    /** @type {HTMLElement|null} */
+    _container: null,
+    /** @type {boolean} */
+    _initialized: false,
+
+    PAGE_SIZE: 200,
+
+    /** Auth headers (HttpOnly cookies) */
+    _headers(json = false) {
+        const h = typeof getCsrfHeaders === 'function' ? { ...getCsrfHeaders() } : {};
+        if (json) h['Content-Type'] = 'application/json';
+        return h;
+    },
+
+    /** Initialize / re-initialize the photos view */
+    init() {
+        if (!this._container) {
+            const contentArea = document.querySelector('.content-area');
+            if (!contentArea) return;
+            const el = document.createElement('div');
+            el.id = 'photos-container';
+            el.className = 'photos-container';
+            contentArea.appendChild(el);
+            this._container = el;
+        }
+        if (!this._initialized) {
+            this._initialized = true;
+        }
+    },
+
+    /** Show the photos view and load data */
+    show() {
+        this.init();
+        if (!this._container) return;
+        this._container.classList.add('active');
+        this.items = [];
+        this.nextCursor = null;
+        this.exhausted = false;
+        this.selected.clear();
+        this._render();
+        this._loadPage();
+    },
+
+    /** Hide the photos view */
+    hide() {
+        if (this._container) {
+            this._container.classList.remove('active');
+        }
+        this._destroyObserver();
+        this._hideSelectionBar();
+    },
+
+    /** Fetch a page of photos from the API */
+    async _loadPage() {
+        if (this.loading || this.exhausted) return;
+        this.loading = true;
+        this._showLoading(true);
+
+        try {
+            let url = `/api/photos?limit=${this.PAGE_SIZE}`;
+            if (this.nextCursor) {
+                url += `&before=${this.nextCursor}`;
+            }
+
+            const res = await fetch(url, {
+                credentials: 'include',
+                headers: this._headers()
+            });
+
+            if (!res.ok) throw new Error(`HTTP ${res.status}`);
+
+            const data = await res.json();
+
+            if (!data || data.length === 0) {
+                this.exhausted = true;
+            } else {
+                this.items.push(...data);
+                // Read cursor from header
+                const cursor = res.headers.get('X-Next-Cursor');
+                if (cursor && data.length >= this.PAGE_SIZE) {
+                    this.nextCursor = cursor;
+                } else {
+                    this.exhausted = true;
+                }
+            }
+        } catch (err) {
+            console.error('Error loading photos:', err);
+            this.exhausted = true;
+        } finally {
+            this.loading = false;
+            this._showLoading(false);
+            this._render();
+        }
+    },
+
+    /** Render the full timeline from this.items */
+    _render() {
+        if (!this._container) return;
+        this._destroyObserver();
+
+        if (this.items.length === 0 && this.exhausted) {
+            this._renderEmpty();
+            return;
+        }
+
+        if (this.items.length === 0) return;
+
+        // Group by day
+        const groups = this._groupByDay(this.items);
+        let html = '';
+
+        for (const [dayLabel, files] of groups) {
+            html += `<div class="photos-day-header">${this._escHtml(dayLabel)}<span class="photos-day-count">${files.length}</span></div>`;
+            html += '<div class="photos-grid">';
+            for (const file of files) {
+                const isVideo = file.mime_type && file.mime_type.startsWith('video/');
+                const selected = this.selected.has(file.id) ? ' selected' : '';
+                const thumbUrl = `/api/files/${file.id}/thumbnail/preview`;
+                html += `<div class="photo-tile${selected}" data-id="${this._escAttr(file.id)}" data-mime="${this._escAttr(file.mime_type)}">`;
+                html += `<div class="photo-check"><i class="fas fa-check"></i></div>`;
+                html += `<img src="${thumbUrl}" loading="lazy" alt="${this._escAttr(file.name)}">`;
+                if (isVideo) {
+                    html += `<div class="video-badge"><i class="fas fa-play"></i></div>`;
+                }
+                html += `</div>`;
+            }
+            html += '</div>';
+        }
+
+        // Sentinel for infinite scroll
+        html += '<div class="photos-sentinel"></div>';
+
+        this._container.innerHTML = html;
+
+        // Attach click handlers via delegation
+        this._container.onclick = (e) => this._handleClick(e);
+
+        // Observe sentinel for infinite scroll
+        const sentinel = this._container.querySelector('.photos-sentinel');
+        if (sentinel && !this.exhausted) {
+            this._observer = new IntersectionObserver((entries) => {
+                if (entries[0].isIntersecting) {
+                    this._loadPage();
+                }
+            }, { rootMargin: '400px' });
+            this._observer.observe(sentinel);
+        }
+    },
+
+    /** Render empty state */
+    _renderEmpty() {
+        const t = (k, d) => window.i18n ? window.i18n.t(k) : d;
+        this._container.innerHTML = `
+            <div class="photos-empty">
+                <i class="fas fa-images"></i>
+                <p class="photos-empty-title">${t('photos.empty_state', 'No photos yet')}</p>
+                <p>${t('photos.empty_hint', 'Upload images or videos to see them here')}</p>
+            </div>`;
+    },
+
+    /** Group items by day using sort_date */
+    _groupByDay(items) {
+        const map = new Map();
+        for (const item of items) {
+            const ts = (item.sort_date || item.created_at) * 1000;
+            const d = new Date(ts);
+            const key = d.toLocaleDateString(undefined, {
+                weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
+            });
+            if (!map.has(key)) map.set(key, []);
+            map.get(key).push(item);
+        }
+        return map;
+    },
+
+    /** Handle click on photo tile */
+    _handleClick(e) {
+        const tile = e.target.closest('.photo-tile');
+        if (!tile) return;
+
+        const id = tile.dataset.id;
+        const check = e.target.closest('.photo-check');
+
+        // If clicking checkbox or in selection mode, toggle select
+        if (check || this.selected.size > 0) {
+            this._toggleSelect(id, tile);
+            return;
+        }
+
+        // Otherwise open lightbox
+        const idx = this.items.findIndex(f => f.id === id);
+        if (idx >= 0 && window.photosLightbox) {
+            window.photosLightbox.open(this.items, idx);
+        }
+    },
+
+    /** Toggle selection of an item */
+    _toggleSelect(id, tile) {
+        if (this.selected.has(id)) {
+            this.selected.delete(id);
+            tile.classList.remove('selected');
+        } else {
+            this.selected.add(id);
+            tile.classList.add('selected');
+        }
+        this._updateSelectionBar();
+    },
+
+    /** Show/update selection bar */
+    _updateSelectionBar() {
+        let bar = document.getElementById('photos-selection-bar');
+
+        if (this.selected.size === 0) {
+            this._hideSelectionBar();
+            return;
+        }
+
+        if (!bar) {
+            bar = document.createElement('div');
+            bar.id = 'photos-selection-bar';
+            bar.className = 'photos-selection-bar';
+            document.body.appendChild(bar);
+        }
+
+        const t = (k, d) => window.i18n ? window.i18n.t(k) : d;
+        const count = this.selected.size;
+        bar.innerHTML = `
+            <span class="selection-count">${count} ${t('photos.items_selected', 'selected')}</span>
+            <button id="photos-sel-download" title="Download"><i class="fas fa-download"></i></button>
+            <button id="photos-sel-delete" title="Delete"><i class="fas fa-trash"></i></button>
+            <button id="photos-sel-clear" title="Clear"><i class="fas fa-times"></i></button>
+        `;
+
+        bar.querySelector('#photos-sel-clear').onclick = () => {
+            this.selected.clear();
+            this._container.querySelectorAll('.photo-tile.selected').forEach(t => t.classList.remove('selected'));
+            this._hideSelectionBar();
+        };
+
+        bar.querySelector('#photos-sel-delete').onclick = async () => {
+            if (!confirm('Delete selected items?')) return;
+            for (const fid of this.selected) {
+                try {
+                    await fetch(`/api/files/${fid}`, {
+                        method: 'DELETE',
+                        credentials: 'include',
+                        headers: this._headers()
+                    });
+                } catch (err) {
+                    console.error('Delete failed:', fid, err);
+                }
+            }
+            // Remove from items and re-render
+            this.items = this.items.filter(f => !this.selected.has(f.id));
+            this.selected.clear();
+            this._hideSelectionBar();
+            this._render();
+        };
+
+        bar.querySelector('#photos-sel-download').onclick = async () => {
+            for (const fid of this.selected) {
+                const a = document.createElement('a');
+                a.href = `/api/files/${fid}`;
+                a.download = '';
+                document.body.appendChild(a);
+                a.click();
+                a.remove();
+            }
+        };
+
+        bar.style.display = 'flex';
+    },
+
+    _hideSelectionBar() {
+        const bar = document.getElementById('photos-selection-bar');
+        if (bar) bar.style.display = 'none';
+    },
+
+    _showLoading(show) {
+        if (!this._container) return;
+        let loader = this._container.querySelector('.photos-loading');
+        if (show && !loader) {
+            loader = document.createElement('div');
+            loader.className = 'photos-loading';
+            loader.innerHTML = '<i class="fas fa-spinner"></i> Loading...';
+            this._container.appendChild(loader);
+        } else if (!show && loader) {
+            loader.remove();
+        }
+    },
+
+    _destroyObserver() {
+        if (this._observer) {
+            this._observer.disconnect();
+            this._observer = null;
+        }
+    },
+
+    _escHtml(s) {
+        const d = document.createElement('div');
+        d.textContent = s;
+        return d.innerHTML;
+    },
+
+    _escAttr(s) {
+        return String(s || '').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+    }
+};
+
+window.photosView = photosView;

static/js/features/library/photosLightbox.js

@@ -0,0 +1,281 @@
+/**
+ * OxiCloud - Photos Lightbox
+ * Full-screen image/video viewer with prev/next navigation.
+ */
+
+const photosLightbox = {
+    /** @type {Array} Items array reference */
+    items: [],
+    /** @type {number} Current index */
+    index: -1,
+    /** @type {HTMLElement|null} */
+    _overlay: null,
+    /** @type {string|null} Current blob URL to revoke */
+    _blobUrl: null,
+    /** @type {Function|null} */
+    _keyHandler: null,
+
+    /** Auth headers */
+    _headers() {
+        return typeof getCsrfHeaders === 'function' ? { ...getCsrfHeaders() } : {};
+    },
+
+    /** Open lightbox at given index */
+    open(items, index) {
+        this.items = items;
+        this.index = index;
+        this._createOverlay();
+        this._show();
+        this._bindKeys();
+    },
+
+    /** Close lightbox */
+    close() {
+        if (this._overlay) {
+            this._overlay.classList.remove('active');
+            setTimeout(() => {
+                if (this._overlay) {
+                    this._overlay.remove();
+                    this._overlay = null;
+                }
+            }, 200);
+        }
+        this._revokeBlob();
+        this._unbindKeys();
+    },
+
+    /** Navigate to previous */
+    prev() {
+        if (this.index > 0) {
+            this.index--;
+            this._show();
+        }
+    },
+
+    /** Navigate to next */
+    next() {
+        if (this.index < this.items.length - 1) {
+            this.index++;
+            this._show();
+        }
+    },
+
+    /** Create the overlay DOM structure */
+    _createOverlay() {
+        if (this._overlay) this._overlay.remove();
+
+        const el = document.createElement('div');
+        el.className = 'photos-lightbox';
+        el.innerHTML = `
+            <div class="lightbox-info">
+                <div class="lightbox-filename"></div>
+                <div class="lightbox-meta"></div>
+            </div>
+            <button class="lightbox-close"><i class="fas fa-times"></i></button>
+            <button class="lightbox-nav lightbox-prev"><i class="fas fa-chevron-left"></i></button>
+            <div class="lightbox-content"></div>
+            <button class="lightbox-nav lightbox-next"><i class="fas fa-chevron-right"></i></button>
+            <div class="lightbox-toolbar">
+                <button class="lb-download" title="Download"><i class="fas fa-download"></i></button>
+                <button class="lb-favorite" title="Favorite"><i class="far fa-star"></i></button>
+                <button class="lb-delete" title="Delete"><i class="fas fa-trash"></i></button>
+            </div>
+            <div class="lightbox-counter"></div>
+        `;
+        document.body.appendChild(el);
+        this._overlay = el;
+
+        // Event listeners
+        el.querySelector('.lightbox-close').onclick = () => this.close();
+        el.querySelector('.lightbox-prev').onclick = () => this.prev();
+        el.querySelector('.lightbox-next').onclick = () => this.next();
+
+        // Click backdrop to close
+        el.addEventListener('click', (e) => {
+            if (e.target === el || e.target.classList.contains('lightbox-content')) {
+                this.close();
+            }
+        });
+
+        // Toolbar actions
+        el.querySelector('.lb-download').onclick = () => this._download();
+        el.querySelector('.lb-favorite').onclick = () => this._toggleFavorite();
+        el.querySelector('.lb-delete').onclick = () => this._delete();
+
+        // Animate in
+        requestAnimationFrame(() => el.classList.add('active'));
+    },
+
+    /** Display the current item */
+    async _show() {
+        if (!this._overlay || this.index < 0) return;
+
+        const item = this.items[this.index];
+        const content = this._overlay.querySelector('.lightbox-content');
+        const filename = this._overlay.querySelector('.lightbox-filename');
+        const meta = this._overlay.querySelector('.lightbox-meta');
+        const counter = this._overlay.querySelector('.lightbox-counter');
+
+        filename.textContent = item.name;
+        counter.textContent = `${this.index + 1} / ${this.items.length}`;
+
+        // Format date
+        const ts = (item.sort_date || item.created_at) * 1000;
+        const dateStr = new Date(ts).toLocaleDateString(undefined, {
+            year: 'numeric', month: 'short', day: 'numeric',
+            hour: '2-digit', minute: '2-digit'
+        });
+        meta.textContent = `${dateStr} · ${item.size_formatted || ''}`;
+
+        // Update nav button visibility
+        this._overlay.querySelector('.lightbox-prev').style.visibility = this.index > 0 ? 'visible' : 'hidden';
+        this._overlay.querySelector('.lightbox-next').style.visibility = this.index < this.items.length - 1 ? 'visible' : 'hidden';
+
+        // Load content
+        this._revokeBlob();
+        content.innerHTML = '<div class="photos-loading"><i class="fas fa-spinner"></i></div>';
+
+        try {
+            const isVideo = item.mime_type && item.mime_type.startsWith('video/');
+            const res = await fetch(`/api/files/${item.id}`, {
+                credentials: 'include',
+                headers: this._headers()
+            });
+
+            if (!res.ok) throw new Error(`HTTP ${res.status}`);
+            const blob = await res.blob();
+            this._blobUrl = URL.createObjectURL(blob);
+
+            if (isVideo) {
+                content.innerHTML = `<video src="${this._blobUrl}" controls autoplay></video>`;
+            } else {
+                content.innerHTML = `<img src="${this._blobUrl}" alt="${this._escAttr(item.name)}">`;
+            }
+        } catch (err) {
+            console.error('Lightbox load error:', err);
+            content.innerHTML = '<div class="photos-loading">Failed to load</div>';
+        }
+
+        // Load EXIF metadata
+        this._loadMetadata(item.id, meta, dateStr, item.size_formatted || '');
+    },
+
+    /** Load EXIF metadata for info bar */
+    async _loadMetadata(fileId, metaEl, dateStr, sizeStr) {
+        try {
+            const res = await fetch(`/api/files/${fileId}/metadata`, {
+                credentials: 'include',
+                headers: this._headers()
+            });
+            if (res.ok) {
+                const data = await res.json();
+                let parts = [dateStr];
+                if (sizeStr) parts.push(sizeStr);
+                if (data.camera_make || data.camera_model) {
+                    parts.push([data.camera_make, data.camera_model].filter(Boolean).join(' '));
+                }
+                if (data.width && data.height) {
+                    parts.push(`${data.width}×${data.height}`);
+                }
+                metaEl.textContent = parts.join(' · ');
+            }
+        } catch (err) {
+            // Non-critical, keep existing meta
+        }
+    },
+
+    /** Download current item */
+    _download() {
+        const item = this.items[this.index];
+        if (!item) return;
+        const a = document.createElement('a');
+        a.href = `/api/files/${item.id}`;
+        a.download = item.name;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+    },
+
+    /** Toggle favorite on current item */
+    async _toggleFavorite() {
+        const item = this.items[this.index];
+        if (!item || !window.favorites) return;
+        try {
+            await fetch(`/api/favorites/file/${item.id}`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: this._headers(true)
+            });
+            const btn = this._overlay.querySelector('.lb-favorite');
+            if (btn) {
+                btn.classList.toggle('active');
+                const icon = btn.querySelector('i');
+                if (icon) {
+                    icon.className = btn.classList.contains('active') ? 'fas fa-star' : 'far fa-star';
+                }
+            }
+        } catch (err) {
+            console.error('Favorite toggle failed:', err);
+        }
+    },
+
+    /** Delete current item */
+    async _delete() {
+        const item = this.items[this.index];
+        if (!item) return;
+        if (!confirm(`Delete ${item.name}?`)) return;
+
+        try {
+            await fetch(`/api/files/${item.id}`, {
+                method: 'DELETE',
+                credentials: 'include',
+                headers: this._headers()
+            });
+            // Remove from photosView items too
+            if (window.photosView) {
+                window.photosView.items = window.photosView.items.filter(f => f.id !== item.id);
+            }
+            this.items.splice(this.index, 1);
+            if (this.items.length === 0) {
+                this.close();
+                if (window.photosView) window.photosView._render();
+            } else {
+                if (this.index >= this.items.length) this.index = this.items.length - 1;
+                this._show();
+                if (window.photosView) window.photosView._render();
+            }
+        } catch (err) {
+            console.error('Delete failed:', err);
+        }
+    },
+
+    /** Keyboard navigation */
+    _bindKeys() {
+        this._keyHandler = (e) => {
+            if (e.key === 'Escape') this.close();
+            else if (e.key === 'ArrowLeft') this.prev();
+            else if (e.key === 'ArrowRight') this.next();
+        };
+        document.addEventListener('keydown', this._keyHandler);
+    },
+
+    _unbindKeys() {
+        if (this._keyHandler) {
+            document.removeEventListener('keydown', this._keyHandler);
+            this._keyHandler = null;
+        }
+    },
+
+    _revokeBlob() {
+        if (this._blobUrl) {
+            URL.revokeObjectURL(this._blobUrl);
+            this._blobUrl = null;
+        }
+    },
+
+    _escAttr(s) {
+        return String(s || '').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+    }
+};
+
+window.photosLightbox = photosLightbox;

static/locales/de.json

@@ -8,8 +8,14 @@
     "shared": "Geteilt",
     "recent": "Zuletzt verwendet",
     "favorites": "Favoriten",
+    "photos": "Fotos",
     "trash": "Papierkorb"
   },
+  "photos": {
+    "empty_state": "Noch keine Fotos",
+    "empty_hint": "Laden Sie Bilder oder Videos hoch, um sie hier zu sehen",
+    "items_selected": "ausgewählt"
+  },
   "actions": {
     "search": "Dateien suchen...",
     "new_folder": "Neuer Ordner",

static/locales/en.json

@@ -8,8 +8,14 @@
     "shared": "Shared",
     "recent": "Recent",
     "favorites": "Favorites",
+    "photos": "Photos",
     "trash": "Trash"
   },
+  "photos": {
+    "empty_state": "No photos yet",
+    "empty_hint": "Upload images or videos to see them here",
+    "items_selected": "selected"
+  },
   "actions": {
     "search": "Search files...",
     "new_folder": "New folder",

static/locales/es.json

@@ -8,8 +8,14 @@
     "shared": "Compartidos",
     "recent": "Recientes",
     "favorites": "Favoritos",
+    "photos": "Fotos",
     "trash": "Papelera"
   },
+  "photos": {
+    "empty_state": "Aún no hay fotos",
+    "empty_hint": "Sube imágenes o videos para verlos aquí",
+    "items_selected": "seleccionados"
+  },
   "share": {
     "dialogTitle": "Compartir Enlace",
     "linkLabel": "Enlace compartido:",

static/locales/fa.json

@@ -8,8 +8,14 @@
     "shared": "هم‌رسانی شده",
     "recent": "اخیر",
     "favorites": "موردعلاقه‌ها",
+    "photos": "عکس‌ها",
     "trash": "سطل زباله"
   },
+  "photos": {
+    "empty_state": "هنوز عکسی نیست",
+    "empty_hint": "تصاویر یا ویدیوها را آپلود کنید تا اینجا نمایش داده شوند",
+    "items_selected": "انتخاب شده"
+  },
   "actions": {
     "search": "جست‌و‌جوی پرونده‌ها..",
     "new_folder": "پوشهٔ جدید",

static/locales/fr.json

@@ -8,8 +8,14 @@
     "shared": "Partagés",
     "recent": "Récents",
     "favorites": "Favoris",
+    "photos": "Photos",
     "trash": "Corbeille"
   },
+  "photos": {
+    "empty_state": "Pas encore de photos",
+    "empty_hint": "Téléchargez des images ou des vidéos pour les voir ici",
+    "items_selected": "sélectionnés"
+  },
   "actions": {
     "search": "Rechercher des fichiers...",
     "new_folder": "Nouveau dossier",

static/locales/it.json

@@ -8,8 +8,14 @@
  "shared": "Condivisi",
  "recent": "Recenti",
  "favorites": "Preferiti",
+ "photos": "Foto",
  "trash": "Cestino"
  },
+ "photos": {
+   "empty_state": "Nessuna foto ancora",
+   "empty_hint": "Carica immagini o video per vederli qui",
+   "items_selected": "selezionati"
+ },
  "actions": {
  "search": "Cerca file...",
  "new_folder": "Nuova cartella",

static/locales/nl.json

@@ -8,8 +8,14 @@
     "shared": "Gedeeld",
     "recent": "Recente",
     "favorites": "Favorieten",
+    "photos": "Foto's",
     "trash": "Prullenbak"
   },
+  "photos": {
+    "empty_state": "Nog geen foto's",
+    "empty_hint": "Upload afbeeldingen of video's om ze hier te zien",
+    "items_selected": "geselecteerd"
+  },
   "actions": {
     "search": "Zoek bestanden...",
     "new_folder": "Nieuwe map",

static/locales/pt.json

@@ -8,8 +8,14 @@
     "shared": "Compartilhados",
     "recent": "Recentes",
     "favorites": "Favoritos",
+    "photos": "Fotos",
     "trash": "Lixeira"
   },
+  "photos": {
+    "empty_state": "Nenhuma foto ainda",
+    "empty_hint": "Envie imagens ou vídeos para vê-los aqui",
+    "items_selected": "selecionados"
+  },
   "actions": {
     "search": "Pesquisar arquivos...",
     "new_folder": "Nova pasta",

static/locales/zh.json

@@ -8,8 +8,14 @@
     "shared": "共享",
     "recent": "最近",
     "favorites": "收藏",
+    "photos": "照片",
     "trash": "回收站"
   },
+  "photos": {
+    "empty_state": "还没有照片",
+    "empty_hint": "上传图片或视频即可在此查看",
+    "items_selected": "已选择"
+  },
   "actions": {
     "search": "搜索文件...",
     "new_folder": "新建文件夹",