Allow focusing the different avatars making up a DM details cluster separately. (#3341)

ElementX/Sources/Other/SwiftUI/Views/LoadableAvatarImage.swift

@@ -13,20 +13,39 @@ struct LoadableAvatarImage: View {
     private let contentID: String?
     private let avatarSize: AvatarSize
     private let mediaProvider: MediaProviderProtocol?
+    private let onTap: ((URL) -> Void)?
     
     @ScaledMetric private var frameSize: CGFloat
     
-    init(url: URL?, name: String?, contentID: String?, avatarSize: AvatarSize, mediaProvider: MediaProviderProtocol?) {
+    init(url: URL?, name: String?,
+         contentID: String?,
+         avatarSize: AvatarSize,
+         mediaProvider: MediaProviderProtocol?,
+         onTap: ((URL) -> Void)? = nil) {
         self.url = url
         self.name = name
         self.contentID = contentID
         self.avatarSize = avatarSize
         self.mediaProvider = mediaProvider
+        self.onTap = onTap
         
         _frameSize = ScaledMetric(wrappedValue: avatarSize.value)
     }
     
     var body: some View {
+        if let onTap, let url {
+            Button {
+                onTap(url)
+            } label: {
+                clippedAvatar
+            }
+            .buttonStyle(.borderless) // Add a button style to stop the whole row being tappable.
+        } else {
+            clippedAvatar
+        }
+    }
+    
+    private var clippedAvatar: some View {
         avatar
             .frame(width: frameSize, height: frameSize)
             .background(Color.compound.bgCanvasDefault)
@@ -34,7 +53,7 @@ struct LoadableAvatarImage: View {
     }
     
     @ViewBuilder
-    var avatar: some View {
+    private var avatar: some View {
         if let url {
             LoadableImage(url: url,
                           mediaType: .avatar,