# How Superfile Handles Window Resize Events: Inside the Bubble Tea Architecture

> Discover how Superfile manages window resize events using Bubble Tea's tea.WindowSizeMsg. Learn how it updates dimensions and recalculates UI layouts efficiently.

- Repository: [Yorukot/superfile](https://github.com/yorukot/superfile)
- Tags: internals
- Published: 2026-07-28

---

**Superfile handles window resize events by intercepting Bubble Tea's `tea.WindowSizeMsg` in the model's `Update` method, delegating to `handleWindowResize` to update internal dimensions and recalculate UI component layouts through a cascading sequence of layout helpers.**

Superfile is a terminal-based file manager built with the Bubble Tea TUI framework. When users resize their terminal window, the application must rapidly recalculate layout dimensions for sidebars, file panels, and footers while maintaining a responsive interface.

## The Resize Event Pipeline

The resize handling follows a strict pipeline to ensure all UI components synchronize with the new terminal dimensions. When the terminal window changes size, Bubble Tea emits a `tea.WindowSizeMsg` that triggers a chain of updates through the model's state management system.

The complete flow follows this path:

```

WindowSizeMsg → Update → handleWindowResize → setHeightValues → updateComponentDimensions → setMainModelDimensions → re-render

```

## Message Routing in the Update Loop

In [`src/internal/model.go`](https://github.com/yorukot/superfile/blob/main/src/internal/model.go), the `Update` method serves as the entry point for all Bubble Tea messages. The function performs type checking on the incoming `msg` parameter to identify window resize events.

When `msg` matches `tea.WindowSizeMsg`, the code assigns the result of `m.handleWindowResize(msg)` to a variable named `resizeCmd`. This command joins the batch of commands that Bubble Tea executes to update the UI.

## Updating Internal Size State

The `handleWindowResize` function, located in [`src/internal/model.go`](https://github.com/yorukot/superfile/blob/main/src/internal/model.go), performs the initial state updates. This function stores the new terminal dimensions in `m.fullHeight` and `m.fullWidth`, then immediately invokes `m.setHeightValues()` to recompute derived heights for the footer and main panel.

### Recalculating Component Dimensions

The `setHeightValues` method determines the footer height based on the new terminal height and updates `m.mainPanelHeight` accordingly. These calculations rely on constants defined in [`src/internal/common/ui_consts.go`](https://github.com/yorukot/superfile/blob/main/src/internal/common/ui_consts.go), including `HeightBreakA` and `ResponsiveWidthThreshold`, alongside helper functions such as `utils.FullFooterHeight`.

### Propagating Layout Changes

Next, `updateComponentDimensions` adjusts the sizes of every UI sub-component, including the help menu, prompt modal, zoxide modal, footer, sidebar, and file panels. This function calls `setMainModelDimensions`, which specifically updates the sidebar and file-panel dimensions based on the new width and height values.

## Command Return and Re-rendering

`handleWindowResize` returns the command produced by `m.updateComponentDimensions()`. This command forces a re-render of the preview panel and any other components whose layout depends on terminal dimensions, ensuring the UI reflects the new size immediately.

## Practical Code Examples

### Simulating Resize Events Programmatically

You can trigger the same resize logic used internally for testing or custom UI wrappers:

```go
// Simulate a resize event – useful in tests or custom UI wrappers
func simulateResize(m *model, w, h int) tea.Cmd {
    msg := tea.WindowSizeMsg{Width: w, Height: h}
    // Directly call the internal handler
    return m.handleWindowResize(msg)
}

```

### Unit Testing Resize Handling

Verify that width and height updates propagate correctly through the model:

```go
func TestHandleWindowResize(t *testing.T) {
    m := NewTestModel() // creates a model with default dimensions
    cmd := m.handleWindowResize(tea.WindowSizeMsg{Width: 120, Height: 40})
    // Execute the command to apply the new layout
    _ = cmd()
    if m.fullWidth != 120 || m.fullHeight != 40 {
        t.Fatalf("window size not updated")
    }
}

```

## Key Implementation Files

The resize handling spans several files in the `yorukot/superfile` repository:

- [`src/internal/model.go`](https://github.com/yorukot/superfile/blob/main/src/internal/model.go) — Contains the core `Update` method, `handleWindowResize`, and layout calculation helpers
- [`src/internal/common/ui_consts.go`](https://github.com/yorukot/superfile/blob/main/src/internal/common/ui_consts.go) — Defines height breakpoints and responsive thresholds used during resize calculations
- [`src/internal/common/common.go`](https://github.com/yorukot/superfile/blob/main/src/internal/common/common.go) — Provides utility functions such as `FullFooterHeight` for component sizing
- [`src/internal/ui/filepanel/model.go`](https://github.com/yorukot/superfile/blob/main/src/internal/ui/filepanel/model.go) — Implements file-panel logic receiving dimensions from `setMainModelDimensions`
- [`src/internal/ui/sidebar/model.go`](https://github.com/yorukot/superfile/blob/main/src/internal/ui/sidebar/model.go) — Manages sidebar sizing updated through `setMainModelDimensions`

## Summary

- Superfile uses Bubble Tea's `tea.WindowSizeMsg` to detect terminal resize events in the model's `Update` method.
- The `handleWindowResize` function in [`src/internal/model.go`](https://github.com/yorukot/superfile/blob/main/src/internal/model.go) stores new dimensions in `fullHeight` and `fullWidth`, then triggers cascading layout recalculations.
- `setHeightValues` computes derived heights while `updateComponentDimensions` propagates changes to all UI sub-components.
- Constants from [`src/internal/common/ui_consts.go`](https://github.com/yorukot/superfile/blob/main/src/internal/common/ui_consts.go) and utilities like `FullFooterHeight` ensure consistent responsive behavior.
- The architecture isolates resize handling while ensuring every panel adapts to new terminal dimensions through a predictable command pipeline.

## Frequently Asked Questions

### What message type does Superfile use to detect window resizes?

Superfile detects window resizes using Bubble Tea's `tea.WindowSizeMsg` type. The model's `Update` method in [`src/internal/model.go`](https://github.com/yorukot/superfile/blob/main/src/internal/model.go) type-checks incoming messages and routes `tea.WindowSizeMsg` instances to the `handleWindowResize` function for processing.

### Where does Superfile store the current terminal dimensions?

The current terminal dimensions are stored in the model's `fullHeight` and `fullWidth` fields. These values are updated immediately when `handleWindowResize` processes a resize event, before triggering recalculations for derived dimensions like `mainPanelHeight`.

### How does Superfile calculate heights for different UI components?

Superfile calculates component heights using the `setHeightValues` method, which references constants from [`src/internal/common/ui_consts.go`](https://github.com/yorukot/superfile/blob/main/src/internal/common/ui_consts.go) such as `HeightBreakA`. The function `utils.FullFooterHeight` provides specific calculations for footer dimensions, while `updateComponentDimensions` distributes space across sidebars, file panels, and modals.

### Can I test Superfile's resize handling without manually resizing the terminal?

Yes, you can invoke `handleWindowResize` directly with a simulated `tea.WindowSizeMsg` in your tests. This allows you to verify that your model updates its `fullWidth`, `fullHeight`, and component dimensions correctly without requiring actual terminal interaction.