3bf1aa2163
- Added SVG icon with hover animation to external links in index.html and dashboard/index.html - Updated web_dashboard.py template to include the same icon and animation for consistency - Added 'Open' button with icon to Telegram Bot status in web_dashboard.py - Documented new UX pattern in .jules/palette.md This change improves usability by clearly indicating which links open in a new tab and providing a subtle motion cue on hover.
1.5 KiB
PALETTE'S JOURNAL - CRITICAL LEARNINGS ONLY
2026-02-13 - [Brand Color Contrast Failure]
Learning: The brand color #667eea fails WCAG AA contrast (3.4:1) against white backgrounds, affecting accessibility for text headers and primary buttons.
Action: Replace #667eea with #4f46e5 (Indigo 600) which passes WCAG AA (5.5:1) while maintaining brand identity. Update all instances including manifest.json.
2026-02-26 - [Copy to Clipboard Micro-Interaction]
Learning: Users frequently need to copy system identifiers (like bot handles) to share or search. Adding a dedicated copy button with immediate visual feedback (icon change to checkmark) significantly reduces friction compared to manual selection. Action: Identify other read-only data fields (IDs, keys, paths) that users might need to copy and apply this pattern. Ensure the success state resets after a short delay (e.g., 2s) and updates the aria-label for accessibility.
2026-02-27 - [External Link Micro-Interaction]
Learning: Static external links often surprise users by opening new tabs without warning. Adding a consistent "external link" icon that animates (moves up-right) on hover provides a subtle, non-intrusive cue about the link's behavior (opening a new context).
Action: Use the .btn class with inline-flex and the specific SVG icon pattern for all primary actions that lead to external services (Telegram, Exness, etc.). Ensure the icon is aria-hidden if the text label (or aria-label) already explicitly states "opens in new tab".