Add reusable icon-grid type selector for CSS source editor

Replaces the plain <select> dropdown with a visual grid popup showing
icon, label, and description for each source type. The IconSelect
component is generic and reusable for other type selectors.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-08 23:15:39 +03:00
parent d6bda9afed
commit d95eb683e1
7 changed files with 350 additions and 2 deletions

View File

@@ -733,9 +733,13 @@
"color_strip.type": "Type:",
"color_strip.type.hint": "Picture Source derives LED colors from a screen capture. Static Color fills all LEDs with a single constant color. Gradient distributes a color gradient across all LEDs. Color Cycle smoothly cycles through a user-defined list of colors. Composite stacks multiple sources as blended layers. Audio Reactive drives LEDs from real-time audio input. API Input receives raw LED colors from external clients via REST or WebSocket.",
"color_strip.type.picture": "Picture Source",
"color_strip.type.picture.desc": "Colors from screen capture",
"color_strip.type.static": "Static Color",
"color_strip.type.static.desc": "Single solid color fill",
"color_strip.type.gradient": "Gradient",
"color_strip.type.gradient.desc": "Smooth color transition across LEDs",
"color_strip.type.color_cycle": "Color Cycle",
"color_strip.type.color_cycle.desc": "Cycle through a list of colors",
"color_strip.static_color": "Color:",
"color_strip.static_color.hint": "The solid color that will be sent to all LEDs on the strip.",
"color_strip.gradient.preview": "Gradient:",
@@ -793,14 +797,19 @@
"color_strip.color_cycle.speed.hint": "Cycle speed multiplier. 1.0 ≈ one full cycle every 20 seconds; higher values cycle faster.",
"color_strip.color_cycle.min_colors": "Color cycle must have at least 2 colors",
"color_strip.type.effect": "Effect",
"color_strip.type.effect.desc": "Procedural effects like fire, plasma, aurora",
"color_strip.type.effect.hint": "Procedural LED effects (fire, meteor, plasma, noise, aurora) generated in real time.",
"color_strip.type.composite": "Composite",
"color_strip.type.composite.desc": "Stack and blend multiple sources",
"color_strip.type.composite.hint": "Stack multiple color strip sources as layers with blend modes and opacity.",
"color_strip.type.mapped": "Mapped",
"color_strip.type.mapped.desc": "Assign sources to LED zones",
"color_strip.type.mapped.hint": "Assign different color strip sources to different LED ranges (zones). Unlike composite which blends layers, mapped places sources side-by-side.",
"color_strip.type.audio": "Audio Reactive",
"color_strip.type.audio.desc": "LEDs driven by audio input",
"color_strip.type.audio.hint": "LED colors driven by real-time audio input — system audio or microphone.",
"color_strip.type.api_input": "API Input",
"color_strip.type.api_input.desc": "Receive colors from external apps",
"color_strip.type.api_input.hint": "Receives raw LED color arrays from external clients via REST POST or WebSocket. Use this to integrate with custom software, home automation, or any system that can send HTTP requests.",
"color_strip.api_input.fallback_color": "Fallback Color:",
"color_strip.api_input.fallback_color.hint": "Color to display when no data has been received within the timeout period. LEDs will show this color on startup and after the connection is lost.",
@@ -810,6 +819,7 @@
"color_strip.api_input.endpoints.hint": "Use these URLs to push LED color data from your external application. REST accepts JSON, WebSocket accepts both JSON and raw binary frames.",
"color_strip.api_input.save_first": "Save the source first to see the push endpoint URLs.",
"color_strip.type.notification": "Notification",
"color_strip.type.notification.desc": "One-shot effect on webhook trigger",
"color_strip.type.notification.hint": "Fires a one-shot visual effect (flash, pulse, sweep) when triggered via a webhook. Designed for use as a composite layer over a persistent base source.",
"color_strip.notification.effect": "Effect:",
"color_strip.notification.effect.hint": "Visual effect when a notification fires. Flash fades linearly, Pulse uses a smooth bell curve, Sweep fills LEDs left-to-right then fades.",