modernizing frontend

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "oxicloud"
-version = "0.1.0"
+version = "0.3.0"
 edition = "2021"
 
 

src/application/ports/file_ports.rs

@@ -125,6 +125,9 @@ pub trait FileManagementUseCase: Send + Sync + 'static {
     /// Mueve un archivo a otra carpeta
     async fn move_file(&self, file_id: &str, folder_id: Option<String>) -> Result<FileDto, DomainError>;
     
+    /// Renombra un archivo
+    async fn rename_file(&self, file_id: &str, new_name: &str) -> Result<FileDto, DomainError>;
+    
     /// Elimina un archivo
     async fn delete_file(&self, id: &str) -> Result<(), DomainError>;
 

src/application/ports/storage_ports.rs

@@ -91,6 +91,13 @@ pub trait FileWritePort: Send + Sync + 'static {
         target_folder_id: Option<String>,
     ) -> Result<File, DomainError>;
 
+    /// Renombra un archivo (same folder, different name).
+    async fn rename_file(
+        &self,
+        file_id: &str,
+        new_name: &str,
+    ) -> Result<File, DomainError>;
+
     /// Elimina un archivo.
     async fn delete_file(&self, id: &str) -> Result<(), DomainError>;
 

src/application/services/file_management_service.rs

@@ -109,6 +109,27 @@ impl FileManagementUseCase for FileManagementService {
         Ok(FileDto::from(moved_file))
     }
 
+    async fn rename_file(
+        &self,
+        file_id: &str,
+        new_name: &str,
+    ) -> Result<FileDto, DomainError> {
+        info!("Renaming file with ID: {} to \"{}\"", file_id, new_name);
+
+        let renamed_file = self.file_repository.rename_file(file_id, new_name).await.map_err(|e| {
+            error!("Error renaming file (ID: {}): {}", file_id, e);
+            e
+        })?;
+
+        info!(
+            "File renamed successfully: {} (ID: {})",
+            renamed_file.name(),
+            renamed_file.id()
+        );
+
+        Ok(FileDto::from(renamed_file))
+    }
+
     async fn delete_file(&self, id: &str) -> Result<(), DomainError> {
         self.file_repository.delete_file(id).await
     }

src/common/stubs.rs

@@ -314,6 +314,14 @@ impl FileWritePort for StubFileWritePort {
         Ok(File::default())
     }
 
+    async fn rename_file(
+        &self,
+        _file_id: &str,
+        _new_name: &str,
+    ) -> Result<File, DomainError> {
+        Ok(File::default())
+    }
+
     async fn delete_file(&self, _id: &str) -> Result<(), DomainError> {
         Ok(())
     }
@@ -640,6 +648,14 @@ impl FileManagementUseCase for StubFileManagementUseCase {
         Ok(FileDto::default())
     }
 
+    async fn rename_file(
+        &self,
+        _file_id: &str,
+        _new_name: &str,
+    ) -> Result<FileDto, DomainError> {
+        Ok(FileDto::default())
+    }
+
     async fn delete_file(&self, _id: &str) -> Result<(), DomainError> {
         Ok(())
     }

src/domain/repositories/file_repository.rs

@@ -97,6 +97,13 @@ pub trait FileWriteRepository: Send + Sync + 'static {
         target_folder_id: Option<String>,
     ) -> Result<File, DomainError>;
 
+    /// Renombra un archivo (same folder, different name).
+    async fn rename_file(
+        &self,
+        file_id: &str,
+        new_name: &str,
+    ) -> Result<File, DomainError>;
+
     /// Elimina un archivo.
     async fn delete_file(&self, id: &str) -> Result<(), DomainError>;
 

src/infrastructure/repositories/composite_file_repository.rs

@@ -107,6 +107,14 @@ impl FileWritePort for CompositeFileRepository {
         self.write.move_file(file_id, target_folder_id).await
     }
 
+    async fn rename_file(
+        &self,
+        file_id: &str,
+        new_name: &str,
+    ) -> Result<File, DomainError> {
+        self.write.rename_file(file_id, new_name).await
+    }
+
     async fn delete_file(&self, id: &str) -> Result<(), DomainError> {
         self.write.delete_file(id).await
     }

src/infrastructure/repositories/file_fs_write_repository.rs

@@ -372,6 +372,55 @@ impl FileWritePort for FileFsWriteRepository {
             .map_err(|e| DomainError::internal_error("File", e.to_string()))
     }
 
+    async fn rename_file(
+        &self,
+        file_id: &str,
+        new_name: &str,
+    ) -> Result<File, DomainError> {
+        // 1. Get current file info
+        let original_path = self.id_mapping_service.get_path_by_id(file_id).await?;
+        let old_abs = self.resolve_storage_path(&original_path);
+        if !old_abs.exists() || !old_abs.is_file() {
+            return Err(DomainError::not_found("File", file_id.to_string()));
+        }
+        let (size, created_at, modified_at) = self.get_file_metadata_raw(&old_abs).await.map_err(map_repo_err)?;
+
+        // 2. Build new path (same parent directory, different filename)
+        let parent = original_path.parent()
+            .unwrap_or_else(|| StoragePath::new(vec![]));
+        let new_storage_path = parent.join(new_name);
+        if self.file_exists_at_storage_path(&new_storage_path).await.map_err(map_repo_err)? {
+            return Err(DomainError::already_exists("File",
+                format!("File already exists: {}", new_name)));
+        }
+        let new_abs = self.resolve_storage_path(&new_storage_path);
+        let mime = from_path(&new_abs).first_or_octet_stream().to_string();
+
+        // 3. Rename on disk
+        time::timeout(
+            self.config.timeouts.file_timeout(),
+            FileSystemUtils::rename_with_sync(&old_abs, &new_abs),
+        ).await
+        .map_err(|_| DomainError::internal_error("File", "Timeout renaming file"))?
+        .map_err(|e| DomainError::internal_error("File", e.to_string()))?;
+
+        // 4. Update id→path mapping
+        self.id_mapping_service.update_path(file_id, &new_storage_path).await?;
+        let _ = self.id_mapping_service.save_changes().await;
+
+        File::with_timestamps(
+            file_id.to_string(),
+            new_name.to_string(),
+            new_storage_path,
+            size,
+            mime,
+            None,
+            created_at,
+            modified_at,
+        )
+        .map_err(|e| DomainError::internal_error("File", e.to_string()))
+    }
+
     async fn delete_file(&self, id: &str) -> Result<(), DomainError> {
         let storage_path = self.id_mapping_service.get_path_by_id(id).await?;
         let abs_path = self.resolve_storage_path(&storage_path);

src/interfaces/api/handlers/file_handler.rs

@@ -540,6 +540,41 @@ impl FileHandler {
     //  MOVE
     // ═══════════════════════════════════════════════════════════════════════
 
+    /// Renames a file
+    pub async fn rename_file(
+        State(state): State<GlobalState>,
+        Path(id): Path<String>,
+        Json(payload): Json<serde_json::Value>,
+    ) -> impl IntoResponse {
+        let new_name = match payload.get("name").and_then(|v| v.as_str()) {
+            Some(name) if !name.trim().is_empty() => name.trim().to_string(),
+            _ => {
+                return (StatusCode::BAD_REQUEST, Json(serde_json::json!({
+                    "error": "Missing or empty 'name' field"
+                }))).into_response();
+            }
+        };
+
+        tracing::info!("Renaming file {} to \"{}\"", id, new_name);
+        let mgmt = &state.applications.file_management_service;
+        match mgmt.rename_file(&id, &new_name).await {
+            Ok(file_dto) => (StatusCode::OK, Json(file_dto)).into_response(),
+            Err(err) => {
+                tracing::error!("Error renaming file: {}", err);
+                let status = if err.to_string().contains("not found") || err.to_string().contains("NotFound") {
+                    StatusCode::NOT_FOUND
+                } else if err.to_string().contains("already exists") {
+                    StatusCode::CONFLICT
+                } else {
+                    StatusCode::INTERNAL_SERVER_ERROR
+                };
+                (status, Json(serde_json::json!({
+                    "error": format!("Error renaming file: {}", err)
+                }))).into_response()
+            }
+        }
+    }
+
     /// Moves a file to a different folder
     pub async fn move_file(
         State(state): State<GlobalState>,

src/interfaces/api/routes.rs

@@ -2,13 +2,23 @@ use std::sync::Arc;
 use axum::{
     routing::{get, post, put, delete},
     Router,
+    response::Json as AxumJson,
 };
+use serde_json::json;
 use tower_http::{
     compression::CompressionLayer, 
     trace::TraceLayer,
 };
 use crate::common::di::AppState;
 
+/// Returns the application version from Cargo.toml (compile-time constant)
+async fn get_version() -> AxumJson<serde_json::Value> {
+    AxumJson(json!({
+        "name": "OxiCloud",
+        "version": env!("CARGO_PKG_VERSION")
+    }))
+}
+
 use crate::interfaces::middleware::cache::{HttpCache, start_cache_cleanup_task};
 
 use crate::application::services::batch_operations::BatchOperationService;
@@ -57,6 +67,9 @@ pub fn create_public_api_routes(app_state: &AppState) -> Router<AppState> {
         router = router.nest("/i18n", i18n_router);
     }
 
+    // Version endpoint — public, no auth required
+    router = router.route("/version", get(get_version));
+
     router
 }
 
@@ -134,7 +147,8 @@ pub fn create_api_routes(app_state: &AppState) -> Router<AppState> {
     // File operations with trash support
     let file_operations_router = Router::new()
         .route("/{id}", delete(FileHandler::delete_file))
-        .route("/{id}/move", put(FileHandler::move_file_simple));
+        .route("/{id}/move", put(FileHandler::move_file_simple))
+        .route("/{id}/rename", put(FileHandler::rename_file));
     
     // Merge the routers
     let files_router = basic_file_router.merge(file_operations_router);

static/css/auth.css

@@ -30,12 +30,13 @@
 .auth-logo-icon {
     width: 50px;
     height: 50px;
-    background-color: #ff5e3a;
+    background: linear-gradient(135deg, #ff5e3a 0%, #ff2d55 100%);
-    border-radius: 50%;
+    border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 10px;
+    box-shadow: 0 4px 12px rgba(255, 94, 58, 0.3);
 }
 
 .auth-logo-icon svg {
@@ -97,19 +98,27 @@
 .auth-button {
     width: 100%;
     padding: 12px 15px;
-    border-radius: 8px;
+    border-radius: 10px;
-    background-color: #ff5e3a;
+    background: linear-gradient(135deg, #ff5e3a 0%, #ff2d55 100%);
     color: white;
     font-weight: bold;
     border: none;
     cursor: pointer;
     font-size: 16px;
-    transition: background-color 0.2s;
+    transition: all 0.3s ease;
     margin-top: 10px;
+    box-shadow: 0 4px 12px rgba(255, 94, 58, 0.3);
 }
 
 .auth-button:hover {
-    background-color: #e64a2e;
+    transform: translateY(-1px);
+    box-shadow: 0 6px 20px rgba(255, 94, 58, 0.4);
+    filter: brightness(1.05);
+}
+
+.auth-button:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 8px rgba(255, 94, 58, 0.3);
 }
 
 .auth-button:disabled {
@@ -205,6 +214,26 @@
     text-align: center;
 }
 
+/* Auto-detected language banner */
+.lang-autodetected {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
+    border: 1px solid #bbf7d0;
+    border-radius: 8px;
+    padding: 10px 16px;
+    margin-bottom: 16px;
+    color: #16a34a;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.lang-autodetected i {
+    font-size: 14px;
+}
+
 .language-subtitle {
     color: #64748b;
     font-size: 16px;
@@ -290,6 +319,183 @@
     margin-left: auto;
 }
 
+/* "More languages" button */
+.lang-more-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    padding: 12px;
+    margin-bottom: 20px;
+    border: 1px dashed #cbd5e1;
+    border-radius: 10px;
+    background: transparent;
+    color: #64748b;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.lang-more-btn:hover {
+    border-color: #ff5e3a;
+    color: #ff5e3a;
+    background: #fff5f3;
+}
+
+.lang-more-btn i {
+    font-size: 16px;
+}
+
+/* ====== Language Modal ====== */
+.lang-modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    padding: 20px;
+    animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.lang-modal {
+    background: #fff;
+    border-radius: 16px;
+    width: 100%;
+    max-width: 480px;
+    max-height: 70vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
+    animation: slideUp 0.25s ease;
+}
+
+@keyframes slideUp {
+    from { transform: translateY(20px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}
+
+.lang-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 24px 12px;
+}
+
+.lang-modal-header h3 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #1e293b;
+}
+
+.lang-modal-close {
+    background: none;
+    border: none;
+    font-size: 24px;
+    color: #94a3b8;
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: 6px;
+    line-height: 1;
+    transition: all 0.15s;
+}
+
+.lang-modal-close:hover {
+    background: #f1f5f9;
+    color: #475569;
+}
+
+.lang-modal-search {
+    position: relative;
+    padding: 0 24px 12px;
+}
+
+.lang-modal-search i {
+    position: absolute;
+    left: 38px;
+    top: 12px;
+    color: #94a3b8;
+    font-size: 14px;
+}
+
+.lang-modal-search input {
+    width: 100%;
+    padding: 10px 14px 10px 36px;
+    border: 2px solid #e2e8f0;
+    border-radius: 10px;
+    font-size: 14px;
+    outline: none;
+    transition: border-color 0.2s;
+    box-sizing: border-box;
+}
+
+.lang-modal-search input:focus {
+    border-color: #ff5e3a;
+}
+
+.lang-modal-list {
+    overflow-y: auto;
+    padding: 0 12px 16px;
+    flex: 1;
+}
+
+.lang-modal-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 14px;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.lang-modal-item:hover {
+    background: #f8fafc;
+}
+
+.lang-modal-item.selected {
+    background: #fff5f3;
+}
+
+.lang-modal-flag {
+    font-size: 24px;
+    flex-shrink: 0;
+}
+
+.lang-modal-native {
+    font-size: 15px;
+    font-weight: 500;
+    color: #1e293b;
+}
+
+.lang-modal-english {
+    font-size: 13px;
+    color: #94a3b8;
+    margin-left: auto;
+}
+
+.lang-modal-check {
+    color: #ff5e3a;
+    font-size: 14px;
+    flex-shrink: 0;
+}
+
+.lang-modal-empty {
+    text-align: center;
+    color: #94a3b8;
+    padding: 30px;
+    font-size: 14px;
+}
+
 @media (max-width: 480px) {
     .auth-panel {
         width: 90%;
@@ -303,4 +509,13 @@
     .language-flag {
         font-size: 24px;
     }
+
+    .lang-modal {
+        max-height: 80vh;
+    }
+    
+    .lang-autodetected {
+        font-size: 13px;
+        padding: 8px 12px;
+    }
 }

static/index.html

@@ -80,7 +80,7 @@
         </div>
 
         <div class="storage-container">
-            <div class="storage-title" data-i18n="storage.title">Storage</div>
+            <div class="storage-title"><i class="fas fa-database"></i> <span data-i18n="storage.title">Storage</span></div>
             <div class="storage-bar">
                 <div class="storage-fill"></div>
             </div>
@@ -102,9 +102,46 @@
 
             <div class="user-controls">
                 <div id="language-selector"></div>
-                <div class="user-avatar" id="user-avatar">AD</div>
+                <div class="user-menu-wrapper" id="user-menu-wrapper">
-                <div id="logout-btn" class="logout-btn" data-i18n-title="actions.logout" title="Log out">
+                    <button class="user-avatar-btn" id="user-avatar-btn">
-                    <i class="fas fa-sign-out-alt"></i>
+                        <div class="user-avatar" id="user-avatar">AD</div>
+                    </button>
+                    <div class="user-menu" id="user-menu">
+                        <div class="user-menu-header">
+                            <div class="user-menu-avatar" id="user-menu-avatar">AD</div>
+                            <div class="user-menu-info">
+                                <div class="user-menu-name" id="user-menu-name">Usuario</div>
+                                <div class="user-menu-email" id="user-menu-email">usuario@oxicloud.app</div>
+                            </div>
+                        </div>
+                        <div class="user-menu-storage">
+                            <div class="user-menu-storage-label">
+                                <i class="fas fa-database"></i>
+                                <span data-i18n="storage.title">Almacenamiento</span>
+                            </div>
+                            <div class="user-menu-storage-bar">
+                                <div class="user-menu-storage-fill" id="user-menu-storage-fill"></div>
+                            </div>
+                            <div class="user-menu-storage-text" id="user-menu-storage-text">0% usado</div>
+                        </div>
+                        <div class="user-menu-divider"></div>
+                        <button class="user-menu-item" id="user-menu-theme">
+                            <i class="fas fa-moon"></i>
+                            <span data-i18n="user_menu.appearance">Apariencia</span>
+                            <div class="theme-toggle-pill" id="theme-toggle-pill">
+                                <div class="theme-toggle-knob"></div>
+                            </div>
+                        </button>
+                        <button class="user-menu-item" id="user-menu-about">
+                            <i class="fas fa-info-circle"></i>
+                            <span data-i18n="user_menu.about">Acerca de OxiCloud</span>
+                        </button>
+                        <div class="user-menu-divider"></div>
+                        <button class="user-menu-item user-menu-logout" id="user-menu-logout">
+                            <i class="fas fa-sign-out-alt"></i>
+                            <span data-i18n="actions.logout">Cerrar sesión</span>
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
@@ -114,10 +151,23 @@
 
             <div class="actions-bar">
                 <div class="action-buttons">
-                    <button class="btn btn-primary" id="upload-btn">
+                    <div class="upload-dropdown" id="upload-dropdown">
-                        <i class="fas fa-cloud-upload-alt"></i>
+                        <button class="btn btn-primary" id="upload-btn">
-                        <span data-i18n="actions.upload">Subir</span>
+                            <i class="fas fa-cloud-upload-alt"></i>
-                    </button>
+                            <span data-i18n="actions.upload">Subir</span>
+                            <i class="fas fa-caret-down" style="margin-left: 4px; font-size: 12px;"></i>
+                        </button>
+                        <div class="upload-dropdown-menu" id="upload-dropdown-menu">
+                            <button class="upload-dropdown-item" id="upload-files-btn">
+                                <i class="fas fa-file"></i>
+                                <span data-i18n="actions.upload_files">Subir archivos</span>
+                            </button>
+                            <button class="upload-dropdown-item" id="upload-folder-btn">
+                                <i class="fas fa-folder-open"></i>
+                                <span data-i18n="actions.upload_folder">Subir carpeta</span>
+                            </button>
+                        </div>
+                    </div>
                     <button class="btn btn-secondary" id="new-folder-btn">
                         <i class="fas fa-folder-plus"></i>
                         <span data-i18n="actions.new_folder">Nueva carpeta</span>
@@ -138,6 +188,7 @@
                 <i class="fas fa-cloud-upload-alt" style="font-size: 32px; margin-bottom: 10px;"></i>
                 <p data-i18n="dropzone.drag_files">Arrastra archivos aquí o haz clic para seleccionar</p>
                 <input type="file" id="file-input" style="display: none;" multiple>
+                <input type="file" id="folder-input" style="display: none;" webkitdirectory directory multiple>
                 <div class="upload-progress">
                     <div class="progress-bar">
                         <div class="progress-fill"></div>
@@ -192,5 +243,34 @@
             </div>
         </div>
     </div>
+
+    <!-- About Modal -->
+    <div class="about-modal-overlay" id="about-modal-overlay">
+        <div class="about-modal">
+            <div class="about-modal-logo">
+                <i class="fas fa-cloud"></i>
+            </div>
+            <h2>OxiCloud</h2>
+            <div class="about-version" id="about-version">v...</div>
+            <div class="about-description" data-i18n="user_menu.about_description">
+                Cloud storage platform built with Rust &amp; Clean Architecture. Fast, secure, and private.
+            </div>
+            <div class="about-tech">
+                <span class="about-tech-badge">Rust</span>
+                <span class="about-tech-badge">Axum</span>
+                <span class="about-tech-badge">PostgreSQL</span>
+                <span class="about-tech-badge">Clean Architecture</span>
+            </div>
+            <div class="about-links">
+                <a href="https://github.com" class="about-link" target="_blank" rel="noopener">
+                    <i class="fab fa-github"></i> GitHub
+                </a>
+                <a href="#" class="about-link" id="about-license-link">
+                    <i class="fas fa-file-alt"></i> MIT License
+                </a>
+            </div>
+            <button class="about-close-btn" id="about-close-btn" data-i18n="actions.close">Cerrar</button>
+        </div>
+    </div>
 </body>
 </html>

static/js/app.js

@@ -126,7 +126,6 @@ function cacheElements() {
     elements.gridViewBtn = document.getElementById('grid-view-btn');
     elements.listViewBtn = document.getElementById('list-view-btn');
     elements.breadcrumb = document.querySelector('.breadcrumb');
-    elements.logoutBtn = document.getElementById('logout-btn');
     elements.pageTitle = document.querySelector('.page-title');
     elements.actionsBar = document.querySelector('.actions-bar');
     elements.navItems = document.querySelectorAll('.nav-item');
@@ -134,6 +133,197 @@ function cacheElements() {
     elements.searchInput = document.querySelector('.search-container input');
 }
 
+/**
+ * Setup the user menu (avatar dropdown with profile, storage, theme, about, logout)
+ */
+function setupUserMenu() {
+    const wrapper = document.getElementById('user-menu-wrapper');
+    const avatarBtn = document.getElementById('user-avatar-btn');
+    const menu = document.getElementById('user-menu');
+    const logoutBtn = document.getElementById('user-menu-logout');
+    const themeBtn = document.getElementById('user-menu-theme');
+    const aboutBtn = document.getElementById('user-menu-about');
+    
+    if (!wrapper || !avatarBtn || !menu) return;
+    
+    // Toggle menu
+    avatarBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const isOpen = wrapper.classList.contains('open');
+        wrapper.classList.toggle('open');
+        if (!isOpen) {
+            updateUserMenuData();
+        }
+    });
+    
+    // Close menu on outside click
+    document.addEventListener('click', (e) => {
+        if (wrapper.classList.contains('open') && !wrapper.contains(e.target)) {
+            wrapper.classList.remove('open');
+        }
+    });
+    
+    // Logout
+    if (logoutBtn) {
+        logoutBtn.addEventListener('click', () => {
+            wrapper.classList.remove('open');
+            logout();
+        });
+    }
+    
+    // Theme toggle (dark mode placeholder — toggles pill visually)
+    if (themeBtn) {
+        const pill = document.getElementById('theme-toggle-pill');
+        const isDark = localStorage.getItem('oxicloud_theme') === 'dark';
+        if (isDark && pill) pill.classList.add('active');
+        
+        themeBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            if (pill) {
+                pill.classList.toggle('active');
+                const dark = pill.classList.contains('active');
+                localStorage.setItem('oxicloud_theme', dark ? 'dark' : 'light');
+                // Theme switching could be expanded here in the future
+                window.ui.showNotification(
+                    dark ? '🌙' : '☀️',
+                    dark ? 'Modo oscuro activado (próximamente)' : 'Modo claro activado'
+                );
+            }
+        });
+    }
+    
+    // About modal
+    if (aboutBtn) {
+        aboutBtn.addEventListener('click', () => {
+            wrapper.classList.remove('open');
+            const overlay = document.getElementById('about-modal-overlay');
+            if (overlay) overlay.classList.add('show');
+        });
+    }
+    
+    // About modal close
+    const aboutCloseBtn = document.getElementById('about-close-btn');
+    const aboutOverlay = document.getElementById('about-modal-overlay');
+    if (aboutCloseBtn) {
+        aboutCloseBtn.addEventListener('click', () => {
+            aboutOverlay.classList.remove('show');
+        });
+    }
+    if (aboutOverlay) {
+        aboutOverlay.addEventListener('click', (e) => {
+            if (e.target === aboutOverlay) {
+                aboutOverlay.classList.remove('show');
+            }
+        });
+    }
+    
+    // Fetch version from backend (centralized in Cargo.toml)
+    fetchAppVersion();
+}
+
+/**
+ * Update user menu data (name, email, storage) from localStorage
+ */
+function updateUserMenuData() {
+    const USER_DATA_KEY = 'oxicloud_user';
+    const userData = JSON.parse(localStorage.getItem(USER_DATA_KEY) || '{}');
+    
+    const nameEl = document.getElementById('user-menu-name');
+    const emailEl = document.getElementById('user-menu-email');
+    const avatarEl = document.getElementById('user-menu-avatar');
+    const storageFill = document.getElementById('user-menu-storage-fill');
+    const storageText = document.getElementById('user-menu-storage-text');
+    
+    if (userData.username) {
+        if (nameEl) nameEl.textContent = userData.username;
+        if (emailEl) emailEl.textContent = userData.email || '';
+        if (avatarEl) avatarEl.textContent = userData.username.substring(0, 2).toUpperCase();
+    }
+    
+    // Storage info
+    const usedBytes = userData.storage_used_bytes || 0;
+    const quotaBytes = userData.storage_quota_bytes || 10737418240;
+    const percentage = quotaBytes > 0 ? Math.min(Math.round((usedBytes / quotaBytes) * 100), 100) : 0;
+    
+    if (storageFill) storageFill.style.width = percentage + '%';
+    if (storageText) {
+        const used = formatFileSize(usedBytes);
+        const total = formatFileSize(quotaBytes);
+        storageText.textContent = `${percentage}% · ${used} / ${total}`;
+    }
+}
+
+/**
+ * Fetch app version from backend (centralized in Cargo.toml)
+ * Updates the about modal version display
+ */
+async function fetchAppVersion() {
+    try {
+        const response = await fetch('/api/version');
+        if (response.ok) {
+            const data = await response.json();
+            const versionEl = document.getElementById('about-version');
+            if (versionEl && data.version) {
+                versionEl.textContent = `v${data.version}`;
+            }
+        }
+    } catch (err) {
+        console.warn('Could not fetch app version:', err);
+        // Fallback: leave placeholder
+    }
+}
+
+/**
+ * Setup the upload dropdown button and menu
+ * Handles opening/closing the dropdown and triggering file/folder inputs
+ */
+function setupUploadDropdown() {
+    const dropdown = document.getElementById('upload-dropdown');
+    const uploadBtn = document.getElementById('upload-btn');
+    const menu = document.getElementById('upload-dropdown-menu');
+    const uploadFilesBtn = document.getElementById('upload-files-btn');
+    const uploadFolderBtn = document.getElementById('upload-folder-btn');
+    
+    if (!uploadBtn || !menu) return;
+    
+    // Toggle dropdown on button click
+    uploadBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const isOpen = menu.classList.contains('show');
+        // Close any other open dropdowns
+        document.querySelectorAll('.upload-dropdown-menu.show').forEach(m => m.classList.remove('show'));
+        if (!isOpen) {
+            menu.classList.add('show');
+        }
+    });
+    
+    // Upload files option
+    if (uploadFilesBtn) {
+        uploadFilesBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            menu.classList.remove('show');
+            elements.fileInput.click();
+        });
+    }
+    
+    // Upload folder option
+    if (uploadFolderBtn) {
+        uploadFolderBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            menu.classList.remove('show');
+            const folderInput = document.getElementById('folder-input');
+            if (folderInput) {
+                folderInput.click();
+            }
+        });
+    }
+    
+    // Close dropdown when clicking outside
+    document.addEventListener('click', () => {
+        document.querySelectorAll('.upload-dropdown-menu.show').forEach(m => m.classList.remove('show'));
+    });
+}
+
 /**
  * Setup event listeners for main UI elements
  */
@@ -165,21 +355,28 @@ function setupEventListeners() {
         }
     });
     
-    // Upload button
+    // Upload dropdown
-    elements.uploadBtn.addEventListener('click', () => {
+    setupUploadDropdown();
-        elements.dropzone.style.display = elements.dropzone.style.display === 'none' ? 'block' : 'none';
-        if (elements.dropzone.style.display === 'block') {
-            elements.fileInput.click();
-        }
-    });
     
     // File input
     elements.fileInput.addEventListener('change', (e) => {
         if (e.target.files.length > 0) {
             fileOps.uploadFiles(e.target.files);
+            e.target.value = ''; // reset so same file can be re-uploaded
         }
     });
     
+    // Folder input
+    const folderInput = document.getElementById('folder-input');
+    if (folderInput) {
+        folderInput.addEventListener('change', (e) => {
+            if (e.target.files.length > 0) {
+                fileOps.uploadFolderFiles(e.target.files);
+                e.target.value = '';
+            }
+        });
+    }
+    
     // New folder button
     elements.newFolderBtn.addEventListener('click', async () => {
         const folderName = await window.Modal.promptNewFolder();
@@ -298,9 +495,23 @@ function setupEventListeners() {
                 elements.pageTitle.textContent = window.i18n ? window.i18n.t('nav.files') : 'Archivos';
                 elements.actionsBar.innerHTML = `
                     <div class="action-buttons">
-                        <button class="btn btn-primary" id="upload-btn">
+                        <div class="upload-dropdown" id="upload-dropdown">
-                            <i class="fas fa-upload" style="margin-right: 5px;"></i> <span data-i18n="actions.upload">Subir</span>
+                            <button class="btn btn-primary" id="upload-btn">
-                        </button>
+                                <i class="fas fa-cloud-upload-alt" style="margin-right: 5px;"></i>
+                                <span data-i18n="actions.upload">Subir</span>
+                                <i class="fas fa-caret-down" style="margin-left: 4px; font-size: 12px;"></i>
+                            </button>
+                            <div class="upload-dropdown-menu" id="upload-dropdown-menu">
+                                <button class="upload-dropdown-item" id="upload-files-btn">
+                                    <i class="fas fa-file"></i>
+                                    <span data-i18n="actions.upload_files">Subir archivos</span>
+                                </button>
+                                <button class="upload-dropdown-item" id="upload-folder-btn">
+                                    <i class="fas fa-folder-open"></i>
+                                    <span data-i18n="actions.upload_folder">Subir carpeta</span>
+                                </button>
+                            </div>
+                        </div>
                         <button class="btn btn-secondary" id="new-folder-btn">
                             <i class="fas fa-folder-plus" style="margin-right: 5px;"></i> <span data-i18n="actions.new_folder">Nueva carpeta</span>
                         </button>
@@ -323,12 +534,7 @@ function setupEventListeners() {
                 if (filesListView) filesListView.style.display = app.currentView === 'list' ? 'block' : 'none';
                 
                 // Restore event listeners
-                document.getElementById('upload-btn').addEventListener('click', () => {
+                setupUploadDropdown();
-                    elements.dropzone.style.display = elements.dropzone.style.display === 'none' ? 'block' : 'none';
-                    if (elements.dropzone.style.display === 'block') {
-                        elements.fileInput.click();
-                    }
-                });
                 
                 document.getElementById('new-folder-btn').addEventListener('click', async () => {
                     const folderName = await window.Modal.promptNewFolder();
@@ -360,10 +566,10 @@ function setupEventListeners() {
         ui.switchToListView();
     }
     
-    // Logout button
+    // User menu
-    elements.logoutBtn.addEventListener('click', logout);
+    setupUserMenu();
     
-    // Global events to close context menus
+    // Global events to close context menus and deselect cards
     document.addEventListener('click', (e) => {
         const folderMenu = document.getElementById('folder-context-menu');
         const fileMenu = document.getElementById('file-context-menu');
@@ -377,6 +583,11 @@ function setupEventListeners() {
             !fileMenu.contains(e.target)) {
             ui.closeFileContextMenu();
         }
+
+        // Deselect all cards when clicking empty area (not on a card, menu, or modal)
+        if (!e.target.closest('.file-card') && !e.target.closest('.context-menu') && !e.target.closest('.about-modal')) {
+            document.querySelectorAll('.file-card.selected').forEach(c => c.classList.remove('selected'));
+        }
     });
 }
 
@@ -398,6 +609,14 @@ async function loadFiles(options = {}) {
         
         window.isLoadingFiles = true;
         
+        // Show loading spinner
+        elements.filesGrid.innerHTML = `
+            <div class="files-loading-spinner">
+                <div class="spinner"></div>
+                <span>${window.i18n ? window.i18n.t('files.loading') : 'Cargando archivos…'}</span>
+            </div>
+        `;
+        
         // Always ensure a userHomeFolderId is set
         if (!app.userHomeFolderId) {
             // If we don't have a home folder ID yet, try to get the user's username
@@ -606,8 +825,8 @@ async function loadTrashItems() {
             window.i18n.translatePage();
         }
         
-        // Update breadcrumb for trash
+        // Update breadcrumb - just show Home
-        ui.updateBreadcrumb(window.i18n ? window.i18n.t('nav.trash') : 'Papelera');
+        ui.updateBreadcrumb('');
         
         // Get trash items
         const trashItems = await fileOps.getTrashItems();
@@ -833,7 +1052,7 @@ function switchToSharedView() {
     elements.pageTitle.textContent = window.i18n ? window.i18n.t('nav.shared') : 'Compartidos';
     
     // Clear breadcrumb and show root
-    ui.updateBreadcrumb(window.i18n ? window.i18n.t('nav.shared') : 'Compartidos');
+    ui.updateBreadcrumb('');
     
     // Hide standard actions bar
     if (elements.actionsBar) {
@@ -873,9 +1092,23 @@ function switchToFilesView() {
     // Reset UI
     elements.actionsBar.innerHTML = `
         <div class="action-buttons">
-            <button class="btn btn-primary" id="upload-btn">
+            <div class="upload-dropdown" id="upload-dropdown">
-                <i class="fas fa-upload" style="margin-right: 5px;"></i> <span data-i18n="actions.upload">Subir</span>
+                <button class="btn btn-primary" id="upload-btn">
-            </button>
+                    <i class="fas fa-cloud-upload-alt" style="margin-right: 5px;"></i>
+                    <span data-i18n="actions.upload">Subir</span>
+                    <i class="fas fa-caret-down" style="margin-left: 4px; font-size: 12px;"></i>
+                </button>
+                <div class="upload-dropdown-menu" id="upload-dropdown-menu">
+                    <button class="upload-dropdown-item" id="upload-files-btn">
+                        <i class="fas fa-file"></i>
+                        <span data-i18n="actions.upload_files">Subir archivos</span>
+                    </button>
+                    <button class="upload-dropdown-item" id="upload-folder-btn">
+                        <i class="fas fa-folder-open"></i>
+                        <span data-i18n="actions.upload_folder">Subir carpeta</span>
+                    </button>
+                </div>
+            </div>
             <button class="btn btn-secondary" id="new-folder-btn">
                 <i class="fas fa-folder-plus" style="margin-right: 5px;"></i> <span data-i18n="actions.new_folder">Nueva carpeta</span>
             </button>
@@ -892,12 +1125,7 @@ function switchToFilesView() {
     elements.actionsBar.style.display = 'flex';
     
     // Restore event listeners
-    document.getElementById('upload-btn').addEventListener('click', () => {
+    setupUploadDropdown();
-        elements.dropzone.style.display = elements.dropzone.style.display === 'none' ? 'block' : 'none';
-        if (elements.dropzone.style.display === 'block') {
-            elements.fileInput.click();
-        }
-    });
     
     document.getElementById('new-folder-btn').addEventListener('click', async () => {
         const folderName = await window.Modal.promptNewFolder();
@@ -967,7 +1195,7 @@ function switchToFavoritesView() {
     elements.pageTitle.textContent = window.i18n ? window.i18n.t('nav.favorites') : 'Favoritos';
     
     // Clear breadcrumb and show root
-    ui.updateBreadcrumb(window.i18n ? window.i18n.t('nav.favorites') : 'Favoritos');
+    ui.updateBreadcrumb('');
     
     // Hide shared view if it exists
     if (window.sharedView) {
@@ -1056,7 +1284,7 @@ function switchToRecentFilesView() {
     elements.pageTitle.textContent = window.i18n ? window.i18n.t('nav.recent') : 'Recientes';
     
     // Clear breadcrumb and show root
-    ui.updateBreadcrumb(window.i18n ? window.i18n.t('nav.recent') : 'Recientes');
+    ui.updateBreadcrumb('');
     
     // Hide shared view if it exists
     if (window.sharedView) {
@@ -1231,20 +1459,14 @@ function checkAuthentication() {
             localStorage.setItem(USER_DATA_KEY, JSON.stringify(defaultUserData));
             
             // Update avatar with default initials
-            const userAvatar = document.querySelector('.user-avatar');
+            document.querySelectorAll('.user-avatar, .user-menu-avatar').forEach(el => el.textContent = 'US');
-            if (userAvatar) {
-                userAvatar.textContent = 'US';
-            }
             
             // Update storage display with default values
             updateStorageUsageDisplay(defaultUserData);
         } else {
             // Update avatar with user initials
             const userInitials = userData.username.substring(0, 2).toUpperCase();
-            const userAvatar = document.querySelector('.user-avatar');
+            document.querySelectorAll('.user-avatar, .user-menu-avatar').forEach(el => el.textContent = userInitials);
-            if (userAvatar) {
-                userAvatar.textContent = userInitials;
-            }
             
             // Show cached storage first, then try to refresh from server
             updateStorageUsageDisplay(userData);
@@ -1302,10 +1524,14 @@ function checkAuthentication() {
         if (userData.username) {
             // Update user avatar with initials
             const userInitials = userData.username.substring(0, 2).toUpperCase();
-            const userAvatar = document.querySelector('.user-avatar');
+            document.querySelectorAll('.user-avatar, .user-menu-avatar').forEach(el => {
-            if (userAvatar) {
+                el.textContent = userInitials;
-                userAvatar.textContent = userInitials;
+            });
-            }
+            // Update user menu info
+            const menuName = document.getElementById('user-menu-name');
+            const menuEmail = document.getElementById('user-menu-email');
+            if (menuName) menuName.textContent = userData.username;
+            if (menuEmail) menuEmail.textContent = userData.email || '';
             
             // Update storage usage information with cached data first (for fast display)
             updateStorageUsageDisplay(userData);
@@ -1335,10 +1561,7 @@ function checkAuthentication() {
             localStorage.setItem(USER_DATA_KEY, JSON.stringify(defaultUserData));
             
             // Update avatar with default initials
-            const userAvatar = document.querySelector('.user-avatar');
+            document.querySelectorAll('.user-avatar, .user-menu-avatar').forEach(el => el.textContent = 'US');
-            if (userAvatar) {
-                userAvatar.textContent = 'US';
-            }
             
             // Update storage display with default values
             updateStorageUsageDisplay(defaultUserData);
@@ -1367,10 +1590,7 @@ function checkAuthentication() {
         localStorage.setItem('oxicloud_user', JSON.stringify(defaultUserData));
         
         // Update avatar
-        const userAvatar = document.querySelector('.user-avatar');
+        document.querySelectorAll('.user-avatar, .user-menu-avatar').forEach(el => el.textContent = 'US');
-        if (userAvatar) {
-            userAvatar.textContent = 'US';
-        }
         
         // Update storage display with default values
         updateStorageUsageDisplay(defaultUserData);

static/js/auth.js

@@ -23,25 +23,79 @@ const LANGUAGE_TEXTS = {
     en: {
         title: 'Welcome to OxiCloud',
         subtitle: 'Please select your language',
-        continue: 'Continue'
+        continue: 'Continue',
+        autodetected: 'We detected your language',
+        moreLanguages: 'More languages...',
+        modalTitle: 'Select language',
+        searchPlaceholder: 'Search language...'
     },
     es: {
         title: 'Bienvenido a OxiCloud',
         subtitle: 'Por favor, selecciona tu idioma',
-        continue: 'Continuar'
+        continue: 'Continuar',
+        autodetected: 'Hemos detectado tu idioma',
+        moreLanguages: 'Más idiomas...',
+        modalTitle: 'Seleccionar idioma',
+        searchPlaceholder: 'Buscar idioma...'
     },
     zh: {
         title: '欢迎使用 OxiCloud',
         subtitle: '请选择您的语言',
-        continue: '继续'
+        continue: '继续',
+        autodetected: '我们检测到了您的语言',
+        moreLanguages: '更多语言...',
+        modalTitle: '选择语言',
+        searchPlaceholder: '搜索语言...'
     },
     fa: {
         title: 'به OxiCloud خوش آمدید',
         subtitle: 'لطفا زبان خود را انتخاب کنید',
-        continue: 'ادامه'
+        continue: 'ادامه',
+        autodetected: 'زبان شما شناسایی شد',
+        moreLanguages: 'زبان‌های بیشتر...',
+        modalTitle: 'انتخاب زبان',
+        searchPlaceholder: 'جستجوی زبان...'
     }
 };
 
+// Complete language registry — add new languages here, they'll appear automatically
+// `popular: true` languages show as cards on the main screen, the rest in the modal
+const ALL_LANGUAGES = [
+    { code: 'en', name: 'English',    nativeName: 'English',    flag: '🇬🇧', popular: true },
+    { code: 'es', name: 'Spanish',    nativeName: 'Español',    flag: '🇪🇸', popular: true },
+    { code: 'zh', name: 'Chinese',    nativeName: '中文',       flag: '🇨🇳', popular: true },
+    { code: 'fa', name: 'Persian',    nativeName: 'فارسی',      flag: '🇮🇷', popular: true },
+    { code: 'fr', name: 'French',     nativeName: 'Français',   flag: '🇫🇷', popular: false },
+    { code: 'de', name: 'German',     nativeName: 'Deutsch',    flag: '🇩🇪', popular: false },
+    { code: 'pt', name: 'Portuguese', nativeName: 'Português',  flag: '🇧🇷', popular: false },
+    { code: 'it', name: 'Italian',    nativeName: 'Italiano',   flag: '🇮🇹', popular: false },
+    { code: 'ru', name: 'Russian',    nativeName: 'Русский',    flag: '🇷🇺', popular: false },
+    { code: 'ja', name: 'Japanese',   nativeName: '日本語',      flag: '🇯🇵', popular: false },
+    { code: 'ko', name: 'Korean',     nativeName: '한국어',      flag: '🇰🇷', popular: false },
+    { code: 'ar', name: 'Arabic',     nativeName: 'العربية',     flag: '🇸🇦', popular: false },
+    { code: 'hi', name: 'Hindi',      nativeName: 'हिन्दी',      flag: '🇮🇳', popular: false },
+    { code: 'tr', name: 'Turkish',    nativeName: 'Türkçe',     flag: '🇹🇷', popular: false },
+    { code: 'nl', name: 'Dutch',      nativeName: 'Nederlands', flag: '🇳🇱', popular: false },
+    { code: 'pl', name: 'Polish',     nativeName: 'Polski',     flag: '🇵🇱', popular: false },
+    { code: 'sv', name: 'Swedish',    nativeName: 'Svenska',    flag: '🇸🇪', popular: false },
+    { code: 'da', name: 'Danish',     nativeName: 'Dansk',      flag: '🇩🇰', popular: false },
+    { code: 'fi', name: 'Finnish',    nativeName: 'Suomi',      flag: '🇫🇮', popular: false },
+    { code: 'no', name: 'Norwegian',  nativeName: 'Norsk',      flag: '🇳🇴', popular: false },
+    { code: 'uk', name: 'Ukrainian',  nativeName: 'Українська', flag: '🇺🇦', popular: false },
+    { code: 'cs', name: 'Czech',      nativeName: 'Čeština',    flag: '🇨🇿', popular: false },
+    { code: 'el', name: 'Greek',      nativeName: 'Ελληνικά',   flag: '🇬🇷', popular: false },
+    { code: 'he', name: 'Hebrew',     nativeName: 'עברית',       flag: '🇮🇱', popular: false },
+    { code: 'th', name: 'Thai',       nativeName: 'ไทย',         flag: '🇹🇭', popular: false },
+    { code: 'vi', name: 'Vietnamese', nativeName: 'Tiếng Việt', flag: '🇻🇳', popular: false },
+    { code: 'id', name: 'Indonesian', nativeName: 'Bahasa Indonesia', flag: '🇮🇩', popular: false },
+    { code: 'ms', name: 'Malay',      nativeName: 'Bahasa Melayu',    flag: '🇲🇾', popular: false },
+    { code: 'ro', name: 'Romanian',   nativeName: 'Română',     flag: '🇷🇴', popular: false },
+    { code: 'hu', name: 'Hungarian',  nativeName: 'Magyar',     flag: '🇭🇺', popular: false },
+    { code: 'ca', name: 'Catalan',    nativeName: 'Català',     flag: '🏴', popular: false },
+    { code: 'eu', name: 'Basque',     nativeName: 'Euskara',    flag: '🏴', popular: false },
+    { code: 'gl', name: 'Galician',   nativeName: 'Galego',     flag: '🏴', popular: false },
+];
+
 // Check if this is a first run (no locale saved)
 function isFirstRun() {
     return !localStorage.getItem(LOCALE_KEY);
@@ -62,35 +116,117 @@ async function checkSystemStatus() {
     }
 }
 
-// Initialize language selector panel
+// Detect user's browser language and return the best matching language from ALL_LANGUAGES
+function detectBrowserLanguage() {
+    const browserLangs = navigator.languages || [navigator.language || navigator.userLanguage || 'en'];
+    for (const bl of browserLangs) {
+        const code = bl.substring(0, 2).toLowerCase();
+        const match = ALL_LANGUAGES.find(l => l.code === code);
+        if (match) return match;
+    }
+    return ALL_LANGUAGES[0]; // fallback to English
+}
+
+// Build a language option element (card style)
+function buildLanguageCard(lang, isSelected) {
+    const label = document.createElement('label');
+    label.className = 'language-option' + (isSelected ? ' selected' : '');
+    label.setAttribute('data-lang', lang.code);
+    label.innerHTML = `
+        <input type="radio" name="language" value="${lang.code}" ${isSelected ? 'checked' : ''}>
+        <span class="language-radio"></span>
+        <span class="language-flag">${lang.flag}</span>
+        <span class="language-name">${lang.nativeName}</span>
+    `;
+    return label;
+}
+
+// Initialize language selector panel with hybrid approach
 function initLanguageSelector() {
     const languagePanel = document.getElementById('language-panel');
-    const languageOptions = document.querySelectorAll('.language-option');
     const continueBtn = document.getElementById('language-continue');
+    const optionsContainer = document.getElementById('language-options');
+    const moreLangBtn = document.getElementById('lang-more-btn');
+    
+    if (!languagePanel || !optionsContainer) return;
+    
     let selectedLanguage = null;
     
-    if (!languagePanel) return;
+    // --- Auto-detect browser language ---
+    const detected = detectBrowserLanguage();
     
-    // Handle language option clicks
+    // Build the list of popular languages to show as cards
-    languageOptions.forEach(option => {
+    // If the detected language isn't already popular, promote it to the top
-        option.addEventListener('click', () => {
+    let popularLangs = ALL_LANGUAGES.filter(l => l.popular);
-            // Remove selected class from all options
+    const detectedInPopular = popularLangs.find(l => l.code === detected.code);
-            languageOptions.forEach(opt => opt.classList.remove('selected'));
+    if (!detectedInPopular) {
-            // Add selected class to clicked option
+        // Insert detected language at the top of popular cards
-            option.classList.add('selected');
+        popularLangs = [detected, ...popularLangs];
-            // Check the radio button
+    }
-            option.querySelector('input[type="radio"]').checked = true;
+    
-            // Store selected language
+    // Auto-select the detected language
-            selectedLanguage = option.getAttribute('data-lang');
+    selectedLanguage = detected.code;
-            // Enable continue button
+    continueBtn.disabled = false;
+    
+    // Show autodetection banner
+    const autodetectedBanner = document.getElementById('lang-autodetected');
+    if (autodetectedBanner) {
+        autodetectedBanner.style.display = 'flex';
+    }
+    updateLanguagePanelTexts(detected.code);
+    
+    // --- Render popular language cards ---
+    optionsContainer.innerHTML = '';
+    popularLangs.forEach(lang => {
+        const card = buildLanguageCard(lang, lang.code === selectedLanguage);
+        card.addEventListener('click', () => {
+            // Deselect all
+            optionsContainer.querySelectorAll('.language-option').forEach(o => o.classList.remove('selected'));
+            card.classList.add('selected');
+            card.querySelector('input[type="radio"]').checked = true;
+            selectedLanguage = lang.code;
             continueBtn.disabled = false;
-            
+            updateLanguagePanelTexts(lang.code);
-            // Update UI texts based on selected language
-            updateLanguagePanelTexts(selectedLanguage);
         });
+        optionsContainer.appendChild(card);
     });
     
-    // Handle continue button click
+    // --- "More languages" button opens the modal ---
+    if (moreLangBtn) {
+        moreLangBtn.addEventListener('click', () => openLanguageModal(selectedLanguage, (langCode) => {
+            selectedLanguage = langCode;
+            continueBtn.disabled = false;
+            updateLanguagePanelTexts(langCode);
+            
+            // Update cards to reflect new selection
+            optionsContainer.querySelectorAll('.language-option').forEach(o => {
+                const isThis = o.getAttribute('data-lang') === langCode;
+                o.classList.toggle('selected', isThis);
+                o.querySelector('input[type="radio"]').checked = isThis;
+            });
+            
+            // If selected lang is not in the popular cards, add it temporarily
+            if (!optionsContainer.querySelector(`[data-lang="${langCode}"]`)) {
+                const lang = ALL_LANGUAGES.find(l => l.code === langCode);
+                if (lang) {
+                    // Deselect all existing
+                    optionsContainer.querySelectorAll('.language-option').forEach(o => o.classList.remove('selected'));
+                    const card = buildLanguageCard(lang, true);
+                    card.addEventListener('click', () => {
+                        optionsContainer.querySelectorAll('.language-option').forEach(o => o.classList.remove('selected'));
+                        card.classList.add('selected');
+                        card.querySelector('input[type="radio"]').checked = true;
+                        selectedLanguage = lang.code;
+                        updateLanguagePanelTexts(lang.code);
+                    });
+                    // Insert at the top
+                    optionsContainer.insertBefore(card, optionsContainer.firstChild);
+                }
+            }
+        }));
+    }
+    
+    // --- Continue button ---
     continueBtn.addEventListener('click', async () => {
         if (!selectedLanguage) return;
         
@@ -111,19 +247,16 @@ function initLanguageSelector() {
         console.log('System status after language selection:', systemStatus);
         
         if (!systemStatus.initialized) {
-            // No admin exists - show admin setup
             console.log('No admin exists, showing admin setup panel');
             document.getElementById('login-panel').style.display = 'none';
             document.getElementById('register-panel').style.display = 'none';
             document.getElementById('admin-setup-panel').style.display = 'block';
             
-            // Hide the "Already set up? Sign in" link
             const backToLoginLink = document.getElementById('back-to-login');
             if (backToLoginLink) {
                 backToLoginLink.parentElement.style.display = 'none';
             }
         } else {
-            // Admin exists - show login panel
             document.getElementById('login-panel').style.display = 'block';
         }
         
@@ -134,16 +267,100 @@ function initLanguageSelector() {
     });
 }
 
+// Open the full language modal with search
+function openLanguageModal(currentSelection, onSelect) {
+    const overlay = document.getElementById('lang-modal-overlay');
+    const list = document.getElementById('lang-modal-list');
+    const searchInput = document.getElementById('lang-search-input');
+    const closeBtn = document.getElementById('lang-modal-close');
+    
+    if (!overlay || !list) return;
+    
+    // Render all languages
+    function renderList(filter = '') {
+        list.innerHTML = '';
+        const filterLower = filter.toLowerCase();
+        
+        const filtered = ALL_LANGUAGES.filter(lang => {
+            if (!filter) return true;
+            return lang.name.toLowerCase().includes(filterLower) ||
+                   lang.nativeName.toLowerCase().includes(filterLower) ||
+                   lang.code.toLowerCase().includes(filterLower);
+        });
+        
+        if (filtered.length === 0) {
+            list.innerHTML = '<div class="lang-modal-empty">No languages found</div>';
+            return;
+        }
+        
+        filtered.forEach(lang => {
+            const item = document.createElement('div');
+            item.className = 'lang-modal-item' + (lang.code === currentSelection ? ' selected' : '');
+            item.setAttribute('data-lang', lang.code);
+            item.innerHTML = `
+                <span class="lang-modal-flag">${lang.flag}</span>
+                <span class="lang-modal-native">${lang.nativeName}</span>
+                <span class="lang-modal-english">${lang.name}</span>
+                ${lang.code === currentSelection ? '<i class="fas fa-check lang-modal-check"></i>' : ''}
+            `;
+            item.addEventListener('click', () => {
+                currentSelection = lang.code;
+                onSelect(lang.code);
+                closeModal();
+            });
+            list.appendChild(item);
+        });
+    }
+    
+    function closeModal() {
+        overlay.style.display = 'none';
+        if (searchInput) searchInput.value = '';
+    }
+    
+    // Show modal
+    overlay.style.display = 'flex';
+    renderList();
+    
+    // Focus search
+    if (searchInput) {
+        setTimeout(() => searchInput.focus(), 100);
+        searchInput.value = '';
+        searchInput.oninput = () => renderList(searchInput.value);
+    }
+    
+    // Close handlers
+    if (closeBtn) {
+        closeBtn.onclick = closeModal;
+    }
+    overlay.onclick = (e) => {
+        if (e.target === overlay) closeModal();
+    };
+    document.addEventListener('keydown', function escHandler(e) {
+        if (e.key === 'Escape') {
+            closeModal();
+            document.removeEventListener('keydown', escHandler);
+        }
+    });
+}
+
 // Update language panel texts based on selected language
 function updateLanguagePanelTexts(lang) {
     const texts = LANGUAGE_TEXTS[lang] || LANGUAGE_TEXTS.en;
     const titleEl = document.getElementById('language-title');
     const subtitleEl = document.getElementById('language-subtitle');
     const continueBtn = document.getElementById('language-continue');
+    const autodetectedText = document.getElementById('lang-autodetected-text');
+    const moreText = document.getElementById('lang-more-text');
+    const modalTitle = document.getElementById('lang-modal-title');
+    const searchInput = document.getElementById('lang-search-input');
     
     if (titleEl) titleEl.textContent = texts.title;
     if (subtitleEl) subtitleEl.textContent = texts.subtitle;
     if (continueBtn) continueBtn.textContent = texts.continue;
+    if (autodetectedText) autodetectedText.textContent = texts.autodetected;
+    if (moreText) moreText.textContent = texts.moreLanguages;
+    if (modalTitle) modalTitle.textContent = texts.modalTitle;
+    if (searchInput) searchInput.placeholder = texts.searchPlaceholder;
 }
 
 // Show appropriate panel based on system status and first run

static/js/components/sharedView.js

@@ -60,14 +60,6 @@ const sharedView = {
         
         // Update container
         sharedContainer.innerHTML = `
-            <div class="actions-bar">
-                <div class="action-buttons">
-                    <button class="btn btn-secondary" id="go-to-files-btn">
-                        <i class="fas fa-arrow-left" style="margin-right: 5px;"></i> <span data-i18n="shared.backToFiles">Back to Files</span>
-                    </button>
-                </div>
-            </div>
-            
             <div class="shared-filters">
                 <div class="filter-group">
                     <label for="filter-type" data-i18n="shared.filterType">Type:</label>
@@ -234,7 +226,6 @@ const sharedView = {
         const sortBy = document.getElementById('sort-by');
         const searchFilter = document.getElementById('shared-search-filter');
         const searchBtn = document.getElementById('shared-search-filter-btn');
-        const goToFilesBtn = document.getElementById('go-to-files-btn');
         const emptyGoToFiles = document.getElementById('empty-go-to-files');
         
         if (filterType) filterType.addEventListener('change', () => this.filterAndSortItems());
@@ -244,8 +235,7 @@ const sharedView = {
         });
         if (searchBtn) searchBtn.addEventListener('click', () => this.filterAndSortItems());
         
-        // Back to files buttons
+        // Back to files button (empty state)
-        if (goToFilesBtn) goToFilesBtn.addEventListener('click', () => window.switchToFilesView());
         if (emptyGoToFiles) emptyGoToFiles.addEventListener('click', () => window.switchToFilesView());
         
         // Share dialog buttons

static/js/contextMenus.js

@@ -82,7 +82,10 @@ const contextMenus = {
         document.getElementById('view-file-option').addEventListener('click', () => {
             if (window.app.contextMenuTargetFile) {
                 // Fetch file details to get the mime type
-                fetch(`/api/files/${window.app.contextMenuTargetFile.id}?metadata=true`)
+                const token = localStorage.getItem('oxicloud_token');
+                fetch(`/api/files/${window.app.contextMenuTargetFile.id}?metadata=true`, {
+                    headers: { 'Authorization': `Bearer ${token}` }
+                })
                     .then(response => response.json())
                     .then(fileDetails => {
                         // Check if viewable file type
@@ -157,6 +160,13 @@ const contextMenus = {
             window.ui.closeFileContextMenu();
         });
         
+        document.getElementById('rename-file-option').addEventListener('click', () => {
+            if (window.app.contextMenuTargetFile) {
+                this.showRenameFileDialog(window.app.contextMenuTargetFile);
+            }
+            window.ui.closeFileContextMenu();
+        });
+
         document.getElementById('move-file-option').addEventListener('click', () => {
             if (window.app.contextMenuTargetFile) {
                 this.showMoveDialog(window.app.contextMenuTargetFile, 'file');
@@ -187,12 +197,12 @@ const contextMenus = {
         const renameInput = document.getElementById('rename-input');
 
         renameCancelBtn.addEventListener('click', this.closeRenameDialog);
-        renameConfirmBtn.addEventListener('click', this.renameFolder);
+        renameConfirmBtn.addEventListener('click', () => contextMenus.renameItem());
 
         // Rename on Enter key
         renameInput.addEventListener('keyup', (e) => {
             if (e.key === 'Enter') {
-                this.renameFolder();
+                contextMenus.renameItem();
             } else if (e.key === 'Escape') {
                 this.closeRenameDialog();
             }
@@ -232,7 +242,29 @@ const contextMenus = {
         const renameInput = document.getElementById('rename-input');
         const renameDialog = document.getElementById('rename-dialog');
 
+        window.app.renameMode = 'folder';
         renameInput.value = folder.name;
+        // Update header text
+        const headerSpan = renameDialog.querySelector('.rename-dialog-header span');
+        if (headerSpan) headerSpan.textContent = window.i18n ? window.i18n.t('dialogs.rename_folder') : 'Renombrar carpeta';
+        renameDialog.style.display = 'flex';
+        renameInput.focus();
+        renameInput.select();
+    },
+
+    /**
+     * Show rename dialog for a file
+     * @param {Object} file - File object
+     */
+    showRenameFileDialog(file) {
+        const renameInput = document.getElementById('rename-input');
+        const renameDialog = document.getElementById('rename-dialog');
+
+        window.app.renameMode = 'file';
+        renameInput.value = file.name;
+        // Update header text
+        const headerSpan = renameDialog.querySelector('.rename-dialog-header span');
+        if (headerSpan) headerSpan.textContent = window.i18n ? window.i18n.t('dialogs.rename_file') : 'Renombrar archivo';
         renameDialog.style.display = 'flex';
         renameInput.focus();
         renameInput.select();
@@ -258,11 +290,12 @@ const contextMenus = {
         // Reset selection
         window.app.selectedTargetFolderId = "";
 
-        // Update dialog title
+        // Update dialog title (preserve icon)
         const dialogHeader = document.getElementById('move-file-dialog').querySelector('.rename-dialog-header');
-        dialogHeader.textContent = mode === 'file' ?
+        const titleText = mode === 'file' ?
             (window.i18n ? window.i18n.t('dialogs.move_file') : 'Mover archivo') :
             (window.i18n ? window.i18n.t('dialogs.move_folder') : 'Mover carpeta');
+        dialogHeader.innerHTML = `<i class="fas fa-arrows-alt" style="color:#ff5e3a"></i> <span>${titleText}</span>`;
 
         // Load all available folders
         await this.loadAllFolders(item.id, mode);
@@ -281,24 +314,35 @@ const contextMenus = {
     },
 
     /**
-     * Rename the selected folder
+     * Rename the selected folder or file
      */
-    async renameFolder() {
+    async renameItem() {
-        if (!window.app.contextMenuTargetFolder) return;
-
         const newName = document.getElementById('rename-input').value.trim();
         if (!newName) {
             alert(window.i18n ? window.i18n.t('errors.empty_name') : 'El nombre no puede estar vacío');
             return;
         }
 
-        const success = await window.fileOps.renameFolder(window.app.contextMenuTargetFolder.id, newName);
+        if (window.app.renameMode === 'file' && window.app.contextMenuTargetFile) {
-        if (success) {
+            const success = await window.fileOps.renameFile(window.app.contextMenuTargetFile.id, newName);
-            contextMenus.closeRenameDialog();
+            if (success) {
-            window.loadFiles();
+                contextMenus.closeRenameDialog();
+                window.loadFiles();
+            }
+        } else if (window.app.contextMenuTargetFolder) {
+            const success = await window.fileOps.renameFolder(window.app.contextMenuTargetFolder.id, newName);
+            if (success) {
+                contextMenus.closeRenameDialog();
+                window.loadFiles();
+            }
         }
     },
 
+    // Keep backward compat
+    renameFolder() {
+        return contextMenus.renameItem();
+    },
+
     /**
      * Load all folders for the move dialog
      * @param {string} itemId - ID of the item being moved
@@ -306,7 +350,10 @@ const contextMenus = {
      */
     async loadAllFolders(itemId, mode) {
         try {
-            const response = await fetch('/api/folders');
+            const token = localStorage.getItem('oxicloud_token');
+            const response = await fetch('/api/folders', {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
             if (response.ok) {
                 const folders = await response.json();
                 const folderSelectContainer = document.getElementById('folder-select-container');
@@ -459,15 +506,19 @@ const contextMenus = {
                     e.preventDefault();
                     const shareId = btn.getAttribute('data-share-id');
                     
-                    if (confirm('¿Estás seguro de que quieres eliminar este enlace compartido?')) {
+                    showConfirmDialog({
-                        window.fileSharing.removeSharedLink(shareId);
+                        title: window.i18n ? window.i18n.t('dialogs.confirm_delete_share') : 'Eliminar enlace',
-                        btn.closest('.existing-share-item').remove();
+                        message: window.i18n ? window.i18n.t('dialogs.confirm_delete_share_msg') : '¿Estás seguro de que quieres eliminar este enlace compartido?',
-                        
+                        confirmText: window.i18n ? window.i18n.t('actions.delete') : 'Eliminar',
-                        // Check if we still have shares
+                    }).then(confirmed => {
-                        if (existingSharesContainer.children.length === 0) {
+                        if (confirmed) {
-                            document.getElementById('existing-shares-section').style.display = 'none';
+                            window.fileSharing.removeSharedLink(shareId);
+                            btn.closest('.existing-share-item').remove();
+                            if (existingSharesContainer.children.length === 0) {
+                                document.getElementById('existing-shares-section').style.display = 'none';
+                            }
                         }
-                    }
+                    });
                 });
             });
         } else {

static/js/favorites.js

@@ -317,8 +317,8 @@ const favorites = {
                 </div>
             `;
             
-            // Update breadcrumb for favorites
+            // Update breadcrumb - just show Home
-            window.ui.updateBreadcrumb(window.i18n ? window.i18n.t('nav.favorites') : 'Favoritos');
+            window.ui.updateBreadcrumb('');
             
             // Show empty state if no favorites
             if (favorites.length === 0) {

static/js/fileOperations.js

@@ -3,6 +3,19 @@
  * This file handles file and folder operations (create, move, delete, rename, upload)
  */
 
+/**
+ * Get authorization headers for API requests
+ * @returns {Object} Headers object with Authorization bearer token
+ */
+function getAuthHeaders() {
+    const token = localStorage.getItem('oxicloud_token');
+    const headers = {};
+    if (token) {
+        headers['Authorization'] = `Bearer ${token}`;
+    }
+    return headers;
+}
+
 // File Operations Module
 const fileOps = {
     /**
@@ -49,6 +62,7 @@ const fileOps = {
                     // Añadir cache: 'no-store' para evitar problemas de caché durante la subida
                     cache: 'no-store',
                     headers: {
+                        ...getAuthHeaders(),
                         // Agregar este encabezado para forzar recargas frescas
                         'Cache-Control': 'no-cache, no-store, must-revalidate'
                     }
@@ -104,6 +118,133 @@ const fileOps = {
         }
     },
 
+    /**
+     * Upload folder files maintaining directory structure
+     * Creates subfolders as needed, then uploads files into them
+     * @param {FileList} files - Files from folder input (with webkitRelativePath)
+     */
+    async uploadFolderFiles(files) {
+        if (!files || files.length === 0) return;
+        
+        const progressBar = document.querySelector('.progress-fill');
+        const uploadProgressDiv = document.querySelector('.upload-progress');
+        uploadProgressDiv.style.display = 'block';
+        progressBar.style.width = '0%';
+
+        const currentFolderId = window.app.currentPath || window.app.userHomeFolderId;
+        
+        // Build folder structure from relative paths
+        // webkitRelativePath looks like: "folderName/subfolder/file.txt"
+        const folderMap = new Map(); // path -> folder_id
+        folderMap.set('', currentFolderId); // root = current folder
+        
+        // Collect all unique folder paths
+        const folderPaths = new Set();
+        for (const file of files) {
+            const parts = file.webkitRelativePath.split('/');
+            // Remove filename, keep folder parts
+            for (let i = 1; i < parts.length; i++) {
+                const path = parts.slice(0, i).join('/');
+                folderPaths.add(path);
+            }
+        }
+        
+        // Sort paths by depth so parents are created first
+        const sortedPaths = [...folderPaths].sort((a, b) => 
+            a.split('/').length - b.split('/').length
+        );
+        
+        // Create folders
+        for (const folderPath of sortedPaths) {
+            const parts = folderPath.split('/');
+            const folderName = parts[parts.length - 1];
+            const parentPath = parts.slice(0, -1).join('/');
+            const parentId = folderMap.get(parentPath) || currentFolderId;
+            
+            try {
+                const response = await fetch('/api/folders', {
+                    method: 'POST',
+                    headers: {
+                        ...getAuthHeaders(),
+                        'Content-Type': 'application/json',
+                        'Cache-Control': 'no-cache, no-store, must-revalidate'
+                    },
+                    body: JSON.stringify({
+                        name: folderName,
+                        parent_id: parentId
+                    })
+                });
+                
+                if (response.ok) {
+                    const folder = await response.json();
+                    folderMap.set(folderPath, folder.id);
+                    console.log(`Created folder: ${folderPath} -> ${folder.id}`);
+                } else {
+                    console.error(`Error creating folder ${folderPath}:`, await response.text());
+                    window.ui.showNotification('Error', `Error creando carpeta: ${folderName}`);
+                }
+            } catch (error) {
+                console.error(`Network error creating folder ${folderPath}:`, error);
+            }
+        }
+        
+        // Upload files into their respective folders
+        let uploadedCount = 0;
+        const totalFiles = files.length;
+        
+        for (let i = 0; i < totalFiles; i++) {
+            const file = files[i];
+            const parts = file.webkitRelativePath.split('/');
+            const parentPath = parts.slice(0, -1).join('/');
+            const targetFolderId = folderMap.get(parentPath) || currentFolderId;
+            
+            const formData = new FormData();
+            formData.append('folder_id', targetFolderId);
+            formData.append('file', file);
+            
+            try {
+                const response = await fetch('/api/files/upload', {
+                    method: 'POST',
+                    body: formData,
+                    cache: 'no-store',
+                    headers: {
+                        ...getAuthHeaders(),
+                        'Cache-Control': 'no-cache, no-store, must-revalidate'
+                    }
+                });
+                
+                uploadedCount++;
+                const percentComplete = (uploadedCount / totalFiles) * 100;
+                progressBar.style.width = percentComplete + '%';
+                
+                if (response.ok) {
+                    console.log(`Uploaded: ${file.webkitRelativePath}`);
+                } else {
+                    console.error(`Error uploading ${file.webkitRelativePath}:`, await response.text());
+                }
+            } catch (error) {
+                console.error(`Network error uploading ${file.webkitRelativePath}:`, error);
+            }
+        }
+        
+        // Finish up
+        window.ui.showNotification('Carpeta subida', `${uploadedCount} archivos subidos correctamente`);
+        
+        await new Promise(resolve => setTimeout(resolve, 800));
+        
+        try {
+            await window.loadFiles({ forceRefresh: true });
+        } catch (reloadError) {
+            console.error('Error reloading files:', reloadError);
+        }
+        
+        setTimeout(() => {
+            const dropzone = document.getElementById('dropzone');
+            if (dropzone) dropzone.style.display = 'none';
+            uploadProgressDiv.style.display = 'none';
+        }, 500);
+    },
+
     /**
      * Create a new folder
      * @param {string} name - Folder name
@@ -116,6 +257,7 @@ const fileOps = {
             const response = await fetch('/api/folders', {
                 method: 'POST',
                 headers: {
+                    ...getAuthHeaders(),
                     'Content-Type': 'application/json',
                     'Cache-Control': 'no-cache, no-store, must-revalidate'
                 },
@@ -162,6 +304,7 @@ const fileOps = {
             const response = await fetch(`/api/files/${fileId}/move`, {
                 method: 'PUT',
                 headers: {
+                    ...getAuthHeaders(),
                     'Content-Type': 'application/json'
                 },
                 body: JSON.stringify({
@@ -203,6 +346,7 @@ const fileOps = {
             const response = await fetch(`/api/folders/${folderId}/move`, {
                 method: 'PUT',
                 headers: {
+                    ...getAuthHeaders(),
                     'Content-Type': 'application/json'
                 },
                 body: JSON.stringify({
@@ -233,6 +377,53 @@ const fileOps = {
         }
     },
 
+    /**
+     * Rename a file
+     * @param {string} fileId - File ID
+     * @param {string} newName - New file name
+     * @returns {Promise<boolean>} - Success status
+     */
+    async renameFile(fileId, newName) {
+        try {
+            console.log(`Renaming file ${fileId} to "${newName}"`);
+
+            const response = await fetch(`/api/files/${fileId}/rename`, {
+                method: 'PUT',
+                headers: {
+                    ...getAuthHeaders(),
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ name: newName })
+            });
+
+            console.log('Response status:', response.status);
+
+            if (response.ok) {
+                window.ui.showNotification(
+                    window.i18n ? window.i18n.t('notifications.file_renamed') : 'Archivo renombrado',
+                    window.i18n ? window.i18n.t('notifications.file_renamed_to', { name: newName }) : `Archivo renombrado a "${newName}"`
+                );
+                return true;
+            } else {
+                const errorText = await response.text();
+                console.error('Error response:', errorText);
+                let errorMessage = 'Error desconocido';
+                try {
+                    const errorData = JSON.parse(errorText);
+                    errorMessage = errorData.error || response.statusText;
+                } catch (e) {
+                    errorMessage = errorText || response.statusText;
+                }
+                window.ui.showNotification('Error', `Error al renombrar el archivo: ${errorMessage}`);
+                return false;
+            }
+        } catch (error) {
+            console.error('Error renaming file:', error);
+            window.ui.showNotification('Error', 'Error al renombrar el archivo');
+            return false;
+        }
+    },
+
     /**
      * Rename a folder
      * @param {string} folderId - Folder ID
@@ -246,6 +437,7 @@ const fileOps = {
             const response = await fetch(`/api/folders/${folderId}/rename`, {
                 method: 'PUT',
                 headers: {
+                    ...getAuthHeaders(),
                     'Content-Type': 'application/json'
                 },
                 body: JSON.stringify({ name: newName })
@@ -287,14 +479,18 @@ const fileOps = {
      * @returns {Promise<boolean>} - Success status
      */
     async deleteFile(fileId, fileName) {
-        if (!confirm(`¿Estás seguro de que quieres mover a la papelera el archivo "${fileName}"?`)) {
+        const confirmed = await showConfirmDialog({
-            return false;
+            title: window.i18n ? window.i18n.t('dialogs.confirm_delete') : 'Mover a papelera',
-        }
+            message: window.i18n ? window.i18n.t('dialogs.confirm_delete_file', { name: fileName }) : `¿Estás seguro de que quieres mover a la papelera el archivo "${fileName}"?`,
+            confirmText: window.i18n ? window.i18n.t('actions.delete') : 'Eliminar',
+        });
+        if (!confirmed) return false;
         
         try {
             // Use the trash API endpoint
             const response = await fetch(`/api/trash/files/${fileId}`, {
-                method: 'DELETE'
+                method: 'DELETE',
+                headers: getAuthHeaders()
             });
 
             if (response.ok) {
@@ -304,7 +500,8 @@ const fileOps = {
             } else {
                 // Fallback to direct deletion if trash fails
                 const fallbackResponse = await fetch(`/api/files/${fileId}`, {
-                    method: 'DELETE'
+                    method: 'DELETE',
+                    headers: getAuthHeaders()
                 });
                 
                 if (fallbackResponse.ok) {
@@ -330,14 +527,18 @@ const fileOps = {
      * @returns {Promise<boolean>} - Success status
      */
     async deleteFolder(folderId, folderName) {
-        if (!confirm(`¿Estás seguro de que quieres mover a la papelera la carpeta "${folderName}" y todo su contenido?`)) {
+        const confirmed = await showConfirmDialog({
-            return false;
+            title: window.i18n ? window.i18n.t('dialogs.confirm_delete') : 'Mover a papelera',
-        }
+            message: window.i18n ? window.i18n.t('dialogs.confirm_delete_folder', { name: folderName }) : `¿Estás seguro de que quieres mover a la papelera la carpeta "${folderName}" y todo su contenido?`,
+            confirmText: window.i18n ? window.i18n.t('actions.delete') : 'Eliminar',
+        });
+        if (!confirmed) return false;
         
         try {
             // Use the trash API endpoint
             const response = await fetch(`/api/trash/folders/${folderId}`, {
-                method: 'DELETE'
+                method: 'DELETE',
+                headers: getAuthHeaders()
             });
 
             if (response.ok) {
@@ -352,7 +553,8 @@ const fileOps = {
             } else {
                 // Fallback to direct deletion if trash fails
                 const fallbackResponse = await fetch(`/api/folders/${folderId}`, {
-                    method: 'DELETE'
+                    method: 'DELETE',
+                    headers: getAuthHeaders()
                 });
                 
                 if (fallbackResponse.ok) {
@@ -382,7 +584,9 @@ const fileOps = {
      */
     async getTrashItems() {
         try {
-            const response = await fetch('/api/trash');
+            const response = await fetch('/api/trash', {
+                headers: getAuthHeaders()
+            });
             
             if (response.ok) {
                 return await response.json();
@@ -406,6 +610,7 @@ const fileOps = {
             const response = await fetch(`/api/trash/${trashId}/restore`, {
                 method: 'POST',
                 headers: {
+                    ...getAuthHeaders(),
                     'Content-Type': 'application/json'
                 },
                 body: JSON.stringify({})
@@ -431,13 +636,17 @@ const fileOps = {
      * @returns {Promise<boolean>} - Éxito de la operación
      */
     async deletePermanently(trashId) {
-        if (!confirm('¿Estás seguro de que quieres eliminar permanentemente este elemento? Esta acción no se puede deshacer.')) {
+        const confirmed = await showConfirmDialog({
-            return false;
+            title: window.i18n ? window.i18n.t('dialogs.confirm_permanent_delete') : 'Eliminar permanentemente',
-        }
+            message: window.i18n ? window.i18n.t('dialogs.confirm_permanent_delete_msg') : '¿Estás seguro de que quieres eliminar permanentemente este elemento? Esta acción no se puede deshacer.',
+            confirmText: window.i18n ? window.i18n.t('actions.delete_permanently') : 'Eliminar permanentemente',
+        });
+        if (!confirmed) return false;
         
         try {
             const response = await fetch(`/api/trash/${trashId}`, {
-                method: 'DELETE'
+                method: 'DELETE',
+                headers: getAuthHeaders()
             });
             
             if (response.ok) {
@@ -459,14 +668,17 @@ const fileOps = {
      * @returns {Promise<boolean>} - Éxito de la operación
      */
     async emptyTrash() {
-        const confirmMsg = window.i18n ? window.i18n.t('trash.empty_confirm') : '¿Estás seguro de que quieres vaciar la papelera? Esta acción eliminará permanentemente todos los elementos.';
+        const confirmed = await showConfirmDialog({
-        if (!confirm(confirmMsg)) {
+            title: window.i18n ? window.i18n.t('dialogs.confirm_empty_trash') : 'Vaciar papelera',
-            return false;
+            message: window.i18n ? window.i18n.t('trash.empty_confirm') : '¿Estás seguro de que quieres vaciar la papelera? Esta acción eliminará permanentemente todos los elementos.',
-        }
+            confirmText: window.i18n ? window.i18n.t('actions.empty_trash') : 'Vaciar papelera',
+        });
+        if (!confirmed) return false;
         
         try {
             const response = await fetch('/api/trash/empty', {
-                method: 'DELETE'
+                method: 'DELETE',
+                headers: getAuthHeaders()
             });
             
             if (response.ok) {
@@ -488,15 +700,28 @@ const fileOps = {
      * @param {string} fileId - ID del archivo
      * @param {string} fileName - Nombre del archivo
      */
-    downloadFile(fileId, fileName) {
+    async downloadFile(fileId, fileName) {
-        // Create a link and trigger download
+        try {
-        const link = document.createElement('a');
+            const response = await fetch(`/api/files/${fileId}`, {
-        link.href = `/api/files/${fileId}`;
+                headers: getAuthHeaders()
-        link.download = fileName;
+            });
-        link.target = '_blank';
+            if (response.ok) {
-        document.body.appendChild(link);
+                const blob = await response.blob();
-        link.click();
+                const url = URL.createObjectURL(blob);
-        document.body.removeChild(link);
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = fileName;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                URL.revokeObjectURL(url);
+            } else {
+                window.ui.showNotification('Error', 'Error al descargar el archivo');
+            }
+        } catch (error) {
+            console.error('Error downloading file:', error);
+            window.ui.showNotification('Error', 'Error al descargar el archivo');
+        }
     },
     
     /**
@@ -509,15 +734,22 @@ const fileOps = {
             // Show notification to user
             window.ui.showNotification('Preparando descarga', 'Preparando la carpeta para descargar...');
             
-            // Request the server to create a ZIP of the folder
+            const response = await fetch(`/api/folders/${folderId}/download?format=zip`, {
-            // Since the API might not support this directly, we will simply download with zip parameter
+                headers: getAuthHeaders()
-            const link = document.createElement('a');
+            });
-            link.href = `/api/folders/${folderId}/download?format=zip`;
+            if (response.ok) {
-            link.download = `${folderName}.zip`;
+                const blob = await response.blob();
-            link.target = '_blank';
+                const url = URL.createObjectURL(blob);
-            document.body.appendChild(link);
+                const link = document.createElement('a');
-            link.click();
+                link.href = url;
-            document.body.removeChild(link);
+                link.download = `${folderName}.zip`;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                URL.revokeObjectURL(url);
+            } else {
+                window.ui.showNotification('Error', 'Error al descargar la carpeta');
+            }
         } catch (error) {
             console.error('Error downloading folder:', error);
             window.ui.showNotification('Error', 'Error al descargar la carpeta');

static/js/i18n.js

@@ -11,7 +11,8 @@ let currentLocale =
     (navigator.userLanguage && navigator.userLanguage.substring(0, 2)) || 
     'en';
 
-// Supported locales
+// Supported locales (languages that have locale files on the server)
+// When a locale file is not found, the system gracefully falls back to English
 const supportedLocales = ['en', 'es', 'zh', 'fa'];
 
 // Fallback to English if locale is not supported

static/js/inlineViewer.js

@@ -164,6 +164,12 @@ class InlineViewer {
       xhr.open('GET', `/api/files/${file.id}?inline=true`, true);
       xhr.responseType = 'blob';
       
+      // Add auth header
+      const token = localStorage.getItem('oxicloud_token');
+      if (token) {
+        xhr.setRequestHeader('Authorization', `Bearer ${token}`);
+      }
+      
       // Create a promise to handle the XHR
       const response = await new Promise((resolve, reject) => {
         xhr.onload = function() {
@@ -288,14 +294,25 @@ class InlineViewer {
   }
   
   downloadFile(file) {
-    // Create a link and click it
+    const token = localStorage.getItem('oxicloud_token');
-    const link = document.createElement('a');
+    const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
-    link.href = `/api/files/${file.id}`;
+    
-    link.download = file.name;
+    fetch(`/api/files/${file.id}`, { headers })
-    link.target = '_blank';
+      .then(res => {
-    document.body.appendChild(link);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-    link.click();
+        return res.blob();
-    document.body.removeChild(link);
+      })
+      .then(blob => {
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = file.name;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+      })
+      .catch(err => console.error('Download error:', err));
   }
   
   zoomImage(factor) {

static/js/languageSelector.js

@@ -4,12 +4,18 @@
  */
 
 // Language codes, names, and flag emojis
-const languages = [
+// Uses ALL_LANGUAGES from auth.js if available, otherwise fallback
-    { code: 'en', name: 'English', flag: '🇬🇧' },
+function getAvailableLanguages() {
-    { code: 'es', name: 'Español', flag: '🇪🇸' },
+    if (typeof ALL_LANGUAGES !== 'undefined') {
-    { code: 'zh', name: '中文', flag: '🇨🇳' },
+        return ALL_LANGUAGES.map(l => ({ code: l.code, name: l.nativeName, flag: l.flag }));
-    { code: 'fa', name: 'فارسی', flag: '🦁' }
+    }
-];
+    return [
+        { code: 'en', name: 'English', flag: '🇬🇧' },
+        { code: 'es', name: 'Español', flag: '🇪🇸' },
+        { code: 'zh', name: '中文', flag: '🇨🇳' },
+        { code: 'fa', name: 'فارسی', flag: '🇮🇷' }
+    ];
+}
 
 // RTL languages
 const rtlLanguages = ['fa']; // ['fa', 'ar']
@@ -47,6 +53,7 @@ function createLanguageSelector(containerId = 'language-selector') {
     container.className = 'language-selector';
     
     // Get current language
+    const languages = getAvailableLanguages();
     const currentLocale = window.i18n ? window.i18n.getCurrentLocale() : 'en';
     const currentLang = languages.find(l => l.code === currentLocale) || languages[0];
     
@@ -182,6 +189,7 @@ async function selectLanguage(langCode, container) {
  * Update the UI to reflect selected language
  */
 function updateSelectedLanguage(langCode, container) {
+    const languages = getAvailableLanguages();
     const lang = languages.find(l => l.code === langCode) || languages[0];
     
     // Update toggle button text

static/js/recent.js

@@ -117,8 +117,8 @@ const recent = {
                 </div>
             `;
             
-            // Update breadcrumb for recents
+            // Update breadcrumb - just show Home
-            window.ui.updateBreadcrumb(window.i18n ? window.i18n.t('nav.recent') : 'Recientes');
+            window.ui.updateBreadcrumb('');
             
             // Show empty state if no recent files
             if (recentFiles.length === 0) {

static/js/ui.js

@@ -21,17 +21,19 @@ const ui = {
                 <div class="context-menu-item" id="favorite-folder-option">
                     <i class="fas fa-star"></i> <span data-i18n="actions.favorite">Añadir a favoritos</span>
                 </div>
-                <div class="context-menu-item" id="rename-folder-option">
-                    <i class="fas fa-edit"></i> <span data-i18n="actions.rename">Renombrar</span>
-                </div>
-                <div class="context-menu-item" id="move-folder-option">
-                    <i class="fas fa-exchange-alt"></i> <span data-i18n="actions.move">Mover a...</span>
-                </div>
                 <div class="context-menu-item" id="share-folder-option">
                     <i class="fas fa-share-alt"></i> <span data-i18n="actions.share">Compartir</span>
                 </div>
-                <div class="context-menu-item" id="delete-folder-option">
+                <div class="context-menu-separator"></div>
-                    <i class="fas fa-trash"></i> <span data-i18n="actions.delete">Eliminar</span>
+                <div class="context-menu-item" id="rename-folder-option">
+                    <i class="fas fa-pen"></i> <span data-i18n="actions.rename">Renombrar</span>
+                </div>
+                <div class="context-menu-item" id="move-folder-option">
+                    <i class="fas fa-arrows-alt"></i> <span data-i18n="actions.move">Mover a...</span>
+                </div>
+                <div class="context-menu-separator"></div>
+                <div class="context-menu-item context-menu-item-danger" id="delete-folder-option">
+                    <i class="fas fa-trash-alt"></i> <span data-i18n="actions.delete">Eliminar</span>
                 </div>
             `;
             document.body.appendChild(folderMenu);
@@ -49,33 +51,44 @@ const ui = {
                 <div class="context-menu-item" id="download-file-option">
                     <i class="fas fa-download"></i> <span data-i18n="actions.download">Descargar</span>
                 </div>
+                <div class="context-menu-separator"></div>
                 <div class="context-menu-item" id="favorite-file-option">
                     <i class="fas fa-star"></i> <span data-i18n="actions.favorite">Añadir a favoritos</span>
                 </div>
                 <div class="context-menu-item" id="share-file-option">
                     <i class="fas fa-share-alt"></i> <span data-i18n="actions.share">Compartir</span>
                 </div>
-                <div class="context-menu-item" id="move-file-option">
+                <div class="context-menu-separator"></div>
-                    <i class="fas fa-exchange-alt"></i> <span data-i18n="actions.move">Mover a...</span>
+                <div class="context-menu-item" id="rename-file-option">
+                    <i class="fas fa-pen"></i> <span data-i18n="actions.rename">Renombrar</span>
                 </div>
-                <div class="context-menu-item" id="delete-file-option">
+                <div class="context-menu-item" id="move-file-option">
-                    <i class="fas fa-trash"></i> <span data-i18n="actions.delete">Eliminar</span>
+                    <i class="fas fa-arrows-alt"></i> <span data-i18n="actions.move">Mover a...</span>
+                </div>
+                <div class="context-menu-separator"></div>
+                <div class="context-menu-item context-menu-item-danger" id="delete-file-option">
+                    <i class="fas fa-trash-alt"></i> <span data-i18n="actions.delete">Eliminar</span>
                 </div>
             `;
             document.body.appendChild(fileMenu);
         }
 
-        // Rename dialog
+        // Rename dialog — modern
         if (!document.getElementById('rename-dialog')) {
             const renameDialog = document.createElement('div');
             renameDialog.className = 'rename-dialog';
             renameDialog.id = 'rename-dialog';
             renameDialog.innerHTML = `
                 <div class="rename-dialog-content">
-                    <div class="rename-dialog-header" data-i18n="dialogs.rename_folder">Renombrar carpeta</div>
+                    <div class="rename-dialog-header">
-                    <input type="text" id="rename-input" data-i18n-placeholder="dialogs.new_name" placeholder="Nuevo nombre">
+                        <i class="fas fa-pen" style="color:#ff5e3a"></i>
+                        <span data-i18n="dialogs.rename_folder">Renombrar</span>
+                    </div>
+                    <div class="rename-dialog-body">
+                        <input type="text" id="rename-input" data-i18n-placeholder="dialogs.new_name" placeholder="Nuevo nombre">
+                    </div>
                     <div class="rename-dialog-buttons">
-                        <button class="btn" id="rename-cancel-btn" data-i18n="actions.cancel">Cancelar</button>
+                        <button class="btn btn-secondary" id="rename-cancel-btn" data-i18n="actions.cancel">Cancelar</button>
                         <button class="btn btn-primary" id="rename-confirm-btn" data-i18n="actions.rename">Renombrar</button>
                     </div>
                 </div>
@@ -83,23 +96,27 @@ const ui = {
             document.body.appendChild(renameDialog);
         }
 
-        // Move dialog
+        // Move dialog — modern
         if (!document.getElementById('move-file-dialog')) {
             const moveDialog = document.createElement('div');
             moveDialog.className = 'rename-dialog';
             moveDialog.id = 'move-file-dialog';
             moveDialog.innerHTML = `
                 <div class="rename-dialog-content">
-                    <div class="rename-dialog-header" data-i18n="dialogs.move_file">Mover archivo</div>
+                    <div class="rename-dialog-header">
-                    <p data-i18n="dialogs.select_destination">Selecciona la carpeta destino:</p>
+                        <i class="fas fa-arrows-alt" style="color:#ff5e3a"></i>
-                    <div id="folder-select-container" style="max-height: 200px; overflow-y: auto; margin: 15px 0; border: 1px solid #ddd; border-radius: 4px; padding: 10px;">
+                        <span data-i18n="dialogs.move_file">Mover</span>
-                        <!-- Las carpetas se cargarán aquí dinámicamente -->
+                    </div>
-                        <div class="folder-select-item" data-folder-id="">
+                    <div class="rename-dialog-body">
-                            <i class="fas fa-folder"></i> <span data-i18n="dialogs.root">Raíz</span>
+                        <p style="margin:0 0 12px;color:#718096;font-size:14px" data-i18n="dialogs.select_destination">Selecciona la carpeta destino:</p>
+                        <div id="folder-select-container" style="max-height:220px;overflow-y:auto;">
+                            <div class="folder-select-item selected" data-folder-id="">
+                                <i class="fas fa-folder"></i> <span data-i18n="dialogs.root">Raíz</span>
+                            </div>
                         </div>
                     </div>
                     <div class="rename-dialog-buttons">
-                        <button class="btn" id="move-cancel-btn" data-i18n="actions.cancel">Cancelar</button>
+                        <button class="btn btn-secondary" id="move-cancel-btn" data-i18n="actions.cancel">Cancelar</button>
                         <button class="btn btn-primary" id="move-confirm-btn" data-i18n="actions.move_to">Mover</button>
                     </div>
                 </div>
@@ -114,7 +131,10 @@ const ui = {
             shareDialog.id = 'share-dialog';
             shareDialog.innerHTML = `
                 <div class="share-dialog-content">
-                    <div class="share-dialog-header" data-i18n="dialogs.share_file">Compartir archivo</div>
+                    <div class="share-dialog-header">
+                        <i class="fas fa-share-alt" style="color:#ff5e3a"></i>
+                        <span data-i18n="dialogs.share_file">Compartir archivo</span>
+                    </div>
                     <div class="shared-item-info">
                         <strong>Elemento:</strong> <span id="shared-item-name"></span>
                     </div>
@@ -172,7 +192,7 @@ const ui = {
                     </div>
                     
                     <div class="share-dialog-buttons">
-                        <button class="btn" id="share-cancel-btn" data-i18n="actions.cancel">Cancelar</button>
+                        <button class="btn btn-secondary" id="share-cancel-btn" data-i18n="actions.cancel">Cancelar</button>
                         <button class="btn btn-primary" id="share-confirm-btn" data-i18n="actions.share">Compartir</button>
                     </div>
                 </div>
@@ -206,7 +226,10 @@ const ui = {
             notificationDialog.id = 'notification-dialog';
             notificationDialog.innerHTML = `
                 <div class="share-dialog-content">
-                    <div class="share-dialog-header" data-i18n="dialogs.notify">Notificar enlace compartido</div>
+                    <div class="share-dialog-header">
+                        <i class="fas fa-envelope" style="color:#ff5e3a"></i>
+                        <span data-i18n="dialogs.notify">Notificar enlace compartido</span>
+                    </div>
                     
                     <p><strong>URL:</strong> <span id="notification-share-url"></span></p>
                     
@@ -221,7 +244,7 @@ const ui = {
                     </div>
                     
                     <div class="share-dialog-buttons">
-                        <button class="btn" id="notification-cancel-btn" data-i18n="actions.cancel">Cancelar</button>
+                        <button class="btn btn-secondary" id="notification-cancel-btn" data-i18n="actions.cancel">Cancelar</button>
                         <button class="btn btn-primary" id="notification-send-btn" data-i18n="actions.send">Enviar</button>
                     </div>
                 </div>
@@ -473,40 +496,132 @@ const ui = {
 
             if (iconElement.classList.contains('folder-icon')) {
                 iconElement.innerHTML = '';
+                return;
             }
-            else if (fileName.endsWith('.docx') || fileName.endsWith('.pdf') || fileName.endsWith('.txt') || fileName.endsWith('.xlsx')) {
-                iconElement.classList.add('doc-icon');
-                iconElement.innerHTML = '';
-            }
-            else if (fileName.endsWith('.jpg') || fileName.endsWith('.png') || fileName.endsWith('.gif') || fileName.endsWith('.jpeg')) {
-                iconElement.classList.add('image-icon');
-                iconElement.innerHTML = '';
-            }
-            else if (fileName.endsWith('.mp4') || fileName.endsWith('.avi') || fileName.endsWith('.mov') || fileName.endsWith('.mkv')) {
-                iconElement.classList.add('video-icon');
-                iconElement.innerHTML = '';
-            }
-            else {
-                const extension = fileName.split('.').pop().toLowerCase();
 
-                if (['json', 'js', 'jsx', 'ts', 'tsx', 'html', 'css', 'scss', 'py', 'java', 'c', 'cpp', 'cs', 'php', 'rb', 'go', 'rs', 'swift', 'kt'].includes(extension)) {
+            const extension = fileName.includes('.') ? fileName.split('.').pop().toLowerCase() : '';
-                    iconElement.className = 'file-icon code-icon';
+            
+            // Map extensions to icon types
+            const iconMap = {
+                // Documents
+                pdf:   { cls: 'pdf-icon', fa: 'fas fa-file-pdf' },
+                doc:   { cls: 'doc-icon', fa: 'fas fa-file-word' },
+                docx:  { cls: 'doc-icon', fa: 'fas fa-file-word' },
+                txt:   { cls: 'doc-icon', fa: 'fas fa-file-alt' },
+                rtf:   { cls: 'doc-icon', fa: 'fas fa-file-alt' },
+                odt:   { cls: 'doc-icon', fa: 'fas fa-file-alt' },
+                // Spreadsheets
+                xlsx:  { cls: 'spreadsheet-icon' },
+                xls:   { cls: 'spreadsheet-icon' },
+                csv:   { cls: 'spreadsheet-icon' },
+                ods:   { cls: 'spreadsheet-icon' },
+                // Presentations
+                pptx:  { cls: 'presentation-icon' },
+                ppt:   { cls: 'presentation-icon' },
+                odp:   { cls: 'presentation-icon' },
+                // Images
+                jpg:   { cls: 'image-icon' },
+                jpeg:  { cls: 'image-icon' },
+                png:   { cls: 'image-icon' },
+                gif:   { cls: 'image-icon' },
+                svg:   { cls: 'image-icon' },
+                webp:  { cls: 'image-icon' },
+                bmp:   { cls: 'image-icon' },
+                ico:   { cls: 'image-icon' },
+                // Videos
+                mp4:   { cls: 'video-icon' },
+                avi:   { cls: 'video-icon' },
+                mov:   { cls: 'video-icon' },
+                mkv:   { cls: 'video-icon' },
+                webm:  { cls: 'video-icon' },
+                flv:   { cls: 'video-icon' },
+                // Audio
+                mp3:   { cls: 'audio-icon' },
+                wav:   { cls: 'audio-icon' },
+                ogg:   { cls: 'audio-icon' },
+                flac:  { cls: 'audio-icon' },
+                aac:   { cls: 'audio-icon' },
+                m4a:   { cls: 'audio-icon' },
+                // Archives
+                zip:   { cls: 'archive-icon' },
+                rar:   { cls: 'archive-icon' },
+                '7z':  { cls: 'archive-icon' },
+                tar:   { cls: 'archive-icon' },
+                gz:    { cls: 'archive-icon' },
+                bz2:   { cls: 'archive-icon' },
+                // Installers
+                dmg:   { cls: 'installer-icon' },
+                exe:   { cls: 'installer-icon' },
+                msi:   { cls: 'installer-icon' },
+                deb:   { cls: 'installer-icon' },
+                rpm:   { cls: 'installer-icon' },
+                pkg:   { cls: 'installer-icon' },
+                app:   { cls: 'installer-icon' },
+                // Scripts
+                sh:    { cls: 'script-icon', fa: 'fas fa-terminal' },
+                bash:  { cls: 'script-icon', fa: 'fas fa-terminal' },
+                zsh:   { cls: 'script-icon', fa: 'fas fa-terminal' },
+                bat:   { cls: 'script-icon', fa: 'fas fa-terminal' },
+                ps1:   { cls: 'script-icon', fa: 'fas fa-terminal' },
+                // Code — each with sub-type
+                json:  { cls: 'code-icon', sub: 'json-icon' },
+                js:    { cls: 'code-icon', sub: 'js-icon' },
+                jsx:   { cls: 'code-icon', sub: 'js-icon' },
+                ts:    { cls: 'code-icon', sub: 'ts-icon' },
+                tsx:   { cls: 'code-icon', sub: 'ts-icon' },
+                html:  { cls: 'code-icon', sub: 'html-icon' },
+                htm:   { cls: 'code-icon', sub: 'html-icon' },
+                css:   { cls: 'code-icon', sub: 'css-icon' },
+                scss:  { cls: 'code-icon', sub: 'css-icon' },
+                py:    { cls: 'code-icon', sub: 'py-icon' },
+                rs:    { cls: 'code-icon', sub: 'rust-icon' },
+                go:    { cls: 'code-icon', sub: 'go-icon' },
+                java:  { cls: 'code-icon', sub: 'java-icon' },
+                c:     { cls: 'code-icon', sub: 'c-icon' },
+                cpp:   { cls: 'code-icon', sub: 'c-icon' },
+                cs:    { cls: 'code-icon', sub: 'cs-icon' },
+                php:   { cls: 'code-icon', sub: 'php-icon' },
+                rb:    { cls: 'code-icon', sub: 'ruby-icon' },
+                swift: { cls: 'code-icon', sub: 'swift-icon' },
+                kt:    { cls: 'code-icon', sub: 'kotlin-icon' },
+                sql:   { cls: 'code-icon', sub: 'sql-icon' },
+                yaml:  { cls: 'code-icon', sub: 'yaml-icon' },
+                yml:   { cls: 'code-icon', sub: 'yaml-icon' },
+                toml:  { cls: 'code-icon', sub: 'toml-icon' },
+                xml:   { cls: 'code-icon', sub: 'html-icon' },
+                md:    { cls: 'code-icon', sub: 'md-icon' },
+                // Config
+                ini:   { cls: 'config-icon', fa: 'fas fa-cog' },
+                cfg:   { cls: 'config-icon', fa: 'fas fa-cog' },
+                conf:  { cls: 'config-icon', fa: 'fas fa-cog' },
+                env:   { cls: 'config-icon', fa: 'fas fa-cog' },
+            };
+
+            const mapping = iconMap[extension];
+            if (mapping) {
+                iconElement.className = `file-icon ${mapping.cls}`;
+                if (mapping.cls === 'code-icon') {
+                    // Code icons use pseudo-element lines
                     iconElement.innerHTML = `
                         <div class="code-line-1"></div>
                         <div class="code-line-2"></div>
                         <div class="code-line-3"></div>
                     `;
-
+                    if (mapping.sub) iconElement.classList.add(mapping.sub);
-                    if (extension === 'json') {
+                } else {
-                        iconElement.classList.add('json-icon');
+                    // Types with pure CSS visuals — clear the <i>
-                    } else if (['js', 'jsx', 'ts', 'tsx'].includes(extension)) {
+                    const pureCssTypes = ['image-icon','video-icon','spreadsheet-icon','presentation-icon','audio-icon','archive-icon','installer-icon'];
-                        iconElement.classList.add('js-icon');
+                    if (pureCssTypes.includes(mapping.cls)) {
-                    } else if (extension === 'html') {
+                        iconElement.innerHTML = '';
-                        iconElement.classList.add('html-icon');
+                    } else if (mapping.fa) {
-                    } else if (['css', 'scss'].includes(extension)) {
+                        // Types that keep the FA icon — update <i> class
-                        iconElement.classList.add('css-icon');
+                        let iEl = iconElement.querySelector('i');
-                    } else if (extension === 'py') {
+                        if (!iEl) {
-                        iconElement.classList.add('py-icon');
+                            iEl = document.createElement('i');
+                            iconElement.innerHTML = '';
+                            iconElement.appendChild(iEl);
+                        }
+                        iEl.className = mapping.fa;
                     }
                 }
             }
@@ -534,6 +649,8 @@ const ui = {
         folderGridElement.dataset.folderName = folder.name;
         folderGridElement.dataset.parentId = folder.parent_id || "";
         folderGridElement.innerHTML = `
+            <div class="file-card-checkbox"><i class="fas fa-check"></i></div>
+            <button class="file-card-more"><i class="fas fa-ellipsis-v"></i></button>
             <div class="file-icon folder-icon">
                 <i class="fas fa-folder"></i>
             </div>
@@ -546,6 +663,10 @@ const ui = {
             folderGridElement.setAttribute('draggable', 'true');
 
             folderGridElement.addEventListener('dragstart', (e) => {
+                if (!folderGridElement.classList.contains('selected')) {
+                    e.preventDefault();
+                    return;
+                }
                 e.dataTransfer.setData('text/plain', folder.id);
                 e.dataTransfer.setData('application/oxicloud-folder', 'true');
                 folderGridElement.classList.add('dragging');
@@ -559,13 +680,36 @@ const ui = {
             });
         }
 
-        // Click to navigate
+        // Single click to select, double click to navigate
-        folderGridElement.addEventListener('click', () => {
+        folderGridElement.addEventListener('click', (e) => {
+            if (e.target.closest('.file-card-more') || e.target.closest('.file-card-checkbox')) return;
+            toggleCardSelection(folderGridElement, e);
+        });
+
+        folderGridElement.addEventListener('dblclick', () => {
             window.app.currentPath = folder.id;
             this.updateBreadcrumb(folder.name);
             window.loadFiles();
         });
 
+        // Checkbox click
+        folderGridElement.querySelector('.file-card-checkbox').addEventListener('click', (e) => {
+            e.stopPropagation();
+            toggleCardSelection(folderGridElement, e);
+        });
+
+        // More actions button
+        folderGridElement.querySelector('.file-card-more').addEventListener('click', (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            window.app.contextMenuTargetFolder = {
+                id: folder.id,
+                name: folder.name,
+                parent_id: folder.parent_id || ""
+            };
+            showContextMenuAtElement(e.currentTarget, 'folder-context-menu');
+        });
+
         // Context menu
         folderGridElement.addEventListener('contextmenu', (e) => {
             e.preventDefault();
@@ -766,6 +910,8 @@ const ui = {
         const fileGridElement = document.createElement('div');
         fileGridElement.className = 'file-card';
         fileGridElement.innerHTML = `
+            <div class="file-card-checkbox"><i class="fas fa-check"></i></div>
+            <button class="file-card-more"><i class="fas fa-ellipsis-v"></i></button>
             <div class="file-icon">
                 <i class="${iconClass}"></i>
             </div>
@@ -781,6 +927,10 @@ const ui = {
         fileGridElement.setAttribute('draggable', 'true');
 
         fileGridElement.addEventListener('dragstart', (e) => {
+            if (!fileGridElement.classList.contains('selected')) {
+                e.preventDefault();
+                return;
+            }
             e.dataTransfer.setData('text/plain', file.id);
             fileGridElement.classList.add('dragging');
         });
@@ -792,8 +942,13 @@ const ui = {
             });
         });
 
-        // View or download on click
+        // Single click = select, double click = open/download
-        fileGridElement.addEventListener('click', () => {
+        fileGridElement.addEventListener('click', (e) => {
+            if (e.target.closest('.file-card-more') || e.target.closest('.file-card-checkbox')) return;
+            toggleCardSelection(fileGridElement, e);
+        });
+
+        fileGridElement.addEventListener('dblclick', () => {
             // Track this file access for recent files
             if (window.recent) {
                 document.dispatchEvent(new CustomEvent('file-accessed', {
@@ -804,22 +959,36 @@ const ui = {
             // Check if it's a viewable file type
             if ((file.mime_type && file.mime_type.startsWith('image/')) || 
                 (file.mime_type && file.mime_type === 'application/pdf')) {
-                // Open in the inline viewer
                 if (window.inlineViewer) {
                     window.inlineViewer.openFile(file);
                 } else if (window.fileViewer) {
-                    // Fallback to standard file viewer
                     window.fileViewer.open(file);
                 } else {
-                    // No viewer available, download directly
                     window.location.href = `/api/files/${file.id}`;
                 }
             } else {
-                // For other file types, download directly
                 window.location.href = `/api/files/${file.id}`;
             }
         });
 
+        // Checkbox click
+        fileGridElement.querySelector('.file-card-checkbox').addEventListener('click', (e) => {
+            e.stopPropagation();
+            toggleCardSelection(fileGridElement, e);
+        });
+
+        // More actions button
+        fileGridElement.querySelector('.file-card-more').addEventListener('click', (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            window.app.contextMenuTargetFile = {
+                id: file.id,
+                name: file.name,
+                folder_id: file.folder_id || ""
+            };
+            showContextMenuAtElement(e.currentTarget, 'file-context-menu');
+        });
+
         // Context menu
         fileGridElement.addEventListener('contextmenu', (e) => {
             e.preventDefault();
@@ -920,5 +1089,197 @@ const ui = {
     }
 };
 
+// --- Global helper functions for card interactions ---
+
+/**
+ * Toggle selection state of a file/folder card.
+ * Each click toggles that card independently (multi-select by default).
+ */
+function toggleCardSelection(card, event) {
+    card.classList.toggle('selected');
+}
+
+/**
+ * Show the context menu anchored next to a trigger element (the 3-dot button).
+ */
+function showContextMenuAtElement(triggerElement, menuId) {
+    // Hide any open menus first
+    document.querySelectorAll('.context-menu').forEach(m => m.style.display = 'none');
+
+    const menu = document.getElementById(menuId);
+    if (!menu) return;
+
+    const rect = triggerElement.getBoundingClientRect();
+    const menuWidth = 200; // approximate
+
+    // Position below the trigger, aligned to the right edge
+    let left = rect.right - menuWidth + window.scrollX;
+    let top = rect.bottom + 4 + window.scrollY;
+
+    // Keep inside viewport
+    if (left < 8) left = 8;
+    if (top + 300 > window.innerHeight + window.scrollY) {
+        top = rect.top - 4 + window.scrollY; // flip above if no room
+    }
+
+    menu.style.left = `${left}px`;
+    menu.style.top = `${top}px`;
+    menu.style.display = 'block';
+}
+
+/**
+ * Rubber band (lasso) selection — click + drag on empty grid area
+ * to draw a rectangle and select all cards it touches.
+ */
+function initRubberBandSelection() {
+    // Create the visual rectangle element once
+    let selRect = document.getElementById('selection-rect');
+    if (!selRect) {
+        selRect = document.createElement('div');
+        selRect.id = 'selection-rect';
+        selRect.className = 'selection-rect';
+        document.body.appendChild(selRect);
+    }
+
+    let active = false;
+    let startX = 0, startY = 0;
+
+    // We listen on the whole files-container (covers grid + empty space)
+    const container = document.querySelector('.files-container') || document.getElementById('files-grid');
+    if (!container) return;
+
+    container.addEventListener('mousedown', (e) => {
+        // Only start if clicking empty area (not on a card, button, menu, input…)
+        if (e.button !== 0) return; // left click only
+        if (e.target.closest('.file-card') || e.target.closest('.context-menu') ||
+            e.target.closest('.upload-dropdown') || e.target.closest('button') ||
+            e.target.closest('input') || e.target.closest('.breadcrumb')) return;
+
+        active = true;
+        startX = e.clientX;
+        startY = e.clientY;
+
+        selRect.style.left = `${startX}px`;
+        selRect.style.top = `${startY}px`;
+        selRect.style.width = '0px';
+        selRect.style.height = '0px';
+        selRect.style.display = 'none'; // show only after a small movement
+
+        e.preventDefault(); // prevent text selection
+    });
+
+    document.addEventListener('mousemove', (e) => {
+        if (!active) return;
+
+        const curX = e.clientX;
+        const curY = e.clientY;
+
+        const left = Math.min(startX, curX);
+        const top = Math.min(startY, curY);
+        const width = Math.abs(curX - startX);
+        const height = Math.abs(curY - startY);
+
+        // Only show the rect after a small threshold to avoid flicker on click
+        if (width > 5 || height > 5) {
+            selRect.style.display = 'block';
+        }
+
+        selRect.style.left = `${left}px`;
+        selRect.style.top = `${top}px`;
+        selRect.style.width = `${width}px`;
+        selRect.style.height = `${height}px`;
+
+        // Highlight cards that intersect with the rectangle
+        const rectBounds = { left, top, right: left + width, bottom: top + height };
+
+        document.querySelectorAll('#files-grid .file-card').forEach(card => {
+            const cardRect = card.getBoundingClientRect();
+            const intersects =
+                cardRect.left < rectBounds.right &&
+                cardRect.right > rectBounds.left &&
+                cardRect.top < rectBounds.bottom &&
+                cardRect.bottom > rectBounds.top;
+
+            if (intersects) {
+                card.classList.add('selected');
+            } else {
+                card.classList.remove('selected');
+            }
+        });
+    });
+
+    document.addEventListener('mouseup', () => {
+        if (!active) return;
+        active = false;
+        selRect.style.display = 'none';
+    });
+}
+
+// Initialize rubber band once DOM is ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initRubberBandSelection);
+} else {
+    initRubberBandSelection();
+}
+
+// Expose helpers globally
+window.toggleCardSelection = toggleCardSelection;
+window.showContextMenuAtElement = showContextMenuAtElement;
+window.initRubberBandSelection = initRubberBandSelection;
+
+/**
+ * Show a modern confirm dialog (replaces native confirm())
+ * @param {Object} options
+ * @param {string} options.title - Dialog title
+ * @param {string} options.message - Dialog message/body
+ * @param {string} [options.confirmText='Confirmar'] - Text for confirm button
+ * @param {string} [options.cancelText='Cancelar'] - Text for cancel button
+ * @param {boolean} [options.danger=false] - Use danger styling (red)
+ * @returns {Promise<boolean>} true if confirmed, false if cancelled
+ */
+function showConfirmDialog({ title, message, confirmText, cancelText, danger = true } = {}) {
+    const ct = confirmText || (window.i18n ? window.i18n.t('actions.delete') : 'Eliminar');
+    const cc = cancelText || (window.i18n ? window.i18n.t('actions.cancel') : 'Cancelar');
+    const t = title || (window.i18n ? window.i18n.t('dialogs.confirm_title') : 'Confirmar acción');
+
+    return new Promise((resolve) => {
+        // Remove any previous confirm dialog
+        const prev = document.getElementById('confirm-dialog-overlay');
+        if (prev) prev.remove();
+
+        const overlay = document.createElement('div');
+        overlay.id = 'confirm-dialog-overlay';
+        overlay.className = 'confirm-dialog';
+        overlay.innerHTML = `
+            <div class="confirm-dialog-content">
+                <div class="confirm-dialog-icon">
+                    <i class="fas ${danger ? 'fa-exclamation-triangle' : 'fa-question-circle'}"></i>
+                </div>
+                <div class="confirm-dialog-title">${t}</div>
+                <div class="confirm-dialog-message">${message || ''}</div>
+                <div class="confirm-dialog-buttons">
+                    <button class="btn btn-secondary confirm-dialog-cancel">${cc}</button>
+                    <button class="btn ${danger ? 'btn-danger' : 'btn-primary'} confirm-dialog-ok">${ct}</button>
+                </div>
+            </div>
+        `;
+        document.body.appendChild(overlay);
+
+        // Force layout then show
+        requestAnimationFrame(() => { overlay.classList.add('active'); });
+
+        const cleanup = (result) => {
+            overlay.classList.remove('active');
+            setTimeout(() => overlay.remove(), 200);
+            resolve(result);
+        };
+
+        overlay.querySelector('.confirm-dialog-cancel').addEventListener('click', () => cleanup(false));
+        overlay.querySelector('.confirm-dialog-ok').addEventListener('click', () => cleanup(true));
+        overlay.addEventListener('click', (e) => { if (e.target === overlay) cleanup(false); });
+    });
+}
+window.showConfirmDialog = showConfirmDialog;
+
 // Expose UI module globally
 window.ui = ui;

static/locales/en.json

@@ -14,6 +14,8 @@
     "search": "Search files...",
     "new_folder": "New folder",
     "upload": "Upload",
+    "upload_files": "Upload files",
+    "upload_folder": "Upload folder",
     "rename": "Rename",
     "move": "Move to...",
     "move_to": "Move to",
@@ -23,13 +25,23 @@
     "cancel": "Cancel",
     "confirm": "Confirm",
     "share": "Share",
+    "favorite": "Add to favorites",
+    "unfavorite": "Remove from favorites",
     "copy": "Copy",
     "notify": "Notify",
     "send": "Send",
     "clear_recent": "Clear recent",
     "logout": "Log out",
     "create": "Create",
-    "search_btn": "Search"
+    "search_btn": "Search",
+    "close": "Close",
+    "delete_permanently": "Delete permanently",
+    "empty_trash": "Empty trash"
+  },
+  "user_menu": {
+    "appearance": "Appearance",
+    "about": "About OxiCloud",
+    "about_description": "Cloud storage platform built with Rust & Clean Architecture. Fast, secure, and private."
   },
   "share": {
     "dialogTitle": "Share Link",
@@ -156,6 +168,7 @@
     "size": "Size",
     "modified": "Modified",
     "no_files": "No files in this folder",
+    "loading": "Loading files…",
     "view_grid": "Grid view",
     "view_list": "List view",
     "file_types": {
@@ -170,17 +183,28 @@
   },
   "dialogs": {
     "rename_folder": "Rename folder",
+    "rename_file": "Rename file",
     "new_name": "New name",
     "new_folder_title": "New folder",
     "folder_name": "Folder name",
     "folder_placeholder": "My folder",
     "rename_title": "Rename",
     "move_file": "Move file",
-    "select_destination": "Select destination folder",
+    "move_folder": "Move folder",
+    "select_destination": "Select destination folder:",
     "root": "Root",
     "delete_confirmation": "Are you sure you want to delete",
     "and_contents": "and all its contents",
     "no_undo": "This action cannot be undone",
+    "confirm_title": "Confirm action",
+    "confirm_delete": "Move to trash",
+    "confirm_delete_file": "Are you sure you want to move the file \"{{name}}\" to trash?",
+    "confirm_delete_folder": "Are you sure you want to move the folder \"{{name}}\" and all its contents to trash?",
+    "confirm_permanent_delete": "Delete permanently",
+    "confirm_permanent_delete_msg": "Are you sure you want to permanently delete this item? This action cannot be undone.",
+    "confirm_empty_trash": "Empty trash",
+    "confirm_delete_share": "Delete share link",
+    "confirm_delete_share_msg": "Are you sure you want to delete this shared link?",
     "share_file": "Share File",
     "existing_shares": "Existing Shares",
     "share_options": "Share Options",
@@ -293,5 +317,16 @@
     "accessed": "Accessed",
     "empty_state": "No recent files",
     "empty_hint": "Files you open will appear here"
+  },
+  "notifications": {
+    "file_renamed": "File renamed",
+    "file_renamed_to": "File renamed to \"{{name}}\"",
+    "folder_renamed": "Folder renamed",
+    "folder_renamed_to": "Folder renamed to \"{{name}}\"",
+    "file_uploaded": "File uploaded",
+    "file_deleted": "File moved to trash",
+    "folder_deleted": "Folder moved to trash",
+    "item_deleted_permanently": "Item permanently deleted",
+    "trash_emptied": "Trash emptied successfully"
   }
 }

static/locales/es.json

@@ -133,6 +133,8 @@
     "search": "Buscar archivos...",
     "new_folder": "Nueva carpeta",
     "upload": "Subir",
+    "upload_files": "Subir archivos",
+    "upload_folder": "Subir carpeta",
     "rename": "Renombrar",
     "move": "Mover a...",
     "move_to": "Mover a",
@@ -142,13 +144,23 @@
     "cancel": "Cancelar",
     "confirm": "Confirmar",
     "share": "Compartir",
+    "favorite": "Añadir a favoritos",
+    "unfavorite": "Quitar de favoritos",
     "copy": "Copiar",
     "notify": "Notificar",
     "send": "Enviar",
     "clear_recent": "Limpiar recientes",
     "logout": "Cerrar sesión",
     "create": "Crear",
-    "search_btn": "Buscar"
+    "search_btn": "Buscar",
+    "close": "Cerrar",
+    "delete_permanently": "Eliminar permanentemente",
+    "empty_trash": "Vaciar papelera"
+  },
+  "user_menu": {
+    "appearance": "Apariencia",
+    "about": "Acerca de OxiCloud",
+    "about_description": "Plataforma de almacenamiento en la nube creada con Rust y Arquitectura Limpia. Rápida, segura y privada."
   },
   "files": {
     "name": "Nombre",
@@ -156,6 +168,7 @@
     "size": "Tamaño",
     "modified": "Modificado",
     "no_files": "No hay archivos en esta carpeta",
+    "loading": "Cargando archivos…",
     "view_grid": "Vista de cuadrícula",
     "view_list": "Vista de lista",
     "file_types": {
@@ -170,17 +183,28 @@
   },
   "dialogs": {
     "rename_folder": "Renombrar carpeta",
+    "rename_file": "Renombrar archivo",
     "new_name": "Nuevo nombre",
     "new_folder_title": "Nueva carpeta",
     "folder_name": "Nombre de la carpeta",
     "folder_placeholder": "Mi carpeta",
     "rename_title": "Renombrar",
     "move_file": "Mover archivo",
-    "select_destination": "Selecciona la carpeta destino",
+    "move_folder": "Mover carpeta",
+    "select_destination": "Selecciona la carpeta destino:",
     "root": "Raíz",
     "delete_confirmation": "¿Estás seguro de que quieres eliminar",
     "and_contents": "y todo su contenido",
     "no_undo": "Esta acción no se puede deshacer",
+    "confirm_title": "Confirmar acción",
+    "confirm_delete": "Mover a papelera",
+    "confirm_delete_file": "¿Estás seguro de que quieres mover a la papelera el archivo \"{{name}}\"?",
+    "confirm_delete_folder": "¿Estás seguro de que quieres mover a la papelera la carpeta \"{{name}}\" y todo su contenido?",
+    "confirm_permanent_delete": "Eliminar permanentemente",
+    "confirm_permanent_delete_msg": "¿Estás seguro de que quieres eliminar permanentemente este elemento? Esta acción no se puede deshacer.",
+    "confirm_empty_trash": "Vaciar papelera",
+    "confirm_delete_share": "Eliminar enlace compartido",
+    "confirm_delete_share_msg": "¿Estás seguro de que quieres eliminar este enlace compartido?",
     "share_file": "Compartir Archivo",
     "existing_shares": "Compartidos Existentes",
     "share_options": "Opciones de Compartición",
@@ -293,5 +317,16 @@
     "accessed": "Accedido",
     "empty_state": "No hay archivos recientes",
     "empty_hint": "Los archivos que abras aparecerán aquí"
+  },
+  "notifications": {
+    "file_renamed": "Archivo renombrado",
+    "file_renamed_to": "Archivo renombrado a \"{{name}}\"",
+    "folder_renamed": "Carpeta renombrada",
+    "folder_renamed_to": "Carpeta renombrada a \"{{name}}\"",
+    "file_uploaded": "Archivo subido",
+    "file_deleted": "Archivo movido a papelera",
+    "folder_deleted": "Carpeta movida a papelera",
+    "item_deleted_permanently": "Elemento eliminado permanentemente",
+    "trash_emptied": "Papelera vaciada correctamente"
   }
 }

static/locales/fa.json

@@ -14,6 +14,8 @@
     "search": "جست‌و‌جوی پرونده‌ها..",
     "new_folder": "پوشهٔ جدید",
     "upload": "بارگذاری",
+    "upload_files": "بارگذاری پرونده‌ها",
+    "upload_folder": "بارگذاری پوشه",
     "rename": "تغییر نام",
     "move": "انتقال به...",
     "move_to": "انتقال به",
@@ -23,13 +25,21 @@
     "cancel": "لغو",
     "confirm": "تأیید",
     "share": "هم‌رسانی",
+    "favorite": "افزودن به موردعلاقه‌ها",
+    "unfavorite": "حذف از موردعلاقه‌ها",
     "copy": "رونوشت",
     "notify": "آگاه‌سازی",
     "send": "ارسال",
     "clear_recent": "پاک‌کردن موارد اخیر",
     "logout": "خروج",
     "create": "ایجاد",
-    "search_btn": "جست‌و‌جو"
+    "search_btn": "جست‌و‌جو",
+    "close": "بستن"
+  },
+  "user_menu": {
+    "appearance": "ظاهر",
+    "about": "درباره OxiCloud",
+    "about_description": "پلتفرم ذخیره‌سازی ابری ساخته شده با Rust و معماری تمیز. سریع، امن و خصوصی."
   },
   "share": {
     "dialogTitle": "پیوند هم‌رسانی",

static/locales/zh.json

@@ -14,6 +14,8 @@
     "search": "搜索文件...",
     "new_folder": "新建文件夹",
     "upload": "上传",
+    "upload_files": "上传文件",
+    "upload_folder": "上传文件夹",
     "rename": "重命名",
     "move": "移动到...",
     "move_to": "移动到",
@@ -23,13 +25,21 @@
     "cancel": "取消",
     "confirm": "确认",
     "share": "共享",
+    "favorite": "添加到收藏",
+    "unfavorite": "取消收藏",
     "copy": "复制",
     "notify": "通知",
     "send": "发送",
     "clear_recent": "清除最近",
     "logout": "退出登录",
     "create": "创建",
-    "search_btn": "搜索"
+    "search_btn": "搜索",
+    "close": "关闭"
+  },
+  "user_menu": {
+    "appearance": "外观",
+    "about": "关于 OxiCloud",
+    "about_description": "基于 Rust 和整洁架构构建的云存储平台。快速、安全、私密。"
   },
   "share": {
     "dialogTitle": "共享链接",

static/login.html

@@ -28,42 +28,46 @@
                 <div class="auth-logo-text">OxiCloud</div>
             </div>
             
+            <!-- Auto-detected language banner -->
+            <div class="lang-autodetected" id="lang-autodetected" style="display: none;">
+                <i class="fas fa-magic"></i>
+                <span id="lang-autodetected-text">We detected your language</span>
+            </div>
+
             <h2 class="auth-title" id="language-title">Welcome to OxiCloud</h2>
             <p class="language-subtitle" id="language-subtitle">Please select your language</p>
             
+            <!-- Popular languages shown as cards -->
             <div class="language-options" id="language-options">
-                <label class="language-option" data-lang="en">
+                <!-- Populated dynamically by auth.js -->
-                    <input type="radio" name="language" value="en">
-                    <span class="language-radio"></span>
-                    <span class="language-flag">🇬🇧</span>
-                    <span class="language-name">English</span>
-                </label>
-                
-                <label class="language-option" data-lang="es">
-                    <input type="radio" name="language" value="es">
-                    <span class="language-radio"></span>
-                    <span class="language-flag">🇪🇸</span>
-                    <span class="language-name">Español</span>
-                </label>
-                
-                <label class="language-option" data-lang="zh">
-                    <input type="radio" name="language" value="zh">
-                    <span class="language-radio"></span>
-                    <span class="language-flag">🇨🇳</span>
-                    <span class="language-name">中文</span>
-                </label>
-
-                <label class="language-option" data-lang="fa">
-                    <input type="radio" name="language" value="fa">
-                    <span class="language-radio"></span>
-                    <span class="language-flag">🦁</span>
-                    <span class="language-name">فارسی</span>
-                </label>
             </div>
+
+            <!-- "More languages" link -->
+            <button type="button" class="lang-more-btn" id="lang-more-btn">
+                <i class="fas fa-globe"></i>
+                <span id="lang-more-text">More languages...</span>
+            </button>
             
             <button type="button" class="auth-button" id="language-continue" disabled>Continue</button>
         </div>
 
+        <!-- Modal: All languages with search -->
+        <div class="lang-modal-overlay" id="lang-modal-overlay" style="display: none;">
+            <div class="lang-modal">
+                <div class="lang-modal-header">
+                    <h3 id="lang-modal-title">Select language</h3>
+                    <button type="button" class="lang-modal-close" id="lang-modal-close">&times;</button>
+                </div>
+                <div class="lang-modal-search">
+                    <i class="fas fa-search"></i>
+                    <input type="text" id="lang-search-input" placeholder="Search language..." autocomplete="off">
+                </div>
+                <div class="lang-modal-list" id="lang-modal-list">
+                    <!-- Populated dynamically -->
+                </div>
+            </div>
+        </div>
+
         <div class="auth-panel" id="login-panel" style="display: none;">
             <div class="auth-logo">
                 <div class="auth-logo-icon">

static/shared.html

@@ -21,30 +21,30 @@
         </div>
 
         <div class="nav-menu">
-            <div class="nav-item">
+            <a href="/" class="nav-item">
                 <i class="fas fa-folder"></i>
                 <span data-i18n="nav.files">Files</span>
-            </div>
+            </a>
-            <div class="nav-item active">
+            <a href="/shared.html" class="nav-item active">
                 <i class="fas fa-share-alt"></i>
                 <span data-i18n="nav.shared">Shared</span>
-            </div>
+            </a>
-            <div class="nav-item">
+            <a href="/#recent" class="nav-item">
                 <i class="fas fa-clock"></i>
                 <span data-i18n="nav.recent">Recent</span>
-            </div>
+            </a>
-            <div class="nav-item">
+            <a href="/#favorites" class="nav-item">
                 <i class="fas fa-star"></i>
                 <span data-i18n="nav.favorites">Favorites</span>
-            </div>
+            </a>
-            <div class="nav-item">
+            <a href="/#trash" class="nav-item">
                 <i class="fas fa-trash"></i>
                 <span data-i18n="nav.trash">Trash</span>
-            </div>
+            </a>
         </div>
 
         <div class="storage-container">
-            <div class="storage-title" data-i18n="storage.title">Storage</div>
+            <div class="storage-title"><i class="fas fa-database" style="margin-right:6px;color:#ff5e3a"></i><span data-i18n="storage.title">Storage</span></div>
             <div class="storage-bar">
                 <div class="storage-fill"></div>
             </div>
@@ -66,9 +66,19 @@
 
             <div class="user-controls">
                 <div id="language-selector"></div>
-                <div class="user-avatar" id="user-avatar">AD</div>
+                <div class="user-menu-wrapper">
-                <div id="logout-btn" class="logout-btn" data-i18n-title="actions.logout" title="Log out">
+                    <div class="user-avatar" id="user-avatar">AD</div>
-                    <i class="fas fa-sign-out-alt"></i>
+                    <div class="user-menu" id="user-menu">
+                        <div class="user-menu-header">
+                            <span class="user-name" id="user-menu-name">Admin</span>
+                            <span class="user-email" id="user-menu-email">admin@oxicloud.local</span>
+                        </div>
+                        <div class="user-menu-divider"></div>
+                        <div class="user-menu-item" id="menu-logout">
+                            <i class="fas fa-sign-out-alt"></i>
+                            <span data-i18n="actions.logout">Log out</span>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -77,14 +87,6 @@
             <h1 class="page-title" data-i18n="shared.pageTitle">Shared Resources</h1>
             <p class="page-description" data-i18n="shared.pageDescription">Manage your shared files and folders</p>
 
-            <div class="actions-bar">
-                <div class="action-buttons">
-                    <button class="btn btn-secondary" id="go-to-files-btn">
-                        <i class="fas fa-arrow-left" style="margin-right: 5px;"></i> <span data-i18n="shared.backToFiles">Back to Files</span>
-                    </button>
-                </div>
-            </div>
-
             <div class="shared-filters">
                 <div class="filter-group">
                     <label for="filter-type" data-i18n="shared.filterType">Type:</label>
@@ -223,7 +225,7 @@
 
                     <div class="form-group">
                         <label for="notification-message" data-i18n="share.notifyMessageLabel">Message (optional):</label>
-                        <textarea id="notification-message" placeholder="Add a personal message" rows="3"></textarea>
+                        <textarea id="notification-msg-text" placeholder="Add a personal message" rows="3"></textarea>
                     </div>
                 </div>
 
@@ -243,6 +245,47 @@
     <script src="/js/i18n.js"></script>
     <script src="/js/languageSelector.js"></script>
     <script src="/js/fileSharing.js"></script>
+    <script>
+        // Auth check — redirect to login if no token
+        (function() {
+            const token = localStorage.getItem('oxicloud_token');
+            if (!token) {
+                window.location.href = '/auth/login.html';
+                return;
+            }
+            // Set user avatar initials
+            const userData = JSON.parse(localStorage.getItem('oxicloud_user') || '{}');
+            const avatarEl = document.getElementById('user-avatar');
+            const nameEl = document.getElementById('user-menu-name');
+            const emailEl = document.getElementById('user-menu-email');
+            if (userData.username && avatarEl) {
+                const initials = userData.username.substring(0, 2).toUpperCase();
+                avatarEl.textContent = initials;
+            }
+            if (nameEl) nameEl.textContent = userData.username || 'User';
+            if (emailEl) emailEl.textContent = userData.email || '';
+
+            // User menu toggle
+            if (avatarEl) {
+                avatarEl.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    document.getElementById('user-menu').classList.toggle('active');
+                });
+            }
+            document.addEventListener('click', () => {
+                const menu = document.getElementById('user-menu');
+                if (menu) menu.classList.remove('active');
+            });
+            const logoutBtn = document.getElementById('menu-logout');
+            if (logoutBtn) {
+                logoutBtn.addEventListener('click', () => {
+                    localStorage.removeItem('oxicloud_token');
+                    localStorage.removeItem('oxicloud_user');
+                    window.location.href = '/auth/login.html';
+                });
+            }
+        })();
+    </script>
     <script src="/js/shared.js"></script>
 </body>
 </html>