splitt-the-bill/app/pages/p/[slug].vue

<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>