Make the token draggable

apps/mobile/package.json

@@ -75,6 +75,7 @@
     "react-native-tab-view": "^3.4.0",
     "react-native-url-polyfill": "^1.3.0",
     "react-native-webview": "13.6.4",
+    "rfdc": "^1.3.1",
     "sentry-expo": "~7.2.0",
     "siwe": "^2.1.4",
     "swr": "^2.1.1",

apps/mobile/src/components/GalleryEditor/GalleryEditorNavbar.tsx

@@ -77,17 +77,34 @@ function DebuggerBottomSheet({ activeRowId, activeSectionId, sections }: Debugge
                 {section.name || 'Empty'} -
                 <BaseM classNameOverride="text-gray-500">{section.dbid}</BaseM>
               </BaseM>
-              {section.rows.map((row, index) => {
-                return (
-                  <View key={row.id}>
-                    <BaseM
-                      classNameOverride={clsx(row.id === activeRowId ? 'text-activeBlue' : null)}
-                    >
-                      {index + 1}. {row.id} - columns ({row.columns})
-                    </BaseM>
-                  </View>
-                );
-              })}
+              <View className="gap-2">
+                {section.rows.map((row, index) => {
+                  return (
+                    <View key={row.id}>
+                      <BaseM
+                        classNameOverride={clsx(
+                          'mb-1',
+                          row.id === activeRowId ? 'text-activeBlue' : null
+                        )}
+                      >
+                        {index + 1}. {row.id} - columns ({row.columns})
+                      </BaseM>
+                      <View className="gap-1">
+                        {row.items.map((item) => {
+                          return (
+                            <BaseM
+                              key={item.id}
+                              classNameOverride="text-xs font-mono text-gray-600"
+                            >
+                              {item.id}
+                            </BaseM>
+                          );
+                        })}
+                      </View>
+                    </View>
+                  );
+                })}
+              </View>
             </View>
           );
         })}

apps/mobile/src/components/GalleryEditor/GalleryEditorRow.tsx

@@ -1,7 +1,8 @@
+import { FlashList } from '@shopify/flash-list';
 import clsx from 'clsx';
 import React, { useCallback } from 'react';
-import { GestureResponderEvent, View, ViewProps } from 'react-native';
-import Animated from 'react-native-reanimated';
+import { GestureResponderEvent, View } from 'react-native';
+import Animated, { AnimatedRef, SharedValue } from 'react-native-reanimated';
 import { graphql, useFragment } from 'react-relay';
 
 import { useGalleryEditorActions } from '~/contexts/GalleryEditor/GalleryEditorContext';
@@ -10,17 +11,26 @@ import { GalleryEditorRowFragment$key } from '~/generated/GalleryEditorRowFragme
 
 import { GalleryTouchableOpacity } from '../GalleryTouchableOpacity';
 import { GalleryEditorActiveActions } from './GalleryEditorActiveActions';
-import { GalleryEditorTokenPreview } from './GalleryEditorTokenPreview';
+import { ListItemType } from './GalleryEditorRenderer';
+import { SortableTokenGrid } from './SortableTokenGrid/SortableTokenGrid';
 import { useWidthPerToken } from './useWidthPerToken';
 
 type Props = {
   sectionId: string;
   row: StagedRow;
-  style?: ViewProps['style'];
   queryRef: GalleryEditorRowFragment$key;
+
+  scrollContentOffsetY: SharedValue<number>;
+  scrollViewRef: AnimatedRef<FlashList<ListItemType>>;
 };
 
-export function GalleryEditorRow({ sectionId, row, style, queryRef }: Props) {
+export function GalleryEditorRow({
+  sectionId,
+  row,
+  queryRef,
+  scrollContentOffsetY,
+  scrollViewRef,
+}: Props) {
   const query = useFragment(
     graphql`
       fragment GalleryEditorRowFragment on Query {
@@ -30,7 +40,7 @@ export function GalleryEditorRow({ sectionId, row, style, queryRef }: Props) {
     queryRef
   );
 
-  const { activateRow, activeRowId } = useGalleryEditorActions();
+  const { activateRow, activeRowId, moveItem } = useGalleryEditorActions();
 
   const widthPerToken = useWidthPerToken(row.columns);
 
@@ -42,50 +52,46 @@ export function GalleryEditorRow({ sectionId, row, style, queryRef }: Props) {
     [activateRow, sectionId, row.id]
   );
 
+  const handleDragStart = useCallback(() => {
+    activateRow(sectionId, row.id);
+  }, [activateRow, sectionId, row.id]);
+
+  const handleDragEnd = useCallback(
+    (newPositionsById: string[]) => {
+      moveItem(row.id, newPositionsById);
+    },
+    [moveItem, row.id]
+  );
+
   return (
-    <Animated.View className={clsx('border border-transparent gap-4')}>
+    <Animated.View className={clsx('border border-transparent')}>
       <GalleryTouchableOpacity
         eventElementId={null}
         eventName={null}
         eventContext={null}
         onPress={handleSectionPress}
-        className={clsx('border border-transparent relative', {
-          'border-activeBlue': activeRowId === row.id,
-        })}
-        style={style}
+        withoutFeedback
       >
-        <View>
-          <View className="flex-row flex-wrap gap-2">
-            {row.items.map((item) => {
-              if (item.kind === 'whitespace') {
-                return <WhiteSpace key={item.id} size={widthPerToken - 8} />;
-              } else {
-                return (
-                  <View
-                    key={item.id}
-                    className="aspect-square"
-                    style={{
-                      width: widthPerToken - 8,
-                    }}
-                  >
-                    <GalleryEditorTokenPreview tokenRef={item.tokenRef} />
-                  </View>
-                );
-              }
-            })}
+        <View
+          className={clsx('border border-transparent relative', {
+            'border-activeBlue': activeRowId === row.id,
+          })}
+        >
+          <View className="relative">
+            {/* this component is responsible for rendering the grid of tokens. */}
+            <SortableTokenGrid
+              columns={row.columns}
+              items={row.items}
+              size={widthPerToken}
+              scrollContentOffsetY={scrollContentOffsetY}
+              scrollViewRef={scrollViewRef}
+              onDragStart={handleDragStart}
+              onDragEnd={handleDragEnd}
+            />
           </View>
           {activeRowId === row.id && <GalleryEditorActiveActions row={row} queryRef={query} />}
         </View>
       </GalleryTouchableOpacity>
     </Animated.View>
   );
 }
-
-type WhiteSpaceProps = {
-  size: number;
-  style?: ViewProps['style'];
-};
-
-function WhiteSpace({ size, style }: WhiteSpaceProps) {
-  return <View style={[{ width: size, height: size }, style]} />;
-}

apps/mobile/src/components/GalleryEditor/GalleryEditorSection.tsx

@@ -4,7 +4,6 @@ import { useCallback, useMemo } from 'react';
 import { View } from 'react-native';
 import { AnimatedRef, SharedValue } from 'react-native-reanimated';
 import { graphql, useFragment } from 'react-relay';
-import { DragIcon } from 'src/icons/DragIcon';
 
 import { useGalleryEditorActions } from '~/contexts/GalleryEditor/GalleryEditorContext';
 import { StagedSection } from '~/contexts/GalleryEditor/types';
@@ -71,13 +70,6 @@ export function GalleryEditorSection({
           'border-activeBlue': highlightedSection,
         })}
       >
-        {highlightedSection && (
-          <View className="absolute right-2 top-2 flex-row gap-1 z-10">
-            <View className="h-6 w-7 rounded-sm bg-activeBlue px-1 py-0.5">
-              <DragIcon />
-            </View>
-          </View>
-        )}
         <View className="space-y-1">
           <BaseM classNameOverride="text-base" weight="Bold">
             {section.name}

apps/mobile/src/components/GalleryEditor/SortableRow.tsx

@@ -12,7 +12,6 @@ import Animated, {
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
-  withSpring,
   withTiming,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -247,12 +246,7 @@ export function SortableRow({
       left: 0,
       right: 0,
       zIndex: zIndex,
-      transform: [
-        { translateY: translateY.value ?? 0 },
-        {
-          scale: withSpring(isGestureActive.value ? 1.05 : 1),
-        },
-      ],
+      transform: [{ translateY: translateY.value ?? 0 }],
     };
   }, []);
 

apps/mobile/src/components/GalleryEditor/SortableRowList.tsx

@@ -98,7 +98,13 @@ export function SortableRowList({
             scrollViewRef={scrollViewRef}
             onDragEnd={onDragEnd}
           >
-            <GalleryEditorRow sectionId={sectionId} row={row} queryRef={query} />
+            <GalleryEditorRow
+              sectionId={sectionId}
+              row={row}
+              queryRef={query}
+              scrollContentOffsetY={scrollContentOffsetY}
+              scrollViewRef={scrollViewRef}
+            />
           </SortableRow>
         );
       })}