Refactor modal CSS definitions to use centralized style constants for improved maintainability and consistency across the TUI application.

src/hosts/tui/add_entry_modal.py

@@ -11,6 +11,7 @@ from textual.screen import ModalScreen
 from textual.binding import Binding
 
 from ..core.models import HostEntry
+from .styles import ADD_ENTRY_MODAL_CSS
 
 
 class AddEntryModal(ModalScreen):
@@ -20,51 +21,7 @@ class AddEntryModal(ModalScreen):
     Provides a floating window with input fields for creating new entries.
     """
 
-    CSS = """
+    CSS = ADD_ENTRY_MODAL_CSS
-    AddEntryModal {
-        align: center middle;
-    }
-    
-    .add-entry-container {
-        width: 80;
-        height: 25;
-        background: $surface;
-        border: thick $primary;
-        padding: 1;
-    }
-    
-    .add-entry-title {
-        text-align: center;
-        text-style: bold;
-        color: $primary;
-        margin-bottom: 1;
-    }
-    
-    .add-entry-section {
-        margin: 1 0;
-    }
-    
-    .add-entry-input {
-        margin: 0 2;
-        width: 1fr;
-    }
-    
-    .button-row {
-        margin-top: 2;
-        align: center middle;
-    }
-    
-    .add-entry-button {
-        margin: 0 1;
-        min-width: 10;
-    }
-    
-    .validation-error {
-        color: $error;
-        margin: 0 2;
-        text-style: italic;
-    }
-    """
 
     BINDINGS = [
         Binding("escape", "cancel", "Cancel"),

src/hosts/tui/app.py

@@ -460,7 +460,6 @@ class HostsManagerApp(App):
 
         self.push_screen(DeleteConfirmationModal(entry), handle_delete_confirmation)
 
-
     def action_quit(self) -> None:
         """Quit the application."""
         self.navigation_handler.quit_application()

src/hosts/tui/config_modal.py

@@ -11,6 +11,7 @@ from textual.screen import ModalScreen
 from textual.binding import Binding
 
 from ..core.config import Config
+from .styles import CONFIG_MODAL_CSS
 
 
 class ConfigModal(ModalScreen):
@@ -20,44 +21,7 @@ class ConfigModal(ModalScreen):
     Provides a floating window with configuration options.
     """
 
-    CSS = """
+    CSS = CONFIG_MODAL_CSS
-    ConfigModal {
-        align: center middle;
-    }
-    
-    .config-container {
-        width: 80;
-        height: 20;
-        background: $surface;
-        border: thick $primary;
-        padding: 1;
-    }
-    
-    .config-title {
-        text-align: center;
-        text-style: bold;
-        color: $primary;
-        margin-bottom: 1;
-    }
-    
-    .config-section {
-        margin: 1 0;
-    }
-    
-    .config-option {
-        margin: 0 2;
-    }
-    
-    .button-row {
-        margin-top: 2;
-        align: center middle;
-    }
-    
-    .config-button {
-        margin: 0 1;
-        min-width: 10;
-    }
-    """
 
     BINDINGS = [
         Binding("escape", "cancel", "Cancel"),

src/hosts/tui/delete_confirmation_modal.py

@@ -11,6 +11,7 @@ from textual.screen import ModalScreen
 from textual.binding import Binding
 
 from ..core.models import HostEntry
+from .styles import DELETE_CONFIRMATION_MODAL_CSS
 
 
 class DeleteConfirmationModal(ModalScreen):
@@ -20,48 +21,7 @@ class DeleteConfirmationModal(ModalScreen):
     Provides a confirmation dialog before deleting host entries.
     """
 
-    CSS = """
+    CSS = DELETE_CONFIRMATION_MODAL_CSS
-    DeleteConfirmationModal {
-        align: center middle;
-    }
-    
-    .delete-container {
-        width: 60;
-        height: 15;
-        background: $surface;
-        border: thick $error;
-        padding: 1;
-    }
-    
-    .delete-title {
-        text-align: center;
-        text-style: bold;
-        color: $error;
-        margin-bottom: 1;
-    }
-    
-    .delete-message {
-        text-align: center;
-        margin: 1 0;
-    }
-    
-    .entry-info {
-        text-align: center;
-        text-style: bold;
-        color: $primary;
-        margin: 1 0;
-    }
-    
-    .button-row {
-        margin-top: 2;
-        align: center middle;
-    }
-    
-    .delete-button {
-        margin: 0 1;
-        min-width: 10;
-    }
-    """
 
     BINDINGS = [
         Binding("escape", "cancel", "Cancel"),

src/hosts/tui/help_modal.py

@@ -10,6 +10,8 @@ from textual.widgets import Static, Button
 from textual.screen import ModalScreen
 from textual.binding import Binding
 
+from .styles import HELP_MODAL_CSS
+
 
 class HelpModal(ModalScreen):
     """
@@ -18,59 +20,7 @@ class HelpModal(ModalScreen):
     Provides comprehensive help information for using the application.
     """
 
-    CSS = """
+    CSS = HELP_MODAL_CSS
-    HelpModal {
-        align: center middle;
-    }
-    
-    .help-container {
-        width: 90;
-        height: 40;
-        background: $surface;
-        border: thick $primary;
-        padding: 1;
-    }
-    
-    .help-title {
-        text-align: center;
-        text-style: bold;
-        color: $primary;
-        margin-bottom: 1;
-    }
-    
-    .help-content {
-        height: 35;
-        margin: 1 0;
-    }
-    
-    .help-section {
-        margin-bottom: 1;
-    }
-    
-    .help-section-title {
-        text-style: bold;
-        color: $primary;
-        margin-bottom: 0;
-    }
-    
-    .help-item {
-        margin: 0 2;
-    }
-    
-    .keyboard-shortcut {
-        text-style: bold;
-        color: $accent;
-    }
-    
-    .button-row {
-        margin-top: 1;
-        align: center middle;
-    }
-    
-    .help-button {
-        min-width: 10;
-    }
-    """
 
     BINDINGS = [
         Binding("escape", "close", "Close"),

src/hosts/tui/password_modal.py

@@ -10,6 +10,8 @@ from textual.widgets import Static, Button, Input
 from textual.screen import ModalScreen
 from textual.binding import Binding
 
+from .styles import PASSWORD_MODAL_CSS
+
 
 class PasswordModal(ModalScreen):
     """
@@ -18,52 +20,7 @@ class PasswordModal(ModalScreen):
     Provides a floating window for entering sudo password with proper masking.
     """
 
-    CSS = """
+    CSS = PASSWORD_MODAL_CSS
-    PasswordModal {
-        align: center middle;
-    }
-    
-    .password-container {
-        width: 60;
-        height: 12;
-        background: $surface;
-        border: thick $primary;
-        padding: 1;
-    }
-    
-    .password-title {
-        text-align: center;
-        text-style: bold;
-        color: $primary;
-        margin-bottom: 1;
-    }
-    
-    .password-message {
-        text-align: center;
-        color: $text;
-        margin-bottom: 1;
-    }
-    
-    .password-input {
-        margin: 1 0;
-    }
-    
-    .button-row {
-        margin-top: 1;
-        align: center middle;
-    }
-    
-    .password-button {
-        margin: 0 1;
-        min-width: 10;
-    }
-    
-    .error-message {
-        color: $error;
-        text-align: center;
-        margin: 1 0;
-    }
-    """
 
     BINDINGS = [
         Binding("escape", "cancel", "Cancel"),

src/hosts/tui/save_confirmation_modal.py

@@ -10,6 +10,8 @@ from textual.widgets import Static, Button, Label
 from textual.screen import ModalScreen
 from textual.binding import Binding
 
+from .styles import SAVE_CONFIRMATION_MODAL_CSS
+
 
 class SaveConfirmationModal(ModalScreen):
     """
@@ -18,45 +20,7 @@ class SaveConfirmationModal(ModalScreen):
     Provides a confirmation dialog asking whether to save or discard changes.
     """
 
-    CSS = """
+    CSS = SAVE_CONFIRMATION_MODAL_CSS
-    SaveConfirmationModal {
-        align: center middle;
-    }
-    
-    .save-confirmation-container {
-        width: 60;
-        height: 15;
-        background: $surface;
-        border: thick $primary;
-        padding: 1;
-    }
-    
-    .save-confirmation-title {
-        text-align: center;
-        text-style: bold;
-        color: $primary;
-        margin-bottom: 1;
-    }
-    
-    .save-confirmation-message {
-        text-align: center;
-        margin-bottom: 2;
-        color: $text;
-    }
-    
-    .button-row {
-        align: center middle;
-    }
-    
-    .save-confirmation-button {
-        margin: 0 1;
-        min-width: 12;
-    }
-    
-    .save-confirmation-button:focus {
-        border: thick $accent;
-    }
-    """
 
     BINDINGS = [
         Binding("escape", "cancel", "Cancel"),

src/hosts/tui/styles.py

@@ -128,3 +128,294 @@ Header.-tall {
     height: 1; /* Fix tall header also to height 1 */
 }
 """
+
+# Common CSS classes shared across components
+COMMON_CSS = """
+.button-row {
+    margin-top: 1;
+    align: center middle;
+}
+
+.hidden {
+    display: none;
+}
+"""
+
+# Help Modal CSS
+HELP_MODAL_CSS = (
+    COMMON_CSS
+    + """
+HelpModal {
+    align: center middle;
+}
+
+.help-container {
+    width: 90;
+    height: 40;
+    background: $surface;
+    border: thick $primary;
+    padding: 1;
+}
+
+.help-title {
+    text-align: center;
+    text-style: bold;
+    color: $primary;
+    margin-bottom: 1;
+}
+
+.help-content {
+    height: 35;
+    margin: 1 0;
+}
+
+.help-section {
+    margin-bottom: 1;
+}
+
+.help-section-title {
+    text-style: bold;
+    color: $primary;
+    margin-bottom: 0;
+}
+
+.help-item {
+    margin: 0 2;
+}
+
+.keyboard-shortcut {
+    text-style: bold;
+    color: $accent;
+}
+
+.help-button {
+    min-width: 10;
+}
+"""
+)
+
+# Add Entry Modal CSS
+ADD_ENTRY_MODAL_CSS = (
+    COMMON_CSS
+    + """
+AddEntryModal {
+    align: center middle;
+}
+
+.add-entry-container {
+    width: 80;
+    height: 25;
+    background: $surface;
+    border: thick $primary;
+    padding: 1;
+}
+
+.add-entry-title {
+    text-align: center;
+    text-style: bold;
+    color: $primary;
+    margin-bottom: 1;
+}
+
+.add-entry-section {
+    margin: 1 0;
+}
+
+.add-entry-input {
+    margin: 0 2;
+    width: 1fr;
+}
+
+.button-row {
+    margin-top: 2;
+    align: center middle;
+}
+
+.add-entry-button {
+    margin: 0 1;
+    min-width: 10;
+}
+
+.validation-error {
+    color: $error;
+    margin: 0 2;
+    text-style: italic;
+}
+"""
+)
+
+# Delete Confirmation Modal CSS
+DELETE_CONFIRMATION_MODAL_CSS = (
+    COMMON_CSS
+    + """
+DeleteConfirmationModal {
+    align: center middle;
+}
+
+.delete-container {
+    width: 60;
+    height: 15;
+    background: $surface;
+    border: thick $error;
+    padding: 1;
+}
+
+.delete-title {
+    text-align: center;
+    text-style: bold;
+    color: $error;
+    margin-bottom: 1;
+}
+
+.delete-message {
+    text-align: center;
+    margin: 1 0;
+}
+
+.entry-info {
+    text-align: center;
+    text-style: bold;
+    color: $primary;
+    margin: 1 0;
+}
+
+.button-row {
+    margin-top: 2;
+    align: center middle;
+}
+
+.delete-button {
+    margin: 0 1;
+    min-width: 10;
+}
+"""
+)
+
+# Password Modal CSS
+PASSWORD_MODAL_CSS = (
+    COMMON_CSS
+    + """
+PasswordModal {
+    align: center middle;
+}
+
+.password-container {
+    width: 60;
+    height: 12;
+    background: $surface;
+    border: thick $primary;
+    padding: 1;
+}
+
+.password-title {
+    text-align: center;
+    text-style: bold;
+    color: $primary;
+    margin-bottom: 1;
+}
+
+.password-message {
+    text-align: center;
+    color: $text;
+    margin-bottom: 1;
+}
+
+.password-input {
+    margin: 1 0;
+}
+
+.password-button {
+    margin: 0 1;
+    min-width: 10;
+}
+
+.error-message {
+    color: $error;
+    text-align: center;
+    margin: 1 0;
+}
+"""
+)
+
+# Config Modal CSS
+CONFIG_MODAL_CSS = (
+    COMMON_CSS
+    + """
+ConfigModal {
+    align: center middle;
+}
+
+.config-container {
+    width: 80;
+    height: 20;
+    background: $surface;
+    border: thick $primary;
+    padding: 1;
+}
+
+.config-title {
+    text-align: center;
+    text-style: bold;
+    color: $primary;
+    margin-bottom: 1;
+}
+
+.config-section {
+    margin: 1 0;
+}
+
+.config-option {
+    margin: 0 2;
+}
+
+.button-row {
+    margin-top: 2;
+    align: center middle;
+}
+
+.config-button {
+    margin: 0 1;
+    min-width: 10;
+}
+"""
+)
+
+# Save Confirmation Modal CSS
+SAVE_CONFIRMATION_MODAL_CSS = (
+    COMMON_CSS
+    + """
+SaveConfirmationModal {
+    align: center middle;
+}
+
+.save-confirmation-container {
+    width: 60;
+    height: 15;
+    background: $surface;
+    border: thick $primary;
+    padding: 1;
+}
+
+.save-confirmation-title {
+    text-align: center;
+    text-style: bold;
+    color: $primary;
+    margin-bottom: 1;
+}
+
+.save-confirmation-message {
+    text-align: center;
+    margin-bottom: 2;
+    color: $text;
+}
+
+.save-confirmation-button {
+    margin: 0 1;
+    min-width: 12;
+}
+
+.save-confirmation-button:focus {
+    border: thick $accent;
+}
+"""
+)