Skip to content

Redesign smart capture settings panel UX#303

Merged
itsDNNS merged 1 commit intomainfrom
refine/smart-capture-panel-ux
Mar 28, 2026
Merged

Redesign smart capture settings panel UX#303
itsDNNS merged 1 commit intomainfrom
refine/smart-capture-panel-ux

Conversation

@itsDNNS
Copy link
Copy Markdown
Owner

@itsDNNS itsDNNS commented Mar 28, 2026

Summary

  • Merge master toggle into trigger card header -- panel dims via CSS :has() when SC is off
  • Replace all inline styles in trigger cards with proper CSS classes (sc-trigger-header, sc-trigger-label, sc-trigger-icon, sc-trigger-name, sc-trigger-desc)
  • Active triggers get highlighted background + amethyst border, icons transition from muted to accent
  • Sub-settings expand/collapse via grid-template-rows transition (removed initSmartCaptureToggles JS entirely)
  • Add loading spinner to execution history, error toast on fetch failure
  • Normalize warning banner from custom inline-styled card to .module-restart-banner
  • Add human-readable guardrails summary ("At most 4/hour, minimum 5 min apart") that updates live on input
  • i18n: 2 new keys per language (EN/DE/FR/ES), all validated in sync

Test plan

  • Open Settings > Smart Capture, verify master toggle is in the card header
  • Toggle SC off, verify triggers + guardrails + history dim and become non-interactive
  • Toggle SC on, verify content becomes interactive with smooth opacity transition
  • Enable a trigger, verify card highlights (background tint + accent border) and icon color changes
  • Enable a trigger with sub-settings (e.g. Modulation), verify smooth expand animation
  • Disable the trigger, verify smooth collapse
  • Check guardrails summary shows computed values, change inputs and verify it updates live
  • Navigate to Smart Capture, verify history loading spinner appears then resolves
  • If no Speedtest Tracker configured, verify amber warning banner matches module-restart-banner style
  • Switch language to DE/FR/ES, verify all strings translated

- Merge master toggle into trigger card header, eliminating
  separate card; rest of panel dims via CSS :has() when SC is off
- Replace all inline styles in trigger cards with proper CSS classes
  (sc-trigger-header, sc-trigger-label, sc-trigger-icon, etc.)
- Active triggers get highlighted background + amethyst border,
  icons transition from muted to accent color
- Sub-settings expand/collapse via grid-template-rows transition
  instead of display:none/block (removed initSmartCaptureToggles JS)
- Add loading spinner to execution history, error toast on failure
- Normalize warning banner to use established module-restart-banner
- Add human-readable guardrails summary that updates on input
  ("At most 4/hour, minimum 5 min apart")
- Add i18n keys for new UI strings (EN/DE/FR/ES)
@itsDNNS itsDNNS merged commit 10a1e8e into main Mar 28, 2026
8 checks passed
@itsDNNS itsDNNS deleted the refine/smart-capture-panel-ux branch March 28, 2026 15:40
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