Allow device routing without pinning

2026-08-07 17:27:13 +03:00
parent 608f8cfcf2
commit dfa9f09695
13 changed files with 114 additions and 61 deletions
@@ -26,6 +26,7 @@ Preserve the repo's focused one-screen VPN client language: a centered primary a
 - Never let labels, timers, feedback, icons, progress, or server rows shift neighboring content.
 - Animate state, opacity, blur, glow, color, filter, and transform. Do not animate layout properties.
 - Make live behavior visibly alive: running processes, changing values, mode changes, and interactive affordances should communicate through restrained motion instead of abrupt static replacement.
+- Give every actionable icon a semantic hover/focus response; rotate cyclic actions, move the physical part of object-like controls, and keep their hit targets fixed.
 - Let every visible cycle finish and return to its resting coordinates before stopping. Never cancel a hover animation, spinner, or list exit at an arbitrary frame.
 - Animate dynamic rows through complete enter and exit phases; keep a departing row mounted until its exit finishes, with immediate removal under reduced motion.
 - Animate only what changed. Keep unchanged digits, labels, icons, and surrounding geometry stable.
@@ -51,5 +52,6 @@ Before handing off, verify:
 - Server separators are compact and only slightly wider than their content.
 - Repeated polling does not replay decorative list animations.
 - Manual refresh has an obvious but non-jarring response.
+- Icon-only controls respond on hover and focus, active cyclic work spins, and durable states such as pinned remain legible at rest.
 - Keyboard focus remains visible even when the text caret is intentionally hidden.
 - Narrow screens return to a simple single-column layout.
@@ -61,6 +61,15 @@ Use exponential ease-out curves such as `cubic-bezier(0.16, 1, 0.3, 1)` for arri
 - On updated traffic, tween the number, advance the bar, and emit a visible but brief mode-accent flare.
 - Keep refresh tooltip outside the rotating button so it remains upright and unfiltered.

+## Icon controls
+
+- Give every actionable icon a small semantic response on hover and keyboard focus; leave decorative icons still.
+- Rotate cyclic actions such as refresh, ping, and traffic sorting on hover, then use the shared continuous spin while work is running.
+- Move the physical part of object-like controls: lift and tilt a pin, pencil, or trash lid instead of moving its fixed hit target.
+- Keep durable state on the icon wrapper and transient motion on the SVG child. A pinned icon stays lifted and tilted while its row moves to the pinned group.
+- Keep the hit target, tooltip, and surrounding layout fixed. Tooltips remain outside the transformed SVG.
+- Under reduced motion, preserve color, focus, and final state without animated travel or rotation.
+
 ## Server cascade

 - On initial display, reveal rows from top to bottom with a small negative Y offset, opacity, and blur.