fixed designs and flow

lib/screens/clock_screen.dart

@@ -14,9 +14,11 @@ import '../state/shifts_controller.dart';
 import '../state/timecards_controller.dart';
 import '../widgets/collapsing_header.dart';
 import '../widgets/common.dart';
+import '../widgets/motion.dart';
 import '../widgets/glass_segments.dart';
 import '../widgets/krow_wordmark.dart';
 import '../widgets/shift_card.dart';
+import '../widgets/swipe_action.dart';
 import 'timecard_screens.dart';
 
 /// Clock in and out. The button unlocks 30 minutes before the shift starts,
@@ -122,7 +124,9 @@ class _ClockScreenState extends ConsumerState<ClockScreen> {
             SliverPadding(
               padding: const EdgeInsets.fromLTRB(20, 18, 20, 28),
               sliver: SliverList.list(
-                children: timecardItems(ref.watch(timecardsProvider)),
+                children: Entrance.stagger(
+                  timecardItems(ref.watch(timecardsProvider)),
+                ),
               ),
             )
           else if (shift == null)
@@ -142,7 +146,7 @@ class _ClockScreenState extends ConsumerState<ClockScreen> {
             SliverPadding(
               padding: const EdgeInsets.fromLTRB(20, 28, 20, 24),
               sliver: SliverList.list(
-                children: [
+                children: Entrance.stagger([
                   _ClockDial(shift: shift, atVenue: _atVenue),
                   const SizedBox(height: 22),
                   if (shift.status == ShiftStatus.active)
@@ -155,16 +159,18 @@ class _ClockScreenState extends ConsumerState<ClockScreen> {
                       label: const Text('Clock out'),
                     )
                   else
-                    FilledButton.icon(
-                      onPressed: _canClockIn(shift, locationGranted)
-                          ? () => _clockIn(shift)
-                          : null,
-                      icon: const Icon(LucideIcons.logIn, size: 18),
-                      label: Text(
-                        _canClockIn(shift, locationGranted)
-                            ? 'Clock in'
-                            : 'Clock in · ${Fmt.untilStart(shift.start)}',
-                      ),
+                    SwipeAction(
+                      // The thumb is a handle, so its icon says how to
+                      // work the control, not what the control does - the
+                      // label already says 'clock in', and the check on
+                      // commit carries the outcome.
+                      icon: LucideIcons.arrowRight,
+                      enabled: _canClockIn(shift, locationGranted),
+                      label: _canClockIn(shift, locationGranted)
+                          ? 'Swipe to clock in'
+                          : 'Clock in · ${Fmt.untilStart(shift.start)}',
+                      confirmedLabel: 'Clocked in',
+                      onConfirm: () => _clockIn(shift),
                     ),
                   const SizedBox(height: 12),
                   _GeofenceCard(
@@ -178,7 +184,7 @@ class _ClockScreenState extends ConsumerState<ClockScreen> {
                     shift: shift,
                     onTap: () => context.push('/shift/${shift.id}'),
                   ),
-                ],
+                ]),
               ),
             ),
         ],
@@ -195,8 +201,8 @@ class _ClockScreenState extends ConsumerState<ClockScreen> {
 
   void _clockIn(Shift shift) {
     // Starting and ending a shift are the two moments that matter most in the
-    // app; both get a firm confirmation you can feel without looking.
-    HapticFeedback.mediumImpact();
+    // app; both get a firm confirmation you can feel without looking. Clocking
+    // in gets its haptic from SwipeAction, at the instant the swipe commits.
     ref.read(shiftsProvider.notifier).clockIn(shift.id);
     ScaffoldMessenger.of(context).showSnackBar(
       SnackBar(content: Text('Clocked in at ${Fmt.time(DateTime.now())}')),