fix(lyrics): make L work at any width and surface it in the status bar

Below 80 columns the lyrics drawer declined to open, because the station
list will not render under 28 columns beside an 18 column sidebar. The only
feedback was one dim status-bar line, so pressing L on a narrow terminal
looked like a dead key.

The sheet now has two surfaces. At 80 columns or wider it stays a drawer
beside the station list; below that it takes over the content area as a
full-width overlay. Resizing moves an open sheet between the two instead of
making it vanish, and the width refusal is gone entirely.

The status bar also carries [L] Lyrics and [A] Art on every station tab.
Previously the keys appeared only in the which-key overlay, so nothing in
the default view hinted the feature existed. The legend is clipped to the
terminal width, so its order is now a priority list and the two new entries
sit near the front; y/Yank and a/Add move to the widest tier only.

Verified against the real binary in a pty at 70 columns: L opens the
overlay and the legend shows both keys.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: Kenth Fagerlund

README.md

@@ -331,7 +331,8 @@ Modern terminals grew real graphics capabilities, so `halpradio` uses them. Pres
 - **Auto-Scrolling Karaoke View**: When timestamped `.lrc` data exists, the drawer highlights the line being sung, fades the surrounding lines, and draws a progress gauge across the active line.
 - **Manual Scroll For Plain Text**: Unsynced lyrics render as a formatted sheet you scroll with `j` / `k`.
 - **Sync Nudge**: Internet radio exposes no seek position, so the lyric clock starts when the station announces a new title. Press `,` and `.` to shift the sync in 0.5 second steps when a station announces late or early.
-- **Never Blocks The UI**: Every lookup runs as a Bubble Tea command off the update loop, so the TUI stays responsive on slow connections, and the drawer takes its own columns rather than overlapping the station list.
+- **Never Blocks The UI**: Every lookup runs as a Bubble Tea command off the update loop, so the TUI stays responsive on slow connections.
+- **Fits Any Terminal**: At 80 columns or wider the drawer takes its own columns rather than overlapping the station list; below that the sheet becomes a full-width overlay, and resizing moves it between the two without closing it.
 - **Disk & Memory Cache**: Sheets are memoised in RAM and cached under `~/.cache/halpradio/lyrics/`, and stations with no match are negative-cached so the APIs are not hammered every track.
 
 ### 🖼️ Multi-Protocol Album Art (`A` key)

docs/LYRICS_AND_ART.md

@@ -149,11 +149,13 @@ JSON sidecar holding the provider, origin URL and fetch time.
 └───────────────────────────────┴────────────────────────────────┘
 ```
 
-- The drawer **takes its own columns** rather than overlapping the station
-  list, so the list keeps its own layout and selection.
-- It needs an 80 column terminal, because the station list will not render
-  below 28 columns beside an 18 column sidebar. Narrower terminals get a status
-  message instead of a broken frame.
+- On an 80 column terminal or wider the drawer **takes its own columns** rather
+  than overlapping the station list, so the list keeps its layout and
+  selection.
+- Below that the sheet takes over the content area as a full-width overlay,
+  because the station list will not render under 28 columns beside an 18 column
+  sidebar. `L` therefore always shows something at any width, and resizing
+  moves the sheet between the two surfaces without closing it.
 - Every lookup runs as a Bubble Tea command off the update loop, so a slow
   provider never blocks the keyboard. Results that arrive after the track has
   changed are dropped by comparing the track key.
@@ -174,6 +176,9 @@ JSON sidecar holding the provider, origin URL and fetch time.
 | `h` | Return focus to the station list, leaving the drawer open |
 | `Esc` | Close the drawer |
 
+The status bar carries `[L] Lyrics` and `[A] Art` on every station tab, so the
+feature is discoverable without opening the which-key overlay.
+
 ### Configuration
 
 ```yaml

pkg/ui/components/statusbar.go

@@ -162,49 +162,66 @@ func RenderStatusBar(searchQuery string, message string, activeTab int, width in
 			}
 		}
 	} else {
-		// Standard tabs legend
-		if width >= 95 {
+		// Standard tabs legend. The bar is clipped to the terminal width, so
+		// the order doubles as a priority list: anything that has to survive
+		// on a narrow terminal belongs near the front.
+		if width >= 118 {
 			items = []struct {
 				key  string
 				desc string
 			}{
 				{"j/k", "Nav"},
-				{"Space", "Play/Pause"},
+				{"Space", "Play"},
+				{"L", "Lyrics"},
+				{"A", "Art"},
 				{"I", "Identify"},
-				{"z", "Timer/Pomo"},
+				{"z", "Timer"},
 				{"f", "Fav"},
-				{"y", "Yank"},
 				{"+/-", "Vol"},
 				{"/", "Search"},
-				{"a", "Add"},
-				{"?", "WhichKey"},
+				{"?", "Help"},
 				{"q", "Quit"},
 			}
-		} else if width >= 65 {
+		} else if width >= 95 {
 			items = []struct {
 				key  string
 				desc string
 			}{
 				{"j/k", "Nav"},
 				{"Space", "Play"},
+				{"L", "Lyrics"},
+				{"A", "Art"},
 				{"z", "Timer"},
-				{"f", "Fav"},
 				{"+/-", "Vol"},
 				{"/", "Search"},
 				{"?", "Help"},
 				{"q", "Quit"},
 			}
-		} else {
+		} else if width >= 65 {
 			items = []struct {
 				key  string
 				desc string
 			}{
 				{"j/k", "Nav"},
 				{"Space", "Play"},
+				{"L", "Lyrics"},
+				{"A", "Art"},
+				{"f", "Fav"},
 				{"/", "Search"},
 				{"?", "Help"},
 				{"q", "Quit"},
 			}
+		} else {
+			items = []struct {
+				key  string
+				desc string
+			}{
+				{"j/k", "Nav"},
+				{"Space", "Play"},
+				{"L", "Lyrics"},
+				{"?", "Help"},
+				{"q", "Quit"},
+			}
 		}
 	}
 

pkg/ui/components/statusbar_test.go

@@ -4,6 +4,7 @@ import (
 	"strings"
 	"testing"
 
+	"github.com/charmbracelet/lipgloss"
 	"github.com/halpworld/halpradio/pkg/theme"
 )
 
@@ -50,3 +51,28 @@ func TestRenderStatusBar(t *testing.T) {
 		t.Errorf("Expected Sweep/Band keys in Tuner statusbar, got: %s", tunerOut)
 	}
 }
+
+func TestRenderStatusBar_SurfacesLyricsAndArtKeys(t *testing.T) {
+	th := theme.GetTheme("tokyonight")
+	for _, width := range []int{65, 80, 95, 118, 140, 200} {
+		out := RenderStatusBar("", "", 1, width, th)
+		if !strings.Contains(out, "[L]") {
+			t.Errorf("width %d: expected the lyrics key in the legend, got:\n%s", width, out)
+		}
+		if !strings.Contains(out, "[A]") {
+			t.Errorf("width %d: expected the album art key in the legend, got:\n%s", width, out)
+		}
+		if got := lipgloss.Width(out); got > width {
+			t.Errorf("width %d: legend rendered %d columns", width, got)
+		}
+	}
+
+	// The narrowest tier keeps lyrics but drops art, and must still fit.
+	narrow := RenderStatusBar("", "", 1, 50, th)
+	if !strings.Contains(narrow, "[L]") {
+		t.Errorf("expected the lyrics key to survive a 50 column legend, got:\n%s", narrow)
+	}
+	if got := lipgloss.Width(narrow); got > 50 {
+		t.Errorf("narrow legend rendered %d columns, want at most 50", got)
+	}
+}

pkg/ui/nowplaying.go

@@ -218,11 +218,13 @@ func (m Model) fetchCoverCmd(stationID, key string) tea.Cmd {
 
 // LyricsDrawerMinWidth is the narrowest terminal that can host the drawer
 // alongside the station list, which itself will not render below 28 columns
-// next to an 18 column sidebar.
+// next to an 18 column sidebar. Below this the sheet takes over the content
+// area instead, so L always shows something.
 const LyricsDrawerMinWidth = 80
 
 // LyricsDrawerWidth returns how many columns the lyrics drawer occupies for a
-// given terminal width, or 0 when the terminal is too narrow to host it.
+// given terminal width, or 0 when the terminal cannot host it beside the
+// station list.
 func LyricsDrawerWidth(width int) int {
 	if width < LyricsDrawerMinWidth {
 		return 0
@@ -237,6 +239,34 @@ func LyricsDrawerWidth(width int) int {
 	return w
 }
 
+// LyricsSurface says where the lyric sheet is drawn at a given terminal size.
+type LyricsSurface int
+
+const (
+	// LyricsSurfaceHidden means the sheet is not on screen.
+	LyricsSurfaceHidden LyricsSurface = iota
+	// LyricsSurfaceDrawer puts the sheet beside the station list.
+	LyricsSurfaceDrawer
+	// LyricsSurfaceOverlay gives the sheet the whole content area, for
+	// terminals too narrow to show both.
+	LyricsSurfaceOverlay
+)
+
+// lyricsSurface reports where the sheet goes and how many columns it gets.
+func (m Model) lyricsSurface() (LyricsSurface, int) {
+	if !m.ShowLyrics {
+		return LyricsSurfaceHidden, 0
+	}
+	width := m.Width
+	if width == 0 {
+		width = 80
+	}
+	if drawer := LyricsDrawerWidth(width); drawer > 0 {
+		return LyricsSurfaceDrawer, drawer
+	}
+	return LyricsSurfaceOverlay, width
+}
+
 // artTarget returns the cell dimensions artwork should be rendered at for the
 // currently visible surface, or zeroes when artwork has nowhere to go.
 func (m Model) artTarget() (cols, rows int) {
@@ -264,14 +294,11 @@ func (m Model) artTarget() (cols, rows int) {
 		return cols, rows
 	}
 
-	if !m.ShowLyrics {
-		return 0, 0
-	}
-	drawer := LyricsDrawerWidth(width)
-	if drawer == 0 {
+	surface, surfaceWidth := m.lyricsSurface()
+	if surface == LyricsSurfaceHidden {
 		return 0, 0
 	}
-	cols = drawer - 6
+	cols = surfaceWidth - 6
 	if cols > 20 {
 		cols = 20
 	}
@@ -390,11 +417,6 @@ func (m *Model) toggleLyricsDrawer() []tea.Cmd {
 		m.renderArt()
 		return nil
 	}
-	if LyricsDrawerWidth(m.Width) == 0 && m.Width > 0 {
-		m.StatusMessage = fmt.Sprintf("Terminal too narrow for the lyrics drawer (needs %d columns)", LyricsDrawerMinWidth)
-		return nil
-	}
-
 	m.ShowLyrics = true
 	m.ActiveFocus = FocusLyrics
 	cmds := m.syncNowPlaying()

pkg/ui/nowplaying_test.go

@@ -51,16 +51,59 @@ func TestLyricsKey_TogglesDrawerAndFocus(t *testing.T) {
 	}
 }
 
-func TestLyricsKey_RefusedOnNarrowTerminal(t *testing.T) {
-	m := sizedTestModel(70, 20)
+func TestLyricsKey_FallsBackToOverlayOnNarrowTerminal(t *testing.T) {
+	m := sizedTestModel(70, 24)
 
 	updated, _ := m.Update(keyRune('L'))
 	m = updated.(Model)
-	if m.ShowLyrics {
-		t.Error("expected the drawer to stay closed on a 60 column terminal")
+	if !m.ShowLyrics {
+		t.Fatal("expected L to open the sheet even on a 70 column terminal")
+	}
+
+	surface, surfaceWidth := m.lyricsSurface()
+	if surface != LyricsSurfaceOverlay {
+		t.Errorf("expected the overlay surface below %d columns, got %v", LyricsDrawerMinWidth, surface)
+	}
+	if surfaceWidth != 70 {
+		t.Errorf("expected the overlay to take the full width, got %d", surfaceWidth)
+	}
+
+	out := m.View()
+	if !strings.Contains(out, "LIVE LYRICS") {
+		t.Error("expected the sheet to be visible on a narrow terminal")
+	}
+	// The overlay replaces the station list rather than squeezing beside it.
+	if strings.Contains(out, "Ambient Two") {
+		t.Error("expected the overlay to take over the content area")
+	}
+	if got := lipgloss.Width(out); got > 70 {
+		t.Errorf("overlay view is %d columns wide, exceeds the terminal", got)
+	}
+}
+
+func TestLyricsSurface_SwitchesOnResize(t *testing.T) {
+	m := sizedTestModel(120, 40)
+	updated, _ := m.Update(keyRune('L'))
+	m = updated.(Model)
+
+	if surface, _ := m.lyricsSurface(); surface != LyricsSurfaceDrawer {
+		t.Fatalf("expected a drawer at 120 columns, got %v", surface)
 	}
-	if !strings.Contains(m.StatusMessage, "too narrow") {
-		t.Errorf("expected a width warning, got %q", m.StatusMessage)
+
+	// Shrinking the window must not make the open sheet vanish.
+	updated, _ = m.Update(tea.WindowSizeMsg{Width: 70, Height: 24})
+	m = updated.(Model)
+	if surface, _ := m.lyricsSurface(); surface != LyricsSurfaceOverlay {
+		t.Errorf("expected the sheet to become an overlay after shrinking, got %v", surface)
+	}
+	if !strings.Contains(m.View(), "LIVE LYRICS") {
+		t.Error("expected the sheet to stay visible after shrinking")
+	}
+
+	updated, _ = m.Update(tea.WindowSizeMsg{Width: 120, Height: 40})
+	m = updated.(Model)
+	if surface, _ := m.lyricsSurface(); surface != LyricsSurfaceDrawer {
+		t.Error("expected the drawer to come back when the window grows")
 	}
 }
 

pkg/ui/view.go

@@ -177,22 +177,17 @@ func (m Model) View() string {
 		mainContentHeight = 3
 	}
 
-	// The lyrics drawer steals columns from the main content area so the
-	// station list keeps its own layout instead of being overlapped.
+	// Beside the station list the drawer steals columns so the list keeps its
+	// own layout. On a terminal too narrow for both, the sheet takes over the
+	// content area instead of silently declining to appear.
+	lyricsSurface, lyricsWidth := m.lyricsSurface()
 	contentWidth := width
-	drawerWidth := 0
-	if m.ShowLyrics {
-		drawerWidth = LyricsDrawerWidth(width)
-		if drawerWidth > 0 {
-			contentWidth = width - drawerWidth - 1
-			if contentWidth < 24 {
-				contentWidth = 24
-				drawerWidth = width - contentWidth - 1
-				if drawerWidth < 24 {
-					drawerWidth = 0
-					contentWidth = width
-				}
-			}
+	if lyricsSurface == LyricsSurfaceDrawer {
+		contentWidth = width - lyricsWidth - 1
+		if contentWidth < 24 {
+			lyricsSurface = LyricsSurfaceOverlay
+			lyricsWidth = width
+			contentWidth = width
 		}
 	}
 
@@ -346,8 +341,8 @@ func (m Model) View() string {
 		)
 	}
 
-	if drawerWidth > 0 {
-		drawerView := components.RenderLyricsDrawer(components.LyricsDrawerInput{
+	if lyricsSurface != LyricsSurfaceHidden {
+		lyricsView := components.RenderLyricsDrawer(components.LyricsDrawerInput{
 			Sheet:      m.LyricsSheet,
 			Status:     m.LyricsStatus,
 			Fetching:   m.IsFetchingLyrics,
@@ -359,10 +354,14 @@ func (m Model) View() string {
 			Offset:     m.LyricsOffset,
 			Scroll:     m.LyricsScroll,
 			Focused:    m.ActiveFocus == FocusLyrics,
-			Width:      drawerWidth,
+			Width:      lyricsWidth,
 			Height:     mainContentHeight,
 		}, m.Theme)
-		mainArea = lipgloss.JoinHorizontal(lipgloss.Top, mainArea, " ", drawerView)
+		if lyricsSurface == LyricsSurfaceDrawer {
+			mainArea = lipgloss.JoinHorizontal(lipgloss.Top, mainArea, " ", lyricsView)
+		} else {
+			mainArea = lyricsView
+		}
 	}
 
 	return artClear + lipgloss.JoinVertical(