fix(ui): polish across routing, groups, inbounds, mobile sidebar
A bundle of small UI fixes that surfaced together while reviewing the
panel.
Routing rules — stale Edit after drag:
- Dragging a rule and then clicking its Edit button used to open the
modal with the *previous* rule's content. Root cause: desktopColumns
was memoized with [t, isMobile, rows.length] (rows.length doesn't
change on reorder), so the cached render function kept handing AntD
the openEdit closure that captured the pre-drag rules array. Fix is
a rulesRef updated each render and read inside openEdit, so even the
cached closure sees the live array.
- Mobile rule cards on the same page were hard to tell apart: bumped
the inter-card gap, slightly stronger border, soft shadow, and a
small centered divider line between adjacent cards.
Mobile drawer (dark / ultra):
- The AntD Menu inside the mobile drawer was rendering with its own
darkItemBg (#15161a / #050507) while the drawer body used the
lighter colorBgElevated, producing visible two-tone seams. Force
the drawer-content / drawer-body to the same dark color that the
desktop sider uses, and make the menus transparent so they inherit.
Row menus — visual grouping:
- Groups page row menu: moved Rename above the divider so the
ordering reads safe → divider → destructive (Remove from group,
Delete clients, Delete group only) instead of mixing the two
groups.
- Inbounds page row menu: inserted a divider before delAllClients /
delete so the destructive items sit visually separated from the
earlier safe actions.
Dropdown affordances:
- Non-danger dropdown items had no perceivable hover state (default
colorBgTextHover is too subtle, especially under the light theme).
Apply the same primary-tint pattern the sider/drawer menu uses: 14%
primary background and primary color on label + icon.
- ant-dropdown-menu-item-divider now uses var(--ant-color-border)
(and an explicit rgba in dark) so the separator is actually visible
in the light theme.
Clients toolbar — narrow-desktop wrap:
- Between 769px and 920px, the bulk-action bar (Attach / Detach /
Add to group / Ungroup / more + Delete) wrapped to two rows with
Delete stranded alone on the right. In that range, switch the
toolbar buttons to icon-only, tighten gap to 6px and inline padding
to 8px so everything stays on one line.
MHSanaei