Fix share assets, shared photo UI, and live show expiry

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

@@ -113,6 +113,8 @@ export default function GalleryScreen() {
   });
   const [deleteConfirmOpen, setDeleteConfirmOpen] = React.useState(false);
   const [deleteBusy, setDeleteBusy] = React.useState(false);
+  const [deleteConfirmMounted, setDeleteConfirmMounted] = React.useState(false);
+  const [deleteConfirmVisible, setDeleteConfirmVisible] = React.useState(false);
   const [likedIds, setLikedIds] = React.useState<Set<number>>(new Set());
   const touchStartX = React.useRef<number | null>(null);
   const fallbackAttemptedRef = React.useRef(false);
@@ -130,6 +132,26 @@ export default function GalleryScreen() {
   const [lightboxMounted, setLightboxMounted] = React.useState(false);
   const [lightboxVisible, setLightboxVisible] = React.useState(false);
 
+  React.useEffect(() => {
+    if (deleteConfirmOpen) {
+      setDeleteConfirmVisible(false);
+      setDeleteConfirmMounted(true);
+      let frame1 = 0;
+      let frame2 = 0;
+      frame1 = window.requestAnimationFrame(() => {
+        frame2 = window.requestAnimationFrame(() => setDeleteConfirmVisible(true));
+      });
+      return () => {
+        window.cancelAnimationFrame(frame1);
+        window.cancelAnimationFrame(frame2);
+      };
+    }
+
+    setDeleteConfirmVisible(false);
+    const timer = window.setTimeout(() => setDeleteConfirmMounted(false), 220);
+    return () => window.clearTimeout(timer);
+  }, [deleteConfirmOpen]);
+
   React.useEffect(() => {
     if (!token) {
       setPhotos([]);
@@ -1334,7 +1356,7 @@ export default function GalleryScreen() {
                   </Button>
                 </XStack>
               </XStack>
-              {deleteConfirmOpen ? (
+              {deleteConfirmMounted ? (
                 <YStack
                   position="absolute"
                   top={0}
@@ -1345,7 +1367,13 @@ export default function GalleryScreen() {
                   justifyContent="center"
                   padding="$4"
                   backgroundColor={isDark ? 'rgba(2, 6, 23, 0.7)' : 'rgba(15, 23, 42, 0.4)'}
-                  style={{ backdropFilter: 'blur(6px)', zIndex: 6 }}
+                  opacity={deleteConfirmVisible ? 1 : 0}
+                  pointerEvents={deleteConfirmVisible ? 'auto' : 'none'}
+                  style={{
+                    backdropFilter: 'blur(6px)',
+                    zIndex: 6,
+                    transition: 'opacity 200ms ease',
+                  }}
                 >
                   <YStack
                     width="100%"
@@ -1356,7 +1384,15 @@ export default function GalleryScreen() {
                     backgroundColor="$surface"
                     borderWidth={1}
                     borderColor={mutedButtonBorder}
-                    style={{ boxShadow: cardShadow }}
+                    opacity={deleteConfirmVisible ? 1 : 0}
+                    style={{
+                      boxShadow: cardShadow,
+                      transform: deleteConfirmVisible
+                        ? 'translate3d(0, 0, 0) scale(1)'
+                        : 'translate3d(0, 12px, 0) scale(0.98)',
+                      transition: 'transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease',
+                      willChange: 'transform, opacity',
+                    }}
                   >
                     <YStack gap="$1">
                       <Text fontSize="$4" fontWeight="$7">