🎉 init

.gitignore

@@ -0,0 +1,28 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+todo.md
+
+docs/

README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app/app.vue

@@ -0,0 +1,8 @@
+<template>
+  <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 />
+    </main>
+  </div>
+</template>

app/assets/css/tailwind.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

app/components/AddExpenseForm.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import type { ExpenseView, ParticipantView } from '../types'
+
+const props = defineProps<{
+  participants: ParticipantView[]
+  currency: string
+  editing?: ExpenseView | null
+  defaultPayerId?: number
+}>()
+
+const emit = defineEmits<{
+  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('')
+
+function toggleParticipant(id: number) {
+  if (selectedIds.value.includes(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))
+
+  if (!description.value.trim()) {
+    error.value = 'Description is required.'
+    return
+  }
+  if (!Number.isFinite(amountCents) || amountCents <= 0) {
+    error.value = 'Enter a valid amount.'
+    return
+  }
+  if (selectedIds.value.length === 0) {
+    error.value = 'Select at least one participant to split with.'
+    return
+  }
+
+  emit('submit', {
+    description: description.value.trim(),
+    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">
+    <div>
+      <label for="description" class="block text-sm font-medium text-stone-700 dark:text-stone-300">Description</label>
+      <input
+        id="description"
+        v-model="description"
+        type="text"
+        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">
+        Amount ({{ currency }})
+      </label>
+      <input
+        id="amount"
+        v-model="amount"
+        type="number"
+        step="0.01"
+        min="0.01"
+        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>
+      <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">
+          {{ participant.name }}
+        </option>
+      </select>
+    </div>
+
+    <div>
+      <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'"
+          @click="toggleParticipant(participant.id)"
+        >
+          {{ participant.name }}
+        </button>
+      </div>
+    </div>
+
+    <p v-if="error" class="text-sm text-rose-600 dark:text-rose-400">
+      {{ error }}
+    </p>
+
+    <div class="flex gap-3">
+      <button
+        type="button"
+        class="flex-1 rounded-xl border border-stone-300 px-4 py-2 font-medium text-stone-700 dark:border-stone-700 dark:text-stone-300"
+        @click="emit('cancel')"
+      >
+        Cancel
+      </button>
+      <button
+        type="submit"
+        class="flex-1 rounded-xl bg-orange-500 px-4 py-2 font-medium text-white shadow-sm transition-colors hover:bg-orange-600 active:bg-orange-600"
+      >
+        {{ editing ? 'Save changes' : 'Add expense' }}
+      </button>
+    </div>
+  </form>
+</template>

app/components/BalanceSummary.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import type { ParticipantView, SettlementView } from '../types'
+
+const props = defineProps<{
+  slug: string
+  participants: ParticipantView[]
+  netBalances: Record<number, number>
+  settlements: SettlementView[]
+  currency: string
+}>()
+
+const emit = defineEmits<{ settled: [] }>()
+
+const settlingKey = ref<string | null>(null)
+
+function nameOf(id: number) {
+  return props.participants.find(p => p.id === id)?.name ?? 'Unknown'
+}
+
+function paypalLinkOf(id: number) {
+  return props.participants.find(p => p.id === id)?.paypalLink || null
+}
+
+function initialOf(participantName: string) {
+  return participantName.trim().charAt(0).toUpperCase() || '?'
+}
+
+function keyOf(settlement: SettlementView) {
+  return `${settlement.fromId}-${settlement.toId}-${settlement.amountCents}`
+}
+
+async function markSettled(settlement: SettlementView) {
+  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
+  }
+}
+</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">
+      No one's in this Pot yet. Add people from the settings page.
+    </p>
+
+    <ul v-else class="space-y-2">
+      <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"
+      >
+        <div class="flex min-w-0 items-center 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">
+            {{ initialOf(participant.name) }}
+          </div>
+          <span class="truncate font-medium text-stone-900 dark:text-stone-100">{{ participant.name }}</span>
+          <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
+          </a>
+        </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>
+
+    <div v-if="participants.length > 0" class="space-y-2">
+      <h2 class="text-sm font-medium text-orange-600 dark:text-orange-400">
+        Suggested payments
+      </h2>
+
+      <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">
+        <li
+          v-for="settlement in settlements"
+          :key="keyOf(settlement)"
+          class="space-y-2 rounded-2xl border border-orange-100 bg-gradient-to-r from-orange-50 to-amber-50 p-3 dark:border-orange-900/60 dark:from-orange-950/40 dark:to-amber-950/30"
+        >
+          <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">
+                {{ initialOf(nameOf(settlement.fromId)) }}
+              </div>
+              <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>
+
+              <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>
+            </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">
+              {{ formatCurrency(settlement.amountCents, currency) }}
+            </span>
+          </div>
+
+          <div class="flex items-center justify-end gap-2">
+            <a
+              v-if="paypalLinkOf(settlement.toId)"
+              :href="paypalLinkOf(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
+            </a>
+            <button
+              type="button"
+              :disabled="settlingKey === keyOf(settlement)"
+              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' }}
+            </button>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

app/components/ExpenseList.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { ExpenseView, ParticipantView } from '../types'
+
+const props = defineProps<{
+  expenses: ExpenseView[]
+  participants: ParticipantView[]
+  currency: string
+}>()
+
+const emit = defineEmits<{ edit: [expense: ExpenseView], remove: [id: number] }>()
+
+const expandedId = ref<number | null>(null)
+
+function nameOf(id: number) {
+  return props.participants.find(p => p.id === id)?.name ?? 'Unknown'
+}
+
+function namesOf(ids: number[]) {
+  return ids.map(nameOf).join(', ')
+}
+
+function toggle(id: number) {
+  expandedId.value = expandedId.value === id ? null : id
+}
+
+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">
+      No expenses yet. Add the first one below.
+    </p>
+
+    <div
+      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'"
+    >
+      <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>
+        </div>
+        <div v-else class="min-w-0">
+          <p class="truncate font-medium text-stone-900 dark:text-stone-100">
+            {{ expense.description }}
+          </p>
+          <p class="text-sm text-stone-500 dark:text-stone-400">
+            paid by {{ nameOf(expense.payerId) }}
+          </p>
+        </div>
+        <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'"
+          >
+            {{ formatCurrency(expense.amountCents, currency) }}
+          </span>
+          <svg
+            class="h-4 w-4 shrink-0 text-stone-400 transition-transform"
+            :class="{ 'rotate-180': expandedId === expense.id }"
+            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" />
+          </svg>
+        </div>
+      </button>
+
+      <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'"
+      >
+        <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">
+          <button
+            v-if="expense.type === 'expense'"
+            type="button"
+            class="text-sm font-medium text-orange-600 dark:text-orange-400"
+            @click="emit('edit', expense)"
+          >
+            Edit
+          </button>
+          <button
+            type="button"
+            class="text-sm font-medium text-rose-600 dark:text-rose-400"
+            @click="emit('remove', expense.id)"
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/components/NameForm.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const props = defineProps<{ title?: string, buttonLabel?: string }>()
+const emit = defineEmits<{ submit: [name: string] }>()
+
+const name = ref('')
+
+function onSubmit() {
+  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>
+      <input
+        id="name"
+        v-model="name"
+        type="text"
+        autocomplete="name"
+        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"
+      class="w-full rounded-xl bg-orange-500 px-4 py-2 font-medium text-white shadow-sm transition-colors hover:bg-orange-600 active:bg-orange-600"
+    >
+      {{ props.buttonLabel ?? 'Continue' }}
+    </button>
+  </form>
+</template>

app/composables/useIdentity.ts

@@ -0,0 +1,21 @@
+import { readIdentity, writeIdentity } from '../utils/identity'
+
+export function useIdentity() {
+  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
+  }
+
+  function setName(newName: string) {
+    const trimmed = newName.trim()
+    if (!trimmed) return
+    name.value = trimmed
+    if (import.meta.client) writeIdentity(window.localStorage, { name: trimmed })
+  }
+
+  return { name, setName }
+}

app/composables/usePaymentLinkCache.ts

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

app/composables/useVisitedPots.ts

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

app/pages/index.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+const { name, setName } = useIdentity()
+const { pots: visitedPots } = useVisitedPots()
+
+const potName = ref('')
+const currency = ref('EUR')
+const creating = ref(false)
+const error = ref('')
+
+const currencies = ['EUR', 'USD', 'GBP', 'CHF']
+
+async function createPot() {
+  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
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-8">
+    <div class="space-y-1 text-center">
+      <div class="text-4xl">
+        🍯
+      </div>
+      <h1 class="text-2xl font-bold text-stone-900 dark:text-stone-100">
+        Splitt the Bill
+      </h1>
+      <p class="text-sm text-stone-500 dark:text-stone-400">
+        Track shared costs with friends, the easy way.
+      </p>
+    </div>
+
+    <section v-if="visitedPots.length" class="space-y-2">
+      <h2 class="text-sm font-semibold text-stone-500 dark:text-stone-400">
+        Your Pots
+      </h2>
+      <ul class="space-y-2">
+        <li v-for="pot in visitedPots" :key="pot.slug">
+          <NuxtLink
+            :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>
+          </NuxtLink>
+        </li>
+      </ul>
+    </section>
+
+    <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">
+      <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>
+        <input
+          id="pot-name"
+          v-model="potName"
+          type="text"
+          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>
+        <select
+          id="currency"
+          v-model="currency"
+          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="code in currencies" :key="code" :value="code">
+            {{ code }}
+          </option>
+        </select>
+      </div>
+
+      <p v-if="error" class="text-sm text-rose-600 dark:text-rose-400">
+        {{ error }}
+      </p>
+
+      <button
+        type="submit"
+        :disabled="creating"
+        class="w-full rounded-xl bg-orange-500 px-4 py-2 font-medium text-white shadow-sm transition-colors hover:bg-orange-600 active:bg-orange-600 disabled:opacity-50"
+      >
+        {{ creating ? 'Creating…' : 'Create Pot' }}
+      </button>
+    </form>
+  </div>
+</template>

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

@@ -0,0 +1,199 @@
+<script setup lang="ts">
+import type { ExpenseView, PotView } from '~/types'
+
+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 me = computed(() =>
+  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 })
+
+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()
+}
+
+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 })
+  }
+  else {
+    await $fetch(`/api/pots/${slug}/expenses`, { method: 'POST', body: payload })
+  }
+  editingExpense.value = null
+  showExpenseForm.value = false
+  await refresh()
+}
+
+function editExpense(expense: ExpenseView) {
+  editingExpense.value = expense
+  showExpenseForm.value = true
+}
+
+function newExpense() {
+  editingExpense.value = null
+  showExpenseForm.value = true
+}
+
+function cancelExpenseForm() {
+  editingExpense.value = null
+  showExpenseForm.value = false
+}
+
+async function removeExpense(id: number) {
+  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)
+}
+</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>
+    <NuxtLink to="/" class="font-medium text-orange-600 dark:text-orange-400">
+      Go home
+    </NuxtLink>
+  </div>
+
+  <NameForm v-else-if="!name" title="What's your name?" @submit="setName" />
+
+  <div v-else-if="data" class="space-y-6">
+    <NuxtLink
+      to="/"
+      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" />
+      </svg>
+      All Pots
+    </NuxtLink>
+
+    <div class="flex items-start justify-between gap-2">
+      <div>
+        <h1 class="text-xl font-bold text-stone-900 dark:text-stone-100">
+          {{ data.pot.name }}
+        </h1>
+        <p class="text-sm text-stone-500 dark:text-stone-400">
+          {{ data.pot.currency }}
+        </p>
+      </div>
+      <div class="flex shrink-0 gap-2">
+        <button
+          type="button"
+          class="rounded-xl border border-stone-300 px-3 py-1.5 text-sm font-medium text-stone-700 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="copyLink"
+        >
+          {{ linkCopied ? 'Copied!' : 'Copy link' }}
+        </button>
+        <NuxtLink
+          :to="`/p/${slug}/settings`"
+          class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-stone-300 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"
+          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" />
+          </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">
+      <p class="mb-2 text-stone-700 dark:text-stone-300">
+        You're not in this Pot's participant list yet.
+      </p>
+      <button
+        type="button"
+        class="rounded-xl bg-orange-500 px-3 py-1.5 font-medium text-white shadow-sm transition-colors hover:bg-orange-600"
+        @click="addMyself"
+      >
+        Add myself as {{ name }}
+      </button>
+    </div>
+
+    <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'"
+        @click="activeTab = 'people'"
+      >
+        People &amp; balances
+      </button>
+      <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'"
+        @click="activeTab = 'expenses'"
+      >
+        Expenses
+      </button>
+    </div>
+
+    <section v-if="activeTab === 'people'">
+      <BalanceSummary
+        :slug="slug"
+        :participants="data.participants"
+        :net-balances="data.netBalances"
+        :settlements="data.settlements"
+        :currency="data.pot.currency"
+        @settled="refresh"
+      />
+    </section>
+
+    <section v-else class="space-y-3">
+      <button
+        v-if="!showExpenseForm"
+        type="button"
+        class="w-full rounded-xl bg-orange-500 px-4 py-2 font-medium text-white shadow-sm transition-colors hover:bg-orange-600"
+        @click="newExpense"
+      >
+        + Add expense
+      </button>
+
+      <AddExpenseForm
+        v-if="showExpenseForm"
+        :participants="data.participants"
+        :currency="data.pot.currency"
+        :editing="editingExpense"
+        :default-payer-id="me?.id"
+        @submit="submitExpense"
+        @cancel="cancelExpenseForm"
+      />
+
+      <ExpenseList
+        v-else
+        :expenses="data.expenses"
+        :participants="data.participants"
+        :currency="data.pot.currency"
+        @edit="editExpense"
+        @remove="removeExpense"
+      />
+    </section>
+  </div>
+</template>

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

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { PotView } from '~/types'
+
+const route = useRoute()
+const slug = route.params.slug as string
+
+const { data, refresh, error } = await useFetch<PotView>(`/api/pots/${slug}`)
+
+const adding = ref(false)
+
+async function addParticipant(participantName: string) {
+  adding.value = true
+  try {
+    await $fetch(`/api/pots/${slug}/participants`, { method: 'POST', body: { name: participantName } })
+    await refresh()
+  }
+  finally {
+    adding.value = false
+  }
+}
+</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>
+    <NuxtLink to="/" class="font-medium text-orange-600 dark:text-orange-400">
+      Go home
+    </NuxtLink>
+  </div>
+
+  <div v-else-if="data" class="space-y-6">
+    <div class="flex items-center gap-2">
+      <NuxtLink
+        :to="`/p/${slug}`"
+        class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-stone-300 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"
+        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" />
+        </svg>
+      </NuxtLink>
+      <div>
+        <h1 class="text-lg font-bold text-stone-900 dark:text-stone-100">
+          Pot settings
+        </h1>
+        <p class="text-sm text-stone-500 dark:text-stone-400">
+          {{ data.pot.name }} · {{ data.pot.currency }}
+        </p>
+      </div>
+    </div>
+
+    <section class="space-y-3">
+      <h2 class="text-sm font-semibold uppercase tracking-wide text-stone-500 dark:text-stone-400">
+        Participants
+      </h2>
+      <ul class="space-y-2">
+        <li
+          v-for="participant in data.participants"
+          :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">
+            {{ participant.name.trim().charAt(0).toUpperCase() || '?' }}
+          </div>
+          <span class="font-medium text-stone-900 dark:text-stone-100">{{ participant.name }}</span>
+        </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">
+          No one's in this Pot yet.
+        </li>
+      </ul>
+    </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">
+        Add a participant
+      </h2>
+      <NameForm
+        title="Name"
+        :button-label="adding ? 'Adding…' : 'Add'"
+        @submit="addParticipant"
+      />
+    </section>
+  </div>
+</template>

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

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+const route = useRoute()
+const slug = route.params.slug as string
+
+const names = ref([''])
+const saving = ref(false)
+
+function addRow() {
+  names.value.push('')
+}
+
+async function continueToPot() {
+  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}`)
+  }
+}
+
+function skip() {
+  navigateTo(`/p/${slug}`)
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div class="space-y-1 text-center">
+      <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>
+      <p class="text-sm text-stone-500 dark:text-stone-400">
+        Add everyone else's name now, or skip and add them later from settings.
+      </p>
+    </div>
+
+    <div class="space-y-2">
+      <input
+        v-for="(_, index) in names"
+        :key="index"
+        v-model="names[index]"
+        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
+      type="button"
+      class="w-full rounded-xl border border-dashed border-stone-300 px-4 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-400 dark:hover:border-orange-700 dark:hover:text-orange-400"
+      @click="addRow"
+    >
+      + Add another
+    </button>
+
+    <div class="flex gap-3">
+      <button
+        type="button"
+        class="flex-1 rounded-xl border border-stone-300 px-4 py-2 font-medium text-stone-700 dark:border-stone-700 dark:text-stone-300"
+        @click="skip"
+      >
+        Skip
+      </button>
+      <button
+        type="button"
+        :disabled="saving"
+        class="flex-1 rounded-xl bg-orange-500 px-4 py-2 font-medium text-white shadow-sm transition-colors hover:bg-orange-600 active:bg-orange-600 disabled:opacity-50"
+        @click="continueToPot"
+      >
+        {{ saving ? 'Saving…' : 'Continue' }}
+      </button>
+    </div>
+  </div>
+</template>

app/types.ts

@@ -0,0 +1,31 @@
+export interface ParticipantView {
+  id: number
+  name: string
+  paymentLink: string | null
+}
+
+export type ExpenseType = 'expense' | 'payment'
+
+export interface ExpenseView {
+  id: number
+  type: ExpenseType
+  description: string
+  amountCents: number
+  payerId: number
+  participantIds: number[]
+  createdAt: number
+}
+
+export interface SettlementView {
+  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[]
+}

app/utils/identity.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest'
+import { readIdentity, writeIdentity } from './identity'
+
+function createMockStorage(): Storage {
+  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 },
+  }
+}
+
+describe('identity storage', () => {
+  it('returns null when nothing is stored', () => {
+    expect(readIdentity(createMockStorage())).toBeNull()
+  })
+
+  it('round-trips a written identity', () => {
+    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()
+  })
+
+  it('ignores an empty stored name', () => {
+    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' })
+  })
+})

app/utils/identity.ts

@@ -0,0 +1,26 @@
+const STORAGE_KEY = 'stb:identity'
+
+export interface Identity {
+  name: string
+}
+
+type StorageLike = Pick<Storage, 'getItem' | 'setItem'>
+
+export function readIdentity(storage: StorageLike): Identity | 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
+
+    return { name: parsed.name }
+  }
+  catch {
+    return null
+  }
+}
+
+export function writeIdentity(storage: StorageLike, identity: Identity): void {
+  storage.setItem(STORAGE_KEY, JSON.stringify(identity))
+}

app/utils/paymentLinkCache.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest'
+import { readCachedPaymentLink, writeCachedPaymentLink } from './paymentLinkCache'
+
+function createMockStorage(): Storage {
+  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 },
+  }
+}
+
+describe('payment link cache', () => {
+  it('returns null when nothing is cached', () => {
+    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')
+  })
+
+  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')
+  })
+})

app/utils/paymentLinkCache.ts

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

app/utils/visitedPots.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest'
+import { readVisitedPots, recordVisitedPot } from './visitedPots'
+
+function createMockStorage(): Storage {
+  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 },
+  }
+}
+
+describe('visited pots storage', () => {
+  it('returns an empty list when nothing is stored', () => {
+    expect(readVisitedPots(createMockStorage())).toEqual([])
+  })
+
+  it('records a visited pot', () => {
+    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' }),
+    ])
+  })
+
+  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 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' })
+
+    expect(readVisitedPots(storage)).toEqual([
+      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([])
+  })
+
+  it('caps the list at 20 entries, keeping the most recent', () => {
+    const storage = createMockStorage()
+    for (let i = 0; i < 25; i++) {
+      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)
+  })
+})

app/utils/visitedPots.ts

@@ -0,0 +1,40 @@
+const STORAGE_KEY = 'stb:visited-pots'
+const MAX_ENTRIES = 20
+
+export interface VisitedPot {
+  slug: string
+  name: string
+  currency: string
+  visitedAt: number
+}
+
+type StorageLike = Pick<Storage, 'getItem' | 'setItem'>
+
+export function readVisitedPots(storage: StorageLike): VisitedPot[] {
+  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 []
+  }
+}
+
+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)
+
+  storage.setItem(STORAGE_KEY, JSON.stringify(updated))
+  return updated
+}

drizzle.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'drizzle-kit'
+
+export default defineConfig({
+  dialect: 'turso',
+  schema: './server/database/schema.ts',
+  out: './server/database/migrations',
+  dbCredentials: {
+    url: process.env.DATABASE_URL || 'file:./.data/db.sqlite',
+    authToken: process.env.DATABASE_AUTH_TOKEN,
+  },
+})

mise.toml

@@ -0,0 +1,3 @@
+[tools]
+node = "latest"
+pnpm = "latest"

nuxt.config.ts

@@ -0,0 +1,15 @@
+import tailwindcss from '@tailwindcss/vite'
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2025-07-15',
+  devtools: { enabled: true },
+  css: ['~/assets/css/tailwind.css'],
+  vite: {
+    plugins: [tailwindcss()],
+  },
+  runtimeConfig: {
+    databaseUrl: process.env.DATABASE_URL || 'file:./.data/db.sqlite',
+    databaseAuthToken: process.env.DATABASE_AUTH_TOKEN || '',
+  },
+})

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "splitt-the-bill",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "test": "vitest run",
+    "db:generate": "drizzle-kit generate"
+  },
+  "dependencies": {
+    "@libsql/client": "^0.17.4",
+    "drizzle-orm": "^0.45.2",
+    "nanoid": "^5.1.16",
+    "nuxt": "^4.4.8",
+    "vue": "^3.5.38",
+    "vue-router": "^5.1.0"
+  },
+  "devDependencies": {
+    "@nuxt/test-utils": "^4.0.3",
+    "@tailwindcss/vite": "^4.3.2",
+    "@vue/test-utils": "^2.4.11",
+    "drizzle-kit": "^0.31.10",
+    "tailwindcss": "^4.3.2",
+    "vitest": "^4.1.9"
+  }
+}

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+allowBuilds:
+  '@parcel/watcher': true
+  esbuild: true

public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

server/api/pots.post.ts

@@ -0,0 +1,22 @@
+import { generateSlug } from '../../shared/utils/slug'
+import { useDb } from '../database/client'
+import { participants, pots } from '../database/schema'
+
+export default defineEventHandler(async (event) => {
+  const body = await readBody(event)
+  const name = typeof body?.name === 'string' ? body.name.trim() : ''
+  const currency = typeof body?.currency === 'string' ? body.currency.trim().toUpperCase() : ''
+  const creatorName = typeof body?.creatorName === 'string' ? body.creatorName.trim() : ''
+
+  if (!name || !currency || !creatorName) {
+    throw createError({ statusCode: 400, statusMessage: 'name, currency and creatorName are required' })
+  }
+
+  const db = useDb()
+  const slug = generateSlug()
+
+  await db.insert(pots).values({ slug, name, currency })
+  const [creator] = await db.insert(participants).values({ potSlug: slug, name: creatorName }).returning()
+
+  return { slug, name, currency, creator }
+})

server/api/pots/[slug].get.ts

@@ -0,0 +1,12 @@
+import { calculateBalances } from '../../../shared/utils/balances'
+
+export default defineEventHandler(async (event) => {
+  const slug = getRouterParam(event, 'slug')!
+
+  const pot = await getPotOrThrow(slug)
+  const participants = await getParticipants(slug)
+  const expenses = await getExpensesWithParticipants(slug)
+  const { netBalances, settlements } = calculateBalances(participants, expenses)
+
+  return { pot, participants, expenses, netBalances, settlements }
+})

server/api/pots/[slug]/expenses.post.ts

@@ -0,0 +1,35 @@
+import { useDb } from '../../../database/client'
+import { expenseParticipants, expenses } from '../../../database/schema'
+
+export default defineEventHandler(async (event) => {
+  const slug = getRouterParam(event, 'slug')!
+  await getPotOrThrow(slug)
+
+  const body = await readBody(event)
+  const description = typeof body?.description === 'string' ? body.description.trim() : ''
+  const amountCents = Number(body?.amountCents)
+  const payerId = Number(body?.payerId)
+  const participantIds: number[] = Array.isArray(body?.participantIds) ? body.participantIds.map(Number) : []
+
+  if (!description) {
+    throw createError({ statusCode: 400, statusMessage: 'description is required' })
+  }
+  if (!Number.isInteger(amountCents) || amountCents <= 0) {
+    throw createError({ statusCode: 400, statusMessage: 'amountCents must be a positive integer' })
+  }
+  if (participantIds.length === 0) {
+    throw createError({ statusCode: 400, statusMessage: 'at least one participant must be selected' })
+  }
+
+  const potParticipants = await getParticipants(slug)
+  const validIds = new Set(potParticipants.map(p => p.id))
+  if (!validIds.has(payerId) || participantIds.some(id => !validIds.has(id))) {
+    throw createError({ statusCode: 400, statusMessage: 'payerId and participantIds must reference participants of this Pot' })
+  }
+
+  const db = useDb()
+  const [expense] = await db.insert(expenses).values({ potSlug: slug, description, amountCents, payerId }).returning()
+  await db.insert(expenseParticipants).values(participantIds.map(participantId => ({ expenseId: expense.id, participantId })))
+
+  return { ...expense, participantIds }
+})

server/api/pots/[slug]/expenses/[id].delete.ts

@@ -0,0 +1,20 @@
+import { and, eq } from 'drizzle-orm'
+import { useDb } from '../../../../database/client'
+import { expenseParticipants, expenses } from '../../../../database/schema'
+
+export default defineEventHandler(async (event) => {
+  const slug = getRouterParam(event, 'slug')!
+  const id = Number(getRouterParam(event, 'id'))
+  await getPotOrThrow(slug)
+
+  const db = useDb()
+  const [existing] = await db.select().from(expenses).where(and(eq(expenses.id, id), eq(expenses.potSlug, slug)))
+  if (!existing) {
+    throw createError({ statusCode: 404, statusMessage: 'Expense not found' })
+  }
+
+  await db.delete(expenseParticipants).where(eq(expenseParticipants.expenseId, id))
+  await db.delete(expenses).where(eq(expenses.id, id))
+
+  return { success: true }
+})

server/api/pots/[slug]/expenses/[id].patch.ts

@@ -0,0 +1,43 @@
+import { and, eq } from 'drizzle-orm'
+import { useDb } from '../../../../database/client'
+import { expenseParticipants, expenses } from '../../../../database/schema'
+
+export default defineEventHandler(async (event) => {
+  const slug = getRouterParam(event, 'slug')!
+  const id = Number(getRouterParam(event, 'id'))
+  await getPotOrThrow(slug)
+
+  const body = await readBody(event)
+  const description = typeof body?.description === 'string' ? body.description.trim() : ''
+  const amountCents = Number(body?.amountCents)
+  const payerId = Number(body?.payerId)
+  const participantIds: number[] = Array.isArray(body?.participantIds) ? body.participantIds.map(Number) : []
+
+  if (!description) {
+    throw createError({ statusCode: 400, statusMessage: 'description is required' })
+  }
+  if (!Number.isInteger(amountCents) || amountCents <= 0) {
+    throw createError({ statusCode: 400, statusMessage: 'amountCents must be a positive integer' })
+  }
+  if (participantIds.length === 0) {
+    throw createError({ statusCode: 400, statusMessage: 'at least one participant must be selected' })
+  }
+
+  const potParticipants = await getParticipants(slug)
+  const validIds = new Set(potParticipants.map(p => p.id))
+  if (!validIds.has(payerId) || participantIds.some(pid => !validIds.has(pid))) {
+    throw createError({ statusCode: 400, statusMessage: 'payerId and participantIds must reference participants of this Pot' })
+  }
+
+  const db = useDb()
+  const [existing] = await db.select().from(expenses).where(and(eq(expenses.id, id), eq(expenses.potSlug, slug)))
+  if (!existing) {
+    throw createError({ statusCode: 404, statusMessage: 'Expense not found' })
+  }
+
+  await db.update(expenses).set({ description, amountCents, payerId }).where(eq(expenses.id, id))
+  await db.delete(expenseParticipants).where(eq(expenseParticipants.expenseId, id))
+  await db.insert(expenseParticipants).values(participantIds.map(participantId => ({ expenseId: id, participantId })))
+
+  return { id, description, amountCents, payerId, participantIds }
+})

server/api/pots/[slug]/participants.post.ts

@@ -0,0 +1,17 @@
+import { useDb } from '../../../database/client'
+import { participants } from '../../../database/schema'
+
+export default defineEventHandler(async (event) => {
+  const slug = getRouterParam(event, 'slug')!
+  await getPotOrThrow(slug)
+
+  const body = await readBody(event)
+  const name = typeof body?.name === 'string' ? body.name.trim() : ''
+  if (!name) {
+    throw createError({ statusCode: 400, statusMessage: 'name is required' })
+  }
+
+  const db = useDb()
+  const [participant] = await db.insert(participants).values({ potSlug: slug, name }).returning()
+  return participant
+})

server/api/pots/[slug]/participants/[id].patch.ts

@@ -0,0 +1,29 @@
+import { and, eq } from 'drizzle-orm'
+import { isValidPaymentLink } from '../../../../../shared/utils/paymentLink'
+import { useDb } from '../../../../database/client'
+import { participants } from '../../../../database/schema'
+
+export default defineEventHandler(async (event) => {
+  const slug = getRouterParam(event, 'slug')!
+  const id = Number(getRouterParam(event, 'id'))
+  await getPotOrThrow(slug)
+
+  const body = await readBody(event)
+  const paymentLink = typeof body?.paymentLink === 'string' ? body.paymentLink.trim() : ''
+  if (paymentLink && !isValidPaymentLink(paymentLink)) {
+    throw createError({ statusCode: 400, statusMessage: 'paymentLink must be a valid http(s) URL' })
+  }
+
+  const db = useDb()
+  const [existing] = await db.select().from(participants).where(and(eq(participants.id, id), eq(participants.potSlug, slug)))
+  if (!existing) {
+    throw createError({ statusCode: 404, statusMessage: 'Participant not found' })
+  }
+
+  const [updated] = await db.update(participants)
+    .set({ paymentLink: paymentLink || null })
+    .where(eq(participants.id, id))
+    .returning()
+
+  return updated
+})

server/api/pots/[slug]/payments.post.ts

@@ -0,0 +1,33 @@
+import { useDb } from '../../../database/client'
+import { expenseParticipants, expenses } from '../../../database/schema'
+
+export default defineEventHandler(async (event) => {
+  const slug = getRouterParam(event, 'slug')!
+  await getPotOrThrow(slug)
+
+  const body = await readBody(event)
+  const fromId = Number(body?.fromId)
+  const toId = Number(body?.toId)
+  const amountCents = Number(body?.amountCents)
+
+  if (!Number.isInteger(amountCents) || amountCents <= 0) {
+    throw createError({ statusCode: 400, statusMessage: 'amountCents must be a positive integer' })
+  }
+  if (fromId === toId) {
+    throw createError({ statusCode: 400, statusMessage: 'fromId and toId must differ' })
+  }
+
+  const potParticipants = await getParticipants(slug)
+  const validIds = new Set(potParticipants.map(p => p.id))
+  if (!validIds.has(fromId) || !validIds.has(toId)) {
+    throw createError({ statusCode: 400, statusMessage: 'fromId and toId must reference participants of this Pot' })
+  }
+
+  const db = useDb()
+  const [payment] = await db.insert(expenses)
+    .values({ potSlug: slug, type: 'payment', description: 'Settlement', amountCents, payerId: fromId })
+    .returning()
+  await db.insert(expenseParticipants).values({ expenseId: payment.id, participantId: toId })
+
+  return { ...payment, participantIds: [toId] }
+})

server/database/client.ts

@@ -0,0 +1,17 @@
+import { createClient } from '@libsql/client'
+import { drizzle } from 'drizzle-orm/libsql'
+import * as schema from './schema'
+
+let instance: ReturnType<typeof drizzle<typeof schema>> | undefined
+
+export function useDb() {
+  if (!instance) {
+    const config = useRuntimeConfig()
+    const client = createClient({
+      url: config.databaseUrl,
+      authToken: config.databaseAuthToken || undefined,
+    })
+    instance = drizzle(client, { schema })
+  }
+  return instance
+}

server/database/migrations/0000_even_shinobi_shaw.sql

@@ -0,0 +1,35 @@
+CREATE TABLE `expense_participants` (
+	`expense_id` integer NOT NULL,
+	`participant_id` integer NOT NULL,
+	FOREIGN KEY (`expense_id`) REFERENCES `expenses`(`id`) ON UPDATE no action ON DELETE no action,
+	FOREIGN KEY (`participant_id`) REFERENCES `participants`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE INDEX `expense_participants_expense_id_idx` ON `expense_participants` (`expense_id`);--> statement-breakpoint
+CREATE TABLE `expenses` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`pot_slug` text NOT NULL,
+	`description` text NOT NULL,
+	`amount_cents` integer NOT NULL,
+	`payer_id` integer NOT NULL,
+	`created_at` integer DEFAULT (unixepoch()) NOT NULL,
+	FOREIGN KEY (`pot_slug`) REFERENCES `pots`(`slug`) ON UPDATE no action ON DELETE no action,
+	FOREIGN KEY (`payer_id`) REFERENCES `participants`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE INDEX `expenses_pot_slug_idx` ON `expenses` (`pot_slug`);--> statement-breakpoint
+CREATE TABLE `participants` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`pot_slug` text NOT NULL,
+	`name` text NOT NULL,
+	`created_at` integer DEFAULT (unixepoch()) NOT NULL,
+	FOREIGN KEY (`pot_slug`) REFERENCES `pots`(`slug`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE INDEX `participants_pot_slug_idx` ON `participants` (`pot_slug`);--> statement-breakpoint
+CREATE TABLE `pots` (
+	`slug` text PRIMARY KEY NOT NULL,
+	`name` text NOT NULL,
+	`currency` text NOT NULL,
+	`created_at` integer DEFAULT (unixepoch()) NOT NULL
+);

server/database/migrations/0001_careless_rhodey.sql

@@ -0,0 +1,2 @@
+ALTER TABLE `expenses` ADD `type` text DEFAULT 'expense' NOT NULL;--> statement-breakpoint
+ALTER TABLE `participants` ADD `paypal_link` text;

server/database/migrations/0002_rename_paypal_link.sql

@@ -0,0 +1 @@
+ALTER TABLE `participants` RENAME COLUMN `paypal_link` TO `payment_link`;

server/database/migrations/meta/0000_snapshot.json

@@ -0,0 +1,265 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "c81712c7-479e-4818-9604-5e603434afac",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "tables": {
+    "expense_participants": {
+      "name": "expense_participants",
+      "columns": {
+        "expense_id": {
+          "name": "expense_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "participant_id": {
+          "name": "participant_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "expense_participants_expense_id_idx": {
+          "name": "expense_participants_expense_id_idx",
+          "columns": [
+            "expense_id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "expense_participants_expense_id_expenses_id_fk": {
+          "name": "expense_participants_expense_id_expenses_id_fk",
+          "tableFrom": "expense_participants",
+          "tableTo": "expenses",
+          "columnsFrom": [
+            "expense_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "expense_participants_participant_id_participants_id_fk": {
+          "name": "expense_participants_participant_id_participants_id_fk",
+          "tableFrom": "expense_participants",
+          "tableTo": "participants",
+          "columnsFrom": [
+            "participant_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "expenses": {
+      "name": "expenses",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "pot_slug": {
+          "name": "pot_slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "amount_cents": {
+          "name": "amount_cents",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "payer_id": {
+          "name": "payer_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        }
+      },
+      "indexes": {
+        "expenses_pot_slug_idx": {
+          "name": "expenses_pot_slug_idx",
+          "columns": [
+            "pot_slug"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "expenses_pot_slug_pots_slug_fk": {
+          "name": "expenses_pot_slug_pots_slug_fk",
+          "tableFrom": "expenses",
+          "tableTo": "pots",
+          "columnsFrom": [
+            "pot_slug"
+          ],
+          "columnsTo": [
+            "slug"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "expenses_payer_id_participants_id_fk": {
+          "name": "expenses_payer_id_participants_id_fk",
+          "tableFrom": "expenses",
+          "tableTo": "participants",
+          "columnsFrom": [
+            "payer_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "participants": {
+      "name": "participants",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "pot_slug": {
+          "name": "pot_slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        }
+      },
+      "indexes": {
+        "participants_pot_slug_idx": {
+          "name": "participants_pot_slug_idx",
+          "columns": [
+            "pot_slug"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "participants_pot_slug_pots_slug_fk": {
+          "name": "participants_pot_slug_pots_slug_fk",
+          "tableFrom": "participants",
+          "tableTo": "pots",
+          "columnsFrom": [
+            "pot_slug"
+          ],
+          "columnsTo": [
+            "slug"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "pots": {
+      "name": "pots",
+      "columns": {
+        "slug": {
+          "name": "slug",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "currency": {
+          "name": "currency",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

server/database/migrations/meta/0001_snapshot.json

@@ -0,0 +1,280 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "ff3f0e2c-da64-4a0c-8c38-7b5717b112ac",
+  "prevId": "c81712c7-479e-4818-9604-5e603434afac",
+  "tables": {
+    "expense_participants": {
+      "name": "expense_participants",
+      "columns": {
+        "expense_id": {
+          "name": "expense_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "participant_id": {
+          "name": "participant_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "expense_participants_expense_id_idx": {
+          "name": "expense_participants_expense_id_idx",
+          "columns": [
+            "expense_id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "expense_participants_expense_id_expenses_id_fk": {
+          "name": "expense_participants_expense_id_expenses_id_fk",
+          "tableFrom": "expense_participants",
+          "tableTo": "expenses",
+          "columnsFrom": [
+            "expense_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "expense_participants_participant_id_participants_id_fk": {
+          "name": "expense_participants_participant_id_participants_id_fk",
+          "tableFrom": "expense_participants",
+          "tableTo": "participants",
+          "columnsFrom": [
+            "participant_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "expenses": {
+      "name": "expenses",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "pot_slug": {
+          "name": "pot_slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'expense'"
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "amount_cents": {
+          "name": "amount_cents",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "payer_id": {
+          "name": "payer_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        }
+      },
+      "indexes": {
+        "expenses_pot_slug_idx": {
+          "name": "expenses_pot_slug_idx",
+          "columns": [
+            "pot_slug"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "expenses_pot_slug_pots_slug_fk": {
+          "name": "expenses_pot_slug_pots_slug_fk",
+          "tableFrom": "expenses",
+          "tableTo": "pots",
+          "columnsFrom": [
+            "pot_slug"
+          ],
+          "columnsTo": [
+            "slug"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "expenses_payer_id_participants_id_fk": {
+          "name": "expenses_payer_id_participants_id_fk",
+          "tableFrom": "expenses",
+          "tableTo": "participants",
+          "columnsFrom": [
+            "payer_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "participants": {
+      "name": "participants",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "pot_slug": {
+          "name": "pot_slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "paypal_link": {
+          "name": "paypal_link",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        }
+      },
+      "indexes": {
+        "participants_pot_slug_idx": {
+          "name": "participants_pot_slug_idx",
+          "columns": [
+            "pot_slug"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "participants_pot_slug_pots_slug_fk": {
+          "name": "participants_pot_slug_pots_slug_fk",
+          "tableFrom": "participants",
+          "tableTo": "pots",
+          "columnsFrom": [
+            "pot_slug"
+          ],
+          "columnsTo": [
+            "slug"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "pots": {
+      "name": "pots",
+      "columns": {
+        "slug": {
+          "name": "slug",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "currency": {
+          "name": "currency",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

server/database/migrations/meta/0002_snapshot.json

@@ -0,0 +1,280 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "f2f62ba6-53b9-43b7-bbd2-3dd5bdaa21fe",
+  "prevId": "ff3f0e2c-da64-4a0c-8c38-7b5717b112ac",
+  "tables": {
+    "expense_participants": {
+      "name": "expense_participants",
+      "columns": {
+        "expense_id": {
+          "name": "expense_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "participant_id": {
+          "name": "participant_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "expense_participants_expense_id_idx": {
+          "name": "expense_participants_expense_id_idx",
+          "columns": [
+            "expense_id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "expense_participants_expense_id_expenses_id_fk": {
+          "name": "expense_participants_expense_id_expenses_id_fk",
+          "tableFrom": "expense_participants",
+          "tableTo": "expenses",
+          "columnsFrom": [
+            "expense_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "expense_participants_participant_id_participants_id_fk": {
+          "name": "expense_participants_participant_id_participants_id_fk",
+          "tableFrom": "expense_participants",
+          "tableTo": "participants",
+          "columnsFrom": [
+            "participant_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "expenses": {
+      "name": "expenses",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "pot_slug": {
+          "name": "pot_slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'expense'"
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "amount_cents": {
+          "name": "amount_cents",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "payer_id": {
+          "name": "payer_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        }
+      },
+      "indexes": {
+        "expenses_pot_slug_idx": {
+          "name": "expenses_pot_slug_idx",
+          "columns": [
+            "pot_slug"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "expenses_pot_slug_pots_slug_fk": {
+          "name": "expenses_pot_slug_pots_slug_fk",
+          "tableFrom": "expenses",
+          "tableTo": "pots",
+          "columnsFrom": [
+            "pot_slug"
+          ],
+          "columnsTo": [
+            "slug"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "expenses_payer_id_participants_id_fk": {
+          "name": "expenses_payer_id_participants_id_fk",
+          "tableFrom": "expenses",
+          "tableTo": "participants",
+          "columnsFrom": [
+            "payer_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "participants": {
+      "name": "participants",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "pot_slug": {
+          "name": "pot_slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "payment_link": {
+          "name": "payment_link",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        }
+      },
+      "indexes": {
+        "participants_pot_slug_idx": {
+          "name": "participants_pot_slug_idx",
+          "columns": [
+            "pot_slug"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "participants_pot_slug_pots_slug_fk": {
+          "name": "participants_pot_slug_pots_slug_fk",
+          "tableFrom": "participants",
+          "tableTo": "pots",
+          "columnsFrom": [
+            "pot_slug"
+          ],
+          "columnsTo": [
+            "slug"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "pots": {
+      "name": "pots",
+      "columns": {
+        "slug": {
+          "name": "slug",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "currency": {
+          "name": "currency",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

server/database/migrations/meta/_journal.json

@@ -0,0 +1,27 @@
+{
+  "version": "7",
+  "dialect": "sqlite",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "6",
+      "when": 1782902810997,
+      "tag": "0000_even_shinobi_shaw",
+      "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "6",
+      "when": 1782911489463,
+      "tag": "0001_careless_rhodey",
+      "breakpoints": true
+    },
+    {
+      "idx": 2,
+      "version": "6",
+      "when": 1782913249404,
+      "tag": "0002_rename_paypal_link",
+      "breakpoints": true
+    }
+  ]
+}

server/database/schema.ts

@@ -0,0 +1,41 @@
+import { sql } from 'drizzle-orm'
+import { index, integer, sqliteTable, text } from 'drizzle-orm/sqlite-core'
+
+export const pots = sqliteTable('pots', {
+  slug: text('slug').primaryKey(),
+  name: text('name').notNull(),
+  currency: text('currency').notNull(),
+  createdAt: integer('created_at').notNull().default(sql`(unixepoch())`),
+})
+
+export const participants = sqliteTable('participants', {
+  id: integer('id').primaryKey({ autoIncrement: true }),
+  potSlug: text('pot_slug').notNull().references(() => pots.slug),
+  name: text('name').notNull(),
+  paymentLink: text('payment_link'),
+  createdAt: integer('created_at').notNull().default(sql`(unixepoch())`),
+}, table => [
+  index('participants_pot_slug_idx').on(table.potSlug),
+])
+
+export const expenses = sqliteTable('expenses', {
+  id: integer('id').primaryKey({ autoIncrement: true }),
+  potSlug: text('pot_slug').notNull().references(() => pots.slug),
+  // 'payment' rows are settlements: payerId is who paid, and the single row
+  // in expenseParticipants is who received it — same shape as a one-person
+  // split expense, which is mathematically what a settlement is.
+  type: text('type').notNull().default('expense'),
+  description: text('description').notNull(),
+  amountCents: integer('amount_cents').notNull(),
+  payerId: integer('payer_id').notNull().references(() => participants.id),
+  createdAt: integer('created_at').notNull().default(sql`(unixepoch())`),
+}, table => [
+  index('expenses_pot_slug_idx').on(table.potSlug),
+])
+
+export const expenseParticipants = sqliteTable('expense_participants', {
+  expenseId: integer('expense_id').notNull().references(() => expenses.id),
+  participantId: integer('participant_id').notNull().references(() => participants.id),
+}, table => [
+  index('expense_participants_expense_id_idx').on(table.expenseId),
+])

server/plugins/db-migrate.ts

@@ -0,0 +1,6 @@
+import { migrate } from 'drizzle-orm/libsql/migrator'
+import { useDb } from '../database/client'
+
+export default defineNitroPlugin(async () => {
+  await migrate(useDb(), { migrationsFolder: 'server/database/migrations' })
+})

server/utils/pots.ts

@@ -0,0 +1,53 @@
+import { eq, inArray } from 'drizzle-orm'
+import { useDb } from '../database/client'
+import { expenseParticipants, expenses, participants, pots } from '../database/schema'
+
+export interface ExpenseWithDetails {
+  id: number
+  type: string
+  description: string
+  amountCents: number
+  payerId: number
+  participantIds: number[]
+  createdAt: number
+}
+
+export async function getPotOrThrow(slug: string) {
+  const db = useDb()
+  const [pot] = await db.select().from(pots).where(eq(pots.slug, slug))
+  if (!pot) {
+    throw createError({ statusCode: 404, statusMessage: 'Pot not found' })
+  }
+  return pot
+}
+
+export async function getParticipants(slug: string) {
+  const db = useDb()
+  return db.select().from(participants).where(eq(participants.potSlug, slug))
+}
+
+export async function getExpensesWithParticipants(slug: string): Promise<ExpenseWithDetails[]> {
+  const db = useDb()
+  const expenseRows = await db.select().from(expenses).where(eq(expenses.potSlug, slug)).orderBy(expenses.createdAt)
+  if (expenseRows.length === 0) return []
+
+  const expenseIds = expenseRows.map(row => row.id)
+  const links = await db.select().from(expenseParticipants).where(inArray(expenseParticipants.expenseId, expenseIds))
+
+  const participantIdsByExpense = new Map<number, number[]>()
+  for (const link of links) {
+    const list = participantIdsByExpense.get(link.expenseId) ?? []
+    list.push(link.participantId)
+    participantIdsByExpense.set(link.expenseId, list)
+  }
+
+  return expenseRows.map(row => ({
+    id: row.id,
+    type: row.type,
+    description: row.description,
+    amountCents: row.amountCents,
+    payerId: row.payerId,
+    participantIds: participantIdsByExpense.get(row.id) ?? [],
+    createdAt: row.createdAt,
+  }))
+}

shared/types.ts

@@ -0,0 +1,19 @@
+export type ParticipantId = number
+
+export interface Participant {
+  id: ParticipantId
+  name: string
+}
+
+export interface Expense {
+  id: number
+  amountCents: number
+  payerId: ParticipantId
+  participantIds: ParticipantId[]
+}
+
+export interface Settlement {
+  fromId: ParticipantId
+  toId: ParticipantId
+  amountCents: number
+}

shared/utils/balances.test.ts

@@ -0,0 +1,89 @@
+import { describe, expect, it } from 'vitest'
+import type { Expense, Participant } from '../types'
+import { calculateBalances } from './balances'
+
+const participants: Participant[] = [
+  { id: 1, name: 'Alice' },
+  { id: 2, name: 'Bob' },
+  { id: 3, name: 'Carol' },
+]
+
+describe('calculateBalances', () => {
+  it('nets an equal split expense among all participants', () => {
+    const expenses: Expense[] = [
+      { id: 1, amountCents: 900, payerId: 1, participantIds: [1, 2, 3] },
+    ]
+    const { netBalances, settlements } = calculateBalances(participants, expenses)
+
+    expect(netBalances).toEqual({ 1: 600, 2: -300, 3: -300 })
+    expect(settlements).toEqual(
+      expect.arrayContaining([
+        { fromId: 2, toId: 1, amountCents: 300 },
+        { fromId: 3, toId: 1, amountCents: 300 },
+      ]),
+    )
+    expect(settlements).toHaveLength(2)
+  })
+
+  it('handles an expense split among a subset of participants', () => {
+    const expenses: Expense[] = [
+      { id: 1, amountCents: 1000, payerId: 2, participantIds: [2, 3] },
+    ]
+    const { netBalances } = calculateBalances(participants, expenses)
+    expect(netBalances).toEqual({ 1: 0, 2: 500, 3: -500 })
+  })
+
+  it('produces a zero-sum, fully-settled group when expenses cancel out', () => {
+    const expenses: Expense[] = [
+      { id: 1, amountCents: 900, payerId: 1, participantIds: [1, 2, 3] },
+      { id: 2, amountCents: 900, payerId: 2, participantIds: [1, 2, 3] },
+      { id: 3, amountCents: 900, payerId: 3, participantIds: [1, 2, 3] },
+    ]
+    const { netBalances, settlements } = calculateBalances(participants, expenses)
+    expect(Object.values(netBalances).every(v => v === 0)).toBe(true)
+    expect(settlements).toEqual([])
+  })
+
+  it('folds in a settlement payment recorded as a one-person split expense', () => {
+    const expenses: Expense[] = [
+      { id: 1, amountCents: 900, payerId: 1, participantIds: [1, 2, 3] },
+      // Bob (2) settles 300 with Alice (1): payerId is who pays, the sole
+      // participant is who receives it.
+      { id: 2, amountCents: 300, payerId: 2, participantIds: [1] },
+    ]
+    const { netBalances, settlements } = calculateBalances(participants, expenses)
+    expect(netBalances).toEqual({ 1: 300, 2: 0, 3: -300 })
+    expect(settlements).toEqual([{ fromId: 3, toId: 1, amountCents: 300 }])
+  })
+
+  it('handles a single-participant Pot (self-paid expense nets to zero)', () => {
+    const solo: Participant[] = [{ id: 1, name: 'Alice' }]
+    const expenses: Expense[] = [
+      { id: 1, amountCents: 500, payerId: 1, participantIds: [1] },
+    ]
+    const { netBalances, settlements } = calculateBalances(solo, expenses)
+    expect(netBalances).toEqual({ 1: 0 })
+    expect(settlements).toEqual([])
+  })
+
+  it('produces a minimal number of settlements for a multi-person scenario', () => {
+    const four: Participant[] = [
+      { id: 1, name: 'A' },
+      { id: 2, name: 'B' },
+      { id: 3, name: 'C' },
+      { id: 4, name: 'D' },
+    ]
+    // A pays 400 split 4 ways (each owes 100), B pays 800 split 4 ways (each owes 200).
+    const expenses: Expense[] = [
+      { id: 1, amountCents: 400, payerId: 1, participantIds: [1, 2, 3, 4] },
+      { id: 2, amountCents: 800, payerId: 2, participantIds: [1, 2, 3, 4] },
+    ]
+    const { netBalances, settlements } = calculateBalances(four, expenses)
+    // A: +400-100-200=100, B: +800-100-200=500, C: -300, D: -300
+    expect(netBalances).toEqual({ 1: 100, 2: 500, 3: -300, 4: -300 })
+    // 2 creditors, 2 debtors -> minimal settlement count is at most 3 (n-1 participants with nonzero balance)
+    expect(settlements.length).toBeLessThanOrEqual(3)
+    const total = settlements.reduce((sum, s) => sum + s.amountCents, 0)
+    expect(total).toBe(600)
+  })
+})

shared/utils/balances.ts

@@ -0,0 +1,63 @@
+import type { Expense, Participant, ParticipantId, Settlement } from '../types'
+import { computeSplit } from './split'
+
+export function calculateBalances(
+  participants: Participant[],
+  expenses: Expense[],
+): { netBalances: Record<ParticipantId, number>, settlements: Settlement[] } {
+  const netBalances: Record<ParticipantId, number> = {}
+  for (const participant of participants) {
+    netBalances[participant.id] = 0
+  }
+
+  // A settlement payment (fromId pays toId) is folded in as a regular
+  // expense: payerId = fromId, participantIds = [toId]. The math is
+  // identical to a one-person split, so no separate handling is needed here.
+  for (const expense of expenses) {
+    netBalances[expense.payerId] = (netBalances[expense.payerId] ?? 0) + expense.amountCents
+    const shares = computeSplit(expense.amountCents, expense.participantIds)
+    for (const [participantId, share] of Object.entries(shares)) {
+      const id = Number(participantId)
+      netBalances[id] = (netBalances[id] ?? 0) - share
+    }
+  }
+
+  const settlements = simplifyDebts(netBalances)
+
+  return { netBalances, settlements }
+}
+
+function simplifyDebts(netBalances: Record<ParticipantId, number>): Settlement[] {
+  const creditors: { id: ParticipantId, amount: number }[] = []
+  const debtors: { id: ParticipantId, amount: number }[] = []
+
+  for (const [id, amount] of Object.entries(netBalances)) {
+    if (amount > 0) creditors.push({ id: Number(id), amount })
+    else if (amount < 0) debtors.push({ id: Number(id), amount: -amount })
+  }
+
+  creditors.sort((a, b) => b.amount - a.amount)
+  debtors.sort((a, b) => b.amount - a.amount)
+
+  const settlements: Settlement[] = []
+  let ci = 0
+  let di = 0
+
+  while (ci < creditors.length && di < debtors.length) {
+    const creditor = creditors[ci]
+    const debtor = debtors[di]
+    const amount = Math.min(creditor.amount, debtor.amount)
+
+    if (amount > 0) {
+      settlements.push({ fromId: debtor.id, toId: creditor.id, amountCents: amount })
+    }
+
+    creditor.amount -= amount
+    debtor.amount -= amount
+
+    if (creditor.amount === 0) ci++
+    if (debtor.amount === 0) di++
+  }
+
+  return settlements
+}

shared/utils/money.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest'
+import { formatCurrency, fromCents, toCents } from './money'
+
+describe('money helpers', () => {
+  it('converts amounts to cents', () => {
+    expect(toCents(12.34)).toBe(1234)
+    expect(toCents(5)).toBe(500)
+  })
+
+  it('converts cents back to amounts', () => {
+    expect(fromCents(1234)).toBe(12.34)
+  })
+
+  it('formats cents as a localized currency string', () => {
+    expect(formatCurrency(1234, 'EUR')).toContain('12')
+    expect(formatCurrency(1234, 'EUR')).toContain('34')
+  })
+})

shared/utils/money.ts

@@ -0,0 +1,11 @@
+export function toCents(amount: number): number {
+  return Math.round(amount * 100)
+}
+
+export function fromCents(cents: number): number {
+  return cents / 100
+}
+
+export function formatCurrency(cents: number, currency: string): string {
+  return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(fromCents(cents))
+}

shared/utils/paymentLink.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest'
+import { isValidPaymentLink } from './paymentLink'
+
+describe('isValidPaymentLink', () => {
+  it('accepts an https PayPal.me link', () => {
+    expect(isValidPaymentLink('https://paypal.me/janedoe')).toBe(true)
+  })
+
+  it('accepts an http link', () => {
+    expect(isValidPaymentLink('http://paypal.me/janedoe')).toBe(true)
+  })
+
+  it('rejects an empty string', () => {
+    expect(isValidPaymentLink('')).toBe(false)
+  })
+
+  it('rejects a javascript: URI', () => {
+    expect(isValidPaymentLink('javascript:alert(1)')).toBe(false)
+  })
+
+  it('rejects a value that is not a URL at all', () => {
+    expect(isValidPaymentLink('not a link')).toBe(false)
+  })
+})

shared/utils/paymentLink.ts

@@ -0,0 +1,11 @@
+export function isValidPaymentLink(value: string): boolean {
+  if (!value.trim()) return false
+
+  try {
+    const url = new URL(value)
+    return url.protocol === 'https:' || url.protocol === 'http:'
+  }
+  catch {
+    return false
+  }
+}

shared/utils/slug.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest'
+import { generateSlug } from './slug'
+
+describe('generateSlug', () => {
+  it('produces an adjective-noun-suffix slug', () => {
+    expect(generateSlug()).toMatch(/^[a-z]+-[a-z]+-[a-z0-9]{6}$/)
+  })
+
+  it('produces distinct slugs across calls', () => {
+    const slugs = new Set(Array.from({ length: 20 }, () => generateSlug()))
+    expect(slugs.size).toBeGreaterThan(1)
+  })
+})

shared/utils/slug.ts

@@ -0,0 +1,23 @@
+import { customAlphabet } from 'nanoid'
+
+const ADJECTIVES = [
+  'drunken', 'sleepy', 'grumpy', 'jolly', 'quiet', 'brave', 'clever', 'eager',
+  'fuzzy', 'gentle', 'happy', 'icy', 'jumpy', 'kind', 'lively', 'mighty',
+  'noisy', 'orange', 'proud', 'quick', 'rusty', 'silly', 'tidy', 'upbeat',
+  'vivid', 'witty', 'zesty', 'bold', 'calm', 'dizzy',
+]
+
+const NOUNS = [
+  'wizard', 'tiger', 'otter', 'falcon', 'penguin', 'dragon', 'panda', 'raven',
+  'walrus', 'yeti', 'badger', 'comet', 'ember', 'fox', 'goose', 'heron',
+  'igloo', 'jackal', 'koala', 'lemur', 'mango', 'newt', 'oasis', 'puffin',
+  'quokka', 'robin', 'sloth', 'toucan', 'unicorn', 'viper',
+]
+
+const nanoid = customAlphabet('0123456789abcdefghijklmnopqrstuvwxyz', 6)
+
+export function generateSlug(): string {
+  const adjective = ADJECTIVES[Math.floor(Math.random() * ADJECTIVES.length)]
+  const noun = NOUNS[Math.floor(Math.random() * NOUNS.length)]
+  return `${adjective}-${noun}-${nanoid()}`
+}

shared/utils/split.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+import { computeSplit } from './split'
+
+describe('computeSplit', () => {
+  it('divides evenly when amount divides cleanly', () => {
+    expect(computeSplit(1000, [1, 2, 4])).toEqual({ 1: 334, 2: 333, 4: 333 })
+  })
+
+  it('sums back exactly to the original amount', () => {
+    const shares = computeSplit(1001, [1, 2, 3, 4, 5, 6, 7])
+    const total = Object.values(shares).reduce((sum, share) => sum + share, 0)
+    expect(total).toBe(1001)
+  })
+
+  it('distributes remainder cents one-each to the first participants in order', () => {
+    expect(computeSplit(10, [1, 2, 3])).toEqual({ 1: 4, 2: 3, 3: 3 })
+  })
+
+  it('gives the full amount to a single participant', () => {
+    expect(computeSplit(1234, [9])).toEqual({ 9: 1234 })
+  })
+
+  it('handles a zero amount', () => {
+    expect(computeSplit(0, [1, 2])).toEqual({ 1: 0, 2: 0 })
+  })
+
+  it('throws when given no participants', () => {
+    expect(() => computeSplit(1000, [])).toThrow()
+  })
+})

shared/utils/split.ts

@@ -0,0 +1,21 @@
+import type { ParticipantId } from '../types'
+
+/**
+ * Splits amountCents equally among participantIds. Any remainder cents (from
+ * integer division) go one-each to the first participants in the given
+ * order, so the shares always sum exactly back to amountCents.
+ */
+export function computeSplit(amountCents: number, participantIds: ParticipantId[]): Record<ParticipantId, number> {
+  if (participantIds.length === 0) {
+    throw new Error('computeSplit requires at least one participant')
+  }
+
+  const base = Math.floor(amountCents / participantIds.length)
+  const remainder = amountCents - base * participantIds.length
+
+  const shares: Record<ParticipantId, number> = {}
+  participantIds.forEach((id, index) => {
+    shares[id] = base + (index < remainder ? 1 : 0)
+  })
+  return shares
+}

test/api/pots.test.ts

@@ -0,0 +1,176 @@
+import { randomUUID } from 'node:crypto'
+import { fileURLToPath } from 'node:url'
+import os from 'node:os'
+import path from 'node:path'
+import { $fetch, setup } from '@nuxt/test-utils/e2e'
+import { describe, expect, it } from 'vitest'
+
+describe('Pot API', async () => {
+  const dbPath = path.join(os.tmpdir(), `stb-test-${randomUUID()}.sqlite`)
+
+  await setup({
+    rootDir: fileURLToPath(new URL('../..', import.meta.url)),
+    dev: true,
+    env: { DATABASE_URL: `file:${dbPath}` },
+  })
+
+  it('creates a Pot with the creator as first participant', async () => {
+    const result = await $fetch('/api/pots', {
+      method: 'POST',
+      body: { name: 'Weekend Trip', currency: 'eur', creatorName: 'Alice' },
+    })
+
+    expect(result.slug).toMatch(/^[a-z]+-[a-z]+-[a-z0-9]{6}$/)
+    expect(result.name).toBe('Weekend Trip')
+    expect(result.currency).toBe('EUR')
+    expect(result.creator.name).toBe('Alice')
+  })
+
+  it('rejects Pot creation with missing fields', async () => {
+    await expect(
+      $fetch('/api/pots', { method: 'POST', body: { name: '', currency: 'EUR', creatorName: 'Alice' } }),
+    ).rejects.toMatchObject({ statusCode: 400 })
+  })
+
+  it('adds a participant and fetches the Pot with balances', async () => {
+    const pot = await $fetch('/api/pots', {
+      method: 'POST',
+      body: { name: 'Flat Share', currency: 'USD', creatorName: 'Alice' },
+    })
+
+    const bob = await $fetch(`/api/pots/${pot.slug}/participants`, {
+      method: 'POST',
+      body: { name: 'Bob' },
+    })
+    expect(bob.name).toBe('Bob')
+
+    const fetched = await $fetch(`/api/pots/${pot.slug}`)
+    expect(fetched.pot.slug).toBe(pot.slug)
+    expect(fetched.participants).toHaveLength(2)
+    expect(fetched.expenses).toEqual([])
+    expect(fetched.netBalances).toEqual({
+      [pot.creator.id]: 0,
+      [bob.id]: 0,
+    })
+    expect(fetched.settlements).toEqual([])
+  })
+
+  it('supports full expense CRUD and recomputes balances', async () => {
+    const pot = await $fetch('/api/pots', {
+      method: 'POST',
+      body: { name: 'Birthday Gift', currency: 'EUR', creatorName: 'Alice' },
+    })
+    const bob = await $fetch(`/api/pots/${pot.slug}/participants`, { method: 'POST', body: { name: 'Bob' } })
+    const alice = pot.creator
+
+    const expense = await $fetch(`/api/pots/${pot.slug}/expenses`, {
+      method: 'POST',
+      body: { description: 'Cake', amountCents: 1000, payerId: alice.id, participantIds: [alice.id, bob.id] },
+    })
+    expect(expense.participantIds).toEqual([alice.id, bob.id])
+
+    let fetched = await $fetch(`/api/pots/${pot.slug}`)
+    expect(fetched.expenses).toHaveLength(1)
+    expect(fetched.netBalances[alice.id]).toBe(500)
+    expect(fetched.netBalances[bob.id]).toBe(-500)
+    expect(fetched.settlements).toEqual([{ fromId: bob.id, toId: alice.id, amountCents: 500 }])
+
+    await $fetch(`/api/pots/${pot.slug}/expenses/${expense.id}`, {
+      method: 'PATCH',
+      body: { description: 'Cake', amountCents: 2000, payerId: alice.id, participantIds: [alice.id, bob.id] },
+    })
+    fetched = await $fetch(`/api/pots/${pot.slug}`)
+    expect(fetched.netBalances[bob.id]).toBe(-1000)
+
+    await $fetch(`/api/pots/${pot.slug}/expenses/${expense.id}`, { method: 'DELETE' })
+    fetched = await $fetch(`/api/pots/${pot.slug}`)
+    expect(fetched.expenses).toEqual([])
+    expect(fetched.netBalances[bob.id]).toBe(0)
+  })
+
+  it('rejects an expense referencing a participant from another Pot', async () => {
+    const potA = await $fetch('/api/pots', { method: 'POST', body: { name: 'A', currency: 'EUR', creatorName: 'Alice' } })
+    const potB = await $fetch('/api/pots', { method: 'POST', body: { name: 'B', currency: 'EUR', creatorName: 'Zara' } })
+
+    await expect(
+      $fetch(`/api/pots/${potA.slug}/expenses`, {
+        method: 'POST',
+        body: { description: 'x', amountCents: 100, payerId: potB.creator.id, participantIds: [potA.creator.id] },
+      }),
+    ).rejects.toMatchObject({ statusCode: 400 })
+  })
+
+  it('returns 404 for an unknown Pot slug', async () => {
+    await expect($fetch('/api/pots/does-not-exist-123456')).rejects.toMatchObject({ statusCode: 404 })
+  })
+
+  it('records a settlement payment as a payment-type expense and recomputes balances', async () => {
+    const pot = await $fetch('/api/pots', { method: 'POST', body: { name: 'Ski Trip', currency: 'EUR', creatorName: 'Alice' } })
+    const bob = await $fetch(`/api/pots/${pot.slug}/participants`, { method: 'POST', body: { name: 'Bob' } })
+    const alice = pot.creator
+
+    await $fetch(`/api/pots/${pot.slug}/expenses`, {
+      method: 'POST',
+      body: { description: 'Lift pass', amountCents: 1000, payerId: alice.id, participantIds: [alice.id, bob.id] },
+    })
+
+    const payment = await $fetch(`/api/pots/${pot.slug}/payments`, {
+      method: 'POST',
+      body: { fromId: bob.id, toId: alice.id, amountCents: 500 },
+    })
+    expect(payment.type).toBe('payment')
+    expect(payment.payerId).toBe(bob.id)
+    expect(payment.participantIds).toEqual([alice.id])
+
+    const fetched = await $fetch(`/api/pots/${pot.slug}`)
+    expect(fetched.expenses).toHaveLength(2)
+    expect(fetched.expenses.filter(e => e.type === 'payment')).toHaveLength(1)
+    expect(fetched.netBalances[alice.id]).toBe(0)
+    expect(fetched.netBalances[bob.id]).toBe(0)
+    expect(fetched.settlements).toEqual([])
+  })
+
+  it('rejects a payment with a non-positive amount or matching from/to', async () => {
+    const pot = await $fetch('/api/pots', { method: 'POST', body: { name: 'Retreat', currency: 'EUR', creatorName: 'Alice' } })
+    const bob = await $fetch(`/api/pots/${pot.slug}/participants`, { method: 'POST', body: { name: 'Bob' } })
+    const alice = pot.creator
+
+    await expect(
+      $fetch(`/api/pots/${pot.slug}/payments`, { method: 'POST', body: { fromId: bob.id, toId: alice.id, amountCents: 0 } }),
+    ).rejects.toMatchObject({ statusCode: 400 })
+
+    await expect(
+      $fetch(`/api/pots/${pot.slug}/payments`, { method: 'POST', body: { fromId: alice.id, toId: alice.id, amountCents: 100 } }),
+    ).rejects.toMatchObject({ statusCode: 400 })
+  })
+
+  it('deletes a settlement payment via the regular expense delete route', async () => {
+    const pot = await $fetch('/api/pots', { method: 'POST', body: { name: 'Housewarming', currency: 'EUR', creatorName: 'Alice' } })
+    const bob = await $fetch(`/api/pots/${pot.slug}/participants`, { method: 'POST', body: { name: 'Bob' } })
+    const alice = pot.creator
+
+    const payment = await $fetch(`/api/pots/${pot.slug}/payments`, {
+      method: 'POST',
+      body: { fromId: bob.id, toId: alice.id, amountCents: 500 },
+    })
+    await $fetch(`/api/pots/${pot.slug}/expenses/${payment.id}`, { method: 'DELETE' })
+
+    const fetched = await $fetch(`/api/pots/${pot.slug}`)
+    expect(fetched.expenses).toEqual([])
+  })
+
+  it('syncs a valid PayPal link to 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' },
+    })
+    expect(updated.paypalLink).toBe('https://paypal.me/alice')
+
+    await expect(
+      $fetch(`/api/pots/${pot.slug}/participants/${alice.id}`, { method: 'PATCH', body: { paypalLink: 'javascript:alert(1)' } }),
+    ).rejects.toMatchObject({ statusCode: 400 })
+  })
+})

todo.md

@@ -0,0 +1,11 @@
+# Todo
+
+Deferred from the core-loop MVP (see `docs/PRD.md` for full details on each).
+
+- [ ] **Custom splits**: allow overriding the equal split with exact per-participant amounts; validate that they sum to the expense total. Extends `computeSplit` (`shared/utils/split.ts`) with the `overrides` param.
+- [x] **PayPal "pay me" link**: store on device via `localStorage` (extend `useIdentity`), sync to the participant row whenever identity is associated with a Pot, and display next to a participant's name/balance.
+- [x] **Recent Pots list**: client-side `localStorage` list of Pots created/visited on this device, shown on the home page for quick access.
+- [x] **Tap-to-settle payments**: mark a suggested settlement as paid, creating a `Payment` record (new DB table + API routes) distinct from expenses; fold into `calculateBalances`'s existing `payments` param.
+- [ ] **Live polling**: poll the Pot view (expenses/participants/balances) every 5–10s while open, re-rendering on change.
+- [ ] **Emoji per pot**: show an emoji next to the pot name. use a keyword list like Geburtstag and birthday to select an emoji like the cake one
+- [ ] native confirm dialog to delete

tsconfig.json

@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}

vitest.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    environment: 'node',
+    include: ['shared/**/*.test.ts', 'app/**/*.test.ts', 'test/**/*.test.ts'],
+    testTimeout: 60000,
+    hookTimeout: 60000,
+  },
+})