Modern UI

[a-limyr]

Summary

This PR is a revamping of the UI. The new UI, is responsive, modern and themable.

Issue

Motivation

The existing Abzu UI was built on an older stack (class-based React components, legacy MUI, hand-rolled CSS) that made it difficult to enforce consistent design, add theming support, or iterate on UX quickly. There
was no design system to speak of — styling was scattered across dozens of CSS files, and the component tree mixed presentation and data-fetching concerns freely.

The goal of this branch is to introduce a modern, parallel UI layer that can eventually replace the legacy one. By running both UIs side-by-side (controlled by a uiMode flag in Redux state), we avoid a big-bang
rewrite and allow gradual migration with no disruption to users currently on the legacy UI.

How the code works

All new code lives under src/components/modern/ and src/containers/modern/. The entry point is src/containers/modern/App.tsx, which is completely separate from the legacy LegacyApp.js.

The three main editing surfaces — EditStopPage (regular stop places), EditParentStopPlace (multimodal stops), and EditGroupOfStopPlaces (groups) — all follow the same structural pattern:

• A collapsible drawer on the left edge of the map. When expanded, the drawer shows the full editor; when collapsed, a MinimizedBar takes its place, giving access to quick-actions without hiding the map.
• Quays and parking inside EditStopPage are first-class panels with their own view state, navigated to via a replace-in-place pattern (View union type: stopPlace | quay | parking), with a back arrow returning to the
  stop place view.

A new ReportPage was also built from scratch under src/components/modern/ReportPage/, with full filter/column/pagination/export support and URL-persisted state. This is not fully responsive yet, but is not a major priority at the moment.

Technical approach and design decisions

Parallel UI, zero legacy breakage. The uiMode flag in Redux (state.user.uiMode) gates which component tree renders. The legacy UI is untouched and continues to work. All new components are TypeScript; new containers
are thin wrappers that read Redux state and pass it down.

Hooks-per-component pattern. Each major component has a dedicated hooks/use.ts orchestrator that composes several focused sub-hooks (state, dialogs, CRUD, form, quays, parking). This keeps components
as pure presentational shells and makes business logic independently testable.

MUI v7 with configurable theming. The theme system reads a themeConfig / themeConfigs path from bootstrap.json at runtime, fetches a JSON theme file, and applies it on top of the MUI base. This lets deployments supply their own colours and logo without a code change. The Config interface in ConfigContext.ts was extended with themeConfig and themeConfigs to type-check this at compile time;

Shared component library. Reusable pieces — MinimizedBar, LoadingDialog, GroupMembership, ParentMembership, CopyIdButton, FavoriteButton, TagTray, ImportedId, and others — live in src/components/modern/Shared/ and
are used consistently across all three panel types, giving the UI a uniform look and behaviour.

Closes #1084

Unit tests

Manually testing for now, but we should look into UI testing frameworks in the future.

[github-actions]

Visit the preview URL for this PR (updated for commit 6f3a4e6):

https://ent-ror-abzu-dev--pr1689-feature-modernize-ui-o2rlk60l.web.app

_{(expires Thu, 30 Apr 2026 07:20:38 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 062563fce35e36a421ef531ddfc5db6c937ea3b1}

[sonarqubecloud]

Quality Gate failed

Failed conditions
2 Security Hotspots
0.6% Coverage on New Code (required ≥ 80%)
5.9% Duplication on New Code (required ≤ 3%)
D Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE