feat: auto fit monitors to preview pane (#76)

## What does this PR do?

Adds `T` tui keybind to `fix monitors to screen`, by default it's run on
the first render as well.
When editing monitors it centers on the monitor center, rather than left
corner.

## Why is this change important?

Requested by users, better UX.

## How to test this PR locally?

`make pre-push`

## Related issues

Closes #74

Author: fiffeek

docs/docs/quickstart/tui.md

@@ -70,6 +70,7 @@ The Monitors view shows connected monitors on the left and a visual preview on t
 |-----|--------|
 | `+` | Zoom in on the preview |
 | `-` | Zoom out on the preview |
+| `T` | Zoom and pan monitors to fit the preview screen |
 
 ![Zoom](/previews/zoom.gif)
 

internal/tui/keymap.go

@@ -26,6 +26,7 @@ type keyMap struct {
 	ExpandHyprPreview       key.Binding
 	ResetZoom               key.Binding
 	EditHyprGeneratedConfig key.Binding
+	FitMonitors             key.Binding
 }
 
 var rootKeyMap = keyMap{
@@ -121,4 +122,8 @@ var rootKeyMap = keyMap{
 		key.WithKeys("E"),
 		key.WithHelp("E", "edit hypr generated config (ephemeral)"),
 	),
+	FitMonitors: key.NewBinding(
+		key.WithKeys("T"),
+		key.WithHelp("T", "auto fit monitors preview"),
+	),
 }

internal/tui/monitors_preview_pane.go

@@ -39,7 +39,7 @@ type MonitorsPreviewPane struct {
 }
 
 func NewMonitorsPreviewPane(monitors []*MonitorSpec) *MonitorsPreviewPane {
-	return &MonitorsPreviewPane{
+	pane := &MonitorsPreviewPane{
 		monitors:              monitors,
 		selectedIndex:         -1,
 		panX:                  0,
@@ -55,6 +55,99 @@ func NewMonitorsPreviewPane(monitors []*MonitorSpec) *MonitorsPreviewPane {
 		snapping:              true,
 		zoomStep:              1.1,
 	}
+
+	pane.autoFitMonitors()
+
+	return pane
+}
+
+// calculateMonitorBounds returns the bounding box of all non-disabled monitors
+// Returns (left, right, top, bottom, hasMonitors)
+func (p *MonitorsPreviewPane) calculateMonitorBounds() (int, int, int, int, bool) {
+	var minX, maxX, minY, maxY int
+	hasMonitors := false
+
+	for _, monitor := range p.monitors {
+		if monitor.Disabled {
+			continue
+		}
+
+		scaledWidth := int(float64(monitor.Width) / monitor.Scale)
+		scaledHeight := int(float64(monitor.Height) / monitor.Scale)
+		visualWidth := scaledWidth
+		visualHeight := scaledHeight
+
+		if monitor.NeedsDimensionsSwap() {
+			visualWidth = scaledHeight
+			visualHeight = scaledWidth
+		}
+
+		monitorLeft := monitor.X
+		monitorRight := monitor.X + visualWidth
+		monitorTop := monitor.Y
+		monitorBottom := monitor.Y + visualHeight
+
+		if !hasMonitors {
+			minX = monitorLeft
+			maxX = monitorRight
+			minY = monitorTop
+			maxY = monitorBottom
+			hasMonitors = true
+			continue
+		}
+
+		if monitorLeft < minX {
+			minX = monitorLeft
+		}
+		if monitorRight > maxX {
+			maxX = monitorRight
+		}
+		if monitorTop < minY {
+			minY = monitorTop
+		}
+		if monitorBottom > maxY {
+			maxY = monitorBottom
+		}
+	}
+
+	return minX, maxX, minY, maxY, hasMonitors
+}
+
+// autoFitMonitors centers the view on all monitors and adjusts zoom to fit
+func (p *MonitorsPreviewPane) autoFitMonitors() {
+	minX, maxX, minY, maxY, hasMonitors := p.calculateMonitorBounds()
+
+	if !hasMonitors {
+		return
+	}
+
+	p.panX = (minX + maxX) / 2
+	p.panY = (minY + maxY) / 2
+	monitorWidth := maxX - minX
+	monitorHeight := maxY - minY
+	// Add padding on both sides
+	withPadding := 1.6
+
+	if monitorWidth > 0 && monitorHeight > 0 {
+		paddedWidth := int(float64(monitorWidth) * withPadding)
+		paddedHeight := int(float64(monitorHeight) * withPadding)
+		aspectRatio := p.AspectRatio()
+		paddedHeight = int(float64(paddedHeight) * aspectRatio)
+
+		// Lock both to the same value
+		p.virtualWidth = max(paddedWidth, paddedHeight, 1000)
+		p.virtualHeight = max(paddedWidth, paddedHeight, 1000)
+
+		p.originalVirtualWidth = p.virtualWidth
+		p.originalVirtualHeight = p.virtualHeight
+	}
+}
+
+func (p *MonitorsPreviewPane) panToMonitorCenter() {
+	monitor := p.monitors[p.selectedIndex]
+	x, y := monitor.Center()
+	p.panX = x
+	p.panY = y
 }
 
 func (p *MonitorsPreviewPane) Update(msg tea.Msg) tea.Cmd {
@@ -68,16 +161,11 @@ func (p *MonitorsPreviewPane) Update(msg tea.Msg) tea.Cmd {
 		p.snapGridX = nil
 		p.snapGridY = nil
 		if p.followMonitor {
-			monitor := p.monitors[p.selectedIndex]
-			p.panX = monitor.X
-			p.panY = monitor.Y
+			p.panToMonitorCenter()
 		}
 	case MonitorBeingEdited:
 		p.selectedIndex = msg.ListIndex
-		// set panning to the current monitor left top corner
-		monitor := p.monitors[p.selectedIndex]
-		p.panX = monitor.X
-		p.panY = monitor.Y
+		p.panToMonitorCenter()
 	case MonitorUnselected:
 		p.selectedIndex = -1
 	case StateChanged:
@@ -116,6 +204,8 @@ func (p *MonitorsPreviewPane) Update(msg tea.Msg) tea.Cmd {
 			p.ZoomOut()
 		case key.Matches(msg, rootKeyMap.ResetZoom):
 			p.ResetZoom()
+		case key.Matches(msg, rootKeyMap.FitMonitors):
+			p.autoFitMonitors()
 		}
 	}
 

internal/tui/monitors_preview_pane_test.go

@@ -126,70 +126,70 @@ func TestMonitorsPreviewPane_KeyboardControls(t *testing.T) {
 			name:             "up key moves pan up when panning",
 			setupCmd:         tui.StateChangedCmd(tui.AppState{Panning: true}),
 			key:              tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{'k'}},
-			expectedPanX:     0,
-			expectedPanY:     -100,
-			expectedVirtualW: 8000,
-			expectedVirtualH: 8000,
+			expectedPanX:     960,
+			expectedPanY:     440,
+			expectedVirtualW: 3456,
+			expectedVirtualH: 3456,
 		},
 		{
 			name:             "down key moves pan down when panning",
 			setupCmd:         tui.StateChangedCmd(tui.AppState{Panning: true}),
 			key:              tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{'j'}},
-			expectedPanX:     0,
-			expectedPanY:     100,
-			expectedVirtualW: 8000,
-			expectedVirtualH: 8000,
+			expectedPanX:     960,
+			expectedPanY:     640,
+			expectedVirtualW: 3456,
+			expectedVirtualH: 3456,
 		},
 		{
 			name:             "left key moves pan left when panning",
 			setupCmd:         tui.StateChangedCmd(tui.AppState{Panning: true}),
 			key:              tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{'h'}},
-			expectedPanX:     -100,
-			expectedPanY:     0,
-			expectedVirtualW: 8000,
-			expectedVirtualH: 8000,
+			expectedPanX:     860,
+			expectedPanY:     540,
+			expectedVirtualW: 3456,
+			expectedVirtualH: 3456,
 		},
 		{
 			name:             "right key moves pan right when panning",
 			setupCmd:         tui.StateChangedCmd(tui.AppState{Panning: true}),
 			key:              tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{'l'}},
-			expectedPanX:     100,
-			expectedPanY:     0,
-			expectedVirtualW: 8000,
-			expectedVirtualH: 8000,
+			expectedPanX:     1060,
+			expectedPanY:     540,
+			expectedVirtualW: 3456,
+			expectedVirtualH: 3456,
 		},
 		{
 			name:             "up key does nothing when not panning",
 			key:              tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{'k'}},
-			expectedPanX:     0,
-			expectedPanY:     0,
-			expectedVirtualW: 8000,
-			expectedVirtualH: 8000,
+			expectedPanX:     960,
+			expectedPanY:     540,
+			expectedVirtualW: 3456,
+			expectedVirtualH: 3456,
 		},
 		{
 			name:             "center key resets pan to 0,0",
 			setupCmd:         tui.StateChangedCmd(tui.AppState{Panning: true}),
 			key:              tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{'c'}},
 			expectedPanX:     0,
 			expectedPanY:     0,
-			expectedVirtualW: 8000,
-			expectedVirtualH: 8000,
+			expectedVirtualW: 3456,
+			expectedVirtualH: 3456,
 		},
 		{
 			name:             "zoom in decreases virtual dimensions",
 			key:              tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{'+'}},
-			expectedPanX:     0,
-			expectedPanY:     0,
-			expectedVirtualW: 7272,
-			expectedVirtualH: 7272,
+			expectedPanX:     960,
+			expectedPanY:     540,
+			expectedVirtualW: 3141,
+			expectedVirtualH: 3141,
 		},
 		{
 			name:             "zoom out increases virtual dimensions",
 			key:              tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{'-'}},
-			expectedPanX:     0,
-			expectedPanY:     0,
-			expectedVirtualW: 8800,
-			expectedVirtualH: 8800,
+			expectedPanX:     960,
+			expectedPanY:     540,
+			expectedVirtualW: 3801,
+			expectedVirtualH: 3801,
 		},
 	}
 

internal/tui/root.go

@@ -552,7 +552,7 @@ func (m *Model) GlobalHelp() []key.Binding {
 			rootKeyMap.Pan,
 			rootKeyMap.Fullscreen, rootKeyMap.FollowMonitor, rootKeyMap.Center, rootKeyMap.ZoomIn, rootKeyMap.ZoomOut,
 			rootKeyMap.ToggleSnapping, rootKeyMap.ApplyHypr,
-			rootKeyMap.ExpandHyprPreview, rootKeyMap.ResetZoom,
+			rootKeyMap.ExpandHyprPreview, rootKeyMap.ResetZoom, rootKeyMap.FitMonitors,
 		}
 		bindings = append(bindings, monitors...)
 

internal/tui/root_test.go

@@ -54,13 +54,17 @@ func TestModel_Update_UserFlows(t *testing.T) {
 			monitorsData: defaultMonitorData,
 			runFor:       utils.JustPtr(500 * time.Millisecond),
 			steps: []step{
+				{
+					msg:                   tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{'j'}},
+					expectOutputToContain: "► DP-1",
+				},
 				{
 					msg:                   tea.KeyMsg{Type: tea.KeyEnter},
 					expectOutputToContain: "EDITING",
 				},
 				{
 					msg:                   tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{'r'}},
-					expectOutputToContain: "eDP-1→",
+					expectOutputToContain: "DP-1→",
 				},
 			},
 		},
@@ -414,7 +418,7 @@ func TestModel_Update_UserFlows(t *testing.T) {
 				{
 					msg:                   tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{'j'}},
 					times:                 utils.IntPtr(10),
-					expectOutputToContain: "Center: (3800,1000)",
+					expectOutputToContain: "Center: (7640,2020)",
 				},
 			},
 		},
@@ -504,19 +508,51 @@ func TestModel_Update_UserFlows(t *testing.T) {
 			steps: []step{
 				{
 					msg:                   tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{'+'}},
-					expectOutputToContain: "Virtual Area: 7272x7272 ",
+					expectOutputToContain: "Virtual Area: 11170x11170",
 				},
 			},
 		},
 
+		{
+			name:         "initial",
+			monitorsData: defaultMonitorData,
+			runFor:       utils.JustPtr(500 * time.Millisecond),
+			steps:        []step{},
+		},
+
 		{
 			name:         "zoom_out",
 			monitorsData: defaultMonitorData,
 			runFor:       utils.JustPtr(500 * time.Millisecond),
 			steps: []step{
 				{
 					msg:                   tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{'-'}},
-					expectOutputToContain: "Virtual Area: 8800x8800",
+					expectOutputToContain: "Virtual Area: 13516x13516",
+				},
+			},
+		},
+
+		{
+			name:         "fit",
+			monitorsData: defaultMonitorData,
+			runFor:       utils.JustPtr(800 * time.Millisecond),
+			steps: []step{
+				{
+					msg:                   tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{'j'}},
+					expectOutputToContain: "► HEADLESS-1 (Headless Virtua...)",
+					times:                 utils.JustPtr(3),
+				},
+				{
+					msg:                   tea.KeyMsg{Type: tea.KeyEnter},
+					expectOutputToContain: "► HEADLESS-1 (Headless Virtua...) [EDITING]",
+				},
+				{
+					msg:                   tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{'e'}},
+					expectOutputToContain: "Disabled",
+				},
+				{
+					msg:                   tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{'T'}},
+					expectOutputToContain: "Center: (2880,1020)",
 				},
 			},
 		},
@@ -537,11 +573,11 @@ func TestModel_Update_UserFlows(t *testing.T) {
 				{
 					msg:                   tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{'j'}},
 					times:                 utils.IntPtr(10),
-					expectOutputToContain: "Center: (1000,1000)",
+					expectOutputToContain: "Center: (4840,2020)",
 				},
 				{
 					msg:                   tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{'c'}},
-					expectOutputToContain: "Virtual Area: 8000x8000 | Snapping",
+					expectOutputToContain: "Virtual Area: 12288x12288 | Snapping",
 				},
 				{
 					msg:        tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{'p'}},