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

2024-06-18 05:00:35 +00:00 · 2023-11-27 15:00:52 +07:00 · 2023-11-27 15:00:52 +07:00 · ea5480ef46
parent 98e8ffe4a3
commit ea5480ef46
18 changed files with 97 additions and 74 deletions
--- a/IceCubesApp/App/Tabs/Settings/AccountSettingView.swift
+++ b/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)
        }
--- a/Packages/Account/Sources/Account/AccountDetailHeaderView.swift
+++ b/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")
--- a/Packages/Account/Sources/Account/AccountDetailView.swift
+++ b/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)

--- a/Packages/Account/Sources/Account/AccountsList/AccountsListRow.swift
+++ b/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)
--- a/Packages/AppAccount/Sources/AppAccount/AppAccountView.swift
+++ b/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)
--- a/Packages/AppAccount/Sources/AppAccount/AppAccountsSelectorView.swift
+++ b/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)
      }
--- a/Packages/Conversations/Sources/Conversations/Detail/ConversationMessageView.swift
+++ b/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))
            }
--- a/Packages/Conversations/Sources/Conversations/List/ConversationsListRow.swift
+++ b/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 {
--- a/Packages/DesignSystem/Sources/DesignSystem/Views/AvatarView.swift
+++ b/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
-  @State private var autoDismiss = true
-  @State private var toggleTask: Task<Void, Never> = Task {}
-
-  public let account: Account?
+  public let avatar: URL?
  public let config: FrameConfig
-  public let hasPopup: Bool

  public var body: some View {
-    if let account = account {
-      if hasPopup {
-        AvatarImage(account: account, config: adaptiveConfig)
-          .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)
-      }
+    if let avatar {
+      AvatarImage(avatar, 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) {
-    self.account = account
+  public init(_ avatar: URL? = nil, config: FrameConfig = .status) {
+    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))
+  }
+}
--- a/Packages/Lists/Sources/Lists/Edit/ListEditView.swift
+++ b/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)
--- a/Packages/Notifications/Sources/Notifications/NotificationRowView.swift
+++ b/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))
--- a/Packages/Status/Sources/Status/Editor/Components/StatusEditorAutoCompleteView.swift
+++ b/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)
--- a/Packages/Status/Sources/Status/Editor/StatusEditorView.swift
+++ b/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)
        }
--- a/Packages/Status/Sources/Status/Embed/StatusEmbeddedView.swift
+++ b/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)
--- a/Packages/Status/Sources/Status/Row/StatusRowView.swift
+++ b/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) {
--- a/Packages/Status/Sources/Status/Row/Subviews/StatusRowDetailView.swift
+++ b/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)
--- a/Packages/Status/Sources/Status/Row/Subviews/StatusRowHeaderView.swift
+++ b/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)
-              .foregroundColor(theme.labelColor)
-              .emojiSize(Font.scaledSubheadlineFont.emojiSize)
-              .emojiBaselineOffset(Font.scaledSubheadlineFont.emojiBaselineOffset)
-              .fontWeight(.semibold)
-              .lineLimit(1)
+            .font(.scaledSubheadline)
+            .foregroundColor(theme.labelColor)
+            .emojiSize(Font.scaledSubheadlineFont.emojiSize)
+            .emojiBaselineOffset(Font.scaledSubheadlineFont.emojiBaselineOffset)
+            .fontWeight(.semibold)
+            .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)
        }
      }
    }
--- a/Packages/Status/Sources/Status/Row/Subviews/StatusRowReblogView.swift
+++ b/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")
      }