Implement feed and article panes and j/k keybindings

App.py

@@ -0,0 +1,68 @@
+from textual.containers import Container, Vertical
+from textual.app import ComposeResult, App
+from textual.widgets import Static, Header
+
+
+class FeedPane(Vertical):
+    def __init__(self, content):
+        super().__init__()
+        self.content = content
+        self.id = "feed-pane"
+
+    def compose(self):
+        yield Vertical(*self.content, id="left-container")
+
+
+class FeedItem(Static):
+    def __init__(self, content, id):
+        super().__init__()
+        self.content = content
+        self.id = "feed-" + str(id)
+        if id == 0:
+            self.set_styles("color: blue;")
+
+    def on_mount(self):
+        self.update(self.content)
+        self.on_event
+
+    def on_click(self):
+        self.update("x")
+
+
+class GUI(App):
+    CSS_PATH = "app.css"
+
+    def __init__(self):
+        super().__init__()
+        self.i = 0
+
+    def on_key(self, event):
+        item = self.query(FeedItem)[self.i]
+        item.set_styles("color: auto;")
+        if event.key == "j":
+            self.i += 1
+        elif event.key == "k":
+            self.i -= 1
+        else:
+            pass
+        item = self.query(FeedItem)[self.i]
+        item.set_styles("color: blue;")
+
+    def compose(self) -> ComposeResult:
+        yield Header()
+        yield Container(
+            FeedPane([FeedItem(f"Feed# {number}", number) for number in range(15)]),
+            Vertical(
+                *[Static("Horizontally"),
+                  Static("Positioned"),
+                  Static("Children"),
+                  Static("Here")],
+                id="right-pane",
+            ),
+            id="app-grid",
+        )
+
+
+if __name__ == "__main__":
+    app = GUI()
+    app.run()

app.css

@@ -0,0 +1,37 @@
+#app-grid {
+    layout: grid;
+    grid-size: 2;
+    grid-columns: 1fr 2fr;
+    grid-rows: 1fr;
+}
+
+#left-container > Static {
+    background: $boost;
+    margin-bottom: 1;
+}
+
+#feed-active {
+    color: blue;
+    border: dodgerblue;
+}
+
+#feed-nonactive {
+    color: auto;
+}
+
+#feed-pane {
+    row-span: 1;
+    background: $panel;
+    border: dodgerblue;
+}
+
+#right-pane {
+    background: $panel;
+    border: dodgerblue;
+}
+
+#right-pane > Static {
+    margin-bottom: 1;
+    background: $boost;
+}
+