Allow users to dismiss sidebar LEF banner (#9753)

(cherry picked from commit f82bc98d8d)
(cherry picked from commit 02f0c89f7b)

src/features/liveEvents/components/SidebarLiveEventFeedsBanner.tsx

@@ -1,13 +1,90 @@
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {atoms as a} from '#/alf'
+import {Button} from '#/components/Button'
+import {TimesLarge_Stroke2_Corner0_Rounded as CloseIcon} from '#/components/icons/Times'
+import * as Toast from '#/components/Toast'
 import {LiveEventFeedCardCompact} from '#/features/liveEvents/components/LiveEventFeedCardCompact'
-import {useLiveEvents} from '#/features/liveEvents/context'
+import {useUserPreferencedLiveEvents} from '#/features/liveEvents/context'
+import {useUpdateLiveEventPreferences} from '#/features/liveEvents/preferences'
+import {type LiveEventFeed} from '#/features/liveEvents/types'
 
 export function SidebarLiveEventFeedsBanner() {
-  const events = useLiveEvents()
+  const events = useUserPreferencedLiveEvents()
-  return events.feeds.map(feed => (
+  return events.feeds.map(feed => <Inner key={feed.id} feed={feed} />)
-    <LiveEventFeedCardCompact
+}
-      key={feed.id}
+
-      feed={feed}
+function Inner({feed}: {feed: LiveEventFeed}) {
-      metricContext="sidebar"
+  const {_} = useLingui()
-    />
+  const layout = feed.layouts.wide
-  ))
+
+  const {mutate: update, variables} = useUpdateLiveEventPreferences({
+    feed,
+    metricContext: 'sidebar',
+    onUpdateSuccess({undoAction}) {
+      Toast.show(
+        <Toast.Outer>
+          <Toast.Icon />
+          <Toast.Text>
+            {undoAction ? (
+              <Trans>Live event hidden</Trans>
+            ) : (
+              <Trans>Live event unhidden</Trans>
+            )}
+          </Toast.Text>
+          {undoAction && (
+            <Toast.Action
+              label={_(msg`Undo`)}
+              onPress={() => {
+                if (undoAction) {
+                  update(undoAction)
+                }
+              }}>
+              <Trans>Undo</Trans>
+            </Toast.Action>
+          )}
+        </Toast.Outer>,
+        {type: 'success'},
+      )
+    },
+  })
+
+  if (variables) return null
+
+  return (
+    <View style={[a.relative]}>
+      <LiveEventFeedCardCompact feed={feed} metricContext="sidebar" />
+
+      <View
+        style={[a.justify_center, a.absolute, {top: 0, right: 6, bottom: 0}]}>
+        <Button
+          label={_(msg`Dismiss live event banner`)}
+          size="tiny"
+          shape="round"
+          style={[a.z_10]}
+          onPress={() => {
+            update({type: 'hideFeed', id: feed.id})
+          }}>
+          {({hovered, pressed}) => (
+            <>
+              <View
+                style={[
+                  a.absolute,
+                  a.inset_0,
+                  a.rounded_full,
+                  {
+                    backgroundColor: layout.overlayColor,
+                    opacity: hovered || pressed ? 0.8 : 0.6,
+                  },
+                ]}
+              />
+              <CloseIcon size="xs" fill={layout.textColor} style={[a.z_20]} />
+            </>
+          )}
+        </Button>
+      </View>
+    </View>
+  )
 }