Fix button hidden behind software keyboard in create account view

This commit fixes an issue where the "next" button is hidden behind the
software keyboard in the account creation view, where it is very hard to
press.

The fix was done by dynamically shrinking the profile picture size when
keyboard appears in smartphone screens, so that there is enough space
for all content to appear.

Changelog-Fixed: Fixed issue where the "next" button would appear hidden and hard to click on the create account view
Closes: https://github.com/damus-io/damus/issues/2771
Signed-off-by: Daniel D’Aquino <daniel@daquino.me>

damus/Views/CreateAccountView.swift

@@ -6,11 +6,14 @@
 //
 
 import SwiftUI
+import Combine
 
-struct CreateAccountView: View {
+struct CreateAccountView: View, KeyboardReadable {
     @StateObject var account: CreateAccountModel = CreateAccountModel()
     @StateObject var profileUploadObserver = ImageUploadingObserver()
     var nav: NavigationCoordinator
+    @State var keyboardVisible: Bool = false
+    let maxViewportHeightForAdaptiveContentSize: CGFloat = 975 // 956px height = iPhone 16 Pro Max
     
     func SignupForm<FormContent: View>(@ViewBuilder content: () -> FormContent) -> some View {
         return VStack(alignment: .leading, spacing: 10.0, content: content)
@@ -26,15 +29,12 @@ struct CreateAccountView: View {
         ZStack(alignment: .top) {
             VStack {
                 Spacer()
+
                 VStack(alignment: .center) {
-                   
-                    EditPictureControl(uploader: .nostrBuild, keypair: account.keypair, pubkey: account.pubkey, size: 75, setup: true, image_url: $account.profile_image , uploadObserver: profileUploadObserver, callback: uploadedProfilePicture)
+                    let screenHeight = UIScreen.main.bounds.height
+
+                    EditPictureControl(uploader: .nostrBuild, keypair: account.keypair, pubkey: account.pubkey, size: keyboardVisible && screenHeight < maxViewportHeightForAdaptiveContentSize ? 25 : 75, setup: true, image_url: $account.profile_image , uploadObserver: profileUploadObserver, callback: uploadedProfilePicture)
                         .shadow(radius: 2)
-                        .padding(.top, 100)
-                    
-                    Text("Add Photo", comment: "Label to indicate user can add a photo.")
-                        .bold()
-                        .foregroundColor(DamusColors.neutral6)
                 }
                 
                 SignupForm {
@@ -42,13 +42,13 @@ struct CreateAccountView: View {
                         .foregroundColor(DamusColors.neutral6)
                     FormTextInput(NSLocalizedString("Satoshi Nakamoto", comment: "Name of Bitcoin creator(s)."), text: $account.name)
                         .textInputAutocapitalization(.words)
-
+                    
                     FormLabel(NSLocalizedString("Bio", comment: "Label to prompt bio entry for user to describe themself."), optional: true)
                         .foregroundColor(DamusColors.neutral6)
                     FormTextInput(NSLocalizedString("Absolute legend.", comment: "Example Bio"), text: $account.about)
                 }
                 .padding(.top, 25)
-
+                
                 Button(action: {
                     nav.push(route: Route.SaveKeys(account: account))
                 }) {
@@ -72,6 +72,11 @@ struct CreateAccountView: View {
         }
         .background(DamusBackground(maxHeight: UIScreen.main.bounds.size.height/2), alignment: .top)
         .dismissKeyboardOnTap()
+        .onReceive(keyboardPublisher) { visible in
+            withAnimation {
+                self.keyboardVisible = visible
+            }
+        }
         .navigationBarTitleDisplayMode(.inline)
         .navigationBarBackButtonHidden(true)
         .navigationBarItems(leading: BackNav())

damus/Views/Profile/EditPictureControl.swift

@@ -72,14 +72,14 @@ struct EditPictureControl: View {
                         view.framePreloadCount = 3
                     }
                     .scaledToFill()
-                    .frame(width: (size ?? 25) + 10, height: (size ?? 25) + 10)
+                    .frame(width: (size ?? 25) + 30, height: (size ?? 25) + 30)
                     .kfClickable()
                     .foregroundColor(DamusColors.white)
                     .clipShape(Circle())
                     .overlay(Circle().stroke(.white, lineWidth: 4))
             } else {
                 if setup ?? false {
-                    Image(systemName: "person")
+                    Image(systemName: "person.fill")
                         .resizable()
                         .scaledToFit()
                         .frame(width: size, height: size)
@@ -90,6 +90,20 @@ struct EditPictureControl: View {
                             Circle()
                                 .fill(PinkGradient, strokeBorder: .white, lineWidth: 4)
                         }
+                        .overlay(
+                            Image(systemName: "plus.circle.fill")
+                                .resizable()
+                                .frame(
+                                    width: max((size ?? 30)/3, 20),
+                                    height: max((size ?? 30)/3, 20)
+                                )
+                                .background(.damusDeepPurple)
+                                .clipShape(Circle())
+                                .padding(.leading, -10)
+                                .padding(.top, -10)
+                                .foregroundStyle(.white)
+                                .shadow(color: .black.opacity(0.2), radius: 4)
+                        , alignment: .bottomTrailing)
                         
                 } else {
                     Image("camera")