🐛 add env to useDb and apply prettier

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

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

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

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

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

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