Add OTA fallback for gallery embed (#10734)

Co-authored-by: Eric Bailey <git@esb.lol>

src/components/Post/Embed/GalleryFallbackEmbed.tsx

@@ -0,0 +1,99 @@
+import {Linking, View} from 'react-native'
+import {plural} from '@lingui/core/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
+
+import {BSKY_DOWNLOAD_URL} from '#/lib/constants'
+import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import {Sparkle_Stroke2_Corner0_Rounded as Sparkle} from '#/components/icons/Sparkle'
+import {Text} from '#/components/Typography'
+import {IS_NATIVE} from '#/env'
+
+/**
+ * OTA-able fallback that ships to native builds which don't yet know how to
+ * render the new gallery embed (>4 images, Photos v2). Final copy and visual
+ * treatment pending design from Darrin/Danielle/Alex.
+ *
+ * Native-only per APP-2308 - web builds receive the new gallery support in
+ * the same release that adds it.
+ */
+export function GalleryFallbackEmbed({count}: {count?: number}) {
+  const t = useTheme()
+  const {t: l} = useLingui()
+
+  const bodyStyle = [
+    a.text_sm,
+    a.text_center,
+    a.leading_snug,
+    t.atoms.text_contrast_high,
+  ]
+
+  return (
+    <View
+      style={[
+        a.mt_sm,
+        a.rounded_md,
+        a.border,
+        a.p_lg,
+        a.pb_2xl,
+        a.gap_sm,
+        a.align_center,
+        {
+          borderColor: t.palette.primary_200,
+          backgroundColor: t.palette.primary_25,
+        },
+      ]}>
+      <Sparkle size="lg" fill={t.palette.primary_500} />
+      <Text style={[a.text_md, a.font_bold, a.text_center, t.atoms.text]}>
+        <Trans>Something new is here</Trans>
+      </Text>
+      {count ? (
+        <View>
+          <Text style={bodyStyle}>
+            {plural(count, {
+              one: 'This post has # photo.',
+              other: 'This post has # photos.',
+            })}
+          </Text>
+          {IS_NATIVE ? (
+            <Text style={bodyStyle}>
+              {plural(count, {
+                one: 'Update your app to see it.',
+                other: 'Update your app to see them all.',
+              })}
+            </Text>
+          ) : (
+            <Text style={bodyStyle}>
+              {plural(count, {
+                one: 'Refresh the page to see it.',
+                other: 'Refresh the page to see them all.',
+              })}
+            </Text>
+          )}
+        </View>
+      ) : IS_NATIVE ? (
+        <Text style={bodyStyle}>
+          <Trans>Update your app to see it.</Trans>
+        </Text>
+      ) : (
+        <Text style={bodyStyle}>
+          <Trans>Refresh the page to see it.</Trans>
+        </Text>
+      )}
+      {IS_NATIVE && (
+        <Button
+          label={l`Update your app`}
+          size="small"
+          color="primary"
+          onPress={() => {
+            void Linking.openURL(BSKY_DOWNLOAD_URL)
+          }}
+          style={[a.mt_xs]}>
+          <ButtonText>
+            <Trans>Update app</Trans>
+          </ButtonText>
+        </Button>
+      )}
+    </View>
+  )
+}

src/view/screens/Storybook/GalleryFallback.tsx

@@ -0,0 +1,25 @@
+import {View} from 'react-native'
+
+import {atoms as a} from '#/alf'
+import {GalleryFallbackEmbed} from '#/components/Post/Embed/GalleryFallbackEmbed'
+import {H1, H3} from '#/components/Typography'
+
+export function GalleryFallback() {
+  return (
+    <View style={[a.gap_md]}>
+      <H1>Gallery fallback (APP-2308)</H1>
+
+      <H3>No count</H3>
+      <GalleryFallbackEmbed />
+
+      <H3>1 photo</H3>
+      <GalleryFallbackEmbed count={1} />
+
+      <H3>5 photos</H3>
+      <GalleryFallbackEmbed count={5} />
+
+      <H3>10 photos</H3>
+      <GalleryFallbackEmbed count={10} />
+    </View>
+  )
+}

src/view/screens/Storybook/Storybook.tsx

@@ -16,6 +16,7 @@ import {Breakpoints} from './Breakpoints'
 import {Buttons} from './Buttons'
 import {Dialogs} from './Dialogs'
 import {Forms} from './Forms'
+import {GalleryFallback} from './GalleryFallback'
 import {Icons} from './Icons'
 import {Links} from './Links'
 import {Menus} from './Menus'
@@ -120,6 +121,7 @@ export default function Storybook() {
             <Breakpoints />
             <Dialogs />
             <Admonitions />
+            <GalleryFallback />
             <Settings />
 
             <Button