@@ -1,15 +1,25 @@
1# UI Development Instructions
1# UI Development Instructions
3## General Guidelines
3## General Guidelines
4- Never use commands to send messages when you can directly mutate children or state.
5- Never use commands to send messages when you can directly mutate children or state.
5- Keep things simple; do not overcomplicate.
6- Keep things simple; do not overcomplicate.
6- Create files if needed to separate logic; do not nest models.
7- Create files if needed to separate logic; do not nest models.
7- Never do IO or expensive work in `Update`; always use a `tea.Cmd`.
8- Never do IO or expensive work in `Update`; always use a `tea.Cmd`.
8- Never change the model state inside of a command use messages and than update the state in the main loop
9- Never change the model state inside of a command use messages and than update the state in the main loop
10+- Use the `github.com/charmbracelet/x/ansi` package for any string manipulation
11+ that might involves ANSI codes. Do not manipulate ANSI strings at byte level!
12+ Some useful functions:
10## Architecture
19## Architecture
12### Main Model (`model/ui.go`)
21### Main Model (`model/ui.go`)
13Keep most of the logic and state in the main model. This is where:
23Keep most of the logic and state in the main model. This is where:
14- Message routing happens
24- Message routing happens
15- Focus and UI state is managed
25- Focus and UI state is managed
@@ -17,35 +27,42 @@ Keep most of the logic and state in the main model. This is where:
17- Dialogs are orchestrated
27- Dialogs are orchestrated
19### Components Should Be Dumb
29### Components Should Be Dumb
20Components should not handle bubbletea messages directly. Instead:
31Components should not handle bubbletea messages directly. Instead:
21- Expose methods for state changes
32- Expose methods for state changes
22- Return `tea.Cmd` from methods when side effects are needed
33- Return `tea.Cmd` from methods when side effects are needed
23- Handle their own rendering via `Render(width int) string`
34- Handle their own rendering via `Render(width int) string`
25### Chat Logic (`model/chat.go`)
36### Chat Logic (`model/chat.go`)
26Most chat-related logic belongs here. Individual chat items in `chat/` should be simple renderers that cache their output and invalidate when data changes (see `cachedMessageItem` in `chat/messages.go`).
38Most chat-related logic belongs here. Individual chat items in `chat/` should be simple renderers that cache their output and invalidate when data changes (see `cachedMessageItem` in `chat/messages.go`).
28## Key Patterns
40## Key Patterns
30### Composition Over Inheritance
42### Composition Over Inheritance
31Use struct embedding for shared behaviors. See `chat/messages.go` for examples of reusable embedded structs for highlighting, caching, and focus.
44Use struct embedding for shared behaviors. See `chat/messages.go` for examples of reusable embedded structs for highlighting, caching, and focus.
33### Interfaces
46### Interfaces
34- List item interfaces are in `list/item.go`
48- List item interfaces are in `list/item.go`
35- Chat message interfaces are in `chat/messages.go`
49- Chat message interfaces are in `chat/messages.go`
36- Dialog interface is in `dialog/dialog.go`
50- Dialog interface is in `dialog/dialog.go`
38### Styling
52### Styling
39- All styles are defined in `styles/styles.go`
54- All styles are defined in `styles/styles.go`
40- Access styles via `*common.Common` passed to components
55- Access styles via `*common.Common` passed to components
41- Use semantic color fields rather than hardcoded colors
56- Use semantic color fields rather than hardcoded colors
43### Dialogs
58### Dialogs
44- Implement the dialog interface in `dialog/dialog.go`
60- Implement the dialog interface in `dialog/dialog.go`
45- Return message types from `Update()` to signal actions to the main model
61- Return message types from `Update()` to signal actions to the main model
46- Use the overlay system for managing dialog lifecycle
62- Use the overlay system for managing dialog lifecycle
48## File Organization
64## File Organization
49- `model/` - Main UI model and major components (chat, sidebar, etc.)
66- `model/` - Main UI model and major components (chat, sidebar, etc.)
50- `chat/` - Chat message item types and renderers
67- `chat/` - Chat message item types and renderers
51- `dialog/` - Dialog implementations
68- `dialog/` - Dialog implementations
@@ -56,6 +73,7 @@ Use struct embedding for shared behaviors. See `chat/messages.go` for examples o
56- `logo/` - Logo rendering
73- `logo/` - Logo rendering
58## Common Gotchas
75## Common Gotchas
59- Always account for padding/borders in width calculations
77- Always account for padding/borders in width calculations
60- Use `tea.Batch()` when returning multiple commands
78- Use `tea.Batch()` when returning multiple commands
61- Pass `*common.Common` to components that need styles or app access
79- Pass `*common.Common` to components that need styles or app access