Skip to content

feat(ui): toast queue — stack up to 3, independent fade in/out, keep grading styles (v1.19 D) - #58

Merged
argszero merged 1 commit into
mainfrom
feat/ui-ue-round4-toast-queue
Aug 17, 2026
Merged

argszero merged 1 commit into
mainfrom
feat/ui-ue-round4-toast-queue

Conversation

@argszero

Copy link
Copy Markdown
Owner

Summary

UI/UE 4th-round deepening — item D: toast queue stacking (rant 2026-08-17T20:39:30, v1.19).

Replaces the single overwriting #toast element with a queue container #toast-wrap (fixed bottom-center, vertical stack, gap:10px, pointer-events:none so it never blocks page clicks):

  • toast(msg, type) now creates an independent element per call — consecutive operations no longer overwrite earlier messages
  • Max 3 toasts (TOAST_MAX = 3): when exceeded, the oldest is removed immediately to make room
  • Independent lifecycle: each toast fades out (.out + toast-out 0.2s animation) after 2.6s, then removes itself — no shared timer, no cross-talk; orphaned timers of evicted toasts are no-ops
  • Grading styles preserved (.toast.success/.error/.info border + text colors unchanged); all 39 existing toast() call sites untouched
  • .toast keeps pointer-events:auto (container is none) — future-proof for interactive toasts

Docs: docs/user-stories.md v1.19 (item D) + ui/README.md「toast 队列约定」. Verified by DOM-stub smoke test (21 assertions: queue append/order, 3-cap eviction, fade-out + removal, timer cleanup, container reusability, HTML/CSS structure, grading preserved), cargo test, cargo fmt --check.

Rant (verbatim)

Rant: UI/UE 第四轮多角度深化 — 状态保持、信息密度、原生控件美化、帮助可达性(宿主 2026-08-17 第四轮指示:继续从多角度美化 UI、优化 UE)

D. toast 队列堆叠

  • 当前单 toast 会被连续操作覆盖:改为队列(最多同时 3 条,纵向堆叠右下角或底部居中),每条独立淡入淡出
  • 已有分级样式保留(success/error/info)

Related

Tests

  • DOM-stub smoke test — 21/21 assertions pass
  • node --check ui/js/app.js
  • cargo test — 1 passed
  • cargo fmt --check

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant