# UI Layout Visual Reference
This document provides ASCII diagrams of the `seekr` user interface structure to assist with theming and development.
**Legend:**
- `[ ]` represents a Widget container or element.
- `name` indicates the CSS node name (e.g., `window`).
- `.class` indicates a CSS class (e.g., `.has_input`).
## 1. Main Window Structure
The root container holds the shell, which vertically stacks the input area and the results scroll view.
```text
+-----------------------------------------------------------+
| window (.is_layer, .gnome, etc.) |
| | | |
| | +-------------------------------------------------+ | |
| | | Overlay | | |
| | | +---------------------------------------------+ | | |
| | | | completionBox | | | |
| | | | [ completionLabel ] | | | |
| | | +---------------------------------------------+ | | |
| | | +---------------------------------------------+ | | |
| | | | inputBox (.macro_mode) | | | |
| | | | +-----------+ +---------------------------+ | | | |
| | | | | macroHint | | input (.has_input) | | | | |
| | | | | (.sh...) | | [ "Search..." ] | | | | |
| | | | +-----------+ +---------------------------+ | | | |
| | | +---------------------------------------------+ | | |
| | +-------------------------------------------------+ | |
| | | |
| | +-------------------------------------------------+ | |
| | | resultBox (GtkScrolledWindow) | | |
| | | +---------------------------------------------+ | | |
| | | | GtkBox (vertical) | | | |
| | | | | | | |
| | | | [ ... Dynamic Content ... ] | | | |
| | | | | | | |
| | | +---------------------------------------------+ | | |
| | +-------------------------------------------------+ | |
| +-------------------------------------------------------+ |
+-----------------------------------------------------------+
```
## 2. Result Items
### Application Entry
Used for launching applications.
```text
+-----------------------------------------------------------+
| | GtkBox (horizontal) | |
| | +-----------+ +------------------------------------+ | |
| | | entryIcon | | entryLabels (vertical) | | |
| | | [ IMAGE ] | | +--------------------------------+ | | |
| | | | | | entryName "Firefox" | | | |
| | | | | +--------------------------------+ | | |
| | | | | +--------------------------------+ | | |
| | | | | | entryDescription "Web Browser" | | | |
| | | | | +--------------------------------+ | | |
| | +-----------+ +------------------------------------+ | |
| +-------------------------------------------------------+ |
+-----------------------------------------------------------+
```
### File Entry
Used for local file search results.
```text
+-----------------------------------------------------------+
| | GtkBox (horizontal) | |
| | +----------+ +-------------------------------------+ | |
| | | fileIcon | | fileLabels (vertical) | | |
| | | [ ICON ] | | +---------------------------------+ | | |
| | | | | | fileName "document.pdf" | | | |
| | | | | +---------------------------------+ | | |
| | | | | +---------------------------------+ | | |
| | | | | | fileDetails "2.5MB | 10/10/23" | | | |
| | | | | +---------------------------------+ | | |
| | +----------+ +-------------------------------------+ | |
| +-------------------------------------------------------+ |
+-----------------------------------------------------------+
```
### Math Result
Displayed for calculator expressions.
```text
+-----------------------------------------------------------+
| | .head | |
| | [ .eval_icon ] [ Label: "Expression Evaluation" ] | |
| +-------------------------------------------------------+ |
| | .answer_box | |
| | +---------------------------------------------------+ | |
| | | .answer | | |
| | | [ "42" ] | | |
| | +---------------------------------------------------+ | |
| +-------------------------------------------------------+ |
+-----------------------------------------------------------+
```
## 3. Plugin Widgets
Plugins render their content into a specific container.
```text
+-----------------------------------------------------------+
| [ GtkSpinner (.processing, .<plugin_name>) ] |
| |
| [ ... Specific Plugin Widget ... ] |
| |
+-----------------------------------------------------------+
```
### Info Box (e.g., Dictionary)
```text
+-----------------------------------------------------------+
| | Label: .info_title .title-1 "Word" | |
| +-------------------------------------------------------+ |
| | Label: .info_body .body-1 "Definition text..." | |
| +-------------------------------------------------------+ |
+-----------------------------------------------------------+
```
### Console (e.g., Shell)
```text
+-----------------------------------------------------------+
| | GtkScrolledWindow | |
| | +---------------------------------------------------+ | |
| | | GtkTextView: .console_view | | |
| | | [ "Command output line 1..." ] | | |
| | | [ "Command output line 2..." ] | | |
| | +---------------------------------------------------+ | |
| +-------------------------------------------------------+ |
+-----------------------------------------------------------+
```
### Image Grid (e.g., Image Search)
```text
+-----------------------------------------------------------+
| | Label: .subtitle .title-2 "Found 5 images" | |
| +-------------------------------------------------------+ |
| | GtkFlowBox | |
| | +-------+ +-------+ +-------+ | |
| | | .flat | | .flat | | .flat | ... | |
| | | [IMG] | | [IMG] | | [IMG] | | |
| | +-------+ +-------+ +-------+ | |
| +-------------------------------------------------------+ |
+-----------------------------------------------------------+
```