Skip to content

Commit 07453d9

Browse files
DimillianDimillian
committed
WIP Notifications UI
1 parent b0d928c commit 07453d9

6 files changed

+221
-101
lines changed

‎Packages/Features/Sources/NotificationsUI/NotificationsGroup.swift

+31-4
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import ATProtoKit
22
import Foundation
33
import Models
44
import Network
5+
import SwiftUI
56

67
@MainActor
78
struct NotificationsGroup: Identifiable {
@@ -23,9 +24,15 @@ struct NotificationsGroup: Identifiable {
2324
// Sort notifications by date
2425
let sortedNotifications = notifications.sorted { $0.indexedAt > $1.indexedAt }
2526

26-
let subjectURI = sortedNotifications.filter { $0.notificationReason != .follow }.compactMap {
27-
$0.notificationReason == .reply ? $0.notificationURI : $0.reasonSubjectURI
28-
}
27+
let subjectURI =
28+
Array(
29+
Set(
30+
sortedNotifications
31+
.filter { $0.notificationReason != .follow }
32+
.compactMap {
33+
$0.notificationReason.shouldGroup ? $0.reasonSubjectURI : $0.notificationURI
34+
}
35+
))
2936
var postItems: [PostItem] = []
3037
do {
3138
postItems = try await client.protoClient.getPosts(subjectURI).posts.map { $0.postItem }
@@ -48,7 +55,7 @@ struct NotificationsGroup: Identifiable {
4855
timestamp: notification.indexedAt,
4956
type: reason,
5057
notifications: [notification],
51-
postItem: postItems.first(where: { $0.uri == notification.reasonSubjectURI })
58+
postItem: postItems.first(where: { $0.uri == notification.notificationURI })
5259
))
5360
}
5461
}
@@ -81,4 +88,24 @@ extension AppBskyLexicon.Notification.Notification.Reason {
8188
return false
8289
}
8390
}
91+
92+
var iconName: String {
93+
switch self {
94+
case .like: return "heart.fill"
95+
case .follow: return "person.fill.badge.plus"
96+
case .repost: return "arrowshape.turn.up.right"
97+
case .mention: return "at"
98+
case .quote: return "quote.opening"
99+
case .reply: return "arrowshape.turn.up.left"
100+
case .starterpackjoined: return "star"
101+
}
102+
}
103+
104+
var color: Color {
105+
switch self {
106+
case .like: return .pink
107+
case .follow: return .blue
108+
default: return .secondary
109+
}
110+
}
84111
}

‎Packages/Features/Sources/NotificationsUI/NotificationsListView.swift

+45-46
Original file line numberDiff line numberDiff line change
@@ -14,59 +14,58 @@ public struct NotificationsListView: View {
1414
public init() {}
1515

1616
public var body: some View {
17-
NavigationStack {
18-
List {
19-
HeaderView(title: "Notifications", showBack: false)
20-
.padding(.bottom)
17+
List {
18+
HeaderView(title: "Notifications", showBack: false)
19+
.padding(.bottom)
2120

22-
ForEach(notificationsGroups) { group in
23-
Section {
24-
switch group.type {
25-
case .reply:
26-
SingleNotificationRow(
27-
notification: group.notifications[0],
28-
postItem: group.postItem,
29-
actionText: "replied to your post"
30-
)
31-
case .follow:
32-
GroupedNotificationRow(group: group) { count in
33-
count == 1 ? " followed you" : " and \(count - 1) others followed you"
34-
}
35-
case .like:
36-
GroupedNotificationRow(group: group) { count in
37-
count == 1 ? " liked your post" : " and \(count - 1) others liked your post"
38-
}
39-
case .repost:
40-
GroupedNotificationRow(group: group) { count in
41-
count == 1 ? " reposted your post" : " and \(count - 1) others reposted your post"
42-
}
43-
case .mention:
44-
SingleNotificationRow(
45-
notification: group.notifications[0],
46-
postItem: group.postItem,
47-
actionText: "mentioned you"
48-
)
49-
case .quote:
50-
SingleNotificationRow(
51-
notification: group.notifications[0],
52-
postItem: group.postItem,
53-
actionText: "quoted you"
54-
)
55-
case .starterpackjoined:
56-
EmptyView()
21+
ForEach(notificationsGroups) { group in
22+
Section {
23+
switch group.type {
24+
case .reply:
25+
SingleNotificationRow(
26+
notification: group.notifications[0],
27+
postItem: group.postItem,
28+
actionText: "replied to your post"
29+
)
30+
case .follow:
31+
GroupedNotificationRow(group: group) { count in
32+
count == 1 ? " followed you" : " and \(count - 1) others followed you"
5733
}
34+
case .like:
35+
GroupedNotificationRow(group: group) { count in
36+
count == 1 ? " liked your post" : " and \(count - 1) others liked your post"
37+
}
38+
case .repost:
39+
GroupedNotificationRow(group: group) { count in
40+
count == 1 ? " reposted your post" : " and \(count - 1) others reposted your post"
41+
}
42+
case .mention:
43+
SingleNotificationRow(
44+
notification: group.notifications[0],
45+
postItem: group.postItem,
46+
actionText: "mentioned you"
47+
)
48+
case .quote:
49+
SingleNotificationRow(
50+
notification: group.notifications[0],
51+
postItem: group.postItem,
52+
actionText: "quoted you"
53+
)
54+
case .starterpackjoined:
55+
EmptyView()
5856
}
5957
}
58+
.listRowSeparator(.hidden)
59+
}
6060

61-
if cursor != nil {
62-
ProgressView()
63-
.task {
64-
await fetchNotifications()
65-
}
66-
}
61+
if cursor != nil {
62+
ProgressView()
63+
.task {
64+
await fetchNotifications()
65+
}
6766
}
68-
.listStyle(.plain)
6967
}
68+
.listStyle(.plain)
7069
.task {
7170
cursor = nil
7271
await fetchNotifications()

‎Packages/Features/Sources/NotificationsUI/Rows/GroupedNotificationRow.swift

+108-40
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,128 @@
11
import ATProtoKit
22
import PostUI
3+
import Router
34
import SwiftUI
45

56
struct GroupedNotificationRow: View {
7+
@Environment(Router.self) var router
8+
69
let group: NotificationsGroup
710
let actionText: (Int) -> String // Closure to generate action text based on count
811

912
var body: some View {
10-
HStack {
11-
VStack(alignment: .leading) {
12-
HStack(spacing: -10) {
13-
ForEach(group.notifications.prefix(5), id: \.notificationURI) { notification in
14-
AsyncImage(url: notification.notificationAuthor.avatarImageURL) { image in
15-
image.resizable()
16-
} placeholder: {
17-
Color.gray
18-
}
19-
.frame(width: 40, height: 40)
20-
.clipShape(Circle())
21-
.overlay(Circle().stroke(Color.white, lineWidth: 2))
22-
}
23-
}
24-
.padding(.trailing, 8)
25-
if group.notifications.count == 1 {
26-
Text(
27-
group.notifications[0].notificationAuthor.displayName
28-
?? group.notifications[0].notificationAuthor.actorHandle
29-
)
30-
.fontWeight(.semibold)
31-
+ Text(actionText(1))
32-
.foregroundStyle(.secondary)
33-
} else {
34-
Text(
35-
group.notifications[0].notificationAuthor.displayName
36-
?? group.notifications[0].notificationAuthor.actorHandle
37-
)
38-
.fontWeight(.semibold)
39-
+ Text(actionText(group.notifications.count))
13+
VStack(alignment: .leading) {
14+
ZStack(alignment: .bottomTrailing) {
15+
postView
16+
avatarsView
17+
.offset(x: group.postItem == nil ? 0 : 6, y: 11)
18+
iconView
19+
.offset(x: 6, y: 6)
20+
}
21+
actionTextView
22+
.padding(.top, 12)
23+
}
24+
.padding(.vertical, 12)
25+
}
26+
27+
@ViewBuilder
28+
private var postView: some View {
29+
if let post = group.postItem {
30+
HStack {
31+
VStack(alignment: .leading, spacing: 8) {
32+
PostRowBodyView(post: post)
4033
.foregroundStyle(.secondary)
34+
PostRowEmbedView(post: post)
4135
}
36+
Spacer()
37+
}
38+
.environment(\.isQuote, true)
39+
.padding(8)
40+
.padding(.bottom, 12)
41+
.background(.thinMaterial)
42+
.overlay {
43+
RoundedRectangle(cornerRadius: 8)
44+
.stroke(
45+
LinearGradient(
46+
colors: [group.type.color, .indigo],
47+
startPoint: .topLeading,
48+
endPoint: .bottomTrailing),
49+
lineWidth: 1
50+
)
51+
.shadow(color: group.type.color.opacity(0.5), radius: 3)
52+
}
53+
.clipShape(RoundedRectangle(cornerRadius: 8))
54+
.onTapGesture {
55+
router.navigateTo(RouterDestination.post(post))
56+
}
57+
}
58+
}
4259

43-
if let post = group.postItem {
44-
VStack(alignment: .leading, spacing: 8) {
45-
PostRowBodyView(post: post)
46-
.foregroundStyle(.secondary)
47-
PostRowEmbedView(post: post)
48-
}
49-
.environment(\.isQuote, true)
60+
private var avatarsView: some View {
61+
HStack(spacing: -10) {
62+
ForEach(group.notifications.prefix(5), id: \.notificationURI) { notification in
63+
AsyncImage(url: notification.notificationAuthor.avatarImageURL) { image in
64+
image.resizable()
65+
} placeholder: {
66+
Circle()
67+
.fill(.secondary)
5068
}
69+
.frame(width: 30, height: 30)
70+
.clipShape(Circle())
71+
.overlay(
72+
Circle().stroke(
73+
LinearGradient(
74+
colors: [group.type.color, .indigo],
75+
startPoint: .topLeading,
76+
endPoint: .bottomTrailing
77+
),
78+
lineWidth: 1
79+
)
80+
)
5181
}
82+
}
83+
.padding(.trailing, 12)
84+
}
5285

53-
Spacer()
86+
private var iconView: some View {
87+
Image(systemName: group.type.iconName)
88+
.foregroundStyle(
89+
group.type.color
90+
.shadow(.drop(color: group.type.color.opacity(0.5), radius: 2))
91+
)
92+
.shadow(color: group.type.color, radius: 1)
93+
.background(
94+
Circle()
95+
.fill(.thickMaterial)
96+
.stroke(
97+
LinearGradient(
98+
colors: [group.type.color, .indigo],
99+
startPoint: .topLeading,
100+
endPoint: .bottomTrailing),
101+
lineWidth: 1
102+
)
103+
.frame(width: 30, height: 30)
104+
.shadow(color: group.type.color.opacity(0.5), radius: 3)
105+
)
106+
}
54107

55-
Text(group.notifications[0].indexedAt.relativeFormatted)
108+
@ViewBuilder
109+
private var actionTextView: some View {
110+
if group.notifications.count == 1 {
111+
Text(
112+
group.notifications[0].notificationAuthor.displayName
113+
?? group.notifications[0].notificationAuthor.actorHandle
114+
)
115+
.fontWeight(.semibold)
116+
+ Text(actionText(1))
117+
.foregroundStyle(.secondary)
118+
} else {
119+
Text(
120+
group.notifications[0].notificationAuthor.displayName
121+
?? group.notifications[0].notificationAuthor.actorHandle
122+
)
123+
.fontWeight(.semibold)
124+
+ Text(actionText(group.notifications.count))
56125
.foregroundStyle(.secondary)
57126
}
58-
.padding(.vertical, 8)
59127
}
60128
}

‎Packages/Features/Sources/NotificationsUI/Rows/SingleNotificationRow.swift

+21-4
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,24 @@ struct SingleNotificationRow: View {
1111
var body: some View {
1212
HStack(alignment: .top) {
1313
AsyncImage(url: notification.notificationAuthor.avatarImageURL) { image in
14-
image.resizable()
14+
image
15+
.resizable()
16+
.scaledToFit()
17+
.clipShape(Circle())
1518
} placeholder: {
1619
Color.gray
1720
}
18-
.frame(width: 40, height: 40)
19-
.clipShape(Circle())
21+
.frame(width: 30, height: 30)
22+
.overlay {
23+
Circle()
24+
.stroke(
25+
LinearGradient(
26+
colors: [.shadowPrimary.opacity(0.5), .indigo.opacity(0.5)],
27+
startPoint: .topLeading,
28+
endPoint: .bottomTrailing),
29+
lineWidth: 1)
30+
}
31+
.shadow(color: .shadowPrimary.opacity(0.3), radius: 2)
2032

2133
VStack(alignment: .leading) {
2234
Text(
@@ -27,7 +39,12 @@ struct SingleNotificationRow: View {
2739
.foregroundStyle(.secondary)
2840

2941
if let postItem {
30-
PostRowView(post: postItem)
42+
VStack(alignment: .leading, spacing: 8) {
43+
PostRowBodyView(post: postItem)
44+
PostRowEmbedView(post: postItem)
45+
PostRowActionsView(post: postItem)
46+
}
47+
.padding(.top, 8)
3148
}
3249
}
3350

0 commit comments

Comments
 (0)