UI Components & Theming
Relevant source files
The following files were used as context for generating this wiki page:
- frontend/src/features/workflows/activity-ui/PythonCodeField.tsx
- frontend/src/features/workflows/activity-ui/TemplateInput.tsx
- frontend/src/features/accounts/components/AccountsShared.tsx
- frontend/src/components/layout/app-sidebar.tsx
- frontend/src/features/workflows/components/WorkflowFlowEditor.tsx
- frontend/src/features/workflows/components/NodeSettingsPanel.tsx
- frontend/src/features/scraped-data/components/ScrapedDataList.tsx
The UI Components & Theming system in this project is built on a modern React stack, utilizing Tailwind CSS for styling and a set of shared primitives to ensure visual consistency across the automation platform. The architecture emphasizes a "utilitarian aesthetic," characterized by dark-themed panels, high-contrast status indicators, and specialized editors for automation tasks such as Python scripting and message templating.
The system is organized into high-level layout components, feature-specific UI modules (e.g., Workflow Editor, Scraped Data List), and low-level shared components that handle common patterns like metrics display, status banners, and data tables.
Visual Design & Theming
The application employs a sophisticated dark-themed design system. The theme is defined through a set of semantic CSS variables (e.g., --workflow-grid) and utility classes that manage "panel-subtle," "panel-strong," and "ink" colors. This system supports specialized UI states such as "ambient glow" and "page-title-gradient" to distinguish different sections of the management interface.
Status Indicators
A core part of the UI is the status feedback system, which uses consistent "tones" to represent different states of automation tasks or account health.
| Tone | Background Utility | Text Utility | Usage Context |
|---|---|---|---|
| Danger | bg-status-danger-soft | text-status-danger | Failed workflows, errors, deletions |
| Warning | bg-status-warning-soft | text-status-warning | Cancelled tasks, configuration alerts |
| Success | bg-status-success-soft | text-status-success | Completed tasks, active profiles, valid imports |
Sources: frontend/src/features/accounts/components/AccountsShared.tsx:18-35, frontend/src/features/workflows/components/WorkflowDetails.tsx:126-140
Specialized Editor Components
The project includes advanced components for editing automation logic, specifically for Python code and message templates.
Python Code Editor
The PythonCodeField uses CodeMirror to provide a VS Code-inspired editing experience. It supports syntax highlighting, line numbers, and bracket matching.
- Inline Editor: A compact view used within the workflow settings sidebar.
- Modal Editor: A full-screen dialog for complex script editing, including a status bar with line and character counts.
Template Input System
The TemplateInput component manages message templates and includes a macro insertion system. It allows users to type / to trigger a dropdown of available placeholders like {userName} or {fullName}.
Sources: frontend/src/features/workflows/activity-ui/TemplateInput.tsx:112-160
Workflow Editor Interface
The Workflow Editor is the most complex UI module, integrating reactflow for visual programming with custom node types and settings panels.
Editor Architecture
The editor is divided into a toolbar, a canvas for the flow diagram, and a contextual settings panel that appears when a node is selected.
Component Breakdown
- ActivityNode: Custom nodes representing automation actions (e.g., browsing, messaging).
- NodeSettingsPanel: A sidebar that dynamically renders input groups based on the
ActivityDefinition. It usesSettingsPanelHeaderto display the activity's category and specific accent color. - EditorToolbar: Provides actions for adding blocks, clearing the canvas, and saving the workflow.
Sources: frontend/src/features/workflows/components/WorkflowFlowEditor.tsx:47-85, frontend/src/features/workflows/components/NodeSettingsPanel.tsx:24-65
Shared UI Patterns
The repository utilizes several shared components to maintain consistency across different management pages (Profiles, Accounts, Scraped Data).
Lists and Tables
The platform uses a standardized table pattern for data-heavy views. The ScrapedDataList and ListsList components implement responsive behaviors, switching between Table layouts on desktop and "Mobile Cards" on smaller screens.
| Component | Description | Key Features |
|---|---|---|
MetricCard | Displays high-level stats (e.g., "Rows Scraped"). | Support for "danger" and "success" accents. |
SamplePreview | Shows a preview of imported data (e.g., CSV). | Highlights detected fields like Username. |
StatusBanner | Inline notifications at the top of panels. | Semantic coloring via "tones". |
Sources: frontend/src/features/accounts/components/AccountsShared.tsx:47-65, frontend/src/features/scraped-data/components/ScrapedDataList.tsx:160-220
Navigation Layout
The AppSidebar defines the primary navigation structure of the application. It uses SidebarMenu from the UI library to organize links into categories like "Platform," with icons provided by lucide-react.
Sources: frontend/src/components/layout/app-sidebar.tsx:64-125
Summary
The UI system is designed for high-density information management and automation configuration. By combining standard Radix-based UI primitives with specialized editors (CodeMirror) and flow-based visualization (React Flow), the project provides a unified environment for managing Instagram automation workflows and their resulting data. All components adhere to a shared color and status system, ensuring that automation state (Running, Failed, Completed) is immediately recognizable across the entire interface.