initial commit

src/components/profile/DetailsTable.svelte

@@ -0,0 +1,39 @@
+<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 Module from '../common/Module.svelte'
+
+  interface Props {
+    title: string
+    fields: ProfileField[]
+  }
+
+  let { title, fields }: Props = $props()
+</script>
+
+{#if fields.length > 0}
+  <Module {title} flush>
+    <table class="data-table details-table">
+      <tbody>
+        {#each fields as field (field.name)}
+          <tr class="details-row" data-verified={field.verified ? 'true' : 'false'}>
+            <th class="data-table-label details-label" scope="row">{field.name}</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}