📓 Bookmarks (#8976)

* Add button to controls, respace

* Hook up shadow and mutation

* Add Bookmarks screen

* Build out Bookmarks screen

* Handle removals via shadow

* Use truncateAndInvalidate strategy

* Add empty state

* Add toasts

* Add undo buttons to toasts

* Stage NUX, needs image

* Finesse post controls

* New reply icon

* Use curvier variant of repost icon

* Prevent layout shift with align_start

* Update api pkg

* Swap in new image

* Limit spacing on desktop

* Rm decimals over 10k

* Better optimistic adding/removing

* Add metrics

* Comment

* Remove unused code block

* Remove debug limit

* Fork shadow for web/native

* Tweak alt

* add preventExpansion: true

* Refine hitslop

* Add count to anchor

* Reduce space in compact mode

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

1 files changed, 59 insertions, 0 deletions

diff --git a/src/screens/Bookmarks/components/EmptyState.tsx b/src/screens/Bookmarks/components/EmptyState.tsx
new file mode 100644
index 000000000..bfd80903d
--- /dev/null
+++ b/src/screens/Bookmarks/components/EmptyState.tsx
@@ -0,0 +1,59 @@
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {atoms as a, useTheme} from '#/alf'
+import {ButtonText} from '#/components/Button'
+import {BookmarkDeleteLarge} from '#/components/icons/Bookmark'
+import {Link} from '#/components/Link'
+import {Text} from '#/components/Typography'
+
+export function EmptyState() {
+  const t = useTheme()
+  const {_} = useLingui()
+
+  return (
+    <View
+      style={[
+        a.align_center,
+        {
+          paddingVertical: 64,
+        },
+      ]}>
+      <BookmarkDeleteLarge
+        width={64}
+        fill={t.atoms.text_contrast_medium.color}
+      />
+      <View style={[a.pt_sm]}>
+        <Text
+          style={[
+            a.text_lg,
+            a.font_medium,
+            a.text_center,
+            t.atoms.text_contrast_medium,
+          ]}>
+          <Trans>Nothing saved yet</Trans>
+        </Text>
+      </View>
+      <View style={[a.pt_2xl]}>
+        <Link
+          to="/"
+          action="navigate"
+          label={_(
+            msg({
+              message: `Go home`,
+              context: `Button to go back to the home timeline`,
+            }),
+          )}
+          size="small"
+          color="secondary">
+          <ButtonText>
+            <Trans context="Button to go back to the home timeline">
+              Go home
+            </Trans>
+          </ButtonText>
+        </Link>
+      </View>
+    </View>
+  )
+}