feat(persons): add sort toggle to person document list (issue #24)

Extracted sortDocumentsByDate utility with full Vitest coverage (6 tests),
wired it into the person detail page with a DESC/ASC toggle button, and
added an E2E smoke test for the toggle interaction.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/routes/persons/[id]/+page.svelte

@@ -2,12 +2,16 @@
     import { enhance } from '$app/forms';
     import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
     import { m } from '$lib/paraglide/messages.js';
+    import { sortDocumentsByDate, type SortDir } from '$lib/utils/sort';
 
     let { data, form } = $props();
 
     const person = $derived(data.person);
     const documents = $derived(data.documents);
 
+    let sortDir = $state<SortDir>('DESC');
+    const sortedDocuments = $derived(sortDocumentsByDate(documents, sortDir));
+
     let editMode = $state(false);
     let mergeTargetId = $state('');
     let showMergeConfirm = $state(false);
@@ -200,10 +204,21 @@
     <!-- Linked Documents Section -->
     <div>
         <div class="flex items-center justify-between mb-6 border-b border-brand-navy/10 pb-2">
-            <h2 class="text-xl font-serif text-brand-navy">{m.person_docs_heading()}</h2>
-            <span class="bg-brand-navy text-white text-xs font-bold px-2 py-1 rounded-full">
-                {documents.length}
-            </span>
+            <div class="flex items-center gap-3">
+                <h2 class="text-xl font-serif text-brand-navy">{m.person_docs_heading()}</h2>
+                <span class="bg-brand-navy text-white text-xs font-bold px-2 py-1 rounded-full">
+                    {documents.length}
+                </span>
+            </div>
+            {#if documents.length > 0}
+                <button
+                    onclick={() => (sortDir = sortDir === 'DESC' ? 'ASC' : 'DESC')}
+                    class="text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-brand-navy transition-colors"
+                    aria-label={m.conv_sort_label()}
+                >
+                    {sortDir === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}
+                </button>
+            {/if}
         </div>
 
         {#if documents.length === 0}
@@ -212,7 +227,7 @@
             </div>
         {:else}
             <ul class="space-y-3">
-                {#each documents as doc}
+                {#each sortedDocuments as doc}
                     <li class="group">
                         <a href="/documents/{doc.id}" class="block bg-white border border-brand-sand p-4 hover:border-brand-navy hover:shadow-md transition-all duration-200">
                             <div class="flex items-center justify-between">