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

src/shellmate/ssh/server.py

@@ -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
+        # Chess piece decorations
-        if session.width >= 70:
+        pieces = "♔ ♕ ♖ ♗ ♘ ♙"
-            title_lines = [
+        
-                r"  ____  _          _ _ __  __       _       ",
+        # Title with gradient effect
-                r" / ___|| |__   ___| | |  \/  | __ _| |_ ___ ",
+        if session.width >= 50:
-                r" \___ \| '_ \ / _ \ | | |\/| |/ _` | __/ _ \",
+            console.print(Align.center(Text(pieces, style="dim white")))
-                r"  ___) | | | |  __/ | | |  | | (_| | ||  __/",
+            console.print()
-                r" |____/|_| |_|\___|_|_|_|  |_|\__,_|\__\___|",
+            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")))
-            for line in title_lines:
+            console.print(Align.center(Text("SSH into Chess Mastery", style="italic bright_black")))
-                console.print(Align.center(Text(line, style="bold green")))
+            console.print(Align.center(Text(pieces[::-1], style="dim white")))
-        else:
+        else:
-            console.print(Align.center(Text("♟  SHELLMATE  ♟", style="bold green")))
+            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 items as a table for better alignment
-        menu_content = f"""
+        menu_table = Table(show_header=False, box=None, padding=(0, 2))
-[cyan]Welcome, [bold]{username}[/bold]![/cyan]
+        menu_table.add_column(justify="center")
-
+        menu_table.add_row(f"[cyan]Welcome, [bold bright_white]{username}[/]![/cyan]")
-  [bold white][[1]][/] ⚔️   Play vs AI
+        menu_table.add_row("")
-  [bold white][[2]][/] 👥  Play vs Human
+        menu_table.add_row("[bright_white on blue] 1 [/]  [white]Play vs AI[/]       [dim]♔ vs ♚[/dim]")
-  [bold white][[3]][/] 📚  Learn & Practice
+        menu_table.add_row("[bright_white on magenta] 2 [/]  [white]Play vs Human[/]   [dim]♔ vs ♔[/dim]")
-  [bold white][[q]][/] 🚪  Quit
+        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]")
-[dim]Press a key to select...[/dim]
+        menu_table.add_row("")
-"""
+        menu_table.add_row("[dim italic]Press a key to select...[/dim]")
-        panel_width = min(50, session.width - 4)
+        
+        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 ♔[/]",
+            padding=(1, 2),
-            subtitle=f"[dim]{session.width}x{session.height}[/dim]"
         )
         console.print(Align.center(panel))
+        
+        # Footer
+        console.print()
+        console.print(Align.center(Text(f"Terminal: {session.width}×{session.height}", style="dim")))
     
     render_menu()