🐛 fix typecheck and cleanup imports

app/components/AddExpenseForm.vue

@@ -15,7 +15,7 @@ const emit = defineEmits<{
 
 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 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('')
 

app/components/BalanceSummary.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ParticipantView, SettlementView } from '../types'
-import { isValidPaymentLink } from '../../shared/utils/paymentLink'
+import { isValidPaymentLink } from '~~/shared/utils/paymentLink'
 
 const props = defineProps<{
   slug: string

app/components/ExpenseList.vue

@@ -46,7 +46,7 @@ const sorted = computed(() => [...props.expenses].sort((a, b) => b.createdAt - a
             <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]) }}
+            {{ nameOf(expense.payerId) }} paid {{ nameOf(expense.participantIds[0]!) }}
           </p>
         </div>
         <div v-else class="min-w-0">

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

@@ -7,6 +7,8 @@ const slug = route.params.slug as string
 const { data, refresh, error } = await useFetch<PotView>(`/api/pots/${slug}`)
 
 const adding = ref(false)
+const removingId = ref<number | null>(null)
+const removeError = ref('')
 
 async function addParticipant(participantName: string) {
   adding.value = true
@@ -18,6 +20,23 @@ async function addParticipant(participantName: string) {
     adding.value = false
   }
 }
+
+async function removeParticipant(participant: { id: number, name: string }) {
+  if (!window.confirm(`Remove ${participant.name} from this Pot?`)) return
+
+  removeError.value = ''
+  removingId.value = participant.id
+  try {
+    await $fetch(`/api/pots/${slug}/participants/${participant.id}`, { method: 'DELETE' })
+    await refresh()
+  }
+  catch {
+    removeError.value = `Couldn't remove ${participant.name}. They may have expenses or payments recorded.`
+  }
+  finally {
+    removingId.value = null
+  }
+}
 </script>
 
 <template>
@@ -64,12 +83,23 @@ async function addParticipant(participantName: string) {
           <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>
+          <span class="min-w-0 flex-1 truncate font-medium text-stone-900 dark:text-stone-100">{{ participant.name }}</span>
+          <button
+            type="button"
+            :disabled="removingId === participant.id"
+            class="shrink-0 text-sm font-medium text-rose-600 disabled:opacity-50 dark:text-rose-400"
+            @click="removeParticipant(participant)"
+          >
+            {{ removingId === participant.id ? 'Removing…' : 'Remove' }}
+          </button>
         </li>
         <li v-if="data.participants.length === 0" class="rounded-2xl border border-dashed border-stone-300 p-4 text-center text-sm text-stone-500 dark:border-stone-700 dark:text-stone-400">
           No one's in this Pot yet.
         </li>
       </ul>
+      <p v-if="removeError" class="text-sm text-rose-600 dark:text-rose-400">
+        {{ removeError }}
+      </p>
     </section>
 
     <section class="space-y-3 rounded-2xl border border-stone-200 bg-white p-4 shadow-sm dark:border-stone-800 dark:bg-stone-900">

package.json

@@ -9,22 +9,22 @@
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "test": "vitest run",
+    "typecheck": "nuxt typecheck",
     "db:generate": "drizzle-kit generate"
   },
   "dependencies": {
     "@libsql/client": "^0.17.4",
     "drizzle-orm": "^0.45.2",
-    "nanoid": "^5.1.16",
+    "nanoid": "^6.0.1",
-    "nuxt": "^4.4.8",
+    "nuxt": "^4.5.2"
-    "vue": "^3.5.38",
-    "vue-router": "^5.1.0"
   },
   "devDependencies": {
-    "@nuxt/test-utils": "^4.0.3",
+    "@nuxt/test-utils": "^4.1.0",
-    "@tailwindcss/vite": "^4.3.2",
+    "@tailwindcss/vite": "^4.3.3",
-    "@vue/test-utils": "^2.4.11",
     "drizzle-kit": "^0.31.10",
-    "tailwindcss": "^4.3.2",
+    "tailwindcss": "^4.3.3",
-    "vitest": "^4.1.9"
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.10",
+    "vue-tsc": "^3.3.9"
   }
 }

server/api/pots.post.ts

@@ -1,6 +1,6 @@
-import { generateSlug } from '../../shared/utils/slug'
+import { generateSlug } from '~~/shared/utils/slug'
-import { useDb } from '../database/client'
+import { useDb } from '~~/server/database/client'
-import { participants, pots } from '../database/schema'
+import { participants, pots } from '~~/server/database/schema'
 
 export default defineEventHandler(async (event) => {
   const body = await readBody(event)

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

@@ -1,4 +1,4 @@
-import { calculateBalances } from '../../../shared/utils/balances'
+import { calculateBalances } from '~~/shared/utils/balances'
 
 export default defineEventHandler(async (event) => {
   const slug = getRouterParam(event, 'slug')!

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

@@ -1,5 +1,5 @@
-import { useDb } from '../../../database/client'
+import { useDb } from '~~/server/database/client'
-import { expenseParticipants, expenses } from '../../../database/schema'
+import { expenseParticipants, expenses } from '~~/server/database/schema'
 
 export default defineEventHandler(async (event) => {
   const slug = getRouterParam(event, 'slug')!
@@ -29,7 +29,7 @@ export default defineEventHandler(async (event) => {
 
   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 })))
+  await db.insert(expenseParticipants).values(participantIds.map(participantId => ({ expenseId: expense!.id, participantId })))
 
   return { ...expense, participantIds }
 })

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

@@ -1,6 +1,6 @@
 import { and, eq } from 'drizzle-orm'
-import { useDb } from '../../../../database/client'
+import { useDb } from '~~/server/database/client'
-import { expenseParticipants, expenses } from '../../../../database/schema'
+import { expenseParticipants, expenses } from '~~/server/database/schema'
 
 export default defineEventHandler(async (event) => {
   const slug = getRouterParam(event, 'slug')!

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

@@ -1,6 +1,6 @@
 import { and, eq } from 'drizzle-orm'
-import { useDb } from '../../../../database/client'
+import { useDb } from '~~/server/database/client'
-import { expenseParticipants, expenses } from '../../../../database/schema'
+import { expenseParticipants, expenses } from '~~/server/database/schema'
 
 export default defineEventHandler(async (event) => {
   const slug = getRouterParam(event, 'slug')!

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

@@ -1,5 +1,5 @@
-import { useDb } from '../../../database/client'
+import { useDb } from '~~/server/database/client'
-import { participants } from '../../../database/schema'
+import { participants } from '~~/server/database/schema'
 
 export default defineEventHandler(async (event) => {
   const slug = getRouterParam(event, 'slug')!

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

@@ -0,0 +1,25 @@
+import { and, eq } from 'drizzle-orm'
+import { useDb } from '~~/server/database/client'
+import { expenseParticipants, expenses, participants } from '~~/server/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(participants).where(and(eq(participants.id, id), eq(participants.potSlug, slug)))
+  if (!existing) {
+    throw createError({ statusCode: 404, statusMessage: 'Participant not found' })
+  }
+
+  const [asPayer] = await db.select().from(expenses).where(eq(expenses.payerId, id)).limit(1)
+  const [asSplit] = await db.select().from(expenseParticipants).where(eq(expenseParticipants.participantId, id)).limit(1)
+  if (asPayer || asSplit) {
+    throw createError({ statusCode: 409, statusMessage: 'Cannot remove a participant with expenses or payments' })
+  }
+
+  await db.delete(participants).where(eq(participants.id, id))
+
+  return { success: true }
+})

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

@@ -1,7 +1,7 @@
 import { and, eq } from 'drizzle-orm'
-import { isValidPaymentLink } from '../../../../../shared/utils/paymentLink'
+import { isValidPaymentLink } from '~~/shared/utils/paymentLink'
-import { useDb } from '../../../../database/client'
+import { useDb } from '~~/server/database/client'
-import { participants } from '../../../../database/schema'
+import { participants } from '~~/server/database/schema'
 
 export default defineEventHandler(async (event) => {
   const slug = getRouterParam(event, 'slug')!

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

@@ -1,5 +1,5 @@
-import { useDb } from '../../../database/client'
+import { useDb } from '~~/server/database/client'
-import { expenseParticipants, expenses } from '../../../database/schema'
+import { expenseParticipants, expenses } from '~~/server/database/schema'
 
 export default defineEventHandler(async (event) => {
   const slug = getRouterParam(event, 'slug')!
@@ -27,7 +27,7 @@ export default defineEventHandler(async (event) => {
   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 })
+  await db.insert(expenseParticipants).values({ expenseId: payment!.id, participantId: toId })
 
   return { ...payment, participantIds: [toId] }
 })

shared/utils/balances.ts

@@ -44,8 +44,8 @@ function simplifyDebts(netBalances: Record<ParticipantId, number>): Settlement[]
   let di = 0
 
   while (ci < creditors.length && di < debtors.length) {
-    const creditor = creditors[ci]
+    const creditor = creditors[ci]!
-    const debtor = debtors[di]
+    const debtor = debtors[di]!
     const amount = Math.min(creditor.amount, debtor.amount)
 
     if (amount > 0) {

test/api/pots.test.ts

@@ -173,4 +173,26 @@ describe('Pot API', async () => {
       $fetch(`/api/pots/${pot.slug}/participants/${alice.id}`, { method: 'PATCH', body: { paymentLink: 'javascript:alert(1)' } }),
     ).rejects.toMatchObject({ statusCode: 400 })
   })
+
+  it('removes a participant without expenses but blocks removing one with expenses', async () => {
+    const pot = await $fetch('/api/pots', { method: 'POST', body: { name: 'Ski Trip', currency: 'EUR', creatorName: 'Alice' } })
+    const alice = pot.creator
+    const bob = await $fetch(`/api/pots/${pot.slug}/participants`, { method: 'POST', body: { name: 'Bob' } })
+
+    await $fetch(`/api/pots/${pot.slug}/expenses`, {
+      method: 'POST',
+      body: { description: 'Lift pass', amountCents: 1000, payerId: alice.id, participantIds: [alice.id, bob.id] },
+    })
+
+    await expect(
+      $fetch(`/api/pots/${pot.slug}/participants/${bob.id}`, { method: 'DELETE' }),
+    ).rejects.toMatchObject({ statusCode: 409 })
+
+    const carol = await $fetch(`/api/pots/${pot.slug}/participants`, { method: 'POST', body: { name: 'Carol' } })
+    const result = await $fetch(`/api/pots/${pot.slug}/participants/${carol.id}`, { method: 'DELETE' })
+    expect(result.success).toBe(true)
+
+    const fetched = await $fetch(`/api/pots/${pot.slug}`)
+    expect(fetched.participants.map(p => p.id)).not.toContain(carol.id)
+  })
 })