feat: ship creator journey v2 and profile updates

resources/js/components/comments/EmojiPickerButton.jsx

@@ -1,5 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import EmojiMartPicker from '../common/EmojiMartPicker'
+import extractNativeEmoji from '../common/extractNativeEmoji'
+import isEventWithinNode from '../common/isEventWithinNode'
 import loadEmojiMartData from '../common/loadEmojiMartData'
 
 /**
@@ -38,7 +40,7 @@ export default function EmojiPickerButton({ onEmojiSelect, disabled = false, cla
     if (!open) return
 
     function handleClick(e) {
-      if (wrapRef.current && !wrapRef.current.contains(e.target)) {
+      if (!isEventWithinNode(e, wrapRef.current)) {
         setOpen(false)
       }
     }
@@ -61,7 +63,10 @@ export default function EmojiPickerButton({ onEmojiSelect, disabled = false, cla
 
   const handleSelect = useCallback(
     (emoji) => {
-      onEmojiSelect?.(emoji.native)
+      const nativeEmoji = extractNativeEmoji(emoji)
+      if (nativeEmoji) {
+        onEmojiSelect?.(nativeEmoji)
+      }
       setOpen(false)
     },
     [onEmojiSelect],

resources/js/components/comments/ReactionBar.jsx

@@ -152,16 +152,25 @@ export default function ReactionBar({ entityType, entityId, initialTotals = {},
         <button
           type="button"
           onClick={() => {
+            if (isArtworkVariant) {
+              setPickerOpen((value) => !value)
+              return
+            }
+
             if (myReaction) {
-              // Quick-toggle: remove own reaction
               toggle(myReaction)
             } else {
-              // Quick-like with thumbs_up
               toggle('thumbs_up')
             }
           }}
           className={triggerClassName}
-          aria-label={myReaction ? `You reacted with ${myReactionData?.label}. Click to remove.` : 'React to this comment'}
+          aria-label={isArtworkVariant
+            ? (myReaction
+              ? `Open reaction picker. Current reaction: ${myReactionData?.label}.`
+              : 'Open reaction picker for this artwork')
+            : (myReaction
+              ? `You reacted with ${myReactionData?.label}. Click to remove.`
+              : 'React to this comment')}
         >
           {myReaction ? (
             <span className={isArtworkVariant ? 'text-xl leading-none' : 'text-base leading-none'}>{myReactionData?.emoji}</span>