add tooltip

src/components/activity-notifications/SubscribeProfileButton.tsx

@@ -5,11 +5,13 @@ import {useLingui} from '@lingui/react'
 
 import {useRequireEmailVerification} from '#/lib/hooks/useRequireEmailVerification'
 import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
-import {atoms as a} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {BellPlus_Stroke2_Corner0_Rounded as BellPlusIcon} from '#/components/icons/BellPlus'
 import {BellRinging_Filled_Corner0_Rounded as BellRingingIcon} from '#/components/icons/BellRinging'
+import * as Tooltip from '#/components/Tooltip'
+import {Text} from '#/components/Typography'
+import {useActivitySubscriptionsNudged} from '#/storage/hooks/activity-subscriptions-nudged'
 import type * as bsky from '#/types/bsky'
 import {SubscribeProfileDialog} from './SubscribeProfileDialog'
 
@@ -23,6 +25,12 @@ export function SubscribeProfileButton({
   const {_} = useLingui()
   const requireEmailVerification = useRequireEmailVerification()
   const subscribeDialogControl = useDialogControl()
+  const [activitySubscriptionsNudged, setActivitySubscriptionsNudged] =
+    useActivitySubscriptionsNudged()
+
+  const onDismissTooltip = () => {
+    setActivitySubscriptionsNudged(true)
+  }
 
   const onPress = useCallback(() => {
     subscribeDialogControl.open()
@@ -47,18 +55,29 @@ export function SubscribeProfileButton({
 
   return (
     <>
-      <Button
+      <Tooltip.Outer
-        accessibilityRole="button"
+        visible={!activitySubscriptionsNudged}
-        testID="dmBtn"
+        onVisibleChange={onDismissTooltip}
-        size="small"
+        position="bottom">
-        color="secondary"
+        <Tooltip.Target>
-        variant="solid"
+          <Button
-        shape="round"
+            accessibilityRole="button"
-        label={_(msg`Get notified when ${name} posts`)}
+            testID="dmBtn"
-        style={[a.justify_center]}
+            size="small"
-        onPress={wrappedOnPress}>
+            color="secondary"
-        <ButtonIcon icon={Icon} size="md" />
+            variant="solid"
-      </Button>
+            shape="round"
+            label={_(msg`Get notified when ${name} posts`)}
+            onPress={wrappedOnPress}>
+            <ButtonIcon icon={Icon} size="md" />
+          </Button>
+        </Tooltip.Target>
+        <Tooltip.TextBubble>
+          <Text>
+            <Trans>Get notified about new posts</Trans>
+          </Text>
+        </Tooltip.TextBubble>
+      </Tooltip.Outer>
 
       <SubscribeProfileDialog
         control={subscribeDialogControl}

src/storage/hooks/activity-subscriptions-nudged.ts

@@ -0,0 +1,8 @@
+import {device, useStorage} from '#/storage'
+
+export function useActivitySubscriptionsNudged() {
+  const [activitySubscriptionsNudged = false, setActivitySubscriptionsNudged] =
+    useStorage(device, ['activitySubscriptionsNudged'])
+
+  return [activitySubscriptionsNudged, setActivitySubscriptionsNudged] as const
+}

src/storage/schema.ts

@@ -11,6 +11,7 @@ export type Device = {
   trendingBetaEnabled: boolean
   devMode: boolean
   demoMode: boolean
+  activitySubscriptionsNudged?: boolean
 }
 
 export type Account = {