UI Component Architecture
UI Component Architecture
The Statusline Editor is built using a functional, component-based approach to UI construction. Rather than relying on a heavy framework, the interface is generated dynamically through a set of factory functions defined in js/components.js. This architecture ensures a consistent look and feel across different configuration panels while maintaining a lightweight footprint.
Component Factory Functions
The core of the UI is composed of reusable factory functions that return DOM elements. These functions are designed to be stateless, accepting current values and onChange callbacks to handle state updates.
ANSI Color Picker (buildAnsiPalette)
The primary tool for color customization. It renders a preview swatch that, when clicked, expands into a full 256-color ANSI palette including base colors, the 6x6x6 color cube, and grayscale levels.
// Usage example
const colorPicker = buildAnsiPalette(block.color, (newColor) => {
block.color = newColor;
render();
});
- Inputs:
currentCode(Integer),onChange(Function). - Behavior: Converts ANSI codes to CSS colors in real-time for the UI preview while preserving the raw ANSI code for script generation.
Toggle Switch (buildToggle)
A standard boolean input used for enabling or disabling specific block features (e.g., showing the progress bar or the git branch).
const toggle = buildToggle(block.showBar, 'Show Progress Bar', (isEnabled) => {
block.showBar = isEnabled;
render();
});
Segmented Control (buildSegment)
Used for selecting between multiple mutually exclusive options, such as text formats or separator styles.
const options = [
{ value: '1k', label: '12k' },
{ value: '1.2k', label: '12.4k' }
];
const segments = buildSegment(options, block.format, (newValue) => {
block.format = newValue;
render();
});
Numeric Counter (buildCounter)
Provides a simple increment/decrement interface for numerical settings like directory depth.
const counter = buildCounter(block.depth, 1, 5, (newDepth) => {
block.depth = newDepth;
render();
});
Layout Engine
Components are organized into the settings panel using a row-based layout system.
buildRow(label, content): A wrapper function that ensures consistent alignment between setting labels and their respective input components.- Settings Dispatcher: Located in
js/settings.js, therenderSettings()function acts as a controller. It identifies the currently selected block and invokes specific renderers (e.g.,renderContextSettings,renderRateSettings) which assemble the UI using the factory functions.
State Synchronization
The architecture follows a "top-down" rendering flow:
- Interaction: User interacts with a UI component.
- State Update: The component's
onChangecallback modifies the globalstateobject (found injs/state.js). - Re-render: The global
render()function is called, which triggers:renderPreview(): Updates the terminal simulation.renderBlocks(): Updates the list of active/inactive blocks.renderSettings(): Refreshes the configuration panel.renderOutput(): Regenerates the Bash script.
- Persistence: The state is automatically serialized to
localStorage.
Drag-and-Drop System
The block reordering system in js/blocks.js utilizes native HTML5 Drag and Drop API. It allows users to manipulate the state.blocks array order directly. When a block is dropped into a new position, the array is spliced, and the entire UI re-renders to reflect the new statusline sequence.