Initial commit (Security Hardened Slate)

lib/components/clock_display.dart

@@ -0,0 +1,152 @@
+import 'dart:math';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:paladinvpn/logic/session_timer.dart';
+
+/// ClockDisplay shows a large circular progress ring and the session countdown timer.
+/// 
+/// The timer text glows electric cyan when a session is active and dims to slate gray when idle.
+class ClockDisplay extends StatelessWidget {
+  const ClockDisplay({super.key});
+
+  static const Color _cyanGlow = Color(0xFF00E5FF);
+  static const Color _dimSlate = Color(0xFF4A5568);
+
+  @override
+  Widget build(BuildContext context) {
+    return Consumer<SessionTimer>(
+      builder: (context, timer, _) {
+        final isLive = timer.isRunning;
+        final color = isLive ? _cyanGlow : _dimSlate;
+
+        return Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            SizedBox(
+              width: 220,
+              height: 220,
+              child: Stack(
+                alignment: Alignment.center,
+                children: [
+                  // Background track ring representing the maximum capacity of the countdown
+                  const CustomPaint(
+                    size: Size(220, 220),
+                    painter: _ArcPainter(
+                      progress: 1.0,
+                      color: Color.fromRGBO(74, 85, 104, 0.2),
+                      strokeWidth: 4,
+                    ),
+                  ),
+                  
+                  // Live progress ring showing current remaining time relative to the session limit
+                  if (isLive)
+                    TweenAnimationBuilder<double>(
+                      tween: Tween(begin: 0, end: timer.progress),
+                      duration: const Duration(milliseconds: 400),
+                      builder: (context, value, _) => CustomPaint(
+                        size: const Size(220, 220),
+                        painter: _ArcPainter(
+                          progress: value,
+                          color: _cyanGlow,
+                          strokeWidth: 4,
+                          glow: true,
+                        ),
+                      ),
+                    ),
+                    
+                  // Monospaced digital clock display for session countdown
+                  AnimatedDefaultTextStyle(
+                    duration: const Duration(milliseconds: 300),
+                    style: TextStyle(
+                      fontFamily: 'RobotoMono',
+                      fontSize: 48,
+                      fontWeight: FontWeight.w300,
+                      letterSpacing: 4,
+                      color: color,
+                      shadows: isLive
+                          ? const [
+                              Shadow(
+                                color: Color.fromRGBO(0, 229, 255, 0.6),
+                                blurRadius: 20,
+                              ),
+                              Shadow(
+                                color: Color.fromRGBO(0, 229, 255, 0.3),
+                                blurRadius: 40,
+                              ),
+                            ]
+                          : const [],
+                    ),
+                    child: Text(timer.formatted),
+                  ),
+                ],
+              ),
+            ),
+            const SizedBox(height: 12),
+            
+            // Subtitle state label below the timer
+            AnimatedSwitcher(
+              duration: const Duration(milliseconds: 200),
+              child: Text(
+                isLive ? 'SESSION ACTIVE' : 'STANDBY',
+                key: ValueKey(isLive),
+                style: TextStyle(
+                  fontSize: 12,
+                  fontWeight: FontWeight.w600,
+                  letterSpacing: 3,
+                  color: isLive
+                      ? const Color.fromRGBO(0, 229, 255, 0.7)
+                      : const Color.fromRGBO(74, 85, 104, 0.7),
+                ),
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}
+
+/// A custom painter to render a circular progress arc or background track ring.
+class _ArcPainter extends CustomPainter {
+  final double progress;
+  final Color color;
+  final double strokeWidth;
+  final bool glow;
+
+  const _ArcPainter({
+    required this.progress,
+    required this.color,
+    this.strokeWidth = 4,
+    this.glow = false,
+  });
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final rect = Rect.fromLTWH(0, 0, size.width, size.height)
+        .deflate(strokeWidth / 2);
+
+    // Optional blurred background paint to create an electric neon glow effect
+    if (glow) {
+      final glowPaint = Paint()
+        ..color = const Color.fromRGBO(0, 229, 255, 0.15)
+        ..style = PaintingStyle.stroke
+        ..strokeWidth = strokeWidth + 8
+        ..strokeCap = StrokeCap.round
+        ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 8);
+      canvas.drawArc(rect, -pi / 2, 2 * pi * progress, false, glowPaint);
+    }
+
+    // Core progress stroke paint
+    final paint = Paint()
+      ..color = color
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = strokeWidth
+      ..strokeCap = StrokeCap.round;
+
+    canvas.drawArc(rect, -pi / 2, 2 * pi * progress, false, paint);
+  }
+
+  @override
+  bool shouldRepaint(covariant _ArcPainter old) =>
+      old.progress != progress || old.color != color;
+}