Phase 4 Stage 10 client_app: Chat tab UI (3 sub-tabs + retire bestie_history)
Flutter half of Stage 10 — the new Chat tab landing in the bottom nav. The CTA target swaps from /chat/history to /chat, which redirects into /chat/aktif. Three sibling routes under a single ShellRoute share a header + sub-tab pills + the existing HaloTabBar footer: /chat/aktif — the current active session (0 or 1 row) /chat/pembayaran — pending initial + extension payments /chat/selesai — past sessions, cursor-paginated infinite scroll URL is the source of truth for the active sub-tab so deep links, back stack, and Maestro all agree on state. New feature dir `lib/features/chat_tab/`: - providers/pending_payments_provider.dart — FutureProvider against the Stage-10 backend endpoint, plus pendingPaymentsCountProvider for the red-dot derivative - providers/selesai_history_provider.dart — AsyncNotifier over GET /api/client/chat/history; tracks accumulated items + next_cursor + hasMore; loadMore() and refresh() - widgets/chat_row.dart — generic row used by all 3 sub-tabs, with optional PaymentAmountChip / DurationChip / 📞 Call indicator - widgets/sub_tab_pill.dart — pill with active underline + optional numeric badge (null hides; matches Selesai's no-badge rule) - screens/chat_tab_shell.dart — ShellRoute scaffold + ChatSubTab enum - screens/{aktif,pembayaran,selesai}_view.dart — the three sub-tab bodies Router (`router.dart`): - /chat → redirect → /chat/aktif - ShellRoute hosts /chat/aktif, /chat/pembayaran, /chat/selesai - /chat/history retired; /chat/history/:sessionId → /chat/transcript/:sessionId - ChatHistoryScreen import + file deleted HaloTabBar (`features/home/widgets/halo_tab_bar.dart` — new in the working tree from Stage 9 sweep): now a ConsumerWidget. Chat tab goes to /chat. Red dot renders when pendingPaymentsCountProvider > 0. Inbound call-site updates: - bestie_choice_sheet.dart: /chat/history → /chat - home_screen.dart history-row tap: /chat/history/:id → /chat/transcript/:id This commit also carries the larger Stage 9 sweep + ESP-removal + USP gate edits that were already staged in the working tree on `home_screen.dart` and `router.dart` from the prior session. flutter analyze: clean except for the pre-existing scaffold test/widget_test.dart MyApp reference (unrelated, present on master). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -51,7 +51,7 @@ class BestieChoiceSheet extends StatelessWidget {
|
||||
icon: Icons.favorite_outline,
|
||||
onTap: () {
|
||||
Navigator.of(context).pop();
|
||||
context.push('/chat/history');
|
||||
context.push('/chat');
|
||||
},
|
||||
),
|
||||
const SizedBox(height: HaloSpacing.s12),
|
||||
|
||||
161
client_app/lib/features/home/widgets/halo_tab_bar.dart
Normal file
161
client_app/lib/features/home/widgets/halo_tab_bar.dart
Normal file
@@ -0,0 +1,161 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import '../../../core/theme/halo_tokens.dart';
|
||||
import '../../chat_tab/providers/pending_payments_provider.dart';
|
||||
|
||||
/// 4-tab bottom bar mirroring Figma `HBTabBar` (home / chat / kamu / premium SOON).
|
||||
///
|
||||
/// Phase 4 §1 wires home + chat + kamu. `premium` is intentionally
|
||||
/// no-op + SOON-tagged. Each tab uses `context.go` so tapping a tab from any
|
||||
/// non-tab screen resets the back-stack — preventing nav-stack growth as the
|
||||
/// user bounces between tabs.
|
||||
///
|
||||
/// Stage 10: the `chat` tab now lands on `/chat` (which redirects into the
|
||||
/// `aktif` sub-tab) and renders a red dot when any Pembayaran row is pending.
|
||||
class HaloTabBar extends ConsumerWidget {
|
||||
/// One of `home`, `chat`, `kamu`, `premium`.
|
||||
final String active;
|
||||
const HaloTabBar({super.key, required this.active});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final pendingCount = ref.watch(pendingPaymentsCountProvider);
|
||||
return Container(
|
||||
decoration: const BoxDecoration(
|
||||
color: HaloTokens.surface,
|
||||
border: Border(top: BorderSide(color: HaloTokens.border)),
|
||||
),
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
HaloSpacing.s16,
|
||||
HaloSpacing.s8,
|
||||
HaloSpacing.s16,
|
||||
MediaQuery.of(context).padding.bottom + HaloSpacing.s8,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
_TabItem(
|
||||
icon: '🏠',
|
||||
label: 'home',
|
||||
active: active == 'home',
|
||||
onTap: () => context.go('/home'),
|
||||
),
|
||||
_TabItem(
|
||||
icon: '💬',
|
||||
label: 'chat',
|
||||
active: active == 'chat',
|
||||
showDot: pendingCount > 0,
|
||||
onTap: () => context.go('/chat'),
|
||||
),
|
||||
_TabItem(
|
||||
icon: '👤',
|
||||
label: 'kamu',
|
||||
active: active == 'kamu',
|
||||
onTap: () => context.go('/profile'),
|
||||
),
|
||||
_TabItem(
|
||||
icon: '✨',
|
||||
label: 'premium',
|
||||
active: active == 'premium',
|
||||
soon: true,
|
||||
onTap: () {},
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _TabItem extends StatelessWidget {
|
||||
final String icon;
|
||||
final String label;
|
||||
final bool active;
|
||||
final bool soon;
|
||||
final bool showDot;
|
||||
final VoidCallback onTap;
|
||||
const _TabItem({
|
||||
required this.icon,
|
||||
required this.label,
|
||||
required this.active,
|
||||
required this.onTap,
|
||||
this.soon = false,
|
||||
this.showDot = false,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final color = active ? HaloTokens.brand : HaloTokens.inkMuted;
|
||||
final opacity = soon ? 0.5 : 1.0;
|
||||
return Expanded(
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 6),
|
||||
child: Stack(
|
||||
clipBehavior: Clip.none,
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Opacity(
|
||||
opacity: opacity,
|
||||
child: Text(icon, style: const TextStyle(fontSize: 22)),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Opacity(
|
||||
opacity: opacity,
|
||||
child: Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
fontFamily: HaloTokens.fontBody,
|
||||
fontSize: 10,
|
||||
fontWeight: active ? FontWeight.w600 : FontWeight.w400,
|
||||
color: color,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
if (soon)
|
||||
Positioned(
|
||||
top: -2,
|
||||
right: 4,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 2),
|
||||
decoration: const BoxDecoration(
|
||||
color: HaloTokens.accent,
|
||||
borderRadius: BorderRadius.all(Radius.circular(6)),
|
||||
),
|
||||
child: const Text(
|
||||
'SOON',
|
||||
style: TextStyle(
|
||||
fontFamily: HaloTokens.fontBody,
|
||||
fontSize: 8,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: Colors.white,
|
||||
letterSpacing: 0.32,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
if (showDot && !soon)
|
||||
Positioned(
|
||||
top: 2,
|
||||
right: 18,
|
||||
child: Container(
|
||||
width: 8,
|
||||
height: 8,
|
||||
decoration: const BoxDecoration(
|
||||
color: HaloTokens.danger,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user