IceCubesApp/Packages/Notifications/Sources/Notifications/NotificationsListView.swift
Chris Kolbu b2f594f174
Accessibility tweaks + Notifications and Messages tab uplift (#1292)
* Improve StatusRowView accessibility actions

Previously, there was no way to interact with links and hashtags.

Now, these are added to the Actions rotor

* Hide `topPaddingView`s from accessibility

* Fix accessible header rendering in non-filterable TimelineViews

Previously, all navigation title views were assumed to be popup buttons.

Now, we only change the representation for timelines that are filterable.

* Combine tagHeaderView text elements

Previously, these were two separate items

* Prefer shorter Quote action label

* Improve accessibility of StatusEmbeddedView

Previously, this element would be three different ones, and include all the actions on the `StatusRowView` proper. Now, it presents as one element with no actions.

* Add haptics to StatusRowView accessibility actions

* Improve accessibility of ConversationsListRow

This commit adds:
- A combined representation of the component views
- “Unread” as the first part of the label (if this is the case)
- All relevant actions as custom actions
- Reply as magic tap

* Remove StatusRowView accessibilityActions if viewModel.showActions is false

* Hide media attachments from accessibility if the view is not focused

* Combine NotificationRowView accessibility elements; add user actions

Previously, there was no real way to interact with these notifications.

Now, the notifications that show the actions row have the appropriate StatusRowView-derived actions, and new followers notifications have more actions that let you see each user’s profile.

* Prefer @Environment’s `accessibilityEnabled` over `isVoiceOverRunning`

This way we can cater for Voice Control, Full Keyboard Access and Switch Control as well.

---------

Co-authored-by: Thomas Ricouard <ricouard77@gmail.com>
2023-03-24 07:52:29 +01:00

181 lines
5.6 KiB
Swift

import DesignSystem
import Env
import Models
import Network
import Shimmer
import SwiftUI
public struct NotificationsListView: View {
@Environment(\.scenePhase) private var scenePhase
@EnvironmentObject private var theme: Theme
@EnvironmentObject private var watcher: StreamWatcher
@EnvironmentObject private var client: Client
@EnvironmentObject private var routerPath: RouterPath
@EnvironmentObject private var account: CurrentAccount
@StateObject private var viewModel = NotificationsViewModel()
let lockedType: Models.Notification.NotificationType?
public init(lockedType: Models.Notification.NotificationType?) {
self.lockedType = lockedType
}
public var body: some View {
List {
topPaddingView
notificationsView
}
.id(account.account?.id)
.environment(\.defaultMinListRowHeight, 1)
.listStyle(.plain)
.navigationTitle(lockedType?.menuTitle() ?? viewModel.selectedType?.menuTitle() ?? "notifications.navigation-title")
.navigationBarTitleDisplayMode(.inline)
.toolbar {
if lockedType == nil {
ToolbarTitleMenu {
Button {
viewModel.selectedType = nil
} label: {
Label("notifications.navigation-title", systemImage: "bell.fill")
}
Divider()
ForEach(Notification.NotificationType.allCases, id: \.self) { type in
Button {
viewModel.selectedType = type
} label: {
Label {
Text(type.menuTitle())
} icon: {
type.icon(isPrivate: false)
}
}
}
}
}
}
.scrollContentBackground(.hidden)
.background(theme.primaryBackgroundColor)
.task {
viewModel.client = client
viewModel.currentAccount = account
if let lockedType {
viewModel.selectedType = lockedType
}
await viewModel.fetchNotifications()
}
.refreshable {
SoundEffectManager.shared.playSound(of: .pull)
HapticManager.shared.fireHaptic(of: .dataRefresh(intensity: 0.3))
await viewModel.fetchNotifications()
HapticManager.shared.fireHaptic(of: .dataRefresh(intensity: 0.7))
SoundEffectManager.shared.playSound(of: .refresh)
}
.onChange(of: watcher.latestEvent?.id, perform: { _ in
if let latestEvent = watcher.latestEvent {
viewModel.handleEvent(event: latestEvent)
}
})
.onChange(of: scenePhase, perform: { scenePhase in
switch scenePhase {
case .active:
Task {
await viewModel.fetchNotifications()
}
default:
break
}
})
}
@ViewBuilder
private var notificationsView: some View {
switch viewModel.state {
case .loading:
ForEach(ConsolidatedNotification.placeholders()) { notification in
NotificationRowView(notification: notification,
client: client,
routerPath: routerPath,
followRequests: account.followRequests)
.redacted(reason: .placeholder)
.listRowInsets(.init(top: 12,
leading: .layoutPadding + 4,
bottom: 12,
trailing: .layoutPadding))
.listRowBackground(theme.primaryBackgroundColor)
.redacted(reason: .placeholder)
}
case let .display(notifications, nextPageState):
if notifications.isEmpty {
EmptyView(iconName: "bell.slash",
title: "notifications.empty.title",
message: "notifications.empty.message")
.listRowBackground(theme.primaryBackgroundColor)
.listSectionSeparator(.hidden)
} else {
ForEach(notifications) { notification in
NotificationRowView(notification: notification,
client: client,
routerPath: routerPath,
followRequests: account.followRequests)
.listRowInsets(.init(top: 12,
leading: .layoutPadding + 4,
bottom: 12,
trailing: .layoutPadding))
.listRowBackground(notification.type == .mention && lockedType != .mention ?
theme.secondaryBackgroundColor : theme.primaryBackgroundColor)
.id(notification.id)
}
}
switch nextPageState {
case .none:
EmptyView()
case .hasNextPage:
loadingRow
.onAppear {
Task {
await viewModel.fetchNextPage()
}
}
case .loadingNextPage:
loadingRow
}
case .error:
ErrorView(title: "notifications.error.title",
message: "notifications.error.message",
buttonTitle: "action.retry")
{
Task {
await viewModel.fetchNotifications()
}
}
.listRowBackground(theme.primaryBackgroundColor)
.listSectionSeparator(.hidden)
}
}
private var loadingRow: some View {
HStack {
Spacer()
ProgressView()
Spacer()
}
.listRowInsets(.init(top: .layoutPadding,
leading: .layoutPadding + 4,
bottom: .layoutPadding,
trailing: .layoutPadding))
.listRowBackground(theme.primaryBackgroundColor)
}
private var topPaddingView: some View {
HStack {}
.listRowBackground(Color.clear)
.listRowSeparator(.hidden)
.listRowInsets(.init())
.frame(height: .layoutPadding)
.accessibilityHidden(true)
}
}