🐛 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">