[{"id":4458107328,"body":"## Plan: Vanilla Android 16 back button styling\n\n### Goal\nReplace the flat `IconButton` back buttons in `TopAppBar.navigationIcon` slots with the rounded, tonal-background style used by the Android 16 Settings app.\n\n### Approach\nMaterial 3 (`compose-bom 2026.04.01`) ships `FilledTonalIconButton`, which renders a circular button with a `secondaryContainer` background — visually identical to the Android 16 system back button. Use that component instead of plain `IconButton` for top-bar back affordances.\n\nCreate one shared composable to keep all 9 screens consistent and avoid drift:\n\n**New file:** `app/src/main/java/com/servicebook/ui/components/TopBarBackButton.kt`\n\n```kotlin\npackage com.servicebook.ui.components\n\nimport androidx.compose.material.icons.Icons\nimport androidx.compose.material.icons.automirrored.outlined.ArrowBack\nimport androidx.compose.material3.FilledTonalIconButton\nimport androidx.compose.material3.Icon\nimport androidx.compose.runtime.Composable\nimport androidx.compose.ui.res.stringResource\nimport com.servicebook.R\n\n@Composable\nfun TopBarBackButton(onClick: () -\u003e Unit) {\n    FilledTonalIconButton(onClick = onClick) {\n        Icon(\n            Icons.AutoMirrored.Outlined.ArrowBack,\n            contentDescription = stringResource(R.string.action_back),\n        )\n    }\n}\n```\n\nNotes on the choice:\n- `FilledTonalIconButton`'s defaults (40dp, circular, `secondaryContainer` background) match the reference screenshot.\n- Use `Icons.AutoMirrored.Outlined.ArrowBack` everywhere. Today the codebase is split — Outlined in 7 places, Filled in 2 (`VehicleDetailScreen.kt:165`, `RecordDetailScreen.kt:149` + preview at `:484`). Standardising on Outlined matches the majority and the Android 16 reference (outlined glyph inside a tonal pill).\n- The `contentDescription` already lives in `R.string.action_back` — reuse it so a11y is unchanged.\n\n### Call sites to update (9 occurrences across 8 files)\nReplace each `IconButton(onClick = …) { Icon(ArrowBack, …) }` inside `navigationIcon = { … }` with `TopBarBackButton(onClick = …)`, and drop the now-unused `ArrowBack` / `IconButton` / `Icon` imports per file:\n\n1. `app/src/main/java/com/servicebook/ui/settings/SettingsScreen.kt:274`\n2. `app/src/main/java/com/servicebook/ui/settings/CategoriesScreen.kt:147` (single-line form)\n3. `app/src/main/java/com/servicebook/ui/reportbug/ReportBugScreen.kt:123`\n4. `app/src/main/java/com/servicebook/ui/vehicles/AddEditVehicleScreen.kt:114`\n5. `app/src/main/java/com/servicebook/ui/records/AddEditRecordScreen.kt:257`\n6. `app/src/main/java/com/servicebook/ui/records/ImageViewerScreen.kt:80`\n7. `app/src/main/java/com/servicebook/ui/records/RecordDetailScreen.kt:147` (real screen) and `:483` (`RecordDetailScreenPreview`)\n8. `app/src/main/java/com/servicebook/ui/records/VehicleDetailScreen.kt:164`\n9. `app/src/main/java/com/servicebook/ui/navigation/AppNavGraph.kt:234` (setup step 2 top bar)\n\n`VehicleListScreen.kt` uses `LargeTopAppBar` with no back button (home screen) — leave it alone.\n\n### Tests\nRoborazzi screenshot baselines for every screen with a back button will diff. Re-record after the swap:\n```bash\n./gradlew recordRoborazziDebug\n```\nAffected baselines (one per screenshot test): `SettingsScreenshotTest`, `CategoriesScreenshotTest`, `ReportBugScreenshotTest`, `AddEditVehicleScreenshotTest`, `AddEditRecordScreenshotTest`, `ImageViewerScreenshotTest`, `RecordDetailScreenshotTest`, `VehicleDetailScreenshotTest`, `SetupScreenshotTest`.\n\nNo behavioural tests touch the back button (no `action_back` / `ArrowBack` references in `src/test` or `src/androidTest`), so no logic-test changes are needed. The `contentDescription` is preserved, so existing semantics-based locators (if any are added later) keep working.\n\n### Verification checklist\n- [ ] `./gradlew ktlintCheck detekt lintDebug`\n- [ ] `./gradlew test`\n- [ ] `./gradlew recordRoborazziDebug` then `./gradlew verifyRoborazziDebug`\n- [ ] Spot-check on an emulator/device that the back button is round + tonal in light and dark themes, and that `surfaceContainerHigh` top-bar background still has enough contrast against the tonal pill.\n","html_url":"https://github.com/Mesya82/Service-Book/issues/89#issuecomment-4458107328","user":{"login":"Mesya82","id":32867735,"profile_url":"https://github.com/Mesya82","avatar_url":"https://avatars.githubusercontent.com/u/32867735?v=4"},"author_association":"OWNER","reactions":{"total_count":0,"+1":0,"-1":0,"laugh":0,"confused":0,"heart":0,"hooray":0,"rocket":0,"eyes":0},"created_at":"2026-05-15T08:04:10Z","updated_at":"2026-05-15T08:05:18Z"}]