🎉 init

2026-07-01 15:43:18 +02:00
commit 2f492c55be
64 changed files with 11645 additions and 0 deletions
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { PotView } from '~/types'
+
+const route = useRoute()
+const slug = route.params.slug as string
+
+const { data, refresh, error } = await useFetch<PotView>(`/api/pots/${slug}`)
+
+const adding = ref(false)
+
+async function addParticipant(participantName: string) {
+  adding.value = true
+  try {
+    await $fetch(`/api/pots/${slug}/participants`, { method: 'POST', body: { name: participantName } })
+    await refresh()
+  }
+  finally {
+    adding.value = false
+  }
+}
+</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>
+
+  <div v-else-if="data" class="space-y-6">
+    <div class="flex items-center gap-2">
+      <NuxtLink
+        :to="`/p/${slug}`"
+        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="Back to Pot"
+      >
+        <svg class="h-4.5 w-4.5" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 0 1 0 1.06L9.06 10l3.73 3.71a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
+        </svg>
+      </NuxtLink>
+      <div>
+        <h1 class="text-lg font-bold text-stone-900 dark:text-stone-100">
+          Pot settings
+        </h1>
+        <p class="text-sm text-stone-500 dark:text-stone-400">
+          {{ data.pot.name }} · {{ data.pot.currency }}
+        </p>
+      </div>
+    </div>
+
+    <section class="space-y-3">
+      <h2 class="text-sm font-semibold uppercase tracking-wide text-stone-500 dark:text-stone-400">
+        Participants
+      </h2>
+      <ul class="space-y-2">
+        <li
+          v-for="participant in data.participants"
+          :key="participant.id"
+          class="flex items-center gap-3 rounded-2xl border border-stone-200 bg-white p-3 shadow-sm dark:border-stone-800 dark:bg-stone-900"
+        >
+          <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-orange-100 text-sm font-semibold text-orange-700 dark:bg-orange-900/40 dark:text-orange-300">
+            {{ participant.name.trim().charAt(0).toUpperCase() || '?' }}
+          </div>
+          <span class="font-medium text-stone-900 dark:text-stone-100">{{ participant.name }}</span>
+        </li>
+        <li v-if="data.participants.length === 0" class="rounded-2xl border border-dashed border-stone-300 p-4 text-center text-sm text-stone-500 dark:border-stone-700 dark:text-stone-400">
+          No one's in this Pot yet.
+        </li>
+      </ul>
+    </section>
+
+    <section class="space-y-3 rounded-2xl border border-stone-200 bg-white p-4 shadow-sm dark:border-stone-800 dark:bg-stone-900">
+      <h2 class="text-sm font-semibold uppercase tracking-wide text-stone-500 dark:text-stone-400">
+        Add a participant
+      </h2>
+      <NameForm
+        title="Name"
+        :button-label="adding ? 'Adding…' : 'Add'"
+        @submit="addParticipant"
+      />
+    </section>
+  </div>
+</template>