Template Revert Button

Overview

Replace the orange "modified" dot on template buttons with a purple revert button, consistent with the existing override/revert pattern used in mass format child creatives.

What was done (March 2026)

TemplateButton.vue changes

• Removed the orange modified-dot indicator
• Added a purple Revert button (with reload icon) that appears when modified is true
• Button uses the same $echo-* color scheme as OverrideControls.vue (purple theme)
• Emits @revert event when clicked
• Layout changed from inline-block to flex with gap between dropdown and revert button

Config files updated (all three)

• ButtonConfiguration.vue — wired @revert to handleTemplateRevert()
• FormConfiguration.vue — same pattern
• HtmlConfiguration.vue — same pattern

Revert behavior

1. User clicks Revert button
2. Confirmation dialog appears: "Revert to template? This will discard all manual changes and reset to the original template."
3. On confirm: re-applies the current selectedTemplate via the existing updateButtonTemplate/updateFormTemplate/applyTemplate functions
4. This resets all block properties to the template defaults, clearing templateModified

Switching templates when modified

• Still shows a confirmation dialog: "Apply template? You have made manual changes..."
• Uses the same dynamic confirmAction pattern as revert

Implementation pattern

Each config file now uses a generic confirm dialog with dynamic title/description/action:

data: {
  confirmDialogOpen: false,
  confirmAction: null,        // () => void
  confirmDialogTitle: '',
  confirmDialogDescription: '',
}

Both handleTemplateSelect (when modified) and handleTemplateRevert set these, then open the dialog. confirmTemplateAction executes whichever action was set.

What needs to be done in animation system

AnimationEffectList.vue (on add-animation-system branch)

The animation preset selector currently uses the same orange modified-dot pattern. It should be updated to match:

1. Replace the orange dot with a purple revert button (same styling as TemplateButton)
2. Add revert functionality: when clicked, re-apply the matched preset (or clear effects if no preset was originally loaded)
3. Confirmation dialog: already exists for switching presets when modified — extend it for revert
4. The isModified computed already detects when effects differ from a preset

Key differences from template system

• Animation presets don't have a selectedTemplate field — instead, matchedPreset is computed by comparing current effects JSON to all preset JSONs
• Need to track the originally loaded preset name (currently not stored) so revert knows what to revert to
• Options:
  • A) Store selectedPreset in animation config data (like selectedTemplate in blocks) — cleaner, enables revert
  • B) Only show revert when matchedPreset was previously set — requires tracking last-known preset

Recommended approach

Option A: Add selectedPreset: string to the animation config type and defaults. Set it when a preset is loaded. The revert button re-applies that preset. This mirrors the template system exactly.

Files to modify

• AnimationEffectList.vue — replace dot with revert button, add revert handler
• types.ts — add selectedPreset to AnimationConfig type (on animation branch)
• defaults.ts — add selectedPreset: '' to animation defaults

Design reference

Purple revert button styling (from OverrideControls.vue)

.revert-button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid $echo-85;
  border-radius: 4px;
  background-color: $echo-95;
  color: $echo-50;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  &:hover {
    background-color: $echo-85;
  }
}

Related files

File	Purpose
Configuration/components/TemplateButton.vue	Shared template dropdown + revert button
Configuration/configs/ButtonConfiguration.vue	Button template handling
Configuration/configs/FormConfiguration.vue	Form template handling
Configuration/configs/HtmlConfiguration.vue	HTML template handling
OptionRow/OverrideControls.vue	Original revert pattern (mass format overrides)
store/modules/blocks.ts	templateModified tracking in updateBlockValue mutation
templates/index.ts	updateButtonTemplate, updateFormTemplate, getTemplate

Border radius presets (also updated in this session)

Preset values changed to even numbers:

• Sharp: 0px
• Curved: 6px (was 5px)
• Rounded: 16px (was 15px)
• Arched: 9999px (unchanged)

Behavior fix in BorderRadiusPresets.vue:

• Manual adjustment in custom mode no longer auto-snaps to a preset when the value happens to match
• Presets only activate when explicitly clicked