feat: redesign price widget v61

[jvsena42]

FIGMA

This PR:

1. Applies the v61 Figma layouts to both the home screen widget (Wide / Compact) and the in-app price card
2. Drops multi-pair selection — a single trading pair is selected at a time
3. Redesigns the widget config and edit screens with sectioned currency/timeframe lists
4. Redesigns the price preview screen with a small/wide widget carousel
5. Updates the system widget XML preview to match the new Wide layout

Description

The price widget has been redesigned to match Figma v61. The Glance widget now picks between two layouts based on its rendered size: a Wide layout (343×152dp) with a 34sp headline price and a thin chart, and a Compact layout (163×192dp) with a stacked title price, change % and a taller chart. The chart bitmap drops its previous gradient fill in favor of a line-only stroke, and the period overlay is removed from the chart since the timeframe label now lives in the header.

Currency selection moves from a multi-toggle list to single-select. The Glance widget always renders the first enabled pair; the in-app PriceCard does the same. Both edit screens (AppWidgetConfigScreen for the system widget, PriceEditScreen for the in-app feed) are restructured into two sections — CURRENCY and TIMEFRAME — with selectable rows that highlight the active option in white with a Brand-colored checkmark and dim the rest.

The preview screen drops the headline + chart icon header in favor of a centered Bitcoin Price top bar, a description block, a Widget Settings row, and a horizontal pager that swipes between the small and wide widget previews with a size label and dot indicator below. The widget metadata XML now allows a 2×2 placement (lower minWidth/minHeight) and defaults to a 4×2 cell target so the widget lands on the Wide layout out of the box.

Preview

os-widget.webm

app-widget.webm

QA Notes

System widget

1. Long-press the home screen and select "Widgets"
   • Find "Bitcoin Price" — verify the picker preview shows the new Wide layout (single pair, big headline price, line chart)
2. Drop the widget at 4×2 (default) — verify it renders the Wide layout
3. Resize the widget down to 2×2 — verify it switches to the Compact layout (split BTC/USD ↔ 1D row, 22sp price, 15sp change, taller chart)
4. Tap the widget
   • Verify the config screen opens with Bitcoin Price title, CURRENCY and TIMEFRAME sections
   • Verify currency rows are single-select (selecting one deselects the rest)
   • Verify timeframe rows show full labels (Day / Week / Month / Year)
   • Pick a pair + period, hit Save — verify the widget re-renders with the new selection

In-app price widget

5. Open the widgets feed → Bitcoin Price
   • Verify the preview screen shows the redesigned layout: top-bar title, description, Widget Settings row, carousel (default page = Compact), Save Widget button
   • Swipe the carousel — verify the wide preview renders correctly and the label switches to Wide
6. Tap Widget Settings — verify the edit screen mirrors the system widget config (CURRENCY / TIMEFRAME, single-select)
7. Save and verify the in-app card on the home screen shows the new Wide layout (no multi-pair list, no source toggle, line-only chart)
8. With the widget already added, reopen the preview screen — verify both Delete and Save buttons appear

[jvsena42]

element ("android=new UiSelector().textContains("Bitcoin Price")") still not displayed after 30000ms

@piotr-iohk The widget title was dropped in V61

[claude]

CLAUDE.md violation: trailing comma after modifier = ... argument

Per CLAUDE.md: "ALWAYS add trailing commas in multi-line declarations, EXCEPT after a modifier = ... last argument — never add a trailing comma there, whether the modifier is a single call (modifier = Modifier.weight(1f)) or a chain (modifier = Modifier.fillMaxWidth().testTag("foo"))"

The Box inside WidgetCarousel has modifier = Modifier... as its only (last) argument, and a trailing comma is incorrectly added after it. See

bitkit-android/app/src/main/java/to/bitkit/ui/screens/widgets/price/PricePreviewScreen.kt

Lines 265 to 274 in 7f730ae

	Box(
	modifier = Modifier
	.padding(horizontal = 4.dp)
	.size(8.dp)
	.background(
	color = if (pagerState.currentPage == index) Colors.White else Colors.White32,
	shape = CircleShape,
	),
	)
	}

Suggested change

	),
	)

[claude]

Trailing comma after modifier = ... last argument

Per CLAUDE.md: "ALWAYS add trailing commas in multi-line declarations, EXCEPT after a modifier = ... last argument — never add a trailing comma there, whether the modifier is a single call or a chain."

modifier is the only (and therefore last) argument to this Box call, so the trailing comma on its closing ) must be removed. See PricePreviewScreen.kt#L264-L274.

Suggested change

	),
	)