basic export repository link in settings (#2641)

* basic export repository link in settings

Absolutely no prior React experience, and limited TypeScript, so
probably doing all kinds of things wrong!

I tried to make it a download button instead of link but that didn't
work.

There is probably a safer way to construct the URL string.

I think having the download open in the browser is reasonable, as
opposed to an in-app save flow in mobile. But i'm not sure.

* Remove appview proxy toggle

* Move Settings screen to a subfolder

* Add support for the download attribute on links in web

* Rewrite ExportRepository modal using ALF

* Mobile ui tweaks

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

1 files changed, 103 insertions, 0 deletions

diff --git a/src/view/screens/Settings/ExportCarDialog.tsx b/src/view/screens/Settings/ExportCarDialog.tsx
new file mode 100644
index 000000000..720cd4f09
--- /dev/null
+++ b/src/view/screens/Settings/ExportCarDialog.tsx
@@ -0,0 +1,103 @@
+import React from 'react'
+import {View} from 'react-native'
+import {useLingui} from '@lingui/react'
+import {Trans, msg} from '@lingui/macro'
+
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import * as Dialog from '#/components/Dialog'
+import {Text, P} from '#/components/Typography'
+import {Button, ButtonText} from '#/components/Button'
+import {InlineLink, Link} from '#/components/Link'
+import {getAgent, useSession} from '#/state/session'
+
+export function ExportCarDialog({
+  control,
+}: {
+  control: Dialog.DialogOuterProps['control']
+}) {
+  const {_} = useLingui()
+  const t = useTheme()
+  const {gtMobile} = useBreakpoints()
+  const {currentAccount} = useSession()
+
+  const downloadUrl = React.useMemo(() => {
+    const agent = getAgent()
+    if (!currentAccount || !agent.session) {
+      return '' // shouldnt ever happen
+    }
+    // eg: https://bsky.social/xrpc/com.atproto.sync.getRepo?did=did:plc:ewvi7nxzyoun6zhxrhs64oiz
+    const url = new URL(agent.pdsUrl || agent.service)
+    url.pathname = '/xrpc/com.atproto.sync.getRepo'
+    url.searchParams.set('did', agent.session.did)
+    return url.toString()
+  }, [currentAccount])
+
+  return (
+    <Dialog.Outer control={control}>
+      <Dialog.Handle />
+
+      <Dialog.ScrollableInner
+        accessibilityDescribedBy="dialog-description"
+        accessibilityLabelledBy="dialog-title">
+        <View style={[a.relative, a.gap_md, a.w_full]}>
+          <Text nativeID="dialog-title" style={[a.text_2xl, a.font_bold]}>
+            <Trans>Export My Data</Trans>
+          </Text>
+          <P nativeID="dialog-description" style={[a.text_sm]}>
+            <Trans>
+              Your account repository, containing all public data records, can
+              be downloaded as a "CAR" file. This file does not include media
+              embeds, such as images, or your private data, which must be
+              fetched separately.
+            </Trans>
+          </P>
+
+          <Link
+            variant="solid"
+            color="primary"
+            size="large"
+            label={_(msg`Download CAR file`)}
+            to={downloadUrl}
+            download="repo.car">
+            <ButtonText>
+              <Trans>Download CAR file</Trans>
+            </ButtonText>
+          </Link>
+
+          <P
+            style={[
+              a.py_xs,
+              t.atoms.text_contrast_medium,
+              a.text_sm,
+              a.leading_snug,
+              a.flex_1,
+            ]}>
+            <Trans>
+              This feature is in beta. You can read more about repository
+              exports in{' '}
+              <InlineLink
+                to="https://atproto.com/blog/repo-export"
+                style={[a.text_sm]}>
+                this blogpost.
+              </InlineLink>
+            </Trans>
+          </P>
+
+          <View style={gtMobile && [a.flex_row, a.justify_end]}>
+            <Button
+              testID="doneBtn"
+              variant="outline"
+              color="primary"
+              size={gtMobile ? 'small' : 'large'}
+              onPress={() => control.close()}
+              label={_(msg`Done`)}>
+              {_(msg`Done`)}
+            </Button>
+          </View>
+
+          {!gtMobile && <View style={{height: 40}} />}
+        </View>
+      </Dialog.ScrollableInner>
+    </Dialog.Outer>
+  )
+}