🐛 add env to useDb and apply prettier

app/app.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="min-h-screen bg-orange-50/40 text-stone-900 dark:bg-stone-950 dark:text-stone-100">
+  <div
+    class="min-h-screen bg-orange-50/40 text-stone-900 dark:bg-stone-950 dark:text-stone-100"
+  >
     <NuxtRouteAnnouncer />
     <main class="mx-auto max-w-md px-4 py-8">
       <NuxtPage />

app/components/AddExpenseForm.vue

@@ -1,48 +1,60 @@
 <script setup lang="ts">
-import type { ExpenseView, ParticipantView } from '../types'
+import type { ExpenseView, ParticipantView } from '../types';
 
 const props = defineProps<{
-  participants: ParticipantView[]
-  currency: string
-  editing?: ExpenseView | null
-  defaultPayerId?: number
-}>()
+  participants: ParticipantView[];
+  currency: string;
+  editing?: ExpenseView | null;
+  defaultPayerId?: number;
+}>();
 
 const emit = defineEmits<{
-  submit: [payload: { description: string, amountCents: number, payerId: number, participantIds: number[] }]
-  cancel: []
-}>()
+  submit: [
+    payload: {
+      description: string;
+      amountCents: number;
+      payerId: number;
+      participantIds: number[];
+    },
+  ];
+  cancel: [];
+}>();
 
-const description = ref(props.editing?.description ?? '')
-const amount = ref(props.editing ? fromCents(props.editing.amountCents).toString() : '')
-const payerId = ref<number>(props.editing?.payerId ?? props.defaultPayerId ?? props.participants[0]!.id)
-const selectedIds = ref<number[]>(props.editing?.participantIds ?? props.participants.map(p => p.id))
-const error = ref('')
+const description = ref(props.editing?.description ?? '');
+const amount = ref(
+  props.editing ? fromCents(props.editing.amountCents).toString() : '',
+);
+const payerId = ref<number>(
+  props.editing?.payerId ?? props.defaultPayerId ?? props.participants[0]!.id,
+);
+const selectedIds = ref<number[]>(
+  props.editing?.participantIds ?? props.participants.map((p) => p.id),
+);
+const error = ref('');
 
 function toggleParticipant(id: number) {
   if (selectedIds.value.includes(id)) {
-    selectedIds.value = selectedIds.value.filter(existing => existing !== id)
-  }
-  else {
-    selectedIds.value = [...selectedIds.value, id]
+    selectedIds.value = selectedIds.value.filter((existing) => existing !== id);
+  } else {
+    selectedIds.value = [...selectedIds.value, id];
   }
 }
 
 function onSubmit() {
-  error.value = ''
-  const amountCents = toCents(Number(amount.value))
+  error.value = '';
+  const amountCents = toCents(Number(amount.value));
 
   if (!description.value.trim()) {
-    error.value = 'Description is required.'
-    return
+    error.value = 'Description is required.';
+    return;
   }
   if (!Number.isFinite(amountCents) || amountCents <= 0) {
-    error.value = 'Enter a valid amount.'
-    return
+    error.value = 'Enter a valid amount.';
+    return;
   }
   if (selectedIds.value.length === 0) {
-    error.value = 'Select at least one participant to split with.'
-    return
+    error.value = 'Select at least one participant to split with.';
+    return;
   }
 
   emit('submit', {
@@ -50,14 +62,21 @@ function onSubmit() {
     amountCents,
     payerId: payerId.value,
     participantIds: selectedIds.value,
-  })
+  });
 }
 </script>
 
 <template>
-  <form class="space-y-4 rounded-2xl border border-stone-200 bg-white p-4 shadow-sm dark:border-stone-800 dark:bg-stone-900" @submit.prevent="onSubmit">
+  <form
+    class="space-y-4 rounded-2xl border border-stone-200 bg-white p-4 shadow-sm dark:border-stone-800 dark:bg-stone-900"
+    @submit.prevent="onSubmit"
+  >
     <div>
-      <label for="description" class="block text-sm font-medium text-stone-700 dark:text-stone-300">Description</label>
+      <label
+        for="description"
+        class="block text-sm font-medium text-stone-700 dark:text-stone-300"
+        >Description</label
+      >
       <input
         id="description"
         v-model="description"
@@ -65,11 +84,14 @@ function onSubmit() {
         required
         class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base 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"
         placeholder="Dinner, taxi, groceries…"
-      >
+      />
     </div>
 
     <div>
-      <label for="amount" class="block text-sm font-medium text-stone-700 dark:text-stone-300">
+      <label
+        for="amount"
+        class="block text-sm font-medium text-stone-700 dark:text-stone-300"
+      >
         Amount ({{ currency }})
       </label>
       <input
@@ -81,33 +103,45 @@ function onSubmit() {
         required
         class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base 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"
         placeholder="0.00"
-      >
+      />
     </div>
 
     <div>
-      <label for="payer" class="block text-sm font-medium text-stone-700 dark:text-stone-300">Paid by</label>
+      <label
+        for="payer"
+        class="block text-sm font-medium text-stone-700 dark:text-stone-300"
+        >Paid by</label
+      >
       <select
         id="payer"
         v-model="payerId"
         class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base text-stone-900 shadow-sm 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:focus:ring-orange-900"
       >
-        <option v-for="participant in participants" :key="participant.id" :value="participant.id">
+        <option
+          v-for="participant in participants"
+          :key="participant.id"
+          :value="participant.id"
+        >
           {{ participant.name }}
         </option>
       </select>
     </div>
 
     <div>
-      <span class="block text-sm font-medium text-stone-700 dark:text-stone-300">Split equally among</span>
+      <span class="block text-sm font-medium text-stone-700 dark:text-stone-300"
+        >Split equally among</span
+      >
       <div class="mt-2 flex flex-wrap gap-2">
         <button
           v-for="participant in participants"
           :key="participant.id"
           type="button"
           class="rounded-full border px-3 py-1.5 text-sm font-medium transition-colors"
-          :class="selectedIds.includes(participant.id)
-            ? 'border-orange-400 bg-orange-100 text-orange-800 dark:border-orange-700 dark:bg-orange-900/40 dark:text-orange-200'
-            : 'border-stone-300 bg-white text-stone-600 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-400'"
+          :class="
+            selectedIds.includes(participant.id)
+              ? 'border-orange-400 bg-orange-100 text-orange-800 dark:border-orange-700 dark:bg-orange-900/40 dark:text-orange-200'
+              : 'border-stone-300 bg-white text-stone-600 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-400'
+          "
           @click="toggleParticipant(participant.id)"
         >
           {{ participant.name }}

app/components/BalanceSummary.vue

@@ -1,92 +1,97 @@
 <script setup lang="ts">
-import type { ParticipantView, SettlementView } from '../types'
-import { isValidPaymentLink } from '~~/shared/utils/paymentLink'
+import type { ParticipantView, SettlementView } from '../types';
+import { isValidPaymentLink } from '~~/shared/utils/paymentLink';
 
 const props = defineProps<{
-  slug: string
-  participants: ParticipantView[]
-  netBalances: Record<number, number>
-  settlements: SettlementView[]
-  currency: string
-}>()
+  slug: string;
+  participants: ParticipantView[];
+  netBalances: Record<number, number>;
+  settlements: SettlementView[];
+  currency: string;
+}>();
 
-const emit = defineEmits<{ settled: [], updated: [] }>()
+const emit = defineEmits<{ settled: []; updated: [] }>();
 
-const { lastLink, rememberLink } = usePaymentLinkCache()
+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)
+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'
+  return props.participants.find((p) => p.id === id)?.name ?? 'Unknown';
 }
 
 function paymentLinkOf(id: number) {
-  return props.participants.find(p => p.id === id)?.paymentLink || null
+  return props.participants.find((p) => p.id === id)?.paymentLink || null;
 }
 
 function initialOf(participantName: string) {
-  return participantName.trim().charAt(0).toUpperCase() || '?'
+  return participantName.trim().charAt(0).toUpperCase() || '?';
 }
 
 function keyOf(settlement: SettlementView) {
-  return `${settlement.fromId}-${settlement.toId}-${settlement.amountCents}`
+  return `${settlement.fromId}-${settlement.toId}-${settlement.amountCents}`;
 }
 
 function startEdit(participant: ParticipantView) {
-  editingId.value = participant.id
-  editValue.value = participant.paymentLink ?? lastLink.value ?? ''
-  editError.value = ''
+  editingId.value = participant.id;
+  editValue.value = participant.paymentLink ?? lastLink.value ?? '';
+  editError.value = '';
 }
 
 function cancelEdit() {
-  editingId.value = null
-  editError.value = ''
+  editingId.value = null;
+  editError.value = '';
 }
 
 async function saveEdit(participant: ParticipantView) {
-  const trimmed = editValue.value.trim()
+  const trimmed = editValue.value.trim();
   if (trimmed && !isValidPaymentLink(trimmed)) {
-    editError.value = 'Enter a valid link starting with http:// or https://.'
-    return
+    editError.value = 'Enter a valid link starting with http:// or https://.';
+    return;
   }
-  savingLink.value = true
+  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
+    });
+    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
+  const key = keyOf(settlement);
+  settlingKey.value = key;
   try {
     await $fetch(`/api/pots/${props.slug}/payments`, {
       method: 'POST',
-      body: { fromId: settlement.fromId, toId: settlement.toId, amountCents: settlement.amountCents },
-    })
-    emit('settled')
-  }
-  finally {
-    settlingKey.value = null
+      body: {
+        fromId: settlement.fromId,
+        toId: settlement.toId,
+        amountCents: settlement.amountCents,
+      },
+    });
+    emit('settled');
+  } finally {
+    settlingKey.value = null;
   }
 }
 </script>
 
 <template>
   <div class="space-y-4">
-    <p v-if="participants.length === 0" class="rounded-2xl border border-dashed border-stone-300 p-4 text-center text-sm text-stone-500 dark:border-stone-700 dark:text-stone-400">
+    <p
+      v-if="participants.length === 0"
+      class="rounded-2xl border border-dashed border-stone-300 p-4 text-center text-sm text-stone-500 dark:border-stone-700 dark:text-stone-400"
+    >
       No one's in this Pot yet. Add people from the settings page.
     </p>
 
@@ -100,12 +105,21 @@ async function markSettled(settlement: SettlementView) {
           <button
             type="button"
             class="flex min-w-0 items-center gap-3 text-left"
-            @click="editingId === participant.id ? cancelEdit() : startEdit(participant)"
+            @click="
+              editingId === participant.id
+                ? cancelEdit()
+                : startEdit(participant)
+            "
           >
-            <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">
+            <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"
+            >
               {{ initialOf(participant.name) }}
             </div>
-            <span class="truncate font-medium text-stone-900 dark:text-stone-100">{{ participant.name }}</span>
+            <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
@@ -121,23 +135,37 @@ async function markSettled(settlement: SettlementView) {
             <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,
+                '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) }}
+                {{ (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">
+        <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">
@@ -147,7 +175,7 @@ async function markSettled(settlement: SettlementView) {
               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"
@@ -176,7 +204,10 @@ async function markSettled(settlement: SettlementView) {
         Suggested payments
       </h2>
 
-      <p v-if="settlements.length === 0" class="text-sm text-stone-500 dark:text-stone-400">
+      <p
+        v-if="settlements.length === 0"
+        class="text-sm text-stone-500 dark:text-stone-400"
+      >
         Everyone is settled up.
       </p>
       <ul v-else class="space-y-2">
@@ -187,22 +218,42 @@ async function markSettled(settlement: SettlementView) {
         >
           <div class="flex items-center gap-2">
             <div class="flex min-w-0 flex-1 items-center gap-2">
-              <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white text-xs font-semibold text-orange-700 shadow-sm ring-1 ring-orange-200 dark:bg-stone-900 dark:text-orange-300 dark:ring-orange-800">
+              <div
+                class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white text-xs font-semibold text-orange-700 shadow-sm ring-1 ring-orange-200 dark:bg-stone-900 dark:text-orange-300 dark:ring-orange-800"
+              >
                 {{ initialOf(nameOf(settlement.fromId)) }}
               </div>
-              <span class="truncate text-sm font-medium text-stone-700 dark:text-stone-300">{{ nameOf(settlement.fromId) }}</span>
+              <span
+                class="truncate text-sm font-medium text-stone-700 dark:text-stone-300"
+                >{{ nameOf(settlement.fromId) }}</span
+              >
 
-              <svg class="h-4 w-4 shrink-0 text-orange-400 dark:text-orange-500" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L11.29 6.15a.75.75 0 1 1 1.02-1.1l4.5 4.25a.75.75 0 0 1 0 1.1l-4.5 4.25a.75.75 0 1 1-1.02-1.1l3.098-3.1H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd" />
+              <svg
+                class="h-4 w-4 shrink-0 text-orange-400 dark:text-orange-500"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M3 10a.75.75 0 0 1 .75-.75h10.638L11.29 6.15a.75.75 0 1 1 1.02-1.1l4.5 4.25a.75.75 0 0 1 0 1.1l-4.5 4.25a.75.75 0 1 1-1.02-1.1l3.098-3.1H3.75A.75.75 0 0 1 3 10Z"
+                  clip-rule="evenodd"
+                />
               </svg>
 
-              <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white text-xs font-semibold text-orange-700 shadow-sm ring-1 ring-orange-200 dark:bg-stone-900 dark:text-orange-300 dark:ring-orange-800">
+              <div
+                class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white text-xs font-semibold text-orange-700 shadow-sm ring-1 ring-orange-200 dark:bg-stone-900 dark:text-orange-300 dark:ring-orange-800"
+              >
                 {{ initialOf(nameOf(settlement.toId)) }}
               </div>
-              <span class="truncate text-sm font-medium text-stone-700 dark:text-stone-300">{{ nameOf(settlement.toId) }}</span>
+              <span
+                class="truncate text-sm font-medium text-stone-700 dark:text-stone-300"
+                >{{ nameOf(settlement.toId) }}</span
+              >
             </div>
 
-            <span class="shrink-0 rounded-full bg-white px-2.5 py-1 text-sm font-bold text-orange-700 shadow-sm dark:bg-stone-900 dark:text-orange-300">
+            <span
+              class="shrink-0 rounded-full bg-white px-2.5 py-1 text-sm font-bold text-orange-700 shadow-sm dark:bg-stone-900 dark:text-orange-300"
+            >
               {{ formatCurrency(settlement.amountCents, currency) }}
             </span>
           </div>
@@ -223,7 +274,9 @@ async function markSettled(settlement: SettlementView) {
               class="rounded-full bg-orange-500 px-3 py-1 text-xs font-semibold text-white shadow-sm transition-colors hover:bg-orange-600 disabled:opacity-50"
               @click="markSettled(settlement)"
             >
-              {{ settlingKey === keyOf(settlement) ? 'Marking…' : 'Mark as paid' }}
+              {{
+                settlingKey === keyOf(settlement) ? 'Marking…' : 'Mark as paid'
+              }}
             </button>
           </div>
         </li>

app/components/ExpenseList.vue

@@ -1,34 +1,42 @@
 <script setup lang="ts">
-import type { ExpenseView, ParticipantView } from '../types'
+import type { ExpenseView, ParticipantView } from '../types';
 
 const props = defineProps<{
-  expenses: ExpenseView[]
-  participants: ParticipantView[]
-  currency: string
-}>()
+  expenses: ExpenseView[];
+  participants: ParticipantView[];
+  currency: string;
+}>();
 
-const emit = defineEmits<{ edit: [expense: ExpenseView], remove: [id: number] }>()
+const emit = defineEmits<{
+  edit: [expense: ExpenseView];
+  remove: [id: number];
+}>();
 
-const expandedId = ref<number | null>(null)
+const expandedId = ref<number | null>(null);
 
 function nameOf(id: number) {
-  return props.participants.find(p => p.id === id)?.name ?? 'Unknown'
+  return props.participants.find((p) => p.id === id)?.name ?? 'Unknown';
 }
 
 function namesOf(ids: number[]) {
-  return ids.map(nameOf).join(', ')
+  return ids.map(nameOf).join(', ');
 }
 
 function toggle(id: number) {
-  expandedId.value = expandedId.value === id ? null : id
+  expandedId.value = expandedId.value === id ? null : id;
 }
 
-const sorted = computed(() => [...props.expenses].sort((a, b) => b.createdAt - a.createdAt))
+const sorted = computed(() =>
+  [...props.expenses].sort((a, b) => b.createdAt - a.createdAt),
+);
 </script>
 
 <template>
   <div class="space-y-3">
-    <p v-if="expenses.length === 0" class="rounded-2xl border border-dashed border-stone-300 p-4 text-center text-sm text-stone-500 dark:border-stone-700 dark:text-stone-400">
+    <p
+      v-if="expenses.length === 0"
+      class="rounded-2xl border border-dashed border-stone-300 p-4 text-center text-sm text-stone-500 dark:border-stone-700 dark:text-stone-400"
+    >
       No expenses yet. Add the first one below.
     </p>
 
@@ -36,17 +44,37 @@ const sorted = computed(() => [...props.expenses].sort((a, b) => b.createdAt - a
       v-for="expense in sorted"
       :key="expense.id"
       class="rounded-2xl border p-4 shadow-sm"
-      :class="expense.type === 'payment'
-        ? 'border-emerald-100 bg-emerald-50/60 dark:border-emerald-900/60 dark:bg-emerald-950/20'
-        : 'border-stone-200 bg-white dark:border-stone-800 dark:bg-stone-900'"
+      :class="
+        expense.type === 'payment'
+          ? 'border-emerald-100 bg-emerald-50/60 dark:border-emerald-900/60 dark:bg-emerald-950/20'
+          : 'border-stone-200 bg-white dark:border-stone-800 dark:bg-stone-900'
+      "
     >
-      <button type="button" class="flex w-full items-start justify-between gap-2 text-left" @click="toggle(expense.id)">
-        <div v-if="expense.type === 'payment'" class="flex min-w-0 items-center gap-2">
-          <svg class="h-4 w-4 shrink-0 text-emerald-600 dark:text-emerald-400" viewBox="0 0 20 20" fill="currentColor">
-            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+      <button
+        type="button"
+        class="flex w-full items-start justify-between gap-2 text-left"
+        @click="toggle(expense.id)"
+      >
+        <div
+          v-if="expense.type === 'payment'"
+          class="flex min-w-0 items-center gap-2"
+        >
+          <svg
+            class="h-4 w-4 shrink-0 text-emerald-600 dark:text-emerald-400"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
+              clip-rule="evenodd"
+            />
           </svg>
-          <p class="truncate font-medium text-emerald-800 dark:text-emerald-300">
-            {{ nameOf(expense.payerId) }} paid {{ nameOf(expense.participantIds[0]!) }}
+          <p
+            class="truncate font-medium text-emerald-800 dark:text-emerald-300"
+          >
+            {{ nameOf(expense.payerId) }} paid
+            {{ nameOf(expense.participantIds[0]!) }}
           </p>
         </div>
         <div v-else class="min-w-0">
@@ -60,7 +88,11 @@ const sorted = computed(() => [...props.expenses].sort((a, b) => b.createdAt - a
         <div class="flex shrink-0 items-center gap-2">
           <span
             class="font-medium"
-            :class="expense.type === 'payment' ? 'text-emerald-700 dark:text-emerald-300' : 'text-stone-900 dark:text-stone-100'"
+            :class="
+              expense.type === 'payment'
+                ? 'text-emerald-700 dark:text-emerald-300'
+                : 'text-stone-900 dark:text-stone-100'
+            "
           >
             {{ formatCurrency(expense.amountCents, currency) }}
           </span>
@@ -70,7 +102,11 @@ const sorted = computed(() => [...props.expenses].sort((a, b) => b.createdAt - a
             viewBox="0 0 20 20"
             fill="currentColor"
           >
-            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.148l3.71-3.918a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd" />
+            <path
+              fill-rule="evenodd"
+              d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.148l3.71-3.918a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z"
+              clip-rule="evenodd"
+            />
           </svg>
         </div>
       </button>
@@ -78,9 +114,16 @@ const sorted = computed(() => [...props.expenses].sort((a, b) => b.createdAt - a
       <div
         v-if="expandedId === expense.id"
         class="mt-3 space-y-3 border-t pt-3"
-        :class="expense.type === 'payment' ? 'border-emerald-100 dark:border-emerald-900/60' : 'border-stone-100 dark:border-stone-800'"
+        :class="
+          expense.type === 'payment'
+            ? 'border-emerald-100 dark:border-emerald-900/60'
+            : 'border-stone-100 dark:border-stone-800'
+        "
       >
-        <p v-if="expense.type === 'expense'" class="text-xs text-stone-400 dark:text-stone-500">
+        <p
+          v-if="expense.type === 'expense'"
+          class="text-xs text-stone-400 dark:text-stone-500"
+        >
           split among {{ namesOf(expense.participantIds) }}
         </p>
         <div class="flex gap-3">

app/components/NameForm.vue

@@ -1,20 +1,23 @@
 <script setup lang="ts">
-const props = defineProps<{ title?: string, buttonLabel?: string }>()
-const emit = defineEmits<{ submit: [name: string] }>()
+const props = defineProps<{ title?: string; buttonLabel?: string }>();
+const emit = defineEmits<{ submit: [name: string] }>();
 
-const name = ref('')
+const name = ref('');
 
 function onSubmit() {
-  if (!name.value.trim()) return
-  emit('submit', name.value.trim())
+  if (!name.value.trim()) return;
+  emit('submit', name.value.trim());
 }
 </script>
 
 <template>
   <form class="space-y-3" @submit.prevent="onSubmit">
     <div>
-      <label for="name" class="block text-sm font-medium text-stone-700 dark:text-stone-300">
-        {{ props.title ?? 'What\'s your name?' }}
+      <label
+        for="name"
+        class="block text-sm font-medium text-stone-700 dark:text-stone-300"
+      >
+        {{ props.title ?? "What's your name?" }}
       </label>
       <input
         id="name"
@@ -24,7 +27,7 @@ function onSubmit() {
         required
         class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base 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-900 dark:text-stone-100 dark:placeholder:text-stone-500 dark:focus:ring-orange-900"
         placeholder="Your name"
-      >
+      />
     </div>
     <button
       type="submit"

app/composables/useIdentity.ts

@@ -1,21 +1,22 @@
-import { readIdentity, writeIdentity } from '../utils/identity'
+import { readIdentity, writeIdentity } from '../utils/identity';
 
 export function useIdentity() {
-  const name = useState<string | null>('identity-name', () => null)
-  const loaded = useState('identity-loaded', () => false)
+  const name = useState<string | null>('identity-name', () => null);
+  const loaded = useState('identity-loaded', () => false);
 
   if (import.meta.client && !loaded.value) {
-    const identity = readIdentity(window.localStorage)
-    name.value = identity?.name ?? null
-    loaded.value = true
+    const identity = readIdentity(window.localStorage);
+    name.value = identity?.name ?? null;
+    loaded.value = true;
   }
 
   function setName(newName: string) {
-    const trimmed = newName.trim()
-    if (!trimmed) return
-    name.value = trimmed
-    if (import.meta.client) writeIdentity(window.localStorage, { name: trimmed })
+    const trimmed = newName.trim();
+    if (!trimmed) return;
+    name.value = trimmed;
+    if (import.meta.client)
+      writeIdentity(window.localStorage, { name: trimmed });
   }
 
-  return { name, setName }
+  return { name, setName };
 }

app/composables/usePaymentLinkCache.ts

@@ -1,17 +1,20 @@
-import { readCachedPaymentLink, writeCachedPaymentLink } from '../utils/paymentLinkCache'
+import {
+  readCachedPaymentLink,
+  writeCachedPaymentLink,
+} from '../utils/paymentLinkCache';
 
 export function usePaymentLinkCache() {
-  const lastLink = useState<string | null>('payment-link-cache', () => null)
+  const lastLink = useState<string | null>('payment-link-cache', () => null);
 
   if (import.meta.client && lastLink.value === null) {
-    lastLink.value = readCachedPaymentLink(window.localStorage)
+    lastLink.value = readCachedPaymentLink(window.localStorage);
   }
 
   function rememberLink(link: string) {
-    if (!import.meta.client || !link) return
-    lastLink.value = link
-    writeCachedPaymentLink(window.localStorage, link)
+    if (!import.meta.client || !link) return;
+    lastLink.value = link;
+    writeCachedPaymentLink(window.localStorage, link);
   }
 
-  return { lastLink, rememberLink }
+  return { lastLink, rememberLink };
 }

app/composables/useVisitedPots.ts

@@ -1,18 +1,22 @@
-import { readVisitedPots, recordVisitedPot, type VisitedPot } from '../utils/visitedPots'
+import {
+  readVisitedPots,
+  recordVisitedPot,
+  type VisitedPot,
+} from '../utils/visitedPots';
 
 export function useVisitedPots() {
-  const stored = useState<VisitedPot[] | null>('visited-pots', () => null)
+  const stored = useState<VisitedPot[] | null>('visited-pots', () => null);
 
   if (import.meta.client && stored.value === null) {
-    stored.value = readVisitedPots(window.localStorage)
+    stored.value = readVisitedPots(window.localStorage);
   }
 
-  const pots = computed(() => stored.value ?? [])
+  const pots = computed(() => stored.value ?? []);
 
   function recordVisit(pot: Omit<VisitedPot, 'visitedAt'>) {
-    if (!import.meta.client) return
-    stored.value = recordVisitedPot(window.localStorage, pot)
+    if (!import.meta.client) return;
+    stored.value = recordVisitedPot(window.localStorage, pot);
   }
 
-  return { pots, recordVisit }
+  return { pots, recordVisit };
 }

app/pages/index.vue

@@ -1,30 +1,32 @@
 <script setup lang="ts">
-const { name, setName } = useIdentity()
-const { pots: visitedPots } = useVisitedPots()
+const { name, setName } = useIdentity();
+const { pots: visitedPots } = useVisitedPots();
 
-const potName = ref('')
-const currency = ref('EUR')
-const creating = ref(false)
-const error = ref('')
+const potName = ref('');
+const currency = ref('EUR');
+const creating = ref(false);
+const error = ref('');
 
-const currencies = ['EUR', 'USD', 'GBP', 'CHF']
+const currencies = ['EUR', 'USD', 'GBP', 'CHF'];
 
 async function createPot() {
-  if (!potName.value.trim()) return
-  creating.value = true
-  error.value = ''
+  if (!potName.value.trim()) return;
+  creating.value = true;
+  error.value = '';
   try {
     const pot = await $fetch('/api/pots', {
       method: 'POST',
-      body: { name: potName.value.trim(), currency: currency.value, creatorName: name.value },
-    })
-    await navigateTo(`/p/${pot.slug}/setup`)
-  }
-  catch {
-    error.value = 'Could not create the Pot. Please try again.'
-  }
-  finally {
-    creating.value = false
+      body: {
+        name: potName.value.trim(),
+        currency: currency.value,
+        creatorName: name.value,
+      },
+    });
+    await navigateTo(`/p/${pot.slug}/setup`);
+  } catch {
+    error.value = 'Could not create the Pot. Please try again.';
+  } finally {
+    creating.value = false;
   }
 }
 </script>
@@ -32,9 +34,7 @@ async function createPot() {
 <template>
   <div class="space-y-8">
     <div class="space-y-1 text-center">
-      <div class="text-4xl">
-        🍯
-      </div>
+      <div class="text-4xl">🍯</div>
       <h1 class="text-2xl font-bold text-stone-900 dark:text-stone-100">
         Splitt the Bill
       </h1>
@@ -53,8 +53,13 @@ async function createPot() {
             :to="`/p/${pot.slug}`"
             class="flex items-center justify-between gap-3 rounded-2xl border border-stone-200 bg-white p-3 shadow-sm transition-colors hover:border-orange-300 dark:border-stone-800 dark:bg-stone-900 dark:hover:border-orange-700"
           >
-            <span class="font-medium text-stone-900 dark:text-stone-100">{{ pot.name }}</span>
-            <span class="shrink-0 text-xs font-medium text-stone-400 dark:text-stone-500">{{ pot.currency }}</span>
+            <span class="font-medium text-stone-900 dark:text-stone-100">{{
+              pot.name
+            }}</span>
+            <span
+              class="shrink-0 text-xs font-medium text-stone-400 dark:text-stone-500"
+              >{{ pot.currency }}</span
+            >
           </NuxtLink>
         </li>
       </ul>
@@ -62,13 +67,21 @@ async function createPot() {
 
     <NameForm v-if="!name" @submit="setName" />
 
-    <form v-else class="space-y-4 rounded-2xl border border-stone-200 bg-white p-5 shadow-sm dark:border-stone-800 dark:bg-stone-900" @submit.prevent="createPot">
+    <form
+      v-else
+      class="space-y-4 rounded-2xl border border-stone-200 bg-white p-5 shadow-sm dark:border-stone-800 dark:bg-stone-900"
+      @submit.prevent="createPot"
+    >
       <p class="text-sm text-stone-600 dark:text-stone-400">
         Hi {{ name }}! Create a new Pot to start splitting costs.
       </p>
 
       <div>
-        <label for="pot-name" class="block text-sm font-medium text-stone-700 dark:text-stone-300">Pot name</label>
+        <label
+          for="pot-name"
+          class="block text-sm font-medium text-stone-700 dark:text-stone-300"
+          >Pot name</label
+        >
         <input
           id="pot-name"
           v-model="potName"
@@ -76,11 +89,15 @@ async function createPot() {
           required
           class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base 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"
           placeholder="Weekend in Lisbon"
-        >
+        />
       </div>
 
       <div>
-        <label for="currency" class="block text-sm font-medium text-stone-700 dark:text-stone-300">Currency</label>
+        <label
+          for="currency"
+          class="block text-sm font-medium text-stone-700 dark:text-stone-300"
+          >Currency</label
+        >
         <select
           id="currency"
           v-model="currency"

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

@@ -1,77 +1,98 @@
 <script setup lang="ts">
-import type { ExpenseView, PotView } from '~/types'
+import type { ExpenseView, PotView } from '~/types';
 
-const route = useRoute()
-const slug = route.params.slug as string
-const { name, setName } = useIdentity()
+const route = useRoute();
+const slug = route.params.slug as string;
+const { name, setName } = useIdentity();
 
-const { data, refresh, error } = await useFetch<PotView>(`/api/pots/${slug}`)
-const { recordVisit } = useVisitedPots()
+const { data, refresh, error } = await useFetch<PotView>(`/api/pots/${slug}`);
+const { recordVisit } = useVisitedPots();
 
 const me = computed(() =>
-  data.value?.participants.find(p => p.name.toLowerCase() === name.value?.toLowerCase()),
-)
+  data.value?.participants.find(
+    (p) => p.name.toLowerCase() === name.value?.toLowerCase(),
+  ),
+);
 
-watch(data, (pot) => {
-  if (!pot) return
-  recordVisit({ slug: pot.pot.slug, name: pot.pot.name, currency: pot.pot.currency })
-}, { immediate: true })
+watch(
+  data,
+  (pot) => {
+    if (!pot) return;
+    recordVisit({
+      slug: pot.pot.slug,
+      name: pot.pot.name,
+      currency: pot.pot.currency,
+    });
+  },
+  { immediate: true },
+);
 
-const activeTab = ref<'people' | 'expenses'>('people')
-const showExpenseForm = ref(false)
-const editingExpense = ref<ExpenseView | null>(null)
-const linkCopied = ref(false)
+const activeTab = ref<'people' | 'expenses'>('people');
+const showExpenseForm = ref(false);
+const editingExpense = ref<ExpenseView | null>(null);
+const linkCopied = ref(false);
 
 async function addMyself() {
-  if (!name.value) return
-  await $fetch(`/api/pots/${slug}/participants`, { method: 'POST', body: { name: name.value } })
-  await refresh()
+  if (!name.value) return;
+  await $fetch(`/api/pots/${slug}/participants`, {
+    method: 'POST',
+    body: { name: name.value },
+  });
+  await refresh();
 }
 
-async function submitExpense(payload: { description: string, amountCents: number, payerId: number, participantIds: number[] }) {
+async function submitExpense(payload: {
+  description: string;
+  amountCents: number;
+  payerId: number;
+  participantIds: number[];
+}) {
   if (editingExpense.value) {
-    await $fetch(`/api/pots/${slug}/expenses/${editingExpense.value.id}`, { method: 'PATCH', body: payload })
+    await $fetch(`/api/pots/${slug}/expenses/${editingExpense.value.id}`, {
+      method: 'PATCH',
+      body: payload,
+    });
+  } else {
+    await $fetch(`/api/pots/${slug}/expenses`, {
+      method: 'POST',
+      body: payload,
+    });
   }
-  else {
-    await $fetch(`/api/pots/${slug}/expenses`, { method: 'POST', body: payload })
-  }
-  editingExpense.value = null
-  showExpenseForm.value = false
-  await refresh()
+  editingExpense.value = null;
+  showExpenseForm.value = false;
+  await refresh();
 }
 
 function editExpense(expense: ExpenseView) {
-  editingExpense.value = expense
-  showExpenseForm.value = true
+  editingExpense.value = expense;
+  showExpenseForm.value = true;
 }
 
 function newExpense() {
-  editingExpense.value = null
-  showExpenseForm.value = true
+  editingExpense.value = null;
+  showExpenseForm.value = true;
 }
 
 function cancelExpenseForm() {
-  editingExpense.value = null
-  showExpenseForm.value = false
+  editingExpense.value = null;
+  showExpenseForm.value = false;
 }
 
 async function removeExpense(id: number) {
-  await $fetch(`/api/pots/${slug}/expenses/${id}`, { method: 'DELETE' })
-  await refresh()
+  await $fetch(`/api/pots/${slug}/expenses/${id}`, { method: 'DELETE' });
+  await refresh();
 }
 
 async function copyLink() {
-  await navigator.clipboard.writeText(window.location.href)
-  linkCopied.value = true
-  setTimeout(() => (linkCopied.value = false), 2000)
+  await navigator.clipboard.writeText(window.location.href);
+  linkCopied.value = true;
+  setTimeout(() => (linkCopied.value = false), 2000);
 }
 </script>
 
 <template>
   <div v-if="error" class="space-y-3 text-center">
-    <p class="text-rose-600 dark:text-rose-400">
-      This Pot couldn't be found.
-    </p>
+    <p class="text-rose-600 dark:text-rose-400">This Pot couldn't be found.</p>
     <NuxtLink to="/" class="font-medium text-orange-600 dark:text-orange-400">
       Go home
     </NuxtLink>
@@ -85,7 +106,11 @@ async function copyLink() {
       class="inline-flex items-center gap-1 text-sm font-medium text-stone-500 transition-colors hover:text-orange-600 dark:text-stone-400 dark:hover:text-orange-400"
     >
       <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
-        <path fill-rule="evenodd" d="M17 10a.75.75 0 0 1-.75.75H5.612l4.158 3.96a.75.75 0 1 1-1.04 1.08l-5.5-5.25a.75.75 0 0 1 0-1.08l5.5-5.25a.75.75 0 1 1 1.04 1.08L5.612 9.25H16.25A.75.75 0 0 1 17 10Z" clip-rule="evenodd" />
+        <path
+          fill-rule="evenodd"
+          d="M17 10a.75.75 0 0 1-.75.75H5.612l4.158 3.96a.75.75 0 1 1-1.04 1.08l-5.5-5.25a.75.75 0 0 1 0-1.08l5.5-5.25a.75.75 0 1 1 1.04 1.08L5.612 9.25H16.25A.75.75 0 0 1 17 10Z"
+          clip-rule="evenodd"
+        />
       </svg>
       All Pots
     </NuxtLink>
@@ -113,13 +138,20 @@ async function copyLink() {
           aria-label="Pot settings"
         >
           <svg class="h-4.5 w-4.5" viewBox="0 0 20 20" fill="currentColor">
-            <path fill-rule="evenodd" d="M8.34 1.804A1 1 0 0 1 9.32 1h1.36a1 1 0 0 1 .98.804l.24 1.192c.428.183.83.41 1.2.674l1.146-.386a1 1 0 0 1 1.212.464l.68 1.178a1 1 0 0 1-.208 1.267l-.912.816a6.5 6.5 0 0 1 0 1.382l.912.816a1 1 0 0 1 .208 1.267l-.68 1.178a1 1 0 0 1-1.212.464l-1.146-.386c-.37.264-.772.49-1.2.674l-.24 1.192a1 1 0 0 1-.98.804H9.32a1 1 0 0 1-.98-.804l-.24-1.192a6.5 6.5 0 0 1-1.2-.674l-1.146.386a1 1 0 0 1-1.212-.464l-.68-1.178a1 1 0 0 1 .208-1.267l.912-.816a6.5 6.5 0 0 1 0-1.382l-.912-.816a1 1 0 0 1-.208-1.267l.68-1.178a1 1 0 0 1 1.212-.464l1.146.386c.37-.264.772-.49 1.2-.674l.24-1.192ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" />
+            <path
+              fill-rule="evenodd"
+              d="M8.34 1.804A1 1 0 0 1 9.32 1h1.36a1 1 0 0 1 .98.804l.24 1.192c.428.183.83.41 1.2.674l1.146-.386a1 1 0 0 1 1.212.464l.68 1.178a1 1 0 0 1-.208 1.267l-.912.816a6.5 6.5 0 0 1 0 1.382l.912.816a1 1 0 0 1 .208 1.267l-.68 1.178a1 1 0 0 1-1.212.464l-1.146-.386c-.37.264-.772.49-1.2.674l-.24 1.192a1 1 0 0 1-.98.804H9.32a1 1 0 0 1-.98-.804l-.24-1.192a6.5 6.5 0 0 1-1.2-.674l-1.146.386a1 1 0 0 1-1.212-.464l-.68-1.178a1 1 0 0 1 .208-1.267l.912-.816a6.5 6.5 0 0 1 0-1.382l-.912-.816a1 1 0 0 1-.208-1.267l.68-1.178a1 1 0 0 1 1.212-.464l1.146.386c.37-.264.772-.49 1.2-.674l.24-1.192ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
+              clip-rule="evenodd"
+            />
           </svg>
         </NuxtLink>
       </div>
     </div>
 
-    <div v-if="!me" class="rounded-2xl border border-orange-200 bg-orange-50 p-4 text-sm dark:border-orange-900 dark:bg-orange-950/40">
+    <div
+      v-if="!me"
+      class="rounded-2xl border border-orange-200 bg-orange-50 p-4 text-sm dark:border-orange-900 dark:bg-orange-950/40"
+    >
       <p class="mb-2 text-stone-700 dark:text-stone-300">
         You're not in this Pot's participant list yet.
       </p>
@@ -132,13 +164,17 @@ async function copyLink() {
       </button>
     </div>
 
-    <div class="grid grid-cols-2 gap-1 rounded-xl bg-stone-100 p-1 dark:bg-stone-900">
+    <div
+      class="grid grid-cols-2 gap-1 rounded-xl bg-stone-100 p-1 dark:bg-stone-900"
+    >
       <button
         type="button"
         class="rounded-lg py-2 text-sm font-medium transition-colors"
-        :class="activeTab === 'people'
-          ? 'bg-white text-stone-900 shadow-sm dark:bg-stone-800 dark:text-stone-100'
-          : 'text-stone-500 dark:text-stone-400'"
+        :class="
+          activeTab === 'people'
+            ? 'bg-white text-stone-900 shadow-sm dark:bg-stone-800 dark:text-stone-100'
+            : 'text-stone-500 dark:text-stone-400'
+        "
         @click="activeTab = 'people'"
       >
         People &amp; balances
@@ -146,9 +182,11 @@ async function copyLink() {
       <button
         type="button"
         class="rounded-lg py-2 text-sm font-medium transition-colors"
-        :class="activeTab === 'expenses'
-          ? 'bg-white text-stone-900 shadow-sm dark:bg-stone-800 dark:text-stone-100'
-          : 'text-stone-500 dark:text-stone-400'"
+        :class="
+          activeTab === 'expenses'
+            ? 'bg-white text-stone-900 shadow-sm dark:bg-stone-800 dark:text-stone-100'
+            : 'text-stone-500 dark:text-stone-400'
+        "
         @click="activeTab = 'expenses'"
       >
         Expenses

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

@@ -1,49 +1,49 @@
 <script setup lang="ts">
-import type { PotView } from '~/types'
+import type { PotView } from '~/types';
 
-const route = useRoute()
-const slug = route.params.slug as string
+const route = useRoute();
+const slug = route.params.slug as string;
 
-const { data, refresh, error } = await useFetch<PotView>(`/api/pots/${slug}`)
+const { data, refresh, error } = await useFetch<PotView>(`/api/pots/${slug}`);
 
-const adding = ref(false)
-const removingId = ref<number | null>(null)
-const removeError = ref('')
+const adding = ref(false);
+const removingId = ref<number | null>(null);
+const removeError = ref('');
 
 async function addParticipant(participantName: string) {
-  adding.value = true
+  adding.value = true;
   try {
-    await $fetch(`/api/pots/${slug}/participants`, { method: 'POST', body: { name: participantName } })
-    await refresh()
-  }
-  finally {
-    adding.value = false
+    await $fetch(`/api/pots/${slug}/participants`, {
+      method: 'POST',
+      body: { name: participantName },
+    });
+    await refresh();
+  } finally {
+    adding.value = false;
   }
 }
 
-async function removeParticipant(participant: { id: number, name: string }) {
-  if (!window.confirm(`Remove ${participant.name} from this Pot?`)) return
+async function removeParticipant(participant: { id: number; name: string }) {
+  if (!window.confirm(`Remove ${participant.name} from this Pot?`)) return;
 
-  removeError.value = ''
-  removingId.value = participant.id
+  removeError.value = '';
+  removingId.value = participant.id;
   try {
-    await $fetch(`/api/pots/${slug}/participants/${participant.id}`, { method: 'DELETE' })
-    await refresh()
-  }
-  catch {
-    removeError.value = `Couldn't remove ${participant.name}. They may have expenses or payments recorded.`
-  }
-  finally {
-    removingId.value = null
+    await $fetch(`/api/pots/${slug}/participants/${participant.id}`, {
+      method: 'DELETE',
+    });
+    await refresh();
+  } catch {
+    removeError.value = `Couldn't remove ${participant.name}. They may have expenses or payments recorded.`;
+  } finally {
+    removingId.value = null;
   }
 }
 </script>
 
 <template>
   <div v-if="error" class="space-y-3 text-center">
-    <p class="text-rose-600 dark:text-rose-400">
-      This Pot couldn't be found.
-    </p>
+    <p class="text-rose-600 dark:text-rose-400">This Pot couldn't be found.</p>
     <NuxtLink to="/" class="font-medium text-orange-600 dark:text-orange-400">
       Go home
     </NuxtLink>
@@ -57,7 +57,11 @@ async function removeParticipant(participant: { id: number, name: string }) {
         aria-label="Back to Pot"
       >
         <svg class="h-4.5 w-4.5" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 0 1 0 1.06L9.06 10l3.73 3.71a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
+          <path
+            fill-rule="evenodd"
+            d="M12.79 5.23a.75.75 0 0 1 0 1.06L9.06 10l3.73 3.71a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z"
+            clip-rule="evenodd"
+          />
         </svg>
       </NuxtLink>
       <div>
@@ -71,7 +75,9 @@ async function removeParticipant(participant: { id: number, name: string }) {
     </div>
 
     <section class="space-y-3">
-      <h2 class="text-sm font-semibold uppercase tracking-wide text-stone-500 dark:text-stone-400">
+      <h2
+        class="text-sm font-semibold uppercase tracking-wide text-stone-500 dark:text-stone-400"
+      >
         Participants
       </h2>
       <ul class="space-y-2">
@@ -80,10 +86,15 @@ async function removeParticipant(participant: { id: number, name: string }) {
           :key="participant.id"
           class="flex items-center gap-3 rounded-2xl border border-stone-200 bg-white p-3 shadow-sm dark:border-stone-800 dark:bg-stone-900"
         >
-          <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">
+          <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"
+          >
             {{ participant.name.trim().charAt(0).toUpperCase() || '?' }}
           </div>
-          <span class="min-w-0 flex-1 truncate font-medium text-stone-900 dark:text-stone-100">{{ participant.name }}</span>
+          <span
+            class="min-w-0 flex-1 truncate font-medium text-stone-900 dark:text-stone-100"
+            >{{ participant.name }}</span
+          >
           <button
             type="button"
             :disabled="removingId === participant.id"
@@ -93,7 +104,10 @@ async function removeParticipant(participant: { id: number, name: string }) {
             {{ removingId === participant.id ? 'Removing…' : 'Remove' }}
           </button>
         </li>
-        <li v-if="data.participants.length === 0" class="rounded-2xl border border-dashed border-stone-300 p-4 text-center text-sm text-stone-500 dark:border-stone-700 dark:text-stone-400">
+        <li
+          v-if="data.participants.length === 0"
+          class="rounded-2xl border border-dashed border-stone-300 p-4 text-center text-sm text-stone-500 dark:border-stone-700 dark:text-stone-400"
+        >
           No one's in this Pot yet.
         </li>
       </ul>
@@ -102,8 +116,12 @@ async function removeParticipant(participant: { id: number, name: string }) {
       </p>
     </section>
 
-    <section class="space-y-3 rounded-2xl border border-stone-200 bg-white p-4 shadow-sm dark:border-stone-800 dark:bg-stone-900">
-      <h2 class="text-sm font-semibold uppercase tracking-wide text-stone-500 dark:text-stone-400">
+    <section
+      class="space-y-3 rounded-2xl border border-stone-200 bg-white p-4 shadow-sm dark:border-stone-800 dark:bg-stone-900"
+    >
+      <h2
+        class="text-sm font-semibold uppercase tracking-wide text-stone-500 dark:text-stone-400"
+      >
         Add a participant
       </h2>
       <NameForm

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

@@ -1,41 +1,38 @@
 <script setup lang="ts">
-const route = useRoute()
-const slug = route.params.slug as string
+const route = useRoute();
+const slug = route.params.slug as string;
 
-const names = ref([''])
-const saving = ref(false)
+const names = ref(['']);
+const saving = ref(false);
 
 function addRow() {
-  names.value.push('')
+  names.value.push('');
 }
 
 async function continueToPot() {
-  saving.value = true
-  const toAdd = names.value.map(n => n.trim()).filter(Boolean)
+  saving.value = true;
+  const toAdd = names.value.map((n) => n.trim()).filter(Boolean);
   try {
     for (const participantName of toAdd) {
       await $fetch(`/api/pots/${slug}/participants`, {
         method: 'POST',
         body: { name: participantName },
-      })
+      });
     }
-  }
-  finally {
-    await navigateTo(`/p/${slug}`)
+  } finally {
+    await navigateTo(`/p/${slug}`);
   }
 }
 
 function skip() {
-  navigateTo(`/p/${slug}`)
+  navigateTo(`/p/${slug}`);
 }
 </script>
 
 <template>
   <div class="space-y-6">
     <div class="space-y-1 text-center">
-      <div class="text-3xl">
-        👋
-      </div>
+      <div class="text-3xl">👋</div>
       <h1 class="text-xl font-bold text-stone-900 dark:text-stone-100">
         Add the rest of the group
       </h1>
@@ -52,7 +49,7 @@ function skip() {
         type="text"
         class="block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base 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-900 dark:text-stone-100 dark:placeholder:text-stone-500 dark:focus:ring-orange-900"
         placeholder="Participant name"
-      >
+      />
     </div>
 
     <button

app/types.ts

@@ -1,31 +1,31 @@
 export interface ParticipantView {
-  id: number
-  name: string
-  paymentLink: string | null
+  id: number;
+  name: string;
+  paymentLink: string | null;
 }
 
-export type ExpenseType = 'expense' | 'payment'
+export type ExpenseType = 'expense' | 'payment';
 
 export interface ExpenseView {
-  id: number
-  type: ExpenseType
-  description: string
-  amountCents: number
-  payerId: number
-  participantIds: number[]
-  createdAt: number
+  id: number;
+  type: ExpenseType;
+  description: string;
+  amountCents: number;
+  payerId: number;
+  participantIds: number[];
+  createdAt: number;
 }
 
 export interface SettlementView {
-  fromId: number
-  toId: number
-  amountCents: number
+  fromId: number;
+  toId: number;
+  amountCents: number;
 }
 
 export interface PotView {
-  pot: { slug: string, name: string, currency: string }
-  participants: ParticipantView[]
-  expenses: ExpenseView[]
-  netBalances: Record<number, number>
-  settlements: SettlementView[]
+  pot: { slug: string; name: string; currency: string };
+  participants: ParticipantView[];
+  expenses: ExpenseView[];
+  netBalances: Record<number, number>;
+  settlements: SettlementView[];
 }

app/utils/identity.test.ts

@@ -1,45 +1,47 @@
-import { describe, expect, it } from 'vitest'
-import { readIdentity, writeIdentity } from './identity'
+import { describe, expect, it } from 'vitest';
+import { readIdentity, writeIdentity } from './identity';
 
 function createMockStorage(): Storage {
-  const store = new Map<string, string>()
+  const store = new Map<string, string>();
   return {
     getItem: (key: string) => store.get(key) ?? null,
     setItem: (key: string, value: string) => void store.set(key, value),
     removeItem: (key: string) => void store.delete(key),
     clear: () => store.clear(),
     key: () => null,
-    get length() { return store.size },
-  }
+    get length() {
+      return store.size;
+    },
+  };
 }
 
 describe('identity storage', () => {
   it('returns null when nothing is stored', () => {
-    expect(readIdentity(createMockStorage())).toBeNull()
-  })
+    expect(readIdentity(createMockStorage())).toBeNull();
+  });
 
   it('round-trips a written identity', () => {
-    const storage = createMockStorage()
-    writeIdentity(storage, { name: 'Alice' })
-    expect(readIdentity(storage)).toEqual({ name: 'Alice' })
-  })
+    const storage = createMockStorage();
+    writeIdentity(storage, { name: 'Alice' });
+    expect(readIdentity(storage)).toEqual({ name: 'Alice' });
+  });
 
   it('ignores malformed JSON', () => {
-    const storage = createMockStorage()
-    storage.setItem('stb:identity', '{not json')
-    expect(readIdentity(storage)).toBeNull()
-  })
+    const storage = createMockStorage();
+    storage.setItem('stb:identity', '{not json');
+    expect(readIdentity(storage)).toBeNull();
+  });
 
   it('ignores an empty stored name', () => {
-    const storage = createMockStorage()
-    storage.setItem('stb:identity', JSON.stringify({ name: '   ' }))
-    expect(readIdentity(storage)).toBeNull()
-  })
+    const storage = createMockStorage();
+    storage.setItem('stb:identity', JSON.stringify({ name: '   ' }));
+    expect(readIdentity(storage)).toBeNull();
+  });
 
   it('overwrites a previously stored identity', () => {
-    const storage = createMockStorage()
-    writeIdentity(storage, { name: 'Alice' })
-    writeIdentity(storage, { name: 'Bob' })
-    expect(readIdentity(storage)).toEqual({ name: 'Bob' })
-  })
-})
+    const storage = createMockStorage();
+    writeIdentity(storage, { name: 'Alice' });
+    writeIdentity(storage, { name: 'Bob' });
+    expect(readIdentity(storage)).toEqual({ name: 'Bob' });
+  });
+});

app/utils/identity.ts

@@ -1,26 +1,25 @@
-const STORAGE_KEY = 'stb:identity'
+const STORAGE_KEY = 'stb:identity';
 
 export interface Identity {
-  name: string
+  name: string;
 }
 
-type StorageLike = Pick<Storage, 'getItem' | 'setItem'>
+type StorageLike = Pick<Storage, 'getItem' | 'setItem'>;
 
 export function readIdentity(storage: StorageLike): Identity | null {
-  const raw = storage.getItem(STORAGE_KEY)
-  if (!raw) return null
+  const raw = storage.getItem(STORAGE_KEY);
+  if (!raw) return null;
 
   try {
-    const parsed = JSON.parse(raw)
-    if (typeof parsed?.name !== 'string' || !parsed.name.trim()) return null
+    const parsed = JSON.parse(raw);
+    if (typeof parsed?.name !== 'string' || !parsed.name.trim()) return null;
 
-    return { name: parsed.name }
-  }
-  catch {
-    return null
+    return { name: parsed.name };
+  } catch {
+    return null;
   }
 }
 
 export function writeIdentity(storage: StorageLike, identity: Identity): void {
-  storage.setItem(STORAGE_KEY, JSON.stringify(identity))
+  storage.setItem(STORAGE_KEY, JSON.stringify(identity));
 }

app/utils/paymentLinkCache.test.ts

@@ -1,33 +1,38 @@
-import { describe, expect, it } from 'vitest'
-import { readCachedPaymentLink, writeCachedPaymentLink } from './paymentLinkCache'
+import { describe, expect, it } from 'vitest';
+import {
+  readCachedPaymentLink,
+  writeCachedPaymentLink,
+} from './paymentLinkCache';
 
 function createMockStorage(): Storage {
-  const store = new Map<string, string>()
+  const store = new Map<string, string>();
   return {
     getItem: (key: string) => store.get(key) ?? null,
     setItem: (key: string, value: string) => void store.set(key, value),
     removeItem: (key: string) => void store.delete(key),
     clear: () => store.clear(),
     key: () => null,
-    get length() { return store.size },
-  }
+    get length() {
+      return store.size;
+    },
+  };
 }
 
 describe('payment link cache', () => {
   it('returns null when nothing is cached', () => {
-    expect(readCachedPaymentLink(createMockStorage())).toBeNull()
-  })
+    expect(readCachedPaymentLink(createMockStorage())).toBeNull();
+  });
 
   it('round-trips a cached link', () => {
-    const storage = createMockStorage()
-    writeCachedPaymentLink(storage, 'https://paypal.me/alice')
-    expect(readCachedPaymentLink(storage)).toBe('https://paypal.me/alice')
-  })
+    const storage = createMockStorage();
+    writeCachedPaymentLink(storage, 'https://paypal.me/alice');
+    expect(readCachedPaymentLink(storage)).toBe('https://paypal.me/alice');
+  });
 
   it('overwrites a previously cached link', () => {
-    const storage = createMockStorage()
-    writeCachedPaymentLink(storage, 'https://paypal.me/alice')
-    writeCachedPaymentLink(storage, 'https://paypal.me/bob')
-    expect(readCachedPaymentLink(storage)).toBe('https://paypal.me/bob')
-  })
-})
+    const storage = createMockStorage();
+    writeCachedPaymentLink(storage, 'https://paypal.me/alice');
+    writeCachedPaymentLink(storage, 'https://paypal.me/bob');
+    expect(readCachedPaymentLink(storage)).toBe('https://paypal.me/bob');
+  });
+});

app/utils/paymentLinkCache.ts

@@ -1,11 +1,14 @@
-const STORAGE_KEY = 'stb:last-payment-link'
+const STORAGE_KEY = 'stb:last-payment-link';
 
-type StorageLike = Pick<Storage, 'getItem' | 'setItem'>
+type StorageLike = Pick<Storage, 'getItem' | 'setItem'>;
 
 export function readCachedPaymentLink(storage: StorageLike): string | null {
-  return storage.getItem(STORAGE_KEY) || null
+  return storage.getItem(STORAGE_KEY) || null;
 }
 
-export function writeCachedPaymentLink(storage: StorageLike, link: string): void {
-  storage.setItem(STORAGE_KEY, link)
+export function writeCachedPaymentLink(
+  storage: StorageLike,
+  link: string,
+): void {
+  storage.setItem(STORAGE_KEY, link);
 }

app/utils/visitedPots.test.ts

@@ -1,67 +1,105 @@
-import { describe, expect, it } from 'vitest'
-import { readVisitedPots, recordVisitedPot } from './visitedPots'
+import { describe, expect, it } from 'vitest';
+import { readVisitedPots, recordVisitedPot } from './visitedPots';
 
 function createMockStorage(): Storage {
-  const store = new Map<string, string>()
+  const store = new Map<string, string>();
   return {
     getItem: (key: string) => store.get(key) ?? null,
     setItem: (key: string, value: string) => void store.set(key, value),
     removeItem: (key: string) => void store.delete(key),
     clear: () => store.clear(),
     key: () => null,
-    get length() { return store.size },
-  }
+    get length() {
+      return store.size;
+    },
+  };
 }
 
 describe('visited pots storage', () => {
   it('returns an empty list when nothing is stored', () => {
-    expect(readVisitedPots(createMockStorage())).toEqual([])
-  })
+    expect(readVisitedPots(createMockStorage())).toEqual([]);
+  });
 
   it('records a visited pot', () => {
-    const storage = createMockStorage()
-    recordVisitedPot(storage, { slug: 'abc', name: 'Lisbon Trip', currency: 'EUR' })
+    const storage = createMockStorage();
+    recordVisitedPot(storage, {
+      slug: 'abc',
+      name: 'Lisbon Trip',
+      currency: 'EUR',
+    });
     expect(readVisitedPots(storage)).toEqual([
-      expect.objectContaining({ slug: 'abc', name: 'Lisbon Trip', currency: 'EUR' }),
-    ])
-  })
+      expect.objectContaining({
+        slug: 'abc',
+        name: 'Lisbon Trip',
+        currency: 'EUR',
+      }),
+    ]);
+  });
 
   it('moves a re-visited pot to the front instead of duplicating it', () => {
-    const storage = createMockStorage()
-    recordVisitedPot(storage, { slug: 'abc', name: 'Lisbon Trip', currency: 'EUR' })
-    recordVisitedPot(storage, { slug: 'def', name: 'Ski Weekend', currency: 'CHF' })
-    recordVisitedPot(storage, { slug: 'abc', name: 'Lisbon Trip', currency: 'EUR' })
+    const storage = createMockStorage();
+    recordVisitedPot(storage, {
+      slug: 'abc',
+      name: 'Lisbon Trip',
+      currency: 'EUR',
+    });
+    recordVisitedPot(storage, {
+      slug: 'def',
+      name: 'Ski Weekend',
+      currency: 'CHF',
+    });
+    recordVisitedPot(storage, {
+      slug: 'abc',
+      name: 'Lisbon Trip',
+      currency: 'EUR',
+    });
 
-    const pots = readVisitedPots(storage)
-    expect(pots).toHaveLength(2)
-    expect(pots[0]?.slug).toBe('abc')
-  })
+    const pots = readVisitedPots(storage);
+    expect(pots).toHaveLength(2);
+    expect(pots[0]?.slug).toBe('abc');
+  });
 
   it('updates the stored name and currency on revisit', () => {
-    const storage = createMockStorage()
-    recordVisitedPot(storage, { slug: 'abc', name: 'Old Name', currency: 'EUR' })
-    recordVisitedPot(storage, { slug: 'abc', name: 'New Name', currency: 'USD' })
+    const storage = createMockStorage();
+    recordVisitedPot(storage, {
+      slug: 'abc',
+      name: 'Old Name',
+      currency: 'EUR',
+    });
+    recordVisitedPot(storage, {
+      slug: 'abc',
+      name: 'New Name',
+      currency: 'USD',
+    });
 
     expect(readVisitedPots(storage)).toEqual([
-      expect.objectContaining({ slug: 'abc', name: 'New Name', currency: 'USD' }),
-    ])
-  })
+      expect.objectContaining({
+        slug: 'abc',
+        name: 'New Name',
+        currency: 'USD',
+      }),
+    ]);
+  });
 
   it('ignores malformed JSON', () => {
-    const storage = createMockStorage()
-    storage.setItem('stb:visited-pots', '{not json')
-    expect(readVisitedPots(storage)).toEqual([])
-  })
+    const storage = createMockStorage();
+    storage.setItem('stb:visited-pots', '{not json');
+    expect(readVisitedPots(storage)).toEqual([]);
+  });
 
   it('caps the list at 20 entries, keeping the most recent', () => {
-    const storage = createMockStorage()
+    const storage = createMockStorage();
     for (let i = 0; i < 25; i++) {
-      recordVisitedPot(storage, { slug: `pot-${i}`, name: `Pot ${i}`, currency: 'EUR' })
+      recordVisitedPot(storage, {
+        slug: `pot-${i}`,
+        name: `Pot ${i}`,
+        currency: 'EUR',
+      });
     }
 
-    const pots = readVisitedPots(storage)
-    expect(pots).toHaveLength(20)
-    expect(pots[0]?.slug).toBe('pot-24')
-    expect(pots.some(p => p.slug === 'pot-0')).toBe(false)
-  })
-})
+    const pots = readVisitedPots(storage);
+    expect(pots).toHaveLength(20);
+    expect(pots[0]?.slug).toBe('pot-24');
+    expect(pots.some((p) => p.slug === 'pot-0')).toBe(false);
+  });
+});

app/utils/visitedPots.ts

@@ -1,40 +1,44 @@
-const STORAGE_KEY = 'stb:visited-pots'
-const MAX_ENTRIES = 20
+const STORAGE_KEY = 'stb:visited-pots';
+const MAX_ENTRIES = 20;
 
 export interface VisitedPot {
-  slug: string
-  name: string
-  currency: string
-  visitedAt: number
+  slug: string;
+  name: string;
+  currency: string;
+  visitedAt: number;
 }
 
-type StorageLike = Pick<Storage, 'getItem' | 'setItem'>
+type StorageLike = Pick<Storage, 'getItem' | 'setItem'>;
 
 export function readVisitedPots(storage: StorageLike): VisitedPot[] {
-  const raw = storage.getItem(STORAGE_KEY)
-  if (!raw) return []
+  const raw = storage.getItem(STORAGE_KEY);
+  if (!raw) return [];
 
   try {
-    const parsed = JSON.parse(raw)
-    if (!Array.isArray(parsed)) return []
-    return parsed.filter((item): item is VisitedPot =>
-      typeof item?.slug === 'string' && item.slug.trim() !== ''
-      && typeof item?.name === 'string'
-      && typeof item?.currency === 'string'
-      && typeof item?.visitedAt === 'number',
-    )
-  }
-  catch {
-    return []
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter(
+      (item): item is VisitedPot =>
+        typeof item?.slug === 'string' &&
+        item.slug.trim() !== '' &&
+        typeof item?.name === 'string' &&
+        typeof item?.currency === 'string' &&
+        typeof item?.visitedAt === 'number',
+    );
+  } catch {
+    return [];
   }
 }
 
-export function recordVisitedPot(storage: StorageLike, pot: Omit<VisitedPot, 'visitedAt'>): VisitedPot[] {
-  const rest = readVisitedPots(storage).filter(p => p.slug !== pot.slug)
+export function recordVisitedPot(
+  storage: StorageLike,
+  pot: Omit<VisitedPot, 'visitedAt'>,
+): VisitedPot[] {
+  const rest = readVisitedPots(storage).filter((p) => p.slug !== pot.slug);
   const updated = [{ ...pot, visitedAt: Date.now() }, ...rest]
     .sort((a, b) => b.visitedAt - a.visitedAt)
-    .slice(0, MAX_ENTRIES)
+    .slice(0, MAX_ENTRIES);
 
-  storage.setItem(STORAGE_KEY, JSON.stringify(updated))
-  return updated
+  storage.setItem(STORAGE_KEY, JSON.stringify(updated));
+  return updated;
 }