🐛 fix typecheck and cleanup imports

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