use tab component

src/app.rs

@@ -1,5 +1,7 @@
 use crate::{
-    components::{ConnectionsComponent, DatabasesComponent, QueryComponent, TableComponent},
+    components::{
+        ConnectionsComponent, DatabasesComponent, QueryComponent, TabComponent, TableComponent,
+    },
     user_config::UserConfig,
 };
 use sqlx::mysql::MySqlPool;
@@ -7,26 +9,6 @@ use strum::IntoEnumIterator;
 use strum_macros::EnumIter;
 use tui::widgets::ListState;
 
-#[derive(Debug, Clone, Copy, EnumIter)]
-pub enum Tab {
-    Records,
-    Structure,
-}
-
-impl std::fmt::Display for Tab {
-    fn fmt(&self, f: &mut std::fmt::Formatter) -> std::fmt::Result {
-        write!(f, "{:?}", self)
-    }
-}
-
-impl Tab {
-    pub fn names() -> Vec<String> {
-        Self::iter()
-            .map(|tab| format!("{} [{}]", tab, tab as u8 + 1))
-            .collect()
-    }
-}
-
 pub enum FocusBlock {
     DabataseList,
     Table,
@@ -38,7 +20,7 @@ pub struct App {
     pub record_table: TableComponent,
     pub structure_table: TableComponent,
     pub focus_block: FocusBlock,
-    pub selected_tab: Tab,
+    pub tab: TabComponent,
     pub user_config: Option<UserConfig>,
     pub selected_connection: ListState,
     pub databases: DatabasesComponent,
@@ -54,7 +36,7 @@ impl Default for App {
             record_table: TableComponent::default(),
             structure_table: TableComponent::default(),
             focus_block: FocusBlock::DabataseList,
-            selected_tab: Tab::Records,
+            tab: TabComponent::default(),
             user_config: None,
             selected_connection: ListState::default(),
             databases: DatabasesComponent::new(),

src/components/connections.rs

@@ -110,7 +110,7 @@ impl DrawableComponent for ConnectionsComponent {
             .split(popup_layout[1])[1];
         f.render_widget(Clear, area);
         f.render_stateful_widget(tasks, area, &mut self.state);
-        return Ok(());
+        Ok(())
     }
 }
 

src/components/mod.rs

@@ -2,6 +2,7 @@ pub mod command;
 pub mod connections;
 pub mod databases;
 pub mod query;
+pub mod tab;
 pub mod table;
 pub mod utils;
 
@@ -9,6 +10,7 @@ pub use command::{CommandInfo, CommandText};
 pub use connections::ConnectionsComponent;
 pub use databases::DatabasesComponent;
 pub use query::QueryComponent;
+pub use tab::TabComponent;
 pub use table::TableComponent;
 
 use anyhow::Result;

src/components/tab.rs

@@ -0,0 +1,73 @@
+use super::{Component, DrawableComponent};
+use crate::event::Key;
+use anyhow::Result;
+use strum::IntoEnumIterator;
+use strum_macros::EnumIter;
+use tui::{
+    backend::Backend,
+    layout::Rect,
+    style::{Color, Modifier, Style},
+    text::Spans,
+    widgets::{Block, Borders, Tabs},
+    Frame,
+};
+
+#[derive(Debug, Clone, Copy, EnumIter)]
+pub enum Tab {
+    Records,
+    Structure,
+}
+
+impl std::fmt::Display for Tab {
+    fn fmt(&self, f: &mut std::fmt::Formatter) -> std::fmt::Result {
+        write!(f, "{:?}", self)
+    }
+}
+
+impl Tab {
+    pub fn names() -> Vec<String> {
+        Self::iter()
+            .map(|tab| format!("{} [{}]", tab, tab as u8 + 1))
+            .collect()
+    }
+}
+
+pub struct TabComponent {
+    pub selected_tab: Tab,
+}
+
+impl Default for TabComponent {
+    fn default() -> Self {
+        Self {
+            selected_tab: Tab::Records,
+        }
+    }
+}
+
+impl DrawableComponent for TabComponent {
+    fn draw<B: Backend>(&mut self, f: &mut Frame<B>, area: Rect, _focused: bool) -> Result<()> {
+        let titles = Tab::names().iter().cloned().map(Spans::from).collect();
+        let tabs = Tabs::new(titles)
+            .block(Block::default().borders(Borders::ALL))
+            .select(self.selected_tab as usize)
+            .style(Style::default().fg(Color::DarkGray))
+            .highlight_style(
+                Style::default()
+                    .fg(Color::Reset)
+                    .add_modifier(Modifier::UNDERLINED),
+            );
+        f.render_widget(tabs, area);
+        Ok(())
+    }
+}
+
+impl Component for TabComponent {
+    fn event(&mut self, key: Key) -> Result<()> {
+        match key {
+            Key::Char('1') => self.selected_tab = Tab::Records,
+            Key::Char('2') => self.selected_tab = Tab::Structure,
+            _ => (),
+        }
+        Ok(())
+    }
+}

src/handlers/mod.rs

@@ -4,14 +4,16 @@ pub mod query;
 pub mod record_table;
 pub mod structure_table;
 
-use crate::app::{App, FocusBlock, Tab};
+use crate::app::{App, FocusBlock};
+use crate::components::tab::Tab;
+use crate::components::Component as _;
 use crate::event::Key;
 
 pub async fn handle_app(key: Key, app: &mut App) -> anyhow::Result<()> {
     match app.focus_block {
         FocusBlock::ConnectionList => connection_list::handler(key, app).await?,
         FocusBlock::DabataseList => database_list::handler(key, app).await?,
-        FocusBlock::Table => match app.selected_tab {
+        FocusBlock::Table => match app.tab.selected_tab {
             Tab::Records => record_table::handler(key, app).await?,
             Tab::Structure => structure_table::handler(key, app).await?,
         },
@@ -27,10 +29,8 @@ pub async fn handle_app(key: Key, app: &mut App) -> anyhow::Result<()> {
             _ => app.focus_block = FocusBlock::Table,
         },
         Key::Char('e') => app.focus_block = FocusBlock::Query,
-        Key::Char('1') => app.selected_tab = Tab::Records,
-        Key::Char('2') => app.selected_tab = Tab::Structure,
         Key::Esc => app.error = None,
-        _ => (),
+        key => app.tab.event(key)?,
     }
     Ok(())
 }

src/ui/mod.rs

@@ -1,13 +1,14 @@
-use crate::app::{App, FocusBlock, Tab};
+use crate::app::{App, FocusBlock};
+use crate::components::tab::Tab;
 use crate::components::DrawableComponent as _;
 use crate::event::Key;
 use database_tree::MoveSelection;
 use tui::{
     backend::Backend,
     layout::{Constraint, Direction, Layout},
-    style::{Color, Modifier, Style},
+    style::{Color, Style},
     text::{Span, Spans},
-    widgets::{Block, Borders, Clear, List, ListItem, Paragraph, Tabs},
+    widgets::{Block, Borders, Clear, List, ListItem, Paragraph},
     Frame,
 };
 
@@ -67,25 +68,14 @@ pub fn draw<B: Backend>(f: &mut Frame<'_, B>, app: &mut App) -> anyhow::Result<(
         )
         .split(main_chunks[1]);
 
-    let titles = Tab::names().iter().cloned().map(Spans::from).collect();
-    let tabs = Tabs::new(titles)
-        .block(Block::default().borders(Borders::ALL))
-        .select(app.selected_tab as usize)
-        .style(Style::default().fg(Color::DarkGray))
-        .highlight_style(
-            Style::default()
-                .fg(Color::Reset)
-                .add_modifier(Modifier::UNDERLINED),
-        );
-    f.render_widget(tabs, right_chunks[0]);
-
+    app.tab.draw(f, right_chunks[0], false)?;
     app.query.draw(
         f,
         right_chunks[1],
         matches!(app.focus_block, FocusBlock::Query),
     )?;
 
-    match app.selected_tab {
+    match app.tab.selected_tab {
         Tab::Records => app.record_table.draw(
             f,
             right_chunks[2],