Function openFolderShareModal

public/js/folderShareModal.js:124–358

(folder)

}

export function openFolderShareModal(folder) {
  // Remove any existing modal
  const existing = document.getElementById("folderShareModal");
  if (existing) existing.remove();

  // Build modal
  const modal = document.createElement("div");
  modal.id = "folderShareModal";
  modal.classList.add("modal");
  modal.innerHTML = `
    <div class="modal-content share-modal-content">
      <div class="modal-header">
        <h3>${t("share_folder_and_request")}: ${escapeHTML(folder)}</h3>
        <span id="closeFolderShareModal" title="${t("close")}" class="close-image-modal">&times;</span>
      </div>
      <div class="modal-body share-modal-body">
        <p class="share-modal-helper">${t("share_folder_and_request_helper")}</p>

        <div class="share-modal-section">
          <p class="share-section-title">${t("share_mode_heading")}</p>
          <div class="share-mode-toggle" role="group" aria-label="${t("share_mode_heading")}">
            <button type="button" id="folderShareBrowseModeBtn" class="share-mode-btn is-active">
              <span class="share-mode-btn-title">${t("share_mode_browse_label")}</span>
              <span class="share-mode-btn-desc">${t("share_mode_browse_desc")}</span>
            </button>
            <button type="button" id="folderShareRequestModeBtn" class="share-mode-btn">
              <span class="share-mode-btn-title">${t("share_mode_request_label")}</span>
              <span class="share-mode-btn-desc">${t("share_mode_request_desc")}</span>
            </button>
          </div>
          <p id="folderShareModeNotice" class="share-mode-notice"></p>
          <input type="checkbox" id="folderShareDropMode" hidden />
        </div>

        <div class="share-modal-section">
          <p class="share-section-title">${t("share_link_settings")}</p>
          <label class="share-field-label" for="folderShareExpiration">${t("set_expiration")}</label>
          <select id="folderShareExpiration" class="share-field-input">
            <option value="30">30 ${t("minutes")}</option>
            <option value="60" selected>60 ${t("minutes")}</option>
            <option value="120">120 ${t("minutes")}</option>
            <option value="180">180 ${t("minutes")}</option>
            <option value="240">240 ${t("minutes")}</option>
            <option value="1440">1 ${t("day")}</option>
            <option value="custom">${t("custom")}&hellip;</option>
          </select>

          <div id="customFolderExpirationContainer" class="share-custom-expiration" style="display:none;">
            <label for="customFolderExpirationValue">${t("duration")}:</label>
            <input type="number" id="customFolderExpirationValue" min="1" value="1" />
            <select id="customFolderExpirationUnit">
              <option value="seconds">${t("seconds")}</option>
              <option value="minutes" selected>${t("minutes")}</option>
              <option value="hours">${t("hours")}</option>
              <option value="days">${t("days")}</option>
            </select>
            <p class="share-warning">
              ${t("custom_duration_warning")}