UI improvements (sidebars, primary color, login animation)

[slyk]

Summary

We've discussed some points in another thread, there are some improvements that could be more user friendly for new comers, that don't look like old d9, but improve usability. Still we trying to not scare off old users so do this carefully.

If this possible I want to propose multiple UI improvements, they will be in separate PRs for you to select what is ok to merge. Or we just decide here before the PR.

Basic Example

No response

Motivation

To be in modern UI/UX patterns and mobile view fixes.

Detailed Design

I've implemented couple of UI changes, start with most common to more own taste.

1. The primary color changes the whole websites --primary (it was hardcoded). After reading theming docs more carefully, seems like its almost the same as change this color variable in CSS in admin, but for new users that don't plan to read docs, its a far better way to change one field with a mouse and get a new look for the website.
2. Sidebars resize feature:
   2.1. Both resizable edges show a small grip, so they can be found without hovering. It lights up in the primary colour.
   2.2. Allow to min width 150px, when less than 48px it will collapse (for right sidebar only now).
   2.3. When the sidebar is open, a new page shows its first section (usually "Information") open, instead of all collapsed.
   2.4. A click on the empty area below the sidebar sections closes the sidebar. (similar to how it opens in d9 now)
3. The header action buttons collapse behind an expand button only when they would take more than half of the header, not on every window narrower than 960px.
   (feat(app): resizable sidebar, grip handles, roomier header actions (ADR-4) slyk/d9#4)

The new login animation that also use primary color, creates wow effect to new users or your clients when you sell them the admin system :)

Screencast.From.2026-10-15.16-38-06.mp4

Requirements List

Must

• The right sidebar can be resized by dragging its left edge (like the left navigation already can), with a minimum width (150px) and a maximum that keeps the content area usable; double-click resets it, and the width is remembered per browser.
• With the sidebar open, a newly opened page shows its first section (usually "Information") expanded instead of all collapsed (this is a bug fix).
• No API, database or setting changes; existing instances look and behave the same until a user resizes or picks a project colour.

Should

• The Project Color from Settings is used as the admin UI primary colour (--primary and its shades), in light and dark themes.
• Header action buttons collapse behind the expand button only when they don't fit (more than half of the header), not on every window under 960px.
• Both resizable edges show a small grip, so users can find them without hovering.

Could

• Clicking the empty area below the sidebar sections closes the sidebar, the same way clicking the closed sidebar opens it.
• The left navigation can also be made narrower (minimum 150px).
• An animated login background tinted with the project colour.

Won't (in this proposal)

• A collapsible left navigation (icon rail like the right sidebar); possible later, the resize code already supports it.

Drawbacks

The login screen with moving animation may take CPUs on slow PC and look non professional, still user could change it in admin fast, right?

Alternatives

Without the new grips the mobile user don't sure if he can move the sidebar widths.

Adoption Strategy

You could see and test it here: https://tps-side-dev.toopro.org/
login by test@toopro.org

Unresolved Questions

I would propose the collapsible left sidebar, but it needs more work and could break someones customer behavior, so not now, but the code almost ready for this :)

[slyk]

Part of changes as PRs

1. Project colour as the primary colour: feat(app): use the project color as the primary color of the admin UI #432
2. First sidebar section stays open across pages: fix(app): keep the first sidebar section open across pages #433
3. Grip on the resizable edge: feat(app): show a grip on the resizable edge of the navigation #434
   The resize logic itself is unchanged; only the hover line is thinner and the grab area wider.

[slyk]

Here is the rest of the UI part as PRs:

4. Resizable right sidebar: feat(app): resizable sidebar, closable from its empty area #445
   • Need to make them similar style grips. The navigation keeps its behaviour, only its minimum goes down to 150px.
   • Second commit: a click on the empty area below the sections closes the sidebar. It's separate, so feel free to drop it. Its much faster to open and close sidebar by just pressing the empty area.
5. Header actions collapse only when they don't fit: feat(app): collapse header actions only when they do not fit #446
   • Today they collapse on every window under 960px, on tablets when there are much horizontal space it sollapse the actions. So the PR will collapse only when there are really no space for additional actions.
6. Animated login background: feat(app): animated crystal background on the public pages #447. Project color used, if final user needs it simply removed/changed to still picture from admin as public background.