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

docs(README): add additional badges
chore(funding): enable GitHub Sponsors and Ko-fi links
2025-10-24 00:22:22 -04:00 · 2025-10-23 03:36:27 -04:00 · 2025-10-23 03:16:27 -04:00 · 2025-10-23 01:54:32 -04:00 · 2025-10-23 01:43:48 -04:00
8 changed files with 929 additions and 191 deletions
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -0,0 +1,2 @@
+github: [error311]
+ko_fi: error311
--- a/CHANGELOG.md
+++ b/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
--- a/README.md
+++ b/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).
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -2036,10 +2036,9 @@ body.dark-mode .admin-panel-content label {
 }

 #openChangePasswordModalBtn {
-  width: auto;
-  padding: 5px 10px;
+  width: max-content;
+  padding: 6px 12px;
  font-size: 14px;
-  margin-right: 300px;
 }

 #changePasswordModal {
--- a/public/js/adminPanel.js
+++ b/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
-async function getAllFolders() {
-  if (__allFoldersCache) return __allFoldersCache.slice();
-  const res = await fetch('/api/folder/getFolderList.php', { credentials: 'include' });
-  const data = await safeJson(res).catch(() => []);
-  const list = Array.isArray(data)
-    ? data.map(x => (typeof x === 'string' ? x : x.folder)).filter(Boolean)
-    : [];
-  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();
-}
+   let __allFoldersCache = null;
+
+   async function getAllFolders(force = false) {
+     if (!force && __allFoldersCache) return __allFoldersCache.slice();
+   
+     const res = await fetch('/api/folder/getFolderList.php?ts=' + Date.now(), {
+       credentials: 'include',
+       cache: 'no-store',
+       headers: { 'Cache-Control': 'no-store' }
+     });
+     const data = await safeJson(res).catch(() => []);
+     const list = Array.isArray(data)
+       ? data.map(x => (typeof x === 'string' ? x : x.folder)).filter(Boolean)
+       : [];
+   
+     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 title="${tf('folder_help', 'Folder path within FileRise')}">${tf('folder', 'Folder')}</div>
+    <div class="folder-access-header">
+    <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 = [];
-      rows.forEach(row => {
-        const username = String(row.getAttribute("data-username") || "").trim();
-        if (!username) return;
-        const grantsBox = row.querySelector(".folder-grants-box");
-        if (!grantsBox || grantsBox.getAttribute('data-loaded') !== '1') return;
-        const grants = collectGrantsFrom(grantsBox);
-        changes.push({ user: username, grants });
-      });
+const changes = [];
+rows.forEach(row => {
+  if (row.getAttribute("data-admin") === "1") return; // skip admins
+  const username = String(row.getAttribute("data-username") || "").trim();
+  if (!username) return;
+  const grantsBox = row.querySelector(".folder-grants-box");
+  if (!grantsBox || grantsBox.getAttribute('data-loaded') !== '1') return;
+  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}">
-      <td><strong>${u.username}</strong></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="disableUpload"   ${f.disableUpload ? "checked" : ""}></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="bypassOwnership" ${f.bypassOwnership ? "checked" : ""}></td>
+    <tr data-username="${u.username}" ${isAdmin ? "data-admin='1'" : ""}>
+      <td><strong>${u.username}</strong>${note}</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" : ""} ${disabledAttr}></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" : ""} ${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 => {
-      if ((user.role && String(user.role) === "1") || String(user.username).toLowerCase() === "admin") return;
+users.forEach(user => {
+  const isAdmin = (user.role && String(user.role) === "1") || String(user.username).toLowerCase() === "admin";

-      const row = document.createElement("div");
-      row.classList.add("user-permission-row");
-      row.setAttribute("data-username", user.username);
-      row.style.padding = "6px 0";
+  const row = document.createElement("div");
+  row.classList.add("user-permission-row");
+  row.setAttribute("data-username", user.username);
+  if (isAdmin) row.setAttribute("data-admin", "1"); // mark admins
+  row.style.padding = "6px 0";

-      row.innerHTML = `
-        <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;">
-          <span class="perm-caret" style="display:inline-block; transform: rotate(-90deg); transition: transform 120ms ease;">▸</span>
-          <strong>${user.username}</strong>
-          <span class="muted" style="margin-left:auto;">${tf('click_to_edit', 'Click to edit')}</span>
-        </div>
-        <div class="user-perm-details" style="display:none; margin:8px 0 12px;">
-          <div class="folder-grants-box" data-loaded="0"></div>
-        </div>
-      `;
+  row.innerHTML = `
+    <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;">
+      <span class="perm-caret" style="display:inline-block; transform: rotate(-90deg); transition: transform 120ms ease;">▸</span>
+      <strong>${user.username}</strong>
+      ${isAdmin ? `<span class="muted" style="margin-left:auto;">Admin (full access)</span>`
+                : `<span class="muted" style="margin-left:auto;">${tf('click_to_edit', 'Click to edit')}</span>`}
+    </div>
+    <div class="user-perm-details" style="display:none; margin:8px 0 12px;">
+      <div class="folder-grants-box" data-loaded="0"></div>
+    </div>
+  `;

-      const header = row.querySelector(".user-perm-header");
-      const details = row.querySelector(".user-perm-details");
-      const caret = row.querySelector(".perm-caret");
-      const grantsBox = row.querySelector(".folder-grants-box");
+  const header = row.querySelector(".user-perm-header");
+  const details = row.querySelector(".user-perm-details");
+  const caret = row.querySelector(".perm-caret");
+  const grantsBox = row.querySelector(".folder-grants-box");

-      async function ensureLoaded() {
-        if (grantsBox.dataset.loaded === "1") return;
-        try {
-          const grants = await getUserGrants(user.username);
-          renderFolderGrantsUI(user.username, grantsBox, ["root", ...folders.filter(f => f !== "root")], grants);
-          grantsBox.dataset.loaded = "1";
-        } catch (e) {
-          console.error(e);
-          grantsBox.innerHTML = `<div class="muted">${tf("error_loading_user_grants", "Error loading user grants")}</div>`;
-        }
+  async function ensureLoaded() {
+    if (grantsBox.dataset.loaded === "1") return;
+    try {
+      let grants;
+      if (isAdmin) {
+        // synthesize full access
+        const ordered = ["root", ...folders.filter(f => f !== "root")];
+        grants = buildFullGrantsForAllFolders(ordered);
+        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() {
-        const willShow = details.style.display === "none";
-        details.style.display = willShow ? "block" : "none";
-        header.setAttribute("aria-expanded", willShow ? "true" : "false");
-        caret.style.transform = willShow ? "rotate(0deg)" : "rotate(-90deg)";
-        if (willShow) ensureLoaded();
-      }
+  function toggleOpen() {
+    const willShow = details.style.display === "none";
+    details.style.display = willShow ? "block" : "none";
+    header.setAttribute("aria-expanded", willShow ? "true" : "false");
+    caret.style.transform = willShow ? "rotate(0deg)" : "rotate(-90deg)";
+    if (willShow) ensureLoaded();
+  }

-      header.addEventListener("click", toggleOpen);
-      header.addEventListener("keydown", e => {
-        if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleOpen(); }
-      });
+  header.addEventListener("click", toggleOpen);
+  header.addEventListener("keydown", e => {
+    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>";
--- a/public/js/authModals.js
+++ b/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';
--- a/public/js/dragAndDrop.js
+++ b/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_CLOSED = 'menu';  
+const TOGGLE_ICON_OPEN = 'view_sidebar';
+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">${
-    collapsed ? TOGGLE_ICON_CLOSED : TOGGLE_ICON_OPEN
-  }</i>`;
+  btn.innerHTML = `<i class="material-icons" aria-hidden="true">${collapsed ? TOGGLE_ICON_CLOSED : TOGGLE_ICON_OPEN
+    }</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();
-    if (!tz) return false;
-    const hasUpload  = !!tz.querySelector('#uploadCard');
-    const hasFolder  = !!tz.querySelector('#folderManagementCard');
-    return hasUpload && hasFolder;
-  }
+  const tz = getTopZone();
+  if (!tz) return false;
+  const hasUpload = !!tz.querySelector('#uploadCard');
+  const hasFolder = !!tz.querySelector('#folderManagementCard');
+  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',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '0',
-        lineHeight: '0',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '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
-  if (!hasSidebarCards() && !hasTopZoneCards()) {
-    btn.remove();
-    return;
-  }
-
+  // Never remove the button just because cards are in header.
  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) {
-    const order = JSON.parse(orderStr || '[]');
-    if (Array.isArray(order) && order.length > 0) {
-      const mainWrapper = document.querySelector('.main-wrapper');
-      if (mainWrapper) mainWrapper.style.display = 'flex';
-      order.forEach(id => {
-        const card = document.getElementById(id);
-        if (card && card.parentNode?.id !== 'sidebarDropArea') {
-          sidebar.appendChild(card);
-          animateVerticalSlide(card);
-        }
-      });
-      updateSidebarVisibility();
-      //applySidebarCollapsed();   // NEW: honor collapsed state
-      //ensureSidebarToggle();     // NEW: inject toggle
-      applyZonesCollapsed();
-      ensureZonesToggle();
-      
-      return;
-    }
+
+  // One-time default: if no saved order and no header order,
+// put cards into the sidebar on all ≥ MEDIUM_MIN screens.
+if ((!orderStr || !JSON.parse(orderStr || '[]').length) &&
+(!headerOrderStr || !JSON.parse(headerOrderStr || '[]').length)) {
+
+const isLargeEnough = window.innerWidth >= MEDIUM_MIN;
+if (isLargeEnough) {
+const mainWrapper = document.querySelector('.main-wrapper');
+if (mainWrapper) mainWrapper.style.display = 'flex';
+
+const moved = [];
+['uploadCard', 'folderManagementCard'].forEach(id => {
+  const card = document.getElementById(id);
+  if (card && card.parentNode?.id !== 'sidebarDropArea') {
+    // clear any sticky widths from header/top
+    card.style.width = '';
+    card.style.minWidth = '';
+    getSidebar().appendChild(card);
+    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
-  headerDropArea.innerHTML = '';
-
-  // 2) Read the saved array (or empty array if invalid/missing)
-  let stored;
-  try {
-    stored = JSON.parse(localStorage.getItem('headerOrder') || '[]');
-  } catch {
-    stored = [];
+  // If panels are expanded, do not re-create header icons.
+  if (!isZonesCollapsed()) {
+    headerDropArea.innerHTML = '';
+    localStorage.removeItem('headerOrder');
+    return;
  }

-  // 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');
-        // respect the unified zones-collapsed switch
-        sidebar.style.display = isZonesCollapsed() ? 'none' : 'block';
-      } else {
-        sidebar.classList.remove('active');
-        sidebar.style.display = 'none';
-      }
+    sidebar.classList.add('active');
+    // respect the unified zones-collapsed switch
+    sidebar.style.display = isZonesCollapsed() ? 'none' : 'block';
+  } else {
+    sidebar.classList.remove('active');
+    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 rightIsEmpty = !rightCol?.querySelector('#folderManagementCard');
+  const hasUpload  = !!topZone?.querySelector('#uploadCard');
+  const hasFolder  = !!topZone?.querySelector('#folderManagementCard');

  if (leftCol && rightCol) {
-    if (leftIsEmpty && !rightIsEmpty) {
-      leftCol.style.display = 'none';
-      rightCol.style.margin = '0 auto';
-    } else if (rightIsEmpty && !leftIsEmpty) {
+    if (hasUpload && !hasFolder) {
      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) {
-    sidebar.appendChild(card);
-  }
-  // Ensure card fills the sidebar.
+  if (!inserted) sidebar.appendChild(card);
+
+  // Make it fill the sidebar and clear any sticky width from header/top zone.
  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 () {
-  if (window.innerWidth < 1205) {
-    moveSidebarCardsToTop();
+(function () {
+  let rAF = null;
+  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)) {
-        hiddenContainer.removeChild(card);
-      }
+      if (hiddenContainer && hiddenContainer.contains(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();
-    //applySidebarCollapsed();
+    loadSidebarOrder();
+    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 = '';
        }
      });
    });
--- a/public/js/i18n.js
+++ b/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';
Author	SHA1	Message	Date
Ryan	88a8857a6f	release(v1.6.3): drag/drop card persistence, admin UX fixes, and docs (closes #58 )	2025-10-24 00:22:22 -04:00
Ryan	edefaaca36	docs(README): add additional badges	2025-10-23 03:36:27 -04:00
Ryan	ef0a8da696	chore(funding): enable GitHub Sponsors and Ko-fi links	2025-10-23 03:16:27 -04:00
Ryan	ebabb561d6	ui: fix “Change Password” button sizing in User Panel	2025-10-23 01:54:32 -04:00
Ryan	30761b6dad	feat(i18n,auth): add Simplified Chinese (zh-CN) and expose in User Panel	2025-10-23 01:43:48 -04:00