diff --git a/packages/frontend/core/src/mobile/components/index.ts b/packages/frontend/core/src/mobile/components/index.ts
index 81bb7db8a3..f0334eda3f 100644
--- a/packages/frontend/core/src/mobile/components/index.ts
+++ b/packages/frontend/core/src/mobile/components/index.ts
@@ -5,5 +5,6 @@ export * from './page-header';
export * from './rename';
export * from './search-input';
export * from './search-result';
+export * from './swipe-menu';
export * from './user-plan-tag';
export * from './workspace-selector';
diff --git a/packages/frontend/core/src/mobile/components/swipe-menu/index.tsx b/packages/frontend/core/src/mobile/components/swipe-menu/index.tsx
new file mode 100644
index 0000000000..6e1b0339d9
--- /dev/null
+++ b/packages/frontend/core/src/mobile/components/swipe-menu/index.tsx
@@ -0,0 +1,175 @@
+import { LiveData, useLiveData, useService } from '@toeverything/infra';
+import anime from 'animejs';
+import clsx from 'clsx';
+import {
+ type HTMLAttributes,
+ type ReactNode,
+ useCallback,
+ useEffect,
+ useId,
+ useRef,
+} from 'react';
+
+import { HapticsService } from '../../modules/haptics';
+import { SwipeHelper } from '../../utils';
+import * as styles from './styles.css';
+
+export interface SwipeMenuProps extends HTMLAttributes
{
+ menu: ReactNode;
+ /**
+ * if the swipe distance is greater than the threshold, will execute the callback
+ * @default 200
+ */
+ executeThreshold?: number;
+ onExecute?: () => void;
+ normalWidth?: number;
+}
+
+type TickFunc = any[]> = (
+ content: HTMLDivElement,
+ menu: HTMLDivElement,
+ options: {
+ deltaX: number;
+ normalWidth: number;
+ },
+ ...args: T
+) => void;
+
+const tick: TickFunc = (content, menu, options) => {
+ const limitedDeltaX = Math.min(
+ 0,
+ Math.max(options.deltaX, -options.normalWidth * 3)
+ );
+ content.style.transform = `translateX(${limitedDeltaX}px)`;
+ menu.style.transform = `translateX(${limitedDeltaX}px)`;
+ menu.style.width = `${Math.max(options.normalWidth, Math.abs(limitedDeltaX))}px`;
+};
+
+const animate: TickFunc<[number]> = (content, menu, options, to) => {
+ const styleX = Number(content.style.transform.match(/-?\d+/)?.[0]);
+ const deltaX = isNaN(styleX) ? options.deltaX : styleX;
+
+ const proxy = new Proxy(
+ { deltaX },
+ {
+ set(target, key, value) {
+ if (key !== 'deltaX') return false;
+ target.deltaX = value;
+ tick(content, menu, { ...options, deltaX: value });
+ return true;
+ },
+ }
+ );
+ if (deltaX === to) return;
+ anime({
+ targets: proxy,
+ deltaX: to,
+ duration: 230,
+ easing: 'easeInOutSine',
+ });
+};
+
+const activeId$ = new LiveData(null);
+
+/**
+ * Only support swipe left yet
+ * Only support single menu item yet
+ */
+export const SwipeMenu = ({
+ children,
+ className,
+ menu,
+ normalWidth = 90,
+ executeThreshold = 200,
+ onExecute,
+ ...props
+}: SwipeMenuProps) => {
+ const id = useId();
+ const haptics = useService(HapticsService);
+ const activeId = useLiveData(activeId$);
+
+ const isOpenRef = useRef(false);
+ const containerRef = useRef(null);
+ const menuRef = useRef(null);
+ const contentRef = useRef(null);
+
+ const handleClose = useCallback(() => {
+ isOpenRef.current = false;
+ const content = contentRef.current;
+ const menu = menuRef.current;
+ if (!content || !menu) return;
+ animate(content, menu, { deltaX: -normalWidth, normalWidth }, 0);
+ }, [normalWidth]);
+
+ useEffect(() => {
+ if (activeId && activeId !== id && isOpenRef.current) {
+ handleClose();
+ }
+ }, [activeId, handleClose, id]);
+
+ useEffect(() => {
+ const container = containerRef.current;
+ const menu = menuRef.current;
+ const content = contentRef.current;
+ if (!container || !menu || !content) return;
+ const swipeHelper = new SwipeHelper();
+
+ let shouldExecute = false;
+
+ return swipeHelper.init(container, {
+ preventScroll: true,
+ direction: 'horizontal',
+ onSwipeStart() {
+ activeId$.next(id);
+ },
+ onSwipe({ deltaX: dragX, initialDirection }) {
+ if (initialDirection !== 'horizontal') return;
+
+ const deltaX = isOpenRef.current ? dragX - normalWidth : dragX;
+ const prevShouldExecute = shouldExecute;
+ shouldExecute = Math.abs(deltaX) > executeThreshold;
+ if (shouldExecute && !prevShouldExecute) {
+ haptics.impact({ style: 'LIGHT' });
+ }
+ tick(content, menu, { deltaX, normalWidth });
+ },
+ onSwipeEnd({ deltaX: dragX, initialDirection }) {
+ activeId$.next(null);
+ if (initialDirection !== 'horizontal') return;
+
+ const deltaX = isOpenRef.current ? dragX - normalWidth : dragX;
+ if (shouldExecute) {
+ animate(content, menu, { deltaX, normalWidth }, 0);
+ onExecute?.();
+ isOpenRef.current = false;
+ return;
+ }
+ // open
+ if (Math.abs(deltaX) > normalWidth / 2) {
+ animate(content, menu, { deltaX, normalWidth }, -normalWidth);
+ isOpenRef.current = true;
+ }
+ // close
+ else {
+ animate(content, menu, { deltaX, normalWidth }, 0);
+ isOpenRef.current = false;
+ }
+ },
+ });
+ }, [executeThreshold, haptics, id, normalWidth, onExecute]);
+
+ return (
+
+
+ {children}
+
+
+ {menu}
+
+