feat(treasury): separate receipts from income and fit finance on a phone

A receipt or payment only reduces the party balance, while an income or expense keeps both amounts. Finance screens stack into cards on a phone so the forms and lists stay readable.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/components/treasury/TreasuryNav.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { Segmented as ASegmented } from 'ant-design-vue';
 import { treasurySectionAllowed, type TreasurySectionKey } from '@mento/shared';
@@ -8,6 +8,7 @@ import { useAuthStore } from '@/stores/auth';
 const route = useRoute();
 const router = useRouter();
 const auth = useAuthStore();
+const scroller = ref<HTMLElement | null>(null);
 
 const links = computed(() => {
   const role = auth.user?.role;
@@ -41,6 +42,17 @@ const active = computed(() => {
   return '/finance';
 });
 
+watch(
+  active,
+  async () => {
+    await nextTick();
+    scroller.value
+      ?.querySelector('.ant-segmented-item-selected')
+      ?.scrollIntoView({ inline: 'center', block: 'nearest' });
+  },
+  { immediate: true },
+);
+
 function onChange(value: string | number) {
   const next = String(value);
   if (next && next !== route.path) void router.push(next);
@@ -49,6 +61,7 @@ function onChange(value: string | number) {
 
 <template>
   <div
+    ref="scroller"
     :style="{
       width: '100%',
       overflowX: 'auto',