Guest Profiles Implementation Plan

convex/
├── schema.ts                     # MODIFY — add guestProfiles, guestReactions
└── functions/
    └── profiles.ts              # CREATE — profile CRUD, OAuth linkage, reactions

apps/frontend/
├── app/[locale]/
│   └── onboard/
│       └── page.tsx             # CREATE — profile creation form (?tableId=&token=)
├── components/
│   ├── profile/
│   │   ├── profile-form.tsx     # CREATE — nickname, origin, mood form
│   │   ├── mood-selector.tsx    # CREATE — mood tag multi-select
│   │   ├── guest-wall.tsx       # CREATE — who's here grid
│   │   └── reaction-button.tsx   # CREATE — wave/cheers/heart buttons
│   └── table/
│       └── table-tabs.tsx        # MODIFY — add Guest Wall tab

cat convex/schema.ts

guestProfiles: defineTable({
  reservationId: v.optional(v.id("reservations")),
  tableId: v.optional(v.id("tables")),
  token: v.string(),
  googleId: v.optional(v.string()),
  facebookId: v.optional(v.string()),
  email: v.optional(v.string()),
  avatarUrl: v.optional(v.string()),
  nickname: v.string(),
  origin: v.string(),
  moodTags: v.array(v.string()),
  bio: v.optional(v.string()),
  showDate: v.string(),
  checkedIn: v.boolean(),
  createdAt: v.number(),
  updatedAt: v.number(),
})
  .index("by_reservation", ["reservationId"])
  .index("by_show_date", ["showDate"])
  .index("by_token", ["token"])
  .index("by_google_id", ["googleId"])
  .index("by_facebook_id", ["facebookId"]),
 
guestReactions: defineTable({
  fromProfileId: v.id("guestProfiles"),
  toProfileId: v.id("guestProfiles"),
  reactionType: v.union(v.literal("WAVE"), v.literal("CHEERS"), v.literal("HEART")),
  showDate: v.string(),
  createdAt: v.number(),
})
  .index("by_to_profile", ["toProfileId"])
  .index("by_from_profile", ["fromProfileId"])
  .index("by_show_date", ["showDate"]),

git add convex/schema.ts
git commit -m "feat(profiles): add guestProfiles and guestReactions tables"

import { query, mutation } from "../_generated/server";
import { v } from "convex/values";
import { Id } from "~/convex/_generated/dataModel";
 
export const create = mutation({
  args: {
    tableId: v.optional(v.id("tables")),
    token: v.string(),
    nickname: v.string(),
    origin: v.string(),
    moodTags: v.array(v.string()),
    googleId: v.optional(v.string()),
    facebookId: v.optional(v.string()),
    email: v.optional(v.string()),
    avatarUrl: v.optional(v.string()),
  },
  handler: async (ctx, args) => {
    const now = Date.now();
    const today = new Date().toISOString().split("T")[0];
    return await ctx.db.insert("guestProfiles", {
      tableId: args.tableId,
      token: args.token,
      nickname: args.nickname,
      origin: args.origin,
      moodTags: args.moodTags,
      googleId: args.googleId,
      facebookId: args.facebookId,
      email: args.email,
      avatarUrl: args.avatarUrl,
      bio: undefined,
      showDate: today,
      checkedIn: false,
      createdAt: now,
      updatedAt: now,
    });
  },
});
 
export const getByToken = query({
  args: { token: v.string() },
  handler: async (ctx, { token }) => {
    const profiles = await ctx.db
      .query("guestProfiles")
      .withIndex("by_token", (q) => q.eq("token", token))
      .first();
    return profiles;
  },
});
 
export const getTonight = query({
  args: {},
  handler: async (ctx) => {
    const today = new Date().toISOString().split("T")[0];
    return await ctx.db
      .query("guestProfiles")
      .withIndex("by_show_date", (q) => q.eq("showDate", today))
      .collect();
  },
});
 
export const sendReaction = mutation({
  args: {
    fromProfileId: v.id("guestProfiles"),
    toProfileId: v.id("guestProfiles"),
    reactionType: v.union(
      v.literal("WAVE"),
      v.literal("CHEERS"),
      v.literal("HEART"),
    ),
  },
  handler: async (ctx, { fromProfileId, toProfileId, reactionType }) => {
    if (fromProfileId === toProfileId) {
      throw new Error("Cannot react to yourself");
    }
    const now = Date.now();
    const today = new Date().toISOString().split("T")[0];
    return await ctx.db.insert("guestReactions", {
      fromProfileId,
      toProfileId,
      reactionType,
      showDate: today,
      createdAt: now,
    });
  },
});
 
export const getReactionsToMe = query({
  args: { profileId: v.id("guestProfiles") },
  handler: async (ctx, { profileId }) => {
    return await ctx.db
      .query("guestReactions")
      .withIndex("by_to_profile", (q) => q.eq("toProfileId", profileId))
      .collect();
  },
});

git add convex/functions/profiles.ts
git commit -m "feat(profiles): add profile CRUD and reaction functions"

"use client";
import { useTranslations } from "next-intl";
 
const MOOD_OPTIONS = [
  { value: "LOOKING_FOR_DATE", labelKey: "moods.lookingForDate" },
  { value: "GET_DRUNK", labelKey: "moods.getDrunk" },
  { value: "FIRST_TIME", labelKey: "moods.firstTime" },
  { value: "REGULAR", labelKey: "moods.regular" },
  { value: "CELEBRATING", labelKey: "moods.celebrating" },
  { value: "GOOD_FRIENDS", labelKey: "moods.goodFriends" },
  { value: "SOLO", labelKey: "moods.solo" },
  { value: "WITH_FAMILY", labelKey: "moods.withFamily" },
];
 
export function MoodSelector({
  selected,
  onChange,
}: {
  selected: string[];
  onChange: (tags: string[]) => void;
}) {
  const t = useTranslations("onboard");
 
  const toggle = (value: string) => {
    if (selected.includes(value)) {
      onChange(selected.filter((s) => s !== value));
    } else if (selected.length < 3) {
      onChange([...selected, value]);
    }
  };
 
  return (
    <div className="flex flex-wrap gap-2">
      {MOOD_OPTIONS.map((opt) => {
        const isSelected = selected.includes(opt.value);
        return (
          <button
            key={opt.value}
            onClick={() => toggle(opt.value)}
            disabled={!isSelected && selected.length >= 3}
            className={`px-3 py-1.5 rounded-full text-sm border transition-colors ${
              isSelected
                ? "bg-accent/20 border-accent text-accent"
                : "bg-surface border-border text-gray-400 hover:border-accent/50 disabled:opacity-30"
            }`}
          >
            {t(opt.labelKey)}
          </button>
        );
      })}
    </div>
  );
}

"use client";
import { useState } from "react";
import { useMutation } from "convex/react";
import { useRouter } from "next/navigation";
import { useQueryState } from "nuqs";
import { useTranslations } from "next-intl";
import { useLocale } from "next-intl";
import { api } from "~/convex/_generated/api";
import { z } from "zod";
import { consola } from "consola";
 
const ProfileFormSchema = z.object({
  nickname: z.string().min(2, "Nickname must be at least 2 characters").max(20, "Nickname must be at most 20 characters"),
  origin: z.string().min(1, "Please enter where you are from"),
  moodTags: z.array(z.string()).max(3),
});
 
export function ProfileForm() {
  const t = useTranslations("onboard");
  const router = useRouter();
  const locale = useLocale();
  const [tableId] = useQueryState("tableId", { defaultValue: "" });
  const [token] = useQueryState("token", { defaultValue: "" });
  const [nickname, setNickname] = useState("");
  const [origin, setOrigin] = useState("");
  const [moodTags, setMoodTags] = useState<string[]>([]);
  const [step, setStep] = useState<"form" | "oauth" | "success">("form");
  const [errors, setErrors] = useState<Record<string, string>>({});
 
  const createProfile = useMutation(api.profiles.create);
 
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrors({});
 
    const parsed = ProfileFormSchema.safeParse({ nickname, origin, moodTags });
    if (!parsed.success) {
      const fieldErrors: Record<string, string> = {};
      parsed.error.errors.forEach((err) => {
        const field = String(err.path[0]);
        fieldErrors[field] = err.message;
      });
      setErrors(fieldErrors);
      return;
    }
 
    try {
      await createProfile({
        tableId: tableId || undefined,
        token: token || "",
        nickname,
        origin,
        moodTags,
      });
      setStep("success");
      setTimeout(() => {
        const redirectUrl = tableId && token
          ? `/${locale}/table?tableId=${tableId}&token=${token}`
          : `/${locale}`;
        router.push(redirectUrl);
      }, 1500);
    } catch (err) {
      consola.error("Failed to create profile", { error: err });
    }
  };
 
  if (step === "success") {
    return (
      <div className="text-center py-12">
        <div className="w-16 h-16 rounded-full bg-accent/20 flex items-center justify-center mx-auto mb-4">
          <svg className="w-8 h-8 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
          </svg>
        </div>
        <h2 className="text-2xl font-serif text-accent mb-2">{t("welcome")}</h2>
        <p className="text-gray-400 mt-2">{t("redirecting")}</p>
      </div>
    );
  }
 
  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div>
        <label className="block text-sm font-medium text-gray-300 mb-2">
          {t("nicknameLabel")}
        </label>
        <input
          required
          minLength={2}
          maxLength={20}
          value={nickname}
          onChange={(e) => setNickname(e.target.value)}
          className={`w-full bg-surface border rounded-lg px-4 py-3 text-white ${
            errors.nickname ? "border-red-500" : "border-border"
          }`}
          placeholder={t("nicknamePlaceholder")}
        />
        {errors.nickname && (
          <p className="text-red-500 text-sm mt-1">{errors.nickname}</p>
        )}
      </div>
 
      <div>
        <label className="block text-sm font-medium text-gray-300 mb-2">
          {t("originLabel")}
        </label>
        <input
          required
          value={origin}
          onChange={(e) => setOrigin(e.target.value)}
          className={`w-full bg-surface border rounded-lg px-4 py-3 text-white ${
            errors.origin ? "border-red-500" : "border-border"
          }`}
          placeholder={t("originPlaceholder")}
        />
        {errors.origin && (
          <p className="text-red-500 text-sm mt-1">{errors.origin}</p>
        )}
      </div>
 
      <div>
        <label className="block text-sm font-medium text-gray-300 mb-2">
          {t("moodLabel")}
        </label>
        <MoodSelector selected={moodTags} onChange={setMoodTags} />
      </div>
 
      {/* OAuth section */}
      <div className="pt-4 border-t border-border">
        <p className="text-sm text-gray-400 mb-3">
          {t("oauthPrompt")}
        </p>
        <div className="flex gap-3">
          <button type="button" className="flex-1 py-2 border border-border rounded-lg text-white hover:border-accent">
            {t("continueWithGoogle")}
          </button>
          <button type="button" className="flex-1 py-2 border border-border rounded-lg text-white hover:border-accent">
            {t("continueWithFacebook")}
          </button>
        </div>
      </div>
 
      <button
        type="submit"
        className="w-full bg-accent text-black font-bold py-3 rounded-lg"
      >
        {t("enterExperience")}
      </button>
    </form>
  );
}

"use client";
import { useQueryState } from "nuqs";
import { ProfileForm } from "~/components/profile/profile-form";
import { useTranslations } from "next-intl";
import { Suspense } from "react";
 
function OnboardContent() {
  const t = useTranslations("onboard");
  const [tableId] = useQueryState("tableId", { defaultValue: "" });
  const [token] = useQueryState("token", { defaultValue: "" });
 
  if (!tableId || !token) {
    return <div className="text-center py-24 text-gray-400">{t("invalidQr")}</div>;
  }
 
  return (
    <div className="min-h-screen bg-background pt-24 px-4">
      <div className="max-w-md mx-auto">
        <h1 className="font-serif text-3xl text-accent text-center mb-2">
          {t("welcomeTitle")}
        </h1>
        <p className="text-gray-400 text-center mb-8">
          {t("welcomeSubtitle")}
        </p>
        <ProfileForm />
      </div>
    </div>
  );
}
 
export default function OnboardPage() {
  return (
    <Suspense fallback={<div className="min-h-screen bg-background pt-24 px-4"><div className="max-w-md mx-auto animate-pulse space-y-6"><div className="h-8 bg-surface rounded w-2/3 mx-auto" /><div className="h-48 bg-surface rounded" /></div></div>}>
      <OnboardContent />
    </Suspense>
  );
}

git add apps/frontend/app/[locale]/onboard/ apps/frontend/components/profile/
git commit -m "feat(profiles): add guest onboarding page and profile form"

"use client";
import { useState } from "react";
import { useQuery, useMutation } from "convex/react";
import { api } from "~/convex/_generated/api";
import { useTranslations } from "next-intl";
import { Id } from "~/convex/_generated/dataModel";
import { consola } from "consola";
 
const REACTION_TYPES = [
  { type: "WAVE" as const, iconPath: "M7 8l4 4-4 4M13 4h4m0 16h-4", labelKey: "wave" },
  { type: "CHEERS" as const, iconPath: "M9 12l2 2 4-4M15 12a3 3 0 11-6 0 3 3 0 016 0z", labelKey: "cheers" },
  { type: "HEART" as const, iconPath: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z", labelKey: "heart" },
];
 
export function GuestWall({ myProfileId }: { myProfileId: Id<"guestProfiles"> }) {
  const t = useTranslations("guestWall");
  const guests = useQuery(api.profiles.getTonight, {});
  const reactionsToMe = useQuery(api.profiles.getReactionsToMe, { profileId: myProfileId });
  const sendReaction = useMutation(api.profiles.sendReaction);
  const [filterMood, setFilterMood] = useState<string | null>(null);
 
  const filtered = filterMood
    ? guests?.filter((g) => g.moodTags.includes(filterMood))
    : guests;
 
  const handleReact = async (toProfileId: Id<"guestProfiles">, type: "WAVE" | "CHEERS" | "HEART") => {
    try {
      await sendReaction({
        fromProfileId: myProfileId,
        toProfileId,
        reactionType: type,
      });
    } catch (err) {
      consola.error("Failed to send reaction", { error: err });
    }
  };
 
  return (
    <div>
      {/* Reaction notifications */}
      {reactionsToMe && reactionsToMe.length > 0 && (
        <div className="mb-4 p-3 bg-accent/10 border border-accent/30 rounded-lg">
          <p className="text-sm text-accent">
            {t("reactionsReceived", { count: reactionsToMe.length })}
          </p>
        </div>
      )}
 
      {/* Mood filter */}
      <div className="flex gap-2 mb-4 overflow-x-auto pb-2">
        <button
          onClick={() => setFilterMood(null)}
          className={`px-3 py-1 rounded-full text-xs whitespace-nowrap ${!filterMood ? "bg-accent text-black" : "bg-surface text-gray-400"}`}
        >
          {t("filterAll")}
        </button>
        {["FIRST_TIME", "REGULAR", "CELEBRATING", "LOOKING_FOR_DATE"].map((tag) => (
          <button
            key={tag}
            onClick={() => setFilterMood(tag)}
            className={`px-3 py-1 rounded-full text-xs whitespace-nowrap ${filterMood === tag ? "bg-accent text-black" : "bg-surface text-gray-400"}`}
          >
            {t(`moodTags.${tag.toLowerCase()}`, { defaultValue: tag })}
          </button>
        ))}
      </div>
 
      {/* Guest grid */}
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
        {filtered?.map((guest) => (
          <GuestCard
            key={guest._id}
            guest={guest}
            canReact={guest._id !== myProfileId}
            onReact={(type) => handleReact(guest._id, type)}
          />
        ))}
      </div>
    </div>
  );
}
 
type Guest = {
  _id: Id<"guestProfiles">;
  nickname: string;
  origin: string;
  moodTags: string[];
};
 
type GuestCardProps = {
  guest: Guest;
  canReact: boolean;
  onReact: (type: "WAVE" | "CHEERS" | "HEART") => void;
};
 
function GuestCard({ guest, canReact, onReact }: GuestCardProps) {
  const t = useTranslations("guestWall");
 
  return (
    <div className="bg-surface border border-border p-3 rounded-lg">
      <div className="flex items-center gap-2 mb-2">
        <div className="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center text-accent font-bold">
          {guest.nickname[0].toUpperCase()}
        </div>
        <div>
          <p className="font-medium text-white text-sm">{guest.nickname}</p>
          <p className="text-xs text-gray-400">{guest.origin}</p>
        </div>
      </div>
 
      {/* Mood tags */}
      <div className="flex flex-wrap gap-1 mb-2">
        {guest.moodTags.slice(0, 2).map((tag: string) => (
          <span key={tag} className="text-xs px-1.5 py-0.5 bg-accent/10 text-accent rounded">
            {t(`moodTags.${tag.toLowerCase()}`, { defaultValue: tag })}
          </span>
        ))}
      </div>
 
      {/* Badges */}
      {guest.moodTags.includes("FIRST_TIME") && (
        <span className="text-xs text-blue-400">{t("badges.firstTimer")}</span>
      )}
      {guest.moodTags.includes("REGULAR") && (
        <span className="text-xs text-purple-400">{t("badges.regular")}</span>
      )}
 
      {/* Reaction buttons */}
      {canReact && (
        <div className="mt-2 flex gap-1">
          {REACTION_TYPES.map((r) => (
            <button
              key={r.type}
              onClick={() => onReact(r.type)}
              className="flex-1 py-1 text-xs bg-surface-2 rounded hover:bg-accent/20"
              title={t(`reactionLabels.${r.labelKey}`)}
            >
              <svg className="w-4 h-4 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={r.iconPath} />
              </svg>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

git add apps/frontend/components/profile/guest-wall.tsx apps/frontend/components/profile/reaction-button.tsx
git commit -m "feat(profiles): add guest wall with reactions"

import { z } from "zod";
 
// Profile creation
const CreateProfileSchema = z.object({
  tableId: z.string().optional(),
  token: z.string().min(1),
  nickname: z
    .string()
    .min(2, "Nickname must be at least 2 characters")
    .max(20, "Nickname must be at most 20 characters"),
  origin: z.string().min(1, "Please enter where you are from").max(100),
  moodTags: z.array(z.string()).max(3).default([]),
  googleId: z.string().optional(),
  facebookId: z.string().optional(),
  email: z.string().email().optional(),
  avatarUrl: z.string().url().optional(),
});
 
// Reaction sending
const SendReactionSchema = z.object({
  fromProfileId: z.string().min(1),
  toProfileId: z.string().min(1),
  reactionType: z.enum(["WAVE", "CHEERS", "HEART"]),
});
 
// Guest profile (returned from queries)
const GuestProfileSchema = z.object({
  _id: z.string(),
  nickname: z.string(),
  origin: z.string(),
  moodTags: z.array(z.string()),
  showDate: z.string(),
  checkedIn: z.boolean(),
  avatarUrl: z.string().nullable(),
  token: z.string(),
  reservationId: z.string().optional(),
  tableId: z.string().optional(),
});
 
// Guest reaction
const GuestReactionSchema = z.object({
  _id: z.string(),
  fromProfileId: z.string(),
  toProfileId: z.string(),
  reactionType: z.enum(["WAVE", "CHEERS", "HEART"]),
  showDate: z.string(),
  createdAt: z.number(),
});
 
// Onboard page params
const OnboardParamsSchema = z.object({
  tableId: z.string().min(1),
  token: z.string().min(1),
});

// Error codes namespace
export const PROFILE_ERROR_CODES = {
  INVALID_TOKEN: "INVALID_TOKEN",
  DUPLICATE_PROFILE: "DUPLICATE_PROFILE",
  CANNOT_REACT_SELF: "CANNOT_REACT_SELF",
  PROFILE_NOT_FOUND: "PROFILE_NOT_FOUND",
  TOKEN_EXPIRED: "TOKEN_EXPIRED",
} as const;
 
export type ProfileErrorCode =
  (typeof PROFILE_ERROR_CODES)[keyof typeof PROFILE_ERROR_CODES];

// Guest wall — live updates when new profiles are created
const guests = useQuery(api.profiles.getTonight, {});
 
// Reactions to me — live updates when someone reacts
const reactionsToMe = useQuery(api.profiles.getReactionsToMe, {
  profileId: myProfileId,
});
 
// Individual profile — live updates on check-in status
const myProfile = useQuery(api.profiles.getByToken, token ? { token } : "skip");
 
// Filtered guests by mood — client-side filter on pre-fetched data
const filtered = filterMood
  ? guests?.filter((g) => g.moodTags.includes(filterMood))
  : guests;

// Service worker registration in table PWA
const CACHE_NAME = "hol-table-v1";
const STATIC_ASSETS = ["/", "/table", "/manifest.json"];
 
// Cache-first for static assets (JS, CSS, images)
// Network-first for API calls (Convex real-time)
// Stale-while-revalidate for guest wall data

{
  "onboard": {
    "welcomeTitle": "Welcome to House of Legends",
    "welcomeSubtitle": "Tell us a bit about yourself to get started",
    "nicknameLabel": "Nickname (2-20 characters)",
    "nicknamePlaceholder": "Your nickname",
    "originLabel": "Where are you from?",
    "originPlaceholder": "City or country",
    "moodLabel": "How are you feeling tonight? (pick up to 3)",
    "oauthPrompt": "Link your account for next time (optional)",
    "continueWithGoogle": "Continue with Google",
    "continueWithFacebook": "Continue with Facebook",
    "enterExperience": "Enter the Experience",
    "welcome": "Welcome!",
    "redirecting": "Redirecting to your table...",
    "invalidQr": "Invalid QR code. Please scan the QR code at your table.",
    "moods": {
      "lookingForDate": "Looking for date",
      "getDrunk": "Let's get drunk tonight",
      "firstTime": "First time here",
      "regular": "Come here regularly",
      "celebrating": "Celebrating",
      "goodFriends": "Just good friends",
      "solo": "Solo",
      "withFamily": "With family"
    }
  },
  "guestWall": {
    "filterAll": "All",
    "reactionsReceived": "You got {count} reaction(s) tonight!",
    "badges": {
      "firstTimer": "First timer",
      "regular": "Regular"
    },
    "reactionLabels": {
      "wave": "Wave",
      "cheers": "Cheers",
      "heart": "Heart"
    },
    "moodTags": {
      "first_time": "First timer",
      "regular": "Regular",
      "celebrating": "Celebrating",
      "looking_for_date": "Looking for date",
      "get_drunk": "Let's get drunk",
      "good_friends": "Good friends",
      "solo": "Solo",
      "with_family": "With family"
    }
  },
  "table": {
    "tabs": {
      "guestWall": "Guest Wall",
      "ordering": "Ordering",
      "photos": "Photos"
    }
  }
}

test("GP-E2E-1.1: Guest sees onboarding page after scanning QR code");
test("GP-E2E-1.2: Guest can fill nickname, origin, and mood tags");
test("GP-E2E-1.3: Guest can select up to 3 mood tags");
test("GP-E2E-1.4: Guest can deselect a mood tag");
test("GP-E2E-1.5: Guest can submit form without OAuth");
test("GP-E2E-1.6: Guest is redirected to table page after profile creation");
test("GP-E2E-1.7: Invalid QR code shows error message");
test("GP-E2E-2.1: Guest sees guest wall with tonight's guests");
test("GP-E2E-2.2: Guest wall updates in real-time when new guest joins");
test("GP-E2E-2.3: Guest can filter wall by mood tag");
test("GP-E2E-2.4: Filter shows only guests with selected mood");
test("GP-E2E-2.5: Guest can send wave reaction to another guest");
test("GP-E2E-2.6: Guest can send cheers reaction to another guest");
test("GP-E2E-2.7: Guest can send heart reaction to another guest");
test("GP-E2E-2.8: Guest cannot react to themselves");
test("GP-E2E-2.9: Guest sees notification when receiving reactions");
test("GP-E2E-3.1: First-time guests see first-timer badge");
test("GP-E2E-3.2: Regular guests see regular badge");
test("GP-E2E-3.3: OAuth buttons are visible but skippable");

it("GP-1.1: MoodSelector allows selecting up to 3 moods");
it("GP-1.2: MoodSelector disables remaining buttons when 3 selected");
it("GP-1.3: MoodSelector allows deselecting a mood");
it("GP-1.4: MoodSelector shows correct selected state");
it("GP-2.1: ProfileForm renders all required fields");
it("GP-2.2: ProfileForm validates nickname minimum length");
it("GP-2.3: ProfileForm validates nickname maximum length");
it("GP-2.4: ProfileForm validates origin is required");
it("GP-2.5: ProfileForm shows error messages for invalid fields");
it("GP-2.6: ProfileForm shows success state after submission");
it("GP-3.1: GuestWall renders loading skeleton before data loads");
it("GP-3.2: GuestWall displays all guests for tonight");
it("GP-3.3: GuestWall shows correct mood tags on guest cards");
it("GP-3.4: GuestWall shows first-timer badge correctly");
it("GP-3.5: GuestWall shows regular badge correctly");
it("GP-3.6: GuestWall hides reaction buttons on own card");
it("GP-3.7: GuestWall shows reaction notification banner when reactions exist");
it("GP-4.1: GuestCard displays guest initials when no avatar");
it("GP-4.2: GuestCard truncates long nicknames appropriately");

it("GP-PROF-1.1: Guest can create profile with valid data");
it("GP-PROF-1.2: Profile creation fails with invalid token");
it("GP-PROF-1.3: Profile creation fails for duplicate reservation");
it("GP-PROF-1.4: Profile creation fails when nickname is too short");
it("GP-PROF-1.5: Profile creation fails when nickname is too long");
it("GP-PROF-1.6: Profile creation fails when more than 3 mood tags");
it("GP-PROF-2.1: Guest can send WAVE reaction");
it("GP-PROF-2.2: Guest can send CHEERS reaction");
it("GP-PROF-2.3: Guest can send HEART reaction");
it("GP-PROF-2.4: Guest cannot react to themselves");
it("GP-PROF-2.5: Guest cannot react to non-existent profile");
it("GP-PROF-3.1: getTonight returns all profiles for current date");
it("GP-PROF-3.2: getByToken returns profile for valid token");
it("GP-PROF-3.3: getByToken returns null for invalid token");
it("GP-PROF-3.4: getReactionsToMe returns all reactions for profile");