From fbe2225554e9baa2de8ca6f6dae847fbc1e2220c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20D=E2=80=99Aquino?= <daniel@daquino.me>
Date: Wed, 18 Dec 2024 17:37:07 +0900
Subject: [PATCH] Fix button hidden behind software keyboard in create account
 view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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          | 25 ++++++++++++--------
 damus/Views/Profile/EditPictureControl.swift | 18 ++++++++++++--
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/damus/Views/CreateAccountView.swift b/damus/Views/CreateAccountView.swift
index e91c322fd..1a68924c6 100644
--- a/damus/Views/CreateAccountView.swift
+++ b/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())
diff --git a/damus/Views/Profile/EditPictureControl.swift b/damus/Views/Profile/EditPictureControl.swift
index f65b9b00e..91f54990b 100644
--- a/damus/Views/Profile/EditPictureControl.swift
+++ b/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")