Implement notifications

src/state/index.ts

@@ -9,6 +9,7 @@ import {ShellModel} from './models/shell'
 
 const ROOT_STATE_STORAGE_KEY = 'root'
 const DEFAULT_SERVICE = 'http://localhost:2583'
+const STATE_FETCH_INTERVAL = 15e3
 
 export async function setupState() {
   let rootStore: RootStoreModel
@@ -32,8 +33,14 @@ export async function setupState() {
   })
 
   await rootStore.session.setup()
+  await rootStore.fetchStateUpdate()
   console.log(rootStore.me)
 
+  // periodic state fetch
+  setInterval(() => {
+    rootStore.fetchStateUpdate()
+  }, STATE_FETCH_INTERVAL)
+
   return rootStore
 }
 

src/state/models/me.ts

@@ -6,6 +6,7 @@ export class MeModel {
   name?: string
   displayName?: string
   description?: string
+  notificationCount: number = 0
 
   constructor(public rootStore: RootStoreModel) {
     makeAutoObservable(this, {rootStore: false}, {autoBind: true})
@@ -16,6 +17,7 @@ export class MeModel {
     this.name = undefined
     this.displayName = undefined
     this.description = undefined
+    this.notificationCount = 0
   }
 
   async load() {
@@ -39,4 +41,11 @@ export class MeModel {
       this.clear()
     }
   }
+
+  async fetchStateUpdate() {
+    const res = await this.rootStore.api.todo.social.getNotificationCount({})
+    runInAction(() => {
+      this.notificationCount = res.data.count
+    })
+  }
 }

src/state/models/notifications-view.ts

@@ -3,9 +3,11 @@ import * as GetNotifications from '../../third-party/api/src/types/todo/social/g
 import {RootStoreModel} from './root-store'
 import {hasProp} from '../lib/type-guards'
 
-export class NotificationsViewItemModel
-  implements GetNotifications.Notification
-{
+export interface GroupedNotification extends GetNotifications.Notification {
+  additional?: GetNotifications.Notification[]
+}
+
+export class NotificationsViewItemModel implements GroupedNotification {
   // ui state
   _reactKey: string = ''
 
@@ -14,57 +16,65 @@ export class NotificationsViewItemModel
   author: {
     did: string
     name: string
-    displayName: string
-  } = {did: '', name: '', displayName: ''}
+    displayName?: string
+  } = {did: '', name: ''}
+  reason: string = ''
+  reasonSubject?: string
   record: any = {}
   isRead: boolean = false
   indexedAt: string = ''
+  additional?: NotificationsViewItemModel[]
 
   constructor(
     public rootStore: RootStoreModel,
     reactKey: string,
-    v: GetNotifications.Notification,
+    v: GroupedNotification,
   ) {
     makeAutoObservable(this, {rootStore: false})
     this._reactKey = reactKey
     this.copy(v)
   }
 
-  copy(v: GetNotifications.Notification) {
+  copy(v: GroupedNotification) {
     this.uri = v.uri
     this.author = v.author
+    this.reason = v.reason
+    this.reasonSubject = v.reasonSubject
     this.record = v.record
     this.isRead = v.isRead
     this.indexedAt = v.indexedAt
+    if (v.additional?.length) {
+      this.additional = []
+      for (const add of v.additional) {
+        this.additional.push(
+          new NotificationsViewItemModel(this.rootStore, '', add),
+        )
+      }
+    } else {
+      this.additional = undefined
+    }
   }
 
   get isLike() {
-    return (
-      hasProp(this.record, '$type') && this.record.$type === 'todo.social.like'
-    )
+    return this.reason === 'like'
   }
 
   get isRepost() {
-    return (
-      hasProp(this.record, '$type') &&
-      this.record.$type === 'todo.social.repost'
-    )
+    return this.reason === 'repost'
   }
 
   get isReply() {
-    return (
-      hasProp(this.record, '$type') && this.record.$type === 'todo.social.post'
-    )
+    return this.reason === 'reply'
   }
 
   get isFollow() {
-    return (
-      hasProp(this.record, '$type') &&
-      this.record.$type === 'todo.social.follow'
-    )
+    return this.reason === 'follow'
   }
 
   get subjectUri() {
+    if (this.reasonSubject) {
+      return this.reasonSubject
+    }
     if (
       hasProp(this.record, 'subject') &&
       typeof this.record.subject === 'string'
@@ -121,7 +131,15 @@ export class NotificationsViewModel {
 
   get loadMoreCursor() {
     if (this.hasContent) {
-      return this.notifications[this.notifications.length - 1].indexedAt
+      const last = this.notifications[this.notifications.length - 1]
+      if (last.additional?.length) {
+        // get the lowest indexedAt from all available
+        return [last, ...last.additional].reduce(
+          (acc, v) => (v.indexedAt < acc ? v.indexedAt : acc),
+          last.indexedAt,
+        )
+      }
+      return last.indexedAt
     }
     return undefined
   }
@@ -139,6 +157,7 @@ export class NotificationsViewModel {
     await this._pendingWork()
     this._loadPromise = this._initialLoad(isRefreshing)
     await this._loadPromise
+    this._updateReadState()
     this._loadPromise = undefined
   }
 
@@ -265,12 +284,12 @@ export class NotificationsViewModel {
 
   private _appendAll(res: GetNotifications.Response) {
     let counter = this.notifications.length
-    for (const item of res.data.notifications) {
+    for (const item of groupNotifications(res.data.notifications)) {
       this._append(counter++, item)
     }
   }
 
-  private _append(keyId: number, item: GetNotifications.Notification) {
+  private _append(keyId: number, item: GroupedNotification) {
     // TODO: validate .record
     this.notifications.push(
       new NotificationsViewItemModel(this.rootStore, `item-${keyId}`, item),
@@ -280,7 +299,7 @@ export class NotificationsViewModel {
   private _updateAll(res: GetNotifications.Response) {
     for (const item of res.data.notifications) {
       const existingItem = this.notifications.find(
-        // this find function has a key subtley- the indexedAt comparison
+        // this find function has a key subtlety- the indexedAt comparison
         // the reason for this is reposts: they set the URI of the original post, not of the repost record
         // the indexedAt time will be for the repost however, so we use that to help us
         item2 => item.uri === item2.uri && item.indexedAt === item2.indexedAt,
@@ -290,4 +309,39 @@ export class NotificationsViewModel {
       }
     }
   }
+
+  private async _updateReadState() {
+    try {
+      await this.rootStore.api.todo.social.postNotificationsSeen(
+        {},
+        {seenAt: new Date().toISOString()},
+      )
+    } catch (e) {
+      console.log('Failed to update notifications read state', e)
+    }
+  }
+}
+
+function groupNotifications(
+  items: GetNotifications.Notification[],
+): GroupedNotification[] {
+  const items2: GroupedNotification[] = []
+  for (const item of items) {
+    let grouped = false
+    for (const item2 of items2) {
+      if (
+        item.reason === item2.reason &&
+        item.reasonSubject === item2.reasonSubject
+      ) {
+        item2.additional = item2.additional || []
+        item2.additional.push(item)
+        grouped = true
+        break
+      }
+    }
+    if (!grouped) {
+      items2.push(item)
+    }
+  }
+  return items2
 }

src/state/models/root-store.ts

@@ -38,6 +38,17 @@ export class RootStoreModel {
     return res.data.did
   }
 
+  async fetchStateUpdate() {
+    if (!this.session.isAuthed) {
+      return
+    }
+    try {
+      await this.me.fetchStateUpdate()
+    } catch (e) {
+      console.error('Failed to fetch latest state', e)
+    }
+  }
+
   serialize(): unknown {
     return {
       session: this.session.serialize(),

src/third-party/api/index.js

@@ -6969,6 +6969,7 @@ __export(src_exports, {
   TodoSocialFollow: () => follow_exports,
   TodoSocialGetFeed: () => getFeed_exports,
   TodoSocialGetLikedBy: () => getLikedBy_exports,
+  TodoSocialGetNotificationCount: () => getNotificationCount_exports,
   TodoSocialGetNotifications: () => getNotifications_exports,
   TodoSocialGetPostThread: () => getPostThread_exports,
   TodoSocialGetProfile: () => getProfile_exports,
@@ -6978,6 +6979,7 @@ __export(src_exports, {
   TodoSocialLike: () => like_exports,
   TodoSocialMediaEmbed: () => mediaEmbed_exports,
   TodoSocialPost: () => post_exports,
+  TodoSocialPostNotificationsSeen: () => postNotificationsSeen_exports,
   TodoSocialProfile: () => profile_exports,
   TodoSocialRepost: () => repost_exports,
   default: () => src_default
@@ -10307,12 +10309,15 @@ var methodSchemas = [
       encoding: "application/json",
       schema: {
         type: "object",
-        required: ["username", "did", "password"],
+        required: ["username", "email", "password"],
         properties: {
+          email: {
+            type: "string"
+          },
           username: {
             type: "string"
           },
-          did: {
+          inviteCode: {
             type: "string"
           },
           password: {
@@ -10325,10 +10330,16 @@ var methodSchemas = [
       encoding: "application/json",
       schema: {
         type: "object",
-        required: ["jwt"],
+        required: ["jwt", "username", "did"],
         properties: {
           jwt: {
             type: "string"
+          },
+          username: {
+            type: "string"
+          },
+          did: {
+            type: "string"
           }
         }
       }
@@ -11114,6 +11125,24 @@ var methodSchemas = [
       }
     }
   },
+  {
+    lexicon: 1,
+    id: "todo.social.getNotificationCount",
+    type: "query",
+    parameters: {},
+    output: {
+      encoding: "application/json",
+      schema: {
+        type: "object",
+        required: ["count"],
+        properties: {
+          count: {
+            type: "number"
+          }
+        }
+      }
+    }
+  },
   {
     lexicon: 1,
     id: "todo.social.getNotifications",
@@ -11143,7 +11172,14 @@ var methodSchemas = [
         $defs: {
           notification: {
             type: "object",
-            required: ["uri", "author", "record", "isRead", "indexedAt"],
+            required: [
+              "uri",
+              "author",
+              "reason",
+              "record",
+              "isRead",
+              "indexedAt"
+            ],
             properties: {
               uri: {
                 type: "string",
@@ -11151,7 +11187,7 @@ var methodSchemas = [
               },
               author: {
                 type: "object",
-                required: ["did", "name", "displayName"],
+                required: ["did", "name"],
                 properties: {
                   did: {
                     type: "string"
@@ -11165,6 +11201,13 @@ var methodSchemas = [
                   }
                 }
               },
+              reason: {
+                type: "string",
+                $comment: "Expected values are 'like', 'repost', 'follow', 'badge', 'mention' and 'reply'."
+              },
+              reasonSubject: {
+                type: "string"
+              },
               record: {
                 type: "object"
               },
@@ -11647,6 +11690,30 @@ var methodSchemas = [
         }
       }
     }
+  },
+  {
+    lexicon: 1,
+    id: "todo.social.postNotificationsSeen",
+    type: "procedure",
+    description: "Notify server that the user has seen notifications",
+    parameters: {},
+    input: {
+      encoding: "application/json",
+      schema: {
+        type: "object",
+        required: ["seenAt"],
+        properties: {
+          seenAt: {
+            type: "string",
+            format: "date-time"
+          }
+        }
+      }
+    },
+    output: {
+      encoding: "application/json",
+      schema: {}
+    }
   }
 ];
 
@@ -11894,9 +11961,9 @@ function toKnownErr20(e) {
   return e;
 }
 
-// src/types/todo/social/getNotifications.ts
-var getNotifications_exports = {};
-__export(getNotifications_exports, {
+// src/types/todo/social/getNotificationCount.ts
+var getNotificationCount_exports = {};
+__export(getNotificationCount_exports, {
   toKnownErr: () => toKnownErr21
 });
 function toKnownErr21(e) {
@@ -11905,9 +11972,9 @@ function toKnownErr21(e) {
   return e;
 }
 
-// src/types/todo/social/getPostThread.ts
-var getPostThread_exports = {};
-__export(getPostThread_exports, {
+// src/types/todo/social/getNotifications.ts
+var getNotifications_exports = {};
+__export(getNotifications_exports, {
   toKnownErr: () => toKnownErr22
 });
 function toKnownErr22(e) {
@@ -11916,9 +11983,9 @@ function toKnownErr22(e) {
   return e;
 }
 
-// src/types/todo/social/getProfile.ts
-var getProfile_exports = {};
-__export(getProfile_exports, {
+// src/types/todo/social/getPostThread.ts
+var getPostThread_exports = {};
+__export(getPostThread_exports, {
   toKnownErr: () => toKnownErr23
 });
 function toKnownErr23(e) {
@@ -11927,9 +11994,9 @@ function toKnownErr23(e) {
   return e;
 }
 
-// src/types/todo/social/getRepostedBy.ts
-var getRepostedBy_exports = {};
-__export(getRepostedBy_exports, {
+// src/types/todo/social/getProfile.ts
+var getProfile_exports = {};
+__export(getProfile_exports, {
   toKnownErr: () => toKnownErr24
 });
 function toKnownErr24(e) {
@@ -11938,9 +12005,9 @@ function toKnownErr24(e) {
   return e;
 }
 
-// src/types/todo/social/getUserFollowers.ts
-var getUserFollowers_exports = {};
-__export(getUserFollowers_exports, {
+// src/types/todo/social/getRepostedBy.ts
+var getRepostedBy_exports = {};
+__export(getRepostedBy_exports, {
   toKnownErr: () => toKnownErr25
 });
 function toKnownErr25(e) {
@@ -11949,9 +12016,9 @@ function toKnownErr25(e) {
   return e;
 }
 
-// src/types/todo/social/getUserFollows.ts
-var getUserFollows_exports = {};
-__export(getUserFollows_exports, {
+// src/types/todo/social/getUserFollowers.ts
+var getUserFollowers_exports = {};
+__export(getUserFollowers_exports, {
   toKnownErr: () => toKnownErr26
 });
 function toKnownErr26(e) {
@@ -11960,6 +12027,28 @@ function toKnownErr26(e) {
   return e;
 }
 
+// src/types/todo/social/getUserFollows.ts
+var getUserFollows_exports = {};
+__export(getUserFollows_exports, {
+  toKnownErr: () => toKnownErr27
+});
+function toKnownErr27(e) {
+  if (e instanceof XRPCError) {
+  }
+  return e;
+}
+
+// src/types/todo/social/postNotificationsSeen.ts
+var postNotificationsSeen_exports = {};
+__export(postNotificationsSeen_exports, {
+  toKnownErr: () => toKnownErr28
+});
+function toKnownErr28(e) {
+  if (e instanceof XRPCError) {
+  }
+  return e;
+}
+
 // src/types/todo/social/badge.ts
 var badge_exports = {};
 
@@ -12126,34 +12215,44 @@ var SocialNS = class {
       throw toKnownErr20(e);
     });
   }
+  getNotificationCount(params, data, opts) {
+    return this._service.xrpc.call("todo.social.getNotificationCount", params, data, opts).catch((e) => {
+      throw toKnownErr21(e);
+    });
+  }
   getNotifications(params, data, opts) {
     return this._service.xrpc.call("todo.social.getNotifications", params, data, opts).catch((e) => {
-      throw toKnownErr21(e);
+      throw toKnownErr22(e);
     });
   }
   getPostThread(params, data, opts) {
     return this._service.xrpc.call("todo.social.getPostThread", params, data, opts).catch((e) => {
-      throw toKnownErr22(e);
+      throw toKnownErr23(e);
     });
   }
   getProfile(params, data, opts) {
     return this._service.xrpc.call("todo.social.getProfile", params, data, opts).catch((e) => {
-      throw toKnownErr23(e);
+      throw toKnownErr24(e);
     });
   }
   getRepostedBy(params, data, opts) {
     return this._service.xrpc.call("todo.social.getRepostedBy", params, data, opts).catch((e) => {
-      throw toKnownErr24(e);
+      throw toKnownErr25(e);
     });
   }
   getUserFollowers(params, data, opts) {
     return this._service.xrpc.call("todo.social.getUserFollowers", params, data, opts).catch((e) => {
-      throw toKnownErr25(e);
+      throw toKnownErr26(e);
     });
   }
   getUserFollows(params, data, opts) {
     return this._service.xrpc.call("todo.social.getUserFollows", params, data, opts).catch((e) => {
-      throw toKnownErr26(e);
+      throw toKnownErr27(e);
+    });
+  }
+  postNotificationsSeen(params, data, opts) {
+    return this._service.xrpc.call("todo.social.postNotificationsSeen", params, data, opts).catch((e) => {
+      throw toKnownErr28(e);
     });
   }
 };
@@ -12522,6 +12621,7 @@ var RepostRecord = class {
   TodoSocialFollow,
   TodoSocialGetFeed,
   TodoSocialGetLikedBy,
+  TodoSocialGetNotificationCount,
   TodoSocialGetNotifications,
   TodoSocialGetPostThread,
   TodoSocialGetProfile,
@@ -12531,6 +12631,7 @@ var RepostRecord = class {
   TodoSocialLike,
   TodoSocialMediaEmbed,
   TodoSocialPost,
+  TodoSocialPostNotificationsSeen,
   TodoSocialProfile,
   TodoSocialRepost
 });

src/third-party/api/src/index.d.ts

@@ -21,6 +21,7 @@ import * as TodoSocialBadge from './types/todo/social/badge';
 import * as TodoSocialFollow from './types/todo/social/follow';
 import * as TodoSocialGetFeed from './types/todo/social/getFeed';
 import * as TodoSocialGetLikedBy from './types/todo/social/getLikedBy';
+import * as TodoSocialGetNotificationCount from './types/todo/social/getNotificationCount';
 import * as TodoSocialGetNotifications from './types/todo/social/getNotifications';
 import * as TodoSocialGetPostThread from './types/todo/social/getPostThread';
 import * as TodoSocialGetProfile from './types/todo/social/getProfile';
@@ -30,6 +31,7 @@ import * as TodoSocialGetUserFollows from './types/todo/social/getUserFollows';
 import * as TodoSocialLike from './types/todo/social/like';
 import * as TodoSocialMediaEmbed from './types/todo/social/mediaEmbed';
 import * as TodoSocialPost from './types/todo/social/post';
+import * as TodoSocialPostNotificationsSeen from './types/todo/social/postNotificationsSeen';
 import * as TodoSocialProfile from './types/todo/social/profile';
 import * as TodoSocialRepost from './types/todo/social/repost';
 export * as TodoAdxCreateAccount from './types/todo/adx/createAccount';
@@ -54,6 +56,7 @@ export * as TodoSocialBadge from './types/todo/social/badge';
 export * as TodoSocialFollow from './types/todo/social/follow';
 export * as TodoSocialGetFeed from './types/todo/social/getFeed';
 export * as TodoSocialGetLikedBy from './types/todo/social/getLikedBy';
+export * as TodoSocialGetNotificationCount from './types/todo/social/getNotificationCount';
 export * as TodoSocialGetNotifications from './types/todo/social/getNotifications';
 export * as TodoSocialGetPostThread from './types/todo/social/getPostThread';
 export * as TodoSocialGetProfile from './types/todo/social/getProfile';
@@ -63,6 +66,7 @@ export * as TodoSocialGetUserFollows from './types/todo/social/getUserFollows';
 export * as TodoSocialLike from './types/todo/social/like';
 export * as TodoSocialMediaEmbed from './types/todo/social/mediaEmbed';
 export * as TodoSocialPost from './types/todo/social/post';
+export * as TodoSocialPostNotificationsSeen from './types/todo/social/postNotificationsSeen';
 export * as TodoSocialProfile from './types/todo/social/profile';
 export * as TodoSocialRepost from './types/todo/social/repost';
 export declare class Client {
@@ -119,12 +123,14 @@ export declare class SocialNS {
     constructor(service: ServiceClient);
     getFeed(params: TodoSocialGetFeed.QueryParams, data?: TodoSocialGetFeed.InputSchema, opts?: TodoSocialGetFeed.CallOptions): Promise<TodoSocialGetFeed.Response>;
     getLikedBy(params: TodoSocialGetLikedBy.QueryParams, data?: TodoSocialGetLikedBy.InputSchema, opts?: TodoSocialGetLikedBy.CallOptions): Promise<TodoSocialGetLikedBy.Response>;
+    getNotificationCount(params: TodoSocialGetNotificationCount.QueryParams, data?: TodoSocialGetNotificationCount.InputSchema, opts?: TodoSocialGetNotificationCount.CallOptions): Promise<TodoSocialGetNotificationCount.Response>;
     getNotifications(params: TodoSocialGetNotifications.QueryParams, data?: TodoSocialGetNotifications.InputSchema, opts?: TodoSocialGetNotifications.CallOptions): Promise<TodoSocialGetNotifications.Response>;
     getPostThread(params: TodoSocialGetPostThread.QueryParams, data?: TodoSocialGetPostThread.InputSchema, opts?: TodoSocialGetPostThread.CallOptions): Promise<TodoSocialGetPostThread.Response>;
     getProfile(params: TodoSocialGetProfile.QueryParams, data?: TodoSocialGetProfile.InputSchema, opts?: TodoSocialGetProfile.CallOptions): Promise<TodoSocialGetProfile.Response>;
     getRepostedBy(params: TodoSocialGetRepostedBy.QueryParams, data?: TodoSocialGetRepostedBy.InputSchema, opts?: TodoSocialGetRepostedBy.CallOptions): Promise<TodoSocialGetRepostedBy.Response>;
     getUserFollowers(params: TodoSocialGetUserFollowers.QueryParams, data?: TodoSocialGetUserFollowers.InputSchema, opts?: TodoSocialGetUserFollowers.CallOptions): Promise<TodoSocialGetUserFollowers.Response>;
     getUserFollows(params: TodoSocialGetUserFollows.QueryParams, data?: TodoSocialGetUserFollows.InputSchema, opts?: TodoSocialGetUserFollows.CallOptions): Promise<TodoSocialGetUserFollows.Response>;
+    postNotificationsSeen(params: TodoSocialPostNotificationsSeen.QueryParams, data?: TodoSocialPostNotificationsSeen.InputSchema, opts?: TodoSocialPostNotificationsSeen.CallOptions): Promise<TodoSocialPostNotificationsSeen.Response>;
 }
 export declare class BadgeRecord {
     _service: ServiceClient;

src/third-party/api/src/types/todo/adx/createAccount.d.ts

@@ -6,12 +6,15 @@ export interface CallOptions {
     encoding: 'application/json';
 }
 export interface InputSchema {
+    email: string;
     username: string;
-    did: string;
+    inviteCode?: string;
     password: string;
 }
 export interface OutputSchema {
     jwt: string;
+    username: string;
+    did: string;
 }
 export interface Response {
     success: boolean;

src/third-party/api/src/types/todo/social/getNotificationCount.d.ts

@@ -0,0 +1,16 @@
+import { Headers } from '@adxp/xrpc';
+export interface QueryParams {
+}
+export interface CallOptions {
+    headers?: Headers;
+}
+export declare type InputSchema = undefined;
+export interface OutputSchema {
+    count: number;
+}
+export interface Response {
+    success: boolean;
+    headers: Headers;
+    data: OutputSchema;
+}
+export declare function toKnownErr(e: any): any;

src/third-party/api/src/types/todo/social/getNotifications.d.ts

@@ -15,8 +15,10 @@ export interface Notification {
     author: {
         did: string;
         name: string;
-        displayName: string;
+        displayName?: string;
     };
+    reason: string;
+    reasonSubject?: string;
     record: {};
     isRead: boolean;
     indexedAt: string;

src/third-party/api/src/types/todo/social/postNotificationsSeen.d.ts

@@ -0,0 +1,19 @@
+import { Headers } from '@adxp/xrpc';
+export interface QueryParams {
+}
+export interface CallOptions {
+    headers?: Headers;
+    encoding: 'application/json';
+}
+export interface InputSchema {
+    seenAt: string;
+}
+export interface OutputSchema {
+    [k: string]: unknown;
+}
+export interface Response {
+    success: boolean;
+    headers: Headers;
+    data: OutputSchema;
+}
+export declare function toKnownErr(e: any): any;

src/view/com/notifications/FeedItem.tsx

@@ -5,12 +5,14 @@ import {AdxUri} from '../../../third-party/uri'
 import {FontAwesomeIcon, Props} from '@fortawesome/react-native-fontawesome'
 import {NotificationsViewItemModel} from '../../../state/models/notifications-view'
 import {s, colors} from '../../lib/styles'
-import {ago} from '../../lib/strings'
+import {ago, pluralize} from '../../lib/strings'
 import {DEF_AVATER} from '../../lib/assets'
 import {PostText} from '../post/PostText'
 import {Post} from '../post/Post'
 import {Link} from '../util/Link'
 
+const MAX_AUTHORS = 8
+
 export const FeedItem = observer(function FeedItem({
   item,
 }: {
@@ -37,39 +39,108 @@ export const FeedItem = observer(function FeedItem({
       return 'Post'
     }
   }, [item])
-  const authorHref = `/profile/${item.author.name}`
-  const authorTitle = item.author.name
+
+  if (item.isReply) {
+    return (
+      <Link
+        style={[
+          styles.outerMinimal,
+          item.isRead ? undefined : styles.outerUnread,
+        ]}
+        href={itemHref}
+        title={itemTitle}>
+        <Post uri={item.uri} />
+      </Link>
+    )
+  }
 
   let action = ''
   let icon: Props['icon']
+  let iconStyle: Props['style'] = []
   if (item.isLike) {
     action = 'liked your post'
-    icon = ['far', 'heart']
+    icon = ['fas', 'heart']
+    iconStyle = [s.blue3]
   } else if (item.isRepost) {
     action = 'reposted your post'
     icon = 'retweet'
+    iconStyle = [s.blue3]
   } else if (item.isReply) {
     action = 'replied to your post'
     icon = ['far', 'comment']
   } else if (item.isFollow) {
     action = 'followed you'
-    icon = 'plus'
+    icon = 'user-plus'
+    iconStyle = [s.blue3]
   } else {
     return <></>
   }
 
+  let authors: {href: string; name: string; displayName?: string}[] = [
+    {
+      href: `/profile/${item.author.name}`,
+      name: item.author.name,
+      displayName: item.author.displayName,
+    },
+  ]
+  if (item.additional?.length) {
+    authors = authors.concat(
+      item.additional.map(item2 => ({
+        href: `/profile/${item2.author.name}`,
+        name: item2.author.name,
+        displayName: item2.author.displayName,
+      })),
+    )
+  }
+
   return (
-    <Link style={styles.outer} href={itemHref} title={itemTitle}>
+    <Link
+      style={[styles.outer, item.isRead ? undefined : styles.outerUnread]}
+      href={itemHref}
+      title={itemTitle}>
       <View style={styles.layout}>
-        <Link style={styles.layoutAvi} href={authorHref} title={authorTitle}>
-          <Image style={styles.avi} source={DEF_AVATER} />
-        </Link>
+        <View style={styles.layoutIcon}>
+          <FontAwesomeIcon
+            icon={icon}
+            size={22}
+            style={[styles.icon, ...iconStyle]}
+          />
+        </View>
         <View style={styles.layoutContent}>
+          <View style={styles.avis}>
+            {authors.slice(0, MAX_AUTHORS).map(author => (
+              <Link
+                style={s.mr2}
+                key={author.href}
+                href={author.href}
+                title={`@${author.name}`}>
+                <Image style={styles.avi} source={DEF_AVATER} />
+              </Link>
+            ))}
+            {authors.length > MAX_AUTHORS ? (
+              <Text style={styles.aviExtraCount}>
+                +{authors.length - MAX_AUTHORS}
+              </Text>
+            ) : undefined}
+          </View>
           <View style={styles.meta}>
-            <FontAwesomeIcon icon={icon} size={14} style={[s.mt2, s.mr5]} />
-            <Link style={styles.metaItem} href={authorHref} title={authorTitle}>
-              <Text style={[s.f14, s.bold]}>{item.author.displayName}</Text>
+            <Link
+              key={authors[0].href}
+              style={styles.metaItem}
+              href={authors[0].href}
+              title={`@${authors[0].name}`}>
+              <Text style={[s.f14, s.bold]}>
+                {authors[0].displayName || authors[0].name}
+              </Text>
             </Link>
+            {authors.length > 1 ? (
+              <>
+                <Text style={[styles.metaItem, s.f14]}>and</Text>
+                <Text style={[styles.metaItem, s.f14, s.bold]}>
+                  {authors.length - 1} {pluralize(authors.length - 1, 'other')}
+                </Text>
+              </>
+            ) : undefined}
             <Text style={[styles.metaItem, s.f14]}>{action}</Text>
             <Text style={[styles.metaItem, s.f14, s.gray5]}>
               {ago(item.indexedAt)}
@@ -97,13 +168,34 @@ const styles = StyleSheet.create({
   outer: {
     backgroundColor: colors.white,
     padding: 10,
-    paddingBottom: 0,
+    borderRadius: 6,
+    margin: 2,
+    marginBottom: 0,
+  },
+  outerMinimal: {
+    backgroundColor: colors.white,
+    borderRadius: 6,
+    margin: 2,
+    marginBottom: 0,
+  },
+  outerUnread: {
+    borderWidth: 1,
+    borderColor: colors.blue2,
   },
   layout: {
     flexDirection: 'row',
   },
-  layoutAvi: {
-    width: 40,
+  layoutIcon: {
+    width: 35,
+    alignItems: 'flex-end',
+  },
+  icon: {
+    marginRight: 10,
+    marginTop: 4,
+  },
+  avis: {
+    flexDirection: 'row',
+    alignItems: 'center',
   },
   avi: {
     width: 30,
@@ -111,6 +203,11 @@ const styles = StyleSheet.create({
     borderRadius: 15,
     resizeMode: 'cover',
   },
+  aviExtraCount: {
+    fontWeight: 'bold',
+    paddingLeft: 6,
+    color: colors.gray5,
+  },
   layoutContent: {
     flex: 1,
   },

src/view/com/post/Post.tsx

@@ -14,6 +14,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {PostThreadViewModel} from '../../../state/models/post-thread-view'
 import {ComposePostModel} from '../../../state/models/shell'
 import {Link} from '../util/Link'
+import {UserInfoText} from '../util/UserInfoText'
 import {useStores} from '../../../state'
 import {s, colors} from '../../lib/styles'
 import {ago} from '../../lib/strings'
@@ -57,13 +58,18 @@ export const Post = observer(function Post({uri}: {uri: string}) {
   const item = view.thread
   const record = view.thread?.record as unknown as PostType.Record
 
-  const itemHref = useMemo(() => {
-    const urip = new AdxUri(item.uri)
-    return `/profile/${item.author.name}/post/${urip.recordKey}`
-  }, [item.uri, item.author.name])
+  const itemUrip = new AdxUri(item.uri)
+  const itemHref = `/profile/${item.author.name}/post/${itemUrip.recordKey}`
   const itemTitle = `Post by ${item.author.name}`
   const authorHref = `/profile/${item.author.name}`
   const authorTitle = item.author.name
+  let replyAuthorDid = ''
+  let replyHref = ''
+  if (record.reply) {
+    const urip = new AdxUri(record.reply.parent || record.reply.root)
+    replyAuthorDid = urip.hostname
+    replyHref = `/profile/${urip.hostname}/post/${urip.recordKey}`
+  }
   const onPressReply = () => {
     store.shell.openModal(new ComposePostModel(item.uri))
   }
@@ -96,6 +102,19 @@ export const Post = observer(function Post({uri}: {uri: string}) {
               · {ago(item.indexedAt)}
             </Text>
           </View>
+          {replyHref !== '' && (
+            <View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}>
+              <FontAwesomeIcon icon="reply" size={9} style={[s.gray4, s.mr5]} />
+              <Text style={[s.gray4, s.f12, s.mr2]}>Reply to</Text>
+              <Link href={replyHref} title="Parent post">
+                <UserInfoText
+                  did={replyAuthorDid}
+                  style={[s.f12, s.gray5]}
+                  prefix="@"
+                />
+              </Link>
+            </View>
+          )}
           <Text style={[styles.postText, s.f15, s['lh15-1.3']]}>
             {record.text}
           </Text>

src/view/index.ts

@@ -38,6 +38,7 @@ import {faReply} from '@fortawesome/free-solid-svg-icons/faReply'
 import {faRetweet} from '@fortawesome/free-solid-svg-icons/faRetweet'
 import {faUser} from '@fortawesome/free-regular-svg-icons/faUser'
 import {faUsers} from '@fortawesome/free-solid-svg-icons/faUsers'
+import {faUserPlus} from '@fortawesome/free-solid-svg-icons/faUserPlus'
 import {faTicket} from '@fortawesome/free-solid-svg-icons/faTicket'
 import {faX} from '@fortawesome/free-solid-svg-icons/faX'
 
@@ -81,6 +82,7 @@ export function setup() {
     faShield,
     faUser,
     faUsers,
+    faUserPlus,
     faTicket,
     faX,
   )

src/view/shell/mobile/index.tsx

@@ -78,11 +78,13 @@ const Location = ({
 const Btn = ({
   icon,
   inactive,
+  notificationCount,
   onPress,
   onLongPress,
 }: {
   icon: IconProp
   inactive?: boolean
+  notificationCount?: number
   onPress?: (event: GestureResponderEvent) => void
   onLongPress?: (event: GestureResponderEvent) => void
 }) => {
@@ -98,6 +100,11 @@ const Btn = ({
   if (inactive) {
     return (
       <View style={styles.ctrl}>
+        {notificationCount ? (
+          <View style={styles.ctrlCount}>
+            <Text style={styles.ctrlCountLabel}>{notificationCount}</Text>
+          </View>
+        ) : undefined}
         <IconEl
           size={21}
           style={[styles.ctrlIcon, styles.inactive]}
@@ -111,6 +118,11 @@ const Btn = ({
       style={styles.ctrl}
       onPress={onPress}
       onLongPress={onLongPress}>
+      {notificationCount ? (
+        <View style={styles.ctrlCount}>
+          <Text style={styles.ctrlCountLabel}>{notificationCount}</Text>
+        </View>
+      ) : undefined}
       <IconEl size={21} style={styles.ctrlIcon} icon={icon} />
     </TouchableOpacity>
   )
@@ -250,7 +262,11 @@ export const MobileShell: React.FC = observer(() => {
           onLongPress={onLongPressForward}
         />
         <Btn icon="house" onPress={onPressHome} />
-        <Btn icon={['far', 'bell']} onPress={onPressNotifications} />
+        <Btn
+          icon={['far', 'bell']}
+          onPress={onPressNotifications}
+          notificationCount={store.me.notificationCount}
+        />
         <Btn icon="bars" onPress={onPressTabs} />
       </View>
       <Modal />
@@ -393,6 +409,19 @@ const styles = StyleSheet.create({
     paddingTop: 15,
     paddingBottom: 15,
   },
+  ctrlCount: {
+    position: 'absolute',
+    left: 46,
+    top: 10,
+    backgroundColor: colors.pink3,
+    paddingHorizontal: 3,
+    borderRadius: 3,
+  },
+  ctrlCountLabel: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    color: colors.white,
+  },
   ctrlIcon: {
     marginLeft: 'auto',
     marginRight: 'auto',