updateFileActionButtons to hide or show depending on action

CHANGELOG.md

@@ -1,5 +1,163 @@
 # Changelog
 
+## Changes 5/20/2025 1.3.6
+
+- **domUtils.js**
+  - `updateFileActionButtons`
+    - Hide selection buttons (`Delete Files`, `Copy Files`, `Move Files` & `Download ZIP`) until file is selected.
+    - Hides `Extract ZIP` until selecting zip files
+    - Hide `Create File` button when file list items are selected.
+
+---
+
+## Changes 5/19/2025 1.3.5
+
+### Added Folder strip & Create File
+
+- **Folder strip in file list**  
+  - `loadFileList` now fetches sub-folders in parallel from `/api/folder/getFolderList.php`.  
+  - Filters to only *direct* children of the current folder, hiding `profile_pics` and `trash`.  
+  - Injects a new `.folder-strip-container` just below the Files In above (summary + slider).  
+  - Clicking a folder in the strip updates:
+    - the breadcrumb (via `updateBreadcrumbTitle`)
+    - the tree selection highlight
+    - reloads `loadFileList` for the chosen folder.
+
+- **Create File feature**  
+  - New “Create New File” button added to the file-actions toolbar and context menu.  
+  - New endpoint `public/api/file/createFile.php` (handled by `FileController`/`FileModel`):
+    - Creates an empty file if it doesn’t already exist.
+    - Appends an entry to `<folder>_metadata.json` with `uploaded` timestamp and `uploader`.  
+  - `fileActions.js`:
+    - Implemented `handleCreateFile()` to show a modal, POST to the new endpoint, and refresh the list.  
+    - Added translations for `create_new_file` and `newfile_placeholder`.
+
+---
+
+## Changees 5/15/2025
+
+### Drag‐and‐Drop Upload extended to File List
+
+- **Forward file‐list drops**  
+  Dropping files onto the file‐list area (`#fileListContainer`) now re‐dispatches the same `drop` event to the upload card’s drop zone (`#uploadDropArea`)
+- **Visual feedback**  
+  Added a `.drop-hover` class on `#fileListContainer` during drag‐over for a dashed‐border + light‐background hover state to indicate it accepts file drops.
+
+---
+
+## Changes 5/14/2025 v1.3.4
+
+### 1. Button Grouping (Bootstrap)
+
+- Converted individual action buttons (`download`, `edit`, `rename`, `share`) in both **table view** and **gallery view** into a single Bootstrap button group for a cleaner, more compact UI.
+- Applied `btn-group` and `btn-sm` classes for consistent sizing and spacing.
+
+### 2. Header Dropdown Replacement
+
+- Replaced the standalone “User Panel” icon button with a **dropdown wrapper** (`.user-dropdown`) in the header.
+- Dropdown toggle now shows:
+  - **Profile picture** (if set) or the Material “account_circle” icon
+  - **Username** text (between avatar and caret)
+  - Down-arrow caret span.
+
+### 3. Menu Items Moved to Dropdown
+
+- Moved previously standalone header buttons into the dropdown menu:
+  - **User Panel** opens the modal
+  - **Admin Panel** only shown when `data.isAdmin` *and* on `demo.filerise.net`
+  - **API Docs** calls `openApiModal()`
+  - **Logout** calls `triggerLogout()`
+- Each menu item now has a matching Material icon (e.g. `person`, `admin_panel_settings`, `description`, `logout`).
+
+### 4. Profile Picture Support
+
+- Added a new `/api/profile/uploadPicture.php` endpoint + `UserController::uploadPicture()` + corresponding `UserModel::setProfilePicture()`.
+- On **Open User Panel**, display:
+  - Default avatar if none set
+  - Current profile picture if available
+- In the **User Panel** modal:
+  - Stylish “edit” overlay icon on the avatar to launch file picker
+  - Auto-upload on file selection (no “Save” button click needed)
+  - Preview updates immediately and header avatar refreshes live
+  - Persisted in `users.txt` and re-fetched via `getCurrentUser.php`
+
+### 5. API Docs & Logout Relocation
+
+- Removed API Docs from User Panel
+- Removed “Logout” buttons from the header toolbar.
+- Both are now menu entries in the **User Dropdown**.
+
+### 6. Admin Panel Conditional
+
+- The **Admin Panel** button was:
+  - Kept in the dropdown only when `data.isAdmin`
+  - Removed entirely elsewhere.
+
+### 7. Utility & Styling Tweaks
+
+- Introduced a small `normalizePicUrl()` helper to strip stray colons and ensure a leading slash.
+- Hidden the scrollbar in the User Panel modal via:
+  - Inline CSS (`scrollbar-width: none; -ms-overflow-style: none;`)  
+  - Global/WebKit rule for `::-webkit-scrollbar { display: none; }`
+- Made the User Panel modal fully responsive and vertically centered, with smooth dark-mode support.
+
+### 8. File/List View & Gallery View Sliders
+
+- **Unified “View‐Mode” Slider**  
+  Added a single slider panel (`#viewSliderContainer`) in the file‐list actions toolbar that switches behavior based on the current view mode:
+  - **Table View**: shows a **Row Height** slider (min 31px, max 60px).  
+    - Adjusts the CSS variable `--file-row-height` to resize all `<tr>` heights.  
+    - Persists the chosen height in `localStorage`.
+  - **Gallery View**: shows a **Columns** slider (min 1, max 6).  
+    - Updates the grid’s `grid-template-columns: repeat(N, 1fr)`.  
+    - Persists the chosen column count in `localStorage`.
+
+- **Injection Point**  
+  The slider container is dynamically inserted (or updated) just before the folder summary (`#fileSummary`) in `loadFileList()`, ensuring a consistent position across both view modes.
+
+- **Live Updates**  
+  Moving the slider thumb immediately updates the visible table row heights or gallery column layout without a full re‐render.
+
+- **Styling & Alignment**  
+  - `#viewSliderContainer` uses `inline-flex` and `align-items: center` so that label, slider, and value text are vertically aligned with the other toolbar elements.
+  - Reset margins/padding on the label and value span within `#viewSliderContainer` to eliminate any vertical misalignment.
+
+### 9. Fixed new issues with Undefined username in header on profile pic change & TOTP Enabled not checked
+
+**openUserPanel**  
+
+- **Rewritten entirely with DOM APIs** instead of `innerHTML` for any user-supplied text to eliminates “DOM text reinterpreted as HTML” warnings.
+- **Default avatar fallback**: now uses `'/assets/default-avatar.png'` whenever `profile_picture` is empty.
+- **TOTP checkbox initial state** is now set from the `totp_enabled` value returned by the server.
+- **Modal title sync** on reopen now updates the `(username)` correctly (no more “undefined” until refresh).
+- **Re-sync on reopen**: background color, avatar, TOTP checkbox and language selector all update when reopen the panel.
+
+**updateAuthenticatedUI**  
+
+- **Username fix**: dropdown toggle now always uses `data.username` so the name never becomes `undefined` after uploading a picture.
+- **Profile URL update** via `fetchProfilePicture()` always writes into `localStorage` before rebuilding the header, ensuring avatar+name stay in sync instantly.
+- **Dropdown rebuild logic** tweaked to update the toggle’s innerHTML with both avatar and username on every call.
+
+**UserModel::getUser**  
+
+- Switched to `explode(':', $line, 4)` to the fourth “profile_picture” field without clobbering the TOTP secret.
+- **Strip trailing colons** from the stored URL (`rtrim($parts[3], ':')`) so we never send `…png:` back to the client.
+- Returns an array with both `'username'` and `'profile_picture'`, matching what `getCurrentUser.php` needs.
+
+### 10. setAttribute + encodeURI to avoid “DOM text reinterpreted as HTML” alerts
+
+### 11. Fix duplicated Upload & Folder cards if they were added to header and page was refreshed
+
+---
+
+## Changes 5/8/2025
+
+### Docker 🐳
+
+- Ensure `/var/www/config` exists and is owned by `www-data` (chmod 750) so that `start.sh`’s `sed -i` updates to `config.php` work reliably
+
+---
+
 ## Changes 5/8/2025 v1.3.3
 
 ### Enhancements

Dockerfile

@@ -51,6 +51,11 @@ COPY custom-php.ini /etc/php/8.3/apache2/conf.d/99-app-tuning.ini
 COPY --from=appsource /var/www /var/www
 COPY --from=composer /app/vendor /var/www/vendor
 
+# ── ensure config/ is writable by www-data so sed -i can work ──
+RUN mkdir -p /var/www/config \
+    && chown -R www-data:www-data /var/www/config \
+    && chmod 750 /var/www/config
+
 # Secure permissions: code read-only, only data dirs writable
 RUN chown -R root:www-data /var/www && \
     find /var/www -type d -exec chmod 755 {} \; && \

README.md

@@ -218,7 +218,7 @@ Areas where you can help: translations, bug fixes, UI improvements, or building
 
 ## Community and Support
 
-- **Reddit:** [r/selfhosted: FileRise Discussion](https://www.reddit.com/r/selfhosted/comments/1jl01pi/introducing_filerise_a_modern_selfhosted_file/) – (Announcement and user feedback thread).
+- **Reddit:** [r/selfhosted: FileRise Discussion](https://www.reddit.com/r/selfhosted/comments/1kfxo9y/filerise_v131_major_updates_sneak_peek_at_whats/) – (Announcement and user feedback thread).
 - **Unraid Forums:** [FileRise Support Thread](https://forums.unraid.net/topic/187337-support-filerise/) – for Unraid-specific support or issues.
 - **GitHub Discussions:** Use the Q&A category for any setup questions, and the Ideas category to suggest enhancements.
 

public/api/file/createFile.php

@@ -0,0 +1,15 @@
+<?php
+// public/api/file/createFile.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/FileController.php';
+
+header('Content-Type: application/json');
+if (empty($_SESSION['authenticated'])) {
+  http_response_code(401);
+  echo json_encode(['success'=>false,'error'=>'Unauthorized']);
+  exit;
+}
+
+$fc = new FileController();
+$fc->createFile();

public/api/profile/getCurrentUser.php

@@ -0,0 +1,15 @@
+<?php
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/models/UserModel.php';
+
+header('Content-Type: application/json');
+
+if (empty($_SESSION['authenticated'])) {
+    http_response_code(401);
+    echo json_encode(['error'=>'Unauthorized']);
+    exit;
+}
+
+$user = $_SESSION['username'];
+$data = UserModel::getUser($user);
+echo json_encode($data);

public/api/profile/uploadPicture.php

@@ -0,0 +1,17 @@
+<?php
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/UserController.php';
+
+// Always JSON, even on PHP notices
+header('Content-Type: application/json');
+
+try {
+    $userController = new UserController();
+    $userController->uploadPicture();
+} catch (\Throwable $e) {
+    http_response_code(500);
+    echo json_encode([
+      'success' => false,
+      'error'   => 'Exception: ' . $e->getMessage()
+    ]);
+}

public/css/styles.css

@@ -134,17 +134,27 @@ body.dark-mode header {
   background: none;
   border: none;
   cursor: pointer;
-  padding: 9px;
-  border-radius: 50%;
   color: #fff;
   transition: background-color 0.2s ease, box-shadow 0.2s ease;
 }
 
+.header-buttons button:not(#userDropdownToggle) {
+  border-radius: 50%;
+  padding: 9px;
+}
+
+#userDropdownToggle {
+  border-radius: 4px !important;
+  padding: 6px 10px !important;
+}
+
 .header-buttons button:hover {
   background-color: rgba(255, 255, 255, 0.2);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  color: #fff;
 }
 
+
 @media (max-width: 600px) {
   header {
     flex-direction: column;
@@ -838,6 +848,11 @@ body:not(.dark-mode) .material-icons.pauseResumeBtn:hover {
   background-color: #00796B;
 }
 
+#createFileBtn {
+  background-color: #007bff;
+  color: white;
+}
+
 #fileList button.edit-btn {
   background-color: #007bff;
   color: white;
@@ -955,6 +970,23 @@ body.dark-mode #fileList table tr {
   padding: 8px 10px !important;
 }
 
+:root {
+  --file-row-height: 48px; /* default, will be overwritten by your slider */
+}
+
+/* Force each <tr> to be exactly the var() height */
+#fileList table.table tbody tr {
+  height: var(--file-row-height) !important;
+}
+
+/* And force each <td> to match, with no extra padding or line-height */
+#fileList table.table tbody td {
+  height: var(--file-row-height) !important;
+  line-height: var(--file-row-height) !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  vertical-align: middle;
+}
 
 /* ===========================================================
    HEADINGS & FORM LABELS
@@ -1328,26 +1360,6 @@ body.dark-mode .image-preview-modal-content {
   border-color: #444;
 }
 
-.preview-btn,
-.download-btn,
-.rename-btn,
-.share-btn,
-.edit-btn {
-  display: flex;
-  align-items: center;
-  padding: 8px 12px;
-  justify-content: center;
-}
-
-.share-btn {
-  border: none;
-  color: white;
-  padding: 8px 12px;
-  cursor: pointer;
-  margin-left: 0px;
-  transition: background 0.3s;
-}
-
 .image-modal-img {
   max-width: 100%;
   max-height: 80vh;
@@ -2102,13 +2114,23 @@ body.dark-mode .header-drop-zone.drag-active {
   color: black;
 }
 @media only screen and (max-width: 600px) {
-  #fileSummary {
+  #fileSummary,
-      float: none !important;
+  #rowHeightSliderContainer,
-      margin: 0 auto !important;
+  #viewSliderContainer {
-      text-align: center !important;
+    float: none !important;
+    margin: 0 auto !important;
+    text-align: center !important;
+    display: block !important;
   }
 }
 
+#viewSliderContainer label,
+#viewSliderContainer span {
+  line-height: 1;
+  margin: 0;
+  padding: 0;
+}
+
 body.dark-mode #fileSummary {
   color: white;
 }
@@ -2166,3 +2188,92 @@ body.dark-mode .btn-icon:hover,
 body.dark-mode .btn-icon:focus {
   background: rgba(255, 255, 255, 0.1);
 }
+
+.user-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.user-dropdown .user-menu {
+  display: none;
+  position: absolute;
+  right: 0;
+  margin-top: 0.25rem;
+  background: var(--bs-body-bg, #fff);
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  min-width: 150px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+  z-index: 1000;
+}
+
+.user-dropdown .user-menu.show {
+  display: block;
+}
+
+.user-dropdown .user-menu .item {
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.user-dropdown .user-menu .item:hover {
+  background: #f5f5f5;
+}
+
+.user-dropdown .dropdown-caret {
+  border-top: 5px solid currentColor;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 0.25rem;
+}
+
+body.dark-mode .user-dropdown .user-menu {
+  background: #2c2c2c;
+  border-color: #444;
+}
+
+body.dark-mode .user-dropdown .user-menu .item {
+  color: #e0e0e0;
+}
+
+body.dark-mode .user-dropdown .user-menu .item:hover {
+  background: rgba(255,255,255,0.1);
+}
+
+.user-dropdown .dropdown-username {
+  margin: 0 8px;
+  font-weight: 500;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.folder-strip-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding: 8px 0;
+}
+.folder-strip-container .folder-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  width: 80px;
+  color: inherit; /* icon will pick up text color */
+  font-size: 0.85em;
+}
+.folder-strip-container .folder-item i.material-icons {
+  font-size: 28px;
+  margin-bottom: 4px;
+}
+
+.folder-strip-container .folder-item i.material-icons {
+  color: currentColor;
+}
+
+.folder-strip-container .folder-item:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}

public/index.html

@@ -11,13 +11,18 @@
   <meta name="share-url" content="">
   <style>
     /* hide the app shell until JS says otherwise */
-    .main-wrapper { display: none; }
+    .main-wrapper {
+      display: none;
+    }
 
     /* full-screen white overlay while we check auth */
     #loadingOverlay {
       position: fixed;
-      top: 0; left: 0; right: 0; bottom: 0;
+      top: 0;
-      background: var(--bg-color,#fff);
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: var(--bg-color, #fff);
       z-index: 9999;
       display: flex;
       align-items: center;
@@ -135,9 +140,6 @@
         <!-- Your header drop zone -->
         <div id="headerDropArea" class="header-drop-zone"></div>
         <div class="header-buttons">
-          <button id="logoutBtn" data-i18n-title="logout">
-            <i class="material-icons">exit_to_app</i>
-          </button>
           <button id="changePasswordBtn" data-i18n-title="change_password" style="display: none;">
             <i class="material-icons">vpn_key</i>
           </button>
@@ -387,8 +389,28 @@
             </div>
             <button id="downloadZipBtn" class="btn action-btn" style="display: none;" disabled
               data-i18n-key="download_zip">Download ZIP</button>
-            <button id="extractZipBtn" class="btn btn-sm btn-info" data-i18n-title="extract_zip"
+            <button id="extractZipBtn" class="btn action-btn btn-sm btn-info" data-i18n-title="extract_zip"
               data-i18n-key="extract_zip_button">Extract Zip</button>
+            <button id="createFileBtn" class="btn action-btn" data-i18n-key="create_file">
+              ${t('create_file')}
+            </button>
+            <!-- Create File Modal -->
+            <div id="createFileModal" class="modal" style="display:none;">
+              <div class="modal-content">
+                <h4 data-i18n-key="create_new_file">Create New File</h4>
+                <input
+                  type="text"
+                  id="createFileNameInput"
+                  class="form-control"
+                  placeholder="Enter filename…"
+                  data-i18n-placeholder="newfile_placeholder"
+                />
+                <div class="modal-footer" style="margin-top:1rem; text-align:right;">
+                  <button id="cancelCreateFile" class="btn btn-secondary" data-i18n-key="cancel">Cancel</button>
+                  <button id="confirmCreateFile" class="btn btn-primary" data-i18n-key="create">Create</button>
+                </div>
+              </div>
+            </div>
             <div id="downloadZipModal" class="modal" style="display:none;">
               <div class="modal-content">
                 <h4 data-i18n-key="download_zip_title">Download Selected Files as Zip</h4>
@@ -443,8 +465,7 @@
   <!-- Change Password, Add User, Remove User, Rename File, and Custom Confirm Modals (unchanged) -->
   <div id="changePasswordModal" class="modal" style="display:none;">
     <div class="modal-content" style="max-width:400px; margin:auto;">
-      <span id="closeChangePasswordModal"
+      <span id="closeChangePasswordModal" class="editor-close-btn">&times;</span>
-        class="editor-close-btn">&times;</span>
       <h3 data-i18n-key="change_password_title">Change Password</h3>
       <input type="password" id="oldPassword" class="form-control" data-i18n-placeholder="old_password"
         placeholder="Old Password" style="width:100%; margin: 5px 0;" />

public/js/adminPanel.js

@@ -3,7 +3,7 @@ import { loadAdminConfigFunc } from './auth.js';
 import { showToast, toggleVisibility, attachEnterKeyListener } from './domUtils.js';
 import { sendRequest } from './networkUtils.js';
 
-const version = "v1.3.3";
+const version = "v1.3.6";
 const adminTitle = `${t("admin_panel")} <small style="font-size:12px;color:gray;">${version}</small>`;
 
 // ————— Inject updated styles —————

public/js/auth.js

@@ -15,10 +15,11 @@ import {
   openUserPanel,
   openTOTPModal,
   closeTOTPModal,
-  setLastLoginData
+  setLastLoginData,
+  openApiModal
 } from './authModals.js';
 import { openAdminPanel } from './adminPanel.js';
-import { initializeApp } from './main.js';
+import { initializeApp, triggerLogout } from './main.js';
 
 // Production OIDC configuration (override via API as needed)
 const currentOIDCConfig = {
@@ -154,7 +155,7 @@ function updateLoginOptionsUIFromStorage() {
     disableFormLogin: localStorage.getItem("disableFormLogin") === "true",
     disableBasicAuth: localStorage.getItem("disableBasicAuth") === "true",
     disableOIDCLogin: localStorage.getItem("disableOIDCLogin") === "true",
-    authBypass:      localStorage.getItem("authBypass") === "true"
+    authBypass: localStorage.getItem("authBypass") === "true"
   });
 }
 
@@ -199,21 +200,48 @@ function insertAfter(newNode, referenceNode) {
   referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
 }
 
-function updateAuthenticatedUI(data) {
+async function fetchProfilePicture() {
-  document.getElementById('loadingOverlay').remove();
+  try {
+    const res = await fetch('/api/profile/getCurrentUser.php', {
+      credentials: 'include'
+    });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const info = await res.json();
+    let pic = info.profile_picture || '';
+    // --- take only what's after the *last* colon ---
+    const parts = pic.split(':');
+    pic = parts[parts.length - 1] || '';
+    // strip any stray leading colons
+    pic = pic.replace(/^:+/, '');
+    // ensure exactly one leading slash
+    if (pic && !pic.startsWith('/')) pic = '/' + pic;
+    return pic;
+  } catch (e) {
+    console.warn('fetchProfilePicture failed:', e);
+    return '';
+  }
+}
 
-  // show the wrapper (so the login form can be visible)
+export async function updateAuthenticatedUI(data) {
-  document.querySelector('.main-wrapper').style.display = '';
+  // Save latest auth data for later reuse
-  document.getElementById('loginForm').style.display = 'none';
+  window.__lastAuthData = data;
+
+  // 1) Remove loading overlay safely
+  const loading = document.getElementById('loadingOverlay');
+  if (loading) loading.remove();
+
+  // 2) Show main UI
+  document.querySelector('.main-wrapper').style.display    = '';
+  document.getElementById('loginForm').style.display       = 'none';
   toggleVisibility("loginForm", false);
   toggleVisibility("mainOperations", true);
   toggleVisibility("uploadFileForm", true);
   toggleVisibility("fileListContainer", true);
-  //attachEnterKeyListener("addUserModal", "saveUserBtn");
+  attachEnterKeyListener("removeUserModal",   "deleteUserBtn");
-  attachEnterKeyListener("removeUserModal", "deleteUserBtn");
+  attachEnterKeyListener("changePasswordModal","saveNewPasswordBtn");
-  attachEnterKeyListener("changePasswordModal", "saveNewPasswordBtn");
   document.querySelector(".header-buttons").style.visibility = "visible";
 
+  // 3) Persist auth flags (unchanged)
   if (typeof data.totp_enabled !== "undefined") {
     localStorage.setItem("userTOTPEnabled", data.totp_enabled ? "true" : "false");
   }
@@ -221,64 +249,156 @@ function updateAuthenticatedUI(data) {
     localStorage.setItem("username", data.username);
   }
   if (typeof data.folderOnly !== "undefined") {
-    localStorage.setItem("folderOnly", data.folderOnly ? "true" : "false");
+    localStorage.setItem("folderOnly",   data.folderOnly   ? "true" : "false");
-    localStorage.setItem("readOnly", data.readOnly ? "true" : "false");
+    localStorage.setItem("readOnly",     data.readOnly     ? "true" : "false");
-    localStorage.setItem("disableUpload", data.disableUpload ? "true" : "false");
+    localStorage.setItem("disableUpload",data.disableUpload? "true" : "false");
   }
 
+  // 4) Fetch up-to-date profile picture — ALWAYS overwrite localStorage
+  const profilePicUrl = await fetchProfilePicture();
+  localStorage.setItem("profilePicUrl", profilePicUrl);
+
+  // 5) Build / update header buttons
   const headerButtons = document.querySelector(".header-buttons");
-  const firstButton = headerButtons.firstElementChild;
+  const firstButton   = headerButtons.firstElementChild;
 
+  // a) restore-from-trash for admins
   if (data.isAdmin) {
-    let restoreBtn = document.getElementById("restoreFilesBtn");
+    let r = document.getElementById("restoreFilesBtn");
-    if (!restoreBtn) {
+    if (!r) {
-      restoreBtn = document.createElement("button");
+      r = document.createElement("button");
-      restoreBtn.id = "restoreFilesBtn";
+      r.id = "restoreFilesBtn";
-      restoreBtn.classList.add("btn", "btn-warning");
+      r.classList.add("btn","btn-warning");
-      restoreBtn.setAttribute("data-i18n-title", "trash_restore_delete");
+      r.setAttribute("data-i18n-title","trash_restore_delete");
-      restoreBtn.innerHTML = '<i class="material-icons">restore_from_trash</i>';
+      r.innerHTML = '<i class="material-icons">restore_from_trash</i>';
-      if (firstButton) insertAfter(restoreBtn, firstButton);
+      if (firstButton) insertAfter(r, firstButton);
-      else headerButtons.appendChild(restoreBtn);
+      else headerButtons.appendChild(r);
-    }
-    restoreBtn.style.display = "block";
-
-    let adminPanelBtn = document.getElementById("adminPanelBtn");
-    if (!adminPanelBtn) {
-      adminPanelBtn = document.createElement("button");
-      adminPanelBtn.id = "adminPanelBtn";
-      adminPanelBtn.classList.add("btn", "btn-info");
-      adminPanelBtn.setAttribute("data-i18n-title", "admin_panel");
-      adminPanelBtn.innerHTML = '<i class="material-icons">admin_panel_settings</i>';
-      insertAfter(adminPanelBtn, restoreBtn);
-      adminPanelBtn.addEventListener("click", openAdminPanel);
-    } else {
-      adminPanelBtn.style.display = "block";
     }
+    r.style.display = "block";
   } else {
-    const restoreBtn = document.getElementById("restoreFilesBtn");
+    const r = document.getElementById("restoreFilesBtn");
-    if (restoreBtn) restoreBtn.style.display = "none";
+    if (r) r.style.display = "none";
-    const adminPanelBtn = document.getElementById("adminPanelBtn");
-    if (adminPanelBtn) adminPanelBtn.style.display = "none";
   }
 
-  if (window.location.hostname !== "demo.filerise.net") {
+  // b) admin panel button only on demo.filerise.net
-    let userPanelBtn = document.getElementById("userPanelBtn");
+  if (data.isAdmin && window.location.hostname === "demo.filerise.net") {
-    if (!userPanelBtn) {
+    let a = document.getElementById("adminPanelBtn");
-      userPanelBtn = document.createElement("button");
+    if (!a) {
-      userPanelBtn.id = "userPanelBtn";
+      a = document.createElement("button");
-      userPanelBtn.classList.add("btn", "btn-user");
+      a.id = "adminPanelBtn";
-      userPanelBtn.setAttribute("data-i18n-title", "user_panel");
+      a.classList.add("btn","btn-info");
-      userPanelBtn.innerHTML = '<i class="material-icons">account_circle</i>';
+      a.setAttribute("data-i18n-title","admin_panel");
+      a.innerHTML = '<i class="material-icons">admin_panel_settings</i>';
+      insertAfter(a, document.getElementById("restoreFilesBtn"));
+      a.addEventListener("click", openAdminPanel);
+    }
+    a.style.display = "block";
+  } else {
+    const a = document.getElementById("adminPanelBtn");
+    if (a) a.style.display = "none";
+  }
+
+  // c) user dropdown on non-demo
+  if (window.location.hostname !== "demo.filerise.net") {
+    let dd = document.getElementById("userDropdown");
+
+    // choose icon *or* img
+    const avatarHTML = profilePicUrl
+      ? `<img src="${profilePicUrl}" style="width:24px;height:24px;border-radius:50%;vertical-align:middle;">`
+      : `<i class="material-icons">account_circle</i>`;
+
+    // fallback username if missing
+    const usernameText = data.username 
+      || localStorage.getItem("username") 
+      || "";
+
+    if (!dd) {
+      dd = document.createElement("div");
+      dd.id    = "userDropdown";
+      dd.classList.add("user-dropdown");
+
+      // toggle button
+      const toggle = document.createElement("button");
+      toggle.id    = "userDropdownToggle";
+      toggle.classList.add("btn","btn-user");
+      toggle.setAttribute("title", t("user_settings"));
+      toggle.innerHTML = `
+        ${avatarHTML}
+        <span class="dropdown-username">${usernameText}</span>
+        <span class="dropdown-caret"></span>
+      `;
+      dd.append(toggle);
+
+      // menu
+      const menu = document.createElement("div");
+      menu.classList.add("user-menu");
+      menu.innerHTML = `
+        <div class="item" id="menuUserPanel">
+          <i class="material-icons folder-icon">person</i> ${t("user_panel")}
+        </div>
+        ${data.isAdmin ? `
+        <div class="item" id="menuAdminPanel">
+          <i class="material-icons folder-icon">admin_panel_settings</i> ${t("admin_panel")}
+        </div>` : ''}
+        <div class="item" id="menuApiDocs">
+          <i class="material-icons folder-icon">description</i> ${t("api_docs")}
+        </div>
+        <div class="item" id="menuLogout">
+          <i class="material-icons folder-icon">logout</i> ${t("logout")}
+        </div>
+      `;
+      dd.append(menu);
+
+      // insert
+      const dm = document.getElementById("darkModeToggle");
+      if (dm) insertAfter(dd, dm);
+      else if (firstButton) insertAfter(dd, firstButton);
+      else headerButtons.appendChild(dd);
+
+      // open/close
+      toggle.addEventListener("click", e => {
+        e.stopPropagation();
+        menu.classList.toggle("show");
+      });
+      document.addEventListener("click", () => menu.classList.remove("show"));
+
+      // actions
+      document.getElementById("menuUserPanel")
+        .addEventListener("click", () => {
+          menu.classList.remove("show");
+          openUserPanel();
+        });
+      if (data.isAdmin) {
+        document.getElementById("menuAdminPanel")
+          .addEventListener("click", () => {
+            menu.classList.remove("show");
+            openAdminPanel();
+          });
+      }
+      document.getElementById("menuApiDocs")
+        .addEventListener("click", () => {
+          menu.classList.remove("show");
+          openApiModal();
+        });
+      document.getElementById("menuLogout")
+        .addEventListener("click", () => {
+          menu.classList.remove("show");
+          triggerLogout();
+        });
 
-      const adminBtn = document.getElementById("adminPanelBtn");
-      if (adminBtn) insertAfter(userPanelBtn, adminBtn);
-      else if (firstButton) insertAfter(userPanelBtn, firstButton);
-      else headerButtons.appendChild(userPanelBtn);
-      userPanelBtn.addEventListener("click", openUserPanel);
     } else {
-      userPanelBtn.style.display = "block";
+      // update avatar & username only
+      const tog = dd.querySelector("#userDropdownToggle");
+      tog.innerHTML = `
+        ${avatarHTML}
+        <span class="dropdown-username">${usernameText}</span>
+        <span class="dropdown-caret"></span>
+      `;
+      dd.style.display = "inline-block";
     }
   }
+
+  // 6) Finalize
   initializeApp();
   applyTranslations();
   updateItemsPerPageSelect();
@@ -289,7 +409,8 @@ function checkAuthentication(showLoginToast = true) {
   return sendRequest("/api/auth/checkAuth.php")
     .then(data => {
       if (data.setup) {
-        document.getElementById('loadingOverlay').remove();
+        const overlay = document.getElementById('loadingOverlay');
+        if (overlay) overlay.remove();
 
         // show the wrapper (so the login form can be visible)
         document.querySelector('.main-wrapper').style.display = '';
@@ -322,13 +443,14 @@ function checkAuthentication(showLoginToast = true) {
         updateAuthenticatedUI(data);
         return data;
       } else {
-        document.getElementById('loadingOverlay').remove();
+        const overlay = document.getElementById('loadingOverlay');
+        if (overlay) overlay.remove();
 
         // show the wrapper (so the login form can be visible)
         document.querySelector('.main-wrapper').style.display = '';
         document.getElementById('loginForm').style.display = '';
         if (showLoginToast) showToast("Please log in to continue.");
-        toggleVisibility("loginForm", ! (localStorage.getItem("authBypass")==="true"));
+        toggleVisibility("loginForm", !(localStorage.getItem("authBypass") === "true"));
         toggleVisibility("mainOperations", false);
         toggleVisibility("uploadFileForm", false);
         toggleVisibility("fileListContainer", false);

public/js/authModals.js

@@ -1,8 +1,7 @@
 import { showToast, toggleVisibility, attachEnterKeyListener } from './domUtils.js';
 import { sendRequest } from './networkUtils.js';
 import { t, applyTranslations, setLocale } from './i18n.js';
-import { loadAdminConfigFunc } from './auth.js';
+import { loadAdminConfigFunc, updateAuthenticatedUI } from './auth.js';
-
 
 let lastLoginData = null;
 export function setLastLoginData(data) {
@@ -60,14 +59,11 @@ export function openTOTPLoginModal() {
       const totpSection = document.getElementById("totpSection");
       const recoverySection = document.getElementById("recoverySection");
       const toggleLink = this;
-
       if (recoverySection.style.display === "none") {
-        // Switch to recovery
         totpSection.style.display = "none";
         recoverySection.style.display = "block";
         toggleLink.textContent = t("use_totp_code_instead");
       } else {
-        // Switch back to TOTP
         recoverySection.style.display = "none";
         totpSection.style.display = "block";
         toggleLink.textContent = t("use_recovery_code_instead");
@@ -93,7 +89,6 @@ export function openTOTPLoginModal() {
         .then(res => res.json())
         .then(json => {
           if (json.status === "ok") {
-            // recovery succeeded → finalize login
             window.location.href = "/index.html";
           } else {
             showToast(json.message || t("recovery_code_verification_failed"));
@@ -107,17 +102,11 @@ export function openTOTPLoginModal() {
     // TOTP submission
     const totpInput = document.getElementById("totpLoginInput");
     totpInput.focus();
-
     totpInput.addEventListener("input", async function () {
       const code = this.value.trim();
-      if (code.length !== 6) {
+      if (code.length !== 6) return;
 
-        return;
+      const tokenRes = await fetch("/api/auth/token.php", { credentials: "include" });
-      }
-
-      const tokenRes = await fetch("/api/auth/token.php", {
-        credentials: "include"
-      });
       if (!tokenRes.ok) {
         showToast(t("totp_verification_failed"));
         return;
@@ -144,7 +133,6 @@ export function openTOTPLoginModal() {
       } else {
         showToast(t("totp_verification_failed"));
       }
-
       this.value = "";
       totpLoginModal.style.display = "flex";
       this.focus();
@@ -160,153 +148,279 @@ export function openTOTPLoginModal() {
   }
 }
 
-export function openUserPanel() {
+/**
-  const username = localStorage.getItem("username") || "User";
+ * Fetch current user info (username, profile_picture, totp_enabled)
-  let userPanelModal = document.getElementById("userPanelModal");
+ */
-  const isDarkMode = document.body.classList.contains("dark-mode");
+async function fetchCurrentUser() {
-  const overlayBackground = isDarkMode ? "rgba(0,0,0,0.7)" : "rgba(0,0,0,0.3)";
+  try {
-  const modalContentStyles = `
+    const res = await fetch('/api/profile/getCurrentUser.php', {
-    background: ${isDarkMode ? "#2c2c2c" : "#fff"};
+      credentials: 'include'
-    color: ${isDarkMode ? "#e0e0e0" : "#000"};
+    });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    return await res.json();
+  } catch (e) {
+    console.warn('fetchCurrentUser failed:', e);
+    return {};
+  }
+}
+
+/**
+ * Normalize any profile‐picture URL:
+ *  - strip leading colons
+ *  - ensure exactly one leading slash
+ */
+function normalizePicUrl(raw) {
+  if (!raw) return '';
+  // take only what's after the last colon
+  const parts = raw.split(':');
+  let pic = parts[parts.length - 1];
+  // strip any stray colons
+  pic = pic.replace(/^:+/, '');
+  // ensure leading slash
+  if (pic && !pic.startsWith('/')) pic = '/' + pic;
+  return pic;
+}
+
+export async function openUserPanel() {
+  // 1) load data
+  const { username = 'User', profile_picture = '', totp_enabled = false } = await fetchCurrentUser();
+  const raw = profile_picture;
+  const picUrl = normalizePicUrl(raw) || '/assets/default-avatar.png';
+
+  // 2) dark‐mode helpers
+  const isDark = document.body.classList.contains('dark-mode');
+  const overlayBg = isDark ? 'rgba(0,0,0,0.7)' : 'rgba(0,0,0,0.3)';
+  const contentStyle = `
+    background: ${isDark ? '#2c2c2c' : '#fff'};
+    color:      ${isDark ? '#e0e0e0' : '#000'};
     padding: 20px;
-    max-width: 600px;
+    max-width: 600px; width:90%;
-    width: 90%;
     border-radius: 8px;
-    overflow-y: auto;
+    overflow-y: auto; max-height: 500px;
-    overflow-x: hidden;
+    border: ${isDark ? '1px solid #444' : '1px solid #ccc'};
-    max-height: 383px !important;
-    flex-shrink: 0 !important;
-    scrollbar-gutter: stable both-edges;
-    border: ${isDarkMode ? "1px solid #444" : "1px solid #ccc"};
     box-sizing: border-box;
-    transition: none;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
   `;
-  const savedLanguage = localStorage.getItem("language") || "en";
 
-  if (!userPanelModal) {
+  // 3) create or reuse modal
-    userPanelModal = document.createElement("div");
+  let modal = document.getElementById('userPanelModal');
-    userPanelModal.id = "userPanelModal";
+  if (!modal) {
-    userPanelModal.style.cssText = `
+    // overlay
-      position: fixed;
+    modal = document.createElement('div');
-      top: 0; right: 0; bottom: 0; left: 0;
+    modal.id = 'userPanelModal';
-      background-color: ${overlayBackground};
+    Object.assign(modal.style, {
-      display: flex;
+      position: 'fixed',
-      justify-content: center;
+      top: '0',
-      align-items: center;
+      left: '0',
-      z-index: 1000;
+      right: '0',
-      overflow: hidden;
+      bottom: '0',
+      background: overlayBg,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      zIndex: '1000',
+    });
+
+    // content container
+    const content = document.createElement('div');
+    content.className = 'modal-content';
+    content.style.cssText = contentStyle;
+
+    // close button
+    const closeBtn = document.createElement('span');
+    closeBtn.id = 'closeUserPanel';
+    closeBtn.className = 'editor-close-btn';
+    closeBtn.textContent = '×';
+    closeBtn.addEventListener('click', () => modal.style.display = 'none');
+    content.appendChild(closeBtn);
+
+    // avatar + picker
+    const avatarWrapper = document.createElement('div');
+    avatarWrapper.style.cssText = 'text-align:center; margin-bottom:20px;';
+    const avatarInner = document.createElement('div');
+    avatarInner.style.cssText = 'position:relative; width:80px; height:80px; margin:0 auto;';
+    const img = document.createElement('img');
+    img.id = 'profilePicPreview';
+    img.src = picUrl;
+    img.alt = 'Profile Picture';
+    img.style.cssText = 'width:100%; height:100%; border-radius:50%; object-fit:cover;';
+    avatarInner.appendChild(img);
+    const label = document.createElement('label');
+    label.htmlFor = 'profilePicInput';
+    label.style.cssText = `
+      position:absolute; bottom:0; right:0;
+      width:24px; height:24px;
+      background:rgba(0,0,0,0.6);
+      border-radius:50%; display:flex;
+      align-items:center; justify-content:center;
+      cursor:pointer;
     `;
-    userPanelModal.innerHTML = `
+    const editIcon = document.createElement('i');
-        <div class="modal-content user-panel-content" style="${modalContentStyles}">
+    editIcon.className = 'material-icons';
-        <span id="closeUserPanel" class="editor-close-btn">&times;</span>
+    editIcon.style.cssText = 'color:#fff; font-size:16px;';
-        <h3>${t("user_panel")} (${username})</h3>
+    editIcon.textContent = 'edit';
+    label.appendChild(editIcon);
+    avatarInner.appendChild(label);
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.id = 'profilePicInput';
+    fileInput.accept = 'image/*';
+    fileInput.style.display = 'none';
+    avatarInner.appendChild(fileInput);
+    avatarWrapper.appendChild(avatarInner);
+    content.appendChild(avatarWrapper);
 
-        <button type="button" id="openChangePasswordModalBtn" class="btn btn-primary" style="margin-bottom: 15px;">
+    // title
-          ${t("change_password")}
+    const title = document.createElement('h3');
-        </button>
+    title.style.cssText = 'text-align:center; margin-bottom:20px;';
+    title.textContent = `${t('user_panel')} (${username})`;
+    content.appendChild(title);
 
-        <fieldset style="margin-bottom: 15px;">
+    // change password btn
-          <legend>${t("totp_settings")}</legend>
+    const pwdBtn = document.createElement('button');
-          <div class="form-group">
+    pwdBtn.id = 'openChangePasswordModalBtn';
-            <label for="userTOTPEnabled">${t("enable_totp")}:</label>
+    pwdBtn.className = 'btn btn-primary';
-            <input type="checkbox" id="userTOTPEnabled" style="vertical-align: middle;" />
+    pwdBtn.style.marginBottom = '15px';
-          </div>
+    pwdBtn.textContent = t('change_password');
-        </fieldset>
+    pwdBtn.addEventListener('click', () => {
-
+      document.getElementById('changePasswordModal').style.display = 'block';
-        <fieldset style="margin-bottom: 15px;">
-          <legend>${t("language")}</legend>
-          <div class="form-group">
-            <label for="languageSelector">${t("select_language")}:</label>
-            <select id="languageSelector">
-              <option value="en">${t("english")}</option>
-              <option value="es">${t("spanish")}</option>
-              <option value="fr">${t("french")}</option>
-              <option value="de">${t("german")}</option>
-            </select>
-          </div>
-        </fieldset>
-
-        <!-- New API Docs link -->
-        <div style="margin-bottom: 15px;">
-          <button type="button" id="openApiModalBtn" class="btn btn-secondary">
-              ${t("api_docs") || "API Docs"}
-          </button>
-        </div>
-      </div>
-    `;
-    document.body.appendChild(userPanelModal);
-
-    const apiModal = document.createElement("div");
-    apiModal.id = "apiModal";
-    apiModal.style.cssText = `
-  position: fixed; top:0; left:0; width:100vw; height:100vh;
-  background: rgba(0,0,0,0.8); z-index: 4000; display:none;
-  align-items: center; justify-content: center;
-`;
-
-// api.php
-apiModal.innerHTML = `
-  <div style="position:relative; width:90vw; height:90vh; background:#fff; border-radius:8px; overflow:hidden;">
-    <div class="editor-close-btn" id="closeApiModal">&times;</div>
-    <iframe src="api.php" style="width:100%;height:100%;border:none;"></iframe>
-  </div>
-`;
-
-    document.body.appendChild(apiModal);
-
-    document.getElementById("openApiModalBtn").addEventListener("click", () => {
-      apiModal.style.display = "flex";
-    });
-    document.getElementById("closeApiModal").addEventListener("click", () => {
-      apiModal.style.display = "none";
     });
+    content.appendChild(pwdBtn);
 
-    // Handlers…
+    // TOTP fieldset
-    document.getElementById("closeUserPanel").addEventListener("click", () => {
+    const totpFs = document.createElement('fieldset');
-      userPanelModal.style.display = "none";
+    totpFs.style.marginBottom = '15px';
-    });
+    const totpLegend = document.createElement('legend');
-    document.getElementById("openChangePasswordModalBtn").addEventListener("click", () => {
+    totpLegend.textContent = t('totp_settings');
-      document.getElementById("changePasswordModal").style.display = "block";
+    totpFs.appendChild(totpLegend);
-    });
+    const totpLabel = document.createElement('label');
-
+    totpLabel.style.cursor = 'pointer';
-
+    const totpCb = document.createElement('input');
-    // TOTP checkbox
+    totpCb.type = 'checkbox';
-    const totpCheckbox = document.getElementById("userTOTPEnabled");
+    totpCb.id = 'userTOTPEnabled';
-    totpCheckbox.checked = localStorage.getItem("userTOTPEnabled") === "true";
+    totpCb.style.verticalAlign = 'middle';
-    totpCheckbox.addEventListener("change", function () {
+    totpCb.checked = totp_enabled;
-      localStorage.setItem("userTOTPEnabled", this.checked ? "true" : "false");
+    totpCb.addEventListener('change', async function () {
-      fetch("/api/updateUserPanel.php", {
+      const resp = await fetch('/api/updateUserPanel.php', {
-        method: "POST",
+        method: 'POST', credentials: 'include',
-        credentials: "include",
+        headers: {
-        headers: { "Content-Type": "application/json", "X-CSRF-Token": window.csrfToken },
+          'Content-Type': 'application/json',
+          'X-CSRF-Token': window.csrfToken
+        },
         body: JSON.stringify({ totp_enabled: this.checked })
-      })
+      });
-        .then(r => r.json())
+      const js = await resp.json();
-        .then(result => {
+      if (!js.success) showToast(js.error || t('error_updating_totp_setting'));
-          if (!result.success) showToast(t("error_updating_totp_setting") + ": " + result.error);
+      else if (this.checked) openTOTPModal();
-          else if (this.checked) openTOTPModal();
-        })
-        .catch(() => showToast(t("error_updating_totp_setting")));
     });
+    totpLabel.appendChild(totpCb);
+    totpLabel.append(` ${t('enable_totp')}`);
+    totpFs.appendChild(totpLabel);
+    content.appendChild(totpFs);
 
-    // Language selector
+    // language fieldset
-    const languageSelector = document.getElementById("languageSelector");
+    const langFs = document.createElement('fieldset');
-    languageSelector.value = savedLanguage;
+    langFs.style.marginBottom = '15px';
-    languageSelector.addEventListener("change", function () {
+    const langLegend = document.createElement('legend');
-      localStorage.setItem("language", this.value);
+    langLegend.textContent = t('language');
+    langFs.appendChild(langLegend);
+    const langSel = document.createElement('select');
+    langSel.id = 'languageSelector';
+    langSel.className = 'form-select';
+    ['en', 'es', 'fr', 'de'].forEach(code => {
+      const opt = document.createElement('option');
+      opt.value = code;
+      opt.textContent = t(code === 'en' ? 'english' : code === 'es' ? 'spanish' : code === 'fr' ? 'french' : 'german');
+      langSel.appendChild(opt);
+    });
+    langSel.value = localStorage.getItem('language') || 'en';
+    langSel.addEventListener('change', function () {
+      localStorage.setItem('language', this.value);
       setLocale(this.value);
       applyTranslations();
     });
+    langFs.appendChild(langSel);
+    content.appendChild(langFs);
+
+    // --- Display fieldset: “Show folders above files” ---
+    const dispFs = document.createElement('fieldset');
+    dispFs.style.marginBottom = '15px';
+    const dispLegend = document.createElement('legend');
+    dispLegend.textContent = t('display');
+    dispFs.appendChild(dispLegend);
+    const dispLabel = document.createElement('label');
+    dispLabel.style.cursor = 'pointer';
+    const dispCb = document.createElement('input');
+    dispCb.type = 'checkbox';
+    dispCb.id = 'showFoldersInList';
+    dispCb.style.verticalAlign = 'middle';
+    const stored = localStorage.getItem('showFoldersInList');
+    dispCb.checked = stored === null ? true : stored === 'true';
+    dispLabel.appendChild(dispCb);
+    dispLabel.append(` ${t('show_folders_above_files')}`);
+    dispFs.appendChild(dispLabel);
+    content.appendChild(dispFs);
+
+    dispCb.addEventListener('change', () => {
+      window.showFoldersInList = dispCb.checked;
+      localStorage.setItem('showFoldersInList', dispCb.checked);
+      // re‐load the entire file list (and strip) in one go:
+      loadFileList(window.currentFolder);
+    });
+
+    // wire up image‐input change
+    fileInput.addEventListener('change', async function () {
+      const f = this.files[0];
+      if (!f) return;
+      // preview immediately
+      // #nosec
+      img.src = URL.createObjectURL(f);
+      const blobUrl = URL.createObjectURL(f);
+      // use setAttribute + encodeURI to avoid “DOM text reinterpreted as HTML” alerts
+      img.setAttribute('src', encodeURI(blobUrl));
+      // upload
+      const fd = new FormData();
+      fd.append('profile_picture', f);
+      try {
+        const res = await fetch('/api/profile/uploadPicture.php', {
+          method: 'POST', credentials: 'include',
+          headers: { 'X-CSRF-Token': window.csrfToken },
+          body: fd
+        });
+        const text = await res.text();
+        const js = JSON.parse(text || '{}');
+        if (!res.ok) {
+          showToast(js.error || t('error_updating_picture'));
+          return;
+        }
+        const newUrl = normalizePicUrl(js.url);
+        img.src = newUrl;
+        localStorage.setItem('profilePicUrl', newUrl);
+        updateAuthenticatedUI(window.__lastAuthData || {});
+        showToast(t('profile_picture_updated'));
+      } catch (e) {
+        console.error(e);
+        showToast(t('error_updating_picture'));
+      }
+    });
+
+    // finalize
+    modal.appendChild(content);
+    document.body.appendChild(modal);
   } else {
-    // Update colors if already exists
+    // reuse on reopen
-    userPanelModal.style.backgroundColor = overlayBackground;
+    Object.assign(modal.style, { background: overlayBg });
-    const modalContent = userPanelModal.querySelector(".modal-content");
+    const content = modal.querySelector('.modal-content');
-    modalContent.style.background = isDarkMode ? "#2c2c2c" : "#fff";
+    content.style.cssText = contentStyle;
-    modalContent.style.color = isDarkMode ? "#e0e0e0" : "#000";
+    modal.querySelector('#profilePicPreview').src = picUrl || '/assets/default-avatar.png';
-    modalContent.style.border = isDarkMode ? "1px solid #444" : "1px solid #ccc";
+    modal.querySelector('#userTOTPEnabled').checked = totp_enabled;
+    modal.querySelector('#languageSelector').value = localStorage.getItem('language') || 'en';
+    modal.querySelector('h3').textContent = `${t('user_panel')} (${username})`;
   }
 
-  userPanelModal.style.display = "flex";
+  // show
+  modal.style.display = 'flex';
 }
 
 function showRecoveryCodeModal(recoveryCode) {
@@ -314,26 +428,21 @@ function showRecoveryCodeModal(recoveryCode) {
   recoveryModal.id = "recoveryModal";
   recoveryModal.style.cssText = `
     position: fixed;
-    top: 0;
+    top: 0; left: 0;
-    left: 0;
+    width: 100vw; height: 100vh;
-    width: 100vw;
-    height: 100vh;
     background-color: rgba(0,0,0,0.3);
-    display: flex;
+    display: flex; justify-content: center; align-items: center;
-    justify-content: center;
-    align-items: center;
     z-index: 3200;
   `;
   recoveryModal.innerHTML = `
-    <div style="background: #fff; color: #000; padding: 20px; max-width: 400px; width: 90%; border-radius: 8px; text-align: center;">
+    <div style="background:#fff; color:#000; padding:20px; max-width:400px; width:90%; border-radius:8px; text-align:center;">
       <h3>${t("your_recovery_code")}</h3>
       <p>${t("please_save_recovery_code")}</p>
-      <code style="display: block; margin: 10px 0; font-size: 20px;">${recoveryCode}</code>
+      <code style="display:block; margin:10px 0; font-size:20px;">${recoveryCode}</code>
       <button type="button" id="closeRecoveryModal" class="btn btn-primary">${t("ok")}</button>
     </div>
   `;
   document.body.appendChild(recoveryModal);
-
   document.getElementById("closeRecoveryModal").addEventListener("click", () => {
     recoveryModal.remove();
   });
@@ -346,106 +455,54 @@ export function openTOTPModal() {
   const modalContentStyles = `
     background: ${isDarkMode ? "#2c2c2c" : "#fff"};
     color: ${isDarkMode ? "#e0e0e0" : "#000"};
-    padding: 20px;
+    padding: 20px; max-width:400px; width:90%; border-radius:8px; position:relative;
-    max-width: 400px;
-    width: 90%;
-    border-radius: 8px;
-    position: relative;
   `;
   if (!totpModal) {
     totpModal = document.createElement("div");
     totpModal.id = "totpModal";
     totpModal.style.cssText = `
-      position: fixed;
+      position: fixed; top:0; left:0; width:100vw; height:100vh;
-      top: 0;
+      background-color:${overlayBackground}; display:flex; justify-content:center; align-items:center;
-      left: 0;
+      z-index:3100;
-      width: 100vw;
-      height: 100vh;
-      background-color: ${overlayBackground};
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      z-index: 3100;
     `;
     totpModal.innerHTML = `
-    <div class="modal-content" style="${modalContentStyles}">
+      <div class="modal-content" style="${modalContentStyles}">
-      <span id="closeTOTPModal" class="editor-close-btn">&times;</span>
+        <span id="closeTOTPModal" class="editor-close-btn">&times;</span>
-      <h3>${t("totp_setup")}</h3>
+        <h3>${t("totp_setup")}</h3>
-      <p>${t("scan_qr_code")}</p>
+        <p>${t("scan_qr_code")}</p>
-      <!-- Create an image placeholder without the CSRF token in the src -->
+        <img id="totpQRCodeImage" src="" alt="TOTP QR Code" style="max-width:100%; height:auto; display:block; margin:0 auto;" />
-      <img id="totpQRCodeImage" src="" alt="TOTP QR Code" style="max-width: 100%; height: auto; display: block; margin: 0 auto;">
+        <br/>
-      <br/>
+        <p>${t("enter_totp_confirmation")}</p>
-      <p>${t("enter_totp_confirmation")}</p>
+        <input type="text" id="totpConfirmInput" maxlength="6" style="font-size:24px; text-align:center; width:100%; padding:10px;" placeholder="6-digit code" />
-      <input type="text" id="totpConfirmInput" maxlength="6" style="font-size:24px; text-align:center; width:100%; padding:10px;" placeholder="6-digit code" />
+        <br/><br/>
-      <br/><br/>
+        <button type="button" id="confirmTOTPBtn" class="btn btn-primary">${t("confirm")}</button>
-      <button type="button" id="confirmTOTPBtn" class="btn btn-primary">${t("confirm")}</button>
+      </div>
-    </div>
+    `;
-  `;
     document.body.appendChild(totpModal);
     loadTOTPQRCode();
-
+    document.getElementById("closeTOTPModal").addEventListener("click", () => closeTOTPModal(true));
-    document.getElementById("closeTOTPModal").addEventListener("click", () => {
-      closeTOTPModal(true);
-    });
-
     document.getElementById("confirmTOTPBtn").addEventListener("click", async function () {
       const code = document.getElementById("totpConfirmInput").value.trim();
-      if (code.length !== 6) {
+      if (code.length !== 6) { showToast(t("please_enter_valid_code")); return; }
-        showToast(t("please_enter_valid_code"));
+      const tokenRes = await fetch("/api/auth/token.php", { credentials: "include" });
-        return;
+      if (!tokenRes.ok) { showToast(t("error_verifying_totp_code")); return; }
-      }
+      window.csrfToken = (await tokenRes.json()).csrf_token;
-
-      const tokenRes = await fetch("/api/auth/token.php", {
-        credentials: "include"
-      });
-      if (!tokenRes.ok) {
-        showToast(t("error_verifying_totp_code"));
-        return;
-      }
-      const { csrf_token } = await tokenRes.json();
-      window.csrfToken = csrf_token;
-
       const verifyRes = await fetch("/api/totp_verify.php", {
-        method: "POST",
+        method: "POST", credentials: "include",
-        credentials: "include",
+        headers: { "Content-Type": "application/json", "X-CSRF-Token": window.csrfToken },
-        headers: {
-          "Content-Type": "application/json",
-          "X-CSRF-Token": window.csrfToken
-        },
         body: JSON.stringify({ totp_code: code })
       });
-
+      if (!verifyRes.ok) { showToast(t("totp_verification_failed")); return; }
-      if (!verifyRes.ok) {
-        showToast(t("totp_verification_failed"));
-        return;
-      }
       const result = await verifyRes.json();
-      if (result.status !== "ok") {
+      if (result.status !== "ok") { showToast(result.message || t("totp_verification_failed")); return; }
-        showToast(result.message || t("totp_verification_failed"));
-        return;
-      }
-
       showToast(t("totp_enabled_successfully"));
-
       const saveRes = await fetch("/api/totp_saveCode.php", {
-        method: "POST",
+        method: "POST", credentials: "include", headers: { "X-CSRF-Token": window.csrfToken }
-        credentials: "include",
-        headers: {
-          "X-CSRF-Token": window.csrfToken
-        }
       });
-      if (!saveRes.ok) {
+      if (!saveRes.ok) { showToast(t("error_generating_recovery_code")); closeTOTPModal(false); return; }
-        showToast(t("error_generating_recovery_code"));
-        closeTOTPModal(false);
-        return;
-      }
       const data = await saveRes.json();
-      if (data.status === "ok" && data.recoveryCode) {
+      if (data.status === "ok" && data.recoveryCode) showRecoveryCodeModal(data.recoveryCode);
-        showRecoveryCodeModal(data.recoveryCode);
+      else showToast(t("error_generating_recovery_code") + ": " + (data.message || t("unknown_error")));
-      } else {
-        showToast(t("error_generating_recovery_code") + ": " + (data.message || t("unknown_error")));
-      }
-
       closeTOTPModal(false);
     });
 
@@ -458,29 +515,18 @@ export function openTOTPModal() {
       }, 100);
     }
     attachEnterKeyListener("totpModal", "confirmTOTPBtn");
-
   } else {
     totpModal.style.display = "flex";
     totpModal.style.backgroundColor = overlayBackground;
     const modalContent = totpModal.querySelector(".modal-content");
     modalContent.style.background = isDarkMode ? "#2c2c2c" : "#fff";
     modalContent.style.color = isDarkMode ? "#e0e0e0" : "#000";
-
+    modalContent.style.border = isDarkMode ? "1px solid #444" : "1px solid #ccc";
-    // Clear any previous QR code src if needed and then load it:
-    const qrImg = document.getElementById("totpQRCodeImage");
-    if (qrImg) {
-      qrImg.src = "";
-    }
     loadTOTPQRCode();
-
+    const totpInput = document.getElementById("totpConfirmInput");
-    // Focus the input and attach enter key listener
+    if (totpInput) {
-    const totpConfirmInput = document.getElementById("totpConfirmInput");
+      totpInput.value = "";
-    if (totpConfirmInput) {
+      setTimeout(() => totpInput.focus(), 100);
-      totpConfirmInput.value = "";
-      setTimeout(() => {
-        const totpConfirmInput = document.getElementById("totpConfirmInput");
-        if (totpConfirmInput) totpConfirmInput.focus();
-      }, 100);
     }
     attachEnterKeyListener("totpModal", "confirmTOTPBtn");
   }
@@ -490,42 +536,31 @@ function loadTOTPQRCode() {
   fetch("/api/totp_setup.php", {
     method: "GET",
     credentials: "include",
-    headers: {
+    headers: { "X-CSRF-Token": window.csrfToken }
-      "X-CSRF-Token": window.csrfToken  // Send your CSRF token here
-    }
   })
-    .then(response => {
+    .then(res => {
-      if (!response.ok) {
+      if (!res.ok) throw new Error("Failed to fetch QR code: " + res.status);
-        throw new Error("Failed to fetch QR code. Status: " + response.status);
+      return res.blob();
-      }
-      return response.blob();
     })
     .then(blob => {
-      const imageURL = URL.createObjectURL(blob);
+      const url = URL.createObjectURL(blob);
-      const qrImg = document.getElementById("totpQRCodeImage");
+      document.getElementById("totpQRCodeImage").src = url;
-      if (qrImg) {
-        qrImg.src = imageURL;
-      }
     })
-    .catch(error => {
+    .catch(err => {
-      console.error("Error loading TOTP QR code:", error);
+      console.error(err);
       showToast(t("error_loading_qr_code"));
     });
 }
 
-// Updated closeTOTPModal function with a disable parameter
 export function closeTOTPModal(disable = true) {
   const totpModal = document.getElementById("totpModal");
   if (totpModal) totpModal.style.display = "none";
-
   if (disable) {
-    // Uncheck the Enable TOTP checkbox
     const totpCheckbox = document.getElementById("userTOTPEnabled");
     if (totpCheckbox) {
       totpCheckbox.checked = false;
       localStorage.setItem("userTOTPEnabled", "false");
     }
-    // Call endpoint to remove the TOTP secret from the user's record
     fetch("/api/totp_disable.php", {
       method: "POST",
       credentials: "include",
@@ -536,10 +571,36 @@ export function closeTOTPModal(disable = true) {
     })
       .then(r => r.json())
       .then(result => {
-        if (!result.success) {
+        if (!result.success) showToast(t("error_disabling_totp_setting") + ": " + result.error);
-          showToast(t("error_disabling_totp_setting") + ": " + result.error);
-        }
       })
-      .catch(() => { showToast(t("error_disabling_totp_setting")); });
+      .catch(() => showToast(t("error_disabling_totp_setting")));
   }
 }
+
+export function openApiModal() {
+  let apiModal = document.getElementById("apiModal");
+  if (!apiModal) {
+    // create the container exactly as you do now inside openUserPanel
+    apiModal = document.createElement("div");
+    apiModal.id = "apiModal";
+    apiModal.style.cssText = `
+      position: fixed; top:0; left:0; width:100vw; height:100vh;
+      background: rgba(0,0,0,0.8); z-index: 4000; display:none;
+      align-items: center; justify-content: center;
+    `;
+    apiModal.innerHTML = `
+      <div style="position:relative; width:90vw; height:90vh; background:#fff; border-radius:8px; overflow:hidden;">
+        <div class="editor-close-btn" id="closeApiModal">&times;</div>
+        <iframe src="api.php" style="width:100%;height:100%;border:none;"></iframe>
+      </div>
+    `;
+    document.body.appendChild(apiModal);
+
+    // wire up its close button
+    document.getElementById("closeApiModal").addEventListener("click", () => {
+      apiModal.style.display = "none";
+    });
+  }
+  // finally, show it
+  apiModal.style.display = "flex";
+}

public/js/domUtils.js

@@ -33,54 +33,66 @@ export function toggleAllCheckboxes(masterCheckbox) {
 export function updateFileActionButtons() {
   const fileCheckboxes = document.querySelectorAll("#fileList .file-checkbox");
   const selectedCheckboxes = document.querySelectorAll("#fileList .file-checkbox:checked");
+
+  const deleteBtn = document.getElementById("deleteSelectedBtn");
   const copyBtn = document.getElementById("copySelectedBtn");
   const moveBtn = document.getElementById("moveSelectedBtn");
-  const deleteBtn = document.getElementById("deleteSelectedBtn");
   const zipBtn = document.getElementById("downloadZipBtn");
   const extractZipBtn = document.getElementById("extractZipBtn");
+  const createBtn = document.getElementById("createFileBtn");
 
-   // keep the “select all” in sync ——
+  const anyFiles = fileCheckboxes.length > 0;
-   const master = document.getElementById("selectAll");
+  const anySelected = selectedCheckboxes.length > 0;
-   if (master) {
+  const anyZip = Array.from(selectedCheckboxes)
-     if (selectedCheckboxes.length === fileCheckboxes.length) {
+    .some(cb => cb.value.toLowerCase().endsWith(".zip"));
-       master.checked = true;
-       master.indeterminate = false;
-     } else if (selectedCheckboxes.length === 0) {
-       master.checked = false;
-       master.indeterminate = false;
-     } else {
-       master.checked = false;
-       master.indeterminate = true;
-     }
-   }
 
-  if (fileCheckboxes.length === 0) {
+  // — Select All checkbox sync (unchanged) —
-    if (copyBtn) copyBtn.style.display = "none";
+  const master = document.getElementById("selectAll");
-    if (moveBtn) moveBtn.style.display = "none";
+  if (master) {
-    if (deleteBtn) deleteBtn.style.display = "none";
+    if (selectedCheckboxes.length === fileCheckboxes.length) {
-    if (zipBtn) zipBtn.style.display = "none";
+      master.checked = true;
-    if (extractZipBtn) extractZipBtn.style.display = "none";
+      master.indeterminate = false;
-  } else {
+    } else if (selectedCheckboxes.length === 0) {
-    if (copyBtn) copyBtn.style.display = "inline-block";
+      master.checked = false;
-    if (moveBtn) moveBtn.style.display = "inline-block";
+      master.indeterminate = false;
-    if (deleteBtn) deleteBtn.style.display = "inline-block";
+    } else {
-    if (zipBtn) zipBtn.style.display = "inline-block";
+      master.checked = false;
-    if (extractZipBtn) extractZipBtn.style.display = "inline-block";
+      master.indeterminate = true;
-
-    const anySelected = selectedCheckboxes.length > 0;
-    if (copyBtn) copyBtn.disabled = !anySelected;
-    if (moveBtn) moveBtn.disabled = !anySelected;
-    if (deleteBtn) deleteBtn.disabled = !anySelected;
-    if (zipBtn) zipBtn.disabled = !anySelected;
-
-    if (extractZipBtn) {
-      // Enable only if at least one selected file ends with .zip (case-insensitive).
-      const anyZipSelected = Array.from(selectedCheckboxes).some(chk =>
-        chk.value.toLowerCase().endsWith(".zip")
-      );
-      extractZipBtn.disabled = !anyZipSelected;
     }
   }
+
+  // Delete / Copy / Move: only show when something is selected
+  if (deleteBtn) {
+    deleteBtn.style.display = anySelected ? "" : "none";
+  }
+  if (copyBtn) {
+    copyBtn.style.display = anySelected ? "" : "none";
+  }
+  if (moveBtn) {
+    moveBtn.style.display = anySelected ? "" : "none";
+  }
+
+  // Download ZIP: only show when something is selected
+  if (zipBtn) {
+    zipBtn.style.display = anySelected ? "" : "none";
+  }
+
+  // Extract ZIP: only show when a selected file is a .zip
+  if (extractZipBtn) {
+    extractZipBtn.style.display = anyZip ? "" : "none";
+  }
+
+  // Create File: only show when nothing is selected
+  if (createBtn) {
+    createBtn.style.display = anySelected ? "none" : "";
+  }
+
+  // Finally disable the ones that are shown but shouldn’t be clickable
+  if (deleteBtn) deleteBtn.disabled = !anySelected;
+  if (copyBtn) copyBtn.disabled = !anySelected;
+  if (moveBtn) moveBtn.disabled = !anySelected;
+  if (zipBtn) zipBtn.disabled = !anySelected;
+  if (extractZipBtn) extractZipBtn.disabled = !anyZip;
 }
 
 export function showToast(message, duration = 3000) {
@@ -178,9 +190,14 @@ export function buildFileTableRow(file, folderPath) {
     } else if (/\.(mp3|wav|m4a|ogg|flac|aac|wma|opus)$/i.test(file.name)) {
       previewIcon = `<i class="material-icons">audiotrack</i>`;
     }
-    previewButton = `<button class="btn btn-sm btn-info preview-btn" data-preview-url="${folderPath + encodeURIComponent(file.name)}?t=${Date.now()}" data-preview-name="${safeFileName}">
+    previewButton = `<button 
-                 ${previewIcon}
+                        type="button"
-               </button>`;
+                        class="btn btn-sm btn-info preview-btn" 
+                        data-preview-url="${folderPath + encodeURIComponent(file.name)}?t=${Date.now()}" 
+                        data-preview-name="${safeFileName}" 
+                        title="${t('preview')}">
+                       ${previewIcon}
+                     </button>`;
   }
 
   return `
@@ -194,19 +211,44 @@ export function buildFileTableRow(file, folderPath) {
     <td class="hide-small nowrap">${safeSize}</td>
     <td class="hide-small hide-medium nowrap">${safeUploader}</td>
     <td>
-      <div class="button-wrap" style="display: flex; justify-content: left; gap: 5px;">
+      <div class="btn-group btn-group-sm" role="group" aria-label="File actions">
-        <button type="button" class="btn btn-sm btn-success download-btn" data-download-name="${file.name}" data-download-folder="${file.folder || 'root'}" title="${t('download')}">
+        <button 
+          type="button" 
+          class="btn btn-sm btn-success download-btn" 
+          data-download-name="${file.name}" 
+          data-download-folder="${file.folder || 'root'}" 
+          title="${t('download')}">
           <i class="material-icons">file_download</i>
         </button>
+
         ${file.editable ? `
-          <button class="btn btn-sm edit-btn" data-edit-name="${file.name}" data-edit-folder="${file.folder || 'root'}" title="${t('edit')}">
+        <button 
-            <i class="material-icons">edit</i>
+          type="button" 
-          </button>
+          class="btn btn-sm btn-secondary edit-btn" 
-        ` : ""}
+          data-edit-name="${file.name}" 
+          data-edit-folder="${file.folder || 'root'}" 
+          title="${t('edit')}">
+          <i class="material-icons">edit</i>
+        </button>` : ""}
+
         ${previewButton}
-        <button class="btn btn-sm btn-warning rename-btn" data-rename-name="${file.name}" data-rename-folder="${file.folder || 'root'}" title="${t('rename')}">
+
+        <button 
+          type="button" 
+          class="btn btn-sm btn-warning rename-btn" 
+          data-rename-name="${file.name}" 
+          data-rename-folder="${file.folder || 'root'}" 
+          title="${t('rename')}">
           <i class="material-icons">drive_file_rename_outline</i>
         </button>
+        <!-- share -->
+       <button 
+         type="button"
+         class="btn btn-secondary btn-sm share-btn ms-1"
+         data-file="${safeFileName}"
+         title="${t('share')}">
+         <i class="material-icons">share</i>
+       </button>
       </div>
     </td>
   </tr>

public/js/dragAndDrop.js

@@ -32,23 +32,33 @@ export function loadSidebarOrder() {
     updateSidebarVisibility();
   }
   
-  // NEW: Load header order from localStorage.
+
   export function loadHeaderOrder() {
     const headerDropArea = document.getElementById('headerDropArea');
     if (!headerDropArea) return;
-    const orderStr = localStorage.getItem('headerOrder');
+  
-    if (orderStr) {
+    // 1) Clear out any icons that might already be in the drop area
-      const order = JSON.parse(orderStr);
+    headerDropArea.innerHTML = '';
-      if (order.length > 0) {
+  
-        order.forEach(id => {
+    // 2) Read the saved array (or empty array if invalid/missing)
-          const card = document.getElementById(id);
+    let stored;
-          // Only load if card is not already in header drop zone.
+    try {
-          if (card && card.parentNode.id !== 'headerDropArea') {
+      stored = JSON.parse(localStorage.getItem('headerOrder') || '[]');
-            insertCardInHeader(card, null);
+    } catch {
-          }
+      stored = [];
-        });
-      }
     }
+  
+    // 3) Deduplicate IDs
+    const uniqueIds = Array.from(new Set(stored));
+  
+    // 4) Re-insert exactly one icon per saved card ID
+    uniqueIds.forEach(id => {
+      const card = document.getElementById(id);
+      if (card) insertCardInHeader(card, null);
+    });
+  
+    // 5) Persist the cleaned, deduped list back to storage
+    localStorage.setItem('headerOrder', JSON.stringify(uniqueIds));
   }
   
   // Internal helper: update sidebar visibility based on its content.

public/js/fileActions.js

@@ -76,6 +76,72 @@ export function handleDownloadZipSelected(e) {
   }, 100);
 };
 
+export function handleCreateFileSelected(e) {
+  e.preventDefault(); e.stopImmediatePropagation();
+  const modal = document.getElementById('createFileModal');
+  modal.style.display = 'block';
+  setTimeout(() => {
+    const inp = document.getElementById('newFileCreateName');
+    if (inp) inp.focus();
+  }, 100);
+}
+
+/**
+ * Open the “New File” modal
+ */
+export function openCreateFileModal() {
+  const modal = document.getElementById('createFileModal');
+  const input = document.getElementById('createFileNameInput');
+  if (!modal || !input) {
+    console.error('Create-file modal or input not found');
+    return;
+  }
+  input.value = '';
+  modal.style.display = 'block';
+  setTimeout(() => input.focus(), 0);
+}
+
+
+export async function handleCreateFile(e) {
+  e.preventDefault();
+  const input = document.getElementById('createFileNameInput');
+  if (!input) return console.error('Create-file input missing');
+  const name = input.value.trim();
+  if (!name) {
+    showToast(t('newfile_placeholder'));  // or a more explicit error
+    return;
+  }
+
+  const folder = window.currentFolder || 'root';
+  try {
+    const res = await fetch('/api/file/createFile.php', {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Content-Type':'application/json',
+        'X-CSRF-Token': window.csrfToken
+      },
+      // ⚠️ must send `name`, not `filename`
+      body: JSON.stringify({ folder, name })
+    });
+    const js = await res.json();
+    if (!js.success) throw new Error(js.error);
+    showToast(t('file_created'));
+    loadFileList(folder);
+  } catch (err) {
+    showToast(err.message || t('error_creating_file'));
+  } finally {
+    document.getElementById('createFileModal').style.display = 'none';
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const cancel = document.getElementById('cancelCreateFile');
+  const confirm = document.getElementById('confirmCreateFile');
+  if (cancel)  cancel.addEventListener('click', () => document.getElementById('createFileModal').style.display = 'none');
+  if (confirm) confirm.addEventListener('click', handleCreateFile);
+});
+
 export function openDownloadModal(fileName, folder) {
   // Store file details globally for the download confirmation function.
   window.singleFileToDownload = fileName;
@@ -197,6 +263,49 @@ document.addEventListener("DOMContentLoaded", () => {
   const progressModal = document.getElementById("downloadProgressModal");
   const cancelZipBtn = document.getElementById("cancelDownloadZip");
   const confirmZipBtn = document.getElementById("confirmDownloadZip");
+  const cancelCreate = document.getElementById('cancelCreateFile');
+  
+  if (cancelCreate) {
+    cancelCreate.addEventListener('click', () => {
+      document.getElementById('createFileModal').style.display = 'none';
+    });
+  }
+
+  const confirmCreate = document.getElementById('confirmCreateFile');
+  if (confirmCreate) {
+    confirmCreate.addEventListener('click', async () => {
+      const name = document.getElementById('newFileCreateName').value.trim();
+      if (!name) {
+        showToast(t('please_enter_filename'));
+        return;
+      }
+      document.getElementById('createFileModal').style.display = 'none';
+      try {
+        const res = await fetch('/api/file/createFile.php', {
+          method: 'POST',
+          credentials: 'include',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-Token': window.csrfToken
+          },
+          body: JSON.stringify({
+            folder: window.currentFolder || 'root',
+            filename: name
+          })
+        });
+        const js = await res.json();
+        if (!res.ok || !js.success) {
+          throw new Error(js.error || t('error_creating_file'));
+        }
+        showToast(t('file_created_successfully'));
+        loadFileList(window.currentFolder);
+      } catch (err) {
+        console.error(err);
+        showToast(err.message || t('error_creating_file'));
+      }
+    });
+    attachEnterKeyListener('createFileModal','confirmCreateFile');
+  }
 
   // 1) Cancel button hides the name modal
   if (cancelZipBtn) {
@@ -553,8 +662,14 @@ export function initFileActions() {
     extractZipBtn.replaceWith(extractZipBtn.cloneNode(true));
     document.getElementById("extractZipBtn").addEventListener("click", handleExtractZipSelected);
   }
+  const createBtn = document.getElementById('createFileBtn');
+  if (createBtn) {
+    createBtn.replaceWith(createBtn.cloneNode(true));
+    document.getElementById('createFileBtn').addEventListener('click', openCreateFileModal);
+  }
 }
 
+
 // Hook up the single‐file download modal buttons
 document.addEventListener("DOMContentLoaded", () => {
   const cancelDownloadFileBtn = document.getElementById("cancelDownloadFile");

public/js/fileListView.js

@@ -16,6 +16,7 @@ import { t } from './i18n.js';
 import { bindFileListContextMenu } from './fileMenu.js';
 import { openDownloadModal } from './fileActions.js';
 import { openTagModal, openMultiTagModal } from './fileTags.js';
+import { getParentFolder, updateBreadcrumbTitle, setupBreadcrumbDelegation } from './folderManager.js';
 
 export let fileData = [];
 export let sortOrder = { column: "uploaded", ascending: true };
@@ -186,100 +187,226 @@ export function formatFolderName(folder) {
 window.toggleRowSelection = toggleRowSelection;
 window.updateRowHighlight = updateRowHighlight;
 
-/**
+export async function loadFileList(folderParam) {
- * --- FILE LIST & VIEW RENDERING ---
- */
-export function loadFileList(folderParam) {
     const folder = folderParam || "root";
     const fileListContainer = document.getElementById("fileList");
+    const actionsContainer   = document.getElementById("fileListActions");
 
+    // 1) show loader
     fileListContainer.style.visibility = "hidden";
     fileListContainer.innerHTML = "<div class='loader'>Loading files...</div>";
 
-    return fetch("/api/file/getFileList.php?folder=" + encodeURIComponent(folder) + "&recursive=1&t=" + new Date().getTime())
+    try {
-        .then(response => {
+        // 2) fetch files + folders in parallel
-            if (response.status === 401) {
+        const [filesRes, foldersRes] = await Promise.all([
-                showToast("Session expired. Please log in again.");
+            fetch(`/api/file/getFileList.php?folder=${encodeURIComponent(folder)}&recursive=1&t=${Date.now()}`),
-                window.location.href = "/api/auth/logout.php";
+            fetch(`/api/folder/getFolderList.php?folder=${encodeURIComponent(folder)}`)
-                throw new Error("Unauthorized");
+        ]);
-            }
-            return response.json();
-        })
-        .then(data => {
-            fileListContainer.innerHTML = ""; // Clear loading message.
-            if (data.files && Object.keys(data.files).length > 0) {
-                // If the returned "files" is an object instead of an array, transform it.
-                if (!Array.isArray(data.files)) {
-                    data.files = Object.entries(data.files).map(([name, meta]) => {
-                        meta.name = name;
-                        return meta;
-                    });
-                }
-                // Process each file – add computed properties.
-                data.files = data.files.map(file => {
-                    file.fullName = (file.path || file.name).trim().toLowerCase();
-                    file.editable = canEditFile(file.name);
-                    file.folder = folder;
-                    if (!file.type && /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(file.name)) {
-                        file.type = "image";
-                    }
-                    // OPTIONAL: For text documents, preload content (if available from backend)
-                    // Example: if (/\.txt|html|md|js|css|json|xml$/i.test(file.name)) { file.content = file.content || ""; }
-                    return file;
-                });
-                fileData = data.files;
 
-                // Update file summary.
+        if (filesRes.status === 401) {
-                const actionsContainer = document.getElementById("fileListActions");
+            window.location.href = "/api/auth/logout.php";
-                if (actionsContainer) {
+            throw new Error("Unauthorized");
-                    let summaryElem = document.getElementById("fileSummary");
+        }
-                    if (!summaryElem) {
+        const data      = await filesRes.json();
-                        summaryElem = document.createElement("div");
+        const folderRaw = await foldersRes.json();
-                        summaryElem.id = "fileSummary";
-                        summaryElem.style.float = "right";
-                        summaryElem.style.marginLeft = "auto";
-                        summaryElem.style.marginRight = "60px";
-                        summaryElem.style.fontSize = "0.9em";
-                        actionsContainer.appendChild(summaryElem);
-                    } else {
-                        summaryElem.style.display = "block";
-                    }
-                    summaryElem.innerHTML = buildFolderSummary(fileData);
-                }
 
-                // Render view based on the view mode.
+        // --- build ONLY the *direct* children of current folder ---
-                if (window.viewMode === "gallery") {
+        let subfolders = [];
-                    renderGalleryView(folder);
+        const hidden = new Set([ "profile_pics", "trash" ]);
-                    updateFileActionButtons();
+        if (Array.isArray(folderRaw)) {
-                } else {
+            const allPaths = folderRaw.map(item => item.folder ?? item);
-                    renderFileTable(folder);
+            const depth    = folder === "root" ? 1 : folder.split("/").length + 1;
-                }
+            subfolders = allPaths
-            } else {
+                .filter(p => {
-                fileListContainer.textContent = t("no_files_found");
+                    if (folder === "root") {
-                const summaryElem = document.getElementById("fileSummary");
+                        return p.indexOf("/") === -1;
-                if (summaryElem) {
+                    }
-                    summaryElem.style.display = "none";
+                    if (!p.startsWith(folder + "/")) return false;
-                }
+                    return p.split("/").length === depth;
-                updateFileActionButtons();
+                })
-            }
+                .map(p => ({ name: p.split("/").pop(), full: p }));
-            return data.files || [];
+        }
-        })
+        subfolders = subfolders.filter(sf => !hidden.has(sf.name));
-        .catch(error => {
+
-            console.error("Error loading file list:", error);
+        // 3) clear loader
-            if (error.message !== "Unauthorized") {
+        fileListContainer.innerHTML = "";
-                fileListContainer.textContent = "Error loading files.";
+
-            }
+        // 4) handle “no files” case
+        if (!data.files || Object.keys(data.files).length === 0) {
+            fileListContainer.textContent = t("no_files_found");
+
+            // hide summary
+            const summaryElem = document.getElementById("fileSummary");
+            if (summaryElem) summaryElem.style.display = "none";
+
+            // hide slider
+            const sliderContainer = document.getElementById("viewSliderContainer");
+            if (sliderContainer) sliderContainer.style.display = "none";
+
+            // hide folder strip
+            const strip = document.getElementById("folderStripContainer");
+            if (strip) strip.style.display = "none";
+
+            updateFileActionButtons();
             return [];
-        })
+        }
-        .finally(() => {
+
-            fileListContainer.style.visibility = "visible";
+        // 5) normalize files array
+        if (!Array.isArray(data.files)) {
+            data.files = Object.entries(data.files).map(([name, meta]) => {
+                meta.name = name;
+                return meta;
+            });
+        }
+        data.files = data.files.map(f => {
+            f.fullName = (f.path || f.name).trim().toLowerCase();
+            f.editable = canEditFile(f.name);
+            f.folder   = folder;
+            return f;
         });
+        fileData = data.files;
+
+        // 6) inject summary + slider
+        if (actionsContainer) {
+            // a) summary
+            let summaryElem = document.getElementById("fileSummary");
+            if (!summaryElem) {
+                summaryElem = document.createElement("div");
+                summaryElem.id = "fileSummary";
+                summaryElem.style.cssText = "float:right; margin:0 60px 0 auto; font-size:0.9em;";
+                actionsContainer.appendChild(summaryElem);
+            }
+            summaryElem.style.display = "block";
+            summaryElem.innerHTML = buildFolderSummary(fileData);
+
+            // b) slider
+            const viewMode = window.viewMode || "table";
+            let sliderContainer = document.getElementById("viewSliderContainer");
+            if (!sliderContainer) {
+                sliderContainer = document.createElement("div");
+                sliderContainer.id = "viewSliderContainer";
+                sliderContainer.style.cssText = "display:inline-flex; align-items:center; margin-right:auto; font-size:0.9em;";
+                actionsContainer.insertBefore(sliderContainer, summaryElem);
+            } else {
+                sliderContainer.style.display = "inline-flex";
+            }
+
+            if (viewMode === "gallery") {
+                const w = window.innerWidth;
+                let maxCols;
+                if   (w < 600)   maxCols = 1;
+                else if (w < 900)  maxCols = 2;
+                else if (w < 1200) maxCols = 4;
+                else               maxCols = 6;
+
+                const currentCols = Math.min(
+                    parseInt(localStorage.getItem("galleryColumns")||"3",10),
+                    maxCols
+                );
+
+                sliderContainer.innerHTML = `
+              <label for="galleryColumnsSlider" style="margin-right:8px;line-height:1;">
+                ${t("columns")}:
+              </label>
+              <input
+                type="range"
+                id="galleryColumnsSlider"
+                min="1"
+                max="${maxCols}"
+                value="${currentCols}"
+                style="vertical-align:middle;"
+              >
+              <span id="galleryColumnsValue" style="margin-left:6px;line-height:1;">${currentCols}</span>
+            `;
+                const gallerySlider = document.getElementById("galleryColumnsSlider");
+                const galleryValue  = document.getElementById("galleryColumnsValue");
+                gallerySlider.oninput = e => {
+                    const v = +e.target.value;
+                    localStorage.setItem("galleryColumns", v);
+                    galleryValue.textContent = v;
+                    document.querySelector(".gallery-container")
+                        ?.style.setProperty("grid-template-columns", `repeat(${v},1fr)`);
+                };
+            } else {
+                const currentHeight = parseInt(localStorage.getItem("rowHeight")||"48",10);
+                sliderContainer.innerHTML = `
+              <label for="rowHeightSlider" style="margin-right:8px;line-height:1;">
+                ${t("row_height")}:
+              </label>
+              <input type="range" id="rowHeightSlider" min="31" max="60" value="${currentHeight}" style="vertical-align:middle;">
+              <span id="rowHeightValue" style="margin-left:6px;line-height:1;">${currentHeight}px</span>
+            `;
+                const rowSlider = document.getElementById("rowHeightSlider");
+                const rowValue  = document.getElementById("rowHeightValue");
+                rowSlider.oninput = e => {
+                    const v = e.target.value;
+                    document.documentElement.style.setProperty("--file-row-height", v + "px");
+                    localStorage.setItem("rowHeight", v);
+                    rowValue.textContent = v + "px";
+                };
+            }
+        }
+
+        // 7) inject folder strip below actions, above file list
+        let strip = document.getElementById("folderStripContainer");
+        if (!strip) {
+            strip = document.createElement("div");
+            strip.id = "folderStripContainer";
+            strip.className = "folder-strip-container";
+            actionsContainer.parentNode.insertBefore(strip, actionsContainer);
+        }
+        if (window.showFoldersInList && subfolders.length) {
+            strip.innerHTML = subfolders.map(sf => `
+                <div class="folder-item" data-folder="${sf.full}">
+                  <i class="material-icons">folder</i>
+                  <div class="folder-name">${escapeHTML(sf.name)}</div>
+                </div>
+            `).join("");
+            strip.style.display = "flex";
+            strip.querySelectorAll(".folder-item").forEach(el => {
+                el.addEventListener("click", () => {
+                    const dest = el.dataset.folder;
+                    window.currentFolder = dest;
+                    localStorage.setItem("lastOpenedFolder", dest);
+                    // sync breadcrumb & tree
+                    updateBreadcrumbTitle(dest);
+                    document.querySelectorAll(".folder-option.selected")
+                        .forEach(o => o.classList.remove("selected"));
+                    document.querySelector(`.folder-option[data-folder="${dest}"]`)
+                        ?.classList.add("selected");
+                    // reload
+                    loadFileList(dest);
+                });
+            });
+        } else {
+            strip.style.display = "none";
+        }
+
+        // 8) render files
+        if (window.viewMode === "gallery") {
+            renderGalleryView(folder);
+        } else {
+            renderFileTable(folder);
+        }
+
+        updateFileActionButtons();
+        return data.files;
+
+    } catch (err) {
+        console.error("Error loading file list:", err);
+        if (err.message !== "Unauthorized") {
+            fileListContainer.textContent = "Error loading files.";
+        }
+        return [];
+    } finally {
+        fileListContainer.style.visibility = "visible";
+    }
 }
 
 /**
  * Update renderFileTable so it writes its content into the provided container.
  */
-export function renderFileTable(folder, container) {
+export function renderFileTable(folder, container, subfolders) {
     const fileListContent = container || document.getElementById("fileList");
     const searchTerm = (window.currentSearchTerm || "").toLowerCase();
     const itemsPerPageSetting = parseInt(localStorage.getItem("itemsPerPage") || "10", 10);
@@ -327,9 +454,6 @@ export function renderFileTable(folder, container) {
             rowHTML = rowHTML.replace(/(<td class="file-name-cell">)(.*?)(<\/td>)/, (match, p1, p2, p3) => {
                 return p1 + p2 + tagBadgesHTML + p3;
             });
-            rowHTML = rowHTML.replace(/(<\/div>\s*<\/td>\s*<\/tr>)/, `<button class="share-btn btn btn-sm btn-secondary" data-file="${escapeHTML(file.name)}" title="${t('share')}">
-                <i class="material-icons">share</i>
-              </button>$1`);
             rowsHTML += rowHTML;
         });
     } else {
@@ -340,6 +464,10 @@ export function renderFileTable(folder, container) {
 
     fileListContent.innerHTML = combinedTopHTML + headerHTML + rowsHTML + bottomControlsHTML;
 
+    fileListContent.querySelectorAll('.folder-item').forEach(el => {
+        el.addEventListener('click', () => loadFileList(el.dataset.folder));
+    });
+
     // pagination clicks
     const prevBtn = document.getElementById("prevPageBtn");
     if (prevBtn) prevBtn.addEventListener("click", () => {
@@ -414,7 +542,7 @@ export function renderFileTable(folder, container) {
         });
     });
 
-    // 5) Preview buttons (if you still have a .preview-btn)
+    // 5) Preview buttons 
     fileListContent.querySelectorAll(".preview-btn").forEach(btn => {
         btn.addEventListener("click", e => {
             e.stopPropagation();
@@ -441,6 +569,17 @@ export function renderFileTable(folder, container) {
             }, 0);
         }, 300));
     }
+    const slider = document.getElementById('rowHeightSlider');
+    const valueDisplay = document.getElementById('rowHeightValue');
+    if (slider) {
+        slider.addEventListener('input', e => {
+            const v = +e.target.value;  // slider value in px
+            document.documentElement.style.setProperty('--file-row-height', v + 'px');
+            localStorage.setItem('rowHeight', v);
+            valueDisplay.textContent = v + 'px';
+        });
+    }
+
     document.querySelectorAll("table.table thead th[data-column]").forEach(cell => {
         cell.addEventListener("click", function () {
             const column = this.getAttribute("data-column");
@@ -530,18 +669,17 @@ export function renderGalleryView(folder, container) {
         }
     }, 0);
 
-    // --- Column slider ---
+    // --- Column slider with responsive max ---
     const numColumns = window.galleryColumns || 3;
-    galleryHTML += `
+    // clamp slider max to 1 on small (<600px), 2 on medium (<900px), else up to 6
-      <div class="gallery-slider" style="margin:10px; text-align:center;">
+    const w = window.innerWidth;
-        <label for="galleryColumnsSlider" style="margin-right:5px;">
+    let maxCols = 6;
-          ${t('columns')}:
+    if (w < 600) maxCols = 1;
-        </label>
+    else if (w < 900) maxCols = 2;
-        <input type="range" id="galleryColumnsSlider" min="1" max="6"
+
-               value="${numColumns}" style="vertical-align:middle;">
+    // ensure current value doesn’t exceed the new max
-        <span id="galleryColumnsValue">${numColumns}</span>
+    const startCols = Math.min(numColumns, maxCols);
-      </div>
+    window.galleryColumns = startCols;
-    `;
 
     // --- Start gallery grid ---
     galleryHTML += `
@@ -627,32 +765,52 @@ export function renderGalleryView(folder, container) {
             </span>
             ${tagBadgesHTML}
   
-            <div class="button-wrap" style="display:flex; justify-content:center; gap:5px; margin-top:5px;">
+            <div 
-              <button type="button" class="btn btn-sm btn-success download-btn"
+  class="btn-group btn-group-sm btn-group-hover" 
-                      data-download-name="${escapeHTML(file.name)}"
+  role="group" 
-                      data-download-folder="${file.folder || "root"}"
+  aria-label="File actions" 
-                      title="${t('download')}">
+  style="margin-top:5px;"
-                <i class="material-icons">file_download</i>
+>
-              </button>
+  <button 
-              ${file.editable ? `
+    type="button" 
-              <button type="button" class="btn btn-sm edit-btn"
+    class="btn btn-success py-1 download-btn" 
-                      data-edit-name="${escapeHTML(file.name)}"
+    data-download-name="${escapeHTML(file.name)}" 
-                      data-edit-folder="${file.folder || "root"}"
+    data-download-folder="${file.folder || "root"}" 
-                      title="${t('edit')}">
+    title="${t('download')}"
-                <i class="material-icons">edit</i>
+  >
-              </button>` : ""}
+    <i class="material-icons">file_download</i>
-              <button type="button" class="btn btn-sm btn-warning rename-btn"
+  </button>
-                      data-rename-name="${escapeHTML(file.name)}"
+
-                      data-rename-folder="${file.folder || "root"}"
+  ${file.editable ? `
-                      title="${t('rename')}">
+  <button 
-                <i class="material-icons">drive_file_rename_outline</i>
+    type="button" 
-              </button>
+    class="btn btn-secondary py-1 edit-btn" 
-              <button type="button" class="btn btn-sm btn-secondary share-btn"
+    data-edit-name="${escapeHTML(file.name)}" 
-                      data-file="${escapeHTML(file.name)}"
+    data-edit-folder="${file.folder || "root"}" 
-                      title="${t('share')}">
+    title="${t('edit')}"
-                <i class="material-icons">share</i>
+  >
-              </button>
+    <i class="material-icons">edit</i>
-            </div>
+  </button>` : ""}
+
+  <button 
+    type="button" 
+    class="btn btn-warning py-1 rename-btn" 
+    data-rename-name="${escapeHTML(file.name)}" 
+    data-rename-folder="${file.folder || "root"}" 
+    title="${t('rename')}"
+  >
+    <i class="material-icons">drive_file_rename_outline</i>
+  </button>
+
+  <button 
+    type="button" 
+    class="btn btn-secondary py-1 share-btn" 
+    data-file="${escapeHTML(file.name)}" 
+    title="${t('share')}"
+  >
+    <i class="material-icons">share</i>
+  </button>
+</div>
   
           </div>
         </div>

public/js/fileMenu.js

@@ -1,6 +1,6 @@
 // fileMenu.js
 import { updateRowHighlight, showToast } from './domUtils.js';
-import { handleDeleteSelected, handleCopySelected, handleMoveSelected, handleDownloadZipSelected, handleExtractZipSelected, renameFile } from './fileActions.js';
+import { handleDeleteSelected, handleCopySelected, handleMoveSelected, handleDownloadZipSelected, handleExtractZipSelected, renameFile, openCreateFileModal } from './fileActions.js';
 import { previewFile } from './filePreview.js';
 import { editFile } from './fileEditor.js';
 import { canEditFile, fileData } from './fileListView.js';
@@ -75,6 +75,7 @@ export function fileListContextMenuHandler(e) {
   const selected = Array.from(document.querySelectorAll("#fileList .file-checkbox:checked")).map(chk => chk.value);
   
   let menuItems = [
+    { label: t("create_file"), action: () => openCreateFileModal() },
     { label: t("delete_selected"), action: () => { handleDeleteSelected(new Event("click")); } },
     { label: t("copy_selected"), action: () => { handleCopySelected(new Event("click")); } },
     { label: t("move_selected"), action: () => { handleMoveSelected(new Event("click")); } },

public/js/folderManager.js

@@ -56,7 +56,7 @@ function saveFolderTreeState(state) {
 }
 
 // Helper for getting the parent folder.
-function getParentFolder(folder) {
+export function getParentFolder(folder) {
   if (folder === "root") return "root";
   const lastSlash = folder.lastIndexOf("/");
   return lastSlash === -1 ? "root" : folder.substring(0, lastSlash);
@@ -236,7 +236,8 @@ function renderFolderTree(tree, parentPath = "", defaultDisplay = "block") {
   const state = loadFolderTreeState();
   let html = `<ul class="folder-tree ${defaultDisplay === 'none' ? 'collapsed' : 'expanded'}">`;
   for (const folder in tree) {
-    if (folder.toLowerCase() === "trash") continue;
+    const name = folder.toLowerCase();
+    if (name === "trash" || name === "profile_pics") continue;
     const fullPath = parentPath ? parentPath + "/" + folder : folder;
     const hasChildren = Object.keys(tree[folder]).length > 0;
     const displayState = state[fullPath] !== undefined ? state[fullPath] : defaultDisplay;
@@ -360,7 +361,7 @@ function renderBreadcrumbFragment(folderPath) {
   return frag;
 }
 
-function updateBreadcrumbTitle(folder) {
+export function updateBreadcrumbTitle(folder) {
   const titleEl = document.getElementById("fileListTitle");
   titleEl.textContent = "";
   titleEl.appendChild(document.createTextNode(t("files_in") + " ("));

public/js/i18n.js

@@ -202,6 +202,11 @@ const translations = {
     // NEW KEYS ADDED FOR ADMIN, USER PANELS, AND TOTP MODALS:
     "admin_panel": "Admin Panel",
     "user_panel": "User Panel",
+    "user_settings": "User Settings",
+    "save_profile_picture": "Save Profile Picture",
+    "please_select_picture": "Please select a picture",
+    "profile_picture_updated": "Profile picture updated",
+    "error_updating_picture": "Error updating profile picture",
     "trash_restore_delete": "Trash Restore/Delete",
     "totp_settings": "TOTP Settings",
     "enable_totp": "Enable TOTP",
@@ -260,7 +265,17 @@ const translations = {
     "show": "Show",
     "items_per_page": "items per page",
     "columns": "Columns",
-    "api_docs": "API Docs"
+    "row_height": "Row Height",
+    "api_docs": "API Docs",
+    "show_folders_above_files": "Show folders above files",
+    "display": "Display",
+    "create_file": "Create File",
+    "create_new_file": "Create New File",
+    "enter_file_name": "Enter file name",
+    "newfile_placeholder": "New file name",
+    "file_created_successfully": "File created successfully!",
+    "error_creating_file": "Error creating file",
+    "file_created":          "File created successfully!"
   },
   es: {
     "please_log_in_to_continue": "Por favor, inicie sesión para continuar.",

public/js/main.js

@@ -15,9 +15,35 @@ import { editFile, saveFile } from './fileEditor.js';
 import { t, applyTranslations, setLocale } from './i18n.js';
 
 export function initializeApp() {
+  const saved = parseInt(localStorage.getItem('rowHeight') || '48', 10);
+  document.documentElement.style.setProperty('--file-row-height', saved + 'px');
   window.currentFolder = "root";
   initTagSearch();
   loadFileList(window.currentFolder);
+  const stored = localStorage.getItem('showFoldersInList');
+  window.showFoldersInList = stored === null ? true : stored === 'true';
+  const fileListArea = document.getElementById('fileListContainer');
+  const uploadArea = document.getElementById('uploadDropArea');
+  if (fileListArea && uploadArea) {
+    fileListArea.addEventListener('dragover', e => {
+      e.preventDefault();
+      fileListArea.classList.add('drop-hover');
+    });
+    fileListArea.addEventListener('dragleave', () => {
+      fileListArea.classList.remove('drop-hover');
+    });
+    fileListArea.addEventListener('drop', e => {
+      e.preventDefault();
+      fileListArea.classList.remove('drop-hover');
+      // re-dispatch the same drop into the real upload card
+      uploadArea.dispatchEvent(new DragEvent('drop', {
+        dataTransfer: e.dataTransfer,
+        bubbles: true,
+        cancelable: true
+      }));
+    });
+  }
+
   initDragAndDrop();
   loadSidebarOrder();
   loadHeaderOrder();
@@ -27,14 +53,14 @@ export function initializeApp() {
   setupTrashRestoreDelete();
   loadAdminConfigFunc();
 
-    const helpBtn     = document.getElementById("folderHelpBtn");
+  const helpBtn = document.getElementById("folderHelpBtn");
-    const helpTooltip = document.getElementById("folderHelpTooltip");
+  const helpTooltip = document.getElementById("folderHelpTooltip");
-    if (helpBtn && helpTooltip) {
+  if (helpBtn && helpTooltip) {
-      helpBtn.addEventListener("click", () => {
+    helpBtn.addEventListener("click", () => {
-        helpTooltip.style.display =
+      helpTooltip.style.display =
-          helpTooltip.style.display === "block" ? "none" : "block";
+        helpTooltip.style.display === "block" ? "none" : "block";
-      });
+    });
-    }
+  }
 }
 
 export function loadCsrfToken() {
@@ -77,18 +103,14 @@ if (params.get('logout') === '1') {
   localStorage.removeItem("userTOTPEnabled");
 }
 
-// 2) Wire up logoutBtn right away
+export function triggerLogout() {
-const logoutBtn = document.getElementById("logoutBtn");
+  fetch("/api/auth/logout.php", {
-if (logoutBtn) {
+    method: "POST",
-  logoutBtn.addEventListener("click", () => {
+    credentials: "include",
-    fetch("/api/auth/logout.php", {
+    headers: { "X-CSRF-Token": window.csrfToken }
-      method: "POST",
+  })
-      credentials: "include",
+    .then(() => window.location.reload(true))
-      headers: { "X-CSRF-Token": window.csrfToken }
+    .catch(() => { });
-    })
-      .then(() => window.location.reload(true))
-      .catch(() => {});
-  });
 }
 
 
@@ -122,7 +144,8 @@ document.addEventListener("DOMContentLoaded", function () {
     // Continue with initializations that rely on a valid CSRF token:
     checkAuthentication().then(authenticated => {
       if (authenticated) {
-        document.getElementById('loadingOverlay').remove();
+        const overlay = document.getElementById('loadingOverlay');
+        if (overlay) overlay.remove();
         initializeApp();
       }
     });
@@ -201,7 +224,6 @@ document.addEventListener("DOMContentLoaded", function () {
   });
 
   // --- Auto-scroll During Drag ---
-  // Adjust these values as needed:
   const SCROLL_THRESHOLD = 50; // pixels from edge to start scrolling
   const SCROLL_SPEED = 20;     // pixels to scroll per event
 

src/controllers/FileController.php

@@ -1626,4 +1626,31 @@ class FileController
             echo json_encode(['success' => false, 'error' => 'Not found']);
         }
     }
+
+    /**
+     * POST /api/file/createFile.php
+     */
+    public function createFile(): void
+    {
+
+        // Check user permissions (assuming loadUserPermissions() is available).
+        $username = $_SESSION['username'] ?? '';
+        $userPermissions = loadUserPermissions($username);
+        if (!empty($userPermissions['readOnly'])) {
+            echo json_encode(["error" => "Read-only users are not allowed to create files."]);
+            exit;
+        }
+        $body = json_decode(file_get_contents('php://input'), true);
+        $folder   = $body['folder']   ?? 'root';
+        $filename = $body['name']     ?? '';
+
+        $result = FileModel::createFile($folder, $filename, $_SESSION['username'] ?? 'Unknown');
+
+        if (!$result['success']) {
+            http_response_code($result['code'] ?? 400);
+            echo json_encode(['success'=>false,'error'=>$result['error']]);
+        } else {
+            echo json_encode(['success'=>true]);
+        }
+    }
 }

src/controllers/FolderController.php

@@ -340,16 +340,14 @@ class FolderController
     public function getFolderList(): void
     {
         header('Content-Type: application/json');
-
+        if (empty($_SESSION['authenticated'])) {
-        // Ensure user is authenticated.
-        if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
             http_response_code(401);
             echo json_encode(["error" => "Unauthorized"]);
             exit;
         }
 
-        // Optionally, you might add further input validation if necessary.
+        $parent = $_GET['folder'] ?? null;
-        $folderList = FolderModel::getFolderList();
+        $folderList = FolderModel::getFolderList($parent);
         echo json_encode($folderList);
         exit;
     }
@@ -1087,8 +1085,8 @@ class FolderController
         header('Content-Type: application/json');
         $shareFile = META_DIR . 'share_folder_links.json';
         $links     = file_exists($shareFile)
-                   ? json_decode(file_get_contents($shareFile), true) ?? []
+            ? json_decode(file_get_contents($shareFile), true) ?? []
-                   : [];
+            : [];
         $now       = time();
         $cleaned   = [];
 

src/controllers/UserController.php

@@ -867,123 +867,126 @@ class UserController
      * )
      */
 
-     public function verifyTOTP()
+    public function verifyTOTP()
-     {
+    {
-         header('Content-Type: application/json');
+        header('Content-Type: application/json');
-         header("Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self';");
+        header("Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self';");
 
-         // Rate-limit
+        // Rate-limit
-         if (!isset($_SESSION['totp_failures'])) {
+        if (!isset($_SESSION['totp_failures'])) {
-             $_SESSION['totp_failures'] = 0;
+            $_SESSION['totp_failures'] = 0;
-         }
+        }
-         if ($_SESSION['totp_failures'] >= 5) {
+        if ($_SESSION['totp_failures'] >= 5) {
-             http_response_code(429);
+            http_response_code(429);
-             echo json_encode(['status' => 'error', 'message' => 'Too many TOTP attempts. Please try again later.']);
+            echo json_encode(['status' => 'error', 'message' => 'Too many TOTP attempts. Please try again later.']);
-             exit;
+            exit;
-         }
+        }
 
-         // Must be authenticated OR pending login
+        // Must be authenticated OR pending login
-         if (empty($_SESSION['authenticated']) && !isset($_SESSION['pending_login_user'])) {
+        if (empty($_SESSION['authenticated']) && !isset($_SESSION['pending_login_user'])) {
-             http_response_code(403);
+            http_response_code(403);
-             echo json_encode(['status' => 'error', 'message' => 'Not authenticated']);
+            echo json_encode(['status' => 'error', 'message' => 'Not authenticated']);
-             exit;
+            exit;
-         }
+        }
 
-         // CSRF check
+        // CSRF check
-         $headersArr = array_change_key_case(getallheaders(), CASE_LOWER);
+        $headersArr = array_change_key_case(getallheaders(), CASE_LOWER);
-         $csrfHeader = $headersArr['x-csrf-token'] ?? '';
+        $csrfHeader = $headersArr['x-csrf-token'] ?? '';
-         if (empty($_SESSION['csrf_token']) || $csrfHeader !== $_SESSION['csrf_token']) {
+        if (empty($_SESSION['csrf_token']) || $csrfHeader !== $_SESSION['csrf_token']) {
-             http_response_code(403);
+            http_response_code(403);
-             echo json_encode(['status' => 'error', 'message' => 'Invalid CSRF token']);
+            echo json_encode(['status' => 'error', 'message' => 'Invalid CSRF token']);
-             exit;
+            exit;
-         }
+        }
 
-         // Parse & validate input
+        // Parse & validate input
-         $inputData = json_decode(file_get_contents("php://input"), true);
+        $inputData = json_decode(file_get_contents("php://input"), true);
-         $code = trim($inputData['totp_code'] ?? '');
+        $code = trim($inputData['totp_code'] ?? '');
-         if (!preg_match('/^\d{6}$/', $code)) {
+        if (!preg_match('/^\d{6}$/', $code)) {
-             http_response_code(400);
+            http_response_code(400);
-             echo json_encode(['status' => 'error', 'message' => 'A valid 6-digit TOTP code is required']);
+            echo json_encode(['status' => 'error', 'message' => 'A valid 6-digit TOTP code is required']);
-             exit;
+            exit;
-         }
+        }
 
-         // TFA helper
+        // TFA helper
-         $tfa = new \RobThree\Auth\TwoFactorAuth(
+        $tfa = new \RobThree\Auth\TwoFactorAuth(
-             new \RobThree\Auth\Providers\Qr\GoogleChartsQrCodeProvider(),
+            new \RobThree\Auth\Providers\Qr\GoogleChartsQrCodeProvider(),
-             'FileRise', 6, 30, \RobThree\Auth\Algorithm::Sha1
+            'FileRise',
-         );
+            6,
+            30,
+            \RobThree\Auth\Algorithm::Sha1
+        );
 
-         // === Pending-login flow (we just came from auth and need to finish login) ===
+        // === Pending-login flow (we just came from auth and need to finish login) ===
-         if (isset($_SESSION['pending_login_user'])) {
+        if (isset($_SESSION['pending_login_user'])) {
-             $username    = $_SESSION['pending_login_user'];
+            $username    = $_SESSION['pending_login_user'];
-             $pendingSecret = $_SESSION['pending_login_secret'] ?? null;
+            $pendingSecret = $_SESSION['pending_login_secret'] ?? null;
-             $rememberMe  = $_SESSION['pending_login_remember_me'] ?? false;
+            $rememberMe  = $_SESSION['pending_login_remember_me'] ?? false;
 
-             if (!$pendingSecret || !$tfa->verifyCode($pendingSecret, $code)) {
+            if (!$pendingSecret || !$tfa->verifyCode($pendingSecret, $code)) {
-                 $_SESSION['totp_failures']++;
+                $_SESSION['totp_failures']++;
-                 http_response_code(400);
+                http_response_code(400);
-                 echo json_encode(['status' => 'error', 'message' => 'Invalid TOTP code']);
+                echo json_encode(['status' => 'error', 'message' => 'Invalid TOTP code']);
-                 exit;
+                exit;
-             }
+            }
 
-             // Issue “remember me” token if requested
+            // Issue “remember me” token if requested
-             if ($rememberMe) {
+            if ($rememberMe) {
-                 $tokFile = USERS_DIR . 'persistent_tokens.json';
+                $tokFile = USERS_DIR . 'persistent_tokens.json';
-                 $token = bin2hex(random_bytes(32));
+                $token = bin2hex(random_bytes(32));
-                 $expiry = time() + 30 * 24 * 60 * 60;
+                $expiry = time() + 30 * 24 * 60 * 60;
-                 $all = [];
+                $all = [];
-                 if (file_exists($tokFile)) {
+                if (file_exists($tokFile)) {
-                     $dec = decryptData(file_get_contents($tokFile), $GLOBALS['encryptionKey']);
+                    $dec = decryptData(file_get_contents($tokFile), $GLOBALS['encryptionKey']);
-                     $all = json_decode($dec, true) ?: [];
+                    $all = json_decode($dec, true) ?: [];
-                 }
+                }
-                 $all[$token] = [
+                $all[$token] = [
-                     'username'     => $username,
+                    'username'     => $username,
-                     'expiry'       => $expiry,
+                    'expiry'       => $expiry,
-                     'isAdmin'      => ((int)userModel::getUserRole($username) === 1),
+                    'isAdmin'      => ((int)userModel::getUserRole($username) === 1),
-                     'folderOnly'   => loadUserPermissions($username)['folderOnly']   ?? false,
+                    'folderOnly'   => loadUserPermissions($username)['folderOnly']   ?? false,
-                     'readOnly'     => loadUserPermissions($username)['readOnly']     ?? false,
+                    'readOnly'     => loadUserPermissions($username)['readOnly']     ?? false,
-                     'disableUpload'=> loadUserPermissions($username)['disableUpload']?? false
+                    'disableUpload' => loadUserPermissions($username)['disableUpload'] ?? false
-                 ];
+                ];
-                 file_put_contents(
+                file_put_contents(
-                     $tokFile,
+                    $tokFile,
-                     encryptData(json_encode($all, JSON_PRETTY_PRINT), $GLOBALS['encryptionKey']),
+                    encryptData(json_encode($all, JSON_PRETTY_PRINT), $GLOBALS['encryptionKey']),
-                     LOCK_EX
+                    LOCK_EX
-                 );
+                );
-                 $secure = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off');
+                $secure = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off');
-                 setcookie('remember_me_token', $token, $expiry, '/', '', $secure, true);
+                setcookie('remember_me_token', $token, $expiry, '/', '', $secure, true);
-                 setcookie(session_name(), session_id(), $expiry, '/', '', $secure, true);
+                setcookie(session_name(), session_id(), $expiry, '/', '', $secure, true);
-             }
+            }
 
-             // === Finalize login into session exactly as finalizeLogin() would ===
+            // === Finalize login into session exactly as finalizeLogin() would ===
-             session_regenerate_id(true);
+            session_regenerate_id(true);
-             $_SESSION['authenticated']   = true;
+            $_SESSION['authenticated']   = true;
-             $_SESSION['username']        = $username;
+            $_SESSION['username']        = $username;
-             $_SESSION['isAdmin']         = ((int)userModel::getUserRole($username) === 1);
+            $_SESSION['isAdmin']         = ((int)userModel::getUserRole($username) === 1);
-             $perms = loadUserPermissions($username);
+            $perms = loadUserPermissions($username);
-             $_SESSION['folderOnly']      = $perms['folderOnly']    ?? false;
+            $_SESSION['folderOnly']      = $perms['folderOnly']    ?? false;
-             $_SESSION['readOnly']        = $perms['readOnly']      ?? false;
+            $_SESSION['readOnly']        = $perms['readOnly']      ?? false;
-             $_SESSION['disableUpload']   = $perms['disableUpload'] ?? false;
+            $_SESSION['disableUpload']   = $perms['disableUpload'] ?? false;
 
-             // Clean up pending markers
+            // Clean up pending markers
-             unset(
+            unset(
-                 $_SESSION['pending_login_user'],
+                $_SESSION['pending_login_user'],
-                 $_SESSION['pending_login_secret'],
+                $_SESSION['pending_login_secret'],
-                 $_SESSION['pending_login_remember_me'],
+                $_SESSION['pending_login_remember_me'],
-                 $_SESSION['totp_failures']
+                $_SESSION['totp_failures']
-             );
+            );
 
-             // Send back full login payload
+            // Send back full login payload
-             echo json_encode([
+            echo json_encode([
-                 'status'        => 'ok',
+                'status'        => 'ok',
-                 'success'       => 'Login successful',
+                'success'       => 'Login successful',
-                 'isAdmin'       => $_SESSION['isAdmin'],
+                'isAdmin'       => $_SESSION['isAdmin'],
-                 'folderOnly'    => $_SESSION['folderOnly'],
+                'folderOnly'    => $_SESSION['folderOnly'],
-                 'readOnly'      => $_SESSION['readOnly'],
+                'readOnly'      => $_SESSION['readOnly'],
-                 'disableUpload' => $_SESSION['disableUpload'],
+                'disableUpload' => $_SESSION['disableUpload'],
-                 'username'      => $_SESSION['username']
+                'username'      => $_SESSION['username']
-             ]);
+            ]);
-             exit;
+            exit;
-         }
+        }
 
         // Setup/verification flow (not pending)
         $username = $_SESSION['username'] ?? '';
@@ -1011,4 +1014,91 @@ class UserController
         unset($_SESSION['totp_failures']);
         echo json_encode(['status' => 'ok', 'message' => 'TOTP successfully verified']);
     }
+
+    public function uploadPicture()
+    {
+        header('Content-Type: application/json');
+
+        // 1) Auth check
+        if (empty($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
+            http_response_code(401);
+            echo json_encode(['success' => false, 'error' => 'Unauthorized']);
+            exit;
+        }
+
+        // 2) CSRF check
+        $headers = function_exists('getallheaders')
+            ? array_change_key_case(getallheaders(), CASE_LOWER)
+            : [];
+        $csrf = $headers['x-csrf-token'] ?? $_SERVER['HTTP_X_CSRF_TOKEN'] ?? '';
+        if (empty($_SESSION['csrf_token']) || $csrf !== $_SESSION['csrf_token']) {
+            http_response_code(403);
+            echo json_encode(['success' => false, 'error' => 'Invalid CSRF token']);
+            exit;
+        }
+
+        // 3) File presence
+        if (empty($_FILES['profile_picture']) || $_FILES['profile_picture']['error'] !== UPLOAD_ERR_OK) {
+            http_response_code(400);
+            echo json_encode(['success' => false, 'error' => 'No file uploaded or error']);
+            exit;
+        }
+        $file = $_FILES['profile_picture'];
+
+        // 4) Validate MIME & size
+        $allowed = ['image/jpeg' => 'jpg', 'image/png' => 'png', 'image/gif' => 'gif'];
+        $finfo   = finfo_open(FILEINFO_MIME_TYPE);
+        $mime    = finfo_file($finfo, $file['tmp_name']);
+        finfo_close($finfo);
+        if (!isset($allowed[$mime])) {
+            http_response_code(400);
+            echo json_encode(['success' => false, 'error' => 'Invalid file type']);
+            exit;
+        }
+        if ($file['size'] > 2 * 1024 * 1024) {
+            http_response_code(400);
+            echo json_encode(['success' => false, 'error' => 'File too large']);
+            exit;
+        }
+
+        // 5) Destination under public/uploads/profile_pics
+        $uploadDir = UPLOAD_DIR . '/profile_pics';
+        if (!is_dir($uploadDir) && !mkdir($uploadDir, 0755, true)) {
+            http_response_code(500);
+            echo json_encode(['success' => false, 'error' => 'Cannot create upload folder']);
+            exit;
+        }
+
+        // 6) Move file
+        $ext      = $allowed[$mime];
+        $user     = preg_replace('/[^a-zA-Z0-9_\-]/', '', $_SESSION['username']);
+        $filename = $user . '_' . bin2hex(random_bytes(8)) . '.' . $ext;
+        $dest     = "$uploadDir/$filename";
+        if (!move_uploaded_file($file['tmp_name'], $dest)) {
+            http_response_code(500);
+            echo json_encode(['success' => false, 'error' => 'Failed to save file']);
+            exit;
+        }
+
+        // 7) Build public URL
+        $url = '/uploads/profile_pics/' . $filename;
+
+        // ─── THIS IS WHERE WE PERSIST INTO users.txt ───
+        $result = UserModel::setProfilePicture($_SESSION['username'], $url);
+        if (!$result['success']) {
+            // on failure, remove the file we just wrote
+            @unlink($dest);
+            http_response_code(500);
+            echo json_encode([
+                'success' => false,
+                'error'   => 'Failed to save profile picture setting'
+            ]);
+            exit;
+        }
+        // ─────────────────────────────────────────────────
+
+        // 8) Return success
+        echo json_encode(['success' => true, 'url' => $url]);
+        exit;
+    }
 }

src/models/FileModel.php

@@ -1278,4 +1278,64 @@ public static function saveFile(string $folder, string $fileName, $content, ?str
         file_put_contents($shareFile, json_encode($links, JSON_PRETTY_PRINT));
         return true;
     }
+
+    /**
+     * Create an empty file plus metadata entry.
+     *
+     * @param string $folder
+     * @param string $filename
+     * @param string $uploader
+     * @return array ['success'=>bool, 'error'=>string, 'code'=>int]
+     */
+    public static function createFile(string $folder, string $filename, string $uploader): array
+    {
+        // 1) basic validation
+        if (!preg_match('/^[\w\-. ]+$/', $filename)) {
+            return ['success'=>false,'error'=>'Invalid filename','code'=>400];
+        }
+
+        // 2) build target path
+        $base = UPLOAD_DIR;
+        if ($folder !== 'root') {
+            $base = rtrim(UPLOAD_DIR, '/\\')
+                  . DIRECTORY_SEPARATOR . $folder
+                  . DIRECTORY_SEPARATOR;
+        }
+        if (!is_dir($base) && !mkdir($base, 0775, true)) {
+            return ['success'=>false,'error'=>'Cannot create folder','code'=>500];
+        }
+        $path = $base . $filename;
+
+        // 3) no overwrite
+        if (file_exists($path)) {
+            return ['success'=>false,'error'=>'File already exists','code'=>400];
+        }
+
+        // 4) touch the file
+        if (false === @file_put_contents($path, '')) {
+            return ['success'=>false,'error'=>'Could not create file','code'=>500];
+        }
+
+        // 5) write metadata
+        $metaKey  = ($folder === 'root') ? 'root' : $folder;
+        $metaName = str_replace(['/', '\\', ' '], '-', $metaKey) . '_metadata.json';
+        $metaPath = META_DIR . $metaName;
+
+        $collection = [];
+        if (file_exists($metaPath)) {
+            $json = file_get_contents($metaPath);
+            $collection = json_decode($json, true) ?: [];
+        }
+
+        $collection[$filename] = [
+          'uploaded' => date(DATE_TIME_FORMAT),
+          'uploader' => $uploader
+        ];
+
+        if (false === file_put_contents($metaPath, json_encode($collection, JSON_PRETTY_PRINT))) {
+            return ['success'=>false,'error'=>'Failed to update metadata','code'=>500];
+        }
+
+        return ['success'=>true];
+    }
 }

src/models/UserModel.php

@@ -3,13 +3,15 @@
 
 require_once PROJECT_ROOT . '/config/config.php';
 
-class userModel {
+class userModel
+{
     /**
      * Retrieves all users from the users file.
      *
      * @return array Returns an array of users.
      */
-    public static function getAllUsers() {
+    public static function getAllUsers()
+    {
         $usersFile = USERS_DIR . USERS_FILE;
         $users = [];
         if (file_exists($usersFile)) {
@@ -36,7 +38,8 @@ class userModel {
      * @param bool   $setupMode If true, overwrite the users file.
      * @return array Response containing either an error or a success message.
      */
-    public static function addUser($username, $password, $isAdmin, $setupMode) {
+    public static function addUser($username, $password, $isAdmin, $setupMode)
+    {
         $usersFile = USERS_DIR . USERS_FILE;
 
         // Ensure users.txt exists.
@@ -69,13 +72,14 @@ class userModel {
         return ["success" => "User added successfully"];
     }
 
-        /**
+    /**
      * Removes the specified user from the users file and updates the userPermissions file.
      *
      * @param string $usernameToRemove The username to remove.
      * @return array An array with either an error message or a success message.
      */
-    public static function removeUser($usernameToRemove) {
+    public static function removeUser($usernameToRemove)
+    {
         $usersFile = USERS_DIR . USERS_FILE;
 
         if (!file_exists($usersFile)) {
@@ -120,14 +124,15 @@ class userModel {
         return ["success" => "User removed successfully"];
     }
 
-        /**
+    /**
      * Retrieves permissions from the userPermissions.json file.
      * If the current user is an admin, returns all permissions.
      * Otherwise, returns only the permissions for the current user.
      *
      * @return array|object Returns an associative array of permissions or an empty object if none are found.
      */
-    public static function getUserPermissions() {
+    public static function getUserPermissions()
+    {
         global $encryptionKey;
         $permissionsFile = USERS_DIR . "userPermissions.json";
         $permissionsArray = [];
@@ -165,13 +170,14 @@ class userModel {
         return new stdClass();
     }
 
-        /**
+    /**
      * Updates user permissions in the userPermissions.json file.
      *
      * @param array $permissions An array of permission updates.
      * @return array An associative array with a success or error message.
      */
-    public static function updateUserPermissions($permissions) {
+    public static function updateUserPermissions($permissions)
+    {
         global $encryptionKey;
         $permissionsFile = USERS_DIR . "userPermissions.json";
         $existingPermissions = [];
@@ -235,7 +241,7 @@ class userModel {
         return ["success" => "User permissions updated successfully."];
     }
 
-        /**
+    /**
      * Changes the password for the given user.
      *
      * @param string $username The username whose password is to be changed.
@@ -243,7 +249,8 @@ class userModel {
      * @param string $newPassword The new password.
      * @return array An array with either a success or error message.
      */
-    public static function changePassword($username, $oldPassword, $newPassword) {
+    public static function changePassword($username, $oldPassword, $newPassword)
+    {
         $usersFile = USERS_DIR . USERS_FILE;
 
         if (!file_exists($usersFile)) {
@@ -299,14 +306,15 @@ class userModel {
         }
     }
 
-        /**
+    /**
      * Updates the user panel settings by disabling the TOTP secret if TOTP is not enabled.
      *
      * @param string $username The username whose panel settings are being updated.
      * @param bool $totp_enabled Whether TOTP is enabled.
      * @return array An array indicating success or failure.
      */
-    public static function updateUserPanel($username, $totp_enabled) {
+    public static function updateUserPanel($username, $totp_enabled)
+    {
         $usersFile = USERS_DIR . USERS_FILE;
 
         if (!file_exists($usersFile)) {
@@ -350,13 +358,14 @@ class userModel {
         return ["success" => "User panel updated: TOTP remains enabled"];
     }
 
-        /**
+    /**
      * Disables the TOTP secret for the specified user.
      *
      * @param string $username The user for whom TOTP should be disabled.
      * @return bool True if the secret was cleared; false otherwise.
      */
-    public static function disableTOTPSecret($username) {
+    public static function disableTOTPSecret($username)
+    {
         global $encryptionKey; // In case it's used in this model context.
         $usersFile = USERS_DIR . USERS_FILE;
         if (!file_exists($usersFile)) {
@@ -391,14 +400,15 @@ class userModel {
         return $modified;
     }
 
-        /**
+    /**
      * Attempts to recover TOTP for a user using the supplied recovery code.
      *
      * @param string $userId The user identifier.
      * @param string $recoveryCode The recovery code provided by the user.
      * @return array An associative array with keys 'status' and 'message'.
      */
-    public static function recoverTOTP($userId, $recoveryCode) {
+    public static function recoverTOTP($userId, $recoveryCode)
+    {
         // --- Rate‑limit recovery attempts ---
         $attemptsFile = rtrim(USERS_DIR, '/\\') . '/recovery_attempts.json';
         $attempts = is_file($attemptsFile) ? json_decode(file_get_contents($attemptsFile), true) : [];
@@ -406,7 +416,7 @@ class userModel {
         $now = time();
         if (isset($attempts[$key])) {
             // Prune attempts older than 15 minutes.
-            $attempts[$key] = array_filter($attempts[$key], function($ts) use ($now) {
+            $attempts[$key] = array_filter($attempts[$key], function ($ts) use ($now) {
                 return $ts > $now - 900;
             });
         }
@@ -458,13 +468,14 @@ class userModel {
         return ['status' => 'ok'];
     }
 
-        /**
+    /**
      * Generates a random recovery code.
      *
      * @param int $length Length of the recovery code.
      * @return string
      */
-    private static function generateRecoveryCode($length = 12) {
+    private static function generateRecoveryCode($length = 12)
+    {
         $chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
         $max   = strlen($chars) - 1;
         $code  = '';
@@ -480,7 +491,8 @@ class userModel {
      * @param string $userId The username of the user.
      * @return array An associative array with the status and recovery code (if successful).
      */
-    public static function saveTOTPRecoveryCode($userId) {
+    public static function saveTOTPRecoveryCode($userId)
+    {
         // Determine the user file path.
         $userFile = rtrim(USERS_DIR, '/\\') . DIRECTORY_SEPARATOR . $userId . '.json';
 
@@ -520,14 +532,15 @@ class userModel {
         return ['status' => 'ok', 'recoveryCode' => $recoveryCode];
     }
 
-        /**
+    /**
      * Sets up TOTP for the specified user by retrieving or generating a TOTP secret,
      * then builds and returns a QR code image for the OTPAuth URL.
      *
      * @param string $username The username for which to set up TOTP.
      * @return array An associative array with keys 'imageData' and 'mimeType', or 'error'.
      */
-    public static function setupTOTP($username) {
+    public static function setupTOTP($username)
+    {
         global $encryptionKey;
         $usersFile = USERS_DIR . USERS_FILE;
 
@@ -612,13 +625,14 @@ class userModel {
         ];
     }
 
-        /**
+    /**
      * Retrieves the decrypted TOTP secret for a given user.
      *
      * @param string $username
      * @return string|null Returns the TOTP secret if found, or null if not.
      */
-    public static function getTOTPSecret($username) {
+    public static function getTOTPSecret($username)
+    {
         global $encryptionKey;
         $usersFile = USERS_DIR . USERS_FILE;
         if (!file_exists($usersFile)) {
@@ -641,7 +655,8 @@ class userModel {
      * @param string $username
      * @return string|null
      */
-    public static function getUserRole($username) {
+    public static function getUserRole($username)
+    {
         $usersFile = USERS_DIR . USERS_FILE;
         if (!file_exists($usersFile)) {
             return null;
@@ -654,4 +669,86 @@ class userModel {
         }
         return null;
     }
+
+    public static function getUser(string $username): array
+    {
+        $usersFile = USERS_DIR . USERS_FILE;
+        if (! file_exists($usersFile)) {
+            return [];
+        }
+    
+        foreach (file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) as $line) {
+            // split *all* the fields
+            $parts = explode(':', $line);
+    
+            if ($parts[0] !== $username) {
+                continue;
+            }
+    
+            // determine admin & totp
+            $isAdmin     = (isset($parts[2]) && $parts[2] === '1');
+            $totpEnabled = !empty($parts[3]);
+            // profile_picture is the 5th field if present
+            $pic         = isset($parts[4]) ? $parts[4] : '';
+    
+            return [
+                'username'        => $parts[0],
+                'isAdmin'         => $isAdmin,
+                'totp_enabled'    => $totpEnabled,
+                'profile_picture' => $pic,
+            ];
+        }
+    
+        return [];  // user not found
+    }
+
+    /**
+     * Persistently set the profile picture URL for a given user,
+     * storing it in the 5th field so we leave the 4th (TOTP secret) untouched.
+     *
+     * users.txt format:
+     *   username:hash:isAdmin:totp_secret:profile_picture
+     *
+     * @param string $username
+     * @param string $url       The public URL (e.g. "/uploads/profile_pics/…")
+     * @return array            ['success'=>true] or ['success'=>false,'error'=>'…']
+     */
+    public static function setProfilePicture(string $username, string $url): array
+    {
+        $usersFile = USERS_DIR . USERS_FILE;
+        if (! file_exists($usersFile)) {
+            return ['success' => false, 'error' => 'Users file not found'];
+        }
+
+        $lines = file($usersFile, FILE_IGNORE_NEW_LINES);
+        $out   = [];
+        $found = false;
+
+        foreach ($lines as $line) {
+            $parts = explode(':', $line);
+            if ($parts[0] === $username) {
+                $found = true;
+                // Ensure we have at least 5 fields
+                while (count($parts) < 5) {
+                    $parts[] = '';
+                }
+                // Write profile_picture into the 5th field (index 4)
+                $parts[4] = ltrim($url, '/'); // or $url if leading slash is desired
+                // Re-assemble (this preserves parts[3] completely)
+                $line = implode(':', $parts);
+            }
+            $out[] = $line;
+        }
+
+        if (! $found) {
+            return ['success' => false, 'error' => 'User not found'];
+        }
+
+        $newContent = implode(PHP_EOL, $out) . PHP_EOL;
+        if (file_put_contents($usersFile, $newContent, LOCK_EX) === false) {
+            return ['success' => false, 'error' => 'Failed to write users file'];
+        }
+
+        return ['success' => true];
+    }
 }