feat: relooking of help screen

auditui/app.py

@@ -6,7 +6,7 @@ from typing import TYPE_CHECKING
 
 from textual import work
 from textual.app import App, ComposeResult
-from textual.containers import Container
+from textual.containers import Container, Horizontal, ScrollableContainer
 from textual.events import Key
 from textual.screen import ModalScreen
 from textual.widgets import DataTable, Footer, Header, ProgressBar, Static
@@ -34,12 +34,8 @@ class HelpScreen(ModalScreen):
 
     def compose(self) -> ComposeResult:
         with Container(id="help_container"):
-            yield Static("Help - Key Bindings", id="help_title")
+            yield Static("Key Bindings", id="help_title")
-            help_table = DataTable(id="help_table")
+            with ScrollableContainer(id="help_content"):
-            help_table.add_columns("Key", "Action")
-            help_table.show_header = True
-            help_table.zebra_stripes = False
-            help_table.cursor_type = "none"
                 bindings = self.app.BINDINGS
                 for binding in bindings:
                     if isinstance(binding, tuple):
@@ -48,10 +44,11 @@ class HelpScreen(ModalScreen):
                         key = binding.key
                         description = binding.description
                     key_display = key.replace(
-                    "ctrl+", "^").replace("left", "←").replace("right", "→").replace("space", "Space")
+                        "ctrl+", "^").replace("left", "←").replace("right", "→").replace("space", "Space").replace("enter", "Enter")
-                help_table.add_row(f"[bold]{key_display}[/]", description)
+                    with Horizontal(classes="help_row"):
-            yield help_table
+                        yield Static(f"[bold #f9e2af]{key_display}[/]", classes="help_key")
-            yield Static("Press ? or Escape to close", id="help_footer")
+                        yield Static(description, classes="help_action")
+            yield Static("Press [bold #f9e2af]?[/] or [bold #f9e2af]Escape[/] to close", id="help_footer")
 
     def action_dismiss(self) -> None:
         self.dismiss()

auditui/constants.py

@@ -140,71 +140,97 @@ ProgressBar#progress_bar > .progress-bar--track {
 
 ProgressBar#progress_bar > .progress-bar--bar {
     background: #a6e3a1;
-    width: auto;
 }
 
 HelpScreen {
     align: center middle;
+    background: rgba(0, 0, 0, 0.7);
 }
 
 #help_container {
-    width: 60;
+    width: 70;
     height: auto;
-    max-height: 80%;
+    max-height: 85%;
+    min-height: 20;
     background: #1e1e2e;
-    border: solid #585b70;
+    border: thick #89b4fa;
-    padding: 1;
+    padding: 2;
 }
 
 #help_title {
     text-align: center;
     text-style: bold;
-    color: #cdd6f4;
+    color: #89b4fa;
-    margin-bottom: 1;
+    margin-bottom: 2;
     padding-bottom: 1;
     border-bottom: solid #585b70;
+    height: 3;
+    align: center middle;
 }
 
 #help_content {
     width: 100%;
-    height: auto;
+    height: 1fr;
-    padding: 1;
+    padding: 1 0;
-}
-
-#help_table {
-    width: 100%;
-    height: auto;
-    background: #1e1e2e;
-    border: none;
     margin: 1 0;
+    overflow-y: auto;
+    scrollbar-size: 0 1;
 }
 
-#help_table > .datatable--header {
+#help_content > .scrollbar--vertical {
+    background: #313244;
+}
+
+#help_content > .scrollbar--vertical > .scrollbar--track {
+    background: #181825;
+}
+
+#help_content > .scrollbar--vertical > .scrollbar--handle {
+    background: #585b70;
+}
+
+#help_content > .scrollbar--vertical > .scrollbar--handle:hover {
     background: #45475a;
-    color: #bac2de;
-    text-style: bold;
 }
 
-#help_table > .datatable--cursor {
+.help_row {
-    background: transparent;
+    height: 3;
-}
+    margin: 0 0 1 0;
-
-#help_table > .datatable--odd-row,
-#help_table > .datatable--even-row {
-    background: #1e1e2e;
-}
-
-#help_binding {
     padding: 0 1;
-    margin: 0;
+    background: #181825;
+    border: solid #313244;
+    align: left middle;
+}
+
+.help_row:hover {
+    background: #313244;
+    border: solid #45475a;
+}
+
+.help_key {
+    width: 20;
+    text-align: right;
+    padding: 0 2 0 0;
+    color: #f9e2af;
+    text-style: bold;
+    align: right middle;
+}
+
+.help_action {
+    width: 1fr;
+    text-align: left;
+    padding: 0 0 0 2;
     color: #cdd6f4;
+    align: left middle;
 }
 
 #help_footer {
     text-align: center;
     color: #bac2de;
-    margin-top: 1;
+    margin-top: 2;
     padding-top: 1;
     border-top: solid #585b70;
+    height: 3;
+    align: center middle;
 }
 """