feat(mobile): mobile experimental feature setting (#8922)

close AF-1802

![CleanShot 2024-11-26 at 10.02.27.gif](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/09d24e35-a524-497d-b5aa-840bf74f128f.gif)

packages/frontend/component/src/ui/modal/modal.tsx

@@ -48,7 +48,7 @@ export interface ModalProps extends DialogProps {
   /**
    * @default 'fadeScaleTop'
    */
-  animation?: 'fadeScaleTop' | 'none' | 'slideBottom';
+  animation?: 'fadeScaleTop' | 'none' | 'slideBottom' | 'slideRight';
   /**
    * Whether to show the modal in full screen mode
    */

packages/frontend/component/src/ui/modal/styles.css.ts

@@ -51,12 +51,23 @@ const contentHideSlideBottom = keyframes({
   from: { transform: 'translateY(0)' },
   to: { transform: 'translateY(100%)' },
 });
+const contentShowSlideRight = keyframes({
+  from: { transform: 'translateX(100%)' },
+  to: { transform: 'translateX(0)' },
+});
+const contentHideSlideRight = keyframes({
+  from: { transform: 'translateX(0)' },
+  to: { transform: 'translateX(100%)' },
+});
 const modalContentViewTransitionNameFadeScaleTop = generateIdentifier(
   'modal-content-fade-scale-top'
 );
 const modalContentViewTransitionNameSlideBottom = generateIdentifier(
   'modal-content-slide-bottom'
 );
+const modalContentViewTransitionNameSlideRight = generateIdentifier(
+  'modal-content-slide-right'
+);
 export const modalOverlay = style({
   position: 'fixed',
   inset: 0,
@@ -105,6 +116,13 @@ export const modalContentWrapper = style({
     [`${vtScopeSelector(modalVTScope)} &.anim-slideBottom.vt-active`]: {
       viewTransitionName: modalContentViewTransitionNameSlideBottom,
     },
+    '&.anim-slideRight': {
+      animation: `${contentShowSlideRight} 0.23s ease`,
+      animationFillMode: 'forwards',
+    },
+    [`${vtScopeSelector(modalVTScope)} &.anim-slideRight.vt-active`]: {
+      viewTransitionName: modalContentViewTransitionNameSlideRight,
+    },
   },
 });
 globalStyle(
@@ -121,6 +139,13 @@ globalStyle(
     animationFillMode: 'forwards',
   }
 );
+globalStyle(
+  `::view-transition-old(${modalContentViewTransitionNameSlideRight})`,
+  {
+    animation: `${contentHideSlideRight} 0.23s ease`,
+    animationFillMode: 'forwards',
+  }
+);
 
 export const modalContent = style({
   vars: {