refactor: organize ui components

Author: ymgyt

syndterm/src/application/mod.rs

@@ -9,22 +9,27 @@ use crate::{
     auth::{
         self,
         device_flow::{DeviceAccessTokenResponse, DeviceAuthorizationResponse},
-        Credential,
+        AuthenticationProvider, Credential,
     },
     client::Client,
     command::Command,
     job::Jobs,
     terminal::Terminal,
     ui::{
         self,
-        components::{authentication::Authentication, root::Root, tabs::Tab, Components},
+        components::{authentication::AuthenticateState, root::Root, tabs::Tab, Components},
         theme::Theme,
     },
 };
 
 mod direction;
 pub use direction::{Direction, IndexOutOfRange};
 
+enum Screen {
+    Login,
+    Browse,
+}
+
 pub struct Application {
     terminal: Terminal,
     client: Client,
@@ -33,6 +38,7 @@ pub struct Application {
     theme: Theme,
     idle_timer: Pin<Box<Sleep>>,
 
+    screen: Screen,
     should_render: bool,
     should_quit: bool,
 }
@@ -51,6 +57,7 @@ impl Application {
             jobs: Jobs::new(),
             theme: Theme::new(),
             idle_timer: Box::pin(tokio::time::sleep(Duration::from_millis(250))),
+            screen: Screen::Login,
             should_quit: false,
             should_render: false,
         }
@@ -60,6 +67,7 @@ impl Application {
         self.client.set_credential(cred);
         self.components.auth.authenticated();
         self.initial_fetch();
+        self.screen = Screen::Browse;
         self.should_render = true;
     }
 
@@ -236,7 +244,8 @@ impl Application {
         let root = Root::new(&self.components, cx);
 
         self.terminal
-            .render(|frame| Widget::render(root, frame.size(), frame.buffer_mut()));
+            .render(|frame| Widget::render(root, frame.size(), frame.buffer_mut()))
+            .expect("Failed to render");
     }
 
     #[allow(clippy::single_match)]
@@ -251,12 +260,13 @@ impl Application {
             }) => None,
             CrosstermEvent::Key(key) => {
                 tracing::debug!("{key:?}");
-                match self.state.screen {
+                match self.screen {
                     Screen::Login => match key.code {
                         KeyCode::Enter => {
-                            if self.state.login.auth_state == AuthenticateState::NotAuthenticated {
+                            if self.components.auth.state() == &AuthenticateState::NotAuthenticated
+                            {
                                 return Some(Command::Authenticate(
-                                    self.state.login.login_methods.selected_method(),
+                                    self.components.auth.selected_provider(),
                                 ));
                             };
                         }
@@ -267,7 +277,7 @@ impl Application {
                         KeyCode::BackTab => {
                             return Some(Command::MoveTabSelection(Direction::Left))
                         }
-                        _ => match self.state.components.tabs.current() {
+                        _ => match self.components.tabs.current() {
                             Tab::Feeds => match key.code {
                                 KeyCode::Char('j') => {
                                     return Some(Command::MoveEntry(Direction::Down))
@@ -333,7 +343,6 @@ impl Application {
     fn prompt_feed_unsubscription(&mut self) {
         // TODO: prompt deletion confirm
         let Some(url) = self
-            .state
             .components
             .subscription
             .selected_feed_url()
@@ -370,20 +379,15 @@ impl Application {
 
 impl Application {
     fn open_feed(&mut self) {
-        let Some(feed_website_url) = self
-            .state
-            .components
-            .subscription
-            .selected_feed_website_url()
+        let Some(feed_website_url) = self.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.components.entries.selected_entry_website_url()
-        else {
+        let Some(entry_website_url) = self.components.entries.selected_entry_website_url() else {
             return;
         };
         open::that(entry_website_url).ok();
@@ -407,9 +411,9 @@ impl Application {
 }
 
 impl Application {
-    fn authenticate(&mut self, method: AuthenticateMethod) {
-        match method {
-            AuthenticateMethod::Github => {
+    fn authenticate(&mut self, provider: AuthenticationProvider) {
+        match provider {
+            AuthenticationProvider::Github => {
                 let fut = async move {
                     // TODO: error handling
                     let res = auth::github::DeviceFlow::new()
@@ -426,7 +430,9 @@ impl Application {
     }
 
     fn device_authorize_flow(&mut self, device_authorization: DeviceAuthorizationResponse) {
-        self.state.login.auth_state = AuthenticateState::DeviceFlow(device_authorization.clone());
+        self.components
+            .auth
+            .set_device_authorization_response(device_authorization.clone());
         self.should_render = true;
 
         // attempt to open input screen in the browser
@@ -450,7 +456,7 @@ impl Application {
     }
 
     fn complete_device_authroize_flow(&mut self, device_access_token: DeviceAccessTokenResponse) {
-        let auth = Authentication::Github {
+        let auth = Credential::Github {
             access_token: device_access_token.access_token,
         };
 

syndterm/src/command.rs

@@ -1,8 +1,11 @@
 use std::fmt::Display;
 
 use crate::{
-    application::{AuthenticateMethod, Direction},
-    auth::device_flow::{DeviceAccessTokenResponse, DeviceAuthorizationResponse},
+    application::Direction,
+    auth::{
+        device_flow::{DeviceAccessTokenResponse, DeviceAuthorizationResponse},
+        AuthenticationProvider,
+    },
     client::{payload, query::subscription::SubscriptionOutput},
     types::Feed,
 };
@@ -13,7 +16,7 @@ pub enum Command {
     ResizeTerminal { columns: u16, rows: u16 },
     Idle,
 
-    Authenticate(AuthenticateMethod),
+    Authenticate(AuthenticationProvider),
     DeviceAuthorizationFlow(DeviceAuthorizationResponse),
     CompleteDevieAuthorizationFlow(DeviceAccessTokenResponse),
 

syndterm/src/ui/components/authentication.rs

@@ -1,13 +1,16 @@
 use ratatui::{
-    prelude::{Buffer, Constraint, Layout, Rect},
+    prelude::{Alignment, Buffer, Constraint, Layout, Rect},
     style::{Modifier, Style},
     text::{Line, Span, Text},
-    widgets::{Block, Borders, List, ListItem, ListState, Paragraph, StatefulWidget, Widget},
+    widgets::{
+        Block, Borders, HighlightSpacing, List, ListItem, ListState, Paragraph, StatefulWidget,
+        Widget,
+    },
 };
 
 use crate::{
     auth::{device_flow::DeviceAuthorizationResponse, AuthenticationProvider},
-    ui::{extension::RectExt, Context},
+    ui::{self, extension::RectExt, Context},
 };
 
 /// Handle user authentication
@@ -35,46 +38,65 @@ impl Authentication {
         }
     }
 
-    pub fn authenticated(&mut self) {
-        self.state = AuthenticateState::Authenticated;
+    pub fn state(&self) -> &AuthenticateState {
+        &self.state
     }
 
     pub fn selected_provider(&self) -> AuthenticationProvider {
         self.providers[self.selected_provider_index]
     }
 
+    pub fn authenticated(&mut self) {
+        self.state = AuthenticateState::Authenticated;
+    }
+
+    pub fn set_device_authorization_response(&mut self, response: DeviceAuthorizationResponse) {
+        self.state = AuthenticateState::DeviceFlow(response);
+    }
+
     pub(super) fn should_render(&self) -> bool {
-        match self.state {
-            AuthenticateState::NotAuthenticated | AuthenticateState::DeviceFlow(_) => true,
-            _ => false,
-        }
+        matches!(
+            self.state,
+            AuthenticateState::NotAuthenticated | AuthenticateState::DeviceFlow(_)
+        )
     }
 }
 
 impl Authentication {
     pub(super) fn render(&self, area: Rect, buf: &mut Buffer, cx: &Context<'_>) {
         match self.state {
-            AuthenticateState::NotAuthenticated => self.render_login(area, buf),
+            AuthenticateState::NotAuthenticated => self.render_login(area, buf, cx),
             AuthenticateState::DeviceFlow(ref res) => self.render_device_flow(area, buf, cx, res),
             AuthenticateState::Authenticated => unreachable!(),
         }
     }
 
-    fn render_login(&self, area: Rect, buf: &mut Buffer) {
-        let area = area.centered(50, 50);
+    fn render_login(&self, area: Rect, buf: &mut Buffer, cx: &Context<'_>) {
+        let area = area.centered(40, 50);
 
         let vertical = Layout::vertical([Constraint::Length(2), Constraint::Min(1)]);
         let [title_area, methods_area] = area.split(&vertical);
 
-        let title = Paragraph::new(Text::styled("Login", Style::default()))
+        let title = Paragraph::new(Span::styled("Login", cx.theme.login.title))
+            .alignment(Alignment::Center)
             .block(Block::default().borders(Borders::BOTTOM));
 
         let methods = {
-            let items = vec![ListItem::new(Line::styled("with Github", Style::default()))];
-
-            List::new(items).highlight_symbol(">> ")
+            let items = self
+                .providers
+                .iter()
+                .map(|provider| match provider {
+                    AuthenticationProvider::Github => Text::from("with GitHub"),
+                })
+                .map(ListItem::new);
+
+            List::new(items)
+                .highlight_symbol(ui::TABLE_HIGHLIGHT_SYMBOL)
+                .highlight_style(cx.theme.login.selected_auth_provider_item)
+                .highlight_spacing(HighlightSpacing::Always)
         };
-        let mut methods_state = ListState::default().with_selected(Some(0));
+        let mut methods_state =
+            ListState::default().with_selected(Some(self.selected_provider_index));
 
         Widget::render(title, title_area, buf);
         StatefulWidget::render(methods, methods_area, buf, &mut methods_state);
@@ -87,27 +109,31 @@ impl Authentication {
         cx: &Context<'_>,
         res: &DeviceAuthorizationResponse,
     ) {
-        let area = area.centered(50, 50);
+        let area = area.centered(40, 50);
 
         let vertical = Layout::vertical([Constraint::Length(2), Constraint::Min(1)]);
 
         let [title_area, device_flow_area] = area.split(&vertical);
 
-        let title = Paragraph::new(Text::styled("Login", Style::default()))
+        let title = Paragraph::new(Text::from("Login"))
+            .alignment(Alignment::Center)
+            .style(cx.theme.login.title)
             .block(Block::default().borders(Borders::BOTTOM));
 
         let device_flow = Paragraph::new(vec![
+            Line::from("Open the following URL and Enter the code"),
+            Line::from(""),
             Line::from(vec![
-                Span::styled("Code: ", Style::default()),
+                Span::styled("URL:  ", Style::default()),
                 Span::styled(
-                    &res.user_code,
+                    res.verification_uri.to_string(),
                     Style::default().add_modifier(Modifier::BOLD),
                 ),
             ]),
             Line::from(vec![
-                Span::styled("URL: ", Style::default()),
+                Span::styled("Code: ", Style::default()),
                 Span::styled(
-                    res.verification_uri.to_string(),
+                    &res.user_code,
                     Style::default().add_modifier(Modifier::BOLD),
                 ),
             ]),

syndterm/src/ui/components/prompt.rs

@@ -29,7 +29,7 @@ impl Prompt {
 }
 
 impl Prompt {
-    pub fn render(&self, area: Rect, buf: &mut Buffer, cx: &Context<'_>) {
+    pub fn render(&self, area: Rect, buf: &mut Buffer, cx: &Context<'_>, tab: Tab) {
         // If has error message, render it
         let paragraph = if let Some(error_message) = self.error_message.as_ref() {
             let line = Line::styled(error_message, cx.theme.error.message);
@@ -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.components.tabs.current() {
+            let per_screen_keys = match tab {
                 Tab::Subscription => [
                     ("a", "Subscribe"),
                     ("d", "Unsubscribe"),

syndterm/src/ui/components/root.rs

@@ -34,7 +34,9 @@ impl<'a> Root<'a> {
             Tab::Feeds => self.components.entries.render(content_area, buf, cx),
         };
 
-        self.components.prompt.render(prompt_area, buf, cx);
+        self.components
+            .prompt
+            .render(prompt_area, buf, cx, self.components.tabs.current());
     }
 }
 

syndterm/src/ui/components/tabs.rs

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