Files
element-x-ios/ElementX/Sources/Screens/Settings/DeveloperOptionsScreen/View/DeveloperOptionsScreen.swift
T
Mauro 426fdc70a1 Add a developer option and selection mode for timeline messages (#6102)
* Add a developer option and selection mode for timeline messages

First step of the multi-select messages feature (element-meta#3255, iOS
counterpart of element-x-android#6918). Everything is gated behind the new
`messageMultiSelectEnabled` developer option and nothing changes while it
is off.

- Adds a "Select" action to the timeline item menu for remote messages in
  the room, focused and thread timelines. Choosing it enters selection
  mode with that message selected.
- While selecting, every bubbled row shows a checkbox on its leading edge
  and tapping or long pressing a row toggles it. State events, redacted
  messages, live locations, unsupported events and local echoes cannot be
  selected and stay inert. Selected rows get the accent background.
- The navigation bar swaps to a Cancel button and an "N selected" title,
  the back button is hidden and the composer is removed until the
  selection ends (Cancel or deselecting the last item). This is the hook
  where the bulk action bar will land in the next PR.
- The selection is capped at 30 messages, showing a toast when the cap
  is hit, and is cleared if the developer option is switched off.
- The selection state lives in `TimelineViewModel` so room and thread
  timelines share the behaviour without extra plumbing.

Includes unit tests for the menu action gating and the selection state
transitions, plus RoomScreen and bubble styler previews for the new state.

* Harden the timeline selection mode after review

- Reconcile the selection with timeline updates: selected messages that
  become unselectable (e.g. redacted) are dropped, and the selection is
  cleared when the timeline is swapped for a focused or live one, so the
  count can never refer to items that aren't on screen.
- Keep the composer mounted but collapsed while selecting, instead of
  removing it from the hierarchy. This preserves the draft and composer
  mode and avoids the disappear side effects. The footer with the identity
  warnings stays visible.
- Give the long press modifier an `isEnabled` flag so the recogniser is
  disabled while selecting, rather than only skipping the action while
  still animating and buzzing.
- Gate the Mac context menu on the selection like the other gestures.
- VoiceOver: a selectable bubble becomes a button carrying the selected
  trait whose default action toggles it, non-selectable rows lose their
  message actions while selecting, and reactions, thread summaries and the
  checkbox are hidden from the accessibility tree in selection mode.

* Stop voice message recordings when entering selection mode

The composer is collapsed rather than removed while selecting, so an
in-progress recording would otherwise keep the microphone open out of
sight. Entering the selection now stops the recording, which moves the
composer to the preview state so the message is still there to play or
send once the selection ends. Playback of voice messages is unaffected.

* Use the translated strings for the message selection mode

The selection strings have been imported to Localazy, so the untranslated
placeholders are dropped in favour of `action_select`,
`screen_room_maximum_messages_selected` and the `screen_room_selection_count`
plural. Only these keys are taken from the download to keep the change
focused.

* Apply review suggestions to the message selection mode

Addresses the first review round on the selection mode:

- Undecryptable messages are no longer selectable, as none of the bulk
  actions can be taken on them from the single item menu either.
- Renames for clarity: the menu action is `selectMessages` (leaving room
  for a future `selectText`), the view action is `startSelection`, the
  state exposes `contains(_:)`, `limit` and `isAtLimit`, and the composer
  collapsing modifier is `collapsedInPlace(_:)`.
- `canSelectMessages` uses a switch expression, the selection state doc
  comment refers to a feature flag rather than Labs, the recording helper
  doc describes only what it does, and `toggleSelection()` moves below
  the subviews.

* Keep the accessibility labels of timeline items while selecting

The selection mode used to replace each item's accessibility body with a
plain combined element, dropping the sender name representation and the
gallery label. The per item labelling now always applies, and the selection
only changes the interaction on top of it: the message actions are offered
as before, or the item becomes a button carrying the selected trait whose
default action toggles it. Polls and galleries collapse into a single
element only while selecting, as their children are inert then.

* Keep the timeline types within the lint limits after rebasing

The redaction reason work on develop grew the menu action handler and the
timeline view model right up to SwiftLint's size limits, so the selection
additions tipped them over. The `selectMessages` case now shares the
`downloadMedia` break and the selection flag subscription lives in the
selection extension.

* Fix the snapshot regressions from the selection mode

- Drop `geometryGroup()` from the bubble row: it stopped the avatar
  placeholder initial from rendering, which showed up as a mismatch in
  every timeline item snapshot.
- Collapse the composer with opacity instead of clipping, as the clip also
  removed the composer background from the home indicator area while the
  composer was fully visible.
- Keep the timeline item menu preview on the default flag-off state so the
  existing menu snapshots stay valid.
- Record the new "Selecting" room screen and "Selection" bubble snapshots
  on the same iPhone SE simulator CI uses.
2026-09-09 13:36:57 +02:00

271 lines
10 KiB
Swift

//
// Copyright 2025 Element Creations Ltd.
// Copyright 2022-2025 New Vector Ltd.
//
// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
// Please see LICENSE files in the repository root for full details.
//
import SwiftUI
struct DeveloperOptionsScreen: View {
@Environment(\.dismiss) private var dismiss
@State private var showMarkAllRoomsAsReadAlert = false
@Bindable var context: DeveloperOptionsScreenViewModel.Context
@State private var showConfetti = false
@State private var elementCallURLOverrideString: String
init(context: DeveloperOptionsScreenViewModel.Context) {
self.context = context
elementCallURLOverrideString = context.elementCallBaseURLOverride?.absoluteString ?? ""
}
var body: some View {
Form {
if let storeSizes = context.viewState.storeSizes {
Section("Usage") {
ForEach(storeSizes) { storeSize in
LabeledContent(storeSize.name, value: storeSize.size)
}
}
}
Section("Logging") {
LogLevelConfigurationView(logLevel: $context.logLevel)
DisclosureGroup("SDK trace packs") {
ForEach(TraceLogPack.allCases, id: \.self) { pack in
Toggle(isOn: $context.traceLogPacks[pack]) {
Text(pack.title)
}
}
}
}
Section("General") {
Toggle(isOn: $context.linkNewDeviceEnabled) {
Text("Link new device with QR code")
}
Toggle(isOn: $context.globalSearchEnabled) {
Text("Global search")
Text("Moves search to a separate tab")
}
context.viewState.appHooks
.developerOptionsScreenHook
.generalSectionRows(isSignedIn: context.viewState.isSignedIn)
}
Section("Room List") {
Picker("Room list activity visibility", selection: $context.roomListActivityVisibility) {
ForEach(RoomListActivityVisibility.allCases, id: \.self) { visibility in
Text(visibility.rawValue.capitalized)
.tag(visibility)
}
}
Toggle(isOn: $context.roomListNotificationCountEnabled) {
Text("Show unread notification count")
}
Toggle(isOn: $context.fuzzyRoomListSearchEnabled) {
Text("Fuzzy searching")
}
Toggle(isOn: $context.lowPriorityFilterEnabled) {
Text("Low priority filter")
}
Toggle(isOn: $context.mentionsFilterEnabled) {
Text("Mentions filter")
}
Toggle(isOn: $context.automaticBackPaginationEnabled) {
Text("Automatic back pagination")
Text("Requires app reboot")
}
}
Section("Room") {
Toggle(isOn: $context.linkPreviewsEnabled) {
Text("Link previews")
Text("Follows the timeline media visibility settings.")
Text("Can leak the device IP address when loading link metadata.")
.foregroundStyle(.compound.textCriticalPrimary)
}
Toggle(isOn: $context.jumpToReadMarkerEnabled) {
Text("Jump to unread")
Text("Adds a button to jump to the read marker, plus a presence dot on the scroll-to-bottom button when new messages arrive while scrolled away.")
}
Toggle(isOn: $context.messageMultiSelectEnabled) {
Text("Multi-select messages")
Text("Adds a Select action to the message menu to pick several messages at once.")
}
}
Section {
Toggle(isOn: $context.enableOnlySignedDeviceIsolationMode) {
Text("Exclude insecure devices when sending/receiving messages")
Text("Requires app reboot")
}
} header: {
Text("Trust and Decoration")
} footer: {
Text("This setting controls how end-to-end encryption (E2EE) keys are exchanged. Enabling it will prevent the inclusion of devices that have not been explicitly verified by their owners.")
}
Section("Element Call remote URL override") {
TextField("Leave empty to use EC locally", text: $elementCallURLOverrideString)
.autocorrectionDisabled(true)
.autocapitalization(.none)
.foregroundColor(URL(string: elementCallURLOverrideString) == nil ? .red : .primary)
.submitLabel(.done)
.onSubmit {
if elementCallURLOverrideString.isEmpty {
context.elementCallBaseURLOverride = nil
} else if let url = URL(string: elementCallURLOverrideString) {
context.elementCallBaseURLOverride = url
}
}
}
Section("Notifications") {
Toggle(isOn: $context.hideQuietNotificationAlerts) {
Text("Hide quiet alerts")
Text("The badge count will still be updated")
}
Toggle(isOn: $context.focusEventOnNotificationTap) {
Text("Focus event on notification tap")
}
}
Section {
Button {
showMarkAllRoomsAsReadAlert = true
} label: {
Text("Mark all rooms as read")
}.alert("Are you sure you want to mark all the rooms as read?", isPresented: $showMarkAllRoomsAsReadAlert) {
Button("Cancel", role: .cancel) { }
Button("Yes") {
context.send(viewAction: .markAllRoomsAsRead)
}
}
} footer: {
Text("""
This will send a private read receipt and a read marker in every room you are part of. \
It's a long running operation that might get rate limited. \
It will run in the background but the app must be alive for it to finish.
""")
}
Section {
Button {
showConfetti = true
} label: {
Text("🥳")
.frame(maxWidth: .infinity)
.alignmentGuide(.listRowSeparatorLeading) { _ in 0 } // Fix separator alignment
}
}
if context.viewState.shouldShowClearCache {
Section {
Button(role: .destructive) {
context.send(viewAction: .clearCache)
} label: {
Text("Clear cache")
.frame(maxWidth: .infinity)
}
}
}
}
.overlay(effectsView)
.navigationTitle(L10n.commonDeveloperOptions)
.navigationBarTitleDisplayMode(.inline)
.toolbar { toolbar }
}
@ViewBuilder
private var effectsView: some View {
if showConfetti {
EffectsView(effect: .confetti)
.ignoresSafeArea()
.allowsHitTesting(false)
.task { await removeConfettiAfterDelay() }
}
}
private func removeConfettiAfterDelay() async {
try? await Task.sleep(for: .seconds(4))
showConfetti = false
}
@ToolbarContentBuilder
private var toolbar: some ToolbarContent {
if !context.viewState.isSignedIn {
ToolbarItem(placement: .primaryAction) {
if #available(iOS 26.0, *) {
Button(role: .close, action: dismiss.callAsFunction)
} else {
Button(L10n.actionDone, action: dismiss.callAsFunction)
}
}
}
}
}
private struct LogLevelConfigurationView: View {
@Binding var logLevel: LogLevel
var body: some View {
Picker(selection: $logLevel) {
ForEach(logLevels, id: \.self) { logLevel in
Text(logLevel.title)
}
} label: {
Text("Log level")
Text("Requires app reboot")
}
}
/// Allows the picker to work with associated values
private var logLevels: [LogLevel] {
[.error, .warn, .info, .debug, .trace]
}
}
private extension Set<TraceLogPack> {
/// A custom subscript that allows binding a toggle to add/remove a pack from the array.
subscript(pack: TraceLogPack) -> Bool {
get { contains(pack) }
set {
if newValue {
insert(pack)
} else {
remove(pack)
}
}
}
}
// MARK: - Previews
struct DeveloperOptionsScreen_Previews: PreviewProvider {
static let viewModel = DeveloperOptionsScreenViewModel(developerOptions: AppSettings.volatile(),
appHooks: AppHooks(),
clientProxy: ClientProxyMock(.init()))
static var previews: some View {
ElementNavigationStack {
DeveloperOptionsScreen(context: viewModel.context)
}
}
}