refactor: category picker dialog matching ListSearchPreferenceWidget UX, without Preference overhead #43

New Issue

2026-06-28T14:47:49Z

admin commented

2026-06-28 14:47:49 +00:00

Refactor

The category selector on the Add/Edit Expense and Add/Edit Recurring screens is currently a DropdownMenu/ExposedDropdownMenu attached to an OutlinedTextField. It works, but it is limited to a flat scrollable list with no search and no category metadata (color swatch, etc.) visible at a glance.

There is already a ListSearchPreferenceWidget in the settings screen that shows a much nicer pattern: tap-to-open dialog, search field, list with a leading swatch/icon, checkmark on the selected row. We want that UX in the form, but without the Preference overhead — categories are not a setting, they are a piece of form data bound to the screen's StateFlow.

Goal

Extract a generic ListSearchDialog (or ListPickerDialog) composable that:

Takes a title, a query: String, an onQueryChange: (String) -> Unit, and a list of items.
Renders a Dialog with a SearchBar/OutlinedTextField on top and a LazyColumn of clickable rows.
Each row shows a leading swatch/icon, the item label, and a checkmark on the currently selected item.
Calls onSelected(item) and dismisses on pick.

Then replace the current category dropdown with a field that opens this dialog, populating it from the CategoryRepository / category list the screen already has in its state.

Why

Reuse the same look users already see in Settings → Categories.
Decouple the picker from the Preference machinery so it can be used in any form.
Fix the case where the user has many categories and has to scroll the dropdown.

Scope

New composable: app/src/main/java/dev/achmad/ledgerr/ui/component/ListSearchDialog.kt (or similar).
Update AddEditExpenseScreen and AddEditRecurringScreen to use the new picker for the category field.
Do not touch ListSearchPreferenceWidget itself — leave the preference wiring intact; the new composable is a leaner version.

Reference

ListSearchPreferenceWidget in the settings module — copy the visual structure, drop the Preference.PreferenceItem.Switch / value-storage plumbing.

## Refactor The category selector on the Add/Edit Expense and Add/Edit Recurring screens is currently a `DropdownMenu`/`ExposedDropdownMenu` attached to an `OutlinedTextField`. It works, but it is limited to a flat scrollable list with no search and no category metadata (color swatch, etc.) visible at a glance. There is already a `ListSearchPreferenceWidget` in the settings screen that shows a much nicer pattern: tap-to-open dialog, search field, list with a leading swatch/icon, checkmark on the selected row. We want that UX in the form, but **without** the `Preference` overhead — categories are not a setting, they are a piece of form data bound to the screen's `StateFlow`. ## Goal Extract a generic `ListSearchDialog` (or `ListPickerDialog`) composable that: - Takes a title, a `query: String`, an `onQueryChange: (String) -> Unit`, and a list of items. - Renders a `Dialog` with a `SearchBar`/`OutlinedTextField` on top and a `LazyColumn` of clickable rows. - Each row shows a leading swatch/icon, the item label, and a checkmark on the currently selected item. - Calls `onSelected(item)` and dismisses on pick. Then replace the current category dropdown with a field that opens this dialog, populating it from the `CategoryRepository` / category list the screen already has in its state. ## Why - Reuse the same look users already see in Settings → Categories. - Decouple the picker from the `Preference` machinery so it can be used in any form. - Fix the case where the user has many categories and has to scroll the dropdown. ## Scope - New composable: `app/src/main/java/dev/achmad/ledgerr/ui/component/ListSearchDialog.kt` (or similar). - Update `AddEditExpenseScreen` and `AddEditRecurringScreen` to use the new picker for the category field. - Do **not** touch `ListSearchPreferenceWidget` itself — leave the preference wiring intact; the new composable is a leaner version. ## Reference `ListSearchPreferenceWidget` in the settings module — copy the visual structure, drop the `Preference.PreferenceItem.Switch` / value-storage plumbing.

admin referenced this issue from a commit

2026-06-28 14:55:39 +00:00

fix(#41,#42,#43): numeric amount input, clickable DateField, search-based category picker

admin referenced a pull request that will close this issue

2026-06-28 14:55:46 +00:00

fix(#41,#42,#43): numeric amount input, clickable DateField, search-based category picker #47

admin closed this issue

2026-06-28 14:59:29 +00:00

Sign in to join this conversation.