🐛 add env to useDb and apply prettier

app/components/BalanceSummary.vue

@@ -1,92 +1,97 @@
 <script setup lang="ts">
-import type { ParticipantView, SettlementView } from '../types'
-import { isValidPaymentLink } from '~~/shared/utils/paymentLink'
+import type { ParticipantView, SettlementView } from '../types';
+import { isValidPaymentLink } from '~~/shared/utils/paymentLink';
 
 const props = defineProps<{
-  slug: string
-  participants: ParticipantView[]
-  netBalances: Record<number, number>
-  settlements: SettlementView[]
-  currency: string
-}>()
+  slug: string;
+  participants: ParticipantView[];
+  netBalances: Record<number, number>;
+  settlements: SettlementView[];
+  currency: string;
+}>();
 
-const emit = defineEmits<{ settled: [], updated: [] }>()
+const emit = defineEmits<{ settled: []; updated: [] }>();
 
-const { lastLink, rememberLink } = usePaymentLinkCache()
+const { lastLink, rememberLink } = usePaymentLinkCache();
 
-const settlingKey = ref<string | null>(null)
-const editingId = ref<number | null>(null)
-const editValue = ref('')
-const editError = ref('')
-const savingLink = ref(false)
+const settlingKey = ref<string | null>(null);
+const editingId = ref<number | null>(null);
+const editValue = ref('');
+const editError = ref('');
+const savingLink = ref(false);
 
 function nameOf(id: number) {
-  return props.participants.find(p => p.id === id)?.name ?? 'Unknown'
+  return props.participants.find((p) => p.id === id)?.name ?? 'Unknown';
 }
 
 function paymentLinkOf(id: number) {
-  return props.participants.find(p => p.id === id)?.paymentLink || null
+  return props.participants.find((p) => p.id === id)?.paymentLink || null;
 }
 
 function initialOf(participantName: string) {
-  return participantName.trim().charAt(0).toUpperCase() || '?'
+  return participantName.trim().charAt(0).toUpperCase() || '?';
 }
 
 function keyOf(settlement: SettlementView) {
-  return `${settlement.fromId}-${settlement.toId}-${settlement.amountCents}`
+  return `${settlement.fromId}-${settlement.toId}-${settlement.amountCents}`;
 }
 
 function startEdit(participant: ParticipantView) {
-  editingId.value = participant.id
-  editValue.value = participant.paymentLink ?? lastLink.value ?? ''
-  editError.value = ''
+  editingId.value = participant.id;
+  editValue.value = participant.paymentLink ?? lastLink.value ?? '';
+  editError.value = '';
 }
 
 function cancelEdit() {
-  editingId.value = null
-  editError.value = ''
+  editingId.value = null;
+  editError.value = '';
 }
 
 async function saveEdit(participant: ParticipantView) {
-  const trimmed = editValue.value.trim()
+  const trimmed = editValue.value.trim();
   if (trimmed && !isValidPaymentLink(trimmed)) {
-    editError.value = 'Enter a valid link starting with http:// or https://.'
-    return
+    editError.value = 'Enter a valid link starting with http:// or https://.';
+    return;
   }
-  savingLink.value = true
+  savingLink.value = true;
   try {
     await $fetch(`/api/pots/${props.slug}/participants/${participant.id}`, {
       method: 'PATCH',
       body: { paymentLink: trimmed },
-    })
-    if (trimmed) rememberLink(trimmed)
-    editingId.value = null
-    emit('updated')
-  }
-  finally {
-    savingLink.value = false
+    });
+    if (trimmed) rememberLink(trimmed);
+    editingId.value = null;
+    emit('updated');
+  } finally {
+    savingLink.value = false;
   }
 }
 
 async function markSettled(settlement: SettlementView) {
-  const key = keyOf(settlement)
-  settlingKey.value = key
+  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
+      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">
+    <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>
 
@@ -100,12 +105,21 @@ async function markSettled(settlement: SettlementView) {
           <button
             type="button"
             class="flex min-w-0 items-center gap-3 text-left"
-            @click="editingId === participant.id ? cancelEdit() : startEdit(participant)"
+            @click="
+              editingId === participant.id
+                ? cancelEdit()
+                : startEdit(participant)
+            "
           >
-            <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"
+            >
               {{ initialOf(participant.name) }}
             </div>
-            <span class="truncate font-medium text-stone-900 dark:text-stone-100">{{ participant.name }}</span>
+            <span
+              class="truncate font-medium text-stone-900 dark:text-stone-100"
+              >{{ participant.name }}</span
+            >
           </button>
           <div class="flex shrink-0 items-center gap-3">
             <a
@@ -121,23 +135,37 @@ async function markSettled(settlement: SettlementView) {
             <span
               class="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,
+                '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) }}
+                {{ (netBalances[participant.id] ?? 0) > 0 ? '+' : '−'
+                }}{{
+                  formatCurrency(
+                    Math.abs(netBalances[participant.id] ?? 0),
+                    currency,
+                  )
+                }}
               </template>
             </span>
           </div>
         </div>
 
-        <div v-if="editingId === participant.id" class="mt-3 space-y-2 border-t border-stone-100 pt-3 dark:border-stone-800">
-          <label class="block text-xs font-medium text-stone-500 dark:text-stone-400">
+        <div
+          v-if="editingId === participant.id"
+          class="mt-3 space-y-2 border-t border-stone-100 pt-3 dark:border-stone-800"
+        >
+          <label
+            class="block text-xs font-medium text-stone-500 dark:text-stone-400"
+          >
             Payment link for {{ participant.name }}
           </label>
           <div class="flex gap-2">
@@ -147,7 +175,7 @@ async function markSettled(settlement: SettlementView) {
               placeholder="https://paypal.me/yourname"
               class="block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-sm 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"
               @keyup.enter="saveEdit(participant)"
-            >
+            />
             <button
               type="button"
               :disabled="savingLink"
@@ -176,7 +204,10 @@ async function markSettled(settlement: SettlementView) {
         Suggested payments
       </h2>
 
-      <p v-if="settlements.length === 0" class="text-sm text-stone-500 dark:text-stone-400">
+      <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">
@@ -187,22 +218,42 @@ async function markSettled(settlement: SettlementView) {
         >
           <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">
+              <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>
+              <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
+                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">
+              <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>
+              <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">
+            <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>
@@ -223,7 +274,9 @@ async function markSettled(settlement: SettlementView) {
               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' }}
+              {{
+                settlingKey === keyOf(settlement) ? 'Marking…' : 'Mark as paid'
+              }}
             </button>
           </div>
         </li>