Polish iOS layout editor controls

- Replace crowded text-heavy toolbar with a compact icon-based toolbar:
  Cancel (xmark.circle), Undo (arrow.uturn.backward.circle, disabled when empty),
  Portrait/Landscape picker, Skin picker (paintpalette), Options menu (ellipsis),
  Save (checkmark.circle).

- Remove the permanent horizontal visibility scroll row and reset button row
  from the canvas. Move both into a compact Options menu with two sections:
  Visibility (group + per-button action toggles) and Reset (Action, D-Pad, All,
  Visibility). Each option still pushes an undo snapshot before mutation.

- Skin picker remains a separate compact menu. Selected skin checkmark is still
  shown. Changing skin updates editor button art immediately.

- Toolbar background is black at 50% opacity to stay readable over the game.
- No gameplay, layout, or touch target behavior changed. Phase 1 and 2A logic
  is preserved.

Author: J1coding

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

@@ -77,10 +77,8 @@ struct PadLayoutEditView: View {
                     editorContent(areaW: geo.size.width, areaH: geo.size.height)
 
                     VStack {
-                        floatingToolbar
+                        compactToolbar
                         Spacer()
-                        visibilityRow
-                        resetButtons(isLandscape: true)
                     }
                 }
                 .contentShape(Rectangle())
@@ -102,7 +100,7 @@ struct PadLayoutEditView: View {
                     }
 
                     VStack {
-                        floatingToolbar
+                        compactToolbar
                         Spacer()
                     }
                 }
@@ -134,102 +132,76 @@ struct PadLayoutEditView: View {
                 }
 
                 VStack {
-                    HStack {
-                        Button("Cancel") {
-                            if let snapshot = originalSnapshot {
-                                restore(snapshot: snapshot)
-                            }
-                            onDismiss()
-                        }
-                        .padding(8)
-                        .background(.black.opacity(0.5), in: Capsule())
-                        Spacer()
-                        Button("Undo") {
-                            guard let snapshot = undoStack.popLast() else { return }
-                            restore(snapshot: snapshot)
-                        }
-                        .disabled(undoStack.isEmpty)
-                        .font(.caption.weight(.semibold))
-                        .padding(.horizontal, 10)
-                        .padding(.vertical, 6)
-                        .background(.black.opacity(0.5), in: Capsule())
-                        Spacer()
-                        Picker("", selection: $editLandscape) {
-                            Text("Portrait").tag(false)
-                            Text("Landscape").tag(true)
-                        }
-                        .pickerStyle(.segmented)
-                        .frame(width: 168)
-                        .background(.black.opacity(0.3), in: RoundedRectangle(cornerRadius: 8))
-                        Spacer()
-                        skinPickerMenu
-                        Spacer()
-                        Button("Save") {
-                            NSLog("@@PAD_LAYOUT@@ save portrait=%d landscape=%d", layout.portrait.count, layout.landscape.count)
-                            layout.save()
-                            undoStack.removeAll()
-                            originalSnapshot = nil
-                            onDismiss()
-                        }
-                        .fontWeight(.semibold)
-                        .padding(8)
-                        .background(.black.opacity(0.5), in: Capsule())
-                    }
-                    .padding(.horizontal)
-                    .padding(.top, 4)
+                    compactToolbar
                     Spacer()
-                    visibilityRow
-                    resetButtons(isLandscape: false)
                 }
             }
             .contentShape(Rectangle())
         }
     }
 
-    private var floatingToolbar: some View {
-        HStack {
-            Button("Cancel") {
+    // MARK: - Compact toolbar
+    private var compactToolbar: some View {
+        HStack(spacing: 12) {
+            // Cancel
+            Button {
                 if let snapshot = originalSnapshot {
                     restore(snapshot: snapshot)
                 }
                 onDismiss()
+            } label: {
+                Image(systemName: "xmark.circle.fill")
+                    .font(.title2)
+                    .foregroundStyle(.white)
             }
-            .padding(8)
-            .background(.black.opacity(0.5), in: Capsule())
-            Spacer()
-            Button("Undo") {
+
+            // Undo
+            Button {
                 guard let snapshot = undoStack.popLast() else { return }
                 restore(snapshot: snapshot)
+            } label: {
+                Image(systemName: "arrow.uturn.backward.circle")
+                    .font(.title2)
+                    .foregroundStyle(undoStack.isEmpty ? .white.opacity(0.3) : .white)
             }
             .disabled(undoStack.isEmpty)
-            .font(.caption.weight(.semibold))
-            .padding(.horizontal, 10)
-            .padding(.vertical, 6)
-            .background(.black.opacity(0.5), in: Capsule())
+
             Spacer()
+
+            // Portrait / Landscape
             Picker("", selection: $editLandscape) {
                 Text("Portrait").tag(false)
                 Text("Landscape").tag(true)
             }
             .pickerStyle(.segmented)
-            .frame(width: 168)
+            .frame(width: 140)
             .background(.black.opacity(0.3), in: RoundedRectangle(cornerRadius: 8))
+
             Spacer()
+
+            // Skin picker
             skinPickerMenu
-            Spacer()
-            Button("Save") {
+
+            // Options (visibility + reset)
+            optionsMenu
+
+            // Save
+            Button {
                 NSLog("@@PAD_LAYOUT@@ save portrait=%d landscape=%d", layout.portrait.count, layout.landscape.count)
                 layout.save()
                 undoStack.removeAll()
                 originalSnapshot = nil
                 onDismiss()
+            } label: {
+                Image(systemName: "checkmark.circle.fill")
+                    .font(.title2)
+                    .foregroundStyle(.green)
             }
-            .fontWeight(.semibold)
-            .padding(8)
-            .background(.black.opacity(0.5), in: Capsule())
         }
         .padding(.horizontal)
         .padding(.top, 4)
+        .padding(.bottom, 8)
+        .background(.black.opacity(0.5))
     }
 
     private var skinPickerMenu: some View {
@@ -243,81 +215,58 @@ struct PadLayoutEditView: View {
             }
         } label: {
             Image(systemName: "paintpalette.fill")
-                .font(.callout)
+                .font(.title2)
                 .foregroundStyle(.white)
-                .frame(width: 34, height: 34)
-                .background(.black.opacity(0.5), in: Circle())
         }
     }
 
-    private func resetButtons(isLandscape: Bool) -> some View {
-        HStack(spacing: 12) {
-            Button("Reset Action") {
-                pushSnapshot()
-                layout.resetPerButtonActionButtons(isLandscape: isLandscape)
-            }
-            .font(.caption)
-            .foregroundStyle(.red.opacity(0.7))
-
-            Button("Reset D-Pad") {
-                pushSnapshot()
-                layout.resetPerButtonDPad(isLandscape: isLandscape)
-            }
-            .font(.caption)
-            .foregroundStyle(.red.opacity(0.7))
-
-            Button("Reset All") {
-                pushSnapshot()
-                layout.resetAll()
+    private var optionsMenu: some View {
+        Menu {
+            // Visibility section
+            Section("Visibility") {
+                ForEach(PadLayoutStore.groupIDs.filter { $0 != "action" }, id: \.self) { (id: String) in
+                    visibilityMenuItem(id: id)
+                }
+                visibilityMenuItem(id: "cross", label: "X")
+                visibilityMenuItem(id: "circle", label: "O")
+                visibilityMenuItem(id: "triangle", label: "Triangle")
+                visibilityMenuItem(id: "square", label: "Square")
             }
-            .font(.caption)
-            .foregroundStyle(.red.opacity(0.7))
 
-            Button("Reset Visibility") {
-                pushSnapshot()
-                layout.resetControlVisibility()
-            }
-            .font(.caption)
-            .foregroundStyle(.red.opacity(0.7))
-        }
-        .padding(.bottom, 6)
-    }
-
-    private var visibilityRow: some View {
-        ScrollView(.horizontal, showsIndicators: false) {
-            HStack(spacing: 10) {
-                // Group toggles (excluding the combined action group)
-                ForEach(PadLayoutStore.groupIDs.filter { $0 != "action" }, id: \.self) { (id: String) in
-                    visibilityButton(id: id)
+            // Reset section
+            Section("Reset") {
+                Button("Reset Action", role: .destructive) {
+                    pushSnapshot()
+                    layout.resetPerButtonActionButtons(isLandscape: editLandscape)
+                }
+                Button("Reset D-Pad", role: .destructive) {
+                    pushSnapshot()
+                    layout.resetPerButtonDPad(isLandscape: editLandscape)
+                }
+                Button("Reset All", role: .destructive) {
+                    pushSnapshot()
+                    layout.resetAll()
+                }
+                Button("Reset Visibility", role: .destructive) {
+                    pushSnapshot()
+                    layout.resetControlVisibility()
                 }
-                // Per-button action toggles
-                visibilityButton(id: "cross", label: "Toggle: X")
-                visibilityButton(id: "circle", label: "Toggle: O")
-                visibilityButton(id: "triangle", label: "Toggle: Triangle")
-                visibilityButton(id: "square", label: "Toggle: Square")
             }
-            .padding(.horizontal, 12)
+        } label: {
+            Image(systemName: "ellipsis.circle")
+                .font(.title2)
+                .foregroundStyle(.white)
         }
-        .frame(height: 32)
-        .padding(.bottom, 4)
     }
 
-    private func visibilityButton(id: String, label: String? = nil) -> some View {
+    private func visibilityMenuItem(id: String, label: String? = nil) -> some View {
         let visible = layout.isControlVisible(id)
         return Button {
             pushSnapshot()
             layout.setControlVisible(id, visible: !visible)
         } label: {
-            HStack(spacing: 4) {
-                Image(systemName: visible ? "eye" : "eye.slash")
-                    .font(.caption2)
-                Text(label ?? id.uppercased())
-                    .font(.caption2.weight(.semibold))
-            }
-            .foregroundStyle(visible ? Color.primary : Color.red)
-            .padding(.horizontal, 8)
-            .padding(.vertical, 4)
-            .background(visible ? Color.white.opacity(0.08) : Color.red.opacity(0.12), in: Capsule())
+            let name = label ?? id.uppercased()
+            Label(name, systemImage: visible ? "eye" : "eye.slash")
         }
     }