feat: emoji suggestion via Gemini AI and theme cycle toggle

[guid3d]

Summary

• Add AI emoji suggestion feature: new /api/emoji-suggest route calls Gemini 2.5 Flash Lite to suggest 5 emojis based on group/transaction name; useEmojiSuggestions hook debounces requests (400ms) and auto-applies first suggestion to avatar field
• EmojiActionButton gains cycle button (↻) to rotate through AI suggestions; shows loader while fetching; manual picker pick overrides AI suggestions
• Theme toggle now cycles light → dark → auto (with IconBrightnessAutoFilled), replacing binary light/dark flip
• Fix: participants can be added without typing IBAN; optimize emoji randomizer; add save button loading indicator; fix TS errors blocking prod build

Test plan

• Create group/transaction — AI emoji suggestions appear and auto-fill avatar
• Cycle button rotates through 5 AI suggestions
• Manually picking from picker overrides AI suggestion (cycle button hidden)
• Theme toggle cycles light → dark → auto → light
• Add participant without IBAN works
• Production build passes (npm run build)

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
splt	Ready	Preview, Comment	May 18, 2026 1:51pm

[Copilot]

Pull request overview

Adds AI-backed emoji suggestions and updates theme cycling behavior, alongside participant/payment and UI refinements.

Changes:

• Adds Gemini-based emoji suggestion API and client hook integration for transaction avatars.
• Updates theme toggles to cycle through light, dark, and auto.
• Adjusts participant avatar/payment behavior and trims the random emoji pools.

Reviewed changes

Copilot reviewed 13 out of 16 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
tsconfig.json	Raises TypeScript target to ES2015.
src/utils/randomEmoji.ts	Replaces large emoji lists with curated pools.
src/hooks/useEmojiSuggestions.ts	Adds debounced emoji suggestion fetching hook.
src/components/UserSelectionModal.tsx	Adds dotted loader style to save button.
src/components/UserDropdown.tsx	Changes theme menu item to cycle light/dark/auto.
src/components/ToggleDarkLightMode.tsx	Updates standalone theme toggle to cycle modes.
src/components/EmojiActionButtion.tsx	Adds AI suggestion auto-apply, loader, and cycle/randomize button.
src/components/AddParticipantModal/index.tsx	Allows blank IBAN during participant creation.
src/components/AddParticipantModal/components/PageSetPayment.tsx	Adds participant avatar randomization callback.
src/components/AddEditTransactionModal/components/PageSetDetails.tsx	Wires transaction name into emoji suggestions.
src/app/layout.tsx	Sets Mantine provider default color scheme to auto.
src/app/group/[groupId]/components/TabTransactions.tsx	Uses computed color scheme for transaction indicators.
src/app/api/emoji-suggest/route.ts	Adds Gemini-backed emoji suggestion endpoint.
package.json	Adds Google Generative AI dependency.
package-lock.json	Locks Google Generative AI dependency.

Comments suppressed due to low confidence (4)

src/app/api/emoji-suggest/route.ts:20

• The response parser treats any segment with the Unicode Emoji property as a suggestion, but that property also includes digits and some symbols. If the model returns a numbered list despite the prompt, values like 1 or 2 can be returned as “emojis” ahead of the actual emoji suggestions.

  const emojis = [...new Intl.Segmenter().segment(text)]
    .map((s) => s.segment)
    .filter((s) => /\p{Emoji}/u.test(s) && s !== " ")
    .slice(0, 5);

src/app/api/emoji-suggest/route.ts:15

• Gemini failures are not handled, so a missing API key, quota error, model error, or transient network failure will surface as a 500 from this route. Since the UI treats suggestions as optional, the API should return a controlled empty/error response instead of failing the request.

  const model = genAI.getGenerativeModel({ model: "gemini-2.5-flash-lite" });
  const result = await model.generateContent(
    `Given the transaction name: "${name}", suggest 5 relevant emojis. Reply with ONLY the 5 emojis separated by spaces, nothing else. No words, no punctuation, just emojis.`
  );

src/app/api/emoji-suggest/route.ts:14

• There is no type or length validation for name before it is interpolated into the Gemini prompt. A malformed or very large JSON value can produce server errors or unnecessarily large/expensive model requests; constrain this to a string with a reasonable maximum length before calling the model.

  const { name } = await req.json();
  if (!name?.trim()) return NextResponse.json({ emojis: [] });

  const model = genAI.getGenerativeModel({ model: "gemini-2.5-flash-lite" });
  const result = await model.generateContent(
    `Given the transaction name: "${name}", suggest 5 relevant emojis. Reply with ONLY the 5 emojis separated by spaces, nothing else. No words, no punctuation, just emojis.`

src/hooks/useEmojiSuggestions.ts:20

• This starts sending transaction names to the server/Gemini automatically as the user types. Expense names can contain sensitive personal information, so this should be opt-in or otherwise clearly disclosed/controlled before forwarding user-entered data to a third-party AI service.

        const res = await fetch("/api/emoji-suggest", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ name: query }),

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 13 out of 16 changed files in this pull request and generated 7 comments.

Comments suppressed due to low confidence (1)

src/app/api/emoji-suggest/route.ts:41

• This guard assumes name is a string before the later String(name) normalization. A public caller can send a non-string JSON value (for example a number or object), causing name?.trim to throw outside the try block and return a 500.

  const { name } = await req.json();
  if (!name?.trim()) return NextResponse.json({ emojis: [] });

[guid3d]

@copilot apply changes based on this feedback

[Copilot]

Implemented in commit 3d1db6c.

The transaction details page now only passes suggestionQuery in create mode, so edit mode no longer triggers auto-apply from AI suggestions and existing avatars are preserved unless explicitly changed.

Screenshot: behavior-only fix (no visual UI change in this update).

[Copilot]

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

[Copilot]

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

[guid3d]

@copilot build fail from vercel, fix it

[Copilot]

@copilot build fail from vercel, fix it

Fixed in commit 810ea22.

I investigated CI runs and reproduced locally: the emoji-suggest route imports @upstash/redis and @upstash/ratelimit, but those packages were not declared in package.json, which can break Vercel builds. I added both dependencies and updated the lockfile.

Validation after the fix: npm run build succeeds.

[guid3d]

@copilot somehow when emoji suggestion when typing in group name is wrong unlike how it was before

[Copilot]

@copilot somehow when emoji suggestion when typing in group name is wrong unlike how it was before

Fixed in commit e650167.

I restored the previous auto-apply behavior for AI suggestions in group creation, so typing the group name now updates the avatar from the first fresh suggestion again (unless manually set in picker).

Screenshot (behavior-only change):

[guid3d]

@copilot revert all the change to fab046d

[Copilot]

@copilot revert all the change to fab046d

Done in commit 59b2378.

I reverted all post-fab046d83c3744fceffaba9ddebe4e43f7c61dc6 changes by restoring the touched files to that baseline state.

Screenshot: