add account popovers for display name and handle (#1687)

IceCubesApp/App/Tabs/Settings/AccountSettingView.swift

@@ -105,7 +105,7 @@ struct AccountSettingsView: View {
     .toolbar {
       ToolbarItem(placement: .principal) {
         HStack {
-          AvatarView(account: account, config: .embed)
+          AvatarView(account.avatar, config: .embed)
           Text(account.safeDisplayName)
             .font(.headline)
         }

Packages/Account/Sources/Account/AccountDetailHeaderView.swift

@@ -99,7 +99,7 @@ struct AccountDetailHeaderView: View {
   private var accountAvatarView: some View {
     HStack {
       ZStack(alignment: .topTrailing) {
-        AvatarView(account: account, config: .account)
+        AvatarView(account.avatar, config: .account)
           .accessibilityLabel("accessibility.tabs.profile.user-avatar.label")
         if viewModel.isCurrentUser, isSupporter {
           Image(systemName: "checkmark.seal.fill")

Packages/Account/Sources/Account/AccountDetailView.swift

@@ -214,7 +214,7 @@ public struct AccountDetailView: View {
               Button {
                 routerPath.navigate(to: .accountDetailWithAccount(account: account))
               } label: {
-                AvatarView(account: account, config: .badge)
+                AvatarView(account.avatar, config: .badge)
                   .padding(.leading, -4)
                   .accessibilityLabel(account.safeDisplayName)
 

Packages/Account/Sources/Account/AccountsList/AccountsListRow.swift

@@ -44,7 +44,7 @@ public struct AccountsListRow: View {
 
   public var body: some View {
     HStack(alignment: .top) {
-      AvatarView(account: viewModel.account, config: .status)
+      AvatarView(viewModel.account.avatar)
       VStack(alignment: .leading, spacing: 2) {
         EmojiTextApp(.init(stringValue: viewModel.account.safeDisplayName), emojis: viewModel.account.emojis)
           .font(.scaledSubheadline)

Packages/AppAccount/Sources/AppAccount/AppAccountView.swift

@@ -35,7 +35,7 @@ public struct AppAccountView: View {
   private var compactView: some View {
     HStack {
       if let account = viewModel.account {
-        AvatarView(account: account)
+        AvatarView(account.avatar)
       } else {
         ProgressView()
       }
@@ -61,7 +61,7 @@ public struct AppAccountView: View {
       HStack {
         if let account = viewModel.account {
           ZStack(alignment: .topTrailing) {
-            AvatarView(account: account)
+            AvatarView(account.avatar)
             if viewModel.appAccount.id == appAccounts.currentAccount.id {
               Image(systemName: "checkmark.circle.fill")
                 .foregroundStyle(.white, .green)

Packages/AppAccount/Sources/AppAccount/AppAccountsSelectorView.swift

@@ -73,9 +73,9 @@ public struct AppAccountsSelectorView: View {
   private var labelView: some View {
     Group {
       if let account = currentAccount.account, !currentAccount.isLoadingAccount {
-        AvatarView(account: account, config: avatarConfig)
+        AvatarView(account.avatar, config: avatarConfig)
       } else {
-        AvatarView(account: nil,  config: avatarConfig)
+        AvatarView(config: avatarConfig)
           .redacted(reason: .placeholder)
           .allowsHitTesting(false)
       }

Packages/Conversations/Sources/Conversations/Detail/ConversationMessageView.swift

@@ -27,7 +27,7 @@ struct ConversationMessageView: View {
         if isOwnMessage {
           Spacer()
         } else {
-          AvatarView(account: message.account, config: .status)
+          AvatarView(message.account.avatar)
             .onTapGesture {
               routerPath.navigate(to: .accountDetailWithAccount(account: message.account))
             }

Packages/Conversations/Sources/Conversations/List/ConversationsListRow.swift

@@ -24,7 +24,7 @@ struct ConversationsListRow: View {
     } label: {
       VStack(alignment: .leading) {
         HStack(alignment: .top, spacing: 8) {
-          AvatarView(account: conversation.accounts.first!)
+          AvatarView(conversation.accounts.first!.avatar)
             .accessibilityHidden(true)
           VStack(alignment: .leading, spacing: 4) {
             HStack {

Packages/DesignSystem/Sources/DesignSystem/Views/AvatarView.swift

@@ -8,49 +8,13 @@ import Models
 public struct AvatarView: View {
   @Environment(Theme.self) private var theme
 
-  @State private var showPopup = false
+  public let avatar: URL?
-  @State private var autoDismiss = true
-  @State private var toggleTask: Task<Void, Never> = Task {}
-
-  public let account: Account?
   public let config: FrameConfig
-  public let hasPopup: Bool
 
   public var body: some View {
-    if let account = account {
+    if let avatar {
-      if hasPopup {
+      AvatarImage(avatar, config: adaptiveConfig)
-        AvatarImage(account: account, config: adaptiveConfig)
+        .frame(width: config.width, height: config.height)
-          .frame(width: config.width, height: config.height)
-          .onHover { hovering in
-            if hovering {
-              toggleTask.cancel()
-              toggleTask = Task {
-                try? await Task.sleep(nanoseconds: NSEC_PER_SEC / 2)
-                guard !Task.isCancelled else { return }
-                if !showPopup {
-                  showPopup = true
-                }
-              }
-            } else {
-              if !showPopup {
-                toggleTask.cancel()
-              }
-            }
-          }
-          .hoverEffect(.lift)
-          .popover(isPresented: $showPopup) {
-            AccountPopupView(
-              account: account,
-              theme: theme,
-              showPopup: $showPopup,
-              autoDismiss: $autoDismiss,
-              toggleTask: $toggleTask
-            )
-          }
-      } else {
-        AvatarImage(account: account, config: adaptiveConfig)
-          .frame(width: config.width, height: config.height)
-      }
     } else {
       AvatarPlaceHolder(config: adaptiveConfig)
     }
@@ -66,10 +30,9 @@ public struct AvatarView: View {
     return FrameConfig(width: config.width, height: config.height, cornerRadius: cornerRadius)
   }
 
-  public init(account: Account?, config: FrameConfig = FrameConfig.status, hasPopup: Bool = false) {
+  public init(_ avatar: URL? = nil, config: FrameConfig = .status) {
-    self.account = account
+    self.avatar = avatar
     self.config = config
-    self.hasPopup = hasPopup
   }
 
   public struct FrameConfig: Equatable {
@@ -110,7 +73,7 @@ struct PreviewWrapper: View {
 
   var body: some View {
     VStack(alignment: .leading) {
-      AvatarView(account: Self.account, config: .status)
+      AvatarView(Self.account.avatar)
         .environment(Theme.shared)
       Toggle("Avatar Shape", isOn: $isCircleAvatar)
     }
@@ -147,14 +110,14 @@ struct PreviewWrapper: View {
 struct AvatarImage: View {
   @Environment(\.redactionReasons) private var reasons
 
-  public let account: Account
+  public let avatar: URL
   public let config: AvatarView.FrameConfig
 
   var body: some View {
     if reasons == .placeholder {
       AvatarPlaceHolder(config: config)
     } else {
-      LazyImage(request: ImageRequest(url: account.avatar, processors: [.resize(size: config.size)])
+      LazyImage(request: ImageRequest(url: avatar, processors: [.resize(size: config.size)])
       ) { state in
         if let image = state.image {
           image
@@ -169,6 +132,11 @@ struct AvatarImage: View {
       }
     }
   }
+
+  init(_ avatar: URL, config: AvatarView.FrameConfig) {
+    self.avatar = avatar
+    self.config = config
+  }
 }
 
 struct AvatarPlaceHolder: View {
@@ -181,7 +149,7 @@ struct AvatarPlaceHolder: View {
   }
 }
 
-struct AccountPopupView: View {
+struct AccountPopoverView: View {
   let account: Account
   let theme: Theme // using `@Environment(Theme.self) will crash the SwiftUI preview
   private let config: AvatarView.FrameConfig = .account
@@ -204,7 +172,7 @@ struct AccountPopupView: View {
 
       VStack(alignment: .leading) {
         HStack(alignment: .bottomAvatar) {
-          AvatarImage(account: account, config: adaptiveConfig)
+          AvatarImage(account.avatar, config: adaptiveConfig)
           Spacer()
           makeCustomInfoLabel(title: "account.following", count: account.followingCount ?? 0)
           makeCustomInfoLabel(title: "account.posts", count: account.statusesCount ?? 0)
@@ -317,3 +285,53 @@ private enum BottomAvatarAlignment: AlignmentID {
 extension VerticalAlignment {
   static let bottomAvatar = VerticalAlignment(BottomAvatarAlignment.self)
 }
+
+public struct AccountPopoverModifier : ViewModifier {
+  @Environment(Theme.self) private var theme
+
+  @State private var showPopup = false
+  @State private var autoDismiss = true
+  @State private var toggleTask: Task<Void, Never> = Task {}
+
+  let account: Account
+
+  public func body(content: Content) -> some View {
+    content
+      .onHover { hovering in
+        if hovering {
+          toggleTask.cancel()
+          toggleTask = Task {
+            try? await Task.sleep(nanoseconds: NSEC_PER_SEC / 2)
+            guard !Task.isCancelled else { return }
+            if !showPopup {
+              showPopup = true
+            }
+          }
+        } else {
+          if !showPopup {
+            toggleTask.cancel()
+          }
+        }
+      }
+      .hoverEffect(.lift)
+      .popover(isPresented: $showPopup) {
+        AccountPopoverView(
+          account: account,
+          theme: theme,
+          showPopup: $showPopup,
+          autoDismiss: $autoDismiss,
+          toggleTask: $toggleTask
+        )
+      }
+  }
+
+  init(_ account: Account) {
+    self.account = account
+  }
+}
+
+extension View {
+  public func accountPopover(_ account: Account) -> some View {
+    modifier(AccountPopoverModifier(account))
+  }
+}

Packages/Lists/Sources/Lists/Edit/ListEditView.swift

@@ -30,7 +30,7 @@ public struct ListEditView: View {
           } else {
             ForEach(viewModel.accounts) { account in
               HStack {
-                AvatarView(account: account, config: .status)
+                AvatarView(account.avatar)
                 VStack(alignment: .leading) {
                   EmojiTextApp(.init(stringValue: account.safeDisplayName),
                                emojis: account.emojis)

Packages/Notifications/Sources/Notifications/NotificationRowView.swift

@@ -52,7 +52,7 @@ struct NotificationRowView: View {
 
   private func makeAvatarView(type: Models.Notification.NotificationType) -> some View {
     ZStack(alignment: .topLeading) {
-      AvatarView(account: notification.accounts[0], hasPopup: true)
+      AvatarView(notification.accounts[0].avatar)
       makeNotificationIconView(type: type)
         .offset(x: -8, y: -8)
     }
@@ -83,7 +83,7 @@ struct NotificationRowView: View {
         ScrollView(.horizontal, showsIndicators: false) {
           LazyHStack(spacing: 8) {
             ForEach(notification.accounts) { account in
-              AvatarView(account: account, hasPopup: true)
+              AvatarView(account.avatar)
                 .contentShape(Rectangle())
                 .onTapGesture {
                   routerPath.navigate(to: .accountDetailWithAccount(account: account))

Packages/Status/Sources/Status/Editor/Components/StatusEditorAutoCompleteView.swift

@@ -31,7 +31,7 @@ struct StatusEditorAutoCompleteView: View {
         viewModel.selectMentionSuggestion(account: account)
       } label: {
         HStack {
-          AvatarView(account: account, config: AvatarView.FrameConfig.badge)
+          AvatarView(account.avatar, config: AvatarView.FrameConfig.badge)
           VStack(alignment: .leading) {
             EmojiTextApp(.init(stringValue: account.safeDisplayName),
                          emojis: account.emojis)

Packages/Status/Sources/Status/Editor/StatusEditorView.swift

@@ -248,7 +248,7 @@ public struct StatusEditorView: View {
                                   accountCreationEnabled: false,
                                   avatarConfig: .status)
         } else {
-          AvatarView(account: account, config: AvatarView.FrameConfig.status)
+          AvatarView(account.avatar, config: AvatarView.FrameConfig.status)
             .environment(theme)
             .accessibilityHidden(true)
         }

Packages/Status/Sources/Status/Embed/StatusEmbeddedView.swift

@@ -46,7 +46,7 @@ public struct StatusEmbeddedView: View {
 
   private func makeAccountView(account: Account) -> some View {
     HStack(alignment: .center) {
-      AvatarView(account: account, config: .embed, hasPopup: true)
+      AvatarView(account.avatar, config: .embed)
       VStack(alignment: .leading, spacing: 0) {
         EmojiTextApp(.init(stringValue: account.safeDisplayName), emojis: account.emojis)
           .font(.scaledFootnote)

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

@@ -68,7 +68,7 @@ public struct StatusRowView: View {
               Button {
                 viewModel.navigateToAccountDetail(account: viewModel.finalStatus.account)
               } label: {
-                AvatarView(account: viewModel.finalStatus.account, config: .status, hasPopup: true)
+                AvatarView(viewModel.finalStatus.account.avatar)
               }
             }
             VStack(alignment: .leading) {

Packages/Status/Sources/Status/Row/Subviews/StatusRowDetailView.swift

@@ -103,7 +103,7 @@ struct StatusRowDetailView: View {
     ScrollView(.horizontal, showsIndicators: false) {
       LazyHStack(spacing: 0) {
         ForEach(accounts) { account in
-          AvatarView(account: account, config: .list, hasPopup: true)
+          AvatarView(account.avatar, config: .list)
             .padding(.leading, -4)
         }
         .transition(.opacity)

Packages/Status/Sources/Status/Row/Subviews/StatusRowHeaderView.swift

@@ -42,19 +42,22 @@ struct StatusRowHeaderView: View {
   private var accountView: some View {
     HStack(alignment: .center) {
       if theme.avatarPosition == .top {
-        AvatarView(account: viewModel.finalStatus.account, config: .status, hasPopup: true)
+        AvatarView(viewModel.finalStatus.account.avatar)
+          .accountPopover(viewModel.finalStatus.account)
       }
       VStack(alignment: .leading, spacing: 2) {
         HStack(alignment: .firstTextBaseline, spacing: 2) {
           Group {
             EmojiTextApp(.init(stringValue: viewModel.finalStatus.account.safeDisplayName),
                          emojis: viewModel.finalStatus.account.emojis)
-              .font(.scaledSubheadline)
+            .font(.scaledSubheadline)
-              .foregroundColor(theme.labelColor)
+            .foregroundColor(theme.labelColor)
-              .emojiSize(Font.scaledSubheadlineFont.emojiSize)
+            .emojiSize(Font.scaledSubheadlineFont.emojiSize)
-              .emojiBaselineOffset(Font.scaledSubheadlineFont.emojiBaselineOffset)
+            .emojiBaselineOffset(Font.scaledSubheadlineFont.emojiBaselineOffset)
-              .fontWeight(.semibold)
+            .fontWeight(.semibold)
-              .lineLimit(1)
+            .lineLimit(1)
+            .accountPopover(viewModel.finalStatus.account)
+
             accountBadgeView
               .font(.footnote)
           }
@@ -69,6 +72,7 @@ struct StatusRowHeaderView: View {
               .font(.scaledFootnote)
               .foregroundColor(.gray)
               .lineLimit(1)
+              .accountPopover(viewModel.finalStatus.account)
           }
         }
         if theme.avatarPosition == .top {
@@ -82,6 +86,7 @@ struct StatusRowHeaderView: View {
             .foregroundColor(.gray)
             .lineLimit(1)
             .offset(y: 1)
+            .accountPopover(viewModel.finalStatus.account)
         }
       }
     }

Packages/Status/Sources/Status/Row/Subviews/StatusRowReblogView.swift

@@ -8,7 +8,7 @@ struct StatusRowReblogView: View {
     if viewModel.status.reblog != nil {
       HStack(spacing: 2) {
         Image("Rocket.Fill")
-        AvatarView(account: viewModel.status.account, config: .boost, hasPopup: true)
+        AvatarView(viewModel.status.account.avatar, config: .boost)
         EmojiTextApp(.init(stringValue: viewModel.status.account.safeDisplayName), emojis: viewModel.status.account.emojis)
         Text("status.row.was-boosted")
       }