feat: price widget v61 (#542)

* feat: port price widgets related screens to figma V61

* fix: spacing and alignment

* feat: hide menu button from nabigation bar

* fix: padding

* fix: remove systemLarge widget option

* fix: collect results in input order instead of completion order

* fix: pr comments

* fix: pr comments

* refactor: simplify doc

* refactor: replace onApper with task

* refactor: replace onChange with task id

* refactor: simplify comments

* refactor: simplyfy comments

* refactor: simplify comments

* refactor: simplify comments

* refactor: simplify comments

* refactor: remove multi-pair legacy code

* fix:  fallback to  os widget options after remove in-app

* fix: make chart height adaptable

* feat:  set backgroud color  Gray7

* fix: reuse existing text component and remove  scale factor

* fix: display white32 checkmark for unselected item

* fix: vertical padding anchored to checkbox image

* fix: remove the gray bg and custom bg from Navigation bar

* fix: try to fetch real data for preview

* refactor: make string keys generic to be reused in the furue implementtions

* fix: make prevew frame height adaptable

* fix: remove app group fallback

* test: widget test ids adjustment

* fixes

---------

Co-authored-by: Piotr Stachyra <piotr.stachyra@gmail.com>
Co-authored-by: Philipp Walter <philippwalter@proton.me>

Author: 3 people

Bitkit/Components/Widgets/PriceWidget.swift

@@ -1,21 +1,14 @@
 import Charts
 import SwiftUI
 
-/// A widget that displays cryptocurrency price information with chart
+/// Displays Bitcoin price for the user's selected trading pair and timeframe.
 struct PriceWidget: View {
-    /// Configuration options for the widget
     var options: PriceWidgetOptions = .init()
-
-    /// Flag indicating if the widget is in editing mode
     var isEditing: Bool = false
-
-    /// Callback to signal when editing should end
     var onEditingEnd: (() -> Void)?
 
-    /// Price view model singleton
     @StateObject private var viewModel = PriceViewModel.shared
 
-    /// Initialize the widget
     init(
         options: PriceWidgetOptions = PriceWidgetOptions(),
         isEditing: Bool = false,
@@ -32,91 +25,127 @@ struct PriceWidget: View {
             isEditing: isEditing,
             onEditingEnd: onEditingEnd
         ) {
-            VStack(spacing: 0) {
-                if viewModel.isLoading && filteredPriceData.isEmpty {
-                    WidgetContentBuilder.loadingView()
-                } else if viewModel.error != nil {
-                    WidgetContentBuilder.errorView(t("widgets__price__error"))
-                } else {
-                    ForEach(filteredPriceData, id: \.name) { priceData in
-                        PriceRow(data: priceData)
-                            .accessibilityIdentifier("PriceWidgetRow-\(priceData.name)")
-                    }
-                }
-
-                if let firstPair = filteredPriceData.first {
-                    PriceChart(
-                        values: firstPair.pastValues,
-                        isPositive: firstPair.change.isPositive,
-                        period: options.selectedPeriod.rawValue
-                    )
-                    .frame(height: 96)
-                    .padding(.top, 8)
-                }
-
-                if options.showSource {
-                    WidgetContentBuilder.sourceRow(source: "Bitfinex.com")
-                        .accessibilityIdentifier("PriceWidgetSource")
-                }
-            }
+            content
         }
-        .onAppear {
-            fetchPriceData()
-        }
-        .onChange(of: options.selectedPairs) {
-            fetchPriceData()
-        }
-        .onChange(of: options.selectedPeriod) {
-            fetchPriceData()
+        .task(id: options) { fetchPriceData() }
+    }
+
+    @ViewBuilder
+    private var content: some View {
+        if viewModel.isLoading && primaryPrice == nil {
+            WidgetContentBuilder.loadingView()
+        } else if viewModel.error != nil {
+            WidgetContentBuilder.errorView(t("widgets__price__error"))
+        } else if let primary = primaryPrice {
+            PriceWidgetWideContent(data: primary, period: options.selectedPeriod)
         }
     }
 
-    private var filteredPriceData: [PriceData] {
+    /// Single pair. Falls back to first available data if the selection isn't loaded yet.
+    private var primaryPrice: PriceData? {
         let currentPeriodData = viewModel.getCurrentData(for: options.selectedPeriod)
-        let dataByPair = Dictionary(uniqueKeysWithValues: currentPeriodData.map { ($0.name, $0) })
-        return options.selectedPairs.compactMap { pair in
-            dataByPair[pair]
+        if let match = currentPeriodData.first(where: { $0.name == options.selectedPair }) {
+            return match
         }
+        return currentPeriodData.first
     }
 
-    /// Fetch price data from view model
     private func fetchPriceData() {
-        viewModel.fetchPriceData(pairs: options.selectedPairs, period: options.selectedPeriod)
+        viewModel.fetchPriceData(pairs: [options.selectedPair], period: options.selectedPeriod)
     }
 }
 
-// MARK: - Price Row Component
+// MARK: - Wide layout (in-app + carousel page)
 
-struct PriceRow: View {
+struct PriceWidgetWideContent: View {
     let data: PriceData
+    let period: GraphPeriod
 
     var body: some View {
-        HStack {
-            BodySSBText(data.name, textColor: .textSecondary)
+        VStack(alignment: .leading, spacing: 8) {
+            VStack(alignment: .leading, spacing: 4) {
+                HStack(alignment: .center, spacing: 16) {
+                    CaptionMText("\(data.name)  \(period.rawValue)", textColor: .textSecondary)
+                        .textCase(.uppercase)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+
+                    TitleText(
+                        data.change.formatted,
+                        textColor: data.change.isPositive ? .greenAccent : .redAccent
+                    )
+                    .lineLimit(1)
+                    .accessibilityIdentifier("price_card_pair_change_\(data.name)")
+                }
+                .accessibilityIdentifier("PriceWidgetRow-\(data.name)")
+
+                Text(data.price)
+                    .font(Fonts.bold(size: 34))
+                    .foregroundColor(.textPrimary)
+                    .lineLimit(1)
+                    .minimumScaleFactor(0.7)
+                    .frame(maxWidth: .infinity, alignment: .leading)
+                    .accessibilityIdentifier("price_card_pair_price_\(data.name)")
+            }
+
+            PriceChart(values: data.pastValues, isPositive: data.change.isPositive)
+                .frame(height: 48)
+                .accessibilityIdentifier("price_card_chart")
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+    }
+}
+
+// MARK: - Compact layout (small carousel preview only)
+
+struct PriceWidgetCompactContent: View {
+    let data: PriceData
+    let period: GraphPeriod
 
-            Spacer()
+    var body: some View {
+        VStack(alignment: .leading, spacing: 16) {
+            VStack(alignment: .leading, spacing: 8) {
+                HStack(spacing: 0) {
+                    CaptionMText(data.name, textColor: .textSecondary)
+                        .textCase(.uppercase)
+                    Spacer(minLength: 0)
+                    CaptionMText(period.rawValue, textColor: .textSecondary)
+                        .textCase(.uppercase)
+                }
+                .accessibilityIdentifier("price_card_small_pair_row_\(data.name)")
+
+                Text(data.price)
+                    .font(Fonts.bold(size: 22))
+                    .foregroundColor(.textPrimary)
+                    .lineLimit(1)
+                    .minimumScaleFactor(0.7)
+                    .accessibilityIdentifier("price_card_small_pair_price_\(data.name)")
+
+                BodySSBText(
+                    data.change.formatted,
+                    textColor: data.change.isPositive ? .greenAccent : .redAccent
+                )
+                .lineLimit(1)
+                .accessibilityIdentifier("price_card_small_pair_change_\(data.name)")
+            }
 
-            BodySSBText(data.change.formatted, textColor: data.change.isPositive ? .greenAccent : .redAccent)
-                .padding(.trailing, 8)
-            BodySSBText(data.price, textColor: .textPrimary)
+            PriceChart(values: data.pastValues, isPositive: data.change.isPositive)
+                .frame(height: 64)
+                .accessibilityIdentifier("price_card_small_chart")
         }
-        .frame(minHeight: 28)
+        .padding(16)
+        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
+        .background(Color.gray6)
+        .cornerRadius(16)
     }
 }
 
-// MARK: - Price Chart Component
+// MARK: - Chart
 
 struct PriceChart: View {
     let values: [Double]
     let isPositive: Bool
-    let period: String
 
-    // Chart styling constants
     private let lineWidth: CGFloat = 1.3
-    private let chartPadding: CGFloat = 4
-    private let cornerRadius: CGFloat = 8
-    private let gradientOpacityTop: CGFloat = 0.64
-    private let gradientOpacityBottom: CGFloat = 0.08
 
     private var normalizedValues: [Double] {
         guard values.count > 1 else { return values }
@@ -127,76 +156,31 @@ struct PriceChart: View {
 
         guard range > 0 else { return values.map { _ in 0.5 } }
 
-        // Map to 0.15...0.85 range for more generous margins
-        // This prevents chart content from reaching the very edges where clipping occurs
         return values.map { value in
             let normalized = (value - minValue) / range
-            return 0.15 + (normalized * 0.7) // Maps 0-1 to 0.15-0.85
+            return 0.15 + (normalized * 0.7)
         }
     }
 
-    private var chartColors: (gradient: [Color], line: Color) {
-        if isPositive {
-            return (
-                gradient: [.greenAccent.opacity(gradientOpacityTop), .greenAccent.opacity(gradientOpacityBottom)],
-                line: .greenAccent
-            )
-        } else {
-            return (
-                gradient: [.redAccent.opacity(gradientOpacityTop), .redAccent.opacity(gradientOpacityBottom)],
-                line: .redAccent
-            )
-        }
+    private var lineColor: Color {
+        isPositive ? .greenAccent : .redAccent
     }
 
     var body: some View {
-        ZStack(alignment: .bottomLeading) {
-            Chart {
-                ForEach(Array(normalizedValues.enumerated()), id: \.offset) { index, value in
-                    // Area fill with gradient
-                    AreaMark(
-                        x: .value("Index", index),
-                        y: .value("Price", value)
-                    )
-                    .foregroundStyle(
-                        LinearGradient(
-                            colors: chartColors.gradient,
-                            startPoint: .top,
-                            endPoint: .bottom
-                        )
-                    )
-                    .interpolationMethod(.catmullRom)
-
-                    // Line on top
-                    LineMark(
-                        x: .value("Index", index),
-                        y: .value("Price", value)
-                    )
-                    .foregroundStyle(chartColors.line)
-                    .lineStyle(StrokeStyle(lineWidth: lineWidth))
-                    .interpolationMethod(.catmullRom)
-                }
-            }
-            .chartXAxis(.hidden)
-            .chartYAxis(.hidden)
-            // Y scale domain provides buffer zone beyond data range (0.15...0.85)
-            // This ensures chart elements (lines, curves) don't get clipped at edges
-            .chartYScale(domain: 0.1 ... 0.9) // Domain slightly larger than data range for extra buffer
-            // Apply rounded corners only to bottom - chart content extends to edges for visible clipping
-            // The internal margins above prevent any actual data from being cut off
-            .clipShape(
-                .rect(
-                    topLeadingRadius: 0,
-                    bottomLeadingRadius: cornerRadius,
-                    bottomTrailingRadius: cornerRadius,
-                    topTrailingRadius: 0
+        Chart {
+            ForEach(Array(normalizedValues.enumerated()), id: \.offset) { index, value in
+                LineMark(
+                    x: .value("Index", index),
+                    y: .value("Price", value)
                 )
-            )
-
-            // Period label
-            CaptionBText(period, textColor: isPositive ? .green50 : .red50)
-                .padding(7)
+                .foregroundStyle(lineColor)
+                .lineStyle(StrokeStyle(lineWidth: lineWidth))
+                .interpolationMethod(.catmullRom)
+            }
         }
+        .chartXAxis(.hidden)
+        .chartYAxis(.hidden)
+        .chartYScale(domain: 0.1 ... 0.9)
     }
 }
 

Bitkit/MainNavView.swift

@@ -431,7 +431,12 @@ struct MainNavView: View {
                 // Widgets
                 case .widgetsIntro: WidgetsIntroView()
                 case .widgetsList: WidgetsListView()
-                case let .widgetDetail(widgetType): WidgetDetailView(id: widgetType)
+                case let .widgetDetail(widgetType):
+                    if widgetType == .price {
+                        PriceWidgetPreviewView()
+                    } else {
+                        WidgetDetailView(id: widgetType)
+                    }
                 case let .widgetEdit(widgetType): WidgetEditView(id: widgetType)
 
                 // Settings

Bitkit/Models/PriceWidgetOptions.swift

@@ -1,8 +1,41 @@
 import Foundation
 
-/// Options for configuring the in-app and home-screen price widgets (shared via App Group for the extension).
+/// Options for configuring the in-app and home-screen price widgets (shared via App Group).
+///
 struct PriceWidgetOptions: Codable, Equatable {
-    var selectedPairs: [String] = ["BTC/USD"]
+    var selectedPair: String = "BTC/USD"
     var selectedPeriod: GraphPeriod = .oneDay
-    var showSource: Bool = false
+
+    init(selectedPair: String = "BTC/USD", selectedPeriod: GraphPeriod = .oneDay) {
+        self.selectedPair = selectedPair
+        self.selectedPeriod = selectedPeriod
+    }
+
+    private enum CodingKeys: String, CodingKey {
+        case selectedPair
+        case selectedPairs // legacy v60 key
+        case selectedPeriod
+    }
+
+    init(from decoder: Decoder) throws {
+        let container = try decoder.container(keyedBy: CodingKeys.self)
+
+        if let pair = try container.decodeIfPresent(String.self, forKey: .selectedPair) {
+            selectedPair = pair
+        } else if let legacyPairs = try container.decodeIfPresent([String].self, forKey: .selectedPairs),
+                  let first = legacyPairs.first
+        {
+            selectedPair = first
+        } else {
+            selectedPair = "BTC/USD"
+        }
+
+        selectedPeriod = try container.decodeIfPresent(GraphPeriod.self, forKey: .selectedPeriod) ?? .oneDay
+    }
+
+    func encode(to encoder: Encoder) throws {
+        var container = encoder.container(keyedBy: CodingKeys.self)
+        try container.encode(selectedPair, forKey: .selectedPair)
+        try container.encode(selectedPeriod, forKey: .selectedPeriod)
+    }
 }

Bitkit/Resources/Localization/en.lproj/Localizable.strings

@@ -1391,6 +1391,16 @@
 "widgets__price__name" = "Bitcoin Price";
 "widgets__price__description" = "Check the latest Bitcoin exchange rates for a variety of fiat currencies.";
 "widgets__price__error" = "Couldn\'t get price data";
+"widgets__price__currency" = "Currency";
+"widgets__price__timeframe" = "Timeframe";
+"widgets__price__period_day" = "Day";
+"widgets__price__period_week" = "Week";
+"widgets__price__period_month" = "Month";
+"widgets__price__period_year" = "Year";
+"widgets__widget__size_small" = "Small";
+"widgets__widget__size_wide" = "Wide";
+"widgets__widget__settings" = "Widget Settings";
+"widgets__widget__save_widget" = "Save Widget";
 "widgets__news__name" = "Bitcoin Headlines";
 "widgets__news__description" = "Read the latest & greatest Bitcoin headlines from various news sites.";
 "widgets__news__error" = "Couldn\'t get the latest news";