# Theme Widget - Web Version

An application that's part of the greater Playproject ecosystem, developed as a tool for managing the visual appearance (themes) and structure of web components. It's designed for designers to experiment with styles (CSS) and data, all within a browser environment.

## **Main Components & Sub-Component Breakdown**

Breakdown of the four main components and their potential sub-components within a **web-based** context.

### Graph Explorer

**Purpose:** To display the hierarchical relationships of web components, their themes, and associated files using an interactive visual tree structure. It allows users to navigate and select entries.

* **Sub-Components:**
* **Tree View:**
* *Node Element (Entry):*
* *Expand/Collapse Button (➕/➖ or ▶/◀):* Controls the visibility of child entries.
* *Entry Icon (🌐, 📁, 🎨, 🧩, 🗄️, 🔗):* Represents the type of entry (e.g., theme, component, CSS).
* *Entry Label:* Text describing the entry's name. e.g., `themes`, `night.json`
* *Link Indicator:* A visual cue (e.g., a small icon) to show that an entry has links to another one.
* *Link Lines:* Lines connecting parent-child entries to indicate hierarchy and flow.
* **Selection Highlight:** Visual cues to indicate the currently selected node.
* **Entry Actions:** Actions that can be triggered on the currently selected node.
* **Input/Output indicators:** Visual cues to indicate if an entry has input/output.

* **Key Functionalities:**
* Hierarchical display of the tree-like structure.
* Visual indication of relationships through lines.
* Entry Selection via mouse or keyboard.
* Expansion and collapsing of nodes.
* Displaying associated themes, component, and css.
* Pinning the most used resources.

### Tabbed Editor

**Purpose:** To present code/data files in a user-friendly, tabbed view, allowing for basic code/data editing capabilities.

* **Sub-Components:**
* **Tab Bar:**
* *Tab Element:* Displays an open file, including the name and potentially a changed indicator.
* *Active Tab Indicator:* A visual cue (e.g. a background highlight) for the currently active tab.
* *Close Tab Button:* A button to close the tab.
* *Scroll Bar*: Visual indicator if there are too many tabs to be viewed.
* **Editor Area:**
* *Code Editor:* Text area for editing, with syntax highlight.
* **Undo/Redo Buttons** Action to revert the changes that have been done.
* **Action Log:** Shows actions related to editing such as undo, redo, or saves.
* **Key Functionalities:**
* Tabbed view of multiple editable files (CSS or JSON).
* Syntax highlighting of the text editor.
* Undo and redo options.
* Saving changes to file

### Action Bar

**Purpose:** To provide a way for users to interact with the application through commands and show the context of the application.

* **Sub-Components:**
* **Current Entry Indicator/Bread Crumb:** Shows the currently selected entry or path in the graph explorer
* A button to interact with this indicator can be added.
* **Command Input Field:** Accepts text input for commands, providing auto-complete suggestions.
* *Command Suggestion Drop Up/Down Menu:* Displays a filtered list of commands that match the user's input.
* *Command highlight*: A highlight of the current selected command in the dropdown menu.
* *Action Buttons*: Visual Buttons to trigger actions.
* *History Log*: Stores and displays recently executed commands.
* *Help Button*: Displays help text and relevant command syntax.

* **Key Functionalities:**
* Triggering actions via slash commands.
* Showing the list of actions available for current selection.
* Triggering single and multi step actions.
* Using keyboard for selecting items from drop down menu.
* Shows history of actions
* Provides help text

### Command History

**Purpose:** To keep track of all the action done in the app.

* **Sub-Components:**
* **Command History Panel**: Shows a list of log of all actions done.
* **Key Functionalities**
* Log every action taken.
* Filter through the actions by typing or searching in text.
* Navigate in history to a previous log state.

**Key Considerations for Web Version:**

* **HTML Elements:** Use semantic HTML to structure components.
* **CSS Styling:** Leverage CSS for flexible layouts and theming.
* **JavaScript Interactivity:** Use JavaScript to handle component logic, state changes, and user interactions.
* **State:** How is the application's data managed? (e.g., which file is open)
* **Accessibility:** Consider ARIA attributes for keyboard navigation and screen reader accessibility.
* **Components:** Should be designed in a way to make it themeable and also have a clear component structure so to be re-usable in other apps as well.