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

@ -1,4 +1,5 @@
import 'dart:async'; import 'dart:async';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';

View file

@ -102,6 +102,22 @@ class _StatusScreenState extends State<StatusScreen> {
appBar: AppBar( appBar: AppBar(
backgroundColor: const Color(0xFF161616), backgroundColor: const Color(0xFF161616),
elevation: 0, 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( leading: IconButton(
icon: const Icon( icon: const Icon(
Icons.arrow_back, Icons.arrow_back,
@ -117,47 +133,36 @@ class _StatusScreenState extends State<StatusScreen> {
), ),
], ],
bottom: PreferredSize( bottom: PreferredSize(
preferredSize: const Size.fromHeight(60), preferredSize: const Size.fromHeight(1),
child: Column( child: Container(height: 1, color: const Color(0xFF2a2a2a)),
crossAxisAlignment: CrossAxisAlignment.start, ),
),
body: Column(
children: [ children: [
Padding( // Filter bar
padding: const EdgeInsets.only(left: 16, top: 8), Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
decoration: const BoxDecoration(
color: Color(0xFF161616),
border: Border(
bottom: BorderSide(color: Color(0xFF2a2a2a), width: 1),
),
),
child: Row( child: Row(
children: [ 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), _buildFilterChip('ALL', null),
const SizedBox(width: 6), const SizedBox(width: 8),
_buildFilterChip('LOG', 'LOCATION'), _buildFilterChip('LOG', 'LOCATION'),
const SizedBox(width: 6), const SizedBox(width: 8),
_buildFilterChip('SYNC', 'SYNC'), _buildFilterChip('SYNC', 'SYNC'),
const SizedBox(width: 6), const SizedBox(width: 8),
_buildFilterChip('ERR', 'ERROR'), _buildFilterChip('ERR', 'ERROR'),
], ],
), ),
), ),
Container(height: 1, color: const Color(0xFF2a2a2a)), // Log list
], Expanded(
), child: _filteredLogs.isEmpty
),
),
body: _filteredLogs.isEmpty
? Center( ? Center(
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
@ -195,10 +200,12 @@ class _StatusScreenState extends State<StatusScreen> {
padding: const EdgeInsets.symmetric(vertical: 8), padding: const EdgeInsets.symmetric(vertical: 8),
itemCount: _filteredLogs.length, itemCount: _filteredLogs.length,
itemBuilder: (context, index) { itemBuilder: (context, index) {
final log = _filteredLogs[index]; return _buildLogEntry(_filteredLogs[index], index);
return _buildLogEntry(log, index);
}, },
), ),
),
],
),
); );
} }
@ -207,7 +214,7 @@ class _StatusScreenState extends State<StatusScreen> {
return GestureDetector( return GestureDetector(
onTap: () => setState(() => _filter = eventType ?? 'ALL'), onTap: () => setState(() => _filter = eventType ?? 'ALL'),
child: Container( child: Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3), padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration( decoration: BoxDecoration(
color: isSelected color: isSelected
? const Color(0xFF00bcd4).withOpacity(0.15) ? const Color(0xFF00bcd4).withOpacity(0.15)
@ -245,15 +252,17 @@ class _StatusScreenState extends State<StatusScreen> {
return Padding( return Padding(
padding: EdgeInsets.only( padding: EdgeInsets.only(
left: 12, left: 14,
right: 12, right: 14,
top: index == 0 ? 6 : 8, top: index == 0 ? 8 : 10,
bottom: 6, bottom: 8,
), ),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
// Line 1: timestamp // Line 1: timestamp | icon | type
Row(
children: [
Text( Text(
time, time,
style: const TextStyle( style: const TextStyle(
@ -262,23 +271,19 @@ class _StatusScreenState extends State<StatusScreen> {
color: Color(0xFF546e7a), color: Color(0xFF546e7a),
), ),
), ),
const SizedBox(height: 4), const SizedBox(width: 8),
// Line 2: type badge + icon + message
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container( Container(
width: 18, width: 16,
height: 18, height: 16,
decoration: BoxDecoration( decoration: BoxDecoration(
color: color.withOpacity(0.15), color: color.withOpacity(0.15),
borderRadius: BorderRadius.circular(3), 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( Container(
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 2), padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 1),
decoration: BoxDecoration( decoration: BoxDecoration(
color: color.withOpacity(0.1), color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(2), borderRadius: BorderRadius.circular(2),
@ -294,9 +299,11 @@ class _StatusScreenState extends State<StatusScreen> {
), ),
), ),
), ),
const SizedBox(width: 10), ],
Expanded( ),
child: Text( const SizedBox(height: 5),
// Line 2: message
Text(
msg, msg,
style: const TextStyle( style: const TextStyle(
fontFamily: 'monospace', fontFamily: 'monospace',
@ -304,9 +311,6 @@ class _StatusScreenState extends State<StatusScreen> {
color: Color(0xFF9e9e9e), color: Color(0xFF9e9e9e),
), ),
), ),
),
],
),
], ],
), ),
); );