fix(apps-menu): drag and drop

Author: eythaann

changelog.md

@@ -27,6 +27,7 @@
 - external links being opened on webview instead external browser.
 - apps menu widget freeze on search.
 - change wallpaper shortcuts not working.
+- apps menu drag and drop.
 
 ## [2.5.1]
 

package-lock.json

@@ -29,8 +29,8 @@
   },
   "dependencies": {
     "@dnd-kit/abstract": "^0.3.2",
-    "@dnd-kit/helpers": "^0.3.1",
-    "@dnd-kit/react": "^0.3.1",
+    "@dnd-kit/helpers": "^0.3.2",
+    "@dnd-kit/react": "^0.3.2",
     "@dnd-kit/svelte": "^0.3.2",
     "@m31coding/fuzzy-search": "^2.0.0",
     "@preact/compat": "^18.3.1",

package.json

@@ -3,7 +3,7 @@
   import { invoke, SeelenCommand } from "@seelen-ui/lib";
   import { FileIcon } from "libs/ui/svelte/components/Icon";
   import { globalState } from "../state/mod.svelte";
-  import { createDroppable, createDraggable } from "@dnd-kit/svelte";
+  import { createSortable } from "@dnd-kit/svelte/sortable";
 
   interface Props {
     item: StartMenuItem;
@@ -30,22 +30,23 @@
     globalState.preselectedItem === itemId || (idx === 0 && !globalState.preselectedItem),
   );
 
-  const draggable = $derived(
-    createDraggable({
-      id: itemId,
-      disabled: !isDraggable,
-      type: isInsideFolder ? "grouped-app" : "app",
-    }),
-  );
-
-  const droppable = $derived(
-    createDroppable({
-      id: itemId,
-      disabled: !isDraggable,
-      accept: isInsideFolder ? "grouped-app" : ["folder", "app"],
-      type: isInsideFolder ? "grouped-app" : "app",
-    }),
-  );
+  const sortable = createSortable({
+    get id() {
+      return itemId;
+    },
+    get disabled() {
+      return !isDraggable;
+    },
+    get index() {
+      return idx;
+    },
+    get type() {
+      return isInsideFolder ? "grouped-app" : "app";
+    },
+    get accept() {
+      return isInsideFolder ? "grouped-app" : ["folder", "app"];
+    },
+  });
 
   function handleClick(event: MouseEvent) {
     globalState.showing = false; // inmediate close
@@ -61,13 +62,13 @@
 </script>
 
 <button
-  {@attach draggable.attach}
-  {@attach droppable.attach}
+  {@attach sortable.attach}
+  {@attach sortable.attachHandle}
   data-item-id={itemId}
   class="app"
   class:preselected={isPreselected && globalState.searchQuery}
-  class:is-dragging={draggable.isDragging}
-  class:is-dropping={draggable.isDropping}
+  class:is-dragging={sortable.isDragging}
+  class:is-dropping={sortable.isDropping}
   class:is-drop-target={isActiveDropzone}
   onclick={handleClick}
   oncontextmenu={handleContextMenu}

src/ui/svelte/apps-menu/components/AppItem.svelte

@@ -3,7 +3,7 @@
   import { FileIcon } from "libs/ui/svelte/components/Icon";
   import { globalState } from "../state/mod.svelte";
   import { t } from "../i18n";
-  import { createDraggable, createDroppable } from "@dnd-kit/svelte";
+  import { createSortable } from "@dnd-kit/svelte/sortable";
   import FolderModal from "./FolderModal.svelte";
   import type { StartMenuItem } from "@seelen-ui/lib/types";
 
@@ -35,19 +35,15 @@
     })),
   );
 
-  const draggable = $derived(
-    createDraggable({
-      id: folder.itemId,
-      type: "folder",
-    }),
-  );
-
-  const droppable = $derived(
-    createDroppable({
-      id: folder.itemId,
-      type: "folder",
-    }),
-  );
+  const sortable = createSortable({
+    get id() {
+      return folder.itemId;
+    },
+    get index() {
+      return idx;
+    },
+    type: "folder",
+  });
 
   function openModal() {
     isModalOpen = true;
@@ -59,13 +55,13 @@
 </script>
 
 <button
-  {@attach draggable.attach}
-  {@attach droppable.attach}
+  {@attach sortable.attach}
+  {@attach sortable.attachHandle}
   data-item-id={folder.itemId}
   class="folder"
   class:preselected={isPreselected && globalState.searchQuery}
-  class:is-dragging={draggable.isDragging}
-  class:is-dropping={draggable.isDropping}
+  class:is-dragging={sortable.isDragging}
+  class:is-dropping={sortable.isDropping}
   class:is-drop-target={isActiveDropzone}
   onclick={openModal}
   oncontextmenu={(event) => {