import SwiftUI struct FuelSavingsAdjustmentView: View { @Binding var amount: FuelSavingsFillAmount @State private var showingComparisonHelp = false private var range: ClosedRange { FuelSavingsCalculator.fillAmountSliderRange(for: amount.unit) } private var step: Double { FuelSavingsCalculator.fillAmountSliderStep(for: amount.unit) } /// Read-out of the figure the slider is on. Deliberately NOT a text field: /// a typed figure could sit outside the slider's own bounds, leaving the /// control and the value it claimed to show disagreeing. Slider-only means /// what you see is the figure the estimate actually uses. private var valueText: String { switch amount.unit { case .pounds: return String(format: "£%.0f", amount.value) case .litres: return String(format: "%.0f L", amount.value) } } var body: some View { VStack(alignment: .leading, spacing: 10) { HStack { Text("How much fuel?") .font(.subheadline.weight(.semibold)) Spacer() Button { showingComparisonHelp = true } label: { Image(systemName: "info.circle") } .buttonStyle(.plain) .foregroundStyle(.secondary) .accessibilityLabel("About comparison modes") .popover(isPresented: $showingComparisonHelp) { VStack(alignment: .leading, spacing: 12) { Text("Comparison modes") .font(.headline) Text("£: Compare how much fuel your budget buys at each station.") .fixedSize(horizontal: false, vertical: true) Text("Litres: Compare the cost of buying the same amount of fuel.") .fixedSize(horizontal: false, vertical: true) } .font(.footnote) .frame(width: 280, alignment: .leading) .padding() .presentationCompactAdaptation(.popover) } } Picker("Fill-up unit", selection: unitBinding) { ForEach(FuelSavingsFillUnit.allCases) { unit in Text(unit.displayName).tag(unit) } } .pickerStyle(.segmented) HStack { Slider(value: sliderBinding, in: range, step: step) .accessibilityLabel("Fill-up amount") .accessibilityValue(valueText) Text(valueText) .monospacedDigit() .frame(width: 72, alignment: .trailing) } Text("Adjust your fill-up amount for this visit. Your default won’t change.") .font(.caption2) .foregroundStyle(.secondary) } } private var unitBinding: Binding { Binding( get: { amount.unit }, set: { newUnit in guard newUnit != amount.unit else { return } // No one litre figure equals a budget at every candidate price, // so switching modes starts from that mode's configured default. amount = FuelSavingsCalculator.newComparisonAmount(afterSwitching: amount, to: newUnit) } ) } private var sliderBinding: Binding { Binding( get: { min(max(amount.value, range.lowerBound), range.upperBound) }, set: { amount.value = min(max($0, range.lowerBound), range.upperBound) } ) } } /// The colour-coded monetary verdict capsule used by the detail sheet and other /// full financial summaries. Listing rows use `ListingFuelSavingsCapsule`. /// /// An HStack with an explicit spacing, NOT a Label: given the width to spare, /// a Label lays its icon and title out across the row and leaves a visible gap /// between them (22pt in the listing row), which read as the text having /// drifted away from its symbol. The icon is decorative here — the verdict is /// in the text — so VoiceOver reads the capsule as one phrase. struct FuelSavingsCapsule: View { let result: FuelSavingsResult var compact: Bool = true var body: some View { HStack(spacing: compact ? 3 : 5) { Image(systemName: Self.symbol(for: result.status)) .accessibilityHidden(true) Text(compact ? result.capsuleHeadline() : result.detailCapsuleHeadline()) .lineLimit(1) // Measured on a 393pt screen: the capsule is handed ~101pt, of // which the icon, its spacing and the 8pt padding either side // take 32pt, leaving ~69pt for the text. "Closest station" needs // ~90pt at full size, so a 0.8 floor — 72pt — could not reach it // and the row showed "Closest stati…" instead. 0.7 leaves ~63pt, // which clears it at ~10pt type: scaled, never truncated. .minimumScaleFactor(0.7) } .font(compact ? .caption.weight(.semibold) : .headline) .foregroundStyle(Self.color(for: result.status)) .padding(.horizontal, compact ? 8 : 12) .padding(.vertical, compact ? 4 : 7) .background(Capsule().fill(Self.color(for: result.status).opacity(0.15))) } /// Verdict colour: green save, red worse off, grey break even, blue /// baseline — the same green/amber/red family the price dot already uses. static func color(for status: FuelSavingsStatus) -> Color { switch status { case .worthTheDrive: return .green case .notWorthTheDrive: return .red case .breakEven: return .secondary case .baseline: return .blue } } static func symbol(for status: FuelSavingsStatus) -> String { switch status { case .worthTheDrive: return "checkmark.circle.fill" case .breakEven: return "equal.circle.fill" case .notWorthTheDrive: return "xmark.circle.fill" case .baseline: return "location.circle.fill" } } } /// The station listing's verdict capsule: the words on the first line, the figure /// on its own line beneath, and "(approx.)" on a third when the journey is an /// estimate. /// /// Stations and Favourites share `StationRow`, so both render this. The detail /// sheet keeps `FuelSavingsCapsule`'s colour-coded monetary verdict on one line; /// the Key sheet's legend renders this with `showsAmount: false` so it never /// displays an invented figure. struct ListingFuelSavingsCapsule: View { let result: FuelSavingsResult /// Station rows carry the figure; the Key sheet's legend shows the wording only. var showsAmount: Bool = true private var verdict: FuelSavingsResult.ListingVerdict { result.listingVerdict(showsAmount: showsAmount) } var body: some View { HStack(alignment: .firstTextBaseline, spacing: 3) { Image(systemName: symbol) .accessibilityHidden(true) // One Text per line, not a "\n" inside one string: each line keeps its // own localisation key and the amount can be monospaced on its own. // Left-aligned: the word and its figure share a left edge, so the // block reads as a column rather than a ragged centre. VStack(alignment: .leading, spacing: 0) { Text(verdict.headline) if let amount = verdict.amount { Text(amount) .monospacedDigit() } if let qualifier = verdict.qualifier { Text(qualifier) } } .multilineTextAlignment(.leading) // Never compress or truncate: the capsule wraps and the row grows taller. .fixedSize(horizontal: false, vertical: true) } .font(.caption.weight(.semibold)) .foregroundStyle(.primary) .padding(.horizontal, 8) .padding(.vertical, 4) .background(shape.fill(Color.secondary.opacity(0.14))) .accessibilityElement(children: .combine) .accessibilityLabel(verdict.spokenText) } /// One line keeps the capsule. Two or more switch to a rounded rect: a pill's /// semicircular ends crowd the text corners at that height, while an 8pt /// radius does not. Keyed to the LINE COUNT, so Break even flips shape only /// when "(approx.)" pushes it onto a second line. private var shape: AnyShape { verdict.lines.count > 1 ? AnyShape(RoundedRectangle(cornerRadius: 8)) : AnyShape(Capsule()) } private var symbol: String { switch result.status { case .worthTheDrive: return "checkmark.circle" case .notWorthTheDrive: return "arrow.up.circle" case .breakEven: return "equal.circle" case .baseline: return "location.circle" } } }