Add emotion data and lightbox share/download

resources/js/guest-v2/components/ShareSheet.tsx

@@ -14,6 +14,7 @@ type ShareSheetProps = {
   eventName?: string | null;
   url?: string | null;
   loading?: boolean;
+  variant?: 'modal' | 'inline';
   onShareNative: () => void;
   onShareWhatsApp: () => void;
   onShareMessages: () => void;
@@ -36,6 +37,7 @@ export default function ShareSheet({
   eventName,
   url,
   loading = false,
+  variant = 'modal',
   onShareNative,
   onShareWhatsApp,
   onShareMessages,
@@ -45,6 +47,199 @@ export default function ShareSheet({
   const { isDark } = useGuestThemeVariant();
   const mutedSurface = isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(15, 23, 42, 0.06)';
   const mutedBorder = isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(15, 23, 42, 0.12)';
+  const [inlineMounted, setInlineMounted] = React.useState(false);
+  const [inlineVisible, setInlineVisible] = React.useState(false);
+
+  React.useEffect(() => {
+    if (variant !== 'inline') return;
+    if (open) {
+      setInlineMounted(true);
+      const raf = window.requestAnimationFrame(() => {
+        setInlineVisible(true);
+      });
+      return () => window.cancelAnimationFrame(raf);
+    }
+    setInlineVisible(false);
+    const timeout = window.setTimeout(() => {
+      setInlineMounted(false);
+    }, 220);
+    return () => window.clearTimeout(timeout);
+  }, [open, variant]);
+
+  const content = (
+    <YStack gap="$3">
+      <XStack alignItems="center" justifyContent="space-between">
+        <YStack gap="$1">
+          <Text fontSize="$2" color="$color" opacity={0.7} textTransform="uppercase" letterSpacing={1.2}>
+            {t('share.title', 'Shared photo')}
+          </Text>
+          {photoId ? (
+            <Text fontSize="$5" fontWeight="$8">
+              #{photoId}
+            </Text>
+          ) : null}
+          {eventName ? (
+            <Text fontSize="$2" color="$color" opacity={0.7}>
+              {eventName}
+            </Text>
+          ) : null}
+        </YStack>
+        <Button
+          size="$3"
+          circular
+          backgroundColor={mutedSurface}
+          borderWidth={1}
+          borderColor={mutedBorder}
+          onPress={() => onOpenChange(false)}
+          aria-label={t('common.actions.close', 'Close')}
+        >
+          <X size={16} color={isDark ? '#F8FAFF' : '#0F172A'} />
+        </Button>
+      </XStack>
+
+      <XStack gap="$2" flexWrap="wrap">
+        <Button
+          flex={1}
+          minWidth="45%"
+          borderRadius="$card"
+          backgroundColor={mutedSurface}
+          borderWidth={1}
+          borderColor={mutedBorder}
+          onPress={onShareNative}
+          disabled={loading}
+        >
+          <XStack alignItems="center" gap="$2">
+            <Share2 size={16} color={isDark ? '#F8FAFF' : '#0F172A'} />
+            <YStack>
+              <Text fontSize="$2" fontWeight="$7">
+                {t('share.button', 'Share')}
+              </Text>
+              <Text fontSize="$1" color="$color" opacity={0.7}>
+                {t('share.title', 'Shared photo')}
+              </Text>
+            </YStack>
+          </XStack>
+        </Button>
+        <Button
+          flex={1}
+          minWidth="45%"
+          borderRadius="$card"
+          backgroundColor="#22C55E"
+          onPress={onShareWhatsApp}
+          disabled={loading}
+        >
+          <XStack alignItems="center" gap="$2">
+            <WhatsAppIcon width={18} height={18} />
+            <YStack>
+              <Text fontSize="$2" fontWeight="$7" color="#FFFFFF">
+                {t('share.whatsapp', 'WhatsApp')}
+              </Text>
+              <Text fontSize="$1" color="rgba(255,255,255,0.8)">
+                {loading ? '...' : ''}
+              </Text>
+            </YStack>
+          </XStack>
+        </Button>
+        <Button
+          flex={1}
+          minWidth="45%"
+          borderRadius="$card"
+          backgroundColor="#38BDF8"
+          onPress={onShareMessages}
+          disabled={loading}
+        >
+          <XStack alignItems="center" gap="$2">
+            <MessageSquare size={16} color="#FFFFFF" />
+            <YStack>
+              <Text fontSize="$2" fontWeight="$7" color="#FFFFFF">
+                {t('share.imessage', 'Messages')}
+              </Text>
+              <Text fontSize="$1" color="rgba(255,255,255,0.8)">
+                {loading ? '...' : ''}
+              </Text>
+            </YStack>
+          </XStack>
+        </Button>
+        <Button
+          flex={1}
+          minWidth="45%"
+          borderRadius="$card"
+          backgroundColor={mutedSurface}
+          borderWidth={1}
+          borderColor={mutedBorder}
+          onPress={onCopyLink}
+          disabled={loading}
+        >
+          <XStack alignItems="center" gap="$2">
+            <Copy size={16} color={isDark ? '#F8FAFF' : '#0F172A'} />
+            <YStack>
+              <Text fontSize="$2" fontWeight="$7">
+                {t('share.copyLink', 'Copy link')}
+              </Text>
+              <Text fontSize="$1" color="$color" opacity={0.7}>
+                {loading ? t('share.loading', 'Loading...') : ''}
+              </Text>
+            </YStack>
+          </XStack>
+        </Button>
+      </XStack>
+
+      {url ? (
+        <Text fontSize="$1" color="$color" opacity={0.7} numberOfLines={1}>
+          {url}
+        </Text>
+      ) : null}
+    </YStack>
+  );
+
+  if (variant === 'inline') {
+    if (!inlineMounted) {
+      return null;
+    }
+
+    return (
+      <YStack
+        position="absolute"
+        inset={0}
+        zIndex={20}
+        justifyContent="flex-end"
+        pointerEvents={open ? 'auto' : 'none'}
+      >
+        <Button
+          unstyled
+          onPress={() => onOpenChange(false)}
+          style={{
+            position: 'absolute',
+            inset: 0,
+            backgroundColor: isDark ? 'rgba(15, 23, 42, 0.5)' : 'rgba(15, 23, 42, 0.35)',
+            opacity: inlineVisible ? 1 : 0,
+            transition: 'opacity 200ms ease',
+          }}
+          aria-label={t('common.actions.close', 'Close')}
+        />
+        <YStack
+          padding="$4"
+          backgroundColor="$surface"
+          borderTopLeftRadius="$6"
+          borderTopRightRadius="$6"
+          style={{
+            transform: inlineVisible ? 'translateY(0)' : 'translateY(100%)',
+            transition: 'transform 220ms cubic-bezier(0.22, 1, 0.36, 1)',
+          }}
+        >
+          <YStack
+            height={5}
+            width={52}
+            backgroundColor="#CBD5E1"
+            borderRadius={999}
+            alignSelf="center"
+            marginBottom="$3"
+          />
+          {content}
+        </YStack>
+      </YStack>
+    );
+  }
 
   return (
     <Sheet
@@ -57,129 +252,7 @@ export default function ShareSheet({
       <Sheet.Overlay {...({ backgroundColor: isDark ? 'rgba(15, 23, 42, 0.6)' : 'rgba(15, 23, 42, 0.3)' } as any)} />
       <Sheet.Frame padding="$4" backgroundColor="$surface" borderTopLeftRadius="$6" borderTopRightRadius="$6">
         <Sheet.Handle height={5} width={52} backgroundColor="#CBD5E1" borderRadius={999} marginBottom="$3" />
-        <YStack gap="$3">
-          <XStack alignItems="center" justifyContent="space-between">
-            <YStack gap="$1">
-              <Text fontSize="$2" color="$color" opacity={0.7} textTransform="uppercase" letterSpacing={1.2}>
-                {t('share.title', 'Shared photo')}
-              </Text>
-              {photoId ? (
-                <Text fontSize="$5" fontWeight="$8">
-                  #{photoId}
-                </Text>
-              ) : null}
-              {eventName ? (
-                <Text fontSize="$2" color="$color" opacity={0.7}>
-                  {eventName}
-                </Text>
-              ) : null}
-            </YStack>
-            <Button
-              size="$3"
-              circular
-              backgroundColor={mutedSurface}
-              borderWidth={1}
-              borderColor={mutedBorder}
-              onPress={() => onOpenChange(false)}
-              aria-label={t('common.actions.close', 'Close')}
-            >
-              <X size={16} color={isDark ? '#F8FAFF' : '#0F172A'} />
-            </Button>
-          </XStack>
-
-          <XStack gap="$2" flexWrap="wrap">
-            <Button
-              flex={1}
-              minWidth="45%"
-              borderRadius="$card"
-              backgroundColor={mutedSurface}
-              borderWidth={1}
-              borderColor={mutedBorder}
-              onPress={onShareNative}
-              disabled={loading}
-            >
-              <XStack alignItems="center" gap="$2">
-                <Share2 size={16} color={isDark ? '#F8FAFF' : '#0F172A'} />
-                <YStack>
-                  <Text fontSize="$2" fontWeight="$7">
-                    {t('share.button', 'Share')}
-                  </Text>
-                  <Text fontSize="$1" color="$color" opacity={0.7}>
-                    {t('share.title', 'Shared photo')}
-                  </Text>
-                </YStack>
-              </XStack>
-            </Button>
-            <Button
-              flex={1}
-              minWidth="45%"
-              borderRadius="$card"
-              backgroundColor="#22C55E"
-              onPress={onShareWhatsApp}
-              disabled={loading}
-            >
-              <XStack alignItems="center" gap="$2">
-                <WhatsAppIcon width={18} height={18} />
-                <YStack>
-                  <Text fontSize="$2" fontWeight="$7" color="#FFFFFF">
-                    {t('share.whatsapp', 'WhatsApp')}
-                  </Text>
-                  <Text fontSize="$1" color="rgba(255,255,255,0.8)">
-                    {loading ? '...' : ''}
-                  </Text>
-                </YStack>
-              </XStack>
-            </Button>
-            <Button
-              flex={1}
-              minWidth="45%"
-              borderRadius="$card"
-              backgroundColor="#38BDF8"
-              onPress={onShareMessages}
-              disabled={loading}
-            >
-              <XStack alignItems="center" gap="$2">
-                <MessageSquare size={16} color="#FFFFFF" />
-                <YStack>
-                  <Text fontSize="$2" fontWeight="$7" color="#FFFFFF">
-                    {t('share.imessage', 'Messages')}
-                  </Text>
-                  <Text fontSize="$1" color="rgba(255,255,255,0.8)">
-                    {loading ? '...' : ''}
-                  </Text>
-                </YStack>
-              </XStack>
-            </Button>
-            <Button
-              flex={1}
-              minWidth="45%"
-              borderRadius="$card"
-              backgroundColor={mutedSurface}
-              borderWidth={1}
-              borderColor={mutedBorder}
-              onPress={onCopyLink}
-              disabled={loading}
-            >
-              <XStack alignItems="center" gap="$2">
-                <Copy size={16} color={isDark ? '#F8FAFF' : '#0F172A'} />
-                <YStack>
-                  <Text fontSize="$2" fontWeight="$7">
-                    {t('share.copyLink', 'Copy link')}
-                  </Text>
-                  <Text fontSize="$1" color="$color" opacity={0.7}>
-                    {loading ? t('share.loading', 'Loading...') : ''}
-                  </Text>
-                </YStack>
-              </XStack>
-            </Button>
-          </XStack>
-
-          {url ? (
-            <Text fontSize="$1" color="$color" opacity={0.7} numberOfLines={1}>
-              {url}
-            </Text>
-          ) : null}
-        </YStack>
+        {content}
       </Sheet.Frame>
     </Sheet>
   );