feat: drag and drop skins to reorder (#6357)

* feat: drag and drop skins to reorder

* feat: implement drag to reorder skins

* fix: ci

* remove: backend implementation

* regenerate sqlx

* fix: remove v-if selectable

* feat: remove drag handle

* refactor: pnpm prepr

* cargo fmt

* fix: dragging disable hover, wrong evt for edit skin + remove back of skin hover

---------

Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>

packages/app-lib/src/state/minecraft_skins/mod.rs

@@ -1,3 +1,5 @@
+use std::collections::HashSet;
+
 use futures::{Stream, StreamExt, stream};
 use uuid::{Uuid, fmt::Hyphenated};
 
@@ -22,12 +24,22 @@ pub struct CustomMinecraftSkin {
     ///
     /// If `None`, the skin is saved without a cape.
     pub cape_id: Option<Uuid>,
+    /// The saved skin display order within this player's saved skins.
+    pub display_order: i64,
+}
+
+#[derive(Debug, Clone, Copy)]
+pub enum CustomMinecraftSkinInsertPosition {
+    Top,
+    Bottom,
+    At(i64),
 }
 
 struct CustomMinecraftSkinRow {
     texture_key: String,
     variant: MinecraftSkinVariant,
     cape_id: Option<Hyphenated>,
+    display_order: i64,
 }
 
 impl CustomMinecraftSkin {
@@ -37,6 +49,7 @@ impl CustomMinecraftSkin {
         texture: &[u8],
         variant: MinecraftSkinVariant,
         cape_id: Option<Uuid>,
+        insert_position: CustomMinecraftSkinInsertPosition,
         db: impl sqlx::Acquire<'_, Database = sqlx::Sqlite>,
     ) -> crate::Result<()> {
         let minecraft_user_id = minecraft_user_id.as_hyphenated();
@@ -44,6 +57,51 @@ impl CustomMinecraftSkin {
 
         let mut transaction = db.begin().await?;
 
+        let existing_order = sqlx::query_scalar!(
+            "SELECT display_order FROM custom_minecraft_skins WHERE minecraft_user_uuid = ? AND texture_key = ?",
+            minecraft_user_id,
+            texture_key
+        )
+        .fetch_optional(&mut *transaction)
+        .await?;
+
+        let display_order = match existing_order {
+            Some(display_order) => display_order,
+            None => match insert_position {
+                CustomMinecraftSkinInsertPosition::Top => {
+                    sqlx::query!(
+                        "UPDATE custom_minecraft_skins SET display_order = display_order + 1 WHERE minecraft_user_uuid = ?",
+                        minecraft_user_id
+                    )
+                    .execute(&mut *transaction)
+                    .await?;
+
+                    0
+                }
+                CustomMinecraftSkinInsertPosition::Bottom => {
+                    sqlx::query_scalar!(
+                        "SELECT COALESCE(MAX(display_order) + 1, 0) AS 'display_order!: i64' \
+                        FROM custom_minecraft_skins WHERE minecraft_user_uuid = ?",
+                        minecraft_user_id
+                    )
+                    .fetch_one(&mut *transaction)
+                    .await?
+                }
+                CustomMinecraftSkinInsertPosition::At(display_order) => {
+                    sqlx::query!(
+                        "UPDATE custom_minecraft_skins SET display_order = display_order + 1 \
+                        WHERE minecraft_user_uuid = ? AND display_order >= ?",
+                        minecraft_user_id,
+                        display_order
+                    )
+                    .execute(&mut *transaction)
+                    .await?;
+
+                    display_order
+                }
+            },
+        };
+
         sqlx::query!(
             "DELETE FROM custom_minecraft_skins WHERE minecraft_user_uuid = ? AND texture_key = ?",
             minecraft_user_id,
@@ -57,11 +115,11 @@ impl CustomMinecraftSkin {
 			texture_key, texture
 		)
 		.execute(&mut *transaction)
-		.await?;
+        .await?;
 
         sqlx::query!(
-			"INSERT OR REPLACE INTO custom_minecraft_skins (minecraft_user_uuid, texture_key, variant, cape_id) VALUES (?, ?, ?, ?)",
-			minecraft_user_id, texture_key, variant, cape_id
+			"INSERT INTO custom_minecraft_skins (minecraft_user_uuid, texture_key, variant, cape_id, display_order) VALUES (?, ?, ?, ?, ?)",
+			minecraft_user_id, texture_key, variant, cape_id, display_order
 		)
 		.execute(&mut *transaction)
 		.await?;
@@ -80,7 +138,7 @@ impl CustomMinecraftSkin {
 
         sqlx::query_as!(
             CustomMinecraftSkinRow,
-            "SELECT texture_key, variant AS 'variant: MinecraftSkinVariant', cape_id AS 'cape_id: Hyphenated' \
+            "SELECT texture_key, variant AS 'variant: MinecraftSkinVariant', cape_id AS 'cape_id: Hyphenated', display_order \
             FROM custom_minecraft_skins \
             WHERE minecraft_user_uuid = ? AND texture_key = ?",
             minecraft_user_id,
@@ -93,6 +151,7 @@ impl CustomMinecraftSkin {
                 texture_key: row.texture_key,
                 variant: row.variant,
                 cape_id: row.cape_id.map(Uuid::from),
+                display_order: row.display_order,
             })
         })
         .transpose()
@@ -107,10 +166,10 @@ impl CustomMinecraftSkin {
         let minecraft_user_id = minecraft_user_id.as_hyphenated();
 
         Ok(stream::iter(sqlx::query!(
-            "SELECT texture_key, variant AS 'variant: MinecraftSkinVariant', cape_id AS 'cape_id: Hyphenated' \
+            "SELECT texture_key, variant AS 'variant: MinecraftSkinVariant', cape_id AS 'cape_id: Hyphenated', display_order \
             FROM custom_minecraft_skins \
             WHERE minecraft_user_uuid = ? \
-            ORDER BY rowid ASC \
+            ORDER BY display_order ASC, rowid ASC \
             LIMIT ? OFFSET ?",
             minecraft_user_id, count, offset
         )
@@ -120,6 +179,7 @@ impl CustomMinecraftSkin {
             texture_key: row.texture_key,
             variant: row.variant,
             cape_id: row.cape_id.map(Uuid::from),
+            display_order: row.display_order,
         }))
     }
 
@@ -161,4 +221,62 @@ impl CustomMinecraftSkin {
 
         Ok(())
     }
+
+    pub async fn set_order(
+        minecraft_user_id: Uuid,
+        texture_keys: &[String],
+        db: impl sqlx::Acquire<'_, Database = sqlx::Sqlite>,
+    ) -> crate::Result<()> {
+        let minecraft_user_id = minecraft_user_id.as_hyphenated();
+        let mut transaction = db.begin().await?;
+
+        let existing_rows = sqlx::query!(
+            "SELECT texture_key FROM custom_minecraft_skins \
+            WHERE minecraft_user_uuid = ? \
+            ORDER BY display_order ASC, rowid ASC",
+            minecraft_user_id
+        )
+        .fetch_all(&mut *transaction)
+        .await?;
+
+        let existing_keys = existing_rows
+            .iter()
+            .map(|row| row.texture_key.as_str())
+            .collect::<HashSet<_>>();
+        let mut seen_keys = HashSet::new();
+        let mut ordered_keys = Vec::with_capacity(existing_rows.len());
+
+        for texture_key in texture_keys {
+            if seen_keys.insert(texture_key.as_str())
+                && existing_keys.contains(texture_key.as_str())
+            {
+                ordered_keys.push(texture_key.as_str());
+            }
+        }
+
+        for row in &existing_rows {
+            if seen_keys.insert(row.texture_key.as_str()) {
+                ordered_keys.push(row.texture_key.as_str());
+            }
+        }
+
+        for (display_order, texture_key) in ordered_keys.into_iter().enumerate()
+        {
+            let display_order = display_order as i64;
+
+            sqlx::query!(
+                "UPDATE custom_minecraft_skins SET display_order = ? \
+                WHERE minecraft_user_uuid = ? AND texture_key = ?",
+                display_order,
+                minecraft_user_id,
+                texture_key
+            )
+            .execute(&mut *transaction)
+            .await?;
+        }
+
+        transaction.commit().await?;
+
+        Ok(())
+    }
 }