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, the renderSettings() 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:

1. Interaction: User interacts with a UI component.
2. State Update: The component's onChange callback modifies the global state object (found in js/state.js).
3. 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.
4. 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.