refactor: organize ui components

Author: ymgyt

syndterm/src/application/mod.rs

@@ -16,11 +16,14 @@ use crate::{
     terminal::Terminal,
     ui::{
         self,
-        entries::Entries,
-        login::LoginMethods,
-        prompt::Prompt,
-        subscription::Subscription,
-        tabs::{Tab, Tabs},
+        components::{
+            entries::Entries,
+            login::Login,
+            prompt::Prompt,
+            subscription::Subscription,
+            tabs::{Tab, Tabs},
+            Components,
+        },
         theme::Theme,
     },
 };
@@ -43,17 +46,14 @@ pub enum AuthenticateState {
 }
 
 pub struct LoginState {
-    pub login_methods: LoginMethods,
+    pub login_methods: Login,
     pub auth_state: AuthenticateState,
 }
 
 pub struct State {
     pub screen: Screen,
     pub login: LoginState,
-    pub tabs: Tabs,
-    pub prompt: Prompt,
-    pub subscription: Subscription,
-    pub entries: Entries,
+    pub components: Components,
 }
 
 pub struct Application {
@@ -78,13 +78,15 @@ impl Application {
         let state = State {
             screen: Screen::Login,
             login: LoginState {
-                login_methods: LoginMethods::new(),
+                login_methods: Login::new(),
                 auth_state: AuthenticateState::NotAuthenticated,
             },
-            tabs: Tabs::new(),
-            subscription: Subscription::new(),
-            entries: Entries::new(),
-            prompt: Prompt::new(),
+            components: Components {
+                tabs: Tabs::new(),
+                prompt: Prompt::new(),
+                subscription: Subscription::new(),
+                entries: Entries::new(),
+            },
         };
 
         Self {
@@ -170,7 +172,7 @@ impl Application {
             if self.should_render {
                 self.render();
                 self.should_render = false;
-                self.state.prompt.clear_error_message();
+                self.state.components.prompt.clear_error_message();
             }
 
             if self.should_quit {
@@ -204,8 +206,10 @@ impl Application {
                     self.complete_device_authroize_flow(device_access_token)
                 }
                 Command::MoveTabSelection(direction) => {
-                    match self.state.tabs.move_selection(direction) {
-                        Tab::Subscription if !self.state.subscription.has_subscription() => {
+                    match self.state.components.tabs.move_selection(direction) {
+                        Tab::Subscription
+                            if !self.state.components.subscription.has_subscription() =>
+                        {
                             next = Some(Command::FetchSubscription {
                                 after: None,
                                 first: 50,
@@ -216,7 +220,7 @@ impl Application {
                     self.should_render = true;
                 }
                 Command::MoveSubscribedFeed(direction) => {
-                    self.state.subscription.move_selection(direction);
+                    self.state.components.subscription.move_selection(direction);
                     self.should_render = true;
                 }
                 Command::PromptFeedSubscription => {
@@ -239,15 +243,18 @@ impl Application {
                     self.fetch_subscription(after, first)
                 }
                 Command::UpdateSubscription(sub) => {
-                    self.state.subscription.update_subscription(sub);
+                    self.state.components.subscription.update_subscription(sub);
                     self.should_render = true;
                 }
                 Command::CompleteSubscribeFeed { feed } => {
-                    self.state.subscription.add_subscribed_feed(feed);
+                    self.state.components.subscription.add_subscribed_feed(feed);
                     self.should_render = true;
                 }
                 Command::CompleteUnsubscribeFeed { url } => {
-                    self.state.subscription.remove_unsubscribed_feed(url);
+                    self.state
+                        .components
+                        .subscription
+                        .remove_unsubscribed_feed(url);
                     self.should_render = true;
                 }
                 Command::OpenFeed => {
@@ -257,18 +264,18 @@ impl Application {
                     self.fetch_entries(after, first);
                 }
                 Command::UpdateEntries(payload) => {
-                    self.state.entries.update_entries(payload);
+                    self.state.components.entries.update_entries(payload);
                     self.should_render = true;
                 }
                 Command::MoveEntry(direction) => {
-                    self.state.entries.move_selection(direction);
+                    self.state.components.entries.move_selection(direction);
                     self.should_render = true;
                 }
                 Command::OpenEntry => {
                     self.open_entry();
                 }
                 Command::HandleError { message } => {
-                    self.state.prompt.set_error_message(message);
+                    self.state.components.prompt.set_error_message(message);
                     self.should_render = true;
                 }
             }
@@ -312,7 +319,7 @@ impl Application {
                         KeyCode::BackTab => {
                             return Some(Command::MoveTabSelection(Direction::Left))
                         }
-                        _ => match self.state.tabs.current() {
+                        _ => match self.state.components.tabs.current() {
                             Tab::Feeds => match key.code {
                                 KeyCode::Char('j') => {
                                     return Some(Command::MoveEntry(Direction::Down))
@@ -379,6 +386,7 @@ impl Application {
         // TODO: prompt deletion confirm
         let Some(url) = self
             .state
+            .components
             .subscription
             .selected_feed_url()
             .map(ToOwned::to_owned)
@@ -414,14 +422,20 @@ impl Application {
 
 impl Application {
     fn open_feed(&mut self) {
-        let Some(feed_website_url) = self.state.subscription.selected_feed_website_url() else {
+        let Some(feed_website_url) = self
+            .state
+            .components
+            .subscription
+            .selected_feed_website_url()
+        else {
             return;
         };
         open::that(feed_website_url).ok();
     }
 
     fn open_entry(&mut self) {
-        let Some(entry_website_url) = self.state.entries.selected_entry_website_url() else {
+        let Some(entry_website_url) = self.state.components.entries.selected_entry_website_url()
+        else {
             return;
         };
         open::that(entry_website_url).ok();

syndterm/src/ui/entries.rs syndterm/src/ui/components/entries.rs

@@ -9,16 +9,15 @@ use ratatui::{
 use crate::{
     application::{AuthenticateMethod, AuthenticateState},
     auth::device_flow::DeviceAuthorizationResponse,
+    ui::{extension::RectExt, Context},
 };
 
-use super::{centered, Context};
-
-pub struct LoginMethods {
+pub struct Login {
     state: ListState,
     methods: List<'static>,
 }
 
-impl LoginMethods {
+impl Login {
     pub fn new() -> Self {
         let methods = {
             let items = vec![ListItem::new(Line::styled("Github", Style::default()))];
@@ -40,7 +39,7 @@ impl LoginMethods {
     }
 
     pub fn render(&mut self, rect: Rect, frame: &mut Frame) {
-        let rect = centered(50, 50, rect);
+        let rect = rect.centered(50, 50);
 
         let chunks = Layout::default()
             .direction(Direction::Vertical)
@@ -56,7 +55,7 @@ impl LoginMethods {
 }
 
 fn render_device_flow(rect: Rect, frame: &mut Frame, res: &DeviceAuthorizationResponse) {
-    let rect = centered(50, 50, rect);
+    let rect = rect.centered(50, 50);
 
     let chunks = Layout::default()
         .direction(Direction::Vertical)

syndterm/src/ui/login.rs syndterm/src/ui/components/login.rs

@@ -0,0 +1,16 @@
+use crate::ui::components::{
+    entries::Entries, prompt::Prompt, subscription::Subscription, tabs::Tabs,
+};
+
+pub mod entries;
+pub mod login;
+pub mod prompt;
+pub mod subscription;
+pub mod tabs;
+
+pub struct Components {
+    pub tabs: Tabs,
+    pub prompt: Prompt,
+    pub subscription: Subscription,
+    pub entries: Entries,
+}

syndterm/src/ui/components/mod.rs

@@ -39,7 +39,7 @@ impl Prompt {
                 .style(cx.theme.prompt.background)
         } else {
             let keys = [("q", "Quit"), ("Tab", "Next Tab"), ("j/k", "Up/Down")];
-            let per_screen_keys = match cx.state.tabs.current() {
+            let per_screen_keys = match cx.state.components.tabs.current() {
                 Tab::Subscription => [
                     ("a", "Subscribe"),
                     ("d", "Unsubscribe"),

syndterm/src/ui/prompt.rs syndterm/src/ui/components/prompt.rs

@@ -52,7 +52,7 @@ impl Tabs {
         TuiTabs::new(self.tabs.clone())
             .style(cx.theme.tabs)
             .divider("")
-            .select(cx.state.tabs.selected)
+            .select(cx.state.components.tabs.selected)
             .highlight_style(cx.theme.tabs_selected)
             .render(tabs, buf);
     }

syndterm/src/ui/subscription.rs syndterm/src/ui/components/subscription.rs

@@ -0,0 +1,30 @@
+use ratatui::prelude::{Constraint, Direction, Layout, Rect};
+
+pub(super) trait RectExt {
+    /// Create centered Rect
+    fn centered(self, percent_x: u16, percent_y: u16) -> Rect;
+}
+
+impl RectExt for Rect {
+    fn centered(self, percent_x: u16, percent_y: u16) -> Rect {
+        // get vertically centered rect
+        let layout = Layout::default()
+            .direction(Direction::Vertical)
+            .constraints([
+                Constraint::Percentage((100 - percent_y) / 2),
+                Constraint::Percentage(percent_y),
+                Constraint::Percentage((100 - percent_y) / 2),
+            ])
+            .split(self);
+
+        // then centered horizontally
+        Layout::default()
+            .direction(Direction::Horizontal)
+            .constraints([
+                Constraint::Percentage((100 - percent_x) / 2),
+                Constraint::Percentage(percent_x),
+                Constraint::Percentage((100 - percent_x) / 2),
+            ])
+            .split(layout[1])[1]
+    }
+}

syndterm/src/ui/tabs.rs syndterm/src/ui/components/tabs.rs

@@ -1,19 +1,19 @@
 use ratatui::{
-    prelude::{Constraint, Direction, Layout, Rect},
+    prelude::{Constraint, Layout},
     widgets::{Block, Widget},
     Frame,
 };
 
 use crate::{
     application::{Screen, State},
-    ui::{tabs::Tab, theme::Theme},
+    ui::{
+        components::{login, tabs::Tab},
+        theme::Theme,
+    },
 };
 
-pub mod entries;
-pub mod login;
-pub mod prompt;
-pub mod subscription;
-pub mod tabs;
+pub mod components;
+pub mod extension;
 pub mod theme;
 
 pub const UNKNOWN_SYMBOL: &str = "???";
@@ -41,42 +41,27 @@ pub fn render(frame: &mut Frame, mut cx: Context<'_>) {
         Constraint::Length(1),
     ]));
 
-    cx.state.tabs.render(tabs_area, frame.buffer_mut(), &cx);
+    cx.state
+        .components
+        .tabs
+        .render(tabs_area, frame.buffer_mut(), &cx);
 
-    match cx.state.tabs.current() {
-        Tab::Subscription => cx
-            .state
-            .subscription
-            .render(content_area, frame.buffer_mut(), &cx),
+    match cx.state.components.tabs.current() {
+        Tab::Subscription => {
+            cx.state
+                .components
+                .subscription
+                .render(content_area, frame.buffer_mut(), &cx)
+        }
         Tab::Feeds => cx
             .state
+            .components
             .entries
             .render(content_area, frame.buffer_mut(), &cx),
     };
 
-    cx.state.prompt.render(prompt_area, frame.buffer_mut(), &cx);
-}
-
-/// Create centered Rect
-#[allow(dead_code)]
-fn centered(percent_x: u16, percent_y: u16, r: Rect) -> Rect {
-    // get vertically centered rect
-    let layout = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([
-            Constraint::Percentage((100 - percent_y) / 2),
-            Constraint::Percentage(percent_y),
-            Constraint::Percentage((100 - percent_y) / 2),
-        ])
-        .split(r);
-
-    // then centered horizontally
-    Layout::default()
-        .direction(Direction::Horizontal)
-        .constraints([
-            Constraint::Percentage((100 - percent_x) / 2),
-            Constraint::Percentage(percent_x),
-            Constraint::Percentage((100 - percent_x) / 2),
-        ])
-        .split(layout[1])[1]
+    cx.state
+        .components
+        .prompt
+        .render(prompt_area, frame.buffer_mut(), &cx);
 }