specs / 033-Changes-Bottom-Navbar-Redesign

033 - Bottom Navbar Redesign (Color + Ripple) + Home Status Bar (Android)

  • Tanggal: 2026-08-15
  • Chat/topik: Redesign bottom navigation bar — warna unselected mismatch + ripple hanya di icon; lanjutan sesi sama: ripple dibuat lingkaran + status bar putih khusus Home (Android)

Ringkasan perubahan

Bottom navbar (Home/History/Profile) di Android dan iOS punya dua masalah:

  1. Warna icon+label unselected pakai grey netral (textSecondary, biru-abu) yang terasa tidak match dengan palet teal/peach tema Elegant.
  2. Tap feedback (ripple di Android, highlight di iOS) hanya membungkus icon, bukan seluruh tab (icon + label), jadi area sentuh terasa tidak menyatu.

Perbaikan:

  • Unselected color diganti jadi Primary dengan alpha 42% (bukan grey lepas dari tema) — tetap muted/calm tapi masih satu keluarga warna dengan brand teal.
  • Android: NavigationBar/NavigationBarItem Material3 (yang membatasi indicator/ripple ke icon saja) diganti custom Row + Column per tab dengan Modifier.clickable(indication = ripple(...)) yang membungkus icon+label sekaligus.
  • iOS: tambah ButtonStyle kustom (TabPressStyle) yang mendimkan seluruh label (icon+text) saat pressed, alih-alih tanpa feedback sama sekali di luar default button.

Lanjutan (sesi sama)

  • Ripple Android dirapikan: radius tetap 36dp supaya bentuknya lingkaran bersih (bukan persegi panjang memenuhi seluruh lebar tab), area klik tetap penuh (icon+label).
  • Android only (eksplisit diminta user): status bar icon jadi putih (light content, isAppearanceLightStatusBars = false) selama tab Home aktif — Home punya header hero gradient gelap fullscreen sampai menembus status bar, sehingga ikon gelap default (mengikuti palette Elegant yang light) sulit terbaca di sana. Tab History/Profile dan layar lain tetap pakai appearance normal (!palette.isDark). Direset ke normal saat MainScreen di-dispose (navigasi keluar dari bottom-tab, mis. ke Court Detail).
  • iOS: tidak diport — user secara eksplisit menyebut "di android" untuk perubahan status bar ini.

Impact bisnis

Konsistensi visual navbar dengan tema Elegant + area tap yang terasa lebih presisi/berkelas (bukan bug kecil yang mengganggu kesan premium).

Epic / User stories

  • Epic: Navigasi utama — konsistensi visual
  • US: Sebagai member, saya ingin warna dan tap feedback navbar terasa menyatu dengan tema app, agar pengalaman terasa rapi dan tidak "murahan".

User terdampak

Semua member (navbar dipakai di semua tab utama: Home, History, Profile).

Aplikasi terdampak

  • mpc-android — PERLU (v1.19, MainScreen.kt)
  • mpc-ios — PERLU (v1.8, parity, MainTabView.swift)
  • mpc-web — TIDAK (belum ada navbar web)
  • mpc-be / mpc-be-pos / mpc-admin / mpc-pos / mpc-owner / ksr-sync / mpc-crm — TIDAK (UI-only, tidak ada perubahan data/API)

Perubahan schema

Tidak ada.

Perubahan kode

  • Android: app/src/main/java/com/mpc/app/feature/home/MainScreen.kt — ganti NavigationBar/NavigationBarItem dengan Surface + Row + Column per tab; warna unselected AppColors.Primary.copy(alpha = 0.42f); ripple full-tab via Modifier.clickable(indication = ripple(color = AppColors.Primary, radius = 36.dp)); DisposableEffect(index) mengatur WindowCompat.getInsetsController(...).isAppearanceLightStatusBars (false saat index==0/Home, !palette.isDark selainnya + saat dispose).
  • iOS: MPC/Features/Home/MainTabView.swift — warna unselected AppColors.primary.opacity(0.42); tambah TabPressStyle: ButtonStyle untuk dim seluruh tab saat pressed. (Status bar Home tetap default — Android only per permintaan.)