Configuration Page - refactoring

README.md

@@ -45,6 +45,11 @@ pipx install lugus
 
 ![new feed page screenshot](https://raw.githubusercontent.com/OpenCode/lugus/main/readme/new_feed.png)
 
+#### Configuration Screen
+
+![configuration page](https://raw.githubusercontent.com/OpenCode/lugus/main/readme/config.png)
+
+
 ## Roadmap
 
 - [ ] Feeds management (edit, delete, ...)
@@ -57,7 +62,14 @@ pipx install lugus
 - [ ] Feeds auto-sync
 - [ ] Edit existing feeds
 - [ ] Support for Windows
-
+
+## Support
+
+<a href="https://www.buymeacoffee.com/scapigliato" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/lato-violet.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>
+
+![Liberapay patrons](https://img.shields.io/liberapay/patrons/Scapigliato?style=for-the-badge&logo=liberapay)
+
+
 ## License
 
 `LUGUS` is distributed under the terms of the [MIT](https://spdx.org/licenses/MIT.html) license.

src/lugus/lugus.py

@@ -9,8 +9,8 @@
 import textual
 from textual.app import App, ComposeResult
 from textual.containers import Horizontal, Vertical
-from textual.widgets import Header, Footer, ListItem, ListView, Rule, Select, Tree, Markdown, Static, Button, \
-    Label, Input, Pretty, Switch
+from textual.widgets import Header, Footer, ListItem, ListView, Select, Tree, Markdown, Static, Button, Label, \
+    Input, Pretty, Switch
 from textual.reactive import reactive
 from rich.emoji import Emoji
 
@@ -175,7 +175,6 @@ class ConfigurationForm(Vertical):
     config = Config()
 
     def compose(self) -> ComposeResult:
-        yield Static("[b]Feeds\n", classes="config_area_label")
         yield Horizontal(
             Static(
                 "Show Unread Counter",
@@ -189,9 +188,8 @@ def compose(self) -> ComposeResult:
                 value=self.config.get("feed_show_unread_counter")
             ),
             classes="config_area_container",
+            id="config_area_feeds",
         )
-        yield Rule()
-        yield Static("[b]Articles\n", classes="config_area_label")
         yield Horizontal(
             Static(
                 "Read Automatically when Opening",
@@ -206,9 +204,8 @@ def compose(self) -> ComposeResult:
                 value=self.config.get("article_read_auto_opening")
             ),
             classes="config_area_container",
+            id="config_area_articles",
         )
-        yield Rule()
-        yield Static("[b]User Interface\n", classes="config_area_label")
         yield Horizontal(
             Static(
                 "Theme",
@@ -219,11 +216,21 @@ def compose(self) -> ComposeResult:
                 id="config_ui_theme",
                 value=self.config.get("ui_theme", default="textual-ansi"),
                 classes="config_select"
-            )
+            ),
+            classes="config_area_container",
+            id="config_area_ui",
         )
         yield Button("+ Save", variant="primary", id="save_config_button")
         yield Button("< Back", id="back_feed_button")
 
+    def on_mount(self) -> None:
+        config_area_feeds = self.query_one("#config_area_feeds")
+        config_area_feeds.border_title = "FEEDS"
+        config_area_articles = self.query_one("#config_area_articles")
+        config_area_articles.border_title = "ARTICLES"
+        config_area_ui = self.query_one("#config_area_ui")
+        config_area_ui.border_title = "USER INTERFACE"
+
 
 class Feeds(Vertical):
 

src/lugus/style.tcss

@@ -28,15 +28,13 @@ Screen {
     padding: 4 8;
 }
 
-.config_area_label {
-  height: 4;
-  content-align: left middle;
-  width: 100%;
-}
-
 .config_area_container {
   width: 100%;
   height: auto;
+  border: solid $panel;
+  border-title-style: bold;
+  padding: 2;
+  margin-bottom: 1;
 }
 
 .config_label {