🎉 init

2026-07-01 15:43:18 +02:00
commit 2f492c55be
64 changed files with 11645 additions and 0 deletions
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+const route = useRoute()
+const slug = route.params.slug as string
+
+const names = ref([''])
+const saving = ref(false)
+
+function addRow() {
+  names.value.push('')
+}
+
+async function continueToPot() {
+  saving.value = true
+  const toAdd = names.value.map(n => n.trim()).filter(Boolean)
+  try {
+    for (const participantName of toAdd) {
+      await $fetch(`/api/pots/${slug}/participants`, {
+        method: 'POST',
+        body: { name: participantName },
+      })
+    }
+  }
+  finally {
+    await navigateTo(`/p/${slug}`)
+  }
+}
+
+function skip() {
+  navigateTo(`/p/${slug}`)
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div class="space-y-1 text-center">
+      <div class="text-3xl">
+        👋
+      </div>
+      <h1 class="text-xl font-bold text-stone-900 dark:text-stone-100">
+        Add the rest of the group
+      </h1>
+      <p class="text-sm text-stone-500 dark:text-stone-400">
+        Add everyone else's name now, or skip and add them later from settings.
+      </p>
+    </div>
+
+    <div class="space-y-2">
+      <input
+        v-for="(_, index) in names"
+        :key="index"
+        v-model="names[index]"
+        type="text"
+        class="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-900 dark:text-stone-100 dark:placeholder:text-stone-500 dark:focus:ring-orange-900"
+        placeholder="Participant name"
+      >
+    </div>
+
+    <button
+      type="button"
+      class="w-full rounded-xl border border-dashed border-stone-300 px-4 py-2 text-sm font-medium text-stone-600 transition-colors hover:border-orange-300 hover:text-orange-600 dark:border-stone-700 dark:text-stone-400 dark:hover:border-orange-700 dark:hover:text-orange-400"
+      @click="addRow"
+    >
+      + Add another
+    </button>
+
+    <div class="flex gap-3">
+      <button
+        type="button"
+        class="flex-1 rounded-xl border border-stone-300 px-4 py-2 font-medium text-stone-700 dark:border-stone-700 dark:text-stone-300"
+        @click="skip"
+      >
+        Skip
+      </button>
+      <button
+        type="button"
+        :disabled="saving"
+        class="flex-1 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"
+        @click="continueToPot"
+      >
+        {{ saving ? 'Saving…' : 'Continue' }}
+      </button>
+    </div>
+  </div>
+</template>