Include "Did you know?" when fact is present and show on 'back' of AmbassadorCard by itsjayway · Pull Request #332 · alveusgg/extension

itsjayway · 2025-07-10T07:52:08Z

Reference: #325

Hey all, I'm back! This is an MVP of implementation. It's currently missing the tailwind 'flip' animation as of the current commits and I'll continue toward delivering that in this PR.

If this is sufficient to proceed, I'm looking for feedback in:

"Did you know? ℹ️" placement on the 'front' of the card.
Card 'back' formatting
Implementation

Screen.Recording.2025-07-10.034824.mp4

…when applicable

Copilot

Pull Request Overview

This PR introduces a “Did you know?” fact feature to the AmbassadorCard component, allowing users to flip the card to see an ambassador’s fun fact. Key changes include:

Extending the ambassador schema to include an optional fact field.
Adding state and callback (useState/useCallback) to flip between front and back views.
Conditionally rendering a “Did you know?” trigger on the front and displaying the fact on the back.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

File	Description
src/hooks/useAmbassadors.tsx	Added `fact` as an optional field in the Zod schema
src/components/AmbassadorCard.tsx	Implemented flip state, UI for “Did you know?” and back-side layout

Comments suppressed due to low confidence (2)

src/components/AmbassadorCard.tsx:43

[nitpick] The state variable flipped is ambiguous—consider renaming to isFlipped for clarity.

  const [flipped, setFlipped] = useState(false);

src/components/AmbassadorCard.tsx:43

New flip logic and fact display should be covered by unit or integration tests to ensure correct behavior when toggling the card.

  const [flipped, setFlipped] = useState(false);

Copilot · 2025-07-10T07:53:58Z

+                        className="rounded-full text-alveus-green-400 outline-highlight transition-[outline] hover:outline-3"
+                        onClick={flipCard}
+                        aria-label="Flip card to see fact"
+                        cursor="pointer"


The cursor prop on IconInfo isn’t a valid React prop. Consider moving this into the className (e.g. className="cursor-pointer").

Suggested change

cursor="pointer"

className="rounded-full text-alveus-green-400 outline-highlight transition-[outline] hover:outline-3 cursor-pointer"

Copilot · 2025-07-10T07:53:59Z

+          <div
+            className={classes(
+              "relative flex max-h-full min-h-[min(28rem,100%)] w-80 max-w-full flex-col justify-start rounded-lg bg-alveus-green-900 align-top text-xs shadow-xl",
+              className,
+            )}
+          >


[nitpick] The front and back sides share a lot of similar container markup. Consider extracting common layout or styling into a shared component to reduce duplication.

Suggested change

<div

className={classes(

"relative flex max-h-full min-h-[min(28rem,100%)] w-80 max-w-full flex-col justify-start rounded-lg bg-alveus-green-900 align-top text-xs shadow-xl",

className,

)}

>

<CardContainer className={className}>

MattIPv4 · 2025-07-10T14:14:36Z

👀 Thank you for working on this! I think I agree with a lot of the feedback that copilot is giving.

Instead of having it be a heading with an icon that you need to clip, perhaps we could do a peeking/peeling corner that the user can click on to flip the card over? And perhaps when they hover on that corner we show a tooltip to give context on clicking to flip?

And I think quite important to this is an actual flip animation rather than just conditionally switching the content, though it sounds like you already plan to work on that!

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

itsjayway · 2025-07-13T04:06:58Z

Currently the simplest way I could manage rendering the dogear. It should be possible to have the fold "bring more with it" via translate-x/y, but that would reveal the unclipped portion of the card.

Screen.Recording.2025-07-13.000131.mp4

MattIPv4 · 2025-07-13T16:07:48Z

That looks great -- I think with a shadow on that, and the tooltip, it should be just fine.

MattIPv4 · 2025-07-13T16:08:51Z

    key: z.string(),
    title: z.string(),
  }),
+  fact: z.string().optional(),


Is the fact not already part of ambassadorSchema?

MattIPv4 · 2025-07-13T16:10:31Z

One other thought, I wonder if it'd be worth splitting AmbassadorCard.tsx into ambassador/card-front.tsx + ambassador/card-back.tsx + ambassador/card.tsx (and AmbassadorButton.tsx could also move to ambassador/button.tsx)?

MattIPv4 · 2025-08-02T16:54:38Z

👋 @itsjayway how're things going on this? Anything I can do to help get this landed?

itsjayway · 2025-08-04T06:05:25Z

hey @MattIPv4, got absolutely cooked at work the week following my commits here 😅 things should free up this week. I'll make an effort to progress/share blockers here, apologies again.

MattIPv4 · 2025-09-15T20:34:04Z

@itsjayway how're things going, any progress update on here?

itsjayway · 2025-09-30T04:51:47Z

+        {/* Credits to https://codepen.io/rachelslurs/pen/xxoPKLg */}
+        <div
+          className={classes(
+            "absolute top-0 right-0 w-0 border-13 border-solid border-t-transparent border-r-transparent border-b-alveus-green border-l-alveus-green transition-all duration-300 ease-in-out hover:scale-[1.6] sm:border-15 md:border-18 lg:border-20",


magic numbers 😩 ensures consistent sizing across window widths. an alternative could be borderWidth: "clamp(13px, 2vw, 20px)", but it was not satisfactory for certain window widths regardless the preferred value

itsjayway · 2025-09-30T04:53:56Z

thanks for your patience @MattIPv4, life's butt-kicking again but here is another iteration for an MVP. something annoying to note with the Dogear's current state: if the image is hovered and expanded, when hovering the Dogear, the image contracts, 'evading' the cursor.

itsjayway added 3 commits July 10, 2025 03:28

include fact in ambassadorSchema

9c098ff

implement MVP front and back, incorporating 'Did you know?' and fact …

168b289

…when applicable

improve UX and minor fix to UI

46137ae

Copilot AI review requested due to automatic review settings July 10, 2025 07:52

itsjayway requested a review from a team as a code owner July 10, 2025 07:52

itsjayway mentioned this pull request Jul 10, 2025

Show "Did you know?" facts on ambassador cards #325

Open

Copilot AI reviewed Jul 10, 2025

View reviewed changes

itsjayway and others added 8 commits July 12, 2025 21:49

Update src/components/AmbassadorCard.tsx

e3de7f5

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update src/components/AmbassadorCard.tsx

c5f7703

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update src/components/AmbassadorCard.tsx

d2a671e

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

revert copilot commit of CardContainer suggestion

16da4c8

mvp dogear

842d516

prep for flip hint and animation

87df736

replace removed shadow

8bcd1c1

cleanup commented notes

95e0e98

MattIPv4 reviewed Jul 13, 2025

View reviewed changes

itsjayway added 2 commits September 29, 2025 22:49

dynamic border sizes

7d1a9ed

add box shadow to dogear

fdb8637

itsjayway commented Sep 30, 2025

View reviewed changes

Merge branch 'main' into itsjayway/did-you-know-ambassador-cards

c4363c7

	cursor="pointer"
	className="rounded-full text-alveus-green-400 outline-highlight transition-[outline] hover:outline-3 cursor-pointer"

Uh oh!

Conversation

itsjayway commented Jul 10, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

MattIPv4 commented Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

itsjayway commented Jul 13, 2025

Uh oh!

MattIPv4 commented Jul 13, 2025

Uh oh!

MattIPv4 Jul 13, 2025

Choose a reason for hiding this comment

Uh oh!

MattIPv4 commented Jul 13, 2025

Uh oh!

MattIPv4 commented Aug 2, 2025

Uh oh!

itsjayway commented Aug 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MattIPv4 commented Sep 15, 2025

Uh oh!

itsjayway Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

itsjayway commented Sep 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

MattIPv4 commented Jul 10, 2025 •

edited

Loading

itsjayway commented Aug 4, 2025 •

edited

Loading