Improve Application Layout

[rluders]

Description

The current layout of the TUI provides basic functionality but lacks a cohesive structure that enhances clarity, usability, and overall user experience. Improving the layout will make the application easier to navigate, more intuitive for end-users, and aligned with the long-term vision of berth.

Goals

• Refactor the TUI into well-defined visual sections
• Standardize screen elements across all tabs (containers, images, volumes, etc.)
• Create a consistent command/help area and notification zone
• Prepare the UI foundation for future features like log streaming, stats, and filters

Proposed Layout Changes

Based on the provided wireframe (see image below):

1. Top Section

   • Display app title and active container engine (e.g., "Podman")

   • Horizontal menu with tab keys:

     • 1 - Containers
     • 2 - Images
     • 3 - Volumes
     • 4 - System
     • Q - Quit
     • 0 - Settings

2. Right Sidebar

   • Show container statistics:

     • Number of containers, images, volumes, networks
     • Disk usage or system info (optional)

3. Main Content Area

   • Dynamic view based on active tab
   • Should support tables, live logs, details view, etc.

4. Bottom Bar

   • Tab-specific command hints:

     • e.g., ESC - Back, s - Start, x - Stop, i - Inspect, l - Logs

   • Notification/message area:

     • Used for loading states, errors, success messages, etc.

Suggested Improvements

• Introduce a screen state enum (e.g. screenContainers, screenLogs, screenSettings)
• Use [Bubbletea’s](https://github.com/charmbracelet/bubbletea) viewport or flex layout for responsive UI sections
• Add clear separation between content and controls (e.g. use horizontal rules or spacing)
• Standardize footer messages using a statusBar field in the model

Benefits

• Better UX and clarity for end users
• Easier to maintain and extend UI logic
• Paves the way for features like log viewers, stats, and settings

Mockup / Reference

---

Tasks

• Define screen layout structure in Model
• Refactor View() to use consistent layout sections
• Implement tab switching in top navigation
• Create footer message system
• Integrate right-side stats box
• Ensure layout works on narrow terminals (responsive)

[pedrovian4]

@rluders can I try implement this?

[rluders]

@pedrovian4 sure. Go ahead.