Room list: add fade effect to room list item being dragged (#33696)

* feat: tweak opacity of dragged room in room list

* feat: put test as primary when room item is dragged

* test: update screenshots

packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.module.css

@@ -72,7 +72,12 @@
 
 .dragging {
     outline: 1px solid var(--cpd-color-border-interactive-hovered);
-    background-color: color-mix(in srgb, var(--cpd-color-bg-action-tertiary-hovered) 90%, transparent);
+    background-color: color-mix(in srgb, var(--cpd-color-bg-action-tertiary-hovered) 95%, transparent);
+    color: var(--cpd-color-text-primary);
+}
+
+.dragSource .container {
+    opacity: 0.6;
 }
 
 .content {

packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.tsx

@@ -150,6 +150,8 @@ export interface RoomListItemViewProps extends Omit<React.HTMLAttributes<HTMLBut
     isLastItem: boolean;
     /** Function to render the room avatar */
     renderAvatar: (room: Room) => ReactNode;
+    /** Whether this item is the source of an active drag operation */
+    isDragSource?: boolean;
     ref?: Ref<Element>;
 }
 
@@ -165,6 +167,7 @@ export const RoomListItemView = memo(function RoomListItemView({
     isFirstItem,
     isLastItem,
     renderAvatar,
+    isDragSource = false,
     ref,
     ...props
 }: RoomListItemViewProps): JSX.Element {
@@ -191,6 +194,7 @@ export const RoomListItemView = memo(function RoomListItemView({
                     [styles.bold]: item.isBold,
                     [styles.firstItem]: isFirstItem,
                     [styles.lastItem]: isLastItem,
+                    [styles.dragSource]: isDragSource,
                     mx_RoomListItemView_selected: isSelected,
                 })}
                 gap="var(--cpd-space-3x)"

packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemWrapper.tsx

@@ -55,12 +55,16 @@ export const RoomListItemWrapper = memo(function RoomListItemWrapper({
  */
 function DraggableWrapper(props: RoomListItemViewProps): JSX.Element {
     const item = useViewModel(props.vm);
-    const { ref: draggableRef, handleRef } = useDraggable({
+    const {
+        ref: draggableRef,
+        handleRef,
+        isDragSource,
+    } = useDraggable({
         id: item.id,
         // We clone the item in the dnd overlay to avoid putting a hole in the list
         plugins: [Feedback.configure({ feedback: "clone" })],
         modifiers: [RestrictToVerticalAxis],
     });
     const dndRef = useMergeRefs([draggableRef, handleRef]);
-    return <RoomListItemView {...props} ref={dndRef} />;
+    return <RoomListItemView {...props} ref={dndRef} isDragSource={isDragSource} />;
 }