release(v1.6.3): drag/drop card persistence, admin UX fixes, and docs (closes #58)

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+github: [error311]
+ko_fi: error311

CHANGELOG.md

@@ -1,5 +1,62 @@
 # Changelog
 
+## Changes 10/24/2025 (v1.6.3)
+
+release(v1.6.3): drag/drop card persistence, admin UX fixes, and docs (closes #58)
+
+Drag & Drop - Upload/Folder Management Cards layout
+
+- Persist panel locations across refresh; snapshot + restore when collapsing/expanding.
+- Unified “zones” toggle; header-icon mode no longer loses card state.
+- Responsive: auto-move sidebar cards to top on small screens; restore on resize.
+- Better top-zone placeholder/cleanup during drag; tighter header modal sizing.
+- Safer order saving + deterministic placement for upload/folder cards.
+
+Admin Panel – Folder Access
+
+- Fix: newly created folders now appear without a full page refresh (cache-busted `getFolderList`).
+- Show admin users in the list with full access pre-applied and inputs disabled (read-only).
+- Skip sending updates for admins when saving grants.
+- “Folder” column now has its own horizontal scrollbar so long names / “Inherited from …” are never cut off.
+
+Admin Panel – User Permissions (flags)
+
+- Show admins (marked as Admin) with all switches disabled; exclude from save payload.
+- Clarified helper text (account-level vs per-folder).
+
+UI/Styling
+
+- Added `.folder-cell` scroller in ACL table; improved dark-mode scrollbar/thumb.
+
+Docs
+
+- README edits:
+  - Clarified PUID/PGID mapping and host/NAS ownership requirements for mounted volumes.
+  - Environment variables section added
+  - CHOWN_ON_START additional details
+  - Admin details
+  - Upgrade section added
+  - 💖 Sponsor FileRise section added
+
+---
+
+## Changes 10/23/2025 (v1.6.2)
+
+feat(i18n,auth): add Simplified Chinese (zh-CN) and expose in User Panel
+
+- Add zh-CN locale to i18n.js with full key set.
+- Introduce chinese_simplified label key across locales.
+- Added some missing labels
+- Update language selector mapping to include zh-CN (English/Spanish/French/German/简体中文).
+- Wire zh-CN into Auth/User Panel (authModals) language dropdown.
+- Fallback-safe rendering for language names when a key is missing.
+
+ui: fix “Change Password” button sizing in User Panel
+
+- Keep consistent padding and font size for cleaner layout
+
+---
+
 ## Changes 10/23/2025 (v1.6.1)
 
 feat(ui): unified zone toggle + polished interactions for sidebar/top cards

README.md

@@ -7,6 +7,8 @@
 [![Demo](https://img.shields.io/badge/demo-live-brightgreen)](https://demo.filerise.net)
 [![Release](https://img.shields.io/github/v/release/error311/FileRise?include_prereleases&sort=semver)](https://github.com/error311/FileRise/releases)
 [![License](https://img.shields.io/github/license/error311/FileRise)](LICENSE)
+[![Sponsor on GitHub](https://img.shields.io/badge/Sponsor-❤-red)](https://github.com/sponsors/error311)
+[![Support on Ko-fi](https://img.shields.io/badge/Ko--fi-Buy%20me%20a%20coffee-orange)](https://ko-fi.com/error311)
 
 **Quick links:** [Demo](#live-demo) • [Install](#installation--setup) • [Docker](#1-running-with-docker-recommended) • [Unraid](#unraid) • [WebDAV](#quick-start-mount-via-webdav) • [FAQ](#faq--troubleshooting)
 
@@ -80,7 +82,7 @@ With drag-and-drop uploads, in-browser editing, secure user logins (SSO & TOTP 2
 
 - 🎨 **Responsive UI (Dark/Light Mode):** Modern, mobile-friendly design with persistent preferences (theme, layout, last folder, etc.).
 
-- 🌐 **Internationalization:** English, Spanish, French, and German available. Community translations welcome.
+- 🌐 **Internationalization:** English, Spanish, French, German & Simplified Chinese available. Community translations welcome.
 
 - ⚙️ **Lightweight & Self-Contained:** Runs on PHP 8.3+, no external DB required. Single-folder or Docker deployment with minimal footprint, optimized for Unraid and self-hosting.
 
@@ -103,6 +105,22 @@ Deploy FileRise using the **Docker image** (quickest) or a **manual install** on
 
 ---
 
+### Environment variables
+
+| Variable | Default | Purpose |
+|---|---|---|
+| `TIMEZONE` | `UTC` | PHP/app timezone. |
+| `DATE_TIME_FORMAT` | `m/d/y  h:iA` | Display format used in UI. |
+| `TOTAL_UPLOAD_SIZE` | `5G` | Max combined upload per request (resumable). |
+| `SECURE` | `false` | Set `true` if served behind HTTPS proxy (affects link generation). |
+| `PERSISTENT_TOKENS_KEY` | *(required)* | Secret for “Remember Me” tokens. Change from the example! |
+| `PUID` / `PGID` | `1000` / `1000` | Map `www-data` to host uid:gid (Unraid: often `99:100`). |
+| `CHOWN_ON_START` | `true` | First run: try to chown mounted dirs to PUID:PGID. |
+| `SCAN_ON_START` | `true` | Reindex files added outside UI at boot. |
+| `SHARE_URL` | *(blank)* | Override base URL for share links; blank = auto-detect. |
+
+---
+
 ### 1) Running with Docker (Recommended)
 
 #### Pull the image
@@ -133,6 +151,8 @@ docker run -d \
   error311/filerise-docker:latest
 ```
 
+The app runs as www-data mapped to PUID/PGID. Ensure your mounted uploads/, users/, metadata/ are owned by PUID:PGID (e.g., chown -R 1000:1000 …), or set PUID/PGID to match existing host ownership (e.g., 99:100 on Unraid). On NAS/NFS, apply the ownership change on the host/NAS.
+
 This starts FileRise on port **8080** → visit `http://your-server-ip:8080`.
 
 **Notes**  
@@ -183,6 +203,8 @@ services:
 Access at `http://localhost:8080` (or your server’s IP).  
 The example sets a custom `PERSISTENT_TOKENS_KEY`—change it to a strong random string.
 
+- “`CHOWN_ON_START=true` attempts to align ownership **inside the container**; if the host/NAS disallows changes, set the correct UID/GID on the host.”
+
 **First-time Setup**  
 On first launch, if no users exist, you’ll be prompted to create an **Admin account**. Then use **User Management** to add more users.
 
@@ -247,6 +269,13 @@ Browse to your FileRise URL; you’ll be prompted to create the Admin user on fi
 
 ---
 
+### 3) Admins
+
+> **Admins in ACL UI**
+> Admin accounts appear in the Folder Access and User Permissions modals as **read-only** with full access implied. This is by design—admins always have full control and are excluded from save payloads.
+
+---
+
 ## Unraid
 
 - Install from **Community Apps** → search **FileRise**.  
@@ -256,6 +285,16 @@ Browse to your FileRise URL; you’ll be prompted to create the Admin user on fi
 
 ---
 
+## Upgrade
+
+```bash
+docker pull error311/filerise-docker:latest
+docker stop filerise && docker rm filerise
+# re-run with the same -v and -e flags you used originally
+```
+
+---
+
 ## Quick-start: Mount via WebDAV
 
 Once FileRise is running, enable WebDAV in the admin panel.
@@ -336,6 +375,17 @@ If you like FileRise, a ⭐ star on GitHub is much appreciated!
 
 ---
 
+## 💖 Sponsor FileRise
+
+If FileRise saves you time (or sparks joy 😄), please consider supporting ongoing development:
+
+- ❤️ [**GitHub Sponsors:**](https://github.com/sponsors/error311) recurring or one-time - helps fund new features and docs.
+- ☕ [**Ko-fi:**](https://ko-fi.com/error311) buy me a coffee.
+
+Every bit helps me keep FileRise fast, polished, and well-maintained. Thank you!
+
+---
+
 ## Community and Support
 
 - **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).

public/css/styles.css

@@ -2036,10 +2036,9 @@ body.dark-mode .admin-panel-content label {
 }
 
 #openChangePasswordModalBtn {
-  width: auto;
+  width: max-content;
-  padding: 5px 10px;
+  padding: 6px 12px;
   font-size: 14px;
-  margin-right: 300px;
 }
 
 #changePasswordModal {

public/js/adminPanel.js

@@ -4,10 +4,19 @@ import { loadAdminConfigFunc } from './auth.js';
 import { showToast, toggleVisibility, attachEnterKeyListener } from './domUtils.js';
 import { sendRequest } from './networkUtils.js';
 
-const version = "v1.6.1";
+const version = "v1.6.3";
 const adminTitle = `${t("admin_panel")} <small style="font-size:12px;color:gray;">${version}</small>`;
 
 
+function buildFullGrantsForAllFolders(folders) {
+  const allTrue = {
+    view:true, viewOwn:false, manage:true, create:true, upload:true, edit:true,
+    rename:true, copy:true, move:true, delete:true, extract:true,
+    shareFile:true, shareFolder:true, share:true
+  };
+  return folders.reduce((acc, f) => { acc[f] = { ...allTrue }; return acc; }, {});
+}
+
 /* === BEGIN: Folder Access helpers (merged + improved) === */
 function qs(scope, sel){ return (scope||document).querySelector(sel); }
 function qsa(scope, sel){ return Array.from((scope||document).querySelectorAll(sel)); }
@@ -194,6 +203,25 @@ async function safeJson(res) {
     @media (max-width: 900px) {
       .folder-access-list { --col-perm: 72px; --col-folder-min: 240px; }
     }
+
+    /* Folder cell: horizontal-only scroll */
+  .folder-cell{
+    overflow-x:auto;
+    overflow-y:hidden;
+    white-space:nowrap;
+    -webkit-overflow-scrolling:touch;
+  }
+  /* nicer thin scrollbar (supported browsers) */
+  .folder-cell::-webkit-scrollbar{ height:8px; }
+  .folder-cell::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.25); border-radius:4px; }
+  body.dark-mode .folder-cell::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); }
+
+  /* Badge now doesn't clip; let the wrapper handle scroll */
+  .folder-badge{
+    display:inline-flex; align-items:center; gap:6px;
+    font-weight:600;
+    min-width:0; /* allow child to be as wide as needed inside scroller */
+  }
   `;
   document.head.appendChild(style);
 })();
@@ -617,21 +645,29 @@ export async function closeAdminPanel() {
    New: Folder Access (ACL) UI
    =========================== */
 
-let __allFoldersCache = null; // array of folder strings
+   let __allFoldersCache = null;
-async function getAllFolders() {
+
-  if (__allFoldersCache) return __allFoldersCache.slice();
+   async function getAllFolders(force = false) {
-  const res = await fetch('/api/folder/getFolderList.php', { credentials: 'include' });
+     if (!force && __allFoldersCache) return __allFoldersCache.slice();
-  const data = await safeJson(res).catch(() => []);
+   
-  const list = Array.isArray(data)
+     const res = await fetch('/api/folder/getFolderList.php?ts=' + Date.now(), {
-    ? data.map(x => (typeof x === 'string' ? x : x.folder)).filter(Boolean)
+       credentials: 'include',
-    : [];
+       cache: 'no-store',
-  const hidden = new Set(["profile_pics", "trash"]);
+       headers: { 'Cache-Control': 'no-store' }
-  const cleaned = list
+     });
-    .filter(f => f && !hidden.has(f.toLowerCase()))
+     const data = await safeJson(res).catch(() => []);
-    .sort((a, b) => (a === 'root' ? -1 : b === 'root' ? 1 : a.localeCompare(b)));
+     const list = Array.isArray(data)
-  __allFoldersCache = cleaned;
+       ? data.map(x => (typeof x === 'string' ? x : x.folder)).filter(Boolean)
-  return cleaned.slice();
+       : [];
-}
+   
+     const hidden = new Set(['profile_pics', 'trash']);
+     const cleaned = list
+       .filter(f => f && !hidden.has(f.toLowerCase()))
+       .sort((a, b) => (a === 'root' ? -1 : b === 'root' ? 1 : a.localeCompare(b)));
+   
+     __allFoldersCache = cleaned;
+     return cleaned.slice();
+   }
 
 async function getUserGrants(username) {
   const res = await fetch(`/api/admin/acl/getGrants.php?user=${encodeURIComponent(username)}`, {
@@ -673,8 +709,10 @@ function renderFolderGrantsUI(username, container, folders, grants) {
   container.appendChild(list);
 
   const headerHtml = `
-  <div class="folder-access-header">
+    <div class="folder-access-header">
-    <div title="${tf('folder_help', 'Folder path within FileRise')}">${tf('folder', 'Folder')}</div>
+    <div class="folder-cell" title="${tf('folder_help','Folder path within FileRise')}">
+      ${tf('folder','Folder')}
+    </div>
     <div class="perm-col" title="${tf('view_all_help', 'See all files in this folder (everyone’s files)')}">${tf('view_all', 'View (all)')}</div>
     <div class="perm-col" title="${tf('view_own_help', 'See only files you uploaded in this folder')}">${tf('view_own', 'View (own)')}</div>
     <div class="perm-col" title="${tf('write_help', 'Meta: toggles all write operations (below) on/off for this row')}">${tf('write_full', 'Write')}</div>
@@ -698,7 +736,13 @@ function renderFolderGrantsUI(username, container, folders, grants) {
     const shareFolderDisabled = !g.view;
     return `
       <div class="folder-access-row" data-folder="${folder}">
-        <div class="folder-badge"><i class="material-icons" style="font-size:18px;">folder</i>${name}<span class="inherited-tag" style="display:none;"></span></div>
+    <div class="folder-cell">
+      <div class="folder-badge">
+        <i class="material-icons" style="font-size:18px;">folder</i>
+        ${name}
+        <span class="inherited-tag" style="display:none;"></span>
+      </div>
+    </div>
         <div class="perm-col"><input type="checkbox" data-cap="view"      ${g.view ? 'checked' : ''}></div>
         <div class="perm-col"><input type="checkbox" data-cap="viewOwn"   ${g.viewOwn ? 'checked' : ''}></div>
         <div class="perm-col"><input type="checkbox" data-cap="write"     ${writeMetaChecked ? 'checked' : ''}></div>
@@ -999,15 +1043,16 @@ export function openUserPermissionsModal() {
     });
     document.getElementById("saveUserPermissionsBtn").addEventListener("click", async () => {
       const rows = userPermissionsModal.querySelectorAll(".user-permission-row");
-      const changes = [];
+const changes = [];
-      rows.forEach(row => {
+rows.forEach(row => {
-        const username = String(row.getAttribute("data-username") || "").trim();
+  if (row.getAttribute("data-admin") === "1") return; // skip admins
-        if (!username) return;
+  const username = String(row.getAttribute("data-username") || "").trim();
-        const grantsBox = row.querySelector(".folder-grants-box");
+  if (!username) return;
-        if (!grantsBox || grantsBox.getAttribute('data-loaded') !== '1') return;
+  const grantsBox = row.querySelector(".folder-grants-box");
-        const grants = collectGrantsFrom(grantsBox);
+  if (!grantsBox || grantsBox.getAttribute('data-loaded') !== '1') return;
-        changes.push({ user: username, grants });
+  const grants = collectGrantsFrom(grantsBox);
-      });
+  changes.push({ user: username, grants });
+});
       try {
         if (changes.length === 0) { showToast(tf("nothing_to_save", "Nothing to save")); return; }
         await sendRequest("/api/admin/acl/saveGrants.php", "POST",
@@ -1053,14 +1098,17 @@ async function fetchAllUserFlags() {
 function flagRow(u, flags) {
   const f = flags[u.username] || {};
   const isAdmin = String(u.role) === "1" || u.username.toLowerCase() === "admin";
-  if (isAdmin) return "";
+
+  const disabledAttr = isAdmin ? "disabled data-admin='1' title='Admin: full access'" : "";
+  const note = isAdmin ? " <span class='muted'>(Admin)</span>" : "";
+
   return `
-    <tr data-username="${u.username}">
+    <tr data-username="${u.username}" ${isAdmin ? "data-admin='1'" : ""}>
-      <td><strong>${u.username}</strong></td>
+      <td><strong>${u.username}</strong>${note}</td>
-      <td style="text-align:center;"><input type="checkbox" data-flag="readOnly"        ${f.readOnly ? "checked" : ""}></td>
+      <td style="text-align:center;"><input type="checkbox" data-flag="readOnly"        ${f.readOnly ? "checked" : ""} ${disabledAttr}></td>
-      <td style="text-align:center;"><input type="checkbox" data-flag="disableUpload"   ${f.disableUpload ? "checked" : ""}></td>
+      <td style="text-align:center;"><input type="checkbox" data-flag="disableUpload"   ${f.disableUpload ? "checked" : ""} ${disabledAttr}></td>
-      <td style="text-align:center;"><input type="checkbox" data-flag="canShare"        ${f.canShare ? "checked" : ""}></td>
+      <td style="text-align:center;"><input type="checkbox" data-flag="canShare"        ${f.canShare ? "checked" : ""} ${disabledAttr}></td>
-      <td style="text-align:center;"><input type="checkbox" data-flag="bypassOwnership" ${f.bypassOwnership ? "checked" : ""}></td>
+      <td style="text-align:center;"><input type="checkbox" data-flag="bypassOwnership" ${f.bypassOwnership ? "checked" : ""} ${disabledAttr}></td>
     </tr>
   `;
 }
@@ -1092,7 +1140,7 @@ export async function openUserFlagsModal() {
 
         <h3>${tf("user_permissions", "User Permissions")}</h3>
         <p class="muted" style="margin-top:-6px;">
-          ${tf("user_flags_help", "Account-level switches. These are NOT per-folder grants.")}
+          ${tf("user_flags_help", "Non Admin User Account-level switches. These are NOT per-folder grants.")}
         </p>
 
         <div id="userFlagsBody"
@@ -1141,7 +1189,7 @@ async function loadUserFlagsList() {
             <th>${t("read_only")}</th>
             <th>${t("disable_upload")}</th>
             <th>${t("can_share")}</th>
-            <th>bypassOwnership</th>
+            <th>${t("bypass_ownership")}</th>
           </tr>
         </thead>
         <tbody>${rows || `<tr><td colspan="6">${t("no_users_found")}</td></tr>`}</tbody>
@@ -1158,6 +1206,7 @@ async function saveUserFlags() {
   const rows = body?.querySelectorAll("tbody tr[data-username]") || [];
   const permissions = [];
   rows.forEach(tr => {
+    if (tr.getAttribute("data-admin") === "1") return; // don't send admin updates
     const username = tr.getAttribute("data-username");
     const get = k => tr.querySelector(`input[data-flag="${k}"]`).checked;
     permissions.push({
@@ -1201,61 +1250,73 @@ async function loadUserPermissionsList() {
       return;
     }
 
-    const folders = await getAllFolders();
+    const folders = await getAllFolders(true);
 
     listContainer.innerHTML = "";
-    users.forEach(user => {
+users.forEach(user => {
-      if ((user.role && String(user.role) === "1") || String(user.username).toLowerCase() === "admin") return;
+  const isAdmin = (user.role && String(user.role) === "1") || String(user.username).toLowerCase() === "admin";
 
-      const row = document.createElement("div");
+  const row = document.createElement("div");
-      row.classList.add("user-permission-row");
+  row.classList.add("user-permission-row");
-      row.setAttribute("data-username", user.username);
+  row.setAttribute("data-username", user.username);
-      row.style.padding = "6px 0";
+  if (isAdmin) row.setAttribute("data-admin", "1"); // mark admins
+  row.style.padding = "6px 0";
 
-      row.innerHTML = `
+  row.innerHTML = `
-        <div class="user-perm-header" tabindex="0" role="button" aria-expanded="false"
+    <div class="user-perm-header" tabindex="0" role="button" aria-expanded="false"
-             style="display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 8px;border-radius:6px;">
+         style="display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 8px;border-radius:6px;">
-          <span class="perm-caret" style="display:inline-block; transform: rotate(-90deg); transition: transform 120ms ease;">▸</span>
+      <span class="perm-caret" style="display:inline-block; transform: rotate(-90deg); transition: transform 120ms ease;">▸</span>
-          <strong>${user.username}</strong>
+      <strong>${user.username}</strong>
-          <span class="muted" style="margin-left:auto;">${tf('click_to_edit', 'Click to edit')}</span>
+      ${isAdmin ? `<span class="muted" style="margin-left:auto;">Admin (full access)</span>`
-        </div>
+                : `<span class="muted" style="margin-left:auto;">${tf('click_to_edit', 'Click to edit')}</span>`}
-        <div class="user-perm-details" style="display:none; margin:8px 0 12px;">
+    </div>
-          <div class="folder-grants-box" data-loaded="0"></div>
+    <div class="user-perm-details" style="display:none; margin:8px 0 12px;">
-        </div>
+      <div class="folder-grants-box" data-loaded="0"></div>
-      `;
+    </div>
+  `;
 
-      const header = row.querySelector(".user-perm-header");
+  const header = row.querySelector(".user-perm-header");
-      const details = row.querySelector(".user-perm-details");
+  const details = row.querySelector(".user-perm-details");
-      const caret = row.querySelector(".perm-caret");
+  const caret = row.querySelector(".perm-caret");
-      const grantsBox = row.querySelector(".folder-grants-box");
+  const grantsBox = row.querySelector(".folder-grants-box");
 
-      async function ensureLoaded() {
+  async function ensureLoaded() {
-        if (grantsBox.dataset.loaded === "1") return;
+    if (grantsBox.dataset.loaded === "1") return;
-        try {
+    try {
-          const grants = await getUserGrants(user.username);
+      let grants;
-          renderFolderGrantsUI(user.username, grantsBox, ["root", ...folders.filter(f => f !== "root")], grants);
+      if (isAdmin) {
-          grantsBox.dataset.loaded = "1";
+        // synthesize full access
-        } catch (e) {
+        const ordered = ["root", ...folders.filter(f => f !== "root")];
-          console.error(e);
+        grants = buildFullGrantsForAllFolders(ordered);
-          grantsBox.innerHTML = `<div class="muted">${tf("error_loading_user_grants", "Error loading user grants")}</div>`;
+        renderFolderGrantsUI(user.username, grantsBox, ordered, grants);
-        }
+        // disable all inputs
+        grantsBox.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.disabled = true);
+      } else {
+        const userGrants = await getUserGrants(user.username);
+        renderFolderGrantsUI(user.username, grantsBox, ["root", ...folders.filter(f => f !== "root")], userGrants);
       }
+      grantsBox.dataset.loaded = "1";
+    } catch (e) {
+      console.error(e);
+      grantsBox.innerHTML = `<div class="muted">${tf("error_loading_user_grants", "Error loading user grants")}</div>`;
+    }
+  }
 
-      function toggleOpen() {
+  function toggleOpen() {
-        const willShow = details.style.display === "none";
+    const willShow = details.style.display === "none";
-        details.style.display = willShow ? "block" : "none";
+    details.style.display = willShow ? "block" : "none";
-        header.setAttribute("aria-expanded", willShow ? "true" : "false");
+    header.setAttribute("aria-expanded", willShow ? "true" : "false");
-        caret.style.transform = willShow ? "rotate(0deg)" : "rotate(-90deg)";
+    caret.style.transform = willShow ? "rotate(0deg)" : "rotate(-90deg)";
-        if (willShow) ensureLoaded();
+    if (willShow) ensureLoaded();
-      }
+  }
 
-      header.addEventListener("click", toggleOpen);
+  header.addEventListener("click", toggleOpen);
-      header.addEventListener("keydown", e => {
+  header.addEventListener("keydown", e => {
-        if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleOpen(); }
+    if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleOpen(); }
-      });
+  });
 
-      listContainer.appendChild(row);
+  listContainer.appendChild(row);
-    });
+});
   } catch (err) {
     console.error(err);
     listContainer.innerHTML = "<p>" + t("error_loading_users") + "</p>";

public/js/authModals.js

@@ -328,10 +328,19 @@ export async function openUserPanel() {
     const langSel = document.createElement('select');
     langSel.id = 'languageSelector';
     langSel.className = 'form-select';
-    ['en', 'es', 'fr', 'de'].forEach(code => {
+    const languages = [
+      { code: 'en',    labelKey: 'english',             fallback: 'English' },
+      { code: 'es',    labelKey: 'spanish',             fallback: 'Español' },
+      { code: 'fr',    labelKey: 'french',              fallback: 'Français' },
+      { code: 'de',    labelKey: 'german',              fallback: 'Deutsch' },
+      { code: 'zh-CN', labelKey: 'chinese_simplified',  fallback: '简体中文' },
+    ];
+    
+    languages.forEach(({ code, labelKey, fallback }) => {
       const opt = document.createElement('option');
       opt.value = code;
-      opt.textContent = t(code === 'en' ? 'english' : code === 'es' ? 'spanish' : code === 'fr' ? 'french' : 'german');
+      // use i18n if available, otherwise fallback
+      opt.textContent = (typeof t === 'function' ? t(labelKey) : '') || fallback;
       langSel.appendChild(opt);
     });
     langSel.value = localStorage.getItem('language') || 'en';

public/js/dragAndDrop.js

@@ -8,11 +8,216 @@
 const MEDIUM_MIN = 1205;      // matches your small-screen cutoff
 const MEDIUM_MAX = 1600;      // tweak as you like
 
-const TOGGLE_TOP_PX = 10;  
+const TOGGLE_TOP_PX = 10;
 const TOGGLE_LEFT_PX = 100;
 
-const TOGGLE_ICON_OPEN   = 'view_sidebar';
+const TOGGLE_ICON_OPEN = 'view_sidebar';
-const TOGGLE_ICON_CLOSED = 'menu';  
+const TOGGLE_ICON_CLOSED = 'menu';
+
+// Cards we manage
+const KNOWN_CARD_IDS = ['uploadCard', 'folderManagementCard'];
+
+const CARD_IDS = ['uploadCard', 'folderManagementCard'];
+
+function getKnownCards() {
+  return CARD_IDS
+    .map(id => document.getElementById(id))
+    .filter(Boolean);
+}
+
+// Save current container for each card so we can restore after refresh.
+function snapshotZoneLocations() {
+  const snap = {};
+  getKnownCards().forEach(card => {
+    const p = card.parentNode;
+    snap[card.id] = p && p.id ? p.id : '';
+  });
+  localStorage.setItem('zonesSnapshot', JSON.stringify(snap));
+}
+
+// Move a card to default expanded spot (your request: sidebar is default).
+function moveCardToSidebarDefault(card) {
+  const sidebar = getSidebar();
+  if (sidebar) {
+    sidebar.appendChild(card);
+    card.style.width = '100%';
+    animateVerticalSlide(card);
+  }
+}
+
+// Remove any header icon/modal for a card (so it truly leaves header mode).
+function stripHeaderArtifacts(card) {
+  if (card.headerIconButton) {
+    if (card.headerIconButton.modalInstance) {
+      try { card.headerIconButton.modalInstance.remove(); } catch { }
+    }
+    try { card.headerIconButton.remove(); } catch { }
+    card.headerIconButton = null;
+  }
+}
+
+// Restore cards after “expand” (toggle off) or after refresh.
+// - If we have a snapshot, use it.
+// - If not, put all cards in the sidebar (your default).
+function restoreCardsFromSnapshot() {
+  const sidebar = getSidebar();
+  const leftCol = document.getElementById('leftCol');
+  const rightCol = document.getElementById('rightCol');
+
+  let snap = {};
+  try { snap = JSON.parse(localStorage.getItem('zonesSnapshot') || '{}'); } catch { }
+
+  getKnownCards().forEach(card => {
+    stripHeaderArtifacts(card);
+    const destId = snap[card.id] || 'sidebarDropArea'; // fallback to sidebar
+    const dest =
+      destId === 'leftCol' ? leftCol :
+        destId === 'rightCol' ? rightCol :
+          destId === 'sidebarDropArea' ? sidebar :
+            sidebar; // final fallback
+    card.style.width = '';
+    card.style.minWidth = '';
+    if (dest) dest.appendChild(card);
+  });
+
+  // Clear header icons storage because we’re expanded.
+  localStorage.removeItem('headerOrder');
+  const headerDropArea = document.getElementById('headerDropArea');
+  if (headerDropArea) headerDropArea.innerHTML = '';
+
+  updateTopZoneLayout();
+  updateSidebarVisibility();
+  ensureZonesToggle();
+  updateZonesToggleUI();
+}
+
+// Read the saved snapshot (or {} if none)
+function readZonesSnapshot() {
+  try {
+    return JSON.parse(localStorage.getItem('zonesSnapshot') || '{}');
+  } catch {
+    return {};
+  }
+}
+
+// Move a card into the header zone as an icon (uses your existing helper)
+function moveCardToHeader(card) {
+  // If it's already in header icon form, skip
+  if (card.headerIconButton && card.headerIconButton.parentNode) return;
+  insertCardInHeader(card, null);
+}
+
+// Collapse behavior: snapshot locations, then move all known cards to header as icons
+function collapseCardsToHeader() {
+  const headerDropArea = document.getElementById('headerDropArea');
+  if (headerDropArea) headerDropArea.style.display = 'inline-flex'; // NEW
+
+  getKnownCards().forEach(card => {
+    if (!card.headerIconButton) insertCardInHeader(card, null);
+  });
+
+  updateTopZoneLayout();
+  updateSidebarVisibility();
+  ensureZonesToggle();
+  updateZonesToggleUI();
+}
+
+// Clean up any header icon (button + modal) attached to a card
+function removeHeaderIconForCard(card) {
+  if (card.headerIconButton) {
+    const btn = card.headerIconButton;
+    const modal = btn.modalInstance;
+    if (btn.parentNode) btn.parentNode.removeChild(btn);
+    if (modal && modal.parentNode) modal.parentNode.removeChild(modal);
+    card.headerIconButton = null;
+  }
+}
+
+// New: small-screen detector
+function isSmallScreen() { return window.innerWidth < MEDIUM_MIN; }
+
+// New: remember which cards were in the sidebar right before we go small
+const RESPONSIVE_SNAPSHOT_KEY = 'responsiveSidebarSnapshot';
+
+function snapshotSidebarCardsForResponsive() {
+  const sb = getSidebar();
+  if (!sb) return;
+  const ids = Array.from(sb.querySelectorAll('#uploadCard, #folderManagementCard'))
+    .map(el => el.id);
+  localStorage.setItem(RESPONSIVE_SNAPSHOT_KEY, JSON.stringify(ids));
+}
+
+function readResponsiveSnapshot() {
+  try { return JSON.parse(localStorage.getItem(RESPONSIVE_SNAPSHOT_KEY) || '[]'); }
+  catch { return []; }
+}
+
+function clearResponsiveSnapshot() {
+  localStorage.removeItem(RESPONSIVE_SNAPSHOT_KEY);
+}
+
+// New: deterministic mapping from card -> top column
+function moveCardToTopByMapping(card) {
+  const leftCol  = document.getElementById('leftCol');
+  const rightCol = document.getElementById('rightCol');
+  if (!leftCol || !rightCol) return;
+
+  const target = (card.id === 'uploadCard') ? leftCol :
+                 (card.id === 'folderManagementCard') ? rightCol : leftCol;
+
+  // clear any sticky widths from sidebar/header
+  card.style.width = '';
+  card.style.minWidth = '';
+  target.appendChild(card);
+  card.dataset.originalContainerId = target.id;
+  animateVerticalSlide(card);
+}
+
+// New: move all sidebar cards to top (used when we cross into small)
+function moveAllSidebarCardsToTop() {
+  const sb = getSidebar();
+  if (!sb) return;
+  const cards = Array.from(sb.querySelectorAll('#uploadCard, #folderManagementCard'));
+  cards.forEach(moveCardToTopByMapping);
+  updateTopZoneLayout();
+  updateSidebarVisibility();
+}
+
+// New: enforce responsive behavior (sidebar disabled on small screens)
+let __lastIsSmall = null;
+
+function enforceResponsiveZones() {
+  const isSmall = isSmallScreen();
+  const sidebar = getSidebar();
+  const topZone = getTopZone();
+
+  if (isSmall && __lastIsSmall !== true) {
+    // entering small: remember what was in sidebar, move them up, hide sidebar
+    snapshotSidebarCardsForResponsive();
+    moveAllSidebarCardsToTop();
+    if (sidebar) sidebar.style.display = 'none';
+    if (topZone)  topZone.style.display = ''; // ensure visible
+    __lastIsSmall = true;
+  } else if (!isSmall && __lastIsSmall !== false) {
+    // leaving small: restore only what used to be in the sidebar
+    const ids = readResponsiveSnapshot();
+    const sb = getSidebar();
+    ids.forEach(id => {
+      const card = document.getElementById(id);
+      if (card && sb && !sb.contains(card)) {
+        sb.appendChild(card);
+        card.style.width = '100%';
+      }
+    });
+    clearResponsiveSnapshot();
+    // show sidebar again if panels aren’t collapsed
+    if (sidebar) sidebar.style.display = isZonesCollapsed() ? 'none' : 'block';
+    updateTopZoneLayout();
+    updateSidebarVisibility();
+    __lastIsSmall = false;
+  }
+}
+
 
 function updateSidebarToggleUI() {
   const btn = document.getElementById('sidebarToggleFloating');
@@ -22,9 +227,8 @@ function updateSidebarToggleUI() {
   if (!hasSidebarCards()) { btn.remove(); return; }
 
   const collapsed = isSidebarCollapsed();
-  btn.innerHTML = `<i class="material-icons" aria-hidden="true">${
+  btn.innerHTML = `<i class="material-icons" aria-hidden="true">${collapsed ? TOGGLE_ICON_CLOSED : TOGGLE_ICON_OPEN
-    collapsed ? TOGGLE_ICON_CLOSED : TOGGLE_ICON_OPEN
+    }</i>`;
-  }</i>`;
   btn.title = collapsed ? 'Show sidebar' : 'Hide sidebar';
   btn.style.display = 'block';
   btn.classList.toggle('toggle-ping', collapsed);
@@ -43,28 +247,45 @@ function hasTopZoneCards() {
 
 // Both cards are in the top zone (upload + folder)
 function allCardsInTopZone() {
-    const tz = getTopZone();
+  const tz = getTopZone();
-    if (!tz) return false;
+  if (!tz) return false;
-    const hasUpload  = !!tz.querySelector('#uploadCard');
+  const hasUpload = !!tz.querySelector('#uploadCard');
-    const hasFolder  = !!tz.querySelector('#folderManagementCard');
+  const hasFolder = !!tz.querySelector('#folderManagementCard');
-    return hasUpload && hasFolder;
+  return hasUpload && hasFolder;
-  }
+}
 
 function isZonesCollapsed() {
   return localStorage.getItem('zonesCollapsed') === '1';
 }
 function setZonesCollapsed(collapsed) {
   localStorage.setItem('zonesCollapsed', collapsed ? '1' : '0');
-  applyZonesCollapsed();
+
+  if (collapsed) {
+    // Remember where cards were, then show them as header icons
+    snapshotZoneLocations();
+    collapseCardsToHeader();     // your existing helper that calls insertCardInHeader(...)
+  } else {
+    // Expand: bring cards back
+    restoreCardsFromSnapshot();
+
+    // Ensure zones are visible right away after expand
+    const sidebar = getSidebar();
+    const topZone = getTopZone();
+    if (sidebar) sidebar.style.display = 'block';
+    if (topZone) topZone.style.display = '';
+  }
+
+  ensureZonesToggle();
   updateZonesToggleUI();
 }
+
 function applyZonesCollapsed() {
   const collapsed = isZonesCollapsed();
   const sidebar = getSidebar();
   const topZone = getTopZone();
 
   if (sidebar) sidebar.style.display = collapsed ? 'none' : (hasSidebarCards() ? 'block' : 'none');
-  if (topZone)  topZone.style.display  = collapsed ? 'none' : (hasTopZoneCards()  ? ''      : '');
+  if (topZone) topZone.style.display = collapsed ? 'none' : (hasTopZoneCards() ? '' : '');
 }
 
 function isMediumScreen() {
@@ -101,14 +322,7 @@ function applySidebarCollapsed() {
 }
 
 function ensureZonesToggle() {
-  // show only if at least one zone *can* show a card
-  const shouldShow = hasSidebarCards() || hasTopZoneCards();
-
   let btn = document.getElementById('sidebarToggleFloating');
-  if (!shouldShow) {
-    if (btn) btn.remove();
-    return;
-  }
   if (!btn) {
     btn = document.createElement('button');
     btn.id = 'sidebarToggleFloating';
@@ -126,11 +340,11 @@ function ensureZonesToggle() {
       background: '#fff',
       cursor: 'pointer',
       boxShadow: '0 2px 6px rgba(0,0,0,.15)',
-        display: 'flex',
+      display: 'flex',
-        alignItems: 'center',
+      alignItems: 'center',
-        justifyContent: 'center',
+      justifyContent: 'center',
-        padding: '0',
+      padding: '0',
-        lineHeight: '0',
+      lineHeight: '0',
     });
     btn.addEventListener('click', () => {
       setZonesCollapsed(!isZonesCollapsed());
@@ -139,23 +353,18 @@ function ensureZonesToggle() {
   }
   updateZonesToggleUI();
 }
+
 function updateZonesToggleUI() {
   const btn = document.getElementById('sidebarToggleFloating');
   if (!btn) return;
 
-  // if neither zone has cards, remove the toggle
+  // Never remove the button just because cards are in header.
-  if (!hasSidebarCards() && !hasTopZoneCards()) {
-    btn.remove();
-    return;
-  }
-
   const collapsed = isZonesCollapsed();
   const iconName = collapsed ? TOGGLE_ICON_CLOSED : TOGGLE_ICON_OPEN;
   btn.innerHTML = `<i class="material-icons toggle-icon" aria-hidden="true">${iconName}</i>`;
   btn.title = collapsed ? 'Show panels' : 'Hide panels';
   btn.style.display = 'block';
 
-  // Rotate the icon 90° when BOTH cards are in the top zone and panels are open
   const iconEl = btn.querySelector('.toggle-icon');
   if (iconEl) {
     iconEl.style.transition = 'transform 0.2s ease';
@@ -228,27 +437,35 @@ export function loadSidebarOrder() {
   const headerOrderStr = localStorage.getItem('headerOrder');
   const defaultAppliedKey = 'layoutDefaultApplied_v1'; // bump if logic changes
 
-  // If we have a saved order (sidebar), honor it as before
+
-  if (orderStr) {
+  // One-time default: if no saved order and no header order,
-    const order = JSON.parse(orderStr || '[]');
+// put cards into the sidebar on all ≥ MEDIUM_MIN screens.
-    if (Array.isArray(order) && order.length > 0) {
+if ((!orderStr || !JSON.parse(orderStr || '[]').length) &&
-      const mainWrapper = document.querySelector('.main-wrapper');
+(!headerOrderStr || !JSON.parse(headerOrderStr || '[]').length)) {
-      if (mainWrapper) mainWrapper.style.display = 'flex';
+
-      order.forEach(id => {
+const isLargeEnough = window.innerWidth >= MEDIUM_MIN;
-        const card = document.getElementById(id);
+if (isLargeEnough) {
-        if (card && card.parentNode?.id !== 'sidebarDropArea') {
+const mainWrapper = document.querySelector('.main-wrapper');
-          sidebar.appendChild(card);
+if (mainWrapper) mainWrapper.style.display = 'flex';
-          animateVerticalSlide(card);
+
-        }
+const moved = [];
-      });
+['uploadCard', 'folderManagementCard'].forEach(id => {
-      updateSidebarVisibility();
+  const card = document.getElementById(id);
-      //applySidebarCollapsed();   // NEW: honor collapsed state
+  if (card && card.parentNode?.id !== 'sidebarDropArea') {
-      //ensureSidebarToggle();     // NEW: inject toggle
+    // clear any sticky widths from header/top
-      applyZonesCollapsed();
+    card.style.width = '';
-      ensureZonesToggle();
+    card.style.minWidth = '';
-      
+    getSidebar().appendChild(card);
-      return;
+    animateVerticalSlide(card);
-    }
+    moved.push(id);
+  }
+});
+
+if (moved.length) {
+  localStorage.setItem('sidebarOrder', JSON.stringify(moved));
+}
+}
+
   }
 
   // No sidebar order saved yet: if user has header icons saved, do nothing (they've customized)
@@ -258,7 +475,7 @@ export function loadSidebarOrder() {
     //applySidebarCollapsed();
     //ensureSidebarToggle();
     applyZonesCollapsed();
-      ensureZonesToggle();
+    ensureZonesToggle();
     return;
   }
 
@@ -289,34 +506,28 @@ export function loadSidebarOrder() {
   //applySidebarCollapsed();
   //ensureSidebarToggle();
   applyZonesCollapsed();
-      ensureZonesToggle();
+  ensureZonesToggle();
 }
 
 export function loadHeaderOrder() {
   const headerDropArea = document.getElementById('headerDropArea');
   if (!headerDropArea) return;
 
-  // 1) Clear out any icons that might already be in the drop area
+  // If panels are expanded, do not re-create header icons.
-  headerDropArea.innerHTML = '';
+  if (!isZonesCollapsed()) {
-
+    headerDropArea.innerHTML = '';
-  // 2) Read the saved array (or empty array if invalid/missing)
+    localStorage.removeItem('headerOrder');
-  let stored;
+    return;
-  try {
-    stored = JSON.parse(localStorage.getItem('headerOrder') || '[]');
-  } catch {
-    stored = [];
   }
 
-  // 3) Deduplicate IDs
+  headerDropArea.innerHTML = '';
+  let stored;
+  try { stored = JSON.parse(localStorage.getItem('headerOrder') || '[]'); } catch { stored = []; }
   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));
 }
 
@@ -332,13 +543,13 @@ function updateSidebarVisibility() {
   sidebar.style.height = '';
 
   if (anyCards) {
-        sidebar.classList.add('active');
+    sidebar.classList.add('active');
-        // respect the unified zones-collapsed switch
+    // respect the unified zones-collapsed switch
-        sidebar.style.display = isZonesCollapsed() ? 'none' : 'block';
+    sidebar.style.display = isZonesCollapsed() ? 'none' : 'block';
-      } else {
+  } else {
-        sidebar.classList.remove('active');
+    sidebar.classList.remove('active');
-        sidebar.style.display = 'none';
+    sidebar.style.display = 'none';
-      }
+  }
 
   // Save order and update toggle visibility
   saveSidebarOrder();
@@ -358,19 +569,22 @@ function saveHeaderOrder() {
 
 // Internal helper: update top zone layout (center a card if one column is empty).
 function updateTopZoneLayout() {
+  const topZone = getTopZone();
   const leftCol = document.getElementById('leftCol');
   const rightCol = document.getElementById('rightCol');
 
-  const leftIsEmpty = !leftCol?.querySelector('#uploadCard');
+  const hasUpload  = !!topZone?.querySelector('#uploadCard');
-  const rightIsEmpty = !rightCol?.querySelector('#folderManagementCard');
+  const hasFolder  = !!topZone?.querySelector('#folderManagementCard');
 
   if (leftCol && rightCol) {
-    if (leftIsEmpty && !rightIsEmpty) {
+    if (hasUpload && !hasFolder) {
-      leftCol.style.display = 'none';
-      rightCol.style.margin = '0 auto';
-    } else if (rightIsEmpty && !leftIsEmpty) {
       rightCol.style.display = 'none';
       leftCol.style.margin = '0 auto';
+      leftCol.style.display = '';
+    } else if (!hasUpload && hasFolder) {
+      leftCol.style.display = 'none';
+      rightCol.style.margin = '0 auto';
+      rightCol.style.display = '';
     } else {
       leftCol.style.display = '';
       rightCol.style.display = '';
@@ -378,6 +592,9 @@ function updateTopZoneLayout() {
       rightCol.style.margin = '';
     }
   }
+
+  // hide whole top row when empty (kills the gap)
+  if (topZone) topZone.style.display = (hasUpload || hasFolder) ? '' : 'none';
 }
 
 // When a card is being dragged, if the top drop zone is empty, set its min-height.
@@ -422,6 +639,7 @@ function animateVerticalSlide(card) {
 function insertCardInSidebar(card, event) {
   const sidebar = getSidebar();
   if (!sidebar) return;
+
   const existingCards = Array.from(sidebar.querySelectorAll('#uploadCard, #folderManagementCard'));
   let inserted = false;
   for (const currentCard of existingCards) {
@@ -433,14 +651,19 @@ function insertCardInSidebar(card, event) {
       break;
     }
   }
-  if (!inserted) {
+  if (!inserted) sidebar.appendChild(card);
-    sidebar.appendChild(card);
+
-  }
+  // Make it fill the sidebar and clear any sticky width from header/top zone.
-  // Ensure card fills the sidebar.
   card.style.width = '100%';
+  removeHeaderIconForCard(card);           // NEW: remove any header artifacts
+  card.dataset.originalContainerId = 'sidebarDropArea';
   animateVerticalSlide(card);
-  // if user dropped into sidebar, auto-un-collapse if currently collapsed
+
-  if (isZonesCollapsed()) setZonesCollapsed(false);
+  // SAVE order & refresh minimal UI, but DO NOT collapse/restore here:
+  saveSidebarOrder();
+  updateSidebarVisibility();
+  ensureZonesToggle();
+  updateZonesToggleUI();
 }
 
 // Internal helper: save the current sidebar card order to localStorage.
@@ -472,16 +695,55 @@ function moveSidebarCardsToTop() {
 }
 
 // Listen for window resize to automatically move sidebar cards back to top on small screens.
-window.addEventListener('resize', function () {
+(function () {
-  if (window.innerWidth < 1205) {
+  let rAF = null;
-    moveSidebarCardsToTop();
+  window.addEventListener('resize', () => {
+    if (rAF) cancelAnimationFrame(rAF);
+    rAF = requestAnimationFrame(() => {
+      enforceResponsiveZones();
+    });
+  });
+})();
+
+function showTopZoneWhileDragging() {
+  const topZone = getTopZone();
+  if (!topZone) return;
+  topZone.style.display = '';                 // make it droppable
+  // add a temporary placeholder only if empty
+  if (topZone.querySelectorAll('#uploadCard, #folderManagementCard').length === 0) {
+    let ph = topZone.querySelector('.placeholder');
+    if (!ph) {
+      ph = document.createElement('div');
+      ph.className = 'placeholder';
+      ph.style.visibility = 'hidden';
+      ph.style.display = 'block';
+      ph.style.width = '100%';
+      ph.style.height = '375px';
+      topZone.appendChild(ph);
+    }
   }
-});
+}
+
+function cleanupTopZoneAfterDrop() {
+  const topZone = getTopZone();
+  if (!topZone) return;
+
+  // remove placeholder and highlight/minHeight no matter what
+  const ph = topZone.querySelector('.placeholder');
+  if (ph) ph.remove();
+  topZone.classList.remove('highlight');
+  topZone.style.minHeight = '';
+
+  // if no cards left, hide the whole row to remove the gap
+  const hasAny = topZone.querySelectorAll('#uploadCard, #folderManagementCard').length > 0;
+  topZone.style.display = hasAny ? '' : 'none';
+}
 
 // This function ensures the top drop zone (#uploadFolderRow) has a stable width when empty.
 function ensureTopZonePlaceholder() {
   const topZone = document.getElementById('uploadFolderRow');
   if (!topZone) return;
+  topZone.style.display = '';
   if (topZone.querySelectorAll('#uploadCard, #folderManagementCard').length === 0) {
     let placeholder = topZone.querySelector('.placeholder');
     if (!placeholder) {
@@ -578,6 +840,8 @@ function insertCardInHeader(card, event) {
         border: 'none',
         padding: '0',
         boxShadow: 'none',
+        maxWidth: '440px',   // NEW: keep card from overflowing center content
+        width: 'max-content' // NEW
       });
       document.body.appendChild(modal);
       modal.addEventListener('mouseover', handleMouseOver);
@@ -586,9 +850,10 @@ function insertCardInHeader(card, event) {
     }
     if (!modal.contains(card)) {
       const hiddenContainer = document.getElementById('hiddenCardsContainer');
-      if (hiddenContainer && hiddenContainer.contains(card)) {
+      if (hiddenContainer && hiddenContainer.contains(card)) hiddenContainer.removeChild(card);
-        hiddenContainer.removeChild(card);
+      // Clear sticky widths before placing in modal
-      }
+      card.style.width = '';
+      card.style.minWidth = '';
       modal.appendChild(card);
     }
     modal.style.visibility = 'visible';
@@ -638,10 +903,13 @@ function insertCardInHeader(card, event) {
 export function initDragAndDrop() {
   function run() {
     // make sure toggle exists even if user hasn't dragged yet
-   // ensureSidebarToggle();
+    loadSidebarOrder();
-    //applySidebarCollapsed();
+    loadHeaderOrder();
+
+    // 2) Then paint visibility/toggle
     applyZonesCollapsed();
-      ensureZonesToggle();
+    ensureZonesToggle();
+    updateZonesToggleUI();
 
     const draggableCards = document.querySelectorAll('#uploadCard, #folderManagementCard');
     draggableCards.forEach(card => {
@@ -672,16 +940,24 @@ export function initDragAndDrop() {
             card.classList.add('dragging');
             card.style.pointerEvents = 'none';
             addTopZoneHighlight();
+            showTopZoneWhileDragging();
 
             const sidebar = getSidebar();
             if (sidebar) {
               sidebar.classList.add('active');
-              sidebar.style.display = isSidebarCollapsed() ? 'none' : 'block';
+              sidebar.style.display = isZonesCollapsed() ? 'none' : 'block';
               sidebar.classList.add('highlight');
               sidebar.style.height = '800px';
+              sidebar.style.minWidth = '280px';
             }
 
             showHeaderDropZone();
+            const topZone = getTopZone();
+            if (topZone) 
+              {
+                topZone.style.display = '';
+                ensureTopZonePlaceholder();
+              }
 
             initialLeft = initialRect.left + window.pageXOffset;
             initialTop = initialRect.top + window.pageYOffset;
@@ -728,12 +1004,13 @@ export function initDragAndDrop() {
           isDragging = false;
           card.style.pointerEvents = '';
           card.classList.remove('dragging');
-          removeTopZoneHighlight();
+
 
           const sidebar = getSidebar();
           if (sidebar) {
             sidebar.classList.remove('highlight');
             sidebar.style.height = '';
+            sidebar.style.minWidth = '';
           }
 
           if (card.headerIconButton) {
@@ -760,7 +1037,7 @@ export function initDragAndDrop() {
               e.clientX >= rect.left &&
               e.clientX <= rect.right &&
               e.clientY >= rect.top &&
-              e.clientY <= dropZoneBottom
+              e.clientY <= rect.bottom
             ) {
               insertCardInSidebar(card, e);
               droppedInSidebar = true;
@@ -787,6 +1064,7 @@ export function initDragAndDrop() {
                 ensureTopZonePlaceholder();
                 updateTopZoneLayout();
                 container.appendChild(card);
+                card.dataset.originalContainerId = container.id;
                 droppedInTop = true;
                 card.style.width = "363px";
                 animateVerticalSlide(card);
@@ -843,6 +1121,10 @@ export function initDragAndDrop() {
           updateTopZoneLayout();
           updateSidebarVisibility();
           hideHeaderDropZone();
+
+          cleanupTopZoneAfterDrop();
+          const tz = getTopZone();
+          if (tz) tz.style.minHeight = '';
         }
       });
     });

public/js/i18n.js

@@ -216,6 +216,7 @@ const translations = {
     "spanish": "Spanish",
     "french": "French",
     "german": "German",
+    "chinese_simplified": "Chinese (Simplified)",
     "use_totp_code_instead": "Use TOTP Code instead",
     "submit_recovery_code": "Submit Recovery Code",
     "please_enter_recovery_code": "Please enter your recovery code.",
@@ -275,7 +276,13 @@ const translations = {
     "newfile_placeholder": "New file name",
     "file_created_successfully": "File created successfully!",
     "error_creating_file": "Error creating file",
-    "file_created":          "File created successfully!"
+    "file_created": "File created successfully!",
+    "no_access_to_resource": "You do not have access to this resource.",
+    "can_share": "Can Share",
+    "bypass_ownership": "Bypass Ownership",
+    "error_loading_user_grants": "Error loading user grants",
+    "click_to_edit": "Click to edit",
+    "folder_access": "Folder Access"
   },
   es: {
     "please_log_in_to_continue": "Por favor, inicie sesión para continuar.",
@@ -458,6 +465,7 @@ const translations = {
     "spanish": "Español",
     "french": "Francés",
     "german": "Alemán",
+    "chinese_simplified": "Chino (simplificado)",
     "use_totp_code_instead": "Usar código TOTP en su lugar",
     "submit_recovery_code": "Enviar código de recuperación",
     "please_enter_recovery_code": "Por favor, ingrese su código de recuperación.",
@@ -686,6 +694,7 @@ const translations = {
     "spanish": "Espagnol",
     "french": "Français",
     "german": "Allemand",
+    "chinese_simplified": "Chinois (simplifié)",
     "use_totp_code_instead": "Utiliser le code TOTP à la place",
     "submit_recovery_code": "Soumettre le code de récupération",
     "please_enter_recovery_code": "Veuillez entrer votre code de récupération.",
@@ -923,6 +932,7 @@ const translations = {
     "spanish": "Spanisch",
     "french": "Französisch",
     "german": "Deutsch",
+    "chinese_simplified": "Chinesisch (vereinfacht)",
     "use_totp_code_instead": "Stattdessen TOTP-Code verwenden",
     "submit_recovery_code": "Wiederherstellungscode absenden",
     "please_enter_recovery_code": "Bitte geben Sie Ihren Wiederherstellungscode ein.",
@@ -972,7 +982,275 @@ const translations = {
     "show": "Zeige",
     "items_per_page": "elemente pro seite",
     "columns": "Spalten"
+  },
+  "zh-CN": {
+    "please_log_in_to_continue": "请登录以继续。",
+    "no_files_selected": "未选择文件。",
+    "confirm_delete_files": "确定要删除所选的 {count} 个文件吗？",
+    "element_not_found": "未找到 ID 为 \"{id}\" 的元素。",
+    "search_placeholder": "搜索文件、标签和上传者…",
+    "search_placeholder_advanced": "高级搜索：文件、标签、上传者和内容…",
+    "basic_search_tooltip": "基础搜索：按文件名、标签和上传者搜索。",
+    "advanced_search_tooltip": "高级搜索：包括文件内容、文件名、标签和上传者。",
+    "file_name": "文件名",
+    "date_modified": "修改日期",
+    "upload_date": "上传日期",
+    "file_size": "文件大小",
+    "uploader": "上传者",
+    "enter_totp_code": "输入 TOTP 验证码",
+    "use_recovery_code_instead": "改用恢复代码",
+    "enter_recovery_code": "输入恢复代码",
+    "editing": "正在编辑",
+    "decrease_font": "A-",
+    "increase_font": "A+",
+    "save": "保存",
+    "close": "关闭",
+    "no_files_found": "未找到文件。",
+    "switch_to_table_view": "切换到表格视图",
+    "switch_to_gallery_view": "切换到图库视图",
+    "share_file": "分享文件",
+    "set_expiration": "设置到期时间：",
+    "password_optional": "密码（可选）：",
+    "generate_share_link": "生成分享链接",
+    "shareable_link": "可分享链接：",
+    "copy_link": "复制链接",
+    "tag_file": "标记文件",
+    "tag_name": "标签名称：",
+    "tag_color": "标签颜色：",
+    "save_tag": "保存标签",
+    "light_mode": "浅色模式",
+    "dark_mode": "深色模式",
+    "upload_instruction": "将文件/文件夹拖到此处，或点击“选择文件”",
+    "no_files_selected_default": "未选择文件",
+    "choose_files": "选择文件",
+    "delete_selected": "删除所选",
+    "copy_selected": "复制所选",
+    "move_selected": "移动所选",
+    "tag_selected": "标记所选",
+    "download_zip": "下载 ZIP",
+    "extract_zip": "解压 ZIP",
+    "preview": "预览",
+    "edit": "编辑",
+    "rename": "重命名",
+    "trash_empty": "回收站为空。",
+    "no_trash_selected": "未选择要还原的回收站项目。",
+
+    "title": "FileRise",
+    "header_title": "FileRise",
+    "header_title_text": "标题文本",
+    "logout": "退出登录",
+    "change_password": "更改密码",
+    "restore_text": "还原或",
+    "delete_text": "删除回收站项目",
+    "restore_selected": "还原所选",
+    "restore_all": "全部还原",
+    "delete_selected_trash": "删除所选",
+    "delete_all": "全部删除",
+    "upload_header": "上传文件/文件夹",
+
+    "folder_navigation": "文件夹导航与管理",
+    "create_folder": "创建文件夹",
+    "create_folder_title": "创建文件夹",
+    "enter_folder_name": "输入文件夹名称",
+    "cancel": "取消",
+    "create": "创建",
+    "rename_folder": "重命名文件夹",
+    "rename_folder_title": "重命名文件夹",
+    "rename_folder_placeholder": "输入新的文件夹名称",
+    "delete_folder": "删除文件夹",
+    "delete_folder_title": "删除文件夹",
+    "delete_folder_message": "确定要删除此文件夹吗？",
+    "folder_help": "文件夹帮助",
+    "folder_help_item_1": "点击文件夹以查看其中的文件。",
+    "folder_help_item_2": "使用 [-] 折叠，使用 [+] 展开文件夹。",
+    "folder_help_item_3": "选择一个文件夹并点击“创建文件夹”以添加子文件夹。",
+    "folder_help_item_4": "要重命名或删除文件夹，请选择后点击相应按钮。",
+
+    "actions": "操作",
+    "file_list_title": "文件列表（根目录）",
+    "files_in": "文件位于",
+    "delete_files": "删除文件",
+    "delete_selected_files_title": "删除所选文件",
+    "delete_files_message": "确定要删除所选文件吗？",
+    "copy_files": "复制文件",
+    "copy_files_title": "复制所选文件",
+    "copy_files_message": "选择目标文件夹以复制所选文件：",
+    "move_files": "移动文件",
+    "move_files_title": "移动所选文件",
+    "move_files_message": "选择目标文件夹以移动所选文件：",
+    "move": "移动",
+    "extract_zip_button": "解压 ZIP",
+    "download_zip_title": "将所选文件打包为 ZIP 下载",
+    "download_zip_prompt": "输入 ZIP 文件名：",
+    "zip_placeholder": "files.zip",
+    "share": "分享",
+    "total_files": "文件总数",
+    "total_size": "总大小",
+    "prev": "上一页",
+    "next": "下一页",
+    "page": "第",
+    "of": "页，共",
+
+    "login": "登录",
+    "remember_me": "记住我",
+    "login_oidc": "使用 OIDC 登录",
+    "basic_http_login": "使用基本 HTTP 登录",
+
+    "change_password_title": "更改密码",
+    "old_password": "旧密码",
+    "new_password": "新密码",
+    "confirm_new_password": "确认新密码",
+
+    "create_new_user_title": "创建新用户",
+    "username": "用户名：",
+    "password": "密码：",
+    "enter_password": "密码",
+    "preparing_download": "正在准备下载…",
+    "download_file": "下载文件",
+    "confirm_or_change_filename": "确认或修改下载文件名：",
+    "filename": "文件名",
+    "download": "下载",
+    "grant_admin": "授予管理员权限",
+    "save_user": "保存用户",
+
+    "remove_user_title": "删除用户",
+    "select_user_remove": "选择要删除的用户：",
+    "delete_user": "删除用户",
+
+    "rename_file_title": "重命名文件",
+    "rename_file_placeholder": "输入新的文件名",
+
+    "share_folder": "分享文件夹",
+    "allow_uploads": "允许上传",
+    "share_link_generated": "已生成分享链接",
+    "error_generating_share_link": "生成分享链接时出错",
+    "custom": "自定义",
+    "duration": "持续时间",
+    "seconds": "秒",
+    "minutes": "分钟",
+    "hours": "小时",
+    "days": "天",
+    "custom_duration_warning": "⚠️ 使用较长的到期时间可能存在安全风险，请谨慎使用。",
+
+    "folder_share": "分享文件夹",
+
+    "yes": "是",
+    "no": "否",
+    "unsaved_changes_confirm": "您有未保存的更改，确定要关闭而不保存吗？",
+    "delete": "删除",
+    "upload": "上传",
+    "copy": "复制",
+    "extract": "解压",
+    "user": "用户：",
+    "unknown_error": "未知错误",
+    "link_copied": "链接已复制到剪贴板",
+    "weeks": "周",
+    "months": "月",
+
+    "dark_mode_toggle": "深色模式",
+    "light_mode_toggle": "浅色模式",
+    "switch_to_light_mode": "切换到浅色模式",
+    "switch_to_dark_mode": "切换到深色模式",
+
+    "header_settings": "标题设置",
+    "shared_max_upload_size_bytes_title": "共享最大上传大小",
+    "shared_max_upload_size_bytes": "共享最大上传大小（字节）",
+    "max_bytes_shared_uploads_note": "请输入共享文件夹上传的最大允许字节数",
+    "manage_shared_links": "管理分享链接",
+    "folder_shares": "文件夹分享",
+    "file_shares": "文件分享",
+    "loading": "正在加载…",
+    "error_loading_share_links": "加载分享链接时出错",
+    "share_deleted_successfully": "分享已成功删除",
+    "error_deleting_share": "删除分享时出错",
+    "password_protected": "受密码保护",
+    "no_shared_links_available": "暂无可用的分享链接",
+
+    "admin_panel": "管理员面板",
+    "user_panel": "用户面板",
+    "user_settings": "用户设置",
+    "save_profile_picture": "保存头像",
+    "please_select_picture": "请选择图片",
+    "profile_picture_updated": "头像已更新",
+    "error_updating_picture": "更新头像时出错",
+    "trash_restore_delete": "回收站恢复/删除",
+    "totp_settings": "TOTP 设置",
+    "enable_totp": "启用 TOTP",
+    "language": "语言",
+    "select_language": "选择语言",
+    "english": "英语",
+    "spanish": "西班牙语",
+    "french": "法语",
+    "german": "德语",
+    "chinese_simplified": "简体中文",
+    "use_totp_code_instead": "改用 TOTP 验证码",
+    "submit_recovery_code": "提交恢复代码",
+    "please_enter_recovery_code": "请输入您的恢复代码。",
+    "recovery_code_verification_failed": "恢复代码验证失败",
+    "error_verifying_recovery_code": "验证恢复代码时出错",
+    "totp_verification_failed": "TOTP 验证失败",
+    "error_verifying_totp_code": "验证 TOTP 代码时出错",
+    "totp_setup": "TOTP 设置",
+    "scan_qr_code": "请使用验证器应用扫描此二维码。",
+    "enter_totp_confirmation": "输入应用生成的 6 位验证码以确认设置：",
+    "confirm": "确认",
+    "please_enter_valid_code": "请输入有效的 6 位验证码。",
+    "totp_enabled_successfully": "TOTP 启用成功。",
+    "error_generating_recovery_code": "生成恢复代码时出错",
+    "error_loading_qr_code": "加载二维码时出错。",
+    "error_disabling_totp_setting": "禁用 TOTP 设置时出错",
+    "user_management": "用户管理",
+    "add_user": "添加用户",
+    "remove_user": "删除用户",
+    "user_permissions": "用户权限",
+    "oidc_configuration": "OIDC 配置",
+    "oidc_provider_url": "OIDC 提供者 URL",
+    "oidc_client_id": "OIDC 客户端 ID",
+    "oidc_client_secret": "OIDC 客户端密钥",
+    "oidc_redirect_uri": "OIDC 重定向 URI",
+    "global_totp_settings": "全局 TOTP 设置",
+    "global_otpauth_url": "全局 OTPAuth URL",
+    "login_options": "登录选项",
+    "disable_login_form": "禁用登录表单",
+    "disable_basic_http_auth": "禁用基本 HTTP 认证",
+    "disable_oidc_login": "禁用 OIDC 登录",
+    "save_settings": "保存设置",
+    "at_least_one_login_method": "至少保留一种登录方式。",
+    "settings_updated_successfully": "设置已成功更新。",
+    "error_updating_settings": "更新设置时出错",
+    "user_permissions_updated_successfully": "用户权限已成功更新。",
+    "error_updating_permissions": "更新权限时出错",
+    "no_users_found": "未找到用户。",
+    "user_folder_only": "仅限用户文件夹",
+    "read_only": "只读",
+    "disable_upload": "禁用上传",
+    "error_loading_users": "加载用户时出错",
+    "save_permissions": "保存权限",
+    "your_recovery_code": "您的恢复代码",
+    "please_save_recovery_code": "请妥善保存此代码。此代码仅显示一次且只能使用一次。",
+    "ok": "确定",
+    "show": "显示",
+    "items_per_page": "每页项目数",
+    "columns": "列",
+    "row_height": "行高",
+    "api_docs": "API 文档",
+    "show_folders_above_files": "在文件上方显示文件夹",
+    "display": "显示",
+    "create_file": "创建文件",
+    "create_new_file": "创建新文件",
+    "enter_file_name": "输入文件名",
+    "newfile_placeholder": "新文件名",
+    "file_created_successfully": "文件创建成功！",
+    "error_creating_file": "创建文件时出错",
+    "file_created": "文件创建成功！",
+    "no_access_to_resource": "您无权访问此资源。",
+    "can_share": "可分享",
+    "bypass_ownership": "绕过所有权限制",
+    "error_loading_user_grants": "加载用户授权时出错",
+    "click_to_edit": "点击编辑",
+    "folder_access": "文件夹访问"
   }
+
 };
 
 let currentLocale = 'en';