Category edit dialog: RGB color picker instead of swatch grid #30

Closed
opened 2026-06-28 13:59:59 +00:00 by admin · 0 comments
Owner

Enhancement

The category add/edit dialog offers a fixed palette of 8 hardcoded swatches in an 8-column LazyVerticalGrid (app/src/main/java/dev/achmad/ledgerr/ui/screens/category/CategoryScreen.kt:240-292 and ColorSwatch at lines 320-339). Replace the swatch grid with a full RGB color picker so the user can pick any color.

Suggested approach (not prescriptive)

Use com.github.skydoves:colorpicker-compose (the standard Compose color-picker library; HSL wheel + alpha + preview tile) or a comparable library. Add the dependency to gradle/libs.versions.toml and the relevant module build.gradle.kts.

Expected behavior

The CategoryEditDialog's text slot (CategoryScreen.kt:261-293) shows, in order:

  1. The name OutlinedTextField (unchanged).
  2. A ColorPicker (or equivalent) bound to the current color state. Initial color comes from initial?.color ?: Category.DEFAULT_COLOR_OTHER.
  3. As the user drags the wheel / adjusts sliders, the dialog's color state updates live; the existing color preview in the name field's leading icon (or wherever the color is currently shown) reflects the change.

The hardcoded swatches list and ColorSwatch composable in this file can be deleted.

Acceptance criteria

  • The dialog contains a real color picker (wheel + RGB/HSL controls), not a fixed grid of swatches.
  • Dragging the picker updates the in-dialog preview in real time.
  • Tapping Confirm persists the picked color (verify by reopening the dialog — the swatch is the same one the user picked).
  • Picking the same color as a hardcoded default is allowed (don't restrict to "new" colors only).
  • The default categories still use their existing DEFAULT_COLOR_* values; the picker is only for new / edited categories.
  • The dialog is still usable on small screens — the picker should not push the confirm/cancel buttons off-screen. If needed, wrap the picker in a verticalScroll and cap its height to ~280.dp.
**Enhancement** The category add/edit dialog offers a fixed palette of 8 hardcoded swatches in an 8-column `LazyVerticalGrid` (`app/src/main/java/dev/achmad/ledgerr/ui/screens/category/CategoryScreen.kt:240-292` and `ColorSwatch` at lines 320-339). Replace the swatch grid with a full **RGB color picker** so the user can pick any color. **Suggested approach (not prescriptive)** Use `com.github.skydoves:colorpicker-compose` (the standard Compose color-picker library; HSL wheel + alpha + preview tile) or a comparable library. Add the dependency to `gradle/libs.versions.toml` and the relevant module `build.gradle.kts`. **Expected behavior** The `CategoryEditDialog`'s `text` slot (`CategoryScreen.kt:261-293`) shows, in order: 1. The name `OutlinedTextField` (unchanged). 2. A `ColorPicker` (or equivalent) bound to the current `color` state. Initial color comes from `initial?.color ?: Category.DEFAULT_COLOR_OTHER`. 3. As the user drags the wheel / adjusts sliders, the dialog's `color` state updates live; the existing color preview in the name field's leading icon (or wherever the color is currently shown) reflects the change. The hardcoded `swatches` list and `ColorSwatch` composable in this file can be deleted. **Acceptance criteria** - The dialog contains a real color picker (wheel + RGB/HSL controls), not a fixed grid of swatches. - Dragging the picker updates the in-dialog preview in real time. - Tapping **Confirm** persists the picked color (verify by reopening the dialog — the swatch is the same one the user picked). - Picking the same color as a hardcoded default is allowed (don't restrict to "new" colors only). - The default categories still use their existing `DEFAULT_COLOR_*` values; the picker is only for new / edited categories. - The dialog is still usable on small screens — the picker should not push the confirm/cancel buttons off-screen. If needed, wrap the picker in a `verticalScroll` and cap its height to ~280.dp.
admin closed this issue 2026-06-28 14:21:44 +00:00
Sign in to join this conversation.
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: admin/ledgerr#30