Add category edit page, edit button, and drag & drop sortable with native HTML5

- Add /mon-compte/evenement/{id}/categorie/{categoryId}/modifier route (GET/POST)
- Create edit_category.html.twig with name and date fields
- Add edit button (pencil icon) on category list items
- Add sortable.js module: native HTML5 drag & drop with fetch reorder API
- Auto-correct endAt < startAt on category edit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

assets/app.js

@@ -5,6 +5,7 @@ import { registerEditor } from "./modules/editor.js"
 import { initCookieConsent } from "./modules/cookie-consent.js"
 import { initEventMap } from "./modules/event-map.js"
 import { initCopyUrl } from "./modules/copy-url.js"
+import { initSortable } from "./modules/sortable.js"
 
 document.addEventListener('DOMContentLoaded', () => {
     initMobileMenu()
@@ -13,4 +14,5 @@ document.addEventListener('DOMContentLoaded', () => {
     initCookieConsent()
     initCopyUrl()
     initEventMap()
+    initSortable()
 })

assets/modules/sortable.js

@@ -0,0 +1,54 @@
+export function initSortable() {
+    const list = document.getElementById('categories-list')
+    if (!list) return
+
+    const reorderUrl = list.dataset.reorderUrl
+    if (!reorderUrl) return
+
+    let dragEl = null
+
+    list.addEventListener('dragstart', (e) => {
+        dragEl = e.target.closest('[data-id]')
+        if (dragEl) {
+            dragEl.classList.add('opacity-50')
+            e.dataTransfer.effectAllowed = 'move'
+        }
+    })
+
+    list.addEventListener('dragend', () => {
+        if (dragEl) {
+            dragEl.classList.remove('opacity-50')
+            dragEl = null
+        }
+    })
+
+    list.addEventListener('dragover', (e) => {
+        e.preventDefault()
+        const target = e.target.closest('[data-id]')
+        if (target && target !== dragEl) {
+            const rect = target.getBoundingClientRect()
+            const mid = rect.top + rect.height / 2
+            if (e.clientY < mid) {
+                list.insertBefore(dragEl, target)
+            } else {
+                list.insertBefore(dragEl, target.nextSibling)
+            }
+        }
+    })
+
+    list.addEventListener('drop', (e) => {
+        e.preventDefault()
+        const items = list.querySelectorAll('[data-id]')
+        const order = Array.from(items).map(el => Number.parseInt(el.dataset.id, 10))
+
+        globalThis.fetch(reorderUrl, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(order),
+        })
+    })
+
+    list.querySelectorAll('[data-id]').forEach(el => {
+        el.setAttribute('draggable', 'true')
+    })
+}