Add profile QR code for sharing and inviting friends (#10659)

src/features/inviteFriends/InviteScannerScreen.web.tsx

@@ -0,0 +1,45 @@
+import {View} from 'react-native'
+import {useLingui} from '@lingui/react/macro'
+
+import {atoms as a, useTheme} from '#/alf'
+import {CircleInfo_Stroke2_Corner0_Rounded as InfoIcon} from '#/components/icons/CircleInfo'
+import * as Layout from '#/components/Layout'
+import {Text} from '#/components/Typography'
+
+/**
+ * Web fallback - QR scanning relies on the device camera and is native-only by
+ * design. The route is registered on all platforms, so a web user reaching
+ * /invite/scan via a direct URL gets this message instead of the native
+ * camera UI.
+ */
+export function InviteScannerScreen() {
+  const {t: l} = useLingui()
+  const t = useTheme()
+  return (
+    <Layout.Screen>
+      <Layout.Header.Outer>
+        <Layout.Header.BackButton />
+        <Layout.Header.Content>
+          <Layout.Header.TitleText>{l`Scan QR code`}</Layout.Header.TitleText>
+        </Layout.Header.Content>
+        <Layout.Header.Slot />
+      </Layout.Header.Outer>
+      <View
+        style={[a.flex_1, a.align_center, a.justify_center, a.p_xl, a.gap_md]}>
+        <InfoIcon size="xl" fill={t.atoms.text_contrast_medium.color} />
+        <Text style={[a.text_xl, a.font_bold, a.text_center]}>
+          {l`Not available on this platform`}
+        </Text>
+        <Text
+          style={[
+            a.text_md,
+            a.text_center,
+            t.atoms.text_contrast_medium,
+            {maxWidth: 320},
+          ]}>
+          {l`Please use the Bluesky mobile app to scan a QR code.`}
+        </Text>
+      </View>
+    </Layout.Screen>
+  )
+}