Better notifications UX

Packages/Notifications/Sources/Notifications/NotificationRowView.swift

@@ -13,10 +13,39 @@ struct NotificationRowView: View {
   var body: some View {
     if let type = notification.supportedType {
       HStack(alignment: .top, spacing: 8) {
+        makeAvatarView(type: type)
+        VStack(alignment: .leading, spacing: 0) {
+          makeMainLabel(type: type)
+          makeContent(type: type)
+        }
+      }
+    } else {
+      EmptyView()
+    }
+  }
+  
+  private func makeAvatarView(type: Models.Notification.NotificationType) -> some View {
+    ZStack(alignment: .topLeading) {
       AvatarView(url: notification.account.avatar)
         .onTapGesture {
           routeurPath.navigate(to: .accountDetailWithAccount(account: notification.account))
         }
+      ZStack(alignment: .center) {
+        Circle()
+          .strokeBorder(Color.white, lineWidth: 1)
+          .background(Circle().foregroundColor(Color.brand))
+          .frame(width: 24, height: 24)
+        
+        Image(systemName: type.iconName())
+          .resizable()
+          .frame(width: 12, height: 12)
+          .foregroundColor(.white)
+      }
+      .offset(x: -14, y: -4)
+    }
+  }
+  
+  private func makeMainLabel(type: Models.Notification.NotificationType) -> some View {
     VStack(alignment: .leading, spacing: 0) {
       HStack(spacing: 0) {
         Text(notification.account.displayName)
@@ -33,6 +62,11 @@ struct NotificationRowView: View {
           .foregroundColor(.gray)
         Spacer()
       }
+    }
+  }
+  
+  @ViewBuilder
+  private func makeContent(type: Models.Notification.NotificationType) -> some View {
     if let status = notification.status {
       StatusRowView(viewModel: .init(status: status, isEmbed: true))
         .padding(8)
@@ -46,13 +80,18 @@ struct NotificationRowView: View {
       Text(notification.account.acct)
         .font(.callout)
         .foregroundColor(.gray)
+      
+      if type == .follow {
+        Text(notification.account.note.asSafeAttributedString)
+          .lineLimit(3)
+          .font(.body)
+          .foregroundColor(.gray)
+          .environment(\.openURL, OpenURLAction { url in
+            routeurPath.handle(url: url)
+          })
       }
     }
   }
-    } else {
-      EmptyView()
-    }
-  }
 }
 
 extension Models.Notification.NotificationType {
@@ -76,6 +115,25 @@ extension Models.Notification.NotificationType {
       return "has been edited"
     }
   }
+  
+  func iconName() -> String {
+    switch self {
+    case .status:
+      return "pencil"
+    case .mention:
+      return "at"
+    case .reblog:
+      return "arrow.left.arrow.right.circle.fill"
+    case .follow, .follow_request:
+      return "person.fill.badge.plus"
+    case .favourite:
+      return "star.fill"
+    case .poll:
+      return "chart.bar.fill"
+    case .update:
+      return "pencil.line"
+    }
+  }
 }
 
 struct NotificationRowView_Previews: PreviewProvider {

Packages/Status/Sources/Status/Row/StatusRowView.swift

@@ -16,8 +16,10 @@ public struct StatusRowView: View {
   
   public var body: some View {
     VStack(alignment: .leading) {
+      if !viewModel.isEmbed {
         reblogView
         replyView
+      }
       statusView
       if !viewModel.isEmbed {
         StatusActionsView(viewModel: viewModel)