From e2851e79372aeadcba6763a67b2f717b4a719243 Mon Sep 17 00:00:00 2001
From: Aspasia Plangesi <t8230122@aueb.gr>
Date: Mon, 18 May 2026 19:13:57 +0200
Subject: [PATCH] added custom to-read order option

added backend methods and changes

changed toread ui and added sortablejs

removed personal use comments

linting and test of method
---
 src/jelu-ui/package-lock.json                 | 386 ++++--------------
 src/jelu-ui/package.json                      |   2 +
 src/jelu-ui/src/components/ToReadList.vue     | 360 ++++++++--------
 src/jelu-ui/src/locales/en.json               |   4 +-
 src/jelu-ui/src/services/DataService.ts       |  14 +
 .../jelu/controllers/BooksController.kt       |   8 +
 .../github/bayang/jelu/dao/BookRepository.kt  |  13 +
 .../github/bayang/jelu/dao/UserBookTable.kt   |   3 +
 .../io/github/bayang/jelu/dto/UserBookDto.kt  |   2 +
 .../github/bayang/jelu/service/BookService.kt |   8 +
 src/main/resources/liquibase.xml              |   5 +
 .../bayang/jelu/service/BookServiceTest.kt    |  34 ++
 12 files changed, 344 insertions(+), 495 deletions(-)

diff --git a/src/jelu-ui/package-lock.json b/src/jelu-ui/package-lock.json
index 4c1b2a6d8..97dd9d47c 100644
--- a/src/jelu-ui/package-lock.json
+++ b/src/jelu-ui/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "jelu-ui",
-  "version": "0.77.1",
+  "version": "0.82.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "jelu-ui",
-      "version": "0.77.1",
+      "version": "0.82.0",
       "dependencies": {
         "@kangc/v-md-editor": "2.3.18",
         "@mdi/font": "7.4.47",
@@ -22,6 +22,7 @@
         "daisyui": "5.0.35",
         "dayjs": "1.11.19",
         "floating-vue": "5.2.2",
+        "sortablejs": "^1.15.7",
         "sweetalert2": "11.26.10",
         "theme-change": "2.5.0",
         "vue": "3.5.26",
@@ -42,6 +43,7 @@
         "@tailwindcss/typography": "0.5.19",
         "@tailwindcss/vite": "4.1.11",
         "@types/qs": "6.14.0",
+        "@types/sortablejs": "^1.15.9",
         "@vitejs/plugin-vue": "6.0.3",
         "autoprefixer": "10.4.14",
         "eslint": "9.39.2",
@@ -3617,6 +3619,66 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.4.3",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.0.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.4.3",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.0.2",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
+      "version": "0.2.11",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@tybys/wasm-util": "^0.9.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": {
+      "version": "0.9.0",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": {
+      "version": "2.8.0",
+      "dev": true,
+      "inBundle": true,
+      "license": "0BSD",
+      "optional": true
+    },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.11.tgz",
@@ -3796,6 +3858,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/sortablejs": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.9.tgz",
+      "integrity": "sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -3815,33 +3884,6 @@
       "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
       "license": "MIT"
     },
-    "node_modules/@typescript-eslint/parser": {
-      "version": "8.50.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.50.0.tgz",
-      "integrity": "sha512-6/cmF2piao+f6wSxUsJLZjck7OQsYyRtcOZS02k7XINSNlz93v6emM8WutDQSXnroG2xwYlEVHJI+cPA7CPM3Q==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@typescript-eslint/scope-manager": "8.50.0",
-        "@typescript-eslint/types": "8.50.0",
-        "@typescript-eslint/typescript-estree": "8.50.0",
-        "@typescript-eslint/visitor-keys": "8.50.0",
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <6.0.0"
-      }
-    },
     "node_modules/@typescript-eslint/project-service": {
       "version": "8.50.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.50.0.tgz",
@@ -8605,280 +8647,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/lightningcss": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
-      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "detect-libc": "^2.0.3"
-      },
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      },
-      "optionalDependencies": {
-        "lightningcss-android-arm64": "1.30.2",
-        "lightningcss-darwin-arm64": "1.30.2",
-        "lightningcss-darwin-x64": "1.30.2",
-        "lightningcss-freebsd-x64": "1.30.2",
-        "lightningcss-linux-arm-gnueabihf": "1.30.2",
-        "lightningcss-linux-arm64-gnu": "1.30.2",
-        "lightningcss-linux-arm64-musl": "1.30.2",
-        "lightningcss-linux-x64-gnu": "1.30.2",
-        "lightningcss-linux-x64-musl": "1.30.2",
-        "lightningcss-win32-arm64-msvc": "1.30.2",
-        "lightningcss-win32-x64-msvc": "1.30.2"
-      }
-    },
-    "node_modules/lightningcss-android-arm64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
-      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
-      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-darwin-x64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
-      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
-      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
-      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
-      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
-      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
-      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
-      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
-      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
-      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
     "node_modules/linkify-it": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
@@ -11087,9 +10855,9 @@
       }
     },
     "node_modules/sortablejs": {
-      "version": "1.14.0",
-      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
-      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==",
+      "version": "1.15.7",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.7.tgz",
+      "integrity": "sha512-Kk8wLQPlS+yi1ZEf48a4+fzHa4yxjC30M/Sr2AnQu+f/MPwvvX9XjZ6OWejiz8crBsLwSq8GHqaxaET7u6ux0A==",
       "license": "MIT"
     },
     "node_modules/source-map": {
@@ -12818,6 +12586,12 @@
         "vue": "^3.0.1"
       }
     },
+    "node_modules/vuedraggable/node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==",
+      "license": "MIT"
+    },
     "node_modules/vuejs-sidebar-menu": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/vuejs-sidebar-menu/-/vuejs-sidebar-menu-1.0.0.tgz",
diff --git a/src/jelu-ui/package.json b/src/jelu-ui/package.json
index 94d61a888..bde9267de 100644
--- a/src/jelu-ui/package.json
+++ b/src/jelu-ui/package.json
@@ -24,6 +24,7 @@
     "daisyui": "5.0.35",
     "dayjs": "1.11.19",
     "floating-vue": "5.2.2",
+    "sortablejs": "^1.15.7",
     "sweetalert2": "11.26.10",
     "theme-change": "2.5.0",
     "vue": "3.5.26",
@@ -44,6 +45,7 @@
     "@tailwindcss/typography": "0.5.19",
     "@tailwindcss/vite": "4.1.11",
     "@types/qs": "6.14.0",
+    "@types/sortablejs": "^1.15.9",
     "@vitejs/plugin-vue": "6.0.3",
     "autoprefixer": "10.4.14",
     "eslint": "9.39.2",
diff --git a/src/jelu-ui/src/components/ToReadList.vue b/src/jelu-ui/src/components/ToReadList.vue
index 03b6bcf4b..ff32d80a1 100644
--- a/src/jelu-ui/src/components/ToReadList.vue
+++ b/src/jelu-ui/src/components/ToReadList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useThrottleFn, useTitle } from '@vueuse/core';
 import { useRouteQuery } from '@vueuse/router';
-import { computed, Ref, ref, watch, onMounted } from 'vue';
+import { computed, Ref, ref, watch, onMounted, nextTick } from 'vue'; // added nextTick
 import { useI18n } from 'vue-i18n';
 import usePagination from '../composables/pagination';
 import useSort from '../composables/sort';
@@ -12,11 +12,12 @@ import dataService from "../services/DataService";
 import BookCard from "./BookCard.vue";
 import SortFilterBarVue from "./SortFilterBar.vue";
 import useTypography from '../composables/typography';
+import Sortable from 'sortablejs'; // NEW: import SortableJS
 
 const { t } = useI18n({
-      inheritLocale: true,
-      useScope: 'global'
-    })
+  inheritLocale: true,
+  useScope: 'global'
+})
 
 useTitle('Jelu | ' + t('nav.to_read'))
 
@@ -52,29 +53,43 @@ const ownedAsBool = computed(() => {
   } else {
     return false
   }
-  }
-)
+})
 
 const getToReadIsLoading: Ref<boolean> = ref(false)
 
+// NEW: custom sort mode state
+const customSortMode = ref(false)
+const isSavingSortOrder = ref(false)
+const gridRef = ref<HTMLElement | null>(null) // NEW: ref to the grid DOM element
+let sortableInstance: Sortable | null = null  // NEW: holds the SortableJS instance
+
 const getToRead = async () => {
   getToReadIsLoading.value = true
   try {
+    // NEW: in custom sort mode, fetch all books unpaginated and sort by sortOrder
+    const pageSize = customSortMode.value ? 10000 : perPage.value
+    const sortParam = customSortMode.value ? 'sortOrder,asc' : sortQuery.value
+
     const res = await dataService.findUserBookByCriteria(
       eventTypes.value, null, userId.value,
-    true, ownedAsBool.value, null,
-    pageAsNumber.value - 1, perPage.value, sortQuery.value)
+      true, ownedAsBool.value, null,
+      0, pageSize, sortParam)
     total.value = res.totalElements
     books.value = res.content
-    if (! res.empty) {
-      page.value =  (res.number + 1).toString(10)
-    }
-    else {
+    if (!res.empty) {
+      page.value = (res.number + 1).toString(10)
+    } else {
       page.value = "1"
     }
     getToReadIsLoading.value = false
     updatePageLoading(false)
     removeIds()
+
+    // NEW: after books load in custom sort mode, initialise SortableJS on the grid
+    if (customSortMode.value) {
+      await nextTick() // wait for Vue to render the updated book list
+      initSortable()
+    }
   } catch (error) {
     console.log("failed get books : " + error);
     getToReadIsLoading.value = false
@@ -88,13 +103,74 @@ const removeIds = () => {
   }
 }
 
-// --- LocalStorage keys for ToReadList ---
+// NEW: initialise SortableJS on the grid element
+const initSortable = () => {
+  if (sortableInstance) {
+    sortableInstance.destroy() // destroy any previous instance before creating a new one
+    sortableInstance = null
+  }
+  if (gridRef.value) {
+    sortableInstance = Sortable.create(gridRef.value, {
+      animation: 150,           // smooth animation when dragging
+      ghostClass: 'opacity-30', // tailwind class to dim the dragged item's placeholder
+      onEnd(evt) {
+        // when drag ends, reorder the books array to match the new DOM order
+        if (evt.oldIndex !== undefined && evt.newIndex !== undefined) {
+          const moved = books.value.splice(evt.oldIndex, 1)[0]
+          books.value.splice(evt.newIndex, 0, moved)
+        }
+      }
+    })
+  }
+}
+
+// NEW: destroy SortableJS when leaving custom sort mode
+const destroySortable = () => {
+  if (sortableInstance) {
+    sortableInstance.destroy()
+    sortableInstance = null
+  }
+}
+
+// NEW: toggle custom sort mode on/off
+const toggleCustomSort = async () => {
+  customSortMode.value = !customSortMode.value
+  if (customSortMode.value) {
+    // entering custom sort mode: fetch all books sorted by saved sortOrder
+    await getToRead()
+  } else {
+    // leaving without saving: destroy sortable and reload normal paginated view
+    destroySortable()
+    await getToRead()
+  }
+}
+
+//save the current order to the backend
+const saveCustomSortOrder = async () => {
+  isSavingSortOrder.value = true
+  try {
+    const sortOrders: Record<string, number> = {}
+    books.value.forEach((book, index) => {
+      if (book.id) {
+        sortOrders[book.id] = index
+      }
+    })
+    await dataService.updateUserBooksSortOrder(sortOrders)
+    customSortMode.value = false
+    destroySortable()
+    await getToRead()
+  } catch (error) {
+    console.log("failed to save sort order: " + error)
+  } finally {
+    isSavingSortOrder.value = false
+  }
+}
+
 const SORT_BY_KEY = "toReadSortBy";
 const SORT_ORDER_KEY = "toReadSortOrder";
 const EVENT_TYPES_KEY = "toReadEventTypes";
 const OWNED_KEY = "toReadOwned";
 
-// Restore saved settings
 onMounted(() => {
   const savedSortBy = localStorage.getItem(SORT_BY_KEY);
   const savedSortOrder = localStorage.getItem(SORT_ORDER_KEY);
@@ -112,7 +188,6 @@ onMounted(() => {
   if (savedOwned) owned.value = savedOwned;
 });
 
-// Persist changes
 watch(sortBy, (newVal) => {
   localStorage.setItem(SORT_BY_KEY, newVal);
 });
@@ -126,15 +201,12 @@ watch(owned, (newVal) => {
   localStorage.setItem(OWNED_KEY, newVal ?? "null");
 });
 
-
-
-// watches set above sometimes called twice
-// so getBooks was sometimes called twice at the same instant
 const throttledGetToRead = useThrottleFn(() => {
   getToRead()
 }, 100, false)
 
 watch([page, eventTypes, sortQuery, owned], (newVal, oldVal) => {
+  if (customSortMode.value) return //ignore filter/sort changes during custom sort
   console.log("all " + newVal + " " + oldVal)
   if (newVal !== oldVal) {
     throttledGetToRead()
@@ -152,7 +224,7 @@ const message = computed(() => {
   } else {
     return t('nav.to_read')
   }
-} )
+})
 
 getToRead()
 
@@ -169,278 +241,190 @@ const { typographyClasses } = useTypography()
     <template #sort-fields>
       <label class="label">{{ t('sorting.sort_by') }} : </label>
       <div class="field">
-        <input
-          v-model="sortBy"
-          type="radio"
-          name="radio-20"
-          class="radio radio-primary my-2"
-          value="creationDate"
-        >
+        <input v-model="sortBy" type="radio" name="radio-20" class="radio radio-primary my-2" value="creationDate">
         <span class="label-text">{{ t('sorting.date_added_to_list') }}</span>
       </div>
       <div class="field">
-        <input
-          v-model="sortBy"
-          type="radio"
-          name="radio-20"
-          class="radio radio-primary my-2"
-          value="lastReadingEventDate"
-        >
+        <input v-model="sortBy" type="radio" name="radio-20" class="radio radio-primary my-2" value="lastReadingEventDate">
         <span class="label-text">{{ t('sorting.last_reading_event_date') }}</span>
       </div>
       <div class="field">
-        <input
-          v-model="sortBy"
-          type="radio"
-          name="radio-20"
-          class="radio radio-primary mb-2"
-          value="title"
-        >
+        <input v-model="sortBy" type="radio" name="radio-20" class="radio radio-primary mb-2" value="title">
         <span class="label-text">{{ t('sorting.title') }}</span>
       </div>
       <div class="field">
-        <input
-          v-model="sortBy"
-          type="radio"
-          name="radio-20"
-          class="radio radio-primary mb-2"
-          value="publisher"
-        >
+        <input v-model="sortBy" type="radio" name="radio-20" class="radio radio-primary mb-2" value="publisher">
         <span class="label-text">{{ t('sorting.publisher') }}</span>
       </div>
       <div class="field">
-        <input
-          v-model="sortBy"
-          type="radio"
-          name="radio-20"
-          class="radio radio-primary mb-2"
-          value="pageCount"
-        >
+        <input v-model="sortBy" type="radio" name="radio-20" class="radio radio-primary mb-2" value="pageCount">
         <span class="label-text">{{ t('sorting.page_count') }}</span>
       </div>
       <div class="field">
-        <input
-          v-model="sortBy"
-          type="radio"
-          name="radio-20"
-          class="radio radio-primary mb-2"
-          value="usrAvgRating"
-        >
+        <input v-model="sortBy" type="radio" name="radio-20" class="radio radio-primary mb-2" value="usrAvgRating">
         <span class="label-text">{{ t('sorting.user_avg_rating') }}</span>
       </div>
       <div class="field">
-        <input
-          v-model="sortBy"
-          type="radio"
-          name="radio-20"
-          class="radio radio-primary mb-2"
-          value="avgRating"
-        >
+        <input v-model="sortBy" type="radio" name="radio-20" class="radio radio-primary mb-2" value="avgRating">
         <span class="label-text">{{ t('sorting.avg_rating') }}</span>
         <div class="field">
-          <input
-            v-model="sortBy"
-            type="radio"
-            name="radio-20"
-            class="radio radio-primary"
-            value="random"
-          >
+          <input v-model="sortBy" type="radio" name="radio-20" class="radio radio-primary" value="random">
           <span class="label-text">{{ t('sorting.random') }}</span>
         </div>
       </div>
+      <div class="field">
+        <input v-model="sortBy" type="radio" name="radio-20" class="radio radio-primary mb-2" value="sortOrder">
+        <span class="label-text">{{ t('sorting.custom_order') }}</span>
+      </div>
     </template>
     <template #filters>
       <div class="field flex flex-col gap-1 capitalize">
         <label class="label">{{ t('reading_events.last_event_type') }} : </label>
         <label class="label">
-          <input
-            v-model="eventTypes"
-            type="checkbox"
-            class="checkbox checkbox-primary"
-            value="FINISHED"
-          >
+          <input v-model="eventTypes" type="checkbox" class="checkbox checkbox-primary" value="FINISHED">
           {{ t('reading_events.finished') }}
         </label>
         <label class="label">
-          <input
-            v-model="eventTypes"
-            type="checkbox"
-            class="checkbox checkbox-primary"
-            value="CURRENTLY_READING"
-          >
+          <input v-model="eventTypes" type="checkbox" class="checkbox checkbox-primary" value="CURRENTLY_READING">
           {{ t('reading_events.currently_reading') }}
         </label>
         <label class="label">
-          <input
-            v-model="eventTypes"
-            type="checkbox"
-            class="checkbox checkbox-primary"
-            value="DROPPED"
-          >
+          <input v-model="eventTypes" type="checkbox" class="checkbox checkbox-primary" value="DROPPED">
           {{ t('reading_events.dropped') }}
         </label>
       </div>
       <div class="field flex flex-col items-start">
         <label class="label">{{ t('filtering.owned') }} : </label>
         <div class="field">
-          <input
-            v-model="owned"
-            type="radio"
-            name="radio-31"
-            class="radio radio-primary my-2"
-            value="null"
-          >
+          <input v-model="owned" type="radio" name="radio-31" class="radio radio-primary my-2" value="null">
           <span class="label-text">{{ t('filtering.unset') }}</span>
         </div>
         <div class="field">
-          <input
-            v-model="owned"
-            type="radio"
-            name="radio-31"
-            class="radio radio-primary mb-2"
-            value="false"
-          >
+          <input v-model="owned" type="radio" name="radio-31" class="radio radio-primary mb-2" value="false">
           <span class="label-text">{{ t('labels.false') }}</span>
         </div>
         <div class="field">
-          <input
-            v-model="owned"
-            type="radio"
-            name="radio-31"
-            class="radio radio-primary"
-            value="true"
-          >
+          <input v-model="owned" type="radio" name="radio-31" class="radio radio-primary" value="true">
           <span class="label-text">{{ t('labels.true') }}</span>
         </div>
       </div>
     </template>
   </sort-filter-bar-vue>
+
   <div class="flex flex-row justify-between mb-2">
     <div class="flex flex-row gap-1 order-last sm:order-first">
-      <button
-        class="btn btn-outline btn-success"
-        @click="open = !open"
-      >
-        <span class="icon text-lg">
-          <i class="mdi mdi-filter-variant" />
-        </span>
+      <button class="btn btn-outline btn-success" @click="open = !open">
+        <span class="icon text-lg"><i class="mdi mdi-filter-variant" /></span>
       </button>
-      <button
-        v-tooltip="t('bulk.toggle')"
-        class="btn btn-outline btn-primary"
-        @click="showSelect = !showSelect"
-      >
-        <span class="icon text-lg">
-          <i class="mdi mdi-pencil" />
-        </span>
+      <button v-tooltip="t('bulk.toggle')" class="btn btn-outline btn-primary" @click="showSelect = !showSelect">
+        <span class="icon text-lg"><i class="mdi mdi-pencil" /></span>
+      </button>
+      <button v-if="showSelect" v-tooltip="t('bulk.select_all')" class="btn btn-outline btn-accent" @click="selectAll = !selectAll">
+        <span class="icon text-lg"><i class="mdi mdi-checkbox-multiple-marked" /></span>
+      </button>
+      <button v-if="showSelect && checkedCards.length > 0" v-tooltip="t('bulk.edit')" class="btn btn-outline btn-info" @click="toggleEdit(checkedCards)">
+        <span class="icon text-lg"><i class="mdi mdi-book-edit" /></span>
       </button>
+
       <button
-        v-if="showSelect"
-        v-tooltip="t('bulk.select_all')"
-        class="btn btn-outline btn-accent"
-        @click="selectAll = !selectAll"
+        v-if="userId == null"
+        v-tooltip="customSortMode ? t('sorting.exit_custom_sort') : t('sorting.custom_sort')"
+        class="btn btn-outline"
+        :class="customSortMode ? 'btn-warning' : 'btn-secondary'"
+        @click="toggleCustomSort"
       >
-        <span class="icon text-lg">
-          <i class="mdi mdi-checkbox-multiple-marked" />
-        </span>
+        <span class="icon text-lg"><i class="mdi mdi-sort" /></span>
       </button>
+
       <button
-        v-if="showSelect && checkedCards.length > 0"
-        v-tooltip="t('bulk.edit')"
-        class="btn btn-outline btn-info"
-        @click="toggleEdit(checkedCards)"
+        v-if="customSortMode"
+        v-tooltip="t('sorting.save_custom_sort')"
+        class="btn btn-success"
+        :class="{ loading: isSavingSortOrder }"
+        :disabled="isSavingSortOrder"
+        @click="saveCustomSortOrder"
       >
-        <span class="icon text-lg">
-          <i class="mdi mdi-book-edit" />
-        </span>
+        <span class="icon text-lg"><i class="mdi mdi-content-save" /></span>
       </button>
     </div>
-    <h2
-      class="text-3xl capitalize"
-      :class="typographyClasses"
-    >
+
+    <h2 class="text-3xl capitalize" :class="typographyClasses">
       {{ message }} :
     </h2>
     <div />
   </div>
+
+  <div v-if="customSortMode" class="alert alert-info mb-3">
+    <span class="icon"><i class="mdi mdi-information-outline" /></span>
+    <span>{{ t('sorting.drag_to_reorder') }}</span>
+  </div>
+
   <o-pagination
-    v-if="books.length > 0 && pageCount > 1"
+    v-if="!customSortMode && books.length > 0 && pageCount > 1"
     v-model:current="pageAsNumber"
     :total="total"
     order="centered"
     :per-page="perPage"
     @change="updatePage"
   />
+
   <div
     v-if="books.length > 0"
+    ref="gridRef"
     class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-0 my-3"
   >
     <div
       v-for="book in books"
       :key="book.id"
       class="books-grid-item m-2"
+      :class="{ 'cursor-grab': customSortMode }"
     >
       <book-card
         :book="book"
         :force-select="selectAll"
         :public="false"
-        :show-select="showSelect"
-        :propose-add="userId == null"
+        :show-select="showSelect && !customSortMode"
+        :propose-add="userId == null && !customSortMode"
         class="h-full"
+        :class="{ 'pointer-events-none': customSortMode }"
         @update:modal-closed="modalClosed"
         @update:checked="cardChecked"
       />
     </div>
   </div>
-  <div
-    v-else-if="getToReadIsLoading"
-    class="flex flex-row justify-center justify-items-center gap-3"
-  >
-    <o-skeleton
-      class="justify-self-center basis-36"
-      height="250px"
-      :animated="true"
-    />
-    <o-skeleton
-      class="justify-self-center basis-36"
-      height="250px"
-      :animated="true"
-    />
-    <o-skeleton
-      class="justify-self-center basis-36"
-      height="250px"
-      :animated="true"
-    />
+
+  <div v-else-if="getToReadIsLoading" class="flex flex-row justify-center justify-items-center gap-3">
+    <o-skeleton class="justify-self-center basis-36" height="250px" :animated="true" />
+    <o-skeleton class="justify-self-center basis-36" height="250px" :animated="true" />
+    <o-skeleton class="justify-self-center basis-36" height="250px" :animated="true" />
   </div>
+
   <div v-else>
-    <h2
-      class="text-3xl"
-      :class="typographyClasses"
-    >
-      {{ t('labels.nothing_to_read') }}
-    </h2>
-    <span class="icon">
-      <i class="mdi mdi-book-open-page-variant-outline mdi-48px" />
-    </span>
+    <h2 class="text-3xl" :class="typographyClasses">{{ t('labels.nothing_to_read') }}</h2>
+    <span class="icon"><i class="mdi mdi-book-open-page-variant-outline mdi-48px" /></span>
   </div>
+
   <o-pagination
-    v-if="books.length > 0"
+    v-if="!customSortMode && books.length > 0"
     v-model:current="pageAsNumber"
     :total="total"
     order="centered"
     :per-page="perPage"
     @change="updatePage"
   />
-  <o-loading
-    v-model:active="getPageIsLoading"
-    :full-page="true"
-    :cancelable="true"
-  />
+
+  <o-loading v-model:active="getPageIsLoading" :full-page="true" :cancelable="true" />
 </template>
 
 <style scoped>
-
 label.label {
-    font-weight: bold;
+  font-weight: bold;
+}
+
+.sortable-ghost {
+  opacity: 0.3;
+}
+.sortable-drag {
+  cursor: grabbing !important;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/jelu-ui/src/locales/en.json b/src/jelu-ui/src/locales/en.json
index 267019e2e..1b0689e70 100644
--- a/src/jelu-ui/src/locales/en.json
+++ b/src/jelu-ui/src/locales/en.json
@@ -179,7 +179,9 @@
         "page_count" : "Page count",
         "user_avg_rating" : "my average rating",
         "avg_rating" : "average rating",
-        "name": "name"
+        "name": "name",
+        "drag_to_reorder" : "drag to reorder",
+        "custom_order" : "Custom order"
     },
     "reading_events" : {
         "finished" : "finished",
diff --git a/src/jelu-ui/src/services/DataService.ts b/src/jelu-ui/src/services/DataService.ts
index db4c11079..51c9125eb 100644
--- a/src/jelu-ui/src/services/DataService.ts
+++ b/src/jelu-ui/src/services/DataService.ts
@@ -2190,6 +2190,20 @@ class DataService {
     }
   }
 
+  updateUserBooksSortOrder = async (sortOrders: Record<string, number>): Promise<void> => {
+    try {
+      await this.apiClient.put(`${this.API_USERBOOK}/sortorder`, sortOrders)
+      console.log("updated userbooks sort order")
+    }
+    catch (error) {
+      if (axios.isAxiosError(error) && error.response) {
+        console.log("error axios " + error.response.status + " " + error.response.data.error)
+      }
+      console.log("error updating sort order " + (error as AxiosError).code)
+      throw new Error("error updating sort order " + error)
+    }
+  }
+
 }
 
 export default new DataService()
diff --git a/src/main/kotlin/io/github/bayang/jelu/controllers/BooksController.kt b/src/main/kotlin/io/github/bayang/jelu/controllers/BooksController.kt
index 76fa6c18a..33999af0b 100644
--- a/src/main/kotlin/io/github/bayang/jelu/controllers/BooksController.kt
+++ b/src/main/kotlin/io/github/bayang/jelu/controllers/BooksController.kt
@@ -421,4 +421,12 @@ class BooksController(
         assertIsJeluUser(principal.principal)
         return repository.stats((principal.principal as JeluUser).user.id!!)
     }
+
+    @PutMapping(path = ["/userbooks/sortorder"], consumes = [MediaType.APPLICATION_JSON_VALUE])
+    fun updateUserBooksCustomToReadOrder(
+        @RequestBody sortOrders: Map<UUID, Int>,
+    ): ResponseEntity<Unit> {
+        repository.updateCustomToRead(sortOrders)
+        return ResponseEntity.noContent().build()
+    }
 }
diff --git a/src/main/kotlin/io/github/bayang/jelu/dao/BookRepository.kt b/src/main/kotlin/io/github/bayang/jelu/dao/BookRepository.kt
index de2558675..e7b1be80b 100644
--- a/src/main/kotlin/io/github/bayang/jelu/dao/BookRepository.kt
+++ b/src/main/kotlin/io/github/bayang/jelu/dao/BookRepository.kt
@@ -1915,4 +1915,17 @@ class BookRepository(
             priceInCents = totalUserBooksPrice,
         )
     }
+
+    // method to update to-read list
+    fun updateCustomToRead(
+        userBookId: UUID,
+        order: Int,
+    ) {
+        UserBookTable.update(
+            where = { UserBookTable.id eq userBookId },
+        ) {
+            it[UserBookTable.customToReadOrder] = order
+            it[UserBookTable.modificationDate] = nowInstant()
+        }
+    }
 }
diff --git a/src/main/kotlin/io/github/bayang/jelu/dao/UserBookTable.kt b/src/main/kotlin/io/github/bayang/jelu/dao/UserBookTable.kt
index 76fb85ed3..889796ba8 100644
--- a/src/main/kotlin/io/github/bayang/jelu/dao/UserBookTable.kt
+++ b/src/main/kotlin/io/github/bayang/jelu/dao/UserBookTable.kt
@@ -30,6 +30,7 @@ object UserBookTable : UUIDTable("user_book") {
     val currentPageNumber: Column<Int?> = integer(name = "current_page_number").nullable()
     val borrowed: Column<Boolean?> = bool("is_borrowed").nullable()
     val priceInCents: Column<Long?> = long("price_in_cents").nullable()
+    val customToReadOrder: Column<Int?> = integer(name = "custom_toread").nullable()
 }
 
 class UserBook(
@@ -53,6 +54,7 @@ class UserBook(
     var avgRating: Double? = null
     var userAvgRating: Double? = null
     var priceInCents by UserBookTable.priceInCents
+    var customToReadOrder by UserBookTable.customToReadOrder
 
     fun toUserBookDto(): UserBookDto =
         UserBookDto(
@@ -89,6 +91,7 @@ class UserBook(
             borrowed = this.borrowed,
             readingEvents = this.readingEvents.map { it.toReadingEventWithoutUserBookDto() },
             price = centsToDouble(this.priceInCents),
+            customToReadOrder = this.customToReadOrder,
         )
 
     fun toUserBookLightWithoutBookDto(): UserBookLightWithoutBookDto =
diff --git a/src/main/kotlin/io/github/bayang/jelu/dto/UserBookDto.kt b/src/main/kotlin/io/github/bayang/jelu/dto/UserBookDto.kt
index 4b0c74e62..07c590c7f 100644
--- a/src/main/kotlin/io/github/bayang/jelu/dto/UserBookDto.kt
+++ b/src/main/kotlin/io/github/bayang/jelu/dto/UserBookDto.kt
@@ -37,6 +37,7 @@ data class UserBookLightDto(
     val currentPageNumber: Int?,
     val borrowed: Boolean?,
     val price: Double?,
+    val customToReadOrder: Int?, // aspa
 )
 
 data class UserBookLightWithoutBookDto(
@@ -111,6 +112,7 @@ data class UserBookUpdateDto(
     val currentPageNumber: Int?,
     val borrowed: Boolean?,
     val price: Double?,
+    val customToReadOrder: Int? = null,
 )
 
 data class UserBookBulkUpdateDto(
diff --git a/src/main/kotlin/io/github/bayang/jelu/service/BookService.kt b/src/main/kotlin/io/github/bayang/jelu/service/BookService.kt
index a81dd27c2..067eb4df8 100644
--- a/src/main/kotlin/io/github/bayang/jelu/service/BookService.kt
+++ b/src/main/kotlin/io/github/bayang/jelu/service/BookService.kt
@@ -807,4 +807,12 @@ class BookService(
 
     @Transactional
     fun stats(userId: UUID): TotalsStatsDto = bookRepository.stats(userId).toTotalsStatsDto()
+
+    // method to update custom to-read list order
+    @Transactional
+    fun updateCustomToRead(sortOrders: Map<UUID, Int>) {
+        sortOrders.forEach { (userBookId, order) ->
+            bookRepository.updateCustomToRead(userBookId, order)
+        }
+    }
 }
diff --git a/src/main/resources/liquibase.xml b/src/main/resources/liquibase.xml
index 26b39cf1b..0ffa66f6f 100644
--- a/src/main/resources/liquibase.xml
+++ b/src/main/resources/liquibase.xml
@@ -707,4 +707,9 @@
             <column name="user_id" />
         </createIndex>
     </changeSet>
+    <changeSet id="add_custom_toread_order" author="aspa">
+    <sql>
+        ALTER TABLE user_book ADD custom_toread INTEGER;
+    </sql>
+    </changeSet>
 </databaseChangeLog>
diff --git a/src/test/kotlin/io/github/bayang/jelu/service/BookServiceTest.kt b/src/test/kotlin/io/github/bayang/jelu/service/BookServiceTest.kt
index d41f87b00..ef15252e2 100644
--- a/src/test/kotlin/io/github/bayang/jelu/service/BookServiceTest.kt
+++ b/src/test/kotlin/io/github/bayang/jelu/service/BookServiceTest.kt
@@ -3117,4 +3117,38 @@ class BookServiceTest(
         val userDetail = userService.loadUserByUsername("testuser2")
         return (userDetail as JeluUser).user
     }
+
+    @Test
+    fun testUpdateCustomToReadOrder() {
+        val ub1 =
+            bookService.save(
+                createUserBookDto(bookDto(title = "title1"), null, null, toRead = true),
+                user(),
+                null,
+            )
+        val ub2 =
+            bookService.save(
+                createUserBookDto(bookDto(title = "title2"), null, null, toRead = true),
+                user(),
+                null,
+            )
+        val ub3 =
+            bookService.save(
+                createUserBookDto(bookDto(title = "title3"), null, null, toRead = true),
+                user(),
+                null,
+            )
+
+        bookService.updateCustomToRead(
+            mapOf(
+                ub3.id!! to 0,
+                ub1.id!! to 1,
+                ub2.id!! to 2,
+            ),
+        )
+
+        Assertions.assertEquals(1, bookService.findUserBookById(ub1.id!!).customToReadOrder)
+        Assertions.assertEquals(2, bookService.findUserBookById(ub2.id!!).customToReadOrder)
+        Assertions.assertEquals(0, bookService.findUserBookById(ub3.id!!).customToReadOrder)
+    }
 }