feat(ui): refine navigation and sleep timer

2026-05-22 13:12:50 +02:00
parent 0edad1bfcb
commit e1d1d6c639
11 changed files with 755 additions and 124 deletions
@@ -0,0 +1,148 @@
+import 'package:flutter/material.dart';
+
+import '../tema/pluriwave_theme.dart';
+import 'pluri_glass_surface.dart';
+import 'pluri_icon.dart';
+
+class PluriNavItem {
+  const PluriNavItem({required this.glyph, required this.label});
+
+  final PluriIconGlyph glyph;
+  final String label;
+}
+
+class PluriBottomNavigation extends StatelessWidget {
+  const PluriBottomNavigation({
+    super.key,
+    required this.items,
+    required this.selectedIndex,
+    required this.onSelected,
+  });
+
+  final List<PluriNavItem> items;
+  final int selectedIndex;
+  final ValueChanged<int> onSelected;
+
+  @override
+  Widget build(BuildContext context) {
+    final t = context.pluriTokens;
+    return PluriGlassSurface(
+      padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 7),
+      borderRadius: BorderRadius.circular(999),
+      glowColor: t.glowColor.withValues(alpha: 0.28),
+      child: Row(
+        children: [
+          for (var i = 0; i < items.length; i++)
+            Expanded(
+              flex: i == selectedIndex ? 15 : 10,
+              child: _PluriNavButton(
+                item: items[i],
+                selected: i == selectedIndex,
+                onTap: () => onSelected(i),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}
+
+class _PluriNavButton extends StatelessWidget {
+  const _PluriNavButton({
+    required this.item,
+    required this.selected,
+    required this.onTap,
+  });
+
+  final PluriNavItem item;
+  final bool selected;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final t = context.pluriTokens;
+    final foreground = Theme.of(context).colorScheme.onSurface;
+    return Semantics(
+      button: true,
+      selected: selected,
+      label: item.label,
+      child: AnimatedContainer(
+        duration: context.pluriMotion.normal,
+        curve: Curves.easeOutCubic,
+        margin: EdgeInsets.symmetric(horizontal: selected ? 3 : 2),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(999),
+          gradient: selected
+              ? LinearGradient(
+                  colors: [
+                    t.electricMagenta.withValues(alpha: 0.32),
+                    t.warmCoral.withValues(alpha: 0.18),
+                  ],
+                )
+              : null,
+          border: Border.all(
+            color: selected
+                ? Colors.white.withValues(alpha: 0.22)
+                : Colors.white.withValues(alpha: 0.06),
+          ),
+          boxShadow: selected
+              ? [
+                  BoxShadow(
+                    color: t.glowColor.withValues(alpha: 0.36),
+                    blurRadius: 24,
+                    spreadRadius: -6,
+                    offset: const Offset(0, 8),
+                  ),
+                ]
+              : const [],
+        ),
+        child: InkWell(
+          borderRadius: BorderRadius.circular(999),
+          onTap: onTap,
+          child: Padding(
+            padding: EdgeInsets.symmetric(
+              horizontal: selected ? 8 : 3,
+              vertical: selected ? 8 : 7,
+            ),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                AnimatedScale(
+                  scale: selected ? 1.16 : 0.96,
+                  duration: context.pluriMotion.quick,
+                  curve: Curves.easeOutBack,
+                  child: PluriIcon(
+                    glyph: item.glyph,
+                    variant: selected
+                        ? PluriIconVariant.activeGlow
+                        : PluriIconVariant.filled,
+                    size: selected ? 42 : 34,
+                  ),
+                ),
+                AnimatedSize(
+                  duration: context.pluriMotion.quick,
+                  curve: Curves.easeOutCubic,
+                  child: selected
+                      ? Padding(
+                          padding: const EdgeInsets.only(top: 2),
+                          child: Text(
+                            item.label,
+                            maxLines: 1,
+                            overflow: TextOverflow.ellipsis,
+                            style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                                  color: foreground,
+                                  fontWeight: FontWeight.w900,
+                                  letterSpacing: -0.2,
+                                ),
+                          ),
+                        )
+                      : const SizedBox.shrink(),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}