ENH - add swipe-to-clear lock-screen notifications

frontend/src/utils/notificationSwipe.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  clampNotificationSwipeOffset,
+  NOTIFICATION_SWIPE_ACTION_WIDTH,
+  resolveNotificationSwipeAxis,
+  shouldRevealNotificationAction,
+} from '@/utils/notificationSwipe'
+
+describe('lock-screen notification swipe gestures', () => {
+  it('waits for a clear horizontal or vertical direction', () => {
+    expect(resolveNotificationSwipeAxis(5, 2)).toBeNull()
+    expect(resolveNotificationSwipeAxis(-24, 5)).toBe('horizontal')
+    expect(resolveNotificationSwipeAxis(-10, 18)).toBe('vertical')
+  })
+
+  it('only allows a resisted swipe to the left', () => {
+    expect(clampNotificationSwipeOffset(40)).toBe(0)
+    expect(clampNotificationSwipeOffset(-60)).toBe(-60)
+    expect(clampNotificationSwipeOffset(-240)).toBeGreaterThan(
+      -NOTIFICATION_SWIPE_ACTION_WIDTH - 17,
+    )
+  })
+
+  it('reveals clear after enough distance or a deliberate flick', () => {
+    expect(shouldRevealNotificationAction(-41, -0.2)).toBe(false)
+    expect(shouldRevealNotificationAction(-42, -0.2)).toBe(true)
+    expect(shouldRevealNotificationAction(-20, -0.5)).toBe(true)
+    expect(shouldRevealNotificationAction(-12, -0.8)).toBe(false)
+  })
+})

frontend/src/utils/notificationSwipe.ts

@@ -0,0 +1,46 @@
+export type NotificationSwipeAxis = 'horizontal' | 'vertical'
+
+export const NOTIFICATION_SWIPE_ACTION_WIDTH = 76
+export const NOTIFICATION_SWIPE_AXIS_LOCK = 8
+export const NOTIFICATION_SWIPE_TRIGGER = 42
+
+export function resolveNotificationSwipeAxis(
+  deltaX: number,
+  deltaY: number,
+): NotificationSwipeAxis | null {
+  const horizontalDistance = Math.abs(deltaX)
+  const verticalDistance = Math.abs(deltaY)
+  if (
+    Math.max(horizontalDistance, verticalDistance) <
+    NOTIFICATION_SWIPE_AXIS_LOCK
+  ) {
+    return null
+  }
+
+  return horizontalDistance > verticalDistance * 1.15
+    ? 'horizontal'
+    : 'vertical'
+}
+
+export function clampNotificationSwipeOffset(deltaX: number): number {
+  if (deltaX >= 0) return 0
+
+  const distance = Math.abs(deltaX)
+  const resistedDistance =
+    distance <= NOTIFICATION_SWIPE_ACTION_WIDTH
+      ? distance
+      : NOTIFICATION_SWIPE_ACTION_WIDTH +
+        (distance - NOTIFICATION_SWIPE_ACTION_WIDTH) * 0.16
+
+  return -Math.min(resistedDistance, NOTIFICATION_SWIPE_ACTION_WIDTH + 16)
+}
+
+export function shouldRevealNotificationAction(
+  offset: number,
+  velocityX: number,
+): boolean {
+  return (
+    offset <= -NOTIFICATION_SWIPE_TRIGGER ||
+    (offset <= -18 && velocityX <= -0.45)
+  )
+}