refactor: re-skin UI with native iOS components
Replace the Opal-style custom presentation with the bare iOS design language, keeping the backend, flows, and accessibility identifiers: - Home: NavigationStack + List; rules now presented as list rows with kind icon, block summary, and trailing live status; '+' in the toolbar - New Rule: plain list of rule types and presets; editor still pushed via navigationDestination - Editor: native Form (DatePicker rows, day circles with summary in the section header, toggle rows with footers, stepper rows); create commits with a prominent 'Add Rule' button replacing Hold to Commit; edit uses toolbar Done plus red Disable/Delete rows - Detail: sheet with inline title + status caption, LabeledContent rows; Edit Rule pushes the editor natively - Default color scheme: drop forced dark mode and custom tint; system appearance and accent throughout - Delete Theme, HoldToCommitButton, RuleCardView and custom chrome - Use concrete Color.primary/secondary in button row labels (the hierarchical styles resolve against the button tint) - Tests: 93 passing; only delta is holdToCommitButton press → commitRuleButton tap in 5 call sites - Spec: add §6 mapping the original presentation to the native one
This commit is contained in:
@@ -6,10 +6,9 @@
|
||||
import SwiftData
|
||||
import SwiftUI
|
||||
|
||||
/// The card-style rule summary shown when tapping a rule: icon pair, live
|
||||
/// status, the key facts, and "Edit Rule" — which morphs the sheet into the
|
||||
/// editor, as in the reference app. A hard-locked rule shows a lock notice
|
||||
/// instead of the edit button.
|
||||
/// Rule summary presented as a plain sheet: inline title with a live status
|
||||
/// caption, the rule's facts as labeled rows, and "Edit Rule" — which pushes
|
||||
/// the editor. A hard-locked rule shows a lock notice instead.
|
||||
struct RuleDetailSheet: View {
|
||||
let rule: BlockingRule
|
||||
|
||||
@@ -19,12 +18,14 @@ struct RuleDetailSheet: View {
|
||||
@State private var pendingDeletion = false
|
||||
|
||||
var body: some View {
|
||||
TimelineView(.periodic(from: .now, by: 30)) { timeline in
|
||||
if isEditing {
|
||||
NavigationStack {
|
||||
TimelineView(.periodic(from: .now, by: 30)) { timeline in
|
||||
detailList(now: timeline.date)
|
||||
}
|
||||
.navigationDestination(isPresented: $isEditing) {
|
||||
RuleEditorView(
|
||||
mode: .edit(isEnabled: rule.isEnabled),
|
||||
draft: RuleDraft(rule: rule),
|
||||
onBack: { isEditing = false },
|
||||
onCommit: { draft in
|
||||
draft.apply(to: rule)
|
||||
isEditing = false
|
||||
@@ -39,11 +40,8 @@ struct RuleDetailSheet: View {
|
||||
dismiss()
|
||||
}
|
||||
)
|
||||
} else {
|
||||
detail(now: timeline.date)
|
||||
}
|
||||
}
|
||||
.background(Theme.background)
|
||||
.onDisappear {
|
||||
if pendingDeletion {
|
||||
modelContext.delete(rule)
|
||||
@@ -51,82 +49,77 @@ struct RuleDetailSheet: View {
|
||||
}
|
||||
}
|
||||
|
||||
private func detail(now: Date) -> some View {
|
||||
private func detailList(now: Date) -> some View {
|
||||
let status = rule.status(at: now)
|
||||
return VStack(spacing: 0) {
|
||||
HStack {
|
||||
CircleIconButton(systemImage: "xmark") { dismiss() }
|
||||
.accessibilityIdentifier("closeDetailButton")
|
||||
Spacer()
|
||||
return List {
|
||||
Section {
|
||||
detailRows
|
||||
}
|
||||
.padding(.horizontal, 20)
|
||||
.padding(.top, 18)
|
||||
|
||||
ScrollView {
|
||||
VStack(spacing: 24) {
|
||||
RuleIconPair(kind: rule.kind, isActive: status.isActive)
|
||||
VStack(spacing: 6) {
|
||||
Text("\(rule.kind.displayName), \(status.label(relativeTo: now))")
|
||||
.font(.system(size: 13, weight: .medium))
|
||||
.foregroundStyle(Theme.textSecondary)
|
||||
.accessibilityIdentifier("detailStatusLabel")
|
||||
Text(rule.name)
|
||||
.font(.system(size: 26, weight: .bold))
|
||||
.accessibilityIdentifier("detailRuleName")
|
||||
Section {
|
||||
if RulePolicy.canEdit(rule, at: now) {
|
||||
Button {
|
||||
isEditing = true
|
||||
} label: {
|
||||
Label("Edit Rule", systemImage: "pencil")
|
||||
}
|
||||
detailRows
|
||||
.accessibilityIdentifier("editRuleButton")
|
||||
} else {
|
||||
Label(
|
||||
"Hard Mode is on — this rule is locked until the block ends.",
|
||||
systemImage: "lock.fill"
|
||||
)
|
||||
.foregroundStyle(.secondary)
|
||||
.accessibilityElement(children: .combine)
|
||||
.accessibilityIdentifier("hardModeLockedNotice")
|
||||
}
|
||||
}
|
||||
}
|
||||
.navigationBarTitleDisplayMode(.inline)
|
||||
.toolbar {
|
||||
ToolbarItem(placement: .topBarLeading) {
|
||||
Button("Close", systemImage: "xmark") {
|
||||
dismiss()
|
||||
}
|
||||
.accessibilityIdentifier("closeDetailButton")
|
||||
}
|
||||
ToolbarItem(placement: .principal) {
|
||||
VStack(spacing: 1) {
|
||||
Text(rule.name)
|
||||
.font(.headline)
|
||||
.accessibilityIdentifier("detailRuleName")
|
||||
Text("\(rule.kind.displayName), \(status.label(relativeTo: now))")
|
||||
.font(.caption)
|
||||
.foregroundStyle(.secondary)
|
||||
.accessibilityIdentifier("detailStatusLabel")
|
||||
}
|
||||
.padding(.horizontal, 20)
|
||||
.padding(.top, 8)
|
||||
}
|
||||
|
||||
footer(now: now)
|
||||
.padding(.horizontal, 20)
|
||||
.padding(.bottom, 16)
|
||||
}
|
||||
.foregroundStyle(.white)
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private var detailRows: some View {
|
||||
VStack(spacing: 0) {
|
||||
switch rule.kind {
|
||||
case .schedule:
|
||||
row("During this time", rule.schedule.timeRangeLabel)
|
||||
divider
|
||||
row("On these days", rule.days.summary)
|
||||
divider
|
||||
row(rule.selectionMode.displayName, appCountLabel)
|
||||
divider
|
||||
row("Adult websites", rule.blockAdultContent ? "Blocked" : "Allowed")
|
||||
divider
|
||||
row("Unblocks allowed", rule.hardMode ? "No" : "Yes")
|
||||
case .timeLimit:
|
||||
row("When I use", appCountLabel)
|
||||
divider
|
||||
row("For this long", "\(rule.dailyLimitMinutes)m daily")
|
||||
divider
|
||||
row("On these days", rule.days.summary)
|
||||
divider
|
||||
row("Then block until", "Tomorrow")
|
||||
divider
|
||||
row("Adult websites", rule.blockAdultContent ? "Blocked" : "Allowed")
|
||||
divider
|
||||
row("Unblocks allowed", rule.hardMode ? "No" : "Yes")
|
||||
case .openLimit:
|
||||
row("When I open", appCountLabel)
|
||||
divider
|
||||
row("More than", "\(rule.maxOpens) opens daily")
|
||||
divider
|
||||
row("On these days", rule.days.summary)
|
||||
divider
|
||||
row("Then block until", "Tomorrow")
|
||||
divider
|
||||
row("Adult websites", rule.blockAdultContent ? "Blocked" : "Allowed")
|
||||
divider
|
||||
row("Unblocks allowed", rule.hardMode ? "No" : "Yes")
|
||||
}
|
||||
switch rule.kind {
|
||||
case .schedule:
|
||||
row("During this time", rule.schedule.timeRangeLabel)
|
||||
row("On these days", rule.days.summary)
|
||||
row(rule.selectionMode.displayName, appCountLabel)
|
||||
row("Adult websites", rule.blockAdultContent ? "Blocked" : "Allowed")
|
||||
row("Unblocks allowed", rule.hardMode ? "No" : "Yes")
|
||||
case .timeLimit:
|
||||
row("When I use", appCountLabel)
|
||||
row("For this long", "\(rule.dailyLimitMinutes)m daily")
|
||||
row("On these days", rule.days.summary)
|
||||
row("Then block until", "Tomorrow")
|
||||
row("Adult websites", rule.blockAdultContent ? "Blocked" : "Allowed")
|
||||
row("Unblocks allowed", rule.hardMode ? "No" : "Yes")
|
||||
case .openLimit:
|
||||
row("When I open", appCountLabel)
|
||||
row("More than", "\(rule.maxOpens) opens daily")
|
||||
row("On these days", rule.days.summary)
|
||||
row("Then block until", "Tomorrow")
|
||||
row("Adult websites", rule.blockAdultContent ? "Blocked" : "Allowed")
|
||||
row("Unblocks allowed", rule.hardMode ? "No" : "Yes")
|
||||
}
|
||||
.background(Theme.surface, in: RoundedRectangle(cornerRadius: 18))
|
||||
}
|
||||
|
||||
private var appCountLabel: String {
|
||||
@@ -134,51 +127,8 @@ struct RuleDetailSheet: View {
|
||||
}
|
||||
|
||||
private func row(_ label: String, _ value: String) -> some View {
|
||||
HStack {
|
||||
Text(label)
|
||||
.font(.system(size: 15, weight: .medium))
|
||||
Spacer()
|
||||
Text(value)
|
||||
.font(.system(size: 15))
|
||||
.foregroundStyle(Theme.textSecondary)
|
||||
}
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.vertical, 14)
|
||||
.accessibilityElement(children: .combine)
|
||||
.accessibilityIdentifier("detailRow-\(label)")
|
||||
}
|
||||
|
||||
private var divider: some View {
|
||||
Divider().background(.white.opacity(0.06)).padding(.leading, 16)
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private func footer(now: Date) -> some View {
|
||||
if RulePolicy.canEdit(rule, at: now) {
|
||||
Button {
|
||||
isEditing = true
|
||||
} label: {
|
||||
Label("Edit Rule", systemImage: "pencil")
|
||||
.font(.system(size: 17, weight: .semibold))
|
||||
.foregroundStyle(.black)
|
||||
.frame(maxWidth: .infinity)
|
||||
.frame(height: 54)
|
||||
.background(.white, in: RoundedRectangle(cornerRadius: 27))
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
.accessibilityIdentifier("editRuleButton")
|
||||
} else {
|
||||
HStack(spacing: 10) {
|
||||
Image(systemName: "lock.fill")
|
||||
Text("Hard Mode is on — this rule is locked until the block ends.")
|
||||
.font(.system(size: 14, weight: .medium))
|
||||
}
|
||||
.foregroundStyle(Theme.textSecondary)
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(.vertical, 16)
|
||||
.background(Theme.surface, in: RoundedRectangle(cornerRadius: 18))
|
||||
LabeledContent(label, value: value)
|
||||
.accessibilityElement(children: .combine)
|
||||
.accessibilityIdentifier("hardModeLockedNotice")
|
||||
}
|
||||
.accessibilityIdentifier("detailRow-\(label)")
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user