✨ move tabs into own pages

app/components/BalanceSummary.vue

@@ -14,6 +14,7 @@ const emit = defineEmits<{ settled: []; updated: [] }>();
 
 const { lastLink, rememberLink } = usePaymentLinkCache();
 
+const showSettlements = ref(false);
 const settlingKey = ref<string | null>(null);
 const editingId = ref<number | null>(null);
 const editValue = ref('');
@@ -200,17 +201,33 @@ async function markSettled(settlement: SettlementView) {
     </ul>
 
     <div v-if="participants.length > 0" class="space-y-2">
-      <h2 class="text-sm font-medium text-orange-600 dark:text-orange-400">
-        Suggested payments
-      </h2>
+      <button
+        type="button"
+        class="flex w-full items-center justify-between gap-2 text-sm font-medium text-orange-600 dark:text-orange-400"
+        @click="showSettlements = !showSettlements"
+      >
+        <span>Suggested payments</span>
+        <svg
+          class="h-4 w-4 shrink-0 transition-transform"
+          :class="{ 'rotate-180': showSettlements }"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.17l3.71-3.94a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </button>
 
       <p
-        v-if="settlements.length === 0"
+        v-if="showSettlements && 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">
+      <ul v-else-if="showSettlements" class="space-y-2">
         <li
           v-for="settlement in settlements"
           :key="keyOf(settlement)"