fix(paises): eyebrows outside the card, country count, header search

Audit 5.4 (t4:254/260): "Tus idiomas" and "Todos" eyebrows now sit
OUTSIDE any card at title-tier (20px) padding, styled with
eyebrowLabel -- were titleMedium w900 inside a PluriGlassSurface.
"Todos" also gains its missing total count ("{title} · {count}").

Audit 5.7 (t4:252): the header gained a real `search` action -- toggles
an inline TextField that filters the country list by name or ISO
code, not a decorative no-op button. New ARB key countriesSearchHint.

Item 5.6 (station count as a subtitle line, not a trailing widget) was
already fixed as an undocumented side effect of Tier3's row rebuild
(3303bd3) -- reconfirmed by direct read, no change needed here.
This commit is contained in:
2026-07-30 16:18:44 +02:00
parent 533896b9fa
commit 94b1e901d1
2 changed files with 200 additions and 48 deletions
+136 -47
View File
@@ -4,8 +4,8 @@ import 'package:provider/provider.dart';
import '../estado/estado_busqueda.dart';
import '../l10n/gen/app_localizations.dart';
import '../modelos/pais_radio.dart';
import '../tema/pluriwave_theme.dart';
import '../tema/pluriwave_tokens.dart';
import '../widgets/pluri_glass_surface.dart';
import '../widgets/pluri_layout.dart';
import '../widgets/pluri_push_scaffold.dart';
@@ -30,6 +30,12 @@ class PantallaPaises extends StatefulWidget {
}
class _PantallaPaisesState extends State<PantallaPaises> {
/// Audit 5.7 (t4:252): the header's `search` action. Null means "not
/// searching" — an ephemeral UI concern (design's "State is for
/// ephemeral UI only" ruling), never persisted.
bool _buscando = false;
final _controladorBusqueda = TextEditingController();
/// One representative country per app-supported locale (the same 13
/// locales as `pantalla_ajustes_idioma.dart`'s `_idiomas` list). "Tus
/// idiomas" is named by the proposal/spec but its derivation is not
@@ -65,22 +71,73 @@ class _PantallaPaisesState extends State<PantallaPaises> {
});
}
@override
void dispose() {
_controladorBusqueda.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final estado = context.watch<EstadoBusqueda>();
final query = _controladorBusqueda.text.trim().toLowerCase();
final paisesFiltrados =
query.isEmpty
? estado.paises
: estado.paises
.where(
(p) =>
p.nombre.toLowerCase().contains(query) ||
p.codigoIso.toLowerCase().contains(query),
)
.toList();
return PluriPushScaffold(
title: l10n.countriesScreenTitle,
// Audit 5.7 (t4:252): a `search` header action -- toggles an inline
// filter field over the SAME country list, rather than a decorative
// no-op button. `PluriPushScaffold.titleOverride` stays reserved for
// its one documented exception (the player's "EN DIRECTO" pill) --
// the search field lives in the body instead, not the AppBar title.
actions: [
IconButton(
key: const ValueKey('countries-search-toggle'),
icon: Icon(_buscando ? Icons.close_rounded : Icons.search_rounded),
tooltip: l10n.navSearch,
onPressed:
() => setState(() {
_buscando = !_buscando;
if (!_buscando) _controladorBusqueda.clear();
}),
),
],
body:
estado.cargandoPaises && estado.paises.isEmpty
? const Center(child: CircularProgressIndicator())
: ListView(
padding: PluriLayout.pageContentPadding,
children: [
_seccionTusIdiomas(context, estado.paises, l10n),
const SizedBox(height: 16),
_seccionTodos(context, estado.paises, l10n),
if (_buscando)
Padding(
padding: const EdgeInsets.only(bottom: 12),
child: TextField(
key: const ValueKey('countries-search-field'),
controller: _controladorBusqueda,
autofocus: true,
decoration: InputDecoration(
hintText: l10n.countriesSearchHint,
prefixIcon: const Icon(Icons.search_rounded),
),
onChanged: (_) => setState(() {}),
),
),
if (query.isEmpty) ...[
_seccionTusIdiomas(context, estado.paises, l10n),
const SizedBox(height: 16),
_seccionTodos(context, estado.paises, l10n),
] else
_seccionTodos(context, paisesFiltrados, l10n),
],
),
);
@@ -104,31 +161,45 @@ class _PantallaPaisesState extends State<PantallaPaises> {
if (destacados.isEmpty) return const SizedBox.shrink();
final theme = Theme.of(context);
return PluriGlassSurface(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
l10n.countriesYourLanguagesTitle,
style: theme.textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w900,
),
final type = context.pluriType;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Audit 5.4 (t4:254): an eyebrow OUTSIDE any card, title-tier
// (20px) padding -- was titleMedium w900 inside a PluriGlassSurface.
Padding(
padding: const EdgeInsets.fromLTRB(
PluriLayout.titleHorizontal,
0,
PluriLayout.titleHorizontal,
8,
),
const SizedBox(height: 8),
// Item 24 / audit 5.1 (t4:255-258): a column of tappable ISO
// rows, not a Wrap of non-interactive Chips.
for (final pais in destacados)
_FilaPais(
pais: pais,
l10n: l10n,
// Item 24 / audit 5.5 (t4:256): the first row is highlighted.
destacado: pais == destacados.first,
onTap: () => _seleccionar(pais),
),
],
),
child: Text(
l10n.countriesYourLanguagesTitle,
style: type.eyebrowLabel,
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: PluriLayout.rowHorizontal,
),
child: Column(
children: [
// Item 24 / audit 5.1 (t4:255-258): a column of tappable ISO
// rows, not a Wrap of non-interactive Chips.
for (final pais in destacados)
_FilaPais(
pais: pais,
l10n: l10n,
// Item 24 / audit 5.5 (t4:256): the first row is
// highlighted.
destacado: pais == destacados.first,
onTap: () => _seleccionar(pais),
),
],
),
),
],
);
}
@@ -137,26 +208,44 @@ class _PantallaPaisesState extends State<PantallaPaises> {
List<PaisRadio> paises,
AppLocalizations l10n,
) {
final theme = Theme.of(context);
return PluriGlassSurface(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
l10n.countriesAllTitle,
style: theme.textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w900,
),
final type = context.pluriType;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Audit 5.4 (t4:260-261): "TODOS · 238" -- an eyebrow OUTSIDE any
// card, carrying the total country count, which never rendered
// anywhere before.
Padding(
padding: const EdgeInsets.fromLTRB(
PluriLayout.titleHorizontal,
0,
PluriLayout.titleHorizontal,
8,
),
const SizedBox(height: 4),
// Item 24 / audit 5.1-5.3 (t4:262-269): the same tappable ISO row
// as "Tus idiomas" -- not the previous ListTile, which had no ISO
// column and no onTap.
for (final pais in paises)
_FilaPais(pais: pais, l10n: l10n, onTap: () => _seleccionar(pais)),
],
),
child: Text(
'${l10n.countriesAllTitle} · ${paises.length}',
style: type.eyebrowLabel,
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: PluriLayout.rowHorizontal,
),
child: Column(
children: [
// Item 24 / audit 5.1-5.3 (t4:262-269): the same tappable ISO
// row as "Tus idiomas" -- not the previous ListTile, which
// had no ISO column and no onTap.
for (final pais in paises)
_FilaPais(
pais: pais,
l10n: l10n,
onTap: () => _seleccionar(pais),
),
],
),
),
],
);
}
}