Improve startup responsiveness and admin prompt motion
CI / Windows baseline (push) Has been cancelled
CI / Windows baseline (push) Has been cancelled
This commit is contained in:
@@ -12,10 +12,12 @@ Keep ProxyWarden a compact Windows utility while matching the visual language of
|
||||
1. Read `AGENTS.md`, `.agent/skills/react-typescript-ui/SKILL.md`, and the complete component and CSS being changed.
|
||||
2. Read [visual-language.md](references/visual-language.md) for composition, typography, color, and surfaces.
|
||||
3. Read [motion-and-interaction.md](references/motion-and-interaction.md) for state and interaction animation.
|
||||
4. Reuse `src/ui/*`, existing state, CSS tokens, and typed Tauri boundaries. Prefer CSS and narrow markup changes over dependencies or new abstractions.
|
||||
5. Keep geometry stable across loading, success, error, copy, refresh, and route changes.
|
||||
6. Add `prefers-reduced-motion` behavior with every new animation.
|
||||
7. Run `npm test`, `npm run build`, and a visual desktop/narrow smoke when the environment allows it.
|
||||
4. Before editing a disclosure or motion-heavy control, write a compact storyboard for `collapsed`, `opening`, `open`, and `closing`: fixed elements, origin, direction, duration, easing, focus, and reduced-motion behavior.
|
||||
5. Reuse `src/ui/*`, existing state, CSS tokens, and typed Tauri boundaries. Prefer CSS and narrow markup changes over dependencies or new abstractions.
|
||||
6. Keep geometry stable across loading, success, error, copy, refresh, and route changes.
|
||||
7. Add `prefers-reduced-motion` behavior with every new animation.
|
||||
8. After a second user correction to the same interaction, stop stacking overrides. Re-read its markup and styles, restate the latest behavior, remove superseded assumptions, and rebuild the motion model cleanly.
|
||||
9. Run `npm test`, `npm run build`, and an interaction smoke for visible motion or hit-target changes. Check desktop and narrow layouts; build and lint never substitute for visual verification.
|
||||
|
||||
## Non-negotiable decisions
|
||||
|
||||
@@ -25,8 +27,10 @@ Keep ProxyWarden a compact Windows utility while matching the visual language of
|
||||
- Use the blue-green accent for ready/active routing and orange only for direct/local-route distinction. Keep warnings and errors semantic.
|
||||
- Prefer open composition, quiet surface shifts, and localized light over dashboard cards, thick borders, and decorative chrome.
|
||||
- Animate opacity, blur, glow, color, filter, and transform; never animate layout properties or use `transition: all`.
|
||||
- Keep interactive triggers at one screen position throughout disclosure motion. Use layout for resting placement, never a transform that hover or active feedback can overwrite.
|
||||
- Make transient prompts independent overlays; they must not add shell height or move the main workspace.
|
||||
- Keep labels, paths, status copy, spinners, and feedback in reserved geometry so neighboring content does not move.
|
||||
- Keep tooltips independent from transformed, rotating, glowing, or filtered controls.
|
||||
- Keep secrets and credential-bearing URLs redacted in every visual state.
|
||||
- Keep narrow layouts single-column and keyboard focus visible.
|
||||
|
||||
- Do not call a motion task complete without checking open, close, repeated toggle, hover during transition, keyboard focus, and reduced motion. If the state cannot be reproduced, report the missing visual evidence explicitly.
|
||||
|
||||
@@ -28,12 +28,22 @@ Use `cubic-bezier(0.16, 1, 0.3, 1)` for arrivals and interaction feedback.
|
||||
- Keep mode selectors outside the keyed content they replace. Let the new content enter with a short directional fade and blur while focus remains on the selected mode.
|
||||
- For user-triggered sorting, fade and lightly blur the reordered list as one surface; row stagger stays bounded and saved data order does not change.
|
||||
|
||||
## Anchored disclosures
|
||||
|
||||
- Keep the trigger fixed while its surface opens and closes. Position its resting hit area with grid, flex, or logical inset properties; never rely on a placement `transform` that hover or active feedback can replace.
|
||||
- Give the surface, background, copy, and actions one origin and one timeline. They should emerge from the trigger together; do not make the background pop before the trigger or appear after the content.
|
||||
- Keep animated disclosure content mounted through entry and exit. Gate pointer and keyboard access separately; conditional rendering directly into the final state is not an entrance animation.
|
||||
- Design opening and closing together. Preserve visible reverse motion long enough before fading opacity, and keep both directions interruptible under repeated clicks.
|
||||
- Let explicit product feedback override the default easing. When a component calls for a slow start followed by acceleration, define a local curve instead of forcing the global ease-out.
|
||||
- Compose hover and active feedback without changing the resting position. If transform composition is unavoidable, use separate wrappers, individual transform properties, or shared custom properties and verify every state.
|
||||
- Keep decorative sweeps subordinate to state motion, low-opacity, bounded to the surface, and finished cleanly. The disclosure must remain legible without the effect.
|
||||
|
||||
## Lists and disclosures
|
||||
|
||||
- Reveal dynamic rows with opacity, light blur, and a small transform.
|
||||
- On hover, let a row lift one or two pixels and reveal a restrained local surface/light; keep resting rows visually flat.
|
||||
- Animate status dots through color, light, and a small scale change instead of animating a surrounding badge or border.
|
||||
- Keep departing rows mounted until their exit animation completes; remove immediately under reduced motion.
|
||||
- Keep departing rows and disclosures mounted until their exit animation completes; remove immediately under reduced motion.
|
||||
- Bound list stagger to 60-100ms and never make interaction latency grow with list length.
|
||||
- Tooltips appear quickly above the trigger as independent translucent surfaces and never inherit trigger transforms or filters.
|
||||
|
||||
|
||||
@@ -40,6 +40,13 @@ Design for a Windows user opening a small control surface to check routing, reco
|
||||
- Prefer a short luminous underline or localized glow for selection and keyboard focus over a rectangular focus frame.
|
||||
- Use shared `src/ui` primitives and preserve their default, hover, active, focus, disabled, loading, empty, and error states.
|
||||
|
||||
## Emphasis and border budget
|
||||
|
||||
- Give each compact surface one dominant accent at most. A transient warning action must not outshine the primary system state or its trigger.
|
||||
- Do not stack borders on the container, trigger, and action. Start with tonal background, spacing, and text hierarchy; keep persistent outlines for keyboard focus, destructive confirmation, or an otherwise ambiguous hit target.
|
||||
- Treat warm warning color as a restrained semantic tint, not decorative fill or a large glow. Adapt a shared `primary` button locally when its default emphasis conflicts with the surrounding prompt.
|
||||
- Validate the complete component, not isolated controls: resting, hover, focus, active, disabled, loading, open, and closed states must share one radius and emphasis language.
|
||||
|
||||
## Route checks
|
||||
|
||||
- Keep the route description, endpoint, and check action in a stable three-part row. Reserve the action width so mode changes and endpoint length never move the button.
|
||||
@@ -48,6 +55,26 @@ Design for a Windows user opening a small control surface to check routing, reco
|
||||
- Keep the summary short. Put verbose URLs, request methods, status codes, and errors in a calm structured detail cloud opened by hovering or focusing the result surface.
|
||||
- Animate result arrival and status light, while preserving the same geometry and honoring reduced motion.
|
||||
|
||||
## Route chain semantics
|
||||
|
||||
- Show only stages with distinct user-facing responsibilities. Never render both `Выход` and `SOCKS5 endpoint` when they describe the same destination.
|
||||
- Use `Приложения → ProxiFyre → SOCKS5` for the external-proxy route. End a direct route with `Интернет: напрямую` instead of an implementation-stage label.
|
||||
- Explain each stage in plain Russian for a non-technical user. Omit filesystem paths, ports, service names, and generated-config details unless the user explicitly asks for diagnostics.
|
||||
- Reserve the final chain height before revealing nodes. Progressive arrival may change opacity, blur, or transform, but must not reflow neighboring content.
|
||||
- Treat progressive arrival as a presentation sequence over reserved slots. Do not serialize independent backend probes just to match the animation; if the API returns one aggregate snapshot, show calm `checking` placeholders and replace them in place.
|
||||
- Reveal the initial chain in a short, legible sequence and do not replay it for background polling or quiet status refreshes.
|
||||
|
||||
## Admin elevation prompt
|
||||
|
||||
- Render the prompt as a fixed bottom-right overlay that never changes shell height or shifts the workspace. Offset it above persistent bottom docks instead of covering them.
|
||||
- Keep the collapsed trigger as a stationary 44px warm shield. Show a concise hint once per application session after admin status is known, then dismiss it automatically.
|
||||
- On click, expand the surface leftward from the shield while the shield stays in the same screen position. Keep the full row height tied to the trigger.
|
||||
- Reveal background, copy, and action from the same origin and timeline. Use a roughly 520-560ms slow-start opening and a visible 380-420ms reverse close; never delay the background until the end.
|
||||
- Keep any light pass subtle, local, and optional. It must not replace the actual surface/content motion.
|
||||
- Use the concise title `Нужны права администратора`, the reason `Для управления ProxiFyre и правилами Windows.`, and the action `Перезапустить`. Do not show paths or elevation internals.
|
||||
- Keep the surface and action borderless by default. Use a muted warm tint; the action must remain quieter than the shield and main system state.
|
||||
- Verify the Russian copy, `Открываю UAC`, hover, focus, repeated toggle, narrow width, and Windows text scaling without clipping or layout movement.
|
||||
|
||||
## Route modes and managed lists
|
||||
|
||||
- Present external and local proxy routes as two peer choices above the content they replace. Keep the chooser mounted while the mode body crossfades in from the selected direction.
|
||||
|
||||
Reference in New Issue
Block a user