Binding groups

Author: willmcgugan

src/textual/app.py

@@ -813,6 +813,8 @@ def __init__(
         self._resize_event: events.Resize | None = None
         """A pending resize event, sent on idle."""
 
+        self._size: Size | None = None
+
         self._css_update_count: int = 0
         """Incremented when CSS is invalidated."""
 
@@ -1532,6 +1534,8 @@ def size(self) -> Size:
         Returns:
             Size of the terminal.
         """
+        if self._size is not None:
+            return self._size
         if self._driver is not None and self._driver._size is not None:
             width, height = self._driver._size
         else:
@@ -4114,6 +4118,7 @@ async def _on_key(self, event: events.Key) -> None:
 
     async def _on_resize(self, event: events.Resize) -> None:
         event.stop()
+        self._size = event.size
         self._resize_event = event
 
     async def _on_app_focus(self, event: events.AppFocus) -> None:

src/textual/binding.py

@@ -66,7 +66,7 @@ class Binding:
     key_display: str | None = None
     """How the key should be shown in footer.
 
-    If None, the display of the key will use the result of `App.get_key_display`.
+    If `None`, the display of the key will use the result of `App.get_key_display`.
 
     If overridden in a keymap then this value is ignored.
     """
@@ -84,6 +84,14 @@ class Binding:
     system: bool = False
     """Make this binding a system binding, which removes it from the key panel."""
 
+    @dataclass(frozen=True)
+    class Group:
+        description: str = ""
+        """Description of the group."""
+
+    group: Group | None = None
+    """Optional binding group (used to group related bindings in the footer)."""
+
     def parse_key(self) -> tuple[list[str], str]:
         """Parse a key into a list of modifiers, and the actual key.
 
@@ -151,6 +159,7 @@ def make_bindings(cls, bindings: Iterable[BindingType]) -> Iterable[Binding]:
                     tooltip=binding.tooltip,
                     id=binding.id,
                     system=binding.system,
+                    group=binding.group,
                 )
 
 

src/textual/css/styles.py

@@ -1463,7 +1463,6 @@ def has_any_rules(self, *rule_names: str) -> bool:
         return any(inline_has_rule(name) or base_has_rule(name) for name in rule_names)
 
     def set_rule(self, rule_name: str, value: object | None) -> bool:
-        self._updates += 1
         return self._inline_styles.set_rule(rule_name, value)
 
     def get_rule(self, rule_name: str, default: object = None) -> object:
@@ -1473,7 +1472,6 @@ def get_rule(self, rule_name: str, default: object = None) -> object:
 
     def clear_rule(self, rule_name: str) -> bool:
         """Clear a rule (from inline)."""
-        self._updates += 1
         return self._inline_styles.clear_rule(rule_name)
 
     def get_rules(self) -> RulesMap:

src/textual/reactive.py

@@ -222,6 +222,8 @@ def _initialize_reactive(self, obj: Reactable, name: str) -> None:
                 else default_or_callable
             )
         setattr(obj, internal_name, default)
+        if (toggle_class := self._toggle_class) is not None:
+            obj.set_class(bool(default), *toggle_class.split())
         if self._init:
             self._check_watchers(obj, name, default)
 

src/textual/widget.py

@@ -4391,7 +4391,8 @@ def _check_refresh(self) -> None:
                     screen.post_message(messages.UpdateScroll())
                 if self._repaint_required:
                     self._repaint_required = False
-                    screen.post_message(messages.Update(self))
+                    if self.display:
+                        screen.post_message(messages.Update(self))
                 if self._layout_required:
                     self._layout_required = False
                     screen.post_message(messages.Layout())

src/textual/widgets/_footer.py

@@ -1,6 +1,7 @@
 from __future__ import annotations
 
 from collections import defaultdict
+from itertools import groupby
 from typing import TYPE_CHECKING
 
 import rich.repr
@@ -12,6 +13,7 @@
 from textual.containers import ScrollableContainer
 from textual.reactive import reactive
 from textual.widget import Widget
+from textual.widgets import Label
 
 if TYPE_CHECKING:
     from textual.screen import Screen
@@ -64,6 +66,7 @@ class FooterKey(Widget):
     """
 
     compact = reactive(True)
+    """Display compact style."""
 
     def __init__(
         self,
@@ -95,18 +98,22 @@ def render(self) -> Text:
             "footer-key--description"
         ).padding
         description = self.description
-        label_text = Text.assemble(
-            (
-                " " * key_padding.left + key_display + " " * key_padding.right,
-                key_style,
-            ),
-            (
-                " " * description_padding.left
-                + description
-                + " " * description_padding.right,
-                description_style,
-            ),
-        )
+        if description:
+            label_text = Text.assemble(
+                (
+                    " " * key_padding.left + key_display + " " * key_padding.right,
+                    key_style,
+                ),
+                (
+                    " " * description_padding.left
+                    + description
+                    + " " * description_padding.right,
+                    description_style,
+                ),
+            )
+        else:
+            label_text = Text.assemble((key_display, key_style))
+
         label_text.stylize_before(self.rich_style)
         return label_text
 
@@ -120,13 +127,17 @@ def _watch_compact(self, compact: bool) -> None:
         self.set_class(compact, "-compact")
 
 
+class FooterLabel(Label):
+    pass
+
+
 @rich.repr.auto
 class Footer(ScrollableContainer, can_focus=False, can_focus_children=False):
     ALLOW_SELECT = False
     DEFAULT_CSS = """
     Footer {
-        layout: grid;
-        grid-columns: auto;
+        layout: horizontal;
+        # grid-columns: auto;
         color: $footer-foreground;
         background: $footer-background;
         dock: bottom;
@@ -140,6 +151,11 @@ class Footer(ScrollableContainer, can_focus=False, can_focus_children=False):
             padding-right: 1;
             border-left: vkey $foreground 20%;
         }
+        HorizontalGroup.binding-group {            
+            width: auto;
+            height: 1;
+            layout: horizontal;
+        }
 
         &:ansi {
             background: ansi_default;
@@ -164,6 +180,15 @@ class Footer(ScrollableContainer, can_focus=False, can_focus_children=False):
                 border-left: vkey ansi_black;
             }
         }
+        FooterKey.-grouped {
+            margin: 0 1;
+        }
+        FooterLabel {
+            margin: 0 1;
+            background: red;
+            color: $footer-description-foreground;
+            background: $footer-description-background;
+        }
     }
     """
 
@@ -173,6 +198,8 @@ class Footer(ScrollableContainer, can_focus=False, can_focus_children=False):
     """True if the bindings are ready to be displayed."""
     show_command_palette = reactive(True)
     """Show the key to invoke the command palette."""
+    combine_groups = reactive(True)
+    """Combine bindings in the same group?"""
 
     def __init__(
         self,
@@ -217,16 +244,33 @@ def compose(self) -> ComposeResult:
             action_to_bindings[binding.action].append((binding, enabled, tooltip))
 
         self.styles.grid_size_columns = len(action_to_bindings)
-        for multi_bindings in action_to_bindings.values():
-            binding, enabled, tooltip = multi_bindings[0]
-            yield FooterKey(
-                binding.key,
-                self.app.get_key_display(binding),
-                binding.description,
-                binding.action,
-                disabled=not enabled,
-                tooltip=tooltip,
-            ).data_bind(Footer.compact)
+
+        for group, multi_bindings_iterable in groupby(
+            action_to_bindings.values(),
+            lambda multi_bindings: multi_bindings[0][0].group,
+        ):
+            if group is not None:
+                for multi_bindings in multi_bindings_iterable:
+                    binding, enabled, tooltip = multi_bindings[0]
+                    yield FooterKey(
+                        binding.key,
+                        self.app.get_key_display(binding),
+                        "",
+                        binding.action,
+                        classes="-grouped",
+                    ).data_bind(Footer.compact)
+                yield FooterLabel(group.description)
+            else:
+                for multi_bindings in multi_bindings_iterable:
+                    binding, enabled, tooltip = multi_bindings[0]
+                    yield FooterKey(
+                        binding.key,
+                        self.app.get_key_display(binding),
+                        binding.description,
+                        binding.action,
+                        disabled=not enabled,
+                        tooltip=tooltip,
+                    ).data_bind(Footer.compact)
         if self.show_command_palette and self.app.ENABLE_COMMAND_PALETTE:
             try:
                 _node, binding, enabled, tooltip = active_bindings[