working on patching vcards

frontend/src/routes/contact/Card.svelte

@@ -1,5 +1,8 @@
 <script>
-    import { t } from '../../translations.svelte';
+    import { api } from '../../urls.svelte';
+    import { error, yikes } from '../../warn.svelte';
+    import { t }   from '../../translations.svelte';
+
 
     import Address from './Address.svelte';
     import Email from './Email.svelte';
@@ -12,9 +15,28 @@
 
     let addresses = $derived(contact.vcard.match(/^ADR.*:.+$/gm));
     let code = $state(false);
+    let fns = $derived(contact.vcard.match(/^FN.*:.+$/gm));
     let emails = $derived(contact.vcard.match(/^EMAIL.*:.+$/gm));
     let extra_fields = $derived(contact.vcard.match(/^X-.*:.+/gm));
 
+    async function patch(from,to){
+        console.log(`patch(${contact.id}: ${from} → ${to})`);
+        if (from == to) return;
+        const url = api(`contact/${contact.id}`);
+        const res = await fetch(url,{
+            method:'PATCH',
+            credentials:'include',
+            body:JSON.stringify({from:from,to:to})
+        });
+        if (res.ok){
+            yikes();
+            contact = await res.json();
+        } else {
+            error(res);
+        }
+        return true;
+    }
+
     function toggleCode(){
         code = !code;
     }
@@ -23,14 +45,16 @@
 <fieldset class="vcard">
     <legend>
         {t('contact_number',{number:contact.id})}
-        <button class="symbol" onclick={toggleCode}>C</button>
+        <button class="symbol" onclick={toggleCode}></button>
     </legend>
     <table>
         <thead></thead>
         <tbody>
             <tr>
                 <td>
-                    <FN vcard={contact.vcard} />
+                    {#each fns as code}
+                    <FN {code} {patch} />
+                    {/each}
                 </td>
                 {#if code}
                 <td rowspan="6">

frontend/src/routes/contact/FN.svelte

@@ -1,12 +1,18 @@
 <script>
+    import LineEditor from '../../Components/LineEditor.svelte';
     import { fn } from '../../vcard.js';
     import { t }  from '../../translations.svelte';
 
-    let { vcard } = $props();
+    let { code, patch = (from, to) => true } = $props();
 
-    let name = $derived(fn(vcard));
+    let name = $derived(fn(code));
+
+    function onSet(newVal){
+        const newCode = code.replace(name,newVal);
+        return patch(code,newCode);
+    }
 </script>
 
 {#if name}
-<span class="formatted name">{name}</span>
+<LineEditor type="span" editable={true} value={name} {onSet} />
 {/if}