Ref this discussion: Tri des scènes dans un widjet
The scenes are sorted alphabetically in a widget, it would be cool to be able to organize them non-alphabetically without having to juggle the scene names.
Hi everyone!
This topic is now in development .
A PR has been opened to allow sorting the list of scenes in the dashboard widget:
master ← claude/scene-widget-order
ouvert 02:23AM - 18 Aug 26 UTC
Implements feature request: https://community.gladysassistant.com/t/widget-scene… -pouvoir-trier-la-liste/10063
### Description
Scenes in the dashboard "Scenes" widget were always displayed in alphabetical order, so the only way to change the display order was to rename the scenes.
This PR adds a **Custom order** option in the scene widget configuration:
- when the option is disabled (default, and the case of all existing widgets), nothing changes: the scenes are still displayed in alphabetical order;
- when the option is enabled, the selected scenes can be reordered with drag & drop in the widget edit mode, and the dashboard displays them in that order.
Implementation details:
- `front/src/components/drag-and-drop/SceneListWithDragAndDrop.jsx` (new): reorderable list of the selected scenes, built with `react-dnd` following the exact same pattern as `DeviceListWithDragAndDrop` used by the devices widget (so it also works on touch devices).
- `front/src/components/boxs/scene/EditSceneBox.jsx`: new `scene_custom_order` switch, the drag & drop list, and the selected options are now kept in the configured order when the custom order is enabled. When the switch is turned on, the current alphabetical order is used as the starting point of the custom order.
- `front/src/components/boxs/scene/SceneBox.jsx`: the scenes returned by the API (sorted alphabetically) are re-ordered following the `scenes` array of the box configuration when `scene_custom_order` is `true`.
- `server/models/dashboard.js`: the box configuration schema is strict, so the new `scene_custom_order` boolean key had to be allowed. A test covering a scene box with a custom order was added to `server/test/lib/dashboard/dashboard.create.test.js`.
- Translations added in `en.json`, `fr.json` and `de.json`.
This pull request was created by an automated Claude Code run.
## Forum
Forum: https://community.gladysassistant.com/t/widget-scene-pouvoir-trier-la-liste/10063
### Checklist
- [ ] Tests pass: `cd server && npm run coverage` (Codecov requires 100% coverage on changed lines) and Cypress (`npm run cypress:run`) if the UI changed
- [x] Linter and prettier pass on both front and server (`npm run eslint`, `npm run prettier`)
- [x] No undocumented breaking change
Checks run locally: front `prettier`/`prettier-check`, `eslint`, `compare-translations` and `build` all pass; server `prettier`/`prettier-check` and `eslint` pass, and the dashboard test suites (`test/lib/dashboard` and `test/controllers/dashboard`, 63 tests) pass. `npm run coverage` and Cypress were not run locally (the Cypress binary is not available in this environment), so the first checklist item is left for CI to confirm.
---
🤖 Generated with [Claude Code](https://claude.com/claude-code)
## Summary by CodeRabbit
* **New Features**
* Added optional custom ordering for scenes in dashboard widgets.
* Users can enable custom ordering, initialize it from the current list, and reorder scenes using drag and drop.
* Saved scene orders are preserved and displayed when custom ordering is enabled; alphabetical ordering remains the default.
* **Localization**
* Added custom-ordering labels and instructions in English, German, and French.
* **Bug Fixes**
* Scene selections now refresh when the scene list or custom-ordering setting changes.
Feel free to follow the PR, test (optional, especially for small requests), and provide your feedback here if needed.