fix: custom domain ui

Author: ykisana

Normal/Resources/Localizable.xcstrings

@@ -707,6 +707,10 @@
       "comment" : "A message indicating that there are no apps available to select.",
       "isCommentAutoGenerated" : true
     },
+    "No Apps Selected" : {
+      "comment" : "A message indicating that a user has not selected any apps.",
+      "isCommentAutoGenerated" : true
+    },
     "No custom domains yet. Add them in App Select." : {
 
     },
@@ -911,6 +915,10 @@
       "comment" : "The title of the view.",
       "isCommentAutoGenerated" : true
     },
+    "Schedule" : {
+      "comment" : "The title of the view that lists schedules.",
+      "isCommentAutoGenerated" : true
+    },
     "Schedules" : {
       "comment" : "The title of the screen where users can view and manage their schedules.",
       "isCommentAutoGenerated" : true

Normal/Shared/Components/CustomDomainsEditor.swift

@@ -72,7 +72,7 @@ struct CustomDomainsEditor: View {
             .onDelete(perform: deleteAction)
         } footer: {
             if !isEditable {
-                Text("Unblock all apps to edit custom domains.")
+                Text(BlockedMessage.customDomains)
             }
         }
     }

Normal/Shared/Components/CustomDomainsSubsetSection.swift

@@ -1,29 +1,14 @@
 import SwiftUI
 
-struct CustomDomainsSubsetSection: View {
-    let available: [String]
+struct CustomDomainSubsetRow: View {
+    let domain: String
     @Binding var selected: [String]
+    var isEditable: Bool = true
 
-    var body: some View {
-        Section {
-            if available.isEmpty {
-                Text("No custom domains yet. Add them in App Select.")
-                    .foregroundStyle(.secondary)
-            } else {
-                ForEach(available, id: \.self) { domain in
-                    row(for: domain)
-                }
-            }
-        } header: {
-            Text("Custom Domains")
-        }
-    }
+    private var isOn: Bool { selected.contains(domain) }
 
-    private func row(for domain: String) -> some View {
-        let isOn = selected.contains(domain)
-        return Button {
-            toggle(domain)
-        } label: {
+    var body: some View {
+        Button(action: toggle) {
             HStack(spacing: DS.Spacing.md) {
                 Image(systemName: isOn ? "checkmark.circle.fill" : "circle")
                     .font(.title2)
@@ -34,15 +19,81 @@ struct CustomDomainsSubsetSection: View {
             .contentShape(.rect)
         }
         .buttonStyle(.plain)
+        .disabled(!isEditable)
         .sensoryFeedback(.selection, trigger: isOn)
         .accessibilityIdentifier("customDomains.row.\(domain)")
     }
 
-    private func toggle(_ domain: String) {
+    private func toggle() {
         if let index = selected.firstIndex(of: domain) {
             selected.remove(at: index)
         } else {
             selected.append(domain)
         }
     }
 }
+
+struct CustomDomainsSubsetSection: View {
+    let available: [String]
+    @Binding var selected: [String]
+
+    var body: some View {
+        Section("Custom Domains") {
+            if available.isEmpty {
+                Text("No custom domains yet. Add them in App Select.")
+                    .foregroundStyle(.secondary)
+            } else {
+                ForEach(available, id: \.self) { domain in
+                    CustomDomainSubsetRow(domain: domain, selected: $selected)
+                }
+            }
+        }
+    }
+}
+
+struct CustomDomainsSubsetLink: View {
+    let available: [String]
+    @Binding var selected: [String]
+    var isEditable: Bool = true
+
+    private var effectiveCount: Int {
+        CustomDomains.subset(selected, of: available).count
+    }
+
+    var body: some View {
+        NavigationLink {
+            CustomDomainsSubsetEditor(available: available, selected: $selected, isEditable: isEditable)
+        } label: {
+            CountRow(title: "Custom Domains", count: effectiveCount)
+                .opacity(isEditable ? 1 : DS.Opacity.dim)
+        }
+        .accessibilityIdentifier("customDomains.subsetLink")
+    }
+}
+
+struct CustomDomainsSubsetEditor: View {
+    let available: [String]
+    @Binding var selected: [String]
+    var isEditable: Bool = true
+
+    var body: some View {
+        Form {
+            Section {
+                if available.isEmpty {
+                    Text("No custom domains yet. Add them in App Select.")
+                        .foregroundStyle(.secondary)
+                } else {
+                    ForEach(available, id: \.self) { domain in
+                        CustomDomainSubsetRow(domain: domain, selected: $selected, isEditable: isEditable)
+                    }
+                }
+            } footer: {
+                if !isEditable {
+                    Text(BlockedMessage.customDomains)
+                }
+            }
+        }
+        .navigationTitle("Custom Domains")
+        .navigationBarTitleDisplayMode(.inline)
+    }
+}

Normal/Shared/Components/FooterMessage.swift

@@ -11,3 +11,10 @@ struct FooterMessage: View {
             .padding()
     }
 }
+
+enum BlockedMessage {
+    static let groups: LocalizedStringKey = "Unblock all apps to add or edit groups."
+    static let schedules: LocalizedStringKey = "Unblock all apps to add or edit schedules."
+    static let keys: LocalizedStringKey = "Unblock all apps to add or delete keys."
+    static let customDomains: LocalizedStringKey = "Unblock all apps to edit custom domains."
+}

Normal/Shared/Components/SelectionIconsView.swift

@@ -26,11 +26,11 @@ struct SelectionIconsView: View {
                     }
                 case let .domain(domain):
                     Image(systemName: "globe")
-                        .foregroundStyle(.secondary)
+                        .foregroundStyle(.blue.opacity(0.45))
                         .overlay {
                             Text(domain.prefix(1).lowercased())
-                                .font(.system(size: 8, weight: .heavy))
-                                .foregroundStyle(.primary)
+                                .font(.system(size: 12, weight: .medium, design: .rounded))
+                                .foregroundStyle(.blue)
                         }
                 }
             }

Normal/Views/AppSelect/SelectionListView.swift

@@ -1,6 +1,38 @@
 import FamilyControls
 import SwiftUI
 
+struct ViewOnlyAppsList: View {
+    let selection: FamilyActivitySelection
+
+    var body: some View {
+        List {
+            tokenSection("Categories", tokens: selection.categoryTokens.asHashableArray)
+            tokenSection("Apps", tokens: selection.applicationTokens.asHashableArray)
+            tokenSection("Websites", tokens: selection.webDomainTokens.sortedStably.map { $0 as AnyHashable })
+        }
+        .navigationTitle("Apps")
+        .navigationBarTitleDisplayMode(.inline)
+        .overlay {
+            if selection.allTokens.isEmpty {
+                ContentUnavailableView("No Apps Selected", systemImage: "app.dashed")
+            }
+        }
+    }
+
+    @ViewBuilder
+    private func tokenSection(_ title: LocalizedStringKey, tokens: [AnyHashable]) -> some View {
+        if !tokens.isEmpty {
+            Section(title) {
+                ForEach(tokens, id: \.self) { token in
+                    if let kind = SelectedTokenKind(token) {
+                        SelectionTokenLabel(kind: kind)
+                    }
+                }
+            }
+        }
+    }
+}
+
 struct SelectionListView: View {
     let selection: FamilyActivitySelection
 

Normal/Views/Groups/GroupFormSheet.swift

@@ -83,10 +83,12 @@ struct GroupFormSheet: View {
                 }
 
                 if customDomainsEnabled {
-                    if isReadOnly {
-                        customDomainsReadOnlySection
-                    } else {
-                        CustomDomainsSubsetSection(available: availableDomains, selected: $customDomains)
+                    Section {
+                        CustomDomainsSubsetLink(
+                            available: availableDomains,
+                            selected: $customDomains,
+                            isEditable: !isReadOnly
+                        )
                     }
                 }
 
@@ -103,6 +105,11 @@ struct GroupFormSheet: View {
             }
             .navigationTitle(isReadOnly ? "Group" : (isNew ? "New Group" : "Edit Group"))
             .navigationBarTitleDisplayMode(.inline)
+            .safeAreaInset(edge: .bottom) {
+                if isReadOnly {
+                    FooterMessage(text: BlockedMessage.groups)
+                }
+            }
             .toolbar {
                 if isReadOnly {
                     ToolbarItem(placement: .confirmationAction) {
@@ -135,27 +142,10 @@ struct GroupFormSheet: View {
     }
 
     private var appsReadOnlyRow: some View {
-        HStack(spacing: DS.Spacing.md) {
-            Text("Apps")
-            Spacer()
-            if selection.count > 0 {
-                SelectionIconsView(tokens: selection.allTokens, limit: 5)
-            } else {
-                Text("None").foregroundStyle(.secondary)
-            }
-        }
-    }
-
-    @ViewBuilder
-    private var customDomainsReadOnlySection: some View {
-        Section("Custom Domains") {
-            if effectiveCustomDomains.isEmpty {
-                Text("None").foregroundStyle(.secondary)
-            } else {
-                ForEach(effectiveCustomDomains, id: \.self) { domain in
-                    Label(domain, systemImage: "globe").lineLimit(1)
-                }
-            }
+        NavigationLink {
+            ViewOnlyAppsList(selection: selection)
+        } label: {
+            CountRow(title: "Apps", count: selection.count)
         }
     }
 

Normal/Views/Groups/GroupsView.swift

@@ -49,7 +49,7 @@ struct GroupsView: View {
             }, onMove: move)
                 .safeAreaInset(edge: .bottom) {
                     if isBlocked {
-                        FooterMessage(text: "Unblock all apps to add or edit groups.")
+                        FooterMessage(text: BlockedMessage.groups)
                     } else if !hasGlobalKey {
                         FooterMessage(text: "Add a key in the Keys tab before blocking groups.")
                     }

Normal/Views/Key/KeyFormSheet.swift

@@ -127,7 +127,7 @@ struct KeyFormSheet: View {
 
                     if isReadOnly {
                         Section {} footer: {
-                            Text("Unblock all apps to edit or delete keys.")
+                            Text(BlockedMessage.keys)
                                 .frame(maxWidth: .infinity, alignment: .center)
                         }
                     }

Normal/Views/Key/KeysView.swift

@@ -49,7 +49,7 @@ struct KeysView: View {
         }
         .safeAreaInset(edge: .bottom) {
             if isBlocked {
-                FooterMessage(text: "Unblock all apps to edit or delete keys.")
+                FooterMessage(text: BlockedMessage.keys)
             } else if keys.isEmpty, !groupKeys.isEmpty {
                 groupKeysLink
                     .padding(.horizontal, DS.Spacing.lg)