plspace/src/components/profile/DetailsTable.svelte

<script lang="ts">
  /**
   * "Tom's Details" — profile fields that didn't map to an interests row.
   *
   * Mastodon's link verification is surfaced here: a field whose URL proved
   * ownership is highlighted, matching what every other client does, because
   * an unverified link that looks verified is a phishing surface.
   */
  import type { ProfileField } from '$lib/util/profile'
  import type { CustomEmoji } from '$lib/api/types'
  import Module from '../common/Module.svelte'
  import EmojiText from '../common/EmojiText.svelte'

  interface Props {
    title: string
    fields: ProfileField[]
    emojis?: CustomEmoji[]
  }

  let { title, fields, emojis }: Props = $props()
</script>

{#if fields.length > 0}
  <Module {title} titleEmojis={emojis} flush>
    <table class="data-table details-table">
      <tbody>
        {#each fields as field, index (`${field.name}:${index}`)}
          <tr class="details-row" data-verified={field.verified ? 'true' : 'false'}>
            <th class="data-table-label details-label" scope="row">
              <EmojiText text={field.name} {emojis} />
            </th>
            <td class="data-table-value details-value" data-verified={field.verified ? 'true' : 'false'}>
              {#if field.verified}
                <span class="verified-mark" title="Ownership of this link is verified">✓</span>
              {/if}
              <!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitized in buildProfileView -->
              {@html field.value}
            </td>
          </tr>
        {/each}
      </tbody>
    </table>
  </Module>
{/if}