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

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

@@ -47,24 +47,27 @@ 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 inlineActive = variant === 'inline';
   const [inlineMounted, setInlineMounted] = React.useState(false);
   const [inlineVisible, setInlineVisible] = React.useState(false);
 
   React.useEffect(() => {
-    if (variant !== 'inline') return;
+    if (!inlineActive) {
+      setInlineMounted(false);
+      setInlineVisible(false);
+      return;
+    }
+
     if (open) {
       setInlineMounted(true);
-      const raf = window.requestAnimationFrame(() => {
-        setInlineVisible(true);
-      });
-      return () => window.cancelAnimationFrame(raf);
+      const frame = window.requestAnimationFrame(() => setInlineVisible(true));
+      return () => window.cancelAnimationFrame(frame);
     }
+
     setInlineVisible(false);
-    const timeout = window.setTimeout(() => {
-      setInlineMounted(false);
-    }, 220);
-    return () => window.clearTimeout(timeout);
-  }, [open, variant]);
+    const timer = window.setTimeout(() => setInlineMounted(false), 260);
+    return () => window.clearTimeout(timer);
+  }, [inlineActive, open]);
 
   const content = (
     <YStack gap="$3">
@@ -184,16 +187,14 @@ export default function ShareSheet({
         </Button>
       </XStack>
 
-      {url ? (
-        <Text fontSize="$1" color="$color" opacity={0.7} numberOfLines={1}>
-          {url}
-        </Text>
-      ) : null}
+      <Text fontSize="$1" color="$color" opacity={url ? 0.7 : 0} numberOfLines={1} style={{ minHeight: 16 }}>
+        {url ?? ' '}
+      </Text>
     </YStack>
   );
 
-  if (variant === 'inline') {
-    if (!inlineMounted) {
+  if (inlineActive) {
+    if (!inlineMounted && !open) {
       return null;
     }
 
@@ -203,16 +204,16 @@ export default function ShareSheet({
         inset={0}
         zIndex={20}
         justifyContent="flex-end"
-        pointerEvents={open ? 'auto' : 'none'}
+        pointerEvents={inlineVisible ? 'auto' : 'none'}
       >
         <Button
           unstyled
           onPress={() => onOpenChange(false)}
+          opacity={inlineVisible ? 1 : 0}
           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')}
@@ -222,9 +223,12 @@ export default function ShareSheet({
           backgroundColor="$surface"
           borderTopLeftRadius="$6"
           borderTopRightRadius="$6"
+          opacity={inlineVisible ? 1 : 0}
           style={{
-            transform: inlineVisible ? 'translateY(0)' : 'translateY(100%)',
-            transition: 'transform 220ms cubic-bezier(0.22, 1, 0.36, 1)',
+            backfaceVisibility: 'hidden',
+            transform: inlineVisible ? 'translate3d(0, 0, 0)' : 'translate3d(0, 56px, 0)',
+            transition: 'transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease',
+            willChange: 'transform, opacity',
           }}
         >
           <YStack