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

app/composables/useConfirm.ts

@@ -0,0 +1,8 @@
+export function useConfirm() {
+  function confirm(message: string) {
+    if (!import.meta.client) return false;
+    return window.confirm(message);
+  }
+
+  return { confirm };
+}

app/composables/useIdentity.ts

@@ -1,21 +1,14 @@
-import { readIdentity, writeIdentity } from '../utils/identity';
-
 export function useIdentity() {
-  const name = useState<string | null>('identity-name', () => null);
-  const loaded = useState('identity-loaded', () => false);
-
-  if (import.meta.client && !loaded.value) {
-    const identity = readIdentity(window.localStorage);
-    name.value = identity?.name ?? null;
-    loaded.value = true;
-  }
+  const name = useCookie<string | null>('stb-identity-name', {
+    default: () => null,
+    maxAge: 60 * 60 * 24 * 365,
+    sameSite: 'lax',
+  });
 
   function setName(newName: string) {
     const trimmed = newName.trim();
     if (!trimmed) return;
     name.value = trimmed;
-    if (import.meta.client)
-      writeIdentity(window.localStorage, { name: trimmed });
   }
 
   return { name, setName };

app/pages/p/[slug].vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import type { PotView } from '~/types';
+
+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 me = computed(() =>
+  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 },
+);
+
+const linkCopied = ref(false);
+
+// Settings/setup keep their own dedicated layout; only the People &
+// balances / Expenses tabs share this header.
+const isPotTab = computed(
+  () => route.path === `/p/${slug}` || route.path === `/p/${slug}/expenses`,
+);
+
+async function addMyself() {
+  if (!name.value) return;
+  await $fetch(`/api/pots/${slug}/participants`, {
+    method: 'POST',
+    body: { name: name.value },
+  });
+  await refresh();
+}
+
+async function copyLink() {
+  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>
+    <NuxtLink to="/" class="font-medium text-orange-600 dark:text-orange-400">
+      Go home
+    </NuxtLink>
+  </div>
+
+  <NameForm
+    v-else-if="!name && isPotTab"
+    title="What's your name?"
+    @submit="setName"
+  />
+
+  <div v-else-if="data" class="space-y-6">
+    <template v-if="isPotTab">
+      <NuxtLink
+        to="/"
+        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"
+          />
+        </svg>
+        All Pots
+      </NuxtLink>
+
+      <div class="flex items-start justify-between gap-2">
+        <div>
+          <h1 class="text-xl font-bold text-stone-900 dark:text-stone-100">
+            {{ data.pot.name }}
+          </h1>
+          <p class="text-sm text-stone-500 dark:text-stone-400">
+            {{ data.pot.currency }}
+          </p>
+        </div>
+        <div class="flex shrink-0 gap-2">
+          <button
+            type="button"
+            class="rounded-xl border border-stone-300 px-3 py-1.5 text-sm font-medium text-stone-700 transition-colors hover:border-orange-300 hover:text-orange-600 dark:border-stone-700 dark:text-stone-300 dark:hover:border-orange-700 dark:hover:text-orange-400"
+            @click="copyLink"
+          >
+            {{ linkCopied ? 'Copied!' : 'Copy link' }}
+          </button>
+          <NuxtLink
+            :to="`/p/${slug}/settings`"
+            class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-stone-300 text-stone-600 transition-colors hover:border-orange-300 hover:text-orange-600 dark:border-stone-700 dark:text-stone-300 dark:hover:border-orange-700 dark:hover:text-orange-400"
+            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"
+              />
+            </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"
+      >
+        <p class="mb-2 text-stone-700 dark:text-stone-300">
+          You're not in this Pot's participant list yet.
+        </p>
+        <button
+          type="button"
+          class="rounded-xl bg-orange-500 px-3 py-1.5 font-medium text-white shadow-sm transition-colors hover:bg-orange-600"
+          @click="addMyself"
+        >
+          Add myself as {{ name }}
+        </button>
+      </div>
+
+      <div
+        class="grid grid-cols-2 gap-1 rounded-xl bg-stone-100 p-1 dark:bg-stone-900"
+      >
+        <NuxtLink
+          :to="`/p/${slug}`"
+          class="rounded-lg py-2 text-center text-sm font-medium transition-colors"
+          :class="
+            route.path === `/p/${slug}`
+              ? 'bg-white text-stone-900 shadow-sm dark:bg-stone-800 dark:text-stone-100'
+              : 'text-stone-500 hover:text-stone-700 dark:text-stone-400 dark:hover:text-stone-200'
+          "
+        >
+          People &amp; balances
+        </NuxtLink>
+        <NuxtLink
+          :to="`/p/${slug}/expenses`"
+          class="rounded-lg py-2 text-center text-sm font-medium transition-colors"
+          :class="
+            route.path === `/p/${slug}/expenses`
+              ? 'bg-white text-stone-900 shadow-sm dark:bg-stone-800 dark:text-stone-100'
+              : 'text-stone-500 hover:text-stone-700 dark:text-stone-400 dark:hover:text-stone-200'
+          "
+        >
+          Expenses
+        </NuxtLink>
+      </div>
+    </template>
+
+    <NuxtPage />
+  </div>
+</template>

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

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { ExpenseView, PotView } from '~/types';
+
+const route = useRoute();
+const slug = route.params.slug as string;
+const { name } = useIdentity();
+const { confirm } = useConfirm();
+
+const { data, refresh } = await useFetch<PotView>(`/api/pots/${slug}`);
+
+const me = computed(() =>
+  data.value?.participants.find(
+    (p) => p.name.toLowerCase() === name.value?.toLowerCase(),
+  ),
+);
+
+const showExpenseForm = ref(false);
+const editingExpense = ref<ExpenseView | null>(null);
+
+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,
+    });
+  } else {
+    await $fetch(`/api/pots/${slug}/expenses`, {
+      method: 'POST',
+      body: payload,
+    });
+  }
+  editingExpense.value = null;
+  showExpenseForm.value = false;
+  await refresh();
+}
+
+function editExpense(expense: ExpenseView) {
+  editingExpense.value = expense;
+  showExpenseForm.value = true;
+}
+
+function newExpense() {
+  editingExpense.value = null;
+  showExpenseForm.value = true;
+}
+
+function cancelExpenseForm() {
+  editingExpense.value = null;
+  showExpenseForm.value = false;
+}
+
+async function removeExpense(id: number) {
+  if (!confirm('Delete this expense?')) return;
+  await $fetch(`/api/pots/${slug}/expenses/${id}`, { method: 'DELETE' });
+  await refresh();
+}
+</script>
+
+<template>
+  <section v-if="data" class="space-y-3">
+    <ExpenseList
+      v-if="!showExpenseForm"
+      :expenses="data.expenses"
+      :participants="data.participants"
+      :currency="data.pot.currency"
+      @edit="editExpense"
+      @remove="removeExpense"
+    />
+
+    <AddExpenseForm
+      v-if="showExpenseForm"
+      :participants="data.participants"
+      :currency="data.pot.currency"
+      :editing="editingExpense"
+      :default-payer-id="me?.id"
+      @submit="submitExpense"
+      @cancel="cancelExpenseForm"
+    />
+
+    <button
+      v-if="!showExpenseForm"
+      type="button"
+      class="w-full rounded-xl bg-orange-500 px-4 py-2 font-medium text-white shadow-sm transition-colors hover:bg-orange-600"
+      @click="newExpense"
+    >
+      + Add expense
+    </button>
+  </section>
+</template>

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

@@ -1,238 +1,22 @@
 <script setup lang="ts">
-import type { ExpenseView, PotView } from '~/types';
+import type { PotView } from '~/types';
 
 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 me = computed(() =>
-  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 },
-);
-
-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();
-}
-
-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,
-    });
-  } else {
-    await $fetch(`/api/pots/${slug}/expenses`, {
-      method: 'POST',
-      body: payload,
-    });
-  }
-  editingExpense.value = null;
-  showExpenseForm.value = false;
-  await refresh();
-}
-
-function editExpense(expense: ExpenseView) {
-  editingExpense.value = expense;
-  showExpenseForm.value = true;
-}
-
-function newExpense() {
-  editingExpense.value = null;
-  showExpenseForm.value = true;
-}
-
-function cancelExpenseForm() {
-  editingExpense.value = null;
-  showExpenseForm.value = false;
-}
-
-async function removeExpense(id: number) {
-  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);
-}
+const { data, refresh } = await useFetch<PotView>(`/api/pots/${slug}`);
 </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>
-    <NuxtLink to="/" class="font-medium text-orange-600 dark:text-orange-400">
-      Go home
-    </NuxtLink>
-  </div>
-
-  <NameForm v-else-if="!name" title="What's your name?" @submit="setName" />
-
-  <div v-else-if="data" class="space-y-6">
-    <NuxtLink
-      to="/"
-      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"
-        />
-      </svg>
-      All Pots
-    </NuxtLink>
-
-    <div class="flex items-start justify-between gap-2">
-      <div>
-        <h1 class="text-xl font-bold text-stone-900 dark:text-stone-100">
-          {{ data.pot.name }}
-        </h1>
-        <p class="text-sm text-stone-500 dark:text-stone-400">
-          {{ data.pot.currency }}
-        </p>
-      </div>
-      <div class="flex shrink-0 gap-2">
-        <button
-          type="button"
-          class="rounded-xl border border-stone-300 px-3 py-1.5 text-sm font-medium text-stone-700 transition-colors hover:border-orange-300 hover:text-orange-600 dark:border-stone-700 dark:text-stone-300 dark:hover:border-orange-700 dark:hover:text-orange-400"
-          @click="copyLink"
-        >
-          {{ linkCopied ? 'Copied!' : 'Copy link' }}
-        </button>
-        <NuxtLink
-          :to="`/p/${slug}/settings`"
-          class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-stone-300 text-stone-600 transition-colors hover:border-orange-300 hover:text-orange-600 dark:border-stone-700 dark:text-stone-300 dark:hover:border-orange-700 dark:hover:text-orange-400"
-          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"
-            />
-          </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"
-    >
-      <p class="mb-2 text-stone-700 dark:text-stone-300">
-        You're not in this Pot's participant list yet.
-      </p>
-      <button
-        type="button"
-        class="rounded-xl bg-orange-500 px-3 py-1.5 font-medium text-white shadow-sm transition-colors hover:bg-orange-600"
-        @click="addMyself"
-      >
-        Add myself as {{ name }}
-      </button>
-    </div>
-
-    <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'
-        "
-        @click="activeTab = 'people'"
-      >
-        People &amp; balances
-      </button>
-      <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'
-        "
-        @click="activeTab = 'expenses'"
-      >
-        Expenses
-      </button>
-    </div>
-
-    <section v-if="activeTab === 'people'">
-      <BalanceSummary
-        :slug="slug"
-        :participants="data.participants"
-        :net-balances="data.netBalances"
-        :settlements="data.settlements"
-        :currency="data.pot.currency"
-        @settled="refresh"
-        @updated="refresh"
-      />
-    </section>
-
-    <section v-else class="space-y-3">
-      <button
-        v-if="!showExpenseForm"
-        type="button"
-        class="w-full rounded-xl bg-orange-500 px-4 py-2 font-medium text-white shadow-sm transition-colors hover:bg-orange-600"
-        @click="newExpense"
-      >
-        + Add expense
-      </button>
-
-      <AddExpenseForm
-        v-if="showExpenseForm"
-        :participants="data.participants"
-        :currency="data.pot.currency"
-        :editing="editingExpense"
-        :default-payer-id="me?.id"
-        @submit="submitExpense"
-        @cancel="cancelExpenseForm"
-      />
-
-      <ExpenseList
-        v-else
-        :expenses="data.expenses"
-        :participants="data.participants"
-        :currency="data.pot.currency"
-        @edit="editExpense"
-        @remove="removeExpense"
-      />
-    </section>
-  </div>
+  <section v-if="data">
+    <BalanceSummary
+      :slug="slug"
+      :participants="data.participants"
+      :net-balances="data.netBalances"
+      :settlements="data.settlements"
+      :currency="data.pot.currency"
+      @settled="refresh"
+      @updated="refresh"
+    />
+  </section>
 </template>

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

@@ -5,6 +5,7 @@ const route = useRoute();
 const slug = route.params.slug as string;
 
 const { data, refresh, error } = await useFetch<PotView>(`/api/pots/${slug}`);
+const { confirm } = useConfirm();
 
 const adding = ref(false);
 const removingId = ref<number | null>(null);
@@ -24,7 +25,7 @@ async function addParticipant(participantName: string) {
 }
 
 async function removeParticipant(participant: { id: number; name: string }) {
-  if (!window.confirm(`Remove ${participant.name} from this Pot?`)) return;
+  if (!confirm(`Remove ${participant.name} from this Pot?`)) return;
 
   removeError.value = '';
   removingId.value = participant.id;

app/utils/identity.test.ts

@@ -1,47 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { readIdentity, writeIdentity } from './identity';
-
-function createMockStorage(): Storage {
-  const store = new Map<string, string>();
-  return {
-    getItem: (key: string) => store.get(key) ?? null,
-    setItem: (key: string, value: string) => void store.set(key, value),
-    removeItem: (key: string) => void store.delete(key),
-    clear: () => store.clear(),
-    key: () => null,
-    get length() {
-      return store.size;
-    },
-  };
-}
-
-describe('identity storage', () => {
-  it('returns null when nothing is stored', () => {
-    expect(readIdentity(createMockStorage())).toBeNull();
-  });
-
-  it('round-trips a written identity', () => {
-    const storage = createMockStorage();
-    writeIdentity(storage, { name: 'Alice' });
-    expect(readIdentity(storage)).toEqual({ name: 'Alice' });
-  });
-
-  it('ignores malformed JSON', () => {
-    const storage = createMockStorage();
-    storage.setItem('stb:identity', '{not json');
-    expect(readIdentity(storage)).toBeNull();
-  });
-
-  it('ignores an empty stored name', () => {
-    const storage = createMockStorage();
-    storage.setItem('stb:identity', JSON.stringify({ name: '   ' }));
-    expect(readIdentity(storage)).toBeNull();
-  });
-
-  it('overwrites a previously stored identity', () => {
-    const storage = createMockStorage();
-    writeIdentity(storage, { name: 'Alice' });
-    writeIdentity(storage, { name: 'Bob' });
-    expect(readIdentity(storage)).toEqual({ name: 'Bob' });
-  });
-});

app/utils/identity.ts

@@ -1,25 +0,0 @@
-const STORAGE_KEY = 'stb:identity';
-
-export interface Identity {
-  name: string;
-}
-
-type StorageLike = Pick<Storage, 'getItem' | 'setItem'>;
-
-export function readIdentity(storage: StorageLike): Identity | null {
-  const raw = storage.getItem(STORAGE_KEY);
-  if (!raw) return null;
-
-  try {
-    const parsed = JSON.parse(raw);
-    if (typeof parsed?.name !== 'string' || !parsed.name.trim()) return null;
-
-    return { name: parsed.name };
-  } catch {
-    return null;
-  }
-}
-
-export function writeIdentity(storage: StorageLike, identity: Identity): void {
-  storage.setItem(STORAGE_KEY, JSON.stringify(identity));
-}

server/database/client.ts

@@ -5,7 +5,7 @@ import type { H3Event } from 'h3';
 
 let instance: ReturnType<typeof drizzle<typeof schema>> | undefined;
 
-export function useDb(event: H3Event) {
+export function useDb(event?: H3Event) {
   if (!instance) {
     const config = useRuntimeConfig(event);
     const client = createClient({

server/plugins/db-migrate.ts

@@ -2,7 +2,7 @@ import { migrate } from 'drizzle-orm/libsql/migrator';
 import { useDb } from '../database/client';
 
 export default defineNitroPlugin(async () => {
-  await migrate(useDb(event), {
+  await migrate(useDb(), {
     migrationsFolder: 'server/database/migrations',
   });
 });

server/utils/pots.ts

@@ -18,7 +18,7 @@ export interface ExpenseWithDetails {
 }
 
 export async function getPotOrThrow(slug: string) {
-  const db = useDb(event);
+  const db = useDb();
   const [pot] = await db.select().from(pots).where(eq(pots.slug, slug));
   if (!pot) {
     throw createError({ statusCode: 404, statusMessage: 'Pot not found' });
@@ -27,14 +27,14 @@ export async function getPotOrThrow(slug: string) {
 }
 
 export async function getParticipants(slug: string) {
-  const db = useDb(event);
+  const db = useDb();
   return db.select().from(participants).where(eq(participants.potSlug, slug));
 }
 
 export async function getExpensesWithParticipants(
   slug: string,
 ): Promise<ExpenseWithDetails[]> {
-  const db = useDb(event);
+  const db = useDb();
   const expenseRows = await db
     .select()
     .from(expenses)

shared/utils/money.ts

@@ -6,8 +6,16 @@ export function fromCents(cents: number): number {
   return cents / 100;
 }
 
+const LOCALE_BY_CURRENCY: Record<string, string> = {
+  EUR: 'de-DE',
+  USD: 'en-US',
+  GBP: 'en-GB',
+  CHF: 'fr-CH',
+};
+
 export function formatCurrency(cents: number, currency: string): string {
-  return new Intl.NumberFormat(undefined, {
+  const locale = LOCALE_BY_CURRENCY[currency] ?? 'de-DE';
+  return new Intl.NumberFormat(locale, {
     style: 'currency',
     currency,
   }).format(fromCents(cents));