add dialog to settings

This commit is contained in:
Samuel Newman
2025-06-23 14:20:31 +03:00
parent 108aba022b
commit fc5688ceda
4 changed files with 54 additions and 4 deletions
@@ -1,4 +1,5 @@
import {useCallback} from 'react' import {useCallback} from 'react'
import {type ModerationOpts} from '@atproto/api'
import {msg, Trans} from '@lingui/macro' import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
@@ -13,8 +14,10 @@ import {SubscribeProfileDialog} from './SubscribeProfileDialog'
export function SubscribeProfileButton({ export function SubscribeProfileButton({
profile, profile,
moderationOpts,
}: { }: {
profile: bsky.profile.AnyProfileView profile: bsky.profile.AnyProfileView
moderationOpts: ModerationOpts
}) { }) {
const {_} = useLingui() const {_} = useLingui()
const requireEmailVerification = useRequireEmailVerification() const requireEmailVerification = useRequireEmailVerification()
@@ -53,6 +56,7 @@ export function SubscribeProfileButton({
<SubscribeProfileDialog <SubscribeProfileDialog
control={subscribeDialogControl} control={subscribeDialogControl}
profile={profile} profile={profile}
moderationOpts={moderationOpts}
/> />
</> </>
) )
@@ -1,5 +1,6 @@
import {useMemo, useState} from 'react' import {useMemo, useState} from 'react'
import {View} from 'react-native' import {View} from 'react-native'
import {type ModerationOpts} from '@atproto/api'
import {msg, Trans} from '@lingui/macro' import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
@@ -10,20 +11,29 @@ import {atoms as a} from '#/alf'
import {Button, type ButtonProps, ButtonText} from '#/components/Button' import {Button, type ButtonProps, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog' import * as Dialog from '#/components/Dialog'
import * as Toggle from '#/components/forms/Toggle' import * as Toggle from '#/components/forms/Toggle'
import * as ProfileCard from '#/components/ProfileCard'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
import type * as bsky from '#/types/bsky' import type * as bsky from '#/types/bsky'
export function SubscribeProfileDialog({ export function SubscribeProfileDialog({
control, control,
profile, profile,
moderationOpts,
includeProfile,
}: { }: {
control: Dialog.DialogControlProps control: Dialog.DialogControlProps
profile: bsky.profile.AnyProfileView profile: bsky.profile.AnyProfileView
moderationOpts: ModerationOpts
includeProfile?: boolean
}) { }) {
return ( return (
<Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}> <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
<Dialog.Handle /> <Dialog.Handle />
<DialogInner profile={profile} /> <DialogInner
profile={profile}
moderationOpts={moderationOpts}
includeProfile={includeProfile}
/>
</Dialog.Outer> </Dialog.Outer>
) )
} }
@@ -34,7 +44,15 @@ const initialState = {
replies: false, replies: false,
} }
function DialogInner({profile}: {profile: bsky.profile.AnyProfileView}) { function DialogInner({
profile,
moderationOpts,
includeProfile,
}: {
profile: bsky.profile.AnyProfileView
moderationOpts: ModerationOpts
includeProfile?: boolean
}) {
const {_} = useLingui() const {_} = useLingui()
const t = useTheme() const t = useTheme()
const control = Dialog.useDialogContext() const control = Dialog.useDialogContext()
@@ -90,6 +108,20 @@ function DialogInner({profile}: {profile: bsky.profile.AnyProfileView}) {
</Text> </Text>
</View> </View>
{includeProfile && (
<ProfileCard.Header>
<ProfileCard.Avatar
profile={profile}
moderationOpts={moderationOpts}
disabledPreview
/>
<ProfileCard.NameAndHandle
profile={profile}
moderationOpts={moderationOpts}
/>
</ProfileCard.Header>
)}
<Toggle.Group <Toggle.Group
label={_(msg`Subscribe to account activity`)} label={_(msg`Subscribe to account activity`)}
values={values} values={values}
@@ -204,7 +204,10 @@ let ProfileHeaderStandard = ({
) : !profile.viewer?.blockedBy ? ( ) : !profile.viewer?.blockedBy ? (
<> <>
{hasSession && !subscriptionsDisallowed && ( {hasSession && !subscriptionsDisallowed && (
<SubscribeProfileButton profile={profile} /> <SubscribeProfileButton
profile={profile}
moderationOpts={moderationOpts}
/>
)} )}
{hasSession && <MessageProfileButton profile={profile} />} {hasSession && <MessageProfileButton profile={profile} />}
@@ -16,8 +16,10 @@ import {useActivitySubscriptionsQuery} from '#/state/queries/activity-subscripti
import {useNotificationSettingsQuery} from '#/state/queries/notifications/settings' import {useNotificationSettingsQuery} from '#/state/queries/notifications/settings'
import {List} from '#/view/com/util/List' import {List} from '#/view/com/util/List'
import {atoms as a, useTheme} from '#/alf' import {atoms as a, useTheme} from '#/alf'
import {SubscribeProfileDialog} from '#/components/activity-notifications/SubscribeProfileDialog'
import * as Admonition from '#/components/Admonition' import * as Admonition from '#/components/Admonition'
import {Button, ButtonText} from '#/components/Button' import {Button, ButtonText} from '#/components/Button'
import {useDialogControl} from '#/components/Dialog'
import {Bell_Filled_Corner0_Rounded as BellIcon} from '#/components/icons/Bell' import {Bell_Filled_Corner0_Rounded as BellIcon} from '#/components/icons/Bell'
import {BellRinging_Stroke2_Corner0_Rounded as BellRingingIcon} from '#/components/icons/BellRinging' import {BellRinging_Stroke2_Corner0_Rounded as BellRingingIcon} from '#/components/icons/BellRinging'
import * as Layout from '#/components/Layout' import * as Layout from '#/components/Layout'
@@ -197,6 +199,7 @@ function ActivitySubscriptionCard({
profile: bsky.profile.AnyProfileView profile: bsky.profile.AnyProfileView
moderationOpts: ModerationOpts moderationOpts: ModerationOpts
}) { }) {
const control = useDialogControl()
const {_} = useLingui() const {_} = useLingui()
const t = useTheme() const t = useTheme()
@@ -226,7 +229,8 @@ function ActivitySubscriptionCard({
)} )}
size="small" size="small"
color="primary" color="primary"
variant="solid"> variant="solid"
onPress={control.open}>
<ButtonText> <ButtonText>
<Trans>Edit</Trans> <Trans>Edit</Trans>
</ButtonText> </ButtonText>
@@ -234,6 +238,13 @@ function ActivitySubscriptionCard({
</ProfileCard.Header> </ProfileCard.Header>
{/* <ProfileCard.Labels profile={profile} moderationOpts={moderationOpts} /> */} {/* <ProfileCard.Labels profile={profile} moderationOpts={moderationOpts} /> */}
</ProfileCard.Outer> </ProfileCard.Outer>
<SubscribeProfileDialog
control={control}
profile={profile}
moderationOpts={moderationOpts}
includeProfile
/>
</View> </View>
) )
} }