Refactor notification settings as dialogs (#10646)

Co-authored-by: Samuel Newman <mozzius@protonmail.com>
2026-05-29 09:35:14 -07:00
parent e52adeac12
commit ce4efc511b
21 changed files with 338 additions and 1082 deletions
@@ -0,0 +1,105 @@
+import {View} from 'react-native'
+import {type AppBskyNotificationDefs} from '@atproto/api'
+import {Trans, useLingui} from '@lingui/react/macro'
+
+import {useNotificationSettingsQuery} from '#/state/queries/notifications/settings'
+import * as SettingsList from '#/screens/Settings/components/SettingsList'
+import {PreferenceControls} from '#/screens/Settings/NotificationSettings/components/PreferenceControls'
+import {atoms as a, useTheme, web} from '#/alf'
+import {Admonition} from '#/components/Admonition'
+import {Button, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {type Props as SVGIconProps} from '#/components/icons/common'
+import {Text} from '#/components/Typography'
+import {IS_NATIVE} from '#/env'
+
+type NotificationSettingsDialogProps = {
+  control: Dialog.DialogControlProps
+  name: Exclude<keyof AppBskyNotificationDefs.Preferences, '$type'>
+  syncOthers?: Exclude<keyof AppBskyNotificationDefs.Preferences, '$type'>[]
+  icon: React.ComponentType<SVGIconProps>
+  titleText: React.ReactNode
+  subtitleText: React.ReactNode
+  allowDisableInApp?: boolean
+}
+
+export function NotificationSettingsDialog({
+  control,
+  name,
+  syncOthers,
+  titleText,
+  subtitleText,
+  allowDisableInApp = true,
+}: NotificationSettingsDialogProps) {
+  return (
+    <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
+      <NotificationSettingsDialogInner
+        control={control}
+        name={name}
+        syncOthers={syncOthers}
+        titleText={titleText}
+        subtitleText={subtitleText}
+        allowDisableInApp={allowDisableInApp}
+      />
+    </Dialog.Outer>
+  )
+}
+
+function NotificationSettingsDialogInner({
+  control,
+  name,
+  syncOthers,
+  titleText,
+  subtitleText,
+  allowDisableInApp,
+}: Omit<NotificationSettingsDialogProps, 'icon'>) {
+  const t = useTheme()
+  const {t: l} = useLingui()
+  const {data: preferences, isError} = useNotificationSettingsQuery()
+
+  return (
+    <>
+      <Dialog.Handle />
+      <Dialog.ScrollableInner
+        label={l`Notification settings`}
+        style={web({maxWidth: 400})}>
+        <SettingsList.Container>
+          <View style={[a.flex_1, a.gap_xs, a.mb_md]}>
+            <Text style={[a.font_semi_bold, a.text_lg]}>{titleText}</Text>
+            <Text
+              style={[a.text_sm, t.atoms.text_contrast_medium, a.leading_snug]}>
+              {subtitleText}
+            </Text>
+          </View>
+          {isError ? (
+            <View style={[a.mt_md]}>
+              <Admonition type="error">
+                <Trans>Failed to load notification settings.</Trans>
+              </Admonition>
+            </View>
+          ) : (
+            <PreferenceControls
+              name={name}
+              syncOthers={syncOthers}
+              preference={preferences?.[name]}
+              allowDisableInApp={allowDisableInApp}
+            />
+          )}
+        </SettingsList.Container>
+        <Dialog.Close />
+        {IS_NATIVE && (
+          <Button
+            color="secondary"
+            size="large"
+            label={l`Close dialog`}
+            onPress={() => control.close()}
+            style={[a.mt_md]}>
+            <ButtonText>
+              <Trans>Done</Trans>
+            </ButtonText>
+          </Button>
+        )}
+      </Dialog.ScrollableInner>
+    </>
+  )
+}