feat: add css for new help screen

README.md

@@ -1,14 +1,6 @@
 # auditui
 
-A terminal-based user interface (TUI) client for Audible, written in Python 3.
+A terminal-based user interface (TUI) client for Audible, written in Python 3 : listen to your audiobooks (even offline), browse and manage your library, and more!
-
-Listen to your audiobooks or podcasts, browse your library, and more.
-
-## What it does and where are we
-
-The project offers a TUI interface for browsing your Audible library, listing your books with progress information. You can sort by progress or title, show all books, or show only unfinished books which is the default.
-
-You can also play a book by pressing `Enter` on a book in the list, and pause/resume the playback by pressing `Space`. `Left` and `Right` let you move 30 seconds backward/forward.
 
 Currently, the only available theme is Catppuccin Mocha, following their [style guide](https://github.com/catppuccin/catppuccin/blob/main/docs/style-guide.md), as it's my preferred theme across most of my tools.
 
@@ -36,6 +28,7 @@ Please also note that as of now, you need to have [ffmpeg](https://ffmpeg.org/)
 
 | Key          | Action                     |
 | ------------ | -------------------------- |
+| `?`          | Show help screen           |
 | `n`          | Sort by name               |
 | `p`          | Sort by progress           |
 | `a`          | Show all/unfinished        |
@@ -60,6 +53,7 @@ Please also note that as of now, you need to have [ffmpeg](https://ffmpeg.org/)
 - [x] add control to go to the previous/next chapter
 - [x] save/resume playback of a book from the last position, regardless of which device was used previously
 - [x] download/remove a book in the cache without having to play it
+- [x] add a help screen with all the keybindings
 - [ ] increase/decrease reading speed
 - [ ] mark a book as finished or unfinished
 - [ ] get your stats in a separated pane

auditui/app.py

@@ -6,8 +6,9 @@ from typing import TYPE_CHECKING
 
 from textual import work
 from textual.app import App, ComposeResult
-from textual.binding import Binding
+from textual.containers import Container
 from textual.events import Key
+from textual.screen import ModalScreen
 from textual.widgets import DataTable, Footer, Header, ProgressBar, Static
 from textual.worker import get_current_worker
 
@@ -26,6 +27,36 @@ if TYPE_CHECKING:
     from textual.widgets._data_table import ColumnKey
 
 
+class HelpScreen(ModalScreen):
+    """Help screen displaying all available keybindings."""
+
+    BINDINGS = [("escape", "dismiss", "Close"), ("?", "dismiss", "Close")]
+
+    def compose(self) -> ComposeResult:
+        with Container(id="help_container"):
+            yield Static("Help - Key Bindings", id="help_title")
+            help_table = DataTable(id="help_table")
+            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):
+                    key, action, description = binding
+                else:
+                    key = binding.key
+                    description = binding.description
+                key_display = key.replace(
+                    "ctrl+", "^").replace("left", "←").replace("right", "→").replace("space", "Space")
+                help_table.add_row(f"[bold]{key_display}[/]", description)
+            yield help_table
+            yield Static("Press ? or Escape to close", id="help_footer")
+
+    def action_dismiss(self) -> None:
+        self.dismiss()
+
+
 class Auditui(App):
     """Main application class for the Audible TUI app."""
 
@@ -33,6 +64,7 @@ class Auditui(App):
     SHOW_PALETTE = False
 
     BINDINGS = [
+        ("?", "show_help", "Help"),
         ("n", "sort", "Sort by name"),
         ("p", "sort_by_progress", "Sort by progress"),
         ("a", "show_all", "All/Unfinished"),
@@ -293,6 +325,10 @@ class Auditui(App):
         """Show message when no playback is active."""
         self.update_status("No playback active. Press Enter to play a book.")
 
+    def action_show_help(self) -> None:
+        """Show the help screen with all keybindings."""
+        self.push_screen(HelpScreen())
+
     def _check_playback_status(self) -> None:
         """Check if playback process has finished and update state accordingly."""
         message = self.playback.check_status()

auditui/constants.py

@@ -142,4 +142,69 @@ ProgressBar#progress_bar > .progress-bar--bar {
     background: #a6e3a1;
     width: auto;
 }
+
+HelpScreen {
+    align: center middle;
+}
+
+#help_container {
+    width: 60;
+    height: auto;
+    max-height: 80%;
+    background: #1e1e2e;
+    border: solid #585b70;
+    padding: 1;
+}
+
+#help_title {
+    text-align: center;
+    text-style: bold;
+    color: #cdd6f4;
+    margin-bottom: 1;
+    padding-bottom: 1;
+    border-bottom: solid #585b70;
+}
+
+#help_content {
+    width: 100%;
+    height: auto;
+    padding: 1;
+}
+
+#help_table {
+    width: 100%;
+    height: auto;
+    background: #1e1e2e;
+    border: none;
+    margin: 1 0;
+}
+
+#help_table > .datatable--header {
+    background: #45475a;
+    color: #bac2de;
+    text-style: bold;
+}
+
+#help_table > .datatable--cursor {
+    background: transparent;
+}
+
+#help_table > .datatable--odd-row,
+#help_table > .datatable--even-row {
+    background: #1e1e2e;
+}
+
+#help_binding {
+    padding: 0 1;
+    margin: 0;
+    color: #cdd6f4;
+}
+
+#help_footer {
+    text-align: center;
+    color: #bac2de;
+    margin-top: 1;
+    padding-top: 1;
+    border-top: solid #585b70;
+}
 """