[MrYuion]

Pages, tabs, menus and panels changed with no motion. Content swapped in at once, so a tab click or a new item felt abrupt and it was hard to see what had changed.

This PR adds short motion (120–200 ms) in five commits, one for each area:

1. Page transitions. Each route change is a router view transition. Only the routed content crossfades, and the sidebar and headers stay still. The active tab underline, admin link and main menu link slide to the new link. A change of query params only does not animate.
2. Panels. Menus and select panels open with the same motion as dialogs. The small-screen search overlay fades in.
3. Loading. The item header, tabs and content fade in over the skeleton. On small screens the main menu slides in.
4. Feedback. Toasts fade out (Angular animate.leave). The upload list, banner and tab counts animate in.
5. Cleanup. This removes animation classes and keyframes that nothing used. AGENTS.md notes the motion conventions.

prefers-reduced-motion stops all motion that moves or scales. Fades stay. Browsers without view transitions (Firefox before 144) change pages at once, as before.

GIFs for each block (mock backend): page transitions, panels, mobile search, skeleton fade, mobile menu, toasts and banner.

Checks

• Lint, unit tests (983) and build pass. Each commit builds.
• E2E chromium and mobile-chrome: 160 passed, 1 flaky. The flaky test, AC-ADM-011-4, also fails on develop (2 of 40 runs). searchApiKeyUser can check that the spinner is hidden before the spinner shows. I will fix it in a separate PR.

Reviewed with sol-loop: 2 rounds with gpt-6.1-sol on high. Sol verdict: approved.

---

Created with Claude Opus 5.5 in Claude Code.

🤖 Generated with Claude Code