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 <pfrazee@gmail.com>
Co-authored-by: Eric Bailey <git@esb.lol>

src/screens/Settings/AppearanceSettings.tsx

@@ -13,7 +13,7 @@ import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
 import {isNative} from '#/platform/detection'
 import {useSession} from '#/state/session'
 import {useSetThemePrefs, useThemePrefs} from '#/state/shell'
-import {Logo} from '#/view/icons/Logo'
+import {SettingsListItem as AppIconSettingsListItem} from '#/screens/Settings/AppIconSettings/SettingsListItem'
 import {atoms as a, native, useAlf, useTheme} from '#/alf'
 import * as ToggleButton from '#/components/forms/ToggleButton'
 import {Props as SVGIconProps} from '#/components/icons/common'
@@ -181,15 +181,7 @@ export function AppearanceSettingsScreen({}: Props) {
               {isNative && DISCOVER_DEBUG_DIDS[currentAccount?.did ?? ''] && (
                 <>
                   <SettingsList.Divider />
-
-                  <SettingsList.LinkItem
-                    to="/settings/app-icon"
-                    label={_(msg`App Icon`)}>
-                    <SettingsList.ItemIcon icon={Logo} />
-                    <SettingsList.ItemText>
-                      <Trans>App Icon</Trans>
-                    </SettingsList.ItemText>
-                  </SettingsList.LinkItem>
+                  <AppIconSettingsListItem />
                 </>
               )}
             </Animated.View>