Function setupModal

website/src/scripts/modal.ts:518–764

()

 * Setup modal functionality
 */
export function setupModal(): void {
  const modal = document.getElementById("file-modal");

  // Move modal to body level to escape ancestor stacking contexts
  // This fixes the issue where modal appears below header/theme-toggle
  if (modal && modal.parentElement !== document.body) {
    document.body.appendChild(modal);
  }

  const closeBtn = document.getElementById("close-modal");
  const copyBtn = document.getElementById("copy-btn");
  const installCommandBtn = document.getElementById("install-command-btn");
  const downloadBtn = document.getElementById("download-btn");
  const shareBtn = document.getElementById("share-btn");
  const renderBtn = document.getElementById("render-btn");
  const rawBtn = document.getElementById("raw-btn");
  const fileDropdown = document.getElementById("modal-file-dropdown");
  const fileButton = document.getElementById("modal-file-button");
  const fileToggle = document.getElementById("modal-file-toggle");
  const fileMenu = document.getElementById("modal-file-menu");

  if (!modal) return;

  closeBtn?.addEventListener("click", () => closeModal());

  modal.addEventListener("click", (e) => {
    if (e.target === modal) closeModal();
  });

  document.addEventListener("keydown", (e) => {
    if (!modal.classList.contains("hidden")) {
      if (e.key === "Escape") {
        closeModal();
      } else {
        handleModalKeydown(e, modal);
      }
    }
  });

  copyBtn?.addEventListener("click", async () => {
    if (currentFileContent) {
      const success = await copyToClipboard(currentFileContent);
      showToast(
        success ? "Copied to clipboard!" : "Failed to copy",
        success ? "success" : "error"
      );
    }
  });

  installCommandBtn?.addEventListener("click", async () => {
    if (currentFilePath && currentFileType === "skill") {
      const skill = await getSkillItemByFilePath(currentFilePath);
      if (!skill) {
        showToast("Could not resolve skill ID.", "error");
        return;
      }
      const command = `gh skills install ${REPO_IDENTIFIER} ${skill.id}`;
      const originalContent = installCommandBtn.innerHTML;