New App Icon Selector (#840)

Co-authored-by: Eric Andrews <[email protected]>

Mlem.xcodeproj/project.pbxproj

@@ -7,6 +7,7 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
+		0304F58A2B44AF5B00537BFA /* CollapsibleSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0304F5892B44AF5B00537BFA /* CollapsibleSection.swift */; };
 		0308E1142B0EA32A000CA955 /* AccountSettingsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0308E1132B0EA32A000CA955 /* AccountSettingsView.swift */; };
 		0308E1162B0EA42B000CA955 /* APILocalUserView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0308E1152B0EA42B000CA955 /* APILocalUserView.swift */; };
 		0308E1182B0EA466000CA955 /* APILocalUser.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0308E1172B0EA466000CA955 /* APILocalUser.swift */; };
@@ -556,6 +557,7 @@
 /* End PBXContainerItemProxy section */
 
 /* Begin PBXFileReference section */
+		0304F5892B44AF5B00537BFA /* CollapsibleSection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CollapsibleSection.swift; sourceTree = "<group>"; };
 		0308E1132B0EA32A000CA955 /* AccountSettingsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AccountSettingsView.swift; sourceTree = "<group>"; };
 		0308E1152B0EA42B000CA955 /* APILocalUserView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = APILocalUserView.swift; sourceTree = "<group>"; };
 		0308E1172B0EA466000CA955 /* APILocalUser.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = APILocalUser.swift; sourceTree = "<group>"; };
@@ -2045,6 +2047,7 @@
 				03A54C302B5331D50064CCDE /* Instance */,
 				03BAA2392A57DC1400D48252 /* PublishedTimestampView.swift */,
 				6374570F2A18CB6600B69C03 /* Custom Text Field.swift */,
+				0304F5892B44AF5B00537BFA /* CollapsibleSection.swift */,
 				B11D72822A49FAA7009DC22F /* Cached Image.swift */,
 				0317D46E2B558CB500EEE72C /* BadgeView.swift */,
 				50F2851B2A5C5C1500CF8865 /* TokenRefreshView.swift */,
@@ -3173,6 +3176,7 @@
 				CD2053102AC878B50000AA38 /* UpdatedTimestampView.swift in Sources */,
 				CD1446232A5B336900610EF1 /* LicensesView.swift in Sources */,
 				CD4368D02AE245F400BD8BD1 /* MessageTracker.swift in Sources */,
+				0304F58A2B44AF5B00537BFA /* CollapsibleSection.swift in Sources */,
 				CDDCF6432A66343D003DA3AC /* FancyTabBar.swift in Sources */,
 				505240E52A86E32700EA4558 /* CommunityListModel.swift in Sources */,
 				CD05E77F2A4F263B0081D102 /* Menu Function.swift in Sources */,

Mlem/Assets.xcassets/Icons/icon.sjmarf.green.appiconset/Contents.json

@@ -0,0 +1,14 @@
+{
+  "images" : [
+    {
+      "filename" : "green.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "size" : "1024x1024"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Mlem/Assets.xcassets/Icons/icon.sjmarf.orange.appiconset/Contents.json

@@ -0,0 +1,14 @@
+{
+  "images" : [
+    {
+      "filename" : "orange.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "size" : "1024x1024"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Mlem/Assets.xcassets/Icons/icon.sjmarf.pink.appiconset/Contents.json

@@ -0,0 +1,14 @@
+{
+  "images" : [
+    {
+      "filename" : "pink.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "size" : "1024x1024"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Mlem/Assets.xcassets/Icons/icon.sjmarf.silver.appiconset/Contents.json

@@ -0,0 +1,14 @@
+{
+  "images" : [
+    {
+      "filename" : "logo.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "size" : "1024x1024"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Mlem/Logic/Easter/Easter Rewards.swift

@@ -8,8 +8,8 @@
 import Foundation
 
 enum IconId: String {
-    case beehawCommunity = "Beehaw Community By Aaron Schneider"
-    case mlemhaw = "Mlemhaw By Clays"
+    case beehawCommunity = "icon.aaron.beehaw"
+    case mlemhaw = "icon.clays.beehaw"
 }
 
 enum EasterFlag: Codable, Hashable {

Mlem/Models/Settings/AlternativeIcon.swift

@@ -7,9 +7,13 @@
 
 import Foundation
 
+struct AlternativeIconGroup {
+    let authorName: String
+    let collapsed: Bool
+    let icons: [AlternativeIcon]
+}
+
 struct AlternativeIcon: Identifiable {
-    let id: String?
+    var id: String?
     let name: String
-    let author: String?
-    let selected: Bool
 }

Mlem/Views/Shared/CollapsibleSection.swift

@@ -0,0 +1,70 @@
+//
+//  CollapsibleSection.swift
+//  Mlem
+//
+//  Created by Sjmarf on 02/01/2024.
+//
+
+import SwiftUI
+
+struct CollapsibleSection<Content: View>: View {
+    var header: String?
+    var footer: String?
+
+    @ViewBuilder var content: () -> Content
+    @State private var collapsed: Bool
+
+    init(
+        _ header: String? = nil,
+        footer: String? = nil,
+        collapsed: Bool = false,
+        @ViewBuilder _ content: @escaping () -> Content
+    ) {
+        self.header = header
+        self.footer = footer
+        self.content = content
+        self._collapsed = State(wrappedValue: collapsed)
+    }
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            if let header {
+                HStack {
+                    Text(header)
+                        .textCase(.uppercase)
+                        .opacity(0.5)
+                    Spacer()
+                    Image(systemName: Icons.dropdown)
+                        .fontWeight(.semibold)
+                        .foregroundStyle(Color.accentColor)
+                        .rotationEffect(Angle(degrees: collapsed ? -90 : 0))
+                }
+                .font(.footnote)
+                .contentShape(.rect)
+                .onTapGesture { withAnimation(.default) { collapsed.toggle() }}
+                .padding(.vertical, 6)
+                .padding(.horizontal, 16)
+            }
+
+            if !collapsed {
+                Color(uiColor: .systemGroupedBackground)
+                    .frame(height: 1.5)
+                VStack {
+                    content()
+                }
+
+                if let footer = footer {
+                    Text(footer)
+                        .textCase(.uppercase)
+                        .font(.footnote)
+                        .padding(.horizontal, 16)
+                        .foregroundStyle(.secondary)
+                }
+            }
+        }
+        .background(Color(uiColor: .secondarySystemGroupedBackground))
+        .clipShape(RoundedRectangle(cornerRadius: AppConstants.largeItemCornerRadius))
+        .fixedSize(horizontal: false, vertical: true)
+        .padding(.horizontal, 16)
+  }
+}

Mlem/Views/Tabs/Settings/Components/Views/Appearance/Icons/AlternativeIconCell.swift

@@ -10,20 +10,15 @@ import SwiftUI
 struct AlternativeIconCell: View {
     let icon: AlternativeIcon
     let setAppIcon: (_ id: String?) async -> Void
+    let selected: Bool
 
     var body: some View {
         Button {
             Task(priority: .userInitiated) {
                 await setAppIcon(icon.id)
             }
         } label: {
-            AlternativeIconLabel(icon: icon)
+            AlternativeIconLabel(icon: icon, selected: selected)
         }.accessibilityElement(children: .combine)
     }
 }
-
-struct AlternativeIconCellPreview: PreviewProvider {
-    static var previews: some View {
-        AlternativeIconCell(icon: AlternativeIcon(id: nil, name: "Default", author: "Mlem team", selected: true)) { _ in }
-    }
-}

Mlem/Views/Tabs/Settings/Components/Views/Appearance/Icons/AlternativeIconLabel.swift

@@ -9,31 +9,33 @@ import SwiftUI
 
 struct AlternativeIconLabel: View {
     let icon: AlternativeIcon
+    let selected: Bool
 
     var body: some View {
-        HStack {
+        VStack {
             getImage()
                 .resizable()
                 .scaledToFit()
                 .frame(width: AppConstants.appIconSize, height: AppConstants.appIconSize)
                 .foregroundColor(Color.white)
                 .cornerRadius(AppConstants.appIconCornerRadius)
+                .padding(3)
+                .shadow(radius: 2, x: 0, y: 2)
                 .overlay {
-                    RoundedRectangle(cornerRadius: AppConstants.appIconCornerRadius)
-                        .stroke(Color(.secondarySystemBackground), lineWidth: 1)
+                        if selected {
+                            ZStack {
+                                RoundedRectangle(cornerRadius: AppConstants.appIconCornerRadius)
+                                    .stroke(Color(.secondarySystemBackground), lineWidth: 5)
+                                    .padding(2)
+                                RoundedRectangle(cornerRadius: AppConstants.appIconCornerRadius + 2)
+                                    .stroke(.blue, lineWidth: 3)
+                            }
+                        }
                 }
-            VStack(alignment: .leading) {
-                Text(icon.name)
-                if let author = icon.author {
-                    Text(author)
-                        .font(.footnote)
-                        .foregroundColor(.secondary)
-                }
-            }
-            Spacer()
-            if icon.selected {
-                Image(systemName: Icons.success)
-            }
+            Text(icon.name)
+                .multilineTextAlignment(.center)
+                .font(.footnote)
+                .foregroundStyle(selected ? .blue : .secondary)
         }
     }
 
@@ -52,3 +54,10 @@ struct AlternativeIconLabel: View {
         return image()
     }
 }
+
+#Preview {
+    HStack(alignment: .top, spacing: 20) {
+        AlternativeIconLabel(icon: .init(id: "icon.sjmarf.default", name: "Default"), selected: false)
+        AlternativeIconLabel(icon: .init(id: "icon.sjmarf.default", name: "Default"), selected: true)
+    }
+}