Rename paypalLink to paymentLink and allow inline editing

Generalizes the participant link field beyond PayPal and lets users
set/update their payment link directly from the balance summary.

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

app/components/BalanceSummary.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ParticipantView, SettlementView } from '../types'
+import { isValidPaymentLink } from '../../shared/utils/paymentLink'
 
 const props = defineProps<{
   slug: string
@@ -9,16 +10,22 @@ const props = defineProps<{
   currency: string
 }>()
 
-const emit = defineEmits<{ settled: [] }>()
+const emit = defineEmits<{ settled: [], updated: [] }>()
+
+const { lastLink, rememberLink } = usePaymentLinkCache()
 
 const settlingKey = ref<string | null>(null)
+const editingId = ref<number | null>(null)
+const editValue = ref('')
+const editError = ref('')
+const savingLink = ref(false)
 
 function nameOf(id: number) {
   return props.participants.find(p => p.id === id)?.name ?? 'Unknown'
 }
 
-function paypalLinkOf(id: number) {
+function paymentLinkOf(id: number) {
-  return props.participants.find(p => p.id === id)?.paypalLink || null
+  return props.participants.find(p => p.id === id)?.paymentLink || null
 }
 
 function initialOf(participantName: string) {
@@ -29,6 +36,38 @@ function keyOf(settlement: SettlementView) {
   return `${settlement.fromId}-${settlement.toId}-${settlement.amountCents}`
 }
 
+function startEdit(participant: ParticipantView) {
+  editingId.value = participant.id
+  editValue.value = participant.paymentLink ?? lastLink.value ?? ''
+  editError.value = ''
+}
+
+function cancelEdit() {
+  editingId.value = null
+  editError.value = ''
+}
+
+async function saveEdit(participant: ParticipantView) {
+  const trimmed = editValue.value.trim()
+  if (trimmed && !isValidPaymentLink(trimmed)) {
+    editError.value = 'Enter a valid link starting with http:// or https://.'
+    return
+  }
+  savingLink.value = true
+  try {
+    await $fetch(`/api/pots/${props.slug}/participants/${participant.id}`, {
+      method: 'PATCH',
+      body: { paymentLink: trimmed },
+    })
+    if (trimmed) rememberLink(trimmed)
+    editingId.value = null
+    emit('updated')
+  }
+  finally {
+    savingLink.value = false
+  }
+}
+
 async function markSettled(settlement: SettlementView) {
   const key = keyOf(settlement)
   settlingKey.value = key
@@ -55,38 +94,80 @@ async function markSettled(settlement: SettlementView) {
       <li
         v-for="participant in participants"
         :key="participant.id"
-        class="flex items-center justify-between gap-3 rounded-2xl border border-stone-200 bg-white p-3 shadow-sm dark:border-stone-800 dark:bg-stone-900"
+        class="rounded-2xl border border-stone-200 bg-white p-3 shadow-sm dark:border-stone-800 dark:bg-stone-900"
       >
-        <div class="flex min-w-0 items-center gap-3">
+        <div class="flex items-center justify-between gap-3">
-          <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-orange-100 text-sm font-semibold text-orange-700 dark:bg-orange-900/40 dark:text-orange-300">
+          <button
-            {{ initialOf(participant.name) }}
+            type="button"
-          </div>
+            class="flex min-w-0 items-center gap-3 text-left"
-          <span class="truncate font-medium text-stone-900 dark:text-stone-100">{{ participant.name }}</span>
+            @click="editingId === participant.id ? cancelEdit() : startEdit(participant)"
-          <a
-            v-if="participant.paypalLink"
-            :href="participant.paypalLink"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="shrink-0 text-xs font-medium text-orange-600 hover:underline dark:text-orange-400"
           >
-            PayPal
+            <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-orange-100 text-sm font-semibold text-orange-700 dark:bg-orange-900/40 dark:text-orange-300">
-          </a>
+              {{ initialOf(participant.name) }}
+            </div>
+            <span class="truncate font-medium text-stone-900 dark:text-stone-100">{{ participant.name }}</span>
+          </button>
+          <div class="flex shrink-0 items-center gap-3">
+            <a
+              v-if="participant.paymentLink"
+              :href="participant.paymentLink"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-xs font-medium text-orange-600 hover:underline dark:text-orange-400"
+              @click.stop
+            >
+              Payment link
+            </a>
+            <span
+              class="text-sm font-semibold"
+              :class="{
+                'text-emerald-600 dark:text-emerald-400': (netBalances[participant.id] ?? 0) > 0,
+                'text-rose-600 dark:text-rose-400': (netBalances[participant.id] ?? 0) < 0,
+                'text-stone-400 dark:text-stone-500': (netBalances[participant.id] ?? 0) === 0,
+              }"
+            >
+              <template v-if="(netBalances[participant.id] ?? 0) === 0">
+                settled up
+              </template>
+              <template v-else>
+                {{ (netBalances[participant.id] ?? 0) > 0 ? '+' : '−' }}{{ formatCurrency(Math.abs(netBalances[participant.id] ?? 0), currency) }}
+              </template>
+            </span>
+          </div>
+        </div>
+
+        <div v-if="editingId === participant.id" class="mt-3 space-y-2 border-t border-stone-100 pt-3 dark:border-stone-800">
+          <label class="block text-xs font-medium text-stone-500 dark:text-stone-400">
+            Payment link for {{ participant.name }}
+          </label>
+          <div class="flex gap-2">
+            <input
+              v-model="editValue"
+              type="url"
+              placeholder="https://paypal.me/yourname"
+              class="block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-sm text-stone-900 shadow-sm placeholder:text-stone-400 focus:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-200 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-100 dark:placeholder:text-stone-500 dark:focus:ring-orange-900"
+              @keyup.enter="saveEdit(participant)"
+            >
+            <button
+              type="button"
+              :disabled="savingLink"
+              class="shrink-0 rounded-xl bg-orange-500 px-3 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-orange-600 disabled:opacity-50"
+              @click="saveEdit(participant)"
+            >
+              {{ savingLink ? 'Saving…' : 'Save' }}
+            </button>
+            <button
+              type="button"
+              class="shrink-0 rounded-xl border border-stone-300 px-3 py-2 text-sm font-medium text-stone-600 transition-colors hover:border-orange-300 hover:text-orange-600 dark:border-stone-700 dark:text-stone-300 dark:hover:border-orange-700 dark:hover:text-orange-400"
+              @click="cancelEdit"
+            >
+              Cancel
+            </button>
+          </div>
+          <p v-if="editError" class="text-xs text-rose-600 dark:text-rose-400">
+            {{ editError }}
+          </p>
         </div>
-        <span
-          class="shrink-0 text-sm font-semibold"
-          :class="{
-            'text-emerald-600 dark:text-emerald-400': (netBalances[participant.id] ?? 0) > 0,
-            'text-rose-600 dark:text-rose-400': (netBalances[participant.id] ?? 0) < 0,
-            'text-stone-400 dark:text-stone-500': (netBalances[participant.id] ?? 0) === 0,
-          }"
-        >
-          <template v-if="(netBalances[participant.id] ?? 0) === 0">
-            settled up
-          </template>
-          <template v-else>
-            {{ (netBalances[participant.id] ?? 0) > 0 ? '+' : '−' }}{{ formatCurrency(Math.abs(netBalances[participant.id] ?? 0), currency) }}
-          </template>
-        </span>
       </li>
     </ul>
 
@@ -128,13 +209,13 @@ async function markSettled(settlement: SettlementView) {
 
           <div class="flex items-center justify-end gap-2">
             <a
-              v-if="paypalLinkOf(settlement.toId)"
+              v-if="paymentLinkOf(settlement.toId)"
-              :href="paypalLinkOf(settlement.toId)!"
+              :href="paymentLinkOf(settlement.toId)!"
               target="_blank"
               rel="noopener noreferrer"
               class="rounded-full border border-orange-300 px-3 py-1 text-xs font-medium text-orange-700 transition-colors hover:bg-white dark:border-orange-800 dark:text-orange-300 dark:hover:bg-stone-900"
             >
-              Pay via PayPal
+              Pay now
             </a>
             <button
               type="button"

app/pages/p/[slug]/index.vue

@@ -163,6 +163,7 @@ async function copyLink() {
         :settlements="data.settlements"
         :currency="data.pot.currency"
         @settled="refresh"
+        @updated="refresh"
       />
     </section>
 

test/api/pots.test.ts

@@ -159,18 +159,18 @@ describe('Pot API', async () => {
     expect(fetched.expenses).toEqual([])
   })
 
-  it('syncs a valid PayPal link to a participant and rejects an invalid one', async () => {
+  it('sets a valid payment link on a participant and rejects an invalid one', async () => {
     const pot = await $fetch('/api/pots', { method: 'POST', body: { name: 'Reunion', currency: 'EUR', creatorName: 'Alice' } })
     const alice = pot.creator
 
     const updated = await $fetch(`/api/pots/${pot.slug}/participants/${alice.id}`, {
       method: 'PATCH',
-      body: { paypalLink: 'https://paypal.me/alice' },
+      body: { paymentLink: 'https://paypal.me/alice' },
     })
-    expect(updated.paypalLink).toBe('https://paypal.me/alice')
+    expect(updated.paymentLink).toBe('https://paypal.me/alice')
 
     await expect(
-      $fetch(`/api/pots/${pot.slug}/participants/${alice.id}`, { method: 'PATCH', body: { paypalLink: 'javascript:alert(1)' } }),
+      $fetch(`/api/pots/${pot.slug}/participants/${alice.id}`, { method: 'PATCH', body: { paymentLink: 'javascript:alert(1)' } }),
     ).rejects.toMatchObject({ statusCode: 400 })
   })
 })