Nicer app icon screen (#6972)

* wip exploration

* list format instead of grid

* fix normalising default name

* adjust margins

* Rework the app icon link

* Decrease app icon size

* Adjust some spacing

* Move some things around to fix web errors

* Fix pathname

---------

Co-authored-by: Paul Frazee <[email protected]>
Co-authored-by: Eric Bailey <[email protected]>

src/screens/Settings/AppIconSettings/AppIconImage.tsx

@@ -0,0 +1,33 @@
+import {Image} from 'expo-image'
+
+import {AppIconSet} from '#/screens/Settings/AppIconSettings/types'
+import {atoms as a, platform, useTheme} from '#/alf'
+
+export function AppIconImage({
+  icon,
+  size = 50,
+}: {
+  icon: AppIconSet
+  size: number
+}) {
+  const t = useTheme()
+  return (
+    <Image
+      source={platform({
+        ios: icon.iosImage(),
+        android: icon.androidImage(),
+      })}
+      style={[
+        {width: size, height: size},
+        platform({
+          ios: {borderRadius: size / 5},
+          android: a.rounded_full,
+        }),
+        a.curve_continuous,
+        t.atoms.border_contrast_medium,
+        a.border,
+      ]}
+      accessibilityIgnoresInvertColors
+    />
+  )
+}

src/screens/Settings/AppIconSettings/SettingsListItem.tsx

@@ -0,0 +1,29 @@
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {AppIconImage} from '#/screens/Settings/AppIconSettings/AppIconImage'
+import {useCurrentAppIcon} from '#/screens/Settings/AppIconSettings/useCurrentAppIcon'
+import * as SettingsList from '#/screens/Settings/components/SettingsList'
+import {atoms as a} from '#/alf'
+import {Shapes_Stroke2_Corner0_Rounded as Shapes} from '#/components/icons/Shapes'
+
+export function SettingsListItem() {
+  const {_} = useLingui()
+  const icon = useCurrentAppIcon()
+
+  return (
+    <SettingsList.LinkItem
+      to="/settings/app-icon"
+      label={_(msg`App Icon`)}
+      contentContainerStyle={[a.align_start]}>
+      <SettingsList.ItemIcon icon={Shapes} />
+      <View style={[a.flex_1]}>
+        <SettingsList.ItemText style={[a.pt_xs, a.pb_md]}>
+          <Trans>App Icon</Trans>
+        </SettingsList.ItemText>
+        <AppIconImage icon={icon} size={60} />
+      </View>
+    </SettingsList.LinkItem>
+  )
+}

src/screens/Settings/AppIconSettings/SettingsListItem.web.tsx

@@ -0,0 +1 @@
+export function SettingsListItem() {}