feat(alarmas): simplify alarm cards and add vacation summary row

Restyle the Alarmas root per the functional redesign: alarm cards drop
the always-visible edit/skip/delete button row for a minimal giant
time + station + switch layout. Tap opens the editor, swipe deletes
(with an AlertDialog confirmation), and the hero banner gains an
inline "Saltar" pill for the featured (soonest-firing) alarm's skip
action. No capability from the old button row is lost, only the
trigger location moved; estado_alarmas.dart and its scheduling/
snooze/dismiss-guard tests are untouched.

The vacation inline panel becomes a tappable summary row (range count
+ next-range countdown, computed over the existing estado.vacaciones)
that pushes a Vacaciones manager screen. That destination is a
placeholder for now (_PantallaVacacionesTemporal, holding the old
panel's body verbatim so add/delete-range capability is preserved) --
WU9 replaces it with the real PantallaVacaciones per design ADR-6.

New ARB keys (en/es only; other 11 locales are WU18's job):
alarmHeroSkipAction, alarmDeleteConfirmTitle/Message,
vacationRangesCount, vacationSummary{Active,Upcoming}Countdown.
This commit is contained in:
2026-07-29 10:20:25 +02:00
parent 6653e044c7
commit 9a2eb57a0e
19 changed files with 876 additions and 237 deletions
+262 -223
View File
@@ -16,6 +16,7 @@ import '../widgets/pluri_glass_surface.dart';
import '../widgets/pluri_icon.dart';
import '../widgets/pluri_layout.dart';
import '../widgets/pluri_premium_widgets.dart';
import '../widgets/pluri_push_scaffold.dart';
class PantallaAlarmas extends StatelessWidget {
const PantallaAlarmas({super.key});
@@ -128,6 +129,18 @@ class _PanelProximaAlarma extends StatelessWidget {
: l10n.createAlarmHint
: '${_nombreVisibleAlarma(l10n, proxima)} · ${_fechaHora(l10n, proximaProgramable!)}',
),
if (proxima != null) ...[
const SizedBox(height: 10),
Align(
alignment: Alignment.centerLeft,
child: OutlinedButton.icon(
key: const ValueKey('hero-skip-next'),
onPressed: () => _saltarDesdeHero(context, proxima),
icon: const Icon(Icons.skip_next_rounded, size: 18),
label: Text(l10n.alarmHeroSkipAction),
),
),
],
],
),
),
@@ -137,6 +150,40 @@ class _PanelProximaAlarma extends StatelessWidget {
}
}
/// Hero banner inline skip (native-alarms delta, WU8): skips the featured
/// (soonest-firing) alarm via the SAME `saltarProxima` path the old
/// always-visible per-card skip button used to call — only the trigger
/// location moved.
Future<void> _saltarDesdeHero(
BuildContext context,
AlarmaMusical proxima,
) async {
final l10n = AppLocalizations.of(context);
final estado = context.read<EstadoAlarmas>();
await estado.saltarProxima(proxima.id);
if (!context.mounted) return;
final actualizada = context.read<EstadoAlarmas>().alarmas.firstWhere(
(item) => item.id == proxima.id,
orElse: () => proxima,
);
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
actualizada.proximaProgramable == null
? l10n.alarmSkippedNoNextSnackbar
: l10n.alarmSkippedReturnsSnackbar(
_fechaHora(l10n, actualizada.proximaProgramable!),
),
),
),
);
}
/// Simplified alarm card (native-alarms delta, WU8): giant time + station +
/// switch, no always-visible action row. Edit/skip/delete are NEVER lost —
/// they move behind gestures: tap opens the editor, swipe deletes (with
/// confirmation), skip lives on the hero banner (`_PanelProximaAlarma`)
/// instead of a per-card button.
class _TarjetaAlarma extends StatelessWidget {
const _TarjetaAlarma({required this.alarma});
@@ -146,187 +193,67 @@ class _TarjetaAlarma extends StatelessWidget {
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final estado = context.watch<EstadoAlarmas>();
final excepcion = estado.ultimaExcepcionPara(alarma.id);
final mensajeVacaciones = _mensajeVacaciones(l10n, estado.vacaciones);
return PluriGlassSurface(
glowColor: context.pluriTokens.electricMagenta.withValues(alpha: 0.22),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
_AssetIcon(
'assets/icons/alarmas/alarm_music.png',
size: 64,
semanticLabel: l10n.alarmIconLabel,
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
_hora(alarma),
style: Theme.of(
context,
).textTheme.headlineMedium?.copyWith(
fontWeight: FontWeight.w900,
letterSpacing: -1,
),
final tokens = context.pluriTokens;
final estacion =
alarma.emisora == null
? l10n.noStationUseInternalSound
: localizedStationName(l10n, alarma.emisora!.nombre);
return Dismissible(
key: ValueKey('tarjeta-alarma-${alarma.id}'),
direction: DismissDirection.horizontal,
background: const _FondoSwipeEliminarAlarma(
alignment: Alignment.centerLeft,
),
secondaryBackground: const _FondoSwipeEliminarAlarma(
alignment: Alignment.centerRight,
),
confirmDismiss: (_) => _confirmarEliminarAlarma(context, l10n),
onDismissed: (_) => estado.eliminarAlarma(alarma.id),
child: PluriGlassSurface(
glowColor: tokens.electricMagenta.withValues(alpha: 0.22),
padding: EdgeInsets.zero,
child: Material(
type: MaterialType.transparency,
child: InkWell(
borderRadius: BorderRadius.circular(tokens.radiusMd),
onTap: () => _abrirEditor(context, alarma: alarma),
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
_hora(alarma),
style: Theme.of(
context,
).textTheme.displaySmall?.copyWith(
fontWeight: FontWeight.w900,
letterSpacing: -1.5,
),
),
const SizedBox(height: 2),
Text(estacion, overflow: TextOverflow.ellipsis),
],
),
Text(_nombreVisibleAlarma(l10n, alarma)),
],
),
),
Switch.adaptive(
value: alarma.activa,
onChanged: (value) => estado.cambiarActiva(alarma, value),
),
],
),
const SizedBox(height: 12),
Wrap(
spacing: 8,
runSpacing: 8,
children: [
_InfoChip(
icon: Icons.repeat_rounded,
label: _programacion(l10n, alarma),
),
_InfoChip(
icon: Icons.beach_access_rounded,
label:
alarma.sonarEnVacaciones
? l10n.alarmVacationPlay
: l10n.alarmVacationPause,
),
_InfoChip(
icon: Icons.volume_up_rounded,
label: '${(alarma.volumen * 100).round()}%',
),
_InfoChip(
icon: Icons.trending_up_rounded,
label: l10n.alarmFadeInLabel(alarma.fadeInSegundos),
),
],
),
const SizedBox(height: 12),
if (alarma.proximaProgramable != null)
_NoticeLine(
icon: Icons.event_available_rounded,
text: l10n.alarmNextExecution(
_fechaHora(l10n, alarma.proximaProgramable!),
),
)
else
_NoticeLine(
icon: Icons.pause_circle_outline_rounded,
text: l10n.alarmNoNextExecution,
),
if (excepcion != null) ...[
const SizedBox(height: 6),
_NoticeLine(
icon: Icons.skip_next_rounded,
text: l10n.alarmSkippedExecution(
_fechaHora(l10n, excepcion.ejecucion),
),
const SizedBox(width: 8),
Switch.adaptive(
value: alarma.activa,
onChanged: (value) => estado.cambiarActiva(alarma, value),
),
],
),
),
],
if (mensajeVacaciones != null) ...[
const SizedBox(height: 6),
_NoticeLine(
icon: Icons.beach_access_rounded,
text: mensajeVacaciones,
),
],
const SizedBox(height: 12),
Row(
children: [
TextButton.icon(
icon: const Icon(Icons.edit_rounded),
label: Text(l10n.editAction),
onPressed: () => _abrirEditor(context, alarma: alarma),
),
TextButton.icon(
icon: const Icon(Icons.skip_next_rounded),
label: Text(l10n.skipNextAction),
onPressed:
alarma.proximaProgramable == null
? null
: () async {
await estado.saltarProxima(alarma.id);
if (context.mounted) {
final alarmas =
context.read<EstadoAlarmas>().alarmas;
AlarmaMusical? actualizada;
for (final item in alarmas) {
if (item.id == alarma.id) {
actualizada = item;
break;
}
}
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
actualizada?.proximaProgramable == null
? l10n.alarmSkippedNoNextSnackbar
: l10n.alarmSkippedReturnsSnackbar(
_fechaHora(
l10n,
actualizada!.proximaProgramable!,
),
),
),
),
);
}
},
),
const Spacer(),
IconButton(
tooltip: l10n.deleteAction,
icon: const Icon(Icons.delete_outline_rounded),
onPressed: () => estado.eliminarAlarma(alarma.id),
),
],
),
],
),
),
);
}
String? _mensajeVacaciones(
AppLocalizations l10n,
List<RangoVacaciones> vacaciones,
) {
if (alarma.sonarEnVacaciones) return null;
final ahora = DateTime.now();
RangoVacaciones? actual;
for (final rango in vacaciones) {
if (rango.contiene(ahora)) {
actual = rango;
break;
}
}
if (actual != null) {
if (alarma.proximaProgramable == null) {
return l10n.alarmVacationPausedNoNext(
_nombreVisibleVacaciones(l10n, actual),
);
}
return l10n.alarmVacationPausedReturns(
_nombreVisibleVacaciones(l10n, actual),
_fechaHora(l10n, alarma.proximaProgramable!),
);
}
if (alarma.proximaProgramable != null) {
return l10n.alarmVacationReturns(
_fechaHora(l10n, alarma.proximaProgramable!),
);
}
return null;
}
void _abrirEditor(BuildContext context, {required AlarmaMusical alarma}) {
showModalBottomSheet<void>(
context: context,
@@ -336,6 +263,56 @@ class _TarjetaAlarma extends StatelessWidget {
builder: (_) => _EditorAlarmaSheet(alarma: alarma),
);
}
Future<bool> _confirmarEliminarAlarma(
BuildContext context,
AppLocalizations l10n,
) async {
final confirmado = await showDialog<bool>(
context: context,
builder:
(ctx) => AlertDialog(
title: Text(l10n.alarmDeleteConfirmTitle),
content: Text(l10n.alarmDeleteConfirmMessage),
actions: [
TextButton(
onPressed: () => Navigator.pop(ctx, false),
child: Text(l10n.cancelAction),
),
FilledButton(
onPressed: () => Navigator.pop(ctx, true),
child: Text(l10n.deleteAction),
),
],
),
);
return confirmado ?? false;
}
}
/// Swipe-to-delete reveal, shown on both sides so either swipe direction
/// works regardless of locale text direction.
class _FondoSwipeEliminarAlarma extends StatelessWidget {
const _FondoSwipeEliminarAlarma({required this.alignment});
final Alignment alignment;
@override
Widget build(BuildContext context) {
final tokens = context.pluriTokens;
return Container(
alignment: alignment,
padding: const EdgeInsets.symmetric(horizontal: 24),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.error,
borderRadius: BorderRadius.circular(tokens.radiusMd),
),
child: Icon(
Icons.delete_outline_rounded,
color: Theme.of(context).colorScheme.onError,
),
);
}
}
class _EditorAlarmaSheet extends StatefulWidget {
@@ -1009,6 +986,12 @@ class _AccesoDiagnostico extends StatelessWidget {
}
}
/// Vacation summary row (alarm-vacation-ranges delta, WU8): replaces the old
/// always-inline range list with a tap target showing range count + next-
/// range countdown, pushing the Vacaciones manager screen. WU9 owns the
/// destination screen's real content (`EstadoAlarmas` query additions per
/// design ADR-6); this row's tap target is a temporary placeholder until then
/// (see `_PantallaVacacionesTemporal` below).
class _PanelVacaciones extends StatelessWidget {
const _PanelVacaciones({required this.estado});
@@ -1017,38 +1000,118 @@ class _PanelVacaciones extends StatelessWidget {
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final vacaciones = [...estado.vacaciones]
..sort((a, b) => a.inicioDia.compareTo(b.inicioDia));
final tokens = context.pluriTokens;
final resumen = _resumenVacaciones(l10n, estado.vacaciones);
return PluriGlassSurface(
glowColor: PluriWaveTokens.skyBlue.withValues(alpha: 0.22),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
_AssetIcon(
'assets/icons/alarmas/vacation_wave.png',
size: 48,
semanticLabel: l10n.vacationIconLabel,
),
const SizedBox(width: 10),
Expanded(
child: Text(
l10n.vacationRangesTitle,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w900,
padding: EdgeInsets.zero,
child: Material(
type: MaterialType.transparency,
child: InkWell(
key: const ValueKey('vacaciones-resumen'),
borderRadius: BorderRadius.circular(tokens.radiusMd),
onTap: () => _abrirVacaciones(context),
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
_AssetIcon(
'assets/icons/alarmas/vacation_wave.png',
size: 48,
semanticLabel: l10n.vacationIconLabel,
),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
l10n.vacationRangesTitle,
style: Theme.of(context).textTheme.titleMedium
?.copyWith(fontWeight: FontWeight.w900),
),
const SizedBox(height: 4),
Text(resumen),
],
),
),
),
FilledButton.tonalIcon(
onPressed: () => _abrirAlta(context),
icon: const Icon(Icons.add_rounded),
label: Text(l10n.addAction),
),
],
const Icon(Icons.chevron_right_rounded),
],
),
),
const SizedBox(height: 8),
),
),
);
}
void _abrirVacaciones(BuildContext context) {
PluriPushScaffold.push(context, (_) => const _PantallaVacacionesTemporal());
}
/// Range count + next-range countdown, computed directly over the existing
/// `estado.vacaciones` (no new `EstadoAlarmas` query method — those are
/// design ADR-6's pure additions, owned by WU9).
String _resumenVacaciones(
AppLocalizations l10n,
List<RangoVacaciones> vacaciones,
) {
if (vacaciones.isEmpty) return l10n.noVacationRangesLoaded;
final ahora = DateTime.now();
final hoy = DateTime(ahora.year, ahora.month, ahora.day);
final conteo = l10n.vacationRangesCount(vacaciones.length);
RangoVacaciones? activo;
for (final rango in vacaciones) {
if (rango.contiene(ahora)) {
activo = rango;
break;
}
}
if (activo != null) {
final dias = activo.finDia.difference(hoy).inDays;
return '$conteo · ${l10n.vacationSummaryActiveCountdown(dias)}';
}
final futuros =
vacaciones.where((rango) => rango.inicioDia.isAfter(hoy)).toList()
..sort((a, b) => a.inicioDia.compareTo(b.inicioDia));
if (futuros.isNotEmpty) {
final dias = futuros.first.inicioDia.difference(hoy).inDays;
return '$conteo · ${l10n.vacationSummaryUpcomingCountdown(dias)}';
}
return conteo;
}
}
/// Temporary push destination (WU8). WU9 replaces this whole widget with the
/// real `PantallaVacaciones` (active-range hero, per-alarm impact line,
/// upcoming/past sections) from `lib/pantallas/pantalla_vacaciones.dart`. The
/// body below is the OLD inline panel's content, moved verbatim — same
/// "keep the real action, drop only the header" rule WU3a/WU3b established —
/// so add/delete range capability is never dropped even for one commit.
class _PantallaVacacionesTemporal extends StatelessWidget {
const _PantallaVacacionesTemporal();
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final estado = context.watch<EstadoAlarmas>();
final vacaciones = [...estado.vacaciones]
..sort((a, b) => a.inicioDia.compareTo(b.inicioDia));
return PluriPushScaffold(
title: l10n.vacationRangesTitle,
body: ListView(
padding: PluriLayout.pageContentPadding,
children: [
Text(l10n.vacationRangesHint),
const SizedBox(height: 12),
Align(
alignment: Alignment.centerRight,
child: FilledButton.tonalIcon(
onPressed: () => _abrirAlta(context),
icon: const Icon(Icons.add_rounded),
label: Text(l10n.addAction),
),
),
const SizedBox(height: 12),
if (vacaciones.isEmpty)
Text(l10n.noVacationRangesLoaded)
else
@@ -1285,18 +1348,6 @@ class _SectionLabel extends StatelessWidget {
}
}
class _InfoChip extends StatelessWidget {
const _InfoChip({required this.icon, required this.label});
final IconData icon;
final String label;
@override
Widget build(BuildContext context) {
return Chip(avatar: Icon(icon, size: 16), label: Text(label));
}
}
class _NoticeLine extends StatelessWidget {
const _NoticeLine({super.key, required this.icon, required this.text});
@@ -1351,18 +1402,6 @@ String _nombreVisibleVacaciones(AppLocalizations l10n, RangoVacaciones rango) {
String _hora(AlarmaMusical alarma) =>
'${alarma.hora.toString().padLeft(2, '0')}:${alarma.minuto.toString().padLeft(2, '0')}';
String _programacion(AppLocalizations l10n, AlarmaMusical alarma) {
return switch (alarma.tipoProgramacion) {
TipoProgramacionAlarma.unica => l10n.alarmScheduleOnce(
_fechaCorta(l10n, alarma.fechaUnica ?? DateTime.now()),
),
TipoProgramacionAlarma.diaria => l10n.dailyOption,
TipoProgramacionAlarma.diasSemana => l10n.alarmScheduleWeekdays(
alarma.diasSemana.map((day) => _weekdayShort(l10n, day)).join(', '),
),
};
}
String _fechaHora(AppLocalizations l10n, DateTime fecha) =>
l10n.dateTimeSentence(fecha);