anomalyco/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-07-22 02:05:26 -04:00
Code Issues 5.9k Packages Projects Releases 19 Wiki Activity

[FEATURE]: Move theme selector to floating side panel for better live preview visibility #3703

New Issue
Open
opened 2026-02-16 17:41:10 -05:00 by yindo · 2 comments
yindo commented 2026-02-16 17:41:10 -05:00
Owner
Copy Link
Copy Source

Originally created by @anntnzrb on GitHub (Dec 20, 2025).

Originally assigned to: @rekram1-node on GitHub.

Problem

When selecting a theme, the dialog appears as a centered modal that covers the main content area. While the theme preview updates live as you navigate through options, the dialog itself blocks the very content you're trying to preview — making it difficult to evaluate how each theme looks in practice.

Motivation

The whole point of live theme preview is to see how the theme affects your actual content (messages, code blocks, syntax highlighting, etc.). Having the dialog cover the center of the screen defeats this purpose.

Options Considered

Option 1: Side Panel (right edge)

Full-height panel anchored to right edge.

┌──────────────────────────────────────┬──────────────┐
│                                      │   Themes     │
│     Main Content Area                │  ──────────  │
│     (messages, code, etc.)           │  > dracula   │
│                                      │    gruvbox   │
│     Fully visible for                │    monokai   │
│     live theme preview               │    nord      │
│                                      │    ...       │
│                                      │              │
└──────────────────────────────────────┴──────────────┘

Pros: More themes visible, stable position
Cons: Takes horizontal space, full-height feels heavy

Option 2: Bottom Drawer (horizontal scroll)

Full-width drawer at bottom with themes in a horizontal scrolling row.

┌────────────────────────────────────────────────────┐
│                                                    │
│            Main Content Area                       │
│            (fully visible above drawer)            │
│                                                    │
├────────────────────────────────────────────────────┤
│  Themes  [Search...]                          esc  │
│  ◀ dracula │ gruvbox │ monokai │ nord │ ... ▶     │
└────────────────────────────────────────────────────┘

Pros: Full width visibility of content above
Cons: Limited vertical space, horizontal scrolling less intuitive

Option 3: Bottom Drawer (grid)

Multi-column grid layout at bottom.

┌────────────────────────────────────────────────────┐
│                                                    │
│            Main Content Area                       │
│                                                    │
├────────────────────────────────────────────────────┤
│  Themes  [Search...]                          esc  │
│  > dracula      │  gruvbox       │  monokai       │
│    one-dark     │  solarized     │  tokyo-night   │
└────────────────────────────────────────────────────┘

Pros: Shows many themes compactly
Cons: Complex grid navigation, less familiar UX

Option 4: Corner Float

Small floating panel in bottom-right corner.

┌────────────────────────────────────────────────────┐
│                                                    │
│            Main Content Area                       │
│                                                    │
│                                    ┌──────────────┐│
│                                    │ Themes       ││
│                                    │ [Search...]  ││
│                                    │ > dracula    ││
│                                    │   gruvbox    ││
│                                    └──────────────┘│
└────────────────────────────────────────────────────┘

Pros: Minimal footprint, non-obstructive
Cons: Compact size means fewer themes visible, more scrolling

Option 5: Compact Center

Smaller, more transparent centered modal positioned at top.

┌────────────────────────────────────────────────────┐
│    ┌──────────────────────────────────────┐        │
│    │ Themes  [Search...]              esc │        │
│    │ > dracula                            │        │
│    │   gruvbox                            │        │
│    └──────────────────────────────────────┘        │
│                                                    │
│            Main Content Area                       │
│            (partially visible below)               │
│                                                    │
└────────────────────────────────────────────────────┘

Pros: Minimal code changes, familiar centered modal pattern
Cons: Still partially blocks view

Decision

Hybrid approach: Floating Side Panel

Combines the best of the side panel (Option 1) and corner float (Option 4):

┌────────────────────────────────────────────────────────────┐
│                                                            │
│   Main Content Area                                        │
│   (fully visible - no backdrop)                            │
│                                                            │
│                                        ┌──────────────────┐│
│                                        │ Themes       esc ││
│                                        │ [Search...]      ││
│                                        │ > dracula        ││
│                                        │   gruvbox        ││
│                                        │   monokai        ││
│                                        │   nord           ││
│                                        │   one-dark       ││
│                                        │   ...            ││
│                                        └──────────────────┘│
└────────────────────────────────────���───────────────────────┘
Property Value
Position Bottom-right, anchored to right edge
Width 30 characters (compact)
Height Dynamic, up to 80% of terminal
Backdrop None (fully transparent)

Why This Approach

  1. Full content visibility — No backdrop means you see exactly how the theme affects your actual messages and code
  2. Shows enough themes — Dynamic height (up to 80%) shows 15-20+ themes without excessive scrolling
  3. Non-intrusive — Floating aesthetic feels lightweight, not modal-like
  4. Minimal disruption — Anchored to right edge keeps main content undisturbed
  5. All existing functionality preserved — Search, keyboard navigation, live preview, esc to cancel

Related

  • #815 — Hot reload theme (same goal: better live preview experience)
Originally created by @anntnzrb on GitHub (Dec 20, 2025). Originally assigned to: @rekram1-node on GitHub. ### Problem When selecting a theme, the dialog appears as a centered modal that covers the main content area. While the theme preview updates live as you navigate through options, the dialog itself blocks the very content you're trying to preview — making it difficult to evaluate how each theme looks in practice. ### Motivation The whole point of live theme preview is to see how the theme affects your actual content (messages, code blocks, syntax highlighting, etc.). Having the dialog cover the center of the screen defeats this purpose. ### Options Considered <details> <summary><b>Option 1: Side Panel (right edge)</b></summary> Full-height panel anchored to right edge. ``` ┌──────────────────────────────────────┬──────────────┐ │ │ Themes │ │ Main Content Area │ ────────── │ │ (messages, code, etc.) │ > dracula │ │ │ gruvbox │ │ Fully visible for │ monokai │ │ live theme preview │ nord │ │ │ ... │ │ │ │ └──────────────────────────────────────┴──────────────┘ ``` **Pros:** More themes visible, stable position **Cons:** Takes horizontal space, full-height feels heavy </details> <details> <summary><b>Option 2: Bottom Drawer (horizontal scroll)</b></summary> Full-width drawer at bottom with themes in a horizontal scrolling row. ``` ┌────────────────────────────────────────────────────┐ │ │ │ Main Content Area │ │ (fully visible above drawer) │ │ │ ├────────────────────────────────────────────────────┤ │ Themes [Search...] esc │ │ ◀ dracula │ gruvbox │ monokai │ nord │ ... ▶ │ └────────────────────────────────────────────────────┘ ``` **Pros:** Full width visibility of content above **Cons:** Limited vertical space, horizontal scrolling less intuitive </details> <details> <summary><b>Option 3: Bottom Drawer (grid)</b></summary> Multi-column grid layout at bottom. ``` ┌────────────────────────────────────────────────────┐ │ │ │ Main Content Area │ │ │ ├────────────────────────────────────────────────────┤ │ Themes [Search...] esc │ │ > dracula │ gruvbox │ monokai │ │ one-dark │ solarized │ tokyo-night │ └────────────────────────────────────────────────────┘ ``` **Pros:** Shows many themes compactly **Cons:** Complex grid navigation, less familiar UX </details> <details> <summary><b>Option 4: Corner Float</b></summary> Small floating panel in bottom-right corner. ``` ┌────────────────────────────────────────────────────┐ │ │ │ Main Content Area │ │ │ │ ┌──────────────┐│ │ │ Themes ││ │ │ [Search...] ││ │ │ > dracula ││ │ │ gruvbox ││ │ └──────────────┘│ └────────────────────────────────────────────────────┘ ``` **Pros:** Minimal footprint, non-obstructive **Cons:** Compact size means fewer themes visible, more scrolling </details> <details> <summary><b>Option 5: Compact Center</b></summary> Smaller, more transparent centered modal positioned at top. ``` ┌────────────────────────────────────────────────────┐ │ ┌──────────────────────────────────────┐ │ │ │ Themes [Search...] esc │ │ │ │ > dracula │ │ │ │ gruvbox │ │ │ └──────────────────────────────────────┘ │ │ │ │ Main Content Area │ │ (partially visible below) │ │ │ └────────────────────────────────────────────────────┘ ``` **Pros:** Minimal code changes, familiar centered modal pattern **Cons:** Still partially blocks view </details> ### Decision **Hybrid approach: Floating Side Panel** Combines the best of the side panel (Option 1) and corner float (Option 4): ``` ┌────────────────────────────────────────────────────────────┐ │ │ │ Main Content Area │ │ (fully visible - no backdrop) │ │ │ │ ┌──────────────────┐│ │ │ Themes esc ││ │ │ [Search...] ││ │ │ > dracula ││ │ │ gruvbox ││ │ │ monokai ││ │ │ nord ││ │ │ one-dark ││ │ │ ... ││ │ └──────────────────┘│ └────────────────────────────────────���───────────────────────┘ ``` | Property | Value | |----------|-------| | Position | Bottom-right, anchored to right edge | | Width | 30 characters (compact) | | Height | Dynamic, up to 80% of terminal | | Backdrop | None (fully transparent) | ### Why This Approach 1. **Full content visibility** — No backdrop means you see exactly how the theme affects your actual messages and code 2. **Shows enough themes** — Dynamic height (up to 80%) shows 15-20+ themes without excessive scrolling 3. **Non-intrusive** — Floating aesthetic feels lightweight, not modal-like 4. **Minimal disruption** — Anchored to right edge keeps main content undisturbed 5. **All existing functionality preserved** — Search, keyboard navigation, live preview, esc to cancel ### Related - #815 — Hot reload theme (same goal: better live preview experience)
yindo added the opentui label 2026-02-16 17:41:10 -05:00
yindo commented 2026-02-16 17:41:10 -05:00
Author
Owner
Copy Link
Copy Source

@anntnzrb commented on GitHub (Dec 20, 2025):

PR: #5869

@anntnzrb commented on GitHub (Dec 20, 2025): PR: #5869
yindo commented 2026-02-16 17:41:10 -05:00
Author
Owner
Copy Link
Copy Source

@github-actions[bot] commented on GitHub (Dec 20, 2025):

This issue might be related to existing issues. Please check:

  • #3455: [FEATURE]: Make permissions dialog non-blocking and add modifier key shortcuts - addresses a similar broader concern about blocking modals that prevent interaction with the main content
  • #815: [Feature Ask] Hot reload or add keymap to reload the theme - related goal of improving the live preview experience for theme changes

Feel free to ignore if these don't address your specific case.

@github-actions[bot] commented on GitHub (Dec 20, 2025): This issue might be related to existing issues. Please check: - #3455: [FEATURE]: Make permissions dialog non-blocking and add modifier key shortcuts - addresses a similar broader concern about blocking modals that prevent interaction with the main content - #815: [Feature Ask] Hot reload or add keymap to reload the theme - related goal of improving the live preview experience for theme changes Feel free to ignore if these don't address your specific case.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
acp
bad
bug
discussion
docs
documentation
enhancement
extension
good first issue
growth
help-wanted
mcp
model-problem
needs:compliance
nix
opentui
perf
pull-request
Mirrored from GitHub Pull Request
 tui
web
windows
zen
No Label opentui
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: anomalyco/opencode#3703
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?