2 files changed, 89 insertions, 7 deletions

diff --git a/src/view/lib/notifee.ts b/src/view/lib/notifee.ts
new file mode 100644
index 000000000..5e1917381
--- /dev/null
+++ b/src/view/lib/notifee.ts
@@ -0,0 +1,54 @@
+import notifee from '@notifee/react-native'
+import {AppBskyEmbedImages} from '@atproto/api'
+import {NotificationsViewItemModel} from '../../state/models/notifications-view'
+import {enforceLen} from '../../lib/strings'
+
+export function displayNotification(
+  title: string,
+  body?: string,
+  image?: string,
+) {
+  const opts: {title: string; body?: string; ios?: any} = {title}
+  if (body) {
+    opts.body = enforceLen(body, 70, true)
+  }
+  if (image) {
+    opts.ios = {
+      attachments: [{url: image}],
+    }
+  }
+  return notifee.displayNotification(opts)
+}
+
+export function displayNotificationFromModel(
+  notif: NotificationsViewItemModel,
+) {
+  let author = notif.author.displayName || notif.author.handle
+  let title: string
+  let body: string = ''
+  if (notif.isUpvote) {
+    title = `${author} liked your post`
+    body = notif.additionalPost?.thread?.postRecord?.text || ''
+  } else if (notif.isRepost) {
+    title = `${author} reposted your post`
+    body = notif.additionalPost?.thread?.postRecord?.text || ''
+  } else if (notif.isMention) {
+    title = `${author} mentioned you`
+    body = notif.additionalPost?.thread?.postRecord?.text || ''
+  } else if (notif.isReply) {
+    title = `${author} replied to your post`
+    body = notif.additionalPost?.thread?.postRecord?.text || ''
+  } else if (notif.isFollow) {
+    title = `${author} followed you`
+  } else {
+    return
+  }
+  let image
+  if (
+    AppBskyEmbedImages.isPresented(notif.additionalPost?.thread?.post.embed) &&
+    notif.additionalPost?.thread?.post.embed.images[0]?.thumb
+  ) {
+    image = notif.additionalPost.thread.post.embed.images[0].thumb
+  }
+  return displayNotification(title, body, image)
+}
diff --git a/src/view/screens/Debug.tsx b/src/view/screens/Debug.tsx
index 9365724a0..865f62dc6 100644
--- a/src/view/screens/Debug.tsx
+++ b/src/view/screens/Debug.tsx
@@ -5,6 +5,8 @@ import {ThemeProvider} from '../lib/ThemeContext'
 import {PaletteColorName} from '../lib/ThemeContext'
 import {usePalette} from '../lib/hooks/usePalette'
 import {s} from '../lib/styles'
+import {DEF_AVATAR} from '../lib/assets'
+import {displayNotification} from '../lib/notifee'
 
 import {Text} from '../com/util/text/Text'
 import {ViewSelector} from '../com/util/ViewSelector'
@@ -17,7 +19,7 @@ import {RadioGroup} from '../com/util/forms/RadioGroup'
 import {ErrorScreen} from '../com/util/error/ErrorScreen'
 import {ErrorMessage} from '../com/util/error/ErrorMessage'
 
-const MAIN_VIEWS = ['Base', 'Controls', 'Error']
+const MAIN_VIEWS = ['Base', 'Controls', 'Error', 'Notifs']
 
 export const Debug = () => {
   const [colorScheme, setColorScheme] = React.useState<'light' | 'dark'>(
@@ -46,9 +48,9 @@ function DebugInner({
   const [currentView, setCurrentView] = React.useState<number>(0)
   const pal = usePalette('default')
 
-  const renderItem = item => {
+  const renderItem = (item, i) => {
     return (
-      <View>
+      <View key={`view-${i}`}>
         <View style={[s.pt10, s.pl10, s.pr10]}>
           <ToggleButton
             type="default-light"
@@ -57,12 +59,14 @@ function DebugInner({
             label="Dark mode"
           />
         </View>
-        {item.currentView === 2 ? (
-          <ErrorView key="error" />
+        {item.currentView === 3 ? (
+          <NotifsView />
+        ) : item.currentView === 2 ? (
+          <ErrorView />
         ) : item.currentView === 1 ? (
-          <ControlsView key="controls" />
+          <ControlsView />
         ) : (
-          <BaseView key="base" />
+          <BaseView />
         )}
       </View>
     )
@@ -168,6 +172,30 @@ function ErrorView() {
   )
 }
 
+function NotifsView() {
+  const trigger = () => {
+    displayNotification(
+      'Paul Frazee liked your post',
+      "Hello world! This is a test of the notifications card. The text is long to see how that's handled.",
+    )
+  }
+  const triggerImg = () => {
+    displayNotification(
+      'Paul Frazee liked your post',
+      "Hello world! This is a test of the notifications card. The text is long to see how that's handled.",
+      DEF_AVATAR,
+    )
+  }
+  return (
+    <View style={s.p10}>
+      <View style={s.flexRow}>
+        <Button onPress={trigger} label="Trigger" />
+        <Button onPress={triggerImg} label="Trigger w/image" style={s.ml5} />
+      </View>
+    </View>
+  )
+}
+
 function PaletteView({palette}: {palette: PaletteColorName}) {
   const defaultPal = usePalette('default')
   const pal = usePalette(palette)