feat(mobile): swipe to open menu for explorer (#8953)

close AF-1803

- bump theme
- extract `SwipeHelper` and add `speed`, `direction` detection support
- new mobile `SwipeMenu` component
- integrate `SwipeMenu` to open a menu in Explorer
- New `Haptics` module for mobile, implemented in `ios` and `mobile`(`navigator.vibrate()`)

![CleanShot 2024-11-28 at 12.25.14.gif](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/cba36660-f38a-473b-b85c-33540a406835.gif)

packages/frontend/apps/mobile/src/app.tsx

@@ -1,6 +1,7 @@
 import { AffineContext } from '@affine/core/components/context';
 import { AppFallback } from '@affine/core/mobile/components/app-fallback';
 import { configureMobileModules } from '@affine/core/mobile/modules';
+import { HapticProvider } from '@affine/core/mobile/modules/haptics';
 import { router } from '@affine/core/mobile/router';
 import { configureCommonModules } from '@affine/core/modules';
 import { I18nProvider } from '@affine/core/modules/i18n';
@@ -52,6 +53,28 @@ framework.impl(PopupWindowProvider, {
     window.open(url, '_blank', 'noreferrer noopener');
   },
 });
+framework.impl(HapticProvider, {
+  impact: options => {
+    return new Promise(resolve => {
+      const style = options?.style ?? 'LIGHT';
+      const pattern = {
+        LIGHT: [10],
+        MEDIUM: [20],
+        HEAVY: [30],
+      }[style];
+      const result = navigator.vibrate?.(pattern);
+      if (!result) {
+        console.warn('vibrate not supported, or user not interacted');
+      }
+      resolve();
+    });
+  },
+  notification: () => Promise.reject('Not supported'),
+  vibrate: () => Promise.reject('Not supported'),
+  selectionStart: () => Promise.reject('Not supported'),
+  selectionChanged: () => Promise.reject('Not supported'),
+  selectionEnd: () => Promise.reject('Not supported'),
+});
 const frameworkProvider = framework.provider();
 
 // setup application lifecycle events, and emit application start event