From 6cc14f8249604ac4bdd809dd75df63afb2ef1305 Mon Sep 17 00:00:00 2001
From: Thomas Ricouard <ricouard77@gmail.com>
Date: Tue, 2 Jan 2024 21:50:11 +0100
Subject: [PATCH] Better UX for avatar / header selection

---
 .../Localization/Localizable.xcstrings        | 240 +++++++++++++++++-
 .../Account/Edit/EditAccountView.swift        |  25 +-
 2 files changed, 249 insertions(+), 16 deletions(-)

diff --git a/IceCubesApp/Resources/Localization/Localizable.xcstrings b/IceCubesApp/Resources/Localization/Localizable.xcstrings
index 1601a957..409c6416 100644
--- a/IceCubesApp/Resources/Localization/Localizable.xcstrings
+++ b/IceCubesApp/Resources/Localization/Localizable.xcstrings
@@ -12596,6 +12596,125 @@
         }
       }
     },
+    "account.edit.avatar" : {
+      "extractionState" : "manual",
+      "localizations" : {
+        "be" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit avatar"
+          }
+        },
+        "ca" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit avatar"
+          }
+        },
+        "de" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit avatar"
+          }
+        },
+        "en" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Edit avatar"
+          }
+        },
+        "en-GB" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Edit avatar"
+          }
+        },
+        "es" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit avatar"
+          }
+        },
+        "eu" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit avatar"
+          }
+        },
+        "fr" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Editer l'avatar"
+          }
+        },
+        "it" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit avatar"
+          }
+        },
+        "ja" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit avatar"
+          }
+        },
+        "ko" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit avatar"
+          }
+        },
+        "nb" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit avatar"
+          }
+        },
+        "nl" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit avatar"
+          }
+        },
+        "pl" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit avatar"
+          }
+        },
+        "pt-BR" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit avatar"
+          }
+        },
+        "tr" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit avatar"
+          }
+        },
+        "uk" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit avatar"
+          }
+        },
+        "zh-Hans" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit avatar"
+          }
+        },
+        "zh-Hant" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit avatar"
+          }
+        }
+      }
+    },
     "account.edit.display-name" : {
       "extractionState" : "manual",
       "localizations" : {
@@ -12953,6 +13072,125 @@
         }
       }
     },
+    "account.edit.header" : {
+      "extractionState" : "manual",
+      "localizations" : {
+        "be" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit header"
+          }
+        },
+        "ca" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit header"
+          }
+        },
+        "de" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit header"
+          }
+        },
+        "en" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Edit header"
+          }
+        },
+        "en-GB" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Edit header"
+          }
+        },
+        "es" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit header"
+          }
+        },
+        "eu" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit header"
+          }
+        },
+        "fr" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Editer la bannière"
+          }
+        },
+        "it" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit header"
+          }
+        },
+        "ja" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit header"
+          }
+        },
+        "ko" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit header"
+          }
+        },
+        "nb" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit header"
+          }
+        },
+        "nl" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit header"
+          }
+        },
+        "pl" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit header"
+          }
+        },
+        "pt-BR" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit header"
+          }
+        },
+        "tr" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit header"
+          }
+        },
+        "uk" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit header"
+          }
+        },
+        "zh-Hans" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit header"
+          }
+        },
+        "zh-Hant" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Edit header"
+          }
+        }
+      }
+    },
     "account.edit.metadata-name-placeholder" : {
       "extractionState" : "manual",
       "localizations" : {
@@ -73627,4 +73865,4 @@
     }
   },
   "version" : "1.0"
-}
+}
\ No newline at end of file
diff --git a/Packages/Account/Sources/Account/Edit/EditAccountView.swift b/Packages/Account/Sources/Account/Edit/EditAccountView.swift
index 4ba6c985..12f5e482 100644
--- a/Packages/Account/Sources/Account/Edit/EditAccountView.swift
+++ b/Packages/Account/Sources/Account/Edit/EditAccountView.swift
@@ -69,7 +69,7 @@ public struct EditAccountView: View {
     Section {
       ZStack(alignment: .center) {
         if let header = viewModel.header {
-          ZStack(alignment: .topTrailing) {
+          ZStack(alignment: .topLeading) {
             LazyImage(url: header) { state in
               if let image = state.image {
                 image
@@ -85,24 +85,20 @@ public struct EditAccountView: View {
               }
             }
             .frame(height: 150)
-            Button {
-              viewModel.isChangingHeader = true
-              viewModel.isPhotoPickerPresented = true
-            } label: {
-              Image(systemName: "photo.badge.plus")
-                .foregroundStyle(.white)
-            }
-            .buttonStyle(.borderedProminent)
-            .clipShape(Circle())
-            .offset(y: 4)
           }
         }
         if let avatar = viewModel.avatar {
           ZStack(alignment: .bottomLeading) {
             AvatarView(avatar, config: .account)
-            Button {
-              viewModel.isChangingAvatar = true
-              viewModel.isPhotoPickerPresented = true
+            Menu {
+              Button("account.edit.avatar") {
+                viewModel.isChangingAvatar = true
+                viewModel.isPhotoPickerPresented = true
+              }
+              Button("account.edit.header") {
+                viewModel.isChangingHeader = true
+                viewModel.isPhotoPickerPresented = true
+              }
             } label: {
               Image(systemName: "photo.badge.plus")
                 .foregroundStyle(.white)
@@ -110,7 +106,6 @@ public struct EditAccountView: View {
             .buttonStyle(.borderedProminent)
             .clipShape(Circle())
             .offset(x: -8, y: 8)
-
           }
         }
       }