design and wording update

Author: NejcS

tui/components.py

@@ -1,6 +1,6 @@
 import time
 from enum import Enum
-from typing import Optional
+from typing import Literal, Optional
 
 from textual.containers import Horizontal, Vertical, VerticalScroll
 from textual.message import Message
@@ -13,23 +13,39 @@
 class CustomFooter(Horizontal):
     """A custom footer with keyboard shortcuts and render ID."""
 
-    FOOTER_TEXT = "ctrl+c: copy  *  ctrl+d: quit  *  ctrl+l: toggle logs  *  ctrl+p: pause"
+    FOOTER_BASE_TEXT = "ctrl+c: copy  *  ctrl+d: quit  *  ctrl+l: toggle logs"
+    FOOTER_RENDERING_TEXT = FOOTER_BASE_TEXT + "  *  ctrl+p: pause"
+    RENDER_PAUSING_TEXT = FOOTER_BASE_TEXT + "  *  pausing ..."
+    RENDER_PAUSED_TEXT = FOOTER_BASE_TEXT + "  *  ctrl+p: resume"
     RENDER_FINISHED_TEXT = "enter: exit  *  ctrl+c: copy  *  ctrl+l: toggle logs"
 
     def __init__(self, render_id: str = "", **kwargs):
         super().__init__(**kwargs)
         self.render_id = render_id
 
     def compose(self):
-        self._footer_text_widget = Static(self.FOOTER_TEXT, classes="custom-footer-text")
+        self._footer_text_widget = Static(self.FOOTER_RENDERING_TEXT, classes="custom-footer-text")
         yield self._footer_text_widget
         if self.render_id:
             yield Static(f"render id: {self.render_id} ", classes="custom-footer-render-id")
 
-    def show_render_finished(self) -> None:
-        """Update footer text to show render-finished keybindings."""
+    def update_footer_state(self, state: Literal["rendering", "pausing", "paused", "finished"]) -> None:
+        self.remove_class("footer-state-default")
+        self.remove_class("footer-state-paused")
+
         if self._footer_text_widget is not None:
-            self._footer_text_widget.update(self.RENDER_FINISHED_TEXT)
+            if state == "rendering":
+                self._footer_text_widget.update(self.FOOTER_RENDERING_TEXT)
+                self.add_class("footer-state-default")
+            elif state == "pausing":
+                self._footer_text_widget.update(self.RENDER_PAUSING_TEXT)
+                self.add_class("footer-state-paused")
+            elif state == "paused":
+                self._footer_text_widget.update(self.RENDER_PAUSED_TEXT)
+                self.add_class("footer-state-paused")
+            elif state == "finished":
+                self._footer_text_widget.update(self.RENDER_FINISHED_TEXT)
+                self.add_class("footer-state-default")
 
 
 class ScriptOutputType(str, Enum):

tui/plain2code_tui.py

@@ -246,6 +246,8 @@ def _handle_frid_state(
         self._state_completion_handler.handle(segments, snapshot, previous_state_segments)
 
     def on_render_paused(self, event: RenderPaused):
+        footer = self.screen.query_one(CustomFooter)
+        footer.update_footer_state("paused")
         transition_frid_progress(self, ProgressItem.PAUSING, ProgressItem.PAUSED)
         pass
 
@@ -255,7 +257,7 @@ def on_render_completed(self, event: RenderCompleted):
         self._render_finished = True
         try:
             footer = self.screen.query_one(CustomFooter)
-            footer.show_render_finished()
+            footer.update_footer_state("finished")
         except NoMatches:
             pass
 
@@ -265,7 +267,7 @@ def on_render_failed(self, event: RenderFailed):
         self._render_finished = True
         try:
             footer = self.screen.query_one(CustomFooter)
-            footer.show_render_finished()
+            footer.update_footer_state("finished")
         except NoMatches:
             pass
 
@@ -287,9 +289,13 @@ def action_pause(self) -> None:
             if self.enter_pause_event.is_set():
                 transition_frid_progress(self, ProgressItem.PAUSED, ProgressItem.PROCESSING)
                 transition_frid_progress(self, ProgressItem.PAUSING, ProgressItem.PROCESSING)
+                footer = self.screen.query_one(CustomFooter)
+                footer.update_footer_state("rendering")
                 self.enter_pause_event.clear()
             else:
                 transition_frid_progress(self, ProgressItem.PROCESSING, ProgressItem.PAUSING)
+                footer = self.screen.query_one(CustomFooter)
+                footer.update_footer_state("pausing")
                 self.enter_pause_event.set()
 
     def action_enter_exit(self) -> None:

tui/styles.css

@@ -394,20 +394,32 @@ Footer {
 /* Custom Footer */
 CustomFooter {
   dock: bottom;
-  height: 2;
+  height: auto;
+  min-height: 1;
+  max-height: 2;
   background: transparent;
   padding: 0 1;
   align: left bottom;
 }
 
+CustomFooter.footer-state-default {
+  background: $background;
+  color: #888;
+}
+
+CustomFooter.footer-state-paused {
+  background: #0a1fd5;
+  color: #fff;
+}
+
 .custom-footer-text {
   width: 1fr;
-  color: #888;
+  background: transparent;
 }
 
 .custom-footer-render-id {
   width: auto;
-  color: #888;
+  background: transparent;
   text-align: right;
 }