Improve Features page ordering and mobile UI consistency

- Fix module ordering with local state tracking for immediate UI updates
- Add tab centering when selected (scroll to center)
- Use finally block in handleApplyOrder to ensure state reset
- Add cancelOrder translation key
- Increase order card min-width for better readability
- Normalize mobile top bar height with min-height constraint
- Add display:flex to mobile title sections for proper layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-18 22:15:40 +01:00
parent 8c4a555b88
commit 3074f1685f
9 changed files with 273 additions and 79 deletions

View File

@@ -40,21 +40,14 @@ export default function Sidebar() {
.find((cat) => cat.id === 'main')
?.modules.filter((m) => {
if (!m.enabled) return false;
// Dashboard is always shown
if (m.id === 'dashboard') return true;
if (shouldUseUserPermissions) {
return isModuleEnabledForUser(m.id, user?.permissions, user?.is_superuser || false);
}
return isModuleEnabled(m.id);
}) || []);
// Sort modules based on moduleOrder (dashboard always first, then ordered features)
// Sort modules based on moduleOrder
const sortedModules = [...mainModulesFiltered].sort((a, b) => {
// Dashboard always comes first
if (a.id === 'dashboard') return -1;
if (b.id === 'dashboard') return 1;
// Sort other modules by moduleOrder
const aIndex = moduleOrder.indexOf(a.id);
const bIndex = moduleOrder.indexOf(b.id);
@@ -69,13 +62,11 @@ export default function Sidebar() {
// Split modules by position (top = main nav, bottom = above footer)
const topModules = sortedModules.filter(m => {
if (m.id === 'dashboard') return true; // Dashboard always at top
const state = moduleStates[m.id as keyof typeof moduleStates];
return !state || state.position === 'top';
});
const bottomModules = sortedModules.filter(m => {
if (m.id === 'dashboard') return false; // Dashboard never at bottom
const state = moduleStates[m.id as keyof typeof moduleStates];
return state && state.position === 'bottom';
});