Add emotion data and lightbox share/download

resources/js/guest-v2/screens/PhotoLightboxScreen.tsx

@@ -3,7 +3,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Button } from '@tamagui/button';
-import { ArrowLeft, ChevronLeft, ChevronRight, Heart, Share2 } from 'lucide-react';
+import { ArrowLeft, ChevronLeft, ChevronRight, Download, Heart, Share2 } from 'lucide-react';
 import { useGesture } from '@use-gesture/react';
 import { animated, to, useSpring } from '@react-spring/web';
 import AppShell from '../components/AppShell';
@@ -370,6 +370,17 @@ export default function PhotoLightboxScreen() {
     [closeShareSheet, copyLink, shareText, shareTitle]
   );
 
+  const downloadPhoto = React.useCallback((url?: string | null, id?: number | null) => {
+    if (!url || !id) return;
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `photo-${id}.jpg`;
+    link.rel = 'noreferrer';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }, []);
+
   const bind = useGesture(
     {
       onDrag: ({ down, movement: [mx, my], offset: [ox, oy], last, event }) => {
@@ -449,7 +460,7 @@ export default function PhotoLightboxScreen() {
   return (
     <AppShell>
       <YStack gap="$4">
-        <SurfaceCard>
+        <SurfaceCard position="relative">
           <XStack alignItems="center" justifyContent="space-between">
             <Button
               size="$3"
@@ -592,6 +603,19 @@ export default function PhotoLightboxScreen() {
                   flexWrap="wrap"
                   justifyContent="flex-end"
                 >
+                  <Button
+                    unstyled
+                    onPress={() => downloadPhoto(selected?.imageUrl ?? null, selected?.id ?? null)}
+                    paddingHorizontal="$3"
+                    paddingVertical="$2"
+                  >
+                    <XStack alignItems="center" gap="$2">
+                      <Download size={16} color={isDark ? '#F8FAFF' : '#0F172A'} />
+                      <Text fontSize="$2" fontWeight="$6">
+                        {t('common.actions.download', 'Download')}
+                      </Text>
+                    </XStack>
+                  </Button>
                   <Button
                     unstyled
                     onPress={handleLike}
@@ -626,24 +650,25 @@ export default function PhotoLightboxScreen() {
               {t('lightbox.errors.notFound', 'Photo not found')}
             </Text>
           )}
+          <ShareSheet
+            open={shareSheet.loading || Boolean(shareSheet.url)}
+            onOpenChange={(open) => {
+              if (!open) {
+                closeShareSheet();
+              }
+            }}
+            photoId={selected?.id}
+            eventName={event?.name ?? null}
+            url={shareSheet.url}
+            loading={shareSheet.loading}
+            onShareNative={() => shareNative(shareSheet.url)}
+            onShareWhatsApp={() => shareWhatsApp(shareSheet.url)}
+            onShareMessages={() => shareMessages(shareSheet.url)}
+            onCopyLink={() => copyLink(shareSheet.url)}
+            variant="inline"
+          />
         </SurfaceCard>
       </YStack>
-      <ShareSheet
-        open={shareSheet.loading || Boolean(shareSheet.url)}
-        onOpenChange={(open) => {
-          if (!open) {
-            closeShareSheet();
-          }
-        }}
-        photoId={selected?.id}
-        eventName={event?.name ?? null}
-        url={shareSheet.url}
-        loading={shareSheet.loading}
-        onShareNative={() => shareNative(shareSheet.url)}
-        onShareWhatsApp={() => shareWhatsApp(shareSheet.url)}
-        onShareMessages={() => shareMessages(shareSheet.url)}
-        onCopyLink={() => copyLink(shareSheet.url)}
-      />
     </AppShell>
   );
 }