Better way to select icon color and more icons to choose from

OpenHaystack/OpenHaystack/HaystackApp/Model/Accessory.swift

@@ -13,7 +13,12 @@ import SwiftUI
 
 class Accessory: ObservableObject, Codable, Identifiable, Equatable, Hashable {
 
-    static let icons = ["briefcase.fill", "case.fill", "latch.2.case.fill", "key.fill", "mappin", "crown.fill", "gift.fill", "car.fill"]
+    static let icons = [
+        "creditcard.fill", "briefcase.fill", "case.fill", "latch.2.case.fill",
+        "key.fill", "mappin", "globe", "crown.fill",
+        "gift.fill", "car.fill", "bicycle", "figure.walk",
+        "heart.fill", "hare.fill", "tortoise.fill", "eye.fill",
+    ]
     static func randomIcon() -> String {
         return icons.randomElement() ?? ""
     }

OpenHaystack/OpenHaystack/HaystackApp/Views/AccessoryListEntry.swift

@@ -20,7 +20,6 @@ struct AccessoryListEntry: View {
     let formatter = DateFormatter()
 
     @State var editingName: Bool = false
-    @State var editingColor: Bool = false
 
     func timestampView() -> some View {
         formatter.dateStyle = .short
@@ -40,12 +39,6 @@ struct AccessoryListEntry: View {
         HStack {
             IconSelectionView(selectedImageName: $accessoryIcon, selectedColor: $accessoryColor)
 
-            if self.editingColor {
-                ColorPicker(selection: $accessoryColor, supportsOpacity: false) {
-                    EmptyView()
-                }
-            }
-
             VStack(alignment: .leading) {
                 if self.editingName {
                     TextField("Enter accessory name", text: $accessoryName, onCommit: { self.editingName = false })
@@ -60,9 +53,10 @@ struct AccessoryListEntry: View {
 
             Spacer()
             if !accessory.isDeployed {
-                Button(action: { self.deployAccessoryToMicrobit(accessory) }) {
-                    Text("Deploy")
-                }
+                Button(
+                    action: { self.deployAccessoryToMicrobit(accessory) },
+                    label: { Text("Deploy") }
+                )
             }
         }
         .padding(EdgeInsets(top: 5, leading: 0, bottom: 5, trailing: 0))
@@ -70,16 +64,12 @@ struct AccessoryListEntry: View {
             Button("Delete", action: { self.delete(accessory) })
             Divider()
             Button("Rename", action: { self.editingName = true })
-            Button("Change color", action: { self.editingColor = true })
             Divider()
             Button("Copy advertisment key (Base64)", action: { self.copyPublicKey(of: accessory) })
             Button("Copy key ID (Base64)", action: { self.copyPublicKeyHash(of: accessory) })
             Divider()
             Button("Mark as \(accessory.isDeployed ? "deployable" : "deployed")", action: { accessory.isDeployed.toggle() })
         }
-        .onChange(of: self.accessoryColor) { _ in
-            self.editingColor = false
-        }
     }
 
     func copyPublicKey(of accessory: Accessory) {

OpenHaystack/OpenHaystack/HaystackApp/Views/IconSelectionView.swift

@@ -38,7 +38,7 @@ struct IconSelectionView: View {
             .popover(
                 isPresented: self.$showImagePicker,
                 content: {
-                    ImageSelectionList(selectedImageName: self.$selectedImageName) {
+                    ImageSelectionList(selectedImageName: $selectedImageName, selectedColor: $selectedColor) {
                         self.showImagePicker = false
                     }
                 })
@@ -53,7 +53,7 @@ struct ColorSelectionView_Previews: PreviewProvider {
     static var previews: some View {
         Group {
             IconSelectionView(selectedImageName: self.$selectedImageName, selectedColor: self.$selectedColor)
-            ImageSelectionList(selectedImageName: self.$selectedImageName, dismiss: { () })
+            ImageSelectionList(selectedImageName: self.$selectedImageName, selectedColor: self.$selectedColor, dismiss: { () })
         }
 
     }
@@ -61,28 +61,44 @@ struct ColorSelectionView_Previews: PreviewProvider {
 
 struct ImageSelectionList: View {
     @Binding var selectedImageName: String
+    @Binding var selectedColor: Color
+    static let boxSize: CGFloat = 30.0
 
     let dismiss: () -> Void
 
+    let columns: [GridItem] = [
+        GridItem(.fixed(boxSize), spacing: nil),
+        GridItem(.fixed(boxSize), spacing: nil),
+        GridItem(.fixed(boxSize), spacing: nil),
+        GridItem(.fixed(boxSize), spacing: nil),
+    ]
+
     var body: some View {
-        List(Accessory.icons, id: \.self) { iconName in
-            Button(
-                action: {
-                    self.selectedImageName = iconName
-                    self.dismiss()
-                },
-                label: {
-                    HStack {
-                        Spacer()
-                        Image(systemName: iconName)
-                        Spacer()
+        VStack {
+            ColorPicker("Pick color", selection: $selectedColor)
+            ScrollView {
+                LazyVGrid(columns: columns, alignment: .center, spacing: nil, pinnedViews: []) {
+                    Section {
+                        ForEach(Accessory.icons, id: \.self) { iconName in
+                            Button(
+                                action: {
+                                    self.selectedImageName = iconName
+                                    self.dismiss()
+                                },
+                                label: {
+                                    Image(systemName: iconName)
+                                }
+                            )
+                            .frame(width: ImageSelectionList.boxSize, height: ImageSelectionList.boxSize, alignment: .center)
+                            .buttonStyle(PlainButtonStyle())
+                            .contentShape(Rectangle())
+                        }
                     }
                 }
-            )
-            .buttonStyle(PlainButtonStyle())
-            .contentShape(Rectangle())
+            }
         }
-        .frame(width: 100)
+        .padding(ImageSelectionList.boxSize / 2)
+
     }
 
 }