Mitra Bestie §1–§3: shell + Undangan + popup + chat polish
Brings the mitra app to figma-bestie parity for Home (§1), Undangan
inbox with Curhat Baru + Perpanjang tabs (§2), and the incoming-popup
+ active-chat flow (§3). Home now lives inside a StatefulShellRoute
with BestieTabBar so Profil + Undangan + Home share one shell.
- Shell: features/shell/ (StatefulShellRoute, BestieTabBar, 3 branches)
- Undangan: features/undangan/ — Curhat Baru reads
chatRequestProvider.pendingInvites; row Terima delegates accept to
the notifier and ChatRequestOverlay owns nav (no double-push).
Perpanjang tab stubbed (empty state) until backend exposes
pendingExtensionsProvider.
- Profil: features/profile/ — Bestie-styled stub
- Home: refactored to body-only (shell owns chrome)
- Popup: chat_request_overlay + chat_request_notifier updated to
serve the list rows, not just the modal
- Chat: mitra_chat_screen polish
- Theme: accentAmber tokens for the Perpanjang tab + halo_orb widget
(loading spinner used by undangan list states)
- Login: replace broken GoRouterState location guard with
_expectOtpPush flag — was stacking duplicate /otp pages on OTP
resend (see project-otp-nav-bug-fixed-2026-05-21)
Maestro:
- 17 new flows under .maestro/flows/ts-mitra-{1,2,3}-* covering home
online/offline variants, undangan empty/populated/tolak states,
popup curhat-baru → accept → chat → ended banner, plus popup
dismiss/expire/cancelled edge cases
- 4 new §A OTP flows (07/08/09/10) for invalid/mismatch/expired/cooldown
- Helper scripts: force_mitra_online/offline, force_pairing_timeout,
force_session_expires_at, delete_mitra_status_row,
customer_blast_now (js), customer_cancel_latest_blast
- Backend: POST /internal/_test/delete-mitra-status-row supports the
"fresh mitra with no status row" test setup
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
44
mitra_app/lib/features/shell/shell_screen.dart
Normal file
44
mitra_app/lib/features/shell/shell_screen.dart
Normal file
@@ -0,0 +1,44 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import '../../core/chat/chat_request_notifier.dart';
|
||||
import '../../core/theme/halo_tokens.dart';
|
||||
import 'widgets/bestie_tab_bar.dart';
|
||||
|
||||
/// Shell scaffold for the 3-tab mitra UI: Home / Chat / Profil.
|
||||
///
|
||||
/// Used as the `builder` of a `StatefulShellRoute.indexedStack` in
|
||||
/// `router.dart`. Renders the active branch's navigator in the body and
|
||||
/// `BestieTabBar` at the bottom.
|
||||
///
|
||||
/// Tab content is owned by each branch route — this widget only owns the
|
||||
/// scaffold + tab bar.
|
||||
class ShellScreen extends ConsumerWidget {
|
||||
const ShellScreen({super.key, required this.navigationShell});
|
||||
|
||||
final StatefulNavigationShell navigationShell;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
// Watch the chat-request state so the badge updates when new requests
|
||||
// arrive (or are accepted/declined). We don't use the value directly —
|
||||
// we want the rebuild trigger, then read the count via the notifier.
|
||||
ref.watch(chatRequestProvider);
|
||||
final chatBadge = ref.read(chatRequestProvider.notifier).activeRequestCount;
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: HaloTokens.bg,
|
||||
body: navigationShell,
|
||||
bottomNavigationBar: BestieTabBar(
|
||||
activeIndex: navigationShell.currentIndex,
|
||||
chatBadgeCount: chatBadge,
|
||||
onTap: (i) => navigationShell.goBranch(
|
||||
i,
|
||||
// Re-tapping the active tab pops back to the branch root.
|
||||
initialLocation: i == navigationShell.currentIndex,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
146
mitra_app/lib/features/shell/widgets/bestie_tab_bar.dart
Normal file
146
mitra_app/lib/features/shell/widgets/bestie_tab_bar.dart
Normal file
@@ -0,0 +1,146 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../core/theme/halo_tokens.dart';
|
||||
|
||||
/// Bottom navigation bar for the mitra app shell.
|
||||
///
|
||||
/// Mirrors `figma-bestie/project/screens/v4.jsx::BestieTabBar` (v4.jsx:464).
|
||||
/// Three tabs: Home / Chat / Profil. The Chat tab can render a red badge
|
||||
/// with [chatBadgeCount] when > 0.
|
||||
class BestieTabBar extends StatelessWidget {
|
||||
const BestieTabBar({
|
||||
super.key,
|
||||
required this.activeIndex,
|
||||
required this.onTap,
|
||||
this.chatBadgeCount = 0,
|
||||
});
|
||||
|
||||
/// 0 = Home, 1 = Chat, 2 = Profil.
|
||||
final int activeIndex;
|
||||
final ValueChanged<int> onTap;
|
||||
final int chatBadgeCount;
|
||||
|
||||
static const _items = <_TabItem>[
|
||||
_TabItem(emoji: '🏠', label: 'Home'),
|
||||
_TabItem(emoji: '💬', label: 'Chat'),
|
||||
_TabItem(emoji: '👤', label: 'Profil'),
|
||||
];
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return DecoratedBox(
|
||||
decoration: const BoxDecoration(
|
||||
color: HaloTokens.surface,
|
||||
border: Border(top: BorderSide(color: HaloTokens.border)),
|
||||
),
|
||||
child: SafeArea(
|
||||
top: false,
|
||||
child: SizedBox(
|
||||
height: 64,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
for (var i = 0; i < _items.length; i++)
|
||||
Expanded(
|
||||
child: _Tab(
|
||||
item: _items[i],
|
||||
active: activeIndex == i,
|
||||
badgeCount: i == 1 ? chatBadgeCount : 0,
|
||||
onTap: () => onTap(i),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _TabItem {
|
||||
const _TabItem({required this.emoji, required this.label});
|
||||
final String emoji;
|
||||
final String label;
|
||||
}
|
||||
|
||||
class _Tab extends StatelessWidget {
|
||||
const _Tab({
|
||||
required this.item,
|
||||
required this.active,
|
||||
required this.badgeCount,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
final _TabItem item;
|
||||
final bool active;
|
||||
final int badgeCount;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final color = active ? HaloTokens.brand : HaloTokens.inkMuted;
|
||||
return Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 6),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Stack(
|
||||
clipBehavior: Clip.none,
|
||||
children: [
|
||||
Text(item.emoji, style: const TextStyle(fontSize: 18, height: 1.1)),
|
||||
if (badgeCount > 0)
|
||||
Positioned(
|
||||
top: -4,
|
||||
right: -10,
|
||||
child: Container(
|
||||
constraints: const BoxConstraints(minWidth: 16),
|
||||
height: 16,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 4),
|
||||
alignment: Alignment.center,
|
||||
decoration: const BoxDecoration(
|
||||
color: Color(0xFFFF4D6A),
|
||||
borderRadius: HaloRadius.pill,
|
||||
),
|
||||
child: Text(
|
||||
'$badgeCount',
|
||||
style: const TextStyle(
|
||||
fontFamily: HaloTokens.fontBody,
|
||||
color: Colors.white,
|
||||
fontSize: 9,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
item.label,
|
||||
style: TextStyle(
|
||||
fontFamily: HaloTokens.fontBody,
|
||||
fontSize: 10,
|
||||
fontWeight: active ? FontWeight.w700 : FontWeight.w500,
|
||||
color: color,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
// Active-indicator pill — small pink underline below label.
|
||||
Container(
|
||||
width: 18,
|
||||
height: 3,
|
||||
decoration: BoxDecoration(
|
||||
color: active ? HaloTokens.brand : Colors.transparent,
|
||||
borderRadius: HaloRadius.pill,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user