Polish iOS layout editor chrome

Author: J1coding

app/src/main/swift/Views/Settings/PadLayoutEditView.swift

@@ -23,41 +23,18 @@ struct PadLayoutEditView: View {
     var body: some View {
         GeometryReader { geo in
             let isActuallyLandscape = geo.size.width > geo.size.height
+            let safeAreaTop = geo.safeAreaInsets.top
             ZStack {
+                // Canvas
                 if isActuallyLandscape {
                     landscapeEditorCanvas()
                 } else {
                     portraitEditorCanvas(width: geo.size.width, height: geo.size.height)
                 }
 
-                // Banner when editing data for a different orientation than current geometry
-                if isActuallyLandscape != editLandscape {
-                    VStack {
-                        HStack(spacing: 6) {
-                            Image(systemName: "exclamationmark.triangle.fill")
-                            Text(editLandscape
-                                 ? "Editing landscape layout in portrait. Rotate device to landscape for full canvas."
-                                 : "Editing portrait layout in landscape. Rotate device to portrait for full canvas.")
-                                .font(.caption.weight(.semibold))
-                                .multilineTextAlignment(.center)
-                                .lineLimit(3)
-                        }
-                        .foregroundStyle(.yellow)
-                        .padding(.horizontal, 12)
-                        .padding(.vertical, 8)
-                        .background(.black.opacity(0.6), in: RoundedRectangle(cornerRadius: 8))
-                        Spacer()
-                    }
-                    .padding(.top, 50)
-                    .padding(.horizontal, 20)
-                    .allowsHitTesting(false)
-                }
-
-                VStack {
-                    compactToolbar
-                    Spacer()
-                }
-                .padding(.top, 50)
+                // Chrome overlay
+                editorChrome(isLandscape: isActuallyLandscape, safeAreaTop: safeAreaTop)
+                    .zIndex(1)
             }
         }
         .navigationBarHidden(true)
@@ -115,9 +92,23 @@ struct PadLayoutEditView: View {
         }
     }
 
-    // MARK: - Compact toolbar
-    private var compactToolbar: some View {
-        HStack(spacing: 12) {
+    // MARK: - Editor chrome overlay
+    private func editorChrome(isLandscape: Bool, safeAreaTop: CGFloat) -> some View {
+        VStack(spacing: 0) {
+            editorToolbar(isLandscape: isLandscape)
+
+            if isLandscape != editLandscape {
+                rotationWarningBanner()
+                    .padding(.top, 8)
+            }
+
+            Spacer()
+        }
+        .padding(.top, max(safeAreaTop, 4))
+    }
+
+    private func editorToolbar(isLandscape: Bool) -> some View {
+        HStack(spacing: isLandscape ? 8 : 12) {
             // Cancel
             Button {
                 if let snapshot = originalSnapshot {
@@ -126,7 +117,7 @@ struct PadLayoutEditView: View {
                 onDismiss()
             } label: {
                 Image(systemName: "xmark.circle.fill")
-                    .font(.title2)
+                    .font(isLandscape ? .title3 : .title2)
                     .foregroundStyle(.white)
             }
 
@@ -136,7 +127,7 @@ struct PadLayoutEditView: View {
                 restore(snapshot: snapshot)
             } label: {
                 Image(systemName: "arrow.uturn.backward.circle")
-                    .font(.title2)
+                    .font(isLandscape ? .title3 : .title2)
                     .foregroundStyle(undoStack.isEmpty ? .white.opacity(0.3) : .white)
             }
             .disabled(undoStack.isEmpty)
@@ -149,16 +140,16 @@ struct PadLayoutEditView: View {
                 Text("Landscape").tag(true)
             }
             .pickerStyle(.segmented)
-            .frame(width: 140)
+            .frame(width: 160)
             .background(.black.opacity(0.3), in: RoundedRectangle(cornerRadius: 8))
 
             Spacer()
 
             // Skin picker
-            skinPickerMenu
+            skinPickerMenuButton(isLandscape: isLandscape)
 
             // Options (visibility + reset)
-            optionsMenu
+            optionsMenuButton(isLandscape: isLandscape)
 
             // Save
             Button {
@@ -169,17 +160,35 @@ struct PadLayoutEditView: View {
                 onDismiss()
             } label: {
                 Image(systemName: "checkmark.circle.fill")
-                    .font(.title2)
+                    .font(isLandscape ? .title3 : .title2)
                     .foregroundStyle(.green)
             }
         }
         .padding(.horizontal)
         .padding(.top, 4)
         .padding(.bottom, 8)
-        .background(.black.opacity(0.5))
+        .background(.black.opacity(0.72), in: RoundedRectangle(cornerRadius: 12, style: .continuous))
+    }
+
+    private func rotationWarningBanner() -> some View {
+        HStack(spacing: 6) {
+            Image(systemName: "exclamationmark.triangle.fill")
+            Text(editLandscape
+                 ? "Editing landscape layout in portrait. Rotate device to landscape for full canvas."
+                 : "Editing portrait layout in landscape. Rotate device to portrait for full canvas.")
+                .font(.caption.weight(.semibold))
+                .multilineTextAlignment(.center)
+                .lineLimit(3)
+        }
+        .foregroundStyle(.yellow)
+        .padding(.horizontal, 12)
+        .padding(.vertical, 8)
+        .background(.black.opacity(0.6), in: RoundedRectangle(cornerRadius: 8))
+        .padding(.horizontal, 20)
+        .allowsHitTesting(false)
     }
 
-    private var skinPickerMenu: some View {
+    private func skinPickerMenuButton(isLandscape: Bool) -> some View {
         Menu {
             ForEach(VirtualPadSkin.allCases) { skin in
                 Button {
@@ -190,12 +199,12 @@ struct PadLayoutEditView: View {
             }
         } label: {
             Image(systemName: "paintpalette.fill")
-                .font(.title2)
+                .font(isLandscape ? .title3 : .title2)
                 .foregroundStyle(.white)
         }
     }
 
-    private var optionsMenu: some View {
+    private func optionsMenuButton(isLandscape: Bool) -> some View {
         Menu {
             // Visibility section
             Section("Visibility") {
@@ -229,7 +238,7 @@ struct PadLayoutEditView: View {
             }
         } label: {
             Image(systemName: "ellipsis.circle")
-                .font(.title2)
+                .font(isLandscape ? .title3 : .title2)
                 .foregroundStyle(.white)
         }
     }