Refactor code structure and remove redundant changes

src-old/components/profile/SortableRideCreditCard.tsx

@@ -0,0 +1,67 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { GripVertical } from 'lucide-react';
+import { RideCreditCard } from './RideCreditCard';
+import { UserRideCredit } from '@/types/database';
+
+interface SortableRideCreditCardProps {
+  credit: UserRideCredit;
+  position: number;
+  maxPosition: number;
+  viewMode: 'grid' | 'list';
+  onUpdate: (creditId: string, updates: Partial<UserRideCredit>) => void;
+  onDelete: () => void;
+  onReorder: (creditId: string, newPosition: number) => Promise<void>;
+}
+
+export function SortableRideCreditCard({
+  credit,
+  position,
+  maxPosition,
+  viewMode,
+  onUpdate,
+  onDelete,
+  onReorder,
+}: SortableRideCreditCardProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: credit.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} className="flex gap-2 items-start">
+      {/* Drag handle - external to card */}
+      <div
+        {...attributes}
+        {...listeners}
+        className="flex-shrink-0 cursor-grab active:cursor-grabbing p-2 rounded-md bg-background border hover:bg-accent transition-colors self-stretch flex items-center"
+      >
+        <GripVertical className="w-4 h-4 text-muted-foreground" />
+      </div>
+      
+      {/* Card takes remaining space */}
+      <div className="flex-1 min-w-0">
+        <RideCreditCard
+          credit={credit}
+          position={position}
+          maxPosition={maxPosition}
+          viewMode={viewMode}
+          isEditMode={true}
+          onUpdate={onUpdate}
+          onDelete={onDelete}
+          onReorder={onReorder}
+        />
+      </div>
+    </div>
+  );
+}