Display custom icons for pins (#28)

Icons can be any of the SF Symbols that have a semantic meaning in the
MCMap format. In the legacy view, there exists a picker that displays as
a popover. In Red Window, this appears as a sheet.

Closes #28.

Author: alicerunsonfedora

Alidade.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -28,6 +28,8 @@ public struct NamedLocationView: View {
     var systemImage: String
     var color: Color
 
+    @ScaledMetric private var baseScale = 1.0
+
     init(
         name: String,
         location: CGPoint,
@@ -59,6 +61,7 @@ public struct NamedLocationView: View {
             Image(systemName: systemImage)
                 .foregroundStyle(.white)
                 .padding(6)
+                .frame(width: 28 * baseScale, height: 28 * baseScale)
                 .background(Circle().fill(color))
             VStack(alignment: .leading) {
                 Text(name)

AlidadeUI/Sources/AlidadeUI/NamedLocation/NamedLocationView.swift

@@ -51,6 +51,9 @@ class CartographyPinViewModel {
     /// mirrors the ``MCMapManifestPin/tags`` property, providing an empty set if it wasn't defined before.
     var pinTags: Binding<Set<String>>
 
+    /// A binding to the pin's icon.
+    var pinIcon: Binding<CartographyIcon>
+    
     /// A label that can be used to describe the pin's current position.
     var pinLocationLabel: String {
         let location = pin.wrappedValue.position
@@ -99,6 +102,16 @@ class CartographyPinViewModel {
             }
             file.wrappedValue.pins[index].tags = newValue
         }
+
+        self.pinIcon = Binding {
+            guard file.wrappedValue.supportedFeatures.contains(.pinIcons) else {
+                return .default
+            }
+            return file.wrappedValue.pins[index].icon ?? .default
+        } set: { newValue in
+            guard file.wrappedValue.supportedFeatures.contains(.pinIcons) else { return }
+            file.wrappedValue.pins[index].icon = newValue
+        }
     }
 
     /// Retrieves data blobs for the images associated with this pin.

MCMaps/Legacy/View Models/CartographyPinViewModel.swift

@@ -91,7 +91,8 @@ struct CartographyOrnamentMap: View {
                             Marker(
                                 location: pin.position,
                                 title: pin.name,
-                                color: pin.color?.swiftUIColor ?? Color.accentColor
+                                color: pin.color?.swiftUIColor ?? Color.accentColor,
+                                systemImage: pin.icon?.resolveSFSymbol(in: .pin) ?? "mappin"
                             )
                         }
                         integrationAnnotations

MCMaps/Legacy/Views/CartographyOrnamentMap.swift

@@ -32,6 +32,7 @@ struct CartographyMapPinDetailView: View {
         static let photosOnboarding = PinPhotoOnboardingTip()
     }
 
+    @State private var iconPicker = false
     @State private var photoItem: PhotosPickerItem?
     @State private var photoToUpdate: Image?
 
@@ -43,11 +44,25 @@ struct CartographyMapPinDetailView: View {
     var body: some View {
         List {
             VStack(alignment: .leading) {
-                TextField("Name", text: viewModel.pin.name)
-                    .allowsTightening(true)
-                    .font(.title)
-                    .bold()
-                    .textFieldStyle(.plain)
+                HStack {
+                    TextField("Name", text: viewModel.pin.name)
+                        .allowsTightening(true)
+                        .bold()
+                        .textFieldStyle(.plain)
+                        .font(.title)
+                    Button {
+                        iconPicker.toggle()
+                    } label: {
+                        Image(cartographyIcon: viewModel.pinIcon.wrappedValue, in: .pin)
+                            .font(.title)
+                    }
+                    .buttonStyle(.plain)
+                    .popover(isPresented: $iconPicker) {
+                        CartographyIconPicker(icon: viewModel.pinIcon, context: .pin)
+                            .frame(maxHeight: 450)
+                    }
+                }
+
                 HStack {
                     Label(viewModel.pinLocationLabel, systemImage: "tree")
                         .font(.subheadline)

MCMaps/Legacy/Views/Pins/CartographyMapPinDetailView.swift

@@ -33,6 +33,9 @@ struct RedWindowPinDetailView: View {
     @State private var center = CGPoint.zero
     @State private var color = CartographyMapPin.Color.blue
     @State private var editMode = false
+    @State private var icon = CartographyIcon.default
+
+    @State private var presentIconPicker = false
     @State private var presentTagEditor = false
 
     @State private var photosPickerItem: PhotosPickerItem?
@@ -66,6 +69,9 @@ struct RedWindowPinDetailView: View {
             if let pinTags = pin.tags {
                 tags = pinTags
             }
+            if let pinIcon = pin.icon {
+                icon = pinIcon
+            }
         }
         .onChange(of: color) { _, newValue in
             pin.color = newValue
@@ -74,6 +80,10 @@ struct RedWindowPinDetailView: View {
             guard file.supportedFeatures.contains(.pinTagging) else { return }
             pin.tags = newValue
         }
+        .onChange(of: icon) { _, newValue in
+            guard file.supportedFeatures.contains(.pinIcons) else { return }
+            pin.icon = newValue
+        }
         .onChange(of: photosPickerItem) { _, newValue in
             guard let item = newValue else { return }
             Task { await loadPickerSelection(item) }
@@ -96,6 +106,12 @@ struct RedWindowPinDetailView: View {
                     #endif
             }
         }
+        .sheet(isPresented: $presentIconPicker) {
+            NavigationStack {
+                CartographyIconPicker(icon: $icon, context: .pin)
+                    .navigationTitle("Select an Icon")
+            }
+        }
         .toolbar {
             ToolbarItem {
                 editButton
@@ -135,6 +151,12 @@ struct RedWindowPinDetailView: View {
                 }
             }
 
+            ToolbarItem {
+                Button("Pin Icon", systemImage: "heart.text.square") {
+                    presentIconPicker.toggle()
+                }
+            }
+
             #if RED_WINDOW
                 if #available(macOS 16, iOS 19, *) {
                     ToolbarSpacer(.fixed)
@@ -185,12 +207,13 @@ struct RedWindowPinDetailView: View {
             Divider()
             Group {
                 if let world = try? MinecraftWorld(version: "1.21.3", seed: 184_719_632_014) {
-                    MinecraftMap(world: world, centerCoordinate: $center) {
+                    MinecraftMap(world: world, centerCoordinate: .constant(pin.position)) {
                         Marker(location: .zero, title: "#nodraw")
                         Marker(
                             location: pin.position,
                             title: pin.name,
-                            color: pin.color?.swiftUIColor ?? .accent
+                            color: pin.color?.swiftUIColor ?? .accent,
+                            systemImage: pin.icon?.resolveSFSymbol(in: .pin) ?? "mappin"
                         )
                     }
                     .mapColorScheme(.natural)

MCMaps/Red Window/Views/Detail/RedWindowPinDetailView.swift

@@ -46,7 +46,7 @@ struct RedWindowLibraryGridCell: View {
             .clipped()
             .clipShape(RoundedRectangle(cornerRadius: 10))
             .overlay {
-                Image(systemName: "mappin")
+                Image(cartographyIcon: pin.icon ?? .default, in: .pin)
                     .font(.title)
                     .foregroundStyle(.white)
             }

MCMaps/Red Window/Views/Library/RedWindowLibraryGridCell.swift

@@ -6,6 +6,7 @@
 //
 
 import CubiomesKit
+import MCMap
 import SwiftUI
 
 /// A collection view that displays player-created pins in a list layout.
@@ -29,6 +30,7 @@ struct RedWindowPinLibraryListView: View {
     var pins: IndexedPinCollection
 
     @State private var selection = Set<IndexedPinCollection.Element.ID>()
+    @ScaledMetric private var baseScale = 1.0
 
     var body: some View {
         Table(pins, selection: $selection) {
@@ -43,8 +45,9 @@ struct RedWindowPinLibraryListView: View {
                         }
                     }
                 } icon: {
-                    Image(systemName: "mappin")
+                    Image(cartographyIcon: val.content.icon ?? .default, in: .pin)
                         .foregroundStyle(val.content.color?.swiftUIColor ?? .accent)
+                        .frame(width: 28 * baseScale)
                 }
             }
             TableColumn("Location", value: \.content.position.accessibilityReadout)

MCMaps/Red Window/Views/Library/RedWindowPinLibraryListView.swift

@@ -75,7 +75,8 @@ struct RedWindowMapView: View {
                             Marker(
                                 location: mapPin.position,
                                 title: mapPin.name,
-                                color: mapPin.color?.swiftUIColor ?? .accent
+                                color: mapPin.color?.swiftUIColor ?? .accent,
+                                systemImage: mapPin.icon?.resolveSFSymbol(in: .pin) ?? "mappin"
                             )
                         }
                         integrationAnnotations

MCMaps/Red Window/Views/Map/RedWindowMapView.swift

@@ -112,7 +112,7 @@ struct RedWindowContentView: View {
                 ForEach(IndexedPinCollection(file.pins)) { (mapPin: IndexedPinCollection.Element) in
                     Tab(
                         mapPin.content.name,
-                        systemImage: "mappin",
+                        systemImage: mapPin.content.icon?.resolveSFSymbol(in: .pin) ?? "mappin",
                         value: RedWindowRoute.pin(mapPin.content.id)
                     ) {
                         NavigationStack {