Settings revamp (#5745)

* start building storybook

* add title

* add some styles

* try out new icons

* more settings list component parts

* make text do the spacing

* clean up storybook

* gated new settings screen

* switch account

* add current profile

* use Layout.Screen

* Layout.Header and Layout.Content

* translate helpdesk text

thanks @surfdude29!

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* add account settings

* undo changes to export car dialog

* privacy and security screen

* Translate protect account stuff

Thanks @surfdude29!

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* content and media settings

* about settings

* 2fa copy

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* a11y and appearance

* use new components for appearance settings

* redesign accessibility settings

* Update ContentAndMediaSettings.tsx

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* add divider

* remove a11y and appearance middleman screen

* fix web settingslist styles

* new SettingsList.Group component

* explain how portal magic works

* hide pwioptout in old location

* Update Settings.tsx

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* replace gate with `IS_INTERNAL`

* add IS_INTERNAL to app-info.web

* fix profile area growing

* add close button to switch account

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

1 files changed, 180 insertions, 0 deletions

diff --git a/src/screens/Settings/AccountSettings.tsx b/src/screens/Settings/AccountSettings.tsx
new file mode 100644
index 000000000..19101d2f4
--- /dev/null
+++ b/src/screens/Settings/AccountSettings.tsx
@@ -0,0 +1,180 @@
+import React from 'react'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {NativeStackScreenProps} from '@react-navigation/native-stack'
+import {useQueryClient} from '@tanstack/react-query'
+
+import {CommonNavigatorParams} from '#/lib/routes/types'
+import {useModalControls} from '#/state/modals'
+import {RQKEY as RQKEY_PROFILE} from '#/state/queries/profile'
+import {useProfileQuery} from '#/state/queries/profile'
+import {useSession} from '#/state/session'
+import {ExportCarDialog} from '#/view/screens/Settings/ExportCarDialog'
+import * as SettingsList from '#/screens/Settings/components/SettingsList'
+import {atoms as a, useTheme} from '#/alf'
+import {useDialogControl} from '#/components/Dialog'
+import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings'
+import {At_Stroke2_Corner2_Rounded as AtIcon} from '#/components/icons/At'
+import {BirthdayCake_Stroke2_Corner2_Rounded as BirthdayCakeIcon} from '#/components/icons/BirthdayCake'
+import {Car_Stroke2_Corner2_Rounded as CarIcon} from '#/components/icons/Car'
+import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
+import {Envelope_Stroke2_Corner2_Rounded as EnvelopeIcon} from '#/components/icons/Envelope'
+import {Freeze_Stroke2_Corner2_Rounded as FreezeIcon} from '#/components/icons/Freeze'
+import {Lock_Stroke2_Corner2_Rounded as LockIcon} from '#/components/icons/Lock'
+import {PencilLine_Stroke2_Corner2_Rounded as PencilIcon} from '#/components/icons/Pencil'
+import {Trash_Stroke2_Corner2_Rounded} from '#/components/icons/Trash'
+import {Verified_Stroke2_Corner2_Rounded as VerifiedIcon} from '#/components/icons/Verified'
+import * as Layout from '#/components/Layout'
+import {DeactivateAccountDialog} from './components/DeactivateAccountDialog'
+
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'AccountSettings'>
+export function AccountSettingsScreen({}: Props) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {currentAccount} = useSession()
+  const queryClient = useQueryClient()
+  const {data: profile} = useProfileQuery({did: currentAccount?.did})
+  const {openModal} = useModalControls()
+  const birthdayControl = useDialogControl()
+  const exportCarControl = useDialogControl()
+  const deactivateAccountControl = useDialogControl()
+
+  return (
+    <Layout.Screen>
+      <Layout.Header title={_(msg`Account`)} />
+      <Layout.Content>
+        <SettingsList.Container>
+          <SettingsList.Item>
+            <SettingsList.ItemIcon icon={EnvelopeIcon} />
+            <SettingsList.ItemText>
+              <Trans>Email</Trans>
+            </SettingsList.ItemText>
+            {currentAccount && (
+              <>
+                <SettingsList.BadgeText>
+                  {currentAccount.email || <Trans>(no email)</Trans>}
+                </SettingsList.BadgeText>
+                {currentAccount.emailConfirmed ? (
+                  <CheckIcon color={t.palette.positive_500} size="sm" />
+                ) : (
+                  <SettingsList.BadgeButton
+                    label={_(msg`Verify`)}
+                    onPress={() => {}}
+                  />
+                )}
+              </>
+            )}
+          </SettingsList.Item>
+          <SettingsList.PressableItem
+            label={_(msg`Change email`)}
+            onPress={() => openModal({name: 'change-email'})}>
+            <SettingsList.ItemIcon icon={PencilIcon} />
+            <SettingsList.ItemText>
+              <Trans>Change email</Trans>
+            </SettingsList.ItemText>
+            <SettingsList.Chevron />
+          </SettingsList.PressableItem>
+          <SettingsList.LinkItem
+            to="/settings/privacy-and-security"
+            label={_(msg`Protect your account`)}
+            style={[
+              a.my_xs,
+              a.mx_lg,
+              a.rounded_md,
+              {backgroundColor: t.palette.primary_50},
+            ]}
+            chevronColor={t.palette.primary_500}
+            hoverStyle={[{backgroundColor: t.palette.primary_100}]}
+            contentContainerStyle={[a.rounded_md, a.px_lg]}>
+            <SettingsList.ItemIcon
+              icon={VerifiedIcon}
+              color={t.palette.primary_500}
+            />
+            <SettingsList.ItemText
+              style={[{color: t.palette.primary_500}, a.font_bold]}>
+              <Trans>Protect your account</Trans>
+            </SettingsList.ItemText>
+          </SettingsList.LinkItem>
+          <SettingsList.Divider />
+          <SettingsList.Item>
+            <SettingsList.ItemIcon icon={BirthdayCakeIcon} />
+            <SettingsList.ItemText>
+              <Trans>Birthday</Trans>
+            </SettingsList.ItemText>
+            <SettingsList.BadgeButton
+              label={_(msg`Edit`)}
+              onPress={() => birthdayControl.open()}
+            />
+          </SettingsList.Item>
+          <SettingsList.PressableItem
+            label={_(msg`Password`)}
+            onPress={() => openModal({name: 'change-password'})}>
+            <SettingsList.ItemIcon icon={LockIcon} />
+            <SettingsList.ItemText>
+              <Trans>Password</Trans>
+            </SettingsList.ItemText>
+            <SettingsList.Chevron />
+          </SettingsList.PressableItem>
+          <SettingsList.PressableItem
+            label={_(msg`Handle`)}
+            onPress={() =>
+              openModal({
+                name: 'change-handle',
+                onChanged() {
+                  if (currentAccount) {
+                    // refresh my profile
+                    queryClient.invalidateQueries({
+                      queryKey: RQKEY_PROFILE(currentAccount.did),
+                    })
+                  }
+                },
+              })
+            }>
+            <SettingsList.ItemIcon icon={AtIcon} />
+            <SettingsList.ItemText>
+              <Trans>Handle</Trans>
+            </SettingsList.ItemText>
+            {profile && (
+              <SettingsList.BadgeText>@{profile.handle}</SettingsList.BadgeText>
+            )}
+            <SettingsList.Chevron />
+          </SettingsList.PressableItem>
+          <SettingsList.Divider />
+          <SettingsList.PressableItem
+            label={_(msg`Export my data`)}
+            onPress={() => exportCarControl.open()}>
+            <SettingsList.ItemIcon icon={CarIcon} />
+            <SettingsList.ItemText>
+              <Trans>Export my data</Trans>
+            </SettingsList.ItemText>
+            <SettingsList.Chevron />
+          </SettingsList.PressableItem>
+          <SettingsList.PressableItem
+            label={_(msg`Deactivate account`)}
+            onPress={() => deactivateAccountControl.open()}
+            destructive>
+            <SettingsList.ItemIcon icon={FreezeIcon} />
+            <SettingsList.ItemText>
+              <Trans>Deactivate account</Trans>
+            </SettingsList.ItemText>
+            <SettingsList.Chevron />
+          </SettingsList.PressableItem>
+          <SettingsList.PressableItem
+            label={_(msg`Delete account`)}
+            onPress={() => openModal({name: 'delete-account'})}
+            destructive>
+            <SettingsList.ItemIcon icon={Trash_Stroke2_Corner2_Rounded} />
+            <SettingsList.ItemText>
+              <Trans>Delete account</Trans>
+            </SettingsList.ItemText>
+            <SettingsList.Chevron />
+          </SettingsList.PressableItem>
+        </SettingsList.Container>
+      </Layout.Content>
+
+      <BirthDateSettingsDialog control={birthdayControl} />
+      <ExportCarDialog control={exportCarControl} />
+      <DeactivateAccountDialog control={deactivateAccountControl} />
+    </Layout.Screen>
+  )
+}