Home: turn "See all" into a "View All" text button inside SectionHeader #32

New Issue

2026-06-28T14:00:13Z

admin commented

2026-06-28 14:00:13 +00:00

Enhancement

The Home screen's "Recent" section currently uses the SectionHeader composable (app/src/main/java/dev/achmad/ledgerr/ui/screens/home/HomeScreen.kt:421-429), which renders only the title text. The "See all" action is rendered separately as one of two OutlinedButtons in ActionsRow (HomeScreen.kt:397-419) — visually disconnected from the "Recent" header.

The user expects "See all" to sit on the same row as "Recent", as a text button on the right edge, matching the pattern implied by the existing SectionHeader composable (the user explicitly references it).

Expected behavior

Extend SectionHeader to optionally take a trailing action. Signature:
```
@Composable
private fun SectionHeader(
    text: String,
    actions: @Composable RowScope.() -> Unit = {},
)
```
- When actions is empty (default), behavior is unchanged: a single Text styled as titleSmall with the existing top/bottom padding.
- When actions is non-empty, render a Row with Modifier.fillMaxWidth(): title on the left, actions on the right. The title keeps its styling; actions are typically a TextButton (Material 3) — the row should still feel like a "section header", not a full toolbar.

Update the "Recent" call site at HomeScreen.kt:224-227 to pass a "View All" TextButton as the trailing action:

item(key = "recent-header") {
    SectionHeader(text = stringResource(R.string.home_recent)) {
        TextButton(onClick = onSeeAll) {
            Text(stringResource(R.string.home_see_all)) // rename to "View All" in strings.xml
        }
    }
}

Remove the "See all" OutlinedButton from ActionsRow. ActionsRow is now only used for onManageCategories, which is being moved to Settings (see #29) — after #29 lands, ActionsRow itself can be deleted. For this slice, just drop the second button.
Rename the R.string.home_see_all copy from "See all" to "View All" in res/values/strings.xml. The string key can stay (or be renamed to home_view_all if you want to be tidy — adjust both call sites).

Acceptance criteria

The "Recent" header is a single row with the title on the left and "View All" text button on the right.
Tapping "View All" navigates to ExpenseListScreen (same onSeeAll callback).
The text button uses M3 TextButton styling (no border, primary-color label, ripple on tap) — not an OutlinedButton.
The "Recent" header still appears only when recent.isNotEmpty() (current condition at line 224) — the empty branch in DashboardContent (lines 232-239) is replaced by the new empty state (see #33) and should not show the header.
No regression in the layout when actions is empty (other call sites / future call sites that don't pass actions should render identically to today).

**Enhancement** The Home screen's "Recent" section currently uses the `SectionHeader` composable (`app/src/main/java/dev/achmad/ledgerr/ui/screens/home/HomeScreen.kt:421-429`), which renders only the title text. The "See all" action is rendered separately as one of two `OutlinedButton`s in `ActionsRow` (`HomeScreen.kt:397-419`) — visually disconnected from the "Recent" header. The user expects "See all" to sit on the same row as "Recent", as a **text button** on the right edge, matching the pattern implied by the existing `SectionHeader` composable (the user explicitly references it). **Expected behavior** 1. Extend `SectionHeader` to optionally take a trailing action. Signature: ```kotlin @Composable private fun SectionHeader( text: String, actions: @Composable RowScope.() -> Unit = {}, ) ``` - When `actions` is empty (default), behavior is unchanged: a single `Text` styled as `titleSmall` with the existing top/bottom padding. - When `actions` is non-empty, render a `Row` with `Modifier.fillMaxWidth()`: title on the left, actions on the right. The title keeps its styling; actions are typically a `TextButton` (Material 3) — the row should still feel like a "section header", not a full toolbar. 2. Update the "Recent" call site at `HomeScreen.kt:224-227` to pass a "View All" `TextButton` as the trailing action: ```kotlin item(key = "recent-header") { SectionHeader(text = stringResource(R.string.home_recent)) { TextButton(onClick = onSeeAll) { Text(stringResource(R.string.home_see_all)) // rename to "View All" in strings.xml } } } ``` 3. Remove the "See all" `OutlinedButton` from `ActionsRow`. `ActionsRow` is now only used for `onManageCategories`, which is being moved to Settings (see #29) — after #29 lands, `ActionsRow` itself can be deleted. For this slice, just drop the second button. 4. Rename the `R.string.home_see_all` copy from "See all" to "View All" in `res/values/strings.xml`. The string key can stay (or be renamed to `home_view_all` if you want to be tidy — adjust both call sites). **Acceptance criteria** - The "Recent" header is a single row with the title on the left and "View All" text button on the right. - Tapping "View All" navigates to `ExpenseListScreen` (same `onSeeAll` callback). - The text button uses M3 `TextButton` styling (no border, primary-color label, ripple on tap) — not an `OutlinedButton`. - The "Recent" header still appears only when `recent.isNotEmpty()` (current condition at line 224) — the empty branch in `DashboardContent` (lines 232-239) is replaced by the new empty state (see #33) and should not show the header. - No regression in the layout when `actions` is empty (other call sites / future call sites that don't pass `actions` should render identically to today).

admin referenced this issue

2026-06-28 14:00:36 +00:00

Move "Manage Categories" from Home to Settings #29

admin referenced this issue

2026-06-28 14:00:45 +00:00

Empty states: Image (top) + text (bottom) on Home and Expenses #33

admin referenced a pull request that will close this issue

2026-06-28 14:22:40 +00:00

feat(#29,#32,#33): home polish — Manage Categories to Settings, View All, empty-state illustration #36

admin closed this issue

2026-06-28 14:25:58 +00:00

Sign in to join this conversation.