🎉 init

2026-07-01 15:43:18 +02:00
commit 2f492c55be
64 changed files with 11645 additions and 0 deletions
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+const { name, setName } = useIdentity()
+const { pots: visitedPots } = useVisitedPots()
+
+const potName = ref('')
+const currency = ref('EUR')
+const creating = ref(false)
+const error = ref('')
+
+const currencies = ['EUR', 'USD', 'GBP', 'CHF']
+
+async function createPot() {
+  if (!potName.value.trim()) return
+  creating.value = true
+  error.value = ''
+  try {
+    const pot = await $fetch('/api/pots', {
+      method: 'POST',
+      body: { name: potName.value.trim(), currency: currency.value, creatorName: name.value },
+    })
+    await navigateTo(`/p/${pot.slug}/setup`)
+  }
+  catch {
+    error.value = 'Could not create the Pot. Please try again.'
+  }
+  finally {
+    creating.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-8">
+    <div class="space-y-1 text-center">
+      <div class="text-4xl">
+        🍯
+      </div>
+      <h1 class="text-2xl font-bold text-stone-900 dark:text-stone-100">
+        Splitt the Bill
+      </h1>
+      <p class="text-sm text-stone-500 dark:text-stone-400">
+        Track shared costs with friends, the easy way.
+      </p>
+    </div>
+
+    <section v-if="visitedPots.length" class="space-y-2">
+      <h2 class="text-sm font-semibold text-stone-500 dark:text-stone-400">
+        Your Pots
+      </h2>
+      <ul class="space-y-2">
+        <li v-for="pot in visitedPots" :key="pot.slug">
+          <NuxtLink
+            :to="`/p/${pot.slug}`"
+            class="flex items-center justify-between gap-3 rounded-2xl border border-stone-200 bg-white p-3 shadow-sm transition-colors hover:border-orange-300 dark:border-stone-800 dark:bg-stone-900 dark:hover:border-orange-700"
+          >
+            <span class="font-medium text-stone-900 dark:text-stone-100">{{ pot.name }}</span>
+            <span class="shrink-0 text-xs font-medium text-stone-400 dark:text-stone-500">{{ pot.currency }}</span>
+          </NuxtLink>
+        </li>
+      </ul>
+    </section>
+
+    <NameForm v-if="!name" @submit="setName" />
+
+    <form v-else class="space-y-4 rounded-2xl border border-stone-200 bg-white p-5 shadow-sm dark:border-stone-800 dark:bg-stone-900" @submit.prevent="createPot">
+      <p class="text-sm text-stone-600 dark:text-stone-400">
+        Hi {{ name }}! Create a new Pot to start splitting costs.
+      </p>
+
+      <div>
+        <label for="pot-name" class="block text-sm font-medium text-stone-700 dark:text-stone-300">Pot name</label>
+        <input
+          id="pot-name"
+          v-model="potName"
+          type="text"
+          required
+          class="mt-1 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-950 dark:text-stone-100 dark:placeholder:text-stone-500 dark:focus:ring-orange-900"
+          placeholder="Weekend in Lisbon"
+        >
+      </div>
+
+      <div>
+        <label for="currency" class="block text-sm font-medium text-stone-700 dark:text-stone-300">Currency</label>
+        <select
+          id="currency"
+          v-model="currency"
+          class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base text-stone-900 shadow-sm 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:focus:ring-orange-900"
+        >
+          <option v-for="code in currencies" :key="code" :value="code">
+            {{ code }}
+          </option>
+        </select>
+      </div>
+
+      <p v-if="error" class="text-sm text-rose-600 dark:text-rose-400">
+        {{ error }}
+      </p>
+
+      <button
+        type="submit"
+        :disabled="creating"
+        class="w-full rounded-xl bg-orange-500 px-4 py-2 font-medium text-white shadow-sm transition-colors hover:bg-orange-600 active:bg-orange-600 disabled:opacity-50"
+      >
+        {{ creating ? 'Creating…' : 'Create Pot' }}
+      </button>
+    </form>
+  </div>
+</template>