Improve menu UI - better styling, table layout, color badges

This commit is contained in:
Greg Hendrickson
2026-01-27 18:44:44 +00:00
parent 788393a46f
commit 0ada6cb418

View File

@@ -7,6 +7,8 @@ import sys
from typing import Optional
import asyncssh
from shellmate.tui.app import ShellMateApp
logger = logging.getLogger(__name__)
@@ -124,9 +126,10 @@ async def run_simple_menu(process, session: TerminalSession, username: str, mode
from rich.panel import Panel
from rich.text import Text
from rich.align import Align
from rich.box import DOUBLE, ROUNDED
from rich.box import HEAVY, ROUNDED, DOUBLE
from rich.table import Table
from rich.layout import Layout
from rich.style import Style
import io
class ProcessWriter:
@@ -140,55 +143,58 @@ async def run_simple_menu(process, session: TerminalSession, username: str, mode
def render_menu():
"""Render the main menu centered on screen."""
writer = ProcessWriter(session)
console = Console(file=writer, width=session.width, height=session.height, force_terminal=True)
console = Console(file=writer, width=session.width, height=session.height, force_terminal=True, color_system="truecolor")
session.clear()
# Calculate vertical padding for centering
menu_height = 18
menu_height = 22
top_pad = max(0, (session.height - menu_height) // 2)
for _ in range(top_pad):
console.print()
# ASCII art title - using simple ASCII for compatibility
if session.width >= 70:
title_lines = [
r" ____ _ _ _ __ __ _ ",
r" / ___|| |__ ___| | | \/ | __ _| |_ ___ ",
r" \___ \| '_ \ / _ \ | | |\/| |/ _` | __/ _ \",
r" ___) | | | | __/ | | | | | (_| | || __/",
r" |____/|_| |_|\___|_|_|_| |_|\__,_|\__\___|",
]
for line in title_lines:
console.print(Align.center(Text(line, style="bold green")))
else:
console.print(Align.center(Text(" SHELLMATE ", style="bold green")))
# Chess piece decorations
pieces = "♔ ♕ ♖ ♗ ♘ ♙"
# Title with gradient effect
if session.width >= 50:
console.print(Align.center(Text(pieces, style="dim white")))
console.print()
console.print(Align.center(Text("S H E L L M A T E", style="bold bright_green")))
console.print(Align.center(Text("" * 20, style="green")))
console.print(Align.center(Text("SSH into Chess Mastery", style="italic bright_black")))
console.print(Align.center(Text(pieces[::-1], style="dim white")))
else:
console.print(Align.center(Text("♟ SHELLMATE ♟", style="bold green")))
console.print(Align.center(Text("SSH into Chess Mastery", style="dim italic")))
console.print()
# Menu panel
menu_content = f"""
[cyan]Welcome, [bold]{username}[/bold]![/cyan]
[bold white][[1]][/] ⚔️ Play vs AI
[bold white][[2]][/] 👥 Play vs Human
[bold white][[3]][/] 📚 Learn & Practice
[bold white][[q]][/] 🚪 Quit
[dim]Press a key to select...[/dim]
"""
panel_width = min(50, session.width - 4)
# Menu items as a table for better alignment
menu_table = Table(show_header=False, box=None, padding=(0, 2))
menu_table.add_column(justify="center")
menu_table.add_row(f"[cyan]Welcome, [bold bright_white]{username}[/]![/cyan]")
menu_table.add_row("")
menu_table.add_row("[bright_white on blue] 1 [/] [white]Play vs AI[/] [dim]♔ vs ♚[/dim]")
menu_table.add_row("[bright_white on magenta] 2 [/] [white]Play vs Human[/] [dim]♔ vs ♔[/dim]")
menu_table.add_row("[bright_white on green] 3 [/] [white]Learn & Practice[/] [dim]📖[/dim]")
menu_table.add_row("[bright_white on red] q [/] [white]Quit[/] [dim]👋[/dim]")
menu_table.add_row("")
menu_table.add_row("[dim italic]Press a key to select...[/dim]")
panel_width = min(45, session.width - 4)
panel = Panel(
Align.center(menu_content),
Align.center(menu_table),
box=ROUNDED,
border_style="bright_blue",
width=panel_width,
title="[bold white]♔ Main Menu ♔[/]",
subtitle=f"[dim]{session.width}x{session.height}[/dim]"
padding=(1, 2),
)
console.print(Align.center(panel))
# Footer
console.print()
console.print(Align.center(Text(f"Terminal: {session.width}×{session.height}", style="dim")))
render_menu()