Function openSkillDetailsModal

website/src/scripts/pages/skills.ts:102–160

(skillId: string, trigger?: HTMLElement)

}

function openSkillDetailsModal(skillId: string, trigger?: HTMLElement): void {
  const item = skillById.get(skillId);
  if (!item) {
    return;
  }

  const metaParts: string[] = [];
  if (item.hasAssets) {
    metaParts.push(
      `<span class="resource-tag tag-assets">${item.assetCount} asset${
        item.assetCount === 1 ? '' : 's'
      }</span>`
    );
  }

  metaParts.push(
    `<span class="resource-tag">${item.files.length} file${
      item.files.length === 1 ? '' : 's'
    }</span>`
  );

  if (item.lastUpdated) {
    metaParts.push(
      `<span class="last-updated">Updated ${escapeHtml(
        formatRelativeTime(item.lastUpdated)
      )}</span>`
    );
  }

  const fileTagParts = item.files
    .slice(0, 24)
    .map((file) => `<span class="resource-tag">${escapeHtml(file.name)}</span>`);
  if (item.files.length > 24) {
    fileTagParts.push(`<span class="resource-tag">+${item.files.length - 24} more</span>`);
  }

  const actionsHtml = `
    <button id="skill-details-install" class="btn btn-secondary" type="button" data-skill-id="${escapeHtml(
      item.id
    )}">Copy Install</button>
    <button id="skill-details-download" class="btn btn-primary" type="button" data-skill-id="${escapeHtml(
      item.id
    )}">Download</button>
    <button class="btn btn-secondary" type="button" data-open-file-path="${escapeHtml(
      item.skillFile
    )}" data-open-file-type="skill">Source</button>
  `;

  openCardDetailsModal({
    title: item.title,
    description: item.description || 'No description',
    previewIcon: '⚡',
    previewText: 'Skill files and install options',
    metaHtml: metaParts.join(''),
    tagsHtml: fileTagParts.join(''),
    actionsHtml,
    trigger,
  });