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>
2024-10-29 21:14:54 +00:00
parent ab492cd77a
commit c8f264b78b
59 changed files with 1811 additions and 133 deletions
@@ -0,0 +1,104 @@
+import React from 'react'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {NativeStackScreenProps} from '@react-navigation/native-stack'
+
+import {CommonNavigatorParams} from '#/lib/routes/types'
+import {isNative} from '#/platform/detection'
+import {useAutoplayDisabled, useSetAutoplayDisabled} from '#/state/preferences'
+import {
+  useInAppBrowser,
+  useSetInAppBrowser,
+} from '#/state/preferences/in-app-browser'
+import * as SettingsList from '#/screens/Settings/components/SettingsList'
+import * as Toggle from '#/components/forms/Toggle'
+import {Bubbles_Stroke2_Corner2_Rounded as BubblesIcon} from '#/components/icons/Bubble'
+import {Hashtag_Stroke2_Corner0_Rounded as HashtagIcon} from '#/components/icons/Hashtag'
+import {Home_Stroke2_Corner2_Rounded as HomeIcon} from '#/components/icons/Home'
+import {Macintosh_Stroke2_Corner2_Rounded as MacintoshIcon} from '#/components/icons/Macintosh'
+import {Play_Stroke2_Corner2_Rounded as PlayIcon} from '#/components/icons/Play'
+import {Window_Stroke2_Corner2_Rounded as WindowIcon} from '#/components/icons/Window'
+import * as Layout from '#/components/Layout'
+
+type Props = NativeStackScreenProps<
+  CommonNavigatorParams,
+  'ContentAndMediaSettings'
+>
+export function ContentAndMediaSettingsScreen({}: Props) {
+  const {_} = useLingui()
+  const autoplayDisabledPref = useAutoplayDisabled()
+  const setAutoplayDisabledPref = useSetAutoplayDisabled()
+  const inAppBrowserPref = useInAppBrowser()
+  const setUseInAppBrowser = useSetInAppBrowser()
+
+  return (
+    <Layout.Screen>
+      <Layout.Header title={_(msg`Content and Media`)} />
+      <Layout.Content>
+        <SettingsList.Container>
+          <SettingsList.LinkItem
+            to="/settings/saved-feeds"
+            label={_(msg`Manage saved feeds`)}>
+            <SettingsList.ItemIcon icon={HashtagIcon} />
+            <SettingsList.ItemText>
+              <Trans>Manage saved feeds</Trans>
+            </SettingsList.ItemText>
+          </SettingsList.LinkItem>
+          <SettingsList.LinkItem
+            to="/settings/threads"
+            label={_(msg`Thread preferences`)}>
+            <SettingsList.ItemIcon icon={BubblesIcon} />
+            <SettingsList.ItemText>
+              <Trans>Thread preferences</Trans>
+            </SettingsList.ItemText>
+          </SettingsList.LinkItem>
+          <SettingsList.LinkItem
+            to="/settings/following-feed"
+            label={_(msg`Following feed preferences`)}>
+            <SettingsList.ItemIcon icon={HomeIcon} />
+            <SettingsList.ItemText>
+              <Trans>Following feed preferences</Trans>
+            </SettingsList.ItemText>
+          </SettingsList.LinkItem>
+          <SettingsList.LinkItem
+            to="/settings/external-embeds"
+            label={_(msg`External media`)}>
+            <SettingsList.ItemIcon icon={MacintoshIcon} />
+            <SettingsList.ItemText>
+              <Trans>External media</Trans>
+            </SettingsList.ItemText>
+          </SettingsList.LinkItem>
+          <SettingsList.Divider />
+          {isNative && (
+            <Toggle.Item
+              name="use_in_app_browser"
+              label={_(msg`Use in-app browser to open links`)}
+              value={inAppBrowserPref ?? false}
+              onChange={value => setUseInAppBrowser(value)}>
+              <SettingsList.Item>
+                <SettingsList.ItemIcon icon={WindowIcon} />
+                <SettingsList.ItemText>
+                  <Trans>Use in-app browser to open links</Trans>
+                </SettingsList.ItemText>
+                <Toggle.Platform />
+              </SettingsList.Item>
+            </Toggle.Item>
+          )}
+          <Toggle.Item
+            name="disable_autoplay"
+            label={_(msg`Disable autoplay for videos and GIFs`)}
+            value={autoplayDisabledPref}
+            onChange={value => setAutoplayDisabledPref(value)}>
+            <SettingsList.Item>
+              <SettingsList.ItemIcon icon={PlayIcon} />
+              <SettingsList.ItemText>
+                <Trans>Disable autoplay for videos and GIFs</Trans>
+              </SettingsList.ItemText>
+              <Toggle.Platform />
+            </SettingsList.Item>
+          </Toggle.Item>
+        </SettingsList.Container>
+      </Layout.Content>
+    </Layout.Screen>
+  )
+}