fix: event log filter bar below app bar, two-line log entries

This commit is contained in:
fiatcode 2026-04-30 16:01:00 +07:00
parent c781fc5079
commit a7a6a6a82d
No known key found for this signature in database
2 changed files with 116 additions and 111 deletions

View file

@ -102,6 +102,22 @@ class _StatusScreenState extends State<StatusScreen> {
appBar: AppBar(
backgroundColor: const Color(0xFF161616),
elevation: 0,
title: Row(
children: [
const Icon(Icons.terminal, color: Color(0xFF00bcd4), size: 18),
const SizedBox(width: 10),
const Text(
'EVENT LOG',
style: TextStyle(
fontFamily: 'monospace',
fontSize: 14,
fontWeight: FontWeight.w700,
letterSpacing: 2,
color: Color(0xFFe0e0e0),
),
),
],
),
leading: IconButton(
icon: const Icon(
Icons.arrow_back,
@ -117,88 +133,79 @@ class _StatusScreenState extends State<StatusScreen> {
),
],
bottom: PreferredSize(
preferredSize: const Size.fromHeight(60),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 16, top: 8),
child: Row(
children: [
const Icon(
Icons.terminal,
color: Color(0xFF00bcd4),
size: 16,
),
const SizedBox(width: 8),
const Text(
'EVENT LOG',
style: TextStyle(
fontFamily: 'monospace',
fontSize: 13,
fontWeight: FontWeight.w700,
letterSpacing: 2,
color: Color(0xFFe0e0e0),
),
),
const SizedBox(width: 16),
_buildFilterChip('ALL', null),
const SizedBox(width: 6),
_buildFilterChip('LOG', 'LOCATION'),
const SizedBox(width: 6),
_buildFilterChip('SYNC', 'SYNC'),
const SizedBox(width: 6),
_buildFilterChip('ERR', 'ERROR'),
],
),
),
Container(height: 1, color: const Color(0xFF2a2a2a)),
],
),
preferredSize: const Size.fromHeight(1),
child: Container(height: 1, color: const Color(0xFF2a2a2a)),
),
),
body: _filteredLogs.isEmpty
? Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.inbox_outlined,
size: 48,
color: Color(0xFF2a2a2a),
),
const SizedBox(height: 16),
Text(
_filter == 'ALL'
? 'No events recorded'
: 'No $_filter events',
style: const TextStyle(
fontFamily: 'monospace',
fontSize: 13,
color: Color(0xFF424242),
),
),
const SizedBox(height: 8),
Text(
'Start tracking to capture events',
style: TextStyle(
fontFamily: 'monospace',
fontSize: 11,
color: const Color(0xFF424242).withOpacity(0.6),
),
),
],
body: Column(
children: [
// Filter bar
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
decoration: const BoxDecoration(
color: Color(0xFF161616),
border: Border(
bottom: BorderSide(color: Color(0xFF2a2a2a), width: 1),
),
)
: ListView.builder(
controller: _scrollController,
padding: const EdgeInsets.symmetric(vertical: 8),
itemCount: _filteredLogs.length,
itemBuilder: (context, index) {
final log = _filteredLogs[index];
return _buildLogEntry(log, index);
},
),
child: Row(
children: [
_buildFilterChip('ALL', null),
const SizedBox(width: 8),
_buildFilterChip('LOG', 'LOCATION'),
const SizedBox(width: 8),
_buildFilterChip('SYNC', 'SYNC'),
const SizedBox(width: 8),
_buildFilterChip('ERR', 'ERROR'),
],
),
),
// Log list
Expanded(
child: _filteredLogs.isEmpty
? Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.inbox_outlined,
size: 48,
color: Color(0xFF2a2a2a),
),
const SizedBox(height: 16),
Text(
_filter == 'ALL'
? 'No events recorded'
: 'No $_filter events',
style: const TextStyle(
fontFamily: 'monospace',
fontSize: 13,
color: Color(0xFF424242),
),
),
const SizedBox(height: 8),
Text(
'Start tracking to capture events',
style: TextStyle(
fontFamily: 'monospace',
fontSize: 11,
color: const Color(0xFF424242).withOpacity(0.6),
),
),
],
),
)
: ListView.builder(
controller: _scrollController,
padding: const EdgeInsets.symmetric(vertical: 8),
itemCount: _filteredLogs.length,
itemBuilder: (context, index) {
return _buildLogEntry(_filteredLogs[index], index);
},
),
),
],
),
);
}
@ -207,7 +214,7 @@ class _StatusScreenState extends State<StatusScreen> {
return GestureDetector(
onTap: () => setState(() => _filter = eventType ?? 'ALL'),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: isSelected
? const Color(0xFF00bcd4).withOpacity(0.15)
@ -245,40 +252,38 @@ class _StatusScreenState extends State<StatusScreen> {
return Padding(
padding: EdgeInsets.only(
left: 12,
right: 12,
top: index == 0 ? 6 : 8,
bottom: 6,
left: 14,
right: 14,
top: index == 0 ? 8 : 10,
bottom: 8,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Line 1: timestamp
Text(
time,
style: const TextStyle(
fontFamily: 'monospace',
fontSize: 10,
color: Color(0xFF546e7a),
),
),
const SizedBox(height: 4),
// Line 2: type badge + icon + message
// Line 1: timestamp | icon | type
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
time,
style: const TextStyle(
fontFamily: 'monospace',
fontSize: 10,
color: Color(0xFF546e7a),
),
),
const SizedBox(width: 8),
Container(
width: 18,
height: 18,
width: 16,
height: 16,
decoration: BoxDecoration(
color: color.withOpacity(0.15),
borderRadius: BorderRadius.circular(3),
),
child: Icon(icon, size: 11, color: color),
child: Icon(icon, size: 10, color: color),
),
const SizedBox(width: 7),
const SizedBox(width: 6),
Container(
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 2),
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 1),
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(2),
@ -294,19 +299,18 @@ class _StatusScreenState extends State<StatusScreen> {
),
),
),
const SizedBox(width: 10),
Expanded(
child: Text(
msg,
style: const TextStyle(
fontFamily: 'monospace',
fontSize: 11,
color: Color(0xFF9e9e9e),
),
),
),
],
),
const SizedBox(height: 5),
// Line 2: message
Text(
msg,
style: const TextStyle(
fontFamily: 'monospace',
fontSize: 11,
color: Color(0xFF9e9e9e),
),
),
],
),
);