Display beta badge when isBetaUser is true (#11160)

2026-07-22 15:06:08 -07:00
parent 77bbe8d8a0
commit 8d7a7369aa
4 changed files with 187 additions and 23 deletions
@@ -0,0 +1,104 @@
+import {useState} from 'react'
+import {type Insets, Pressable, View} from 'react-native'
+import {Trans, useLingui} from '@lingui/react/macro'
+
+import {usePreferencesQuery} from '#/state/queries/preferences'
+import {useSession} from '#/state/session'
+import {atoms as a, useTheme} from '#/alf'
+import {Beaker_Stroke2_Corner2_Rounded as BeakerIcon} from '#/components/icons/Beaker'
+import * as Tooltip from '#/components/Tooltip'
+import type * as bsky from '#/types/bsky'
+
+/**
+ * Whether to show the beta badge for a given profile. Only shown on the
+ * viewer's own profile, and only when the viewer has opted in to beta features.
+ */
+export function useIsBetaBadgeVisible(
+  profile: bsky.profile.AnyProfileView,
+): boolean {
+  const {currentAccount} = useSession()
+  const {data: preferences} = usePreferencesQuery()
+  const isBetaUser = preferences?.bskyAppState?.isBetaUser ?? false
+  const isSelf = currentAccount?.did === profile.did
+
+  return isSelf && isBetaUser
+}
+
+export function BetaBadge({
+  profile,
+  width,
+  padding,
+}: {
+  profile: bsky.profile.AnyProfileView
+  width: number
+  padding: number
+}) {
+  const t = useTheme()
+  const isVisible = useIsBetaBadgeVisible(profile)
+
+  if (!isVisible) return null
+
+  return (
+    <View
+      style={[
+        a.rounded_full,
+        {backgroundColor: t.palette.primary_50, padding},
+      ]}>
+      <BeakerIcon width={width} fill={t.palette.primary_500} />
+    </View>
+  )
+}
+
+export function BetaBadgeButton({
+  profile,
+  width,
+  padding,
+  hitSlop,
+}: {
+  profile: bsky.profile.AnyProfileView
+  width: number
+  padding: number
+  hitSlop: Insets
+}) {
+  const t = useTheme()
+  const {t: l} = useLingui()
+  const isVisible = useIsBetaBadgeVisible(profile)
+
+  const [tooltipVisible, setTooltipVisible] = useState(false)
+
+  if (!isVisible) return null
+
+  return (
+    <Tooltip.Outer
+      color="primary"
+      visible={tooltipVisible}
+      onVisibleChange={setTooltipVisible}>
+      <Tooltip.Target>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={l`Beta features enabled`}
+          accessibilityHint=""
+          hitSlop={hitSlop}
+          style={({hovered}) => [
+            a.rounded_full,
+            a.transition_transform,
+            {
+              backgroundColor: t.palette.primary_50,
+              padding,
+              transform: [
+                {
+                  scale: hovered ? 1.1 : 1,
+                },
+              ],
+            },
+          ]}
+          onPress={() => setTooltipVisible(v => !v)}>
+          <BeakerIcon width={width} fill={t.palette.primary_500} />
+        </Pressable>
+      </Tooltip.Target>
+      <Tooltip.BubbleText label={l`Beta features enabled`}>
+        <Trans>Beta features enabled</Trans>
+      </Tooltip.BubbleText>
+    </Tooltip.Outer>
+  )
+}