needs improvements but at least it looks like it exists

client/config.toml

@@ -49,9 +49,18 @@ move_line_start = ["0"]
 move_line_end = ["$"]
 move_first_line = ["gg"]
 move_last_line = ["x"]
+enter_highlight_mode = ["v"]
+enter_highlight_mode_linewise = ["ctrl+v"]
+
+[keybindings.highlight]
+exit_highlight_mode = ["esc"]
+enter_highlight_mode_linewise = ["ctrl+v"]
 
 [keybindings.edit]
-exit_edit_mode = ["esc","ctrl+e"]
+# BIG CHANGES NOW EXIT HANDLES EITHER IF THOSE
+# exit_edit_mode = ["esc","ctrl+e"]
+# exit_suggestion_mode = ["esc"]
+exit = ["esc", "ctrl+e"]
 delete_char_forward = ["delete"]
 delete_char_backward = ["backspace"]
 next_field = ["enter"]
@@ -61,7 +70,6 @@ move_right = ["right"]
 suggestion_down = ["ctrl+n", "tab"]
 suggestion_up = ["ctrl+p", "shift+tab"]
 select_suggestion = ["enter"]
-exit_suggestion_mode = ["esc"]
 
 [keybindings.command]
 exit_command_mode = ["ctrl+g", "esc"]

client/src/components/admin.rs

@@ -1,4 +1,8 @@
 // src/components/admin.rs
 pub mod admin_panel;
+pub mod admin_panel_admin;
+pub mod add_table;
 
 pub use admin_panel::*;
+pub use admin_panel_admin::*;
+pub use add_table::*;

client/src/components/admin/add_table.rs

@@ -0,0 +1,180 @@
+// src/components/admin/add_table.rs
+use crate::config::colors::themes::Theme;
+use ratatui::{
+    layout::{Alignment, Constraint, Direction, Layout, Rect},
+    style::{Style, Stylize},
+    text::{Line, Span},
+    widgets::{Block, BorderType, Borders, Paragraph},
+    Frame,
+};
+use crate::state::app::state::AppState;
+use crate::state::app::highlight::HighlightState;
+use crate::state::pages::canvas_state::CanvasState;
+use crate::components::handlers::canvas::render_canvas;
+use crate::state::pages::add_table::AddTableState;
+
+/// Renders a placeholder page for adding tables.
+pub fn render_add_table(
+    f: &mut Frame,
+    area: Rect,
+    theme: &Theme,
+    _app_state: &AppState,
+    add_table_state: &mut AddTableState,
+    is_edit_mode: bool,
+    highlight_state: &HighlightState,
+) {
+    // Main block for the whole page
+    let main_block = Block::default()
+        .title(" Add New Table ")
+        .borders(Borders::ALL)
+        .border_type(BorderType::Rounded)
+        .border_style(Style::default().fg(theme.border))
+        .style(Style::default().bg(theme.bg));
+    let inner_area = main_block.inner(area);
+    f.render_widget(main_block, area);
+
+    // Split the inner area horizontally: Left info pane | Right input/action pane
+    let horizontal_chunks = Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([
+            Constraint::Percentage(50), // Left Pane
+            Constraint::Percentage(50), // Right Pane
+        ].as_ref())
+        .split(inner_area);
+
+    let left_pane = horizontal_chunks[0];
+    let right_pane = horizontal_chunks[1];
+
+    // --- Left Pane ---
+    let left_vertical_chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([
+            Constraint::Length(3), // Profile & Table Name header
+            Constraint::Min(5),    // Columns section (expandable)
+            Constraint::Length(1), // Separator
+            Constraint::Min(3),    // Indexes section (expandable)
+            Constraint::Length(1), // Separator
+            Constraint::Min(3),    // Links section (expandable)
+        ].as_ref())
+        .split(left_pane);
+
+    // Profile & Table Name section
+    let profile_text = Paragraph::new(vec![
+        Line::from(Span::styled("profile: default", theme.fg)), // Placeholder
+        Line::from(Span::styled("table name: [tablename]", theme.fg)), // Placeholder
+    ])
+    .block(
+        Block::default()
+            .borders(Borders::BOTTOM)
+            .border_style(Style::default().fg(theme.secondary)),
+    );
+    f.render_widget(profile_text, left_vertical_chunks[0]);
+
+    // Columns section
+    let columns_text = Paragraph::new(vec![
+        Line::from(Span::styled("Name                  Type", theme.accent)), // Header
+    ])
+    .block(Block::default().title(Span::styled(" Columns ", theme.fg)));
+    f.render_widget(columns_text, left_vertical_chunks[1]);
+
+    // Indexes section
+    let indexes_text = Paragraph::new(vec![
+        Line::from(Span::styled("Column name", theme.accent)), // Header
+    ])
+    .block(
+        Block::default()
+            .title(Span::styled(" Indexes ", theme.fg))
+            .borders(Borders::TOP) // Separator from Columns
+            .border_style(Style::default().fg(theme.secondary)),
+    );
+    f.render_widget(indexes_text, left_vertical_chunks[3]);
+
+    // Links section
+    let links_text = Paragraph::new(vec![
+        Line::from(Span::styled("Linked table          Required", theme.accent)), // Header
+    ])
+    .block(
+        Block::default()
+            .title(Span::styled(" Links ", theme.fg))
+            .borders(Borders::TOP) // Separator from Indexes
+            .border_style(Style::default().fg(theme.secondary)),
+    );
+    f.render_widget(links_text, left_vertical_chunks[5]);
+
+    // --- Right Pane ---
+    let right_vertical_chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([
+            Constraint::Length(5), // Area for render_canvas (3 fields + 2 border)
+            Constraint::Length(3), // Add Button Area
+            Constraint::Min(1),    // Spacer
+            Constraint::Length(3), // Save/Cancel buttons area
+        ].as_ref())
+        .split(right_pane);
+
+    let canvas_area = right_vertical_chunks[0];
+    let add_button_area = right_vertical_chunks[1];
+    let bottom_buttons_area = right_vertical_chunks[3];
+
+    // --- Use render_canvas for Inputs ---
+    let _active_field_rect = render_canvas(
+        f,
+        canvas_area,
+        add_table_state,
+        &[
+            "Table name",
+            "Name",
+            "Type",
+        ],
+        &add_table_state.current_field(),
+        &add_table_state.inputs().iter().map(|s| *s).collect::<Vec<&String>>(),
+        theme,
+        is_edit_mode,
+        highlight_state,
+    );
+
+    // Add Button (Placeholder)
+    let add_button = Paragraph::new(" Add ")
+        .style(Style::default().fg(theme.secondary))
+        .alignment(Alignment::Center)
+        .block(
+            Block::default()
+                .borders(Borders::ALL)
+                .border_type(BorderType::Rounded)
+                .border_style(Style::default().fg(theme.secondary)),
+        );
+    f.render_widget(add_button, add_button_area);
+
+    // Bottom Buttons Area (Save, Cancel)
+    let bottom_button_chunks = Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([
+            Constraint::Percentage(50), // Save Button
+            Constraint::Percentage(50), // Cancel Button
+        ].as_ref())
+        .split(bottom_buttons_area);
+
+    // Save Button (Placeholder)
+    let save_button = Paragraph::new(" Save table ")
+        .style(Style::default().fg(theme.secondary))
+        .alignment(Alignment::Center)
+        .block(
+            Block::default()
+                .borders(Borders::ALL)
+                .border_type(BorderType::Rounded)
+                .border_style(Style::default().fg(theme.secondary)),
+        );
+    f.render_widget(save_button, bottom_button_chunks[0]);
+
+    // Cancel Button (Placeholder)
+    let cancel_button = Paragraph::new(" Cancel ")
+        .style(Style::default().fg(theme.secondary))
+        .alignment(Alignment::Center)
+        .block(
+            Block::default()
+                .borders(Borders::ALL)
+                .border_type(BorderType::Rounded)
+                .border_style(Style::default().fg(theme.secondary)),
+        );
+    f.render_widget(cancel_button, bottom_button_chunks[1]);
+}

client/src/components/admin/admin_panel.rs

@@ -2,6 +2,7 @@
 
 use crate::config::colors::themes::Theme;
 use crate::state::pages::auth::AuthState;
+use crate::state::app::state::AppState;
 use crate::state::pages::admin::AdminState;
 use common::proto::multieko2::table_definition::ProfileTreeResponse;
 use ratatui::{
@@ -11,21 +12,13 @@ use ratatui::{
     widgets::{Block, BorderType, Borders, List, ListItem, Paragraph, Wrap},
     Frame,
 };
-
+use super::admin_panel_admin::render_admin_panel_admin;
-/// Renders the view specific to admin users.
-fn render_admin_panel_admin(f: &mut Frame, content_chunks: &[Rect], theme: &Theme) {
-    // Admin-specific view placeholder
-    let admin_message = Paragraph::new("Admin-specific view. Profile selection not applicable.")
-        .style(Style::default().fg(theme.fg))
-        .alignment(Alignment::Center);
-    // Render only in the right pane for now, leaving left empty
-    f.render_widget(admin_message, content_chunks[1]);
-}
 
 pub fn render_admin_panel(
     f: &mut Frame,
+    app_state: &AppState,
     auth_state: &AuthState,
-    admin_state: &AdminState,
+    admin_state: &mut AdminState,
     area: Rect,
     theme: &Theme,
     profile_tree: &ProfileTreeResponse,
@@ -45,11 +38,6 @@ pub fn render_admin_panel(
         .constraints([Constraint::Length(3), Constraint::Min(1)])
         .split(inner_area);
 
-    // Title
-    let title = Line::from(Span::styled("Admin Panel", Style::default().fg(theme.highlight)));
-    let title_widget = Paragraph::new(title).alignment(Alignment::Center);
-    f.render_widget(title_widget, chunks[0]);
-
     // Content
     let content_chunks = Layout::default()
         .direction(Direction::Horizontal)
@@ -66,7 +54,13 @@ pub fn render_admin_panel(
             selected_profile,
         );
     } else {
-        render_admin_panel_admin(f, &content_chunks, theme);
+        render_admin_panel_admin(
+            f,
+            chunks[1],
+            app_state,
+            admin_state,
+            theme,
+        );
     }
 }
 
@@ -98,8 +92,8 @@ fn render_admin_panel_non_admin(
         .block(Block::default().title("Profiles"))
         .highlight_style(Style::default().bg(theme.highlight).fg(theme.bg));
 
-    let mut list_state_clone = admin_state.list_state.clone();
+    let mut profile_list_state_clone = admin_state.profile_list_state.clone();
-    f.render_stateful_widget(list, content_chunks[0], &mut list_state_clone);
+    f.render_stateful_widget(list, content_chunks[0], &mut profile_list_state_clone);
 
     // Profile details - Use selection info from admin_state
     if let Some(profile) = admin_state

client/src/components/admin/admin_panel_admin.rs

@@ -0,0 +1,243 @@
+// src/components/admin/admin_panel_admin.rs
+
+use crate::config::colors::themes::Theme;
+use crate::state::pages::admin::{AdminFocus, AdminState};
+use crate::state::app::state::AppState;
+use ratatui::{
+    layout::{Alignment, Constraint, Direction, Layout, Rect},
+    style::Style,
+    text::{Line, Span, Text}, // Added Text
+    widgets::{Block, BorderType, Borders, List, ListItem, ListState, Paragraph},
+    Frame,
+};
+
+/// Renders the view specific to admin users with a three-pane layout.
+pub fn render_admin_panel_admin(
+    f: &mut Frame,
+    area: Rect,
+    app_state: &AppState,
+    admin_state: &mut AdminState,
+    theme: &Theme,
+) {
+    // Split vertically: Top for panes, Bottom for buttons
+    let main_chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([Constraint::Min(0), Constraint::Length(1)].as_ref()) // 1 line for buttons
+        .split(area);
+    let panes_area = main_chunks[0];
+    let buttons_area = main_chunks[1];
+
+    // Split the top area into three panes: Profiles | Tables | Dependencies
+    let pane_chunks = Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([
+            Constraint::Percentage(25), // Profiles
+            Constraint::Percentage(40), // Tables
+            Constraint::Percentage(35), // Dependencies
+        ].as_ref())
+        .split(panes_area); // Use the whole area directly
+
+    let profiles_pane = pane_chunks[0];
+    let tables_pane = pane_chunks[1];
+    let deps_pane = pane_chunks[2];
+
+    // --- Profiles Pane (Left) ---
+    let profile_focus = admin_state.current_focus == AdminFocus::Profiles;
+    let profile_border_style = if profile_focus {
+        Style::default().fg(theme.highlight)
+    } else {
+        Style::default().fg(theme.border)
+    };
+
+    // Block for the profiles pane
+    let profiles_block = Block::default()
+        .title(" Profiles ")
+        .borders(Borders::ALL)
+        .border_type(BorderType::Rounded)
+        .border_style(profile_border_style);
+    let profiles_inner_area = profiles_block.inner(profiles_pane); // Get inner area for list
+    f.render_widget(profiles_block, profiles_pane); // Render the block itself
+
+    // Create profile list items
+    let profile_list_items: Vec<ListItem> = app_state
+        .profile_tree
+        .profiles
+        .iter()
+        .enumerate()
+        .map(|(idx, profile)| {
+            // Check persistent selection for prefix, navigation state for style/highlight
+            let is_selected = admin_state.selected_profile_index == Some(idx); // Use persistent state for [*]
+            let is_navigated = admin_state.profile_list_state.selected() == Some(idx); // Use nav state for highlight/>
+            let prefix = if is_selected { "[*] " } else { "[ ] " };
+            let style = if is_selected { // Style based on selection too
+                Style::default().fg(theme.highlight).add_modifier(ratatui::style::Modifier::BOLD)
+            } else {
+                Style::default().fg(theme.fg)
+            };
+            ListItem::new(Line::from(vec![
+                    Span::styled(prefix, style),
+                    Span::styled(&profile.name, style)
+            ]))
+        })
+    .collect();
+
+    // Build and render profile list inside the block's inner area
+    let profile_list = List::new(profile_list_items)
+        // Highlight style depends on focus AND navigation state
+        .highlight_style(if profile_focus { // Use focus state
+            Style::default().add_modifier(ratatui::style::Modifier::REVERSED)
+        } else {
+            Style::default()
+        })
+    .highlight_symbol(if profile_focus { "> " } else { "  " });
+
+    f.render_stateful_widget(profile_list, profiles_inner_area, &mut admin_state.profile_list_state);
+
+    // --- Tables Pane (Middle) ---
+    let table_focus = admin_state.current_focus == AdminFocus::Tables;
+    let table_border_style = if table_focus {
+        Style::default().fg(theme.highlight)
+    } else {
+        Style::default().fg(theme.border)
+    };
+
+    // Get selected profile information
+    let navigated_profile_idx = admin_state.profile_list_state.selected(); // Use nav state for display
+    let selected_profile_name = app_state
+        .profile_tree
+        .profiles
+        .get(navigated_profile_idx.unwrap_or(usize::MAX)) // Use nav state for title
+        .map_or("None", |p| &p.name);
+
+    // Block for the tables pane
+    let tables_block = Block::default()
+        .title(format!(" Tables (Profile: {}) ", selected_profile_name))
+        .borders(Borders::ALL)
+        .border_type(BorderType::Rounded)
+        .border_style(table_border_style);
+    let tables_inner_area = tables_block.inner(tables_pane); // Get inner area for list
+    f.render_widget(tables_block, tables_pane); // Render the block itself
+
+    // Create table list items and get dependencies for the selected table
+    let (table_list_items, selected_table_deps): (Vec<ListItem>, Vec<String>) = if let Some(
+        profile, // Get profile based on NAVIGATED profile index
+    ) = navigated_profile_idx.and_then(|idx| app_state.profile_tree.profiles.get(idx)) {
+        let items: Vec<ListItem> = profile
+            .tables
+            .iter()
+            .enumerate()
+            .map(|(idx, table)| { // Renamed i to idx for clarity
+                                  // Check persistent selection for prefix, navigation state for style/highlight
+                let is_selected = admin_state.selected_table_index == Some(idx); // Use persistent state for [*]
+                let is_navigated = admin_state.table_list_state.selected() == Some(idx); // Use nav state for highlight/>
+                let prefix = if is_selected { "[*] " } else { "[ ] " };
+                let style = if is_navigated { // Style based on navigation highlight
+                    Style::default().fg(theme.highlight).add_modifier(ratatui::style::Modifier::BOLD)
+                } else {
+                    Style::default().fg(theme.fg)
+                };
+                ListItem::new(Line::from(vec![
+                        Span::styled(prefix, style),
+                        Span::styled(&table.name, style),
+                ]))
+            })
+        .collect();
+
+        // Get dependencies only for the PERSISTENTLY selected table in the PERSISTENTLY selected profile
+        let chosen_profile_idx = admin_state.selected_profile_index; // Use persistent profile selection
+        let deps = chosen_profile_idx // Start with the chosen profile index
+            .and_then(|p_idx| app_state.profile_tree.profiles.get(p_idx)) // Get the chosen profile
+            .and_then(|p| admin_state.selected_table_index.and_then(|t_idx| p.tables.get(t_idx))) // Get the chosen table using its index
+            .map_or(Vec::new(), |t| t.depends_on.clone()); // If found, clone its depends_on, otherwise return empty Vec
+
+        (items, deps)
+    } else {
+        // Default when no profile is selected
+        (vec![ListItem::new("Select a profile to see tables")], vec![])
+    };
+
+    // Build and render table list inside the block's inner area
+    let table_list = List::new(table_list_items)
+        // Highlight style depends on focus AND navigation state
+        .highlight_style(if table_focus { // Use focus state
+            Style::default().add_modifier(ratatui::style::Modifier::REVERSED)
+        } else {
+            Style::default()
+        })
+    .highlight_symbol(if table_focus { "> " } else { "  " }); // Focus indicator
+
+    f.render_stateful_widget(table_list, tables_inner_area, &mut admin_state.table_list_state);
+
+    // --- Dependencies Pane (Right) ---
+    // Get name based on PERSISTENT selections
+    let chosen_profile_idx = admin_state.selected_profile_index; // Use persistent profile selection
+    let selected_table_name = chosen_profile_idx
+        .and_then(|p_idx| app_state.profile_tree.profiles.get(p_idx))
+        .and_then(|p| admin_state.selected_table_index.and_then(|t_idx| p.tables.get(t_idx))) // Use persistent table selection
+        .map_or("N/A", |t| &t.name); // Get name of the selected table
+
+    // Block for the dependencies pane
+    let deps_block = Block::default()
+        .title(format!(" Dependencies (Table: {}) ", selected_table_name))
+        .borders(Borders::ALL)
+        .border_type(BorderType::Rounded)
+        .border_style(Style::default().fg(theme.border)); // No focus highlight for deps pane
+    let deps_inner_area = deps_block.inner(deps_pane); // Get inner area for content
+    f.render_widget(deps_block, deps_pane); // Render the block itself
+
+    // Prepare content for the dependencies paragraph
+    let mut deps_content = Text::default();
+    deps_content.lines.push(Line::from(Span::styled(
+                "Depends On:",
+                Style::default().fg(theme.accent), // Use accent color for the label
+    )));
+
+    if !selected_table_deps.is_empty() {
+        for dep in selected_table_deps {
+            // List each dependency
+            deps_content.lines.push(Line::from(Span::styled(format!("- {}", dep), theme.fg)));
+        }
+    } else {
+        // Indicate if there are no dependencies
+        deps_content.lines.push(Line::from(Span::styled("  None", theme.secondary)));
+    }
+
+    // Build and render dependencies paragraph inside the block's inner area
+    let deps_paragraph = Paragraph::new(deps_content);
+    f.render_widget(deps_paragraph, deps_inner_area);
+
+    // --- Buttons Row ---
+    let button_chunks = Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([
+            Constraint::Percentage(33),
+            Constraint::Percentage(34),
+            Constraint::Percentage(33),
+        ].as_ref())
+        .split(buttons_area);
+
+    let btn_base_style = Style::default().fg(theme.secondary);
+
+    // Define the helper closure to get style based on focus
+    let get_btn_style = |button_focus: AdminFocus| {
+        if admin_state.current_focus == button_focus {
+            // Apply highlight style if this button is focused
+            btn_base_style.add_modifier(ratatui::style::Modifier::REVERSED)
+        } else {
+            btn_base_style // Use base style otherwise
+        }
+    };
+    let btn1 = Paragraph::new("Add Logic")
+        .style(get_btn_style(AdminFocus::Button1))
+        .alignment(Alignment::Center);
+    let btn2 = Paragraph::new("Add Table")
+        .style(get_btn_style(AdminFocus::Button2))
+        .alignment(Alignment::Center);
+    let btn3 = Paragraph::new("Change Table")
+        .style(get_btn_style(AdminFocus::Button3))
+        .alignment(Alignment::Center);
+
+    f.render_widget(btn1, button_chunks[0]);
+    f.render_widget(btn2, button_chunks[1]);
+    f.render_widget(btn3, button_chunks[2]);
+}

client/src/components/auth/login.rs

@@ -12,6 +12,7 @@ use ratatui::{
     widgets::{Block, BorderType, Borders, Paragraph},
     Frame,
 };
+use crate::state::app::highlight::HighlightState;
 
 pub fn render_login(
     f: &mut Frame,
@@ -20,6 +21,7 @@ pub fn render_login(
     login_state: &LoginState,
     app_state: &AppState,
     is_edit_mode: bool,
+    highlight_state: &HighlightState,
 ) {
     // Main container
     let block = Block::default()
@@ -56,6 +58,7 @@ pub fn render_login(
         &[&login_state.username, &login_state.password],
         theme,
         is_edit_mode,
+        highlight_state,
     );
 
     // --- ERROR MESSAGE ---

client/src/components/auth/register.rs

@@ -14,6 +14,7 @@ use ratatui::{
     widgets::{Block, BorderType, Borders, Paragraph},
     Frame,
 };
+use crate::state::app::highlight::HighlightState;
 
 pub fn render_register(
     f: &mut Frame,
@@ -22,6 +23,7 @@ pub fn render_register(
     state: &RegisterState, // Use RegisterState
     app_state: &AppState,
     is_edit_mode: bool,
+    highlight_state: &HighlightState,
 ) {
     let block = Block::default()
         .borders(Borders::ALL)
@@ -64,6 +66,7 @@ pub fn render_register(
         &state.inputs().iter().map(|s| *s).collect::<Vec<&String>>(), // Pass inputs directly
         theme,
         is_edit_mode,
+        highlight_state,
     );
 
     // --- HELP TEXT ---

client/src/components/common/autocomplete.rs

@@ -81,10 +81,10 @@ pub fn render_autocomplete_dropdown(
     let list = List::new(items);
 
     // State for managing selection highlight (still needed for logic)
-    let mut list_state = ListState::default();
+    let mut profile_list_state = ListState::default();
-    list_state.select(selected_index);
+    profile_list_state.select(selected_index);
 
     // Render the list statefully *over* the background block
-    f.render_stateful_widget(list, dropdown_area, &mut list_state);
+    f.render_stateful_widget(list, dropdown_area, &mut profile_list_state);
 }
 

client/src/components/form/form.rs

@@ -7,6 +7,7 @@ use ratatui::{
 };
 use crate::config::colors::themes::Theme;
 use crate::state::pages::canvas_state::CanvasState;
+use crate::state::app::highlight::HighlightState;
 use crate::components::handlers::canvas::render_canvas;
 
 pub fn render_form(
@@ -18,6 +19,7 @@ pub fn render_form(
     inputs: &[&String],
     theme: &Theme,
     is_edit_mode: bool,
+    highlight_state: &HighlightState,
     total_count: u64,
     current_position: u64,
 ) {
@@ -62,5 +64,6 @@ pub fn render_form(
         inputs,
         theme,
         is_edit_mode,
+        highlight_state,
     );
 }

client/src/components/handlers/canvas.rs

@@ -2,31 +2,33 @@
 use ratatui::{
     widgets::{Paragraph, Block, Borders},
     layout::{Layout, Constraint, Direction, Rect},
-    style::Style,
+    style::{Style, Modifier},
     text::{Line, Span},
     Frame,
     prelude::Alignment,
 };
 use crate::config::colors::themes::Theme;
 use crate::state::pages::canvas_state::CanvasState;
+use crate::state::app::highlight::HighlightState; // Ensure correct import path
+use std::cmp::{min, max};
 
 pub fn render_canvas(
     f: &mut Frame,
     area: Rect,
     form_state: &impl CanvasState,
     fields: &[&str],
-    current_field: &usize,
+    current_field_idx: &usize,
     inputs: &[&String],
     theme: &Theme,
     is_edit_mode: bool,
+    highlight_state: &HighlightState, // Using the enum state
 ) -> Option<Rect> {
-    // Split area into columns
+    // ... (setup code remains the same) ...
     let columns = Layout::default()
         .direction(Direction::Horizontal)
         .constraints([Constraint::Percentage(30), Constraint::Percentage(70)])
         .split(area);
 
-    // Input container styling
     let border_style = if form_state.has_unsaved_changes() {
         Style::default().fg(theme.warning)
     } else if is_edit_mode {
@@ -39,7 +41,6 @@ pub fn render_canvas(
         .border_style(border_style)
         .style(Style::default().bg(theme.bg));
 
-    // Input block dimensions
     let input_block = Rect {
         x: columns[1].x,
         y: columns[1].y,
@@ -49,7 +50,6 @@ pub fn render_canvas(
 
     f.render_widget(&input_container, input_block);
 
-    // Input rows layout
     let input_area = input_container.inner(input_block);
     let input_rows = Layout::default()
         .direction(Direction::Vertical)
@@ -72,17 +72,113 @@ pub fn render_canvas(
         });
     }
 
+
     // Render inputs and cursor
     for (i, input) in inputs.iter().enumerate() {
-        let is_active = i == *current_field;
+        let is_active = i == *current_field_idx;
-        let input_display = Paragraph::new(input.as_str())
+        let current_cursor_pos = form_state.current_cursor_pos();
-            .alignment(Alignment::Left)
+        let text = input.as_str();
-            .style(if is_active {
+        let text_len = text.chars().count();
-                Style::default().fg(theme.highlight)
-            } else {
-                Style::default().fg(theme.fg)
-            });
 
+        let line: Line;
+
+        // --- Use match on the highlight_state enum ---
+        match highlight_state {
+            HighlightState::Off => {
+                // Not in highlight mode, render normally
+                line = Line::from(Span::styled(
+                    text,
+                    if is_active { Style::default().fg(theme.highlight) } else { Style::default().fg(theme.fg) }
+                ));
+            }
+            HighlightState::Characterwise { anchor } => {
+                // --- Character-wise Highlight Logic ---
+                let (anchor_field, anchor_char) = *anchor;
+                let start_field = min(anchor_field, *current_field_idx);
+                let end_field = max(anchor_field, *current_field_idx);
+
+                // Use start_char and end_char consistently
+                let (start_char, end_char) = if anchor_field == *current_field_idx {
+                    (min(anchor_char, current_cursor_pos), max(anchor_char, current_cursor_pos))
+                } else if anchor_field < *current_field_idx {
+                    (anchor_char, current_cursor_pos)
+                } else {
+                    (current_cursor_pos, anchor_char)
+                };
+
+                let highlight_style = Style::default().fg(theme.highlight).bg(theme.highlight_bg).add_modifier(Modifier::BOLD);
+                let normal_style_in_highlight = Style::default().fg(theme.highlight);
+                let normal_style_outside = Style::default().fg(theme.fg);
+
+                if i >= start_field && i <= end_field {
+                    // This line is within the character-wise highlight range
+                    if start_field == end_field { // Case 1: Single Line Highlight
+                        // Use start_char and end_char here
+                        let clamped_start = start_char.min(text_len);
+                        let clamped_end = end_char.min(text_len); // Use text_len for slicing logic
+
+                        let before: String = text.chars().take(clamped_start).collect();
+                        let highlighted: String = text.chars().skip(clamped_start).take(clamped_end.saturating_sub(clamped_start) + 1).collect();
+                        // Define 'after' here
+                        let after: String = text.chars().skip(clamped_end + 1).collect();
+
+                        line = Line::from(vec![
+                            Span::styled(before, normal_style_in_highlight),
+                            Span::styled(highlighted, highlight_style),
+                            Span::styled(after, normal_style_in_highlight), // Use defined 'after'
+                        ]);
+                    } else if i == start_field { // Case 2: Multi-Line Highlight - Start Line
+                        // Use start_char here
+                        let safe_start = start_char.min(text_len);
+                        let before: String = text.chars().take(safe_start).collect();
+                        let highlighted: String = text.chars().skip(safe_start).collect();
+                        line = Line::from(vec![
+                            Span::styled(before, normal_style_in_highlight),
+                            Span::styled(highlighted, highlight_style),
+                        ]);
+                    } else if i == end_field { // Case 3: Multi-Line Highlight - End Line (Corrected index)
+                        // Use end_char here
+                        let safe_end_inclusive = if text_len > 0 { end_char.min(text_len - 1) } else { 0 };
+                        let highlighted: String = text.chars().take(safe_end_inclusive + 1).collect();
+                        let after: String = text.chars().skip(safe_end_inclusive + 1).collect();
+                        line = Line::from(vec![
+                            Span::styled(highlighted, highlight_style),
+                            Span::styled(after, normal_style_in_highlight),
+                        ]);
+                    } else { // Case 4: Multi-Line Highlight - Middle Line (Corrected index)
+                        line = Line::from(Span::styled(text, highlight_style)); // Highlight whole line
+                    }
+                } else { // Case 5: Line Outside Character-wise Highlight Range
+                    line = Line::from(Span::styled(
+                        text,
+                        // Use normal styling (active or inactive)
+                        if is_active { normal_style_in_highlight } else { normal_style_outside }
+                    ));
+                }
+            }
+            HighlightState::Linewise { anchor_line } => {
+                // --- Linewise Highlight Logic ---
+                let start_field = min(*anchor_line, *current_field_idx);
+                let end_field = max(*anchor_line, *current_field_idx);
+                let highlight_style = Style::default().fg(theme.highlight).bg(theme.highlight_bg).add_modifier(Modifier::BOLD);
+                let normal_style_in_highlight = Style::default().fg(theme.highlight);
+                let normal_style_outside = Style::default().fg(theme.fg);
+
+                if i >= start_field && i <= end_field {
+                    // Highlight the entire line
+                    line = Line::from(Span::styled(text, highlight_style));
+                } else {
+                    // Line outside linewise highlight range
+                    line = Line::from(Span::styled(
+                        text,
+                        // Use normal styling (active or inactive)
+                        if is_active { normal_style_in_highlight } else { normal_style_outside }
+                    ));
+                }
+            }
+        } // End match highlight_state
+
+        let input_display = Paragraph::new(line).alignment(Alignment::Left);
         f.render_widget(input_display, input_rows[i]);
 
         if is_active {
@@ -95,3 +191,4 @@ pub fn render_canvas(
 
     active_field_input_rect
 }
+

client/src/config/binds/config.rs

@@ -32,6 +32,8 @@ pub struct ModeKeybindings {
     #[serde(default)]
     pub edit: HashMap<String, Vec<String>>,
     #[serde(default)]
+    pub highlight: HashMap<String, Vec<String>>,
+    #[serde(default)]
     pub command: HashMap<String, Vec<String>>,
     #[serde(default)]
     pub common: HashMap<String, Vec<String>>,
@@ -75,6 +77,14 @@ impl Config {
             .or_else(|| self.get_action_for_key_in_mode(&self.keybindings.global, key, modifiers))
     }
 
+    /// Gets an action for a key in Highlight mode, also checking common/global keybindings.
+    pub fn get_highlight_action_for_key(&self, key: KeyCode, modifiers: KeyModifiers) -> Option<&str> {
+        self.get_action_for_key_in_mode(&self.keybindings.highlight, key, modifiers)
+            .or_else(|| self.get_action_for_key_in_mode(&self.keybindings.common, key, modifiers))
+            .or_else(|| self.get_action_for_key_in_mode(&self.keybindings.read_only, key, modifiers))
+            .or_else(|| self.get_action_for_key_in_mode(&self.keybindings.global, key, modifiers))
+    }
+
     /// Gets an action for a key in Command mode, also checking common keybindings.
     pub fn get_command_action_for_key(&self, key: KeyCode, modifiers: KeyModifiers) -> Option<&str> {
         self.get_action_for_key_in_mode(&self.keybindings.command, key, modifiers)

client/src/config/colors/themes.rs

@@ -10,6 +10,8 @@ pub struct Theme {
     pub highlight: Color,
     pub warning: Color,
     pub border: Color,
+    pub highlight_bg: Color,
+    pub inactive_highlight_bg: Color,// admin panel no idea what it really is
 }
 
 impl Theme {
@@ -31,6 +33,8 @@ impl Theme {
             highlight: Color::Rgb(152, 251, 152), // Pastel green
             warning: Color::Rgb(255, 182, 193), // Pastel pink
             border: Color::Rgb(220, 220, 220), // Light gray border
+            highlight_bg: Color::Rgb(70, 70, 70), // Darker grey for highlight background
+            inactive_highlight_bg: Color::Rgb(50, 50, 50),
         }
     }
 
@@ -44,6 +48,8 @@ impl Theme {
             highlight: Color::Rgb(50, 205, 50), // Bright green
             warning: Color::Rgb(255, 99, 71), // Bright red
             border: Color::Rgb(100, 100, 100), // Medium gray border
+            highlight_bg: Color::Rgb(180, 180, 180), // Lighter grey for highlight background
+            inactive_highlight_bg: Color::Rgb(50, 50, 50),
         }
     }
 
@@ -57,6 +63,8 @@ impl Theme {
             highlight: Color::Rgb(0, 128, 0), // Green
             warning: Color::Rgb(255, 0, 0), // Red
             border: Color::Rgb(0, 0, 0),   // Black border
+            highlight_bg: Color::Rgb(180, 180, 180), // Lighter grey for highlight background
+            inactive_highlight_bg: Color::Rgb(50, 50, 50),
         }
     }
 }

client/src/functions/common/buffer.rs

@@ -6,7 +6,7 @@ use crate::state::app::buffer::AppView;
 pub fn get_view_layer(view: &AppView) -> u8 {
     match view {
         AppView::Intro => 1,
-        AppView::Login | AppView::Register | AppView::Admin => 2,
+        AppView::Login | AppView::Register | AppView::Admin | AppView::AddTable => 2,
         AppView::Form(_) | AppView::Scratch => 3,
     }
 }

client/src/functions/modes.rs

@@ -6,3 +6,4 @@ pub mod navigation;
 
 pub use read_only::*;
 pub use edit::*;
+pub use navigation::*;

client/src/functions/modes/navigation.rs

@@ -1,3 +1,4 @@
 // src/functions/modes/navigation.rs
 
-// pub mod admin_nav;
+pub mod admin_nav;
+pub mod add_table_nav;

client/src/functions/modes/navigation/add_table_nav.rs

@@ -0,0 +1,260 @@
+// src/functions/modes/navigation/add_table_nav.rs
+use crate::config::binds::config::Config;
+use crate::state::{
+    app::state::AppState,
+    pages::add_table::{AddTableFocus, AddTableState},
+};
+use crossterm::event::{KeyEvent};
+use ratatui::widgets::TableState; // Import TableState
+
+/// Handles navigation events specifically for the Add Table view.
+/// Returns true if the event was handled, false otherwise.
+pub fn handle_add_table_navigation(
+    key: KeyEvent,
+    config: &Config,
+    _app_state: &AppState, // Keep for potential future use (e.g., checking permissions)
+    add_table_state: &mut AddTableState,
+    command_message: &mut String,
+) -> bool {
+    let action = config.get_general_action(key.code, key.modifiers);
+    let current_focus = add_table_state.current_focus;
+    let mut handled = true; // Assume handled unless logic determines otherwise
+
+    match action.as_deref() {
+        // --- Vertical Navigation (Up/Down) ---
+        Some("move_up") => {
+            let mut new_focus = current_focus; // Start with current focus
+            match current_focus {
+                AddTableFocus::InputTableName => new_focus = AddTableFocus::CancelButton, // Wrap top
+                AddTableFocus::InputColumnName => new_focus = AddTableFocus::InputTableName,
+                AddTableFocus::InputColumnType => new_focus = AddTableFocus::InputColumnName,
+                AddTableFocus::AddColumnButton => new_focus = AddTableFocus::InputColumnType,
+                AddTableFocus::ColumnsTable => {
+                    if !navigate_table_up(&mut add_table_state.column_table_state, add_table_state.columns.len()) {
+                        new_focus = AddTableFocus::AddColumnButton; // Move focus up if at table top
+                    }
+                    // Keep focus on table while navigating within it
+                }
+                AddTableFocus::IndexesTable => {
+                    if !navigate_table_up(&mut add_table_state.index_table_state, add_table_state.indexes.len()) {
+                        new_focus = AddTableFocus::ColumnsTable; // Move focus up
+                    }
+                }
+                AddTableFocus::LinksTable => {
+                    if !navigate_table_up(&mut add_table_state.link_table_state, add_table_state.links.len()) {
+                        new_focus = AddTableFocus::IndexesTable; // Move focus up
+                    }
+                }
+                AddTableFocus::SaveButton => new_focus = AddTableFocus::LinksTable,
+                AddTableFocus::CancelButton => new_focus = AddTableFocus::SaveButton,
+            }
+            add_table_state.current_focus = new_focus;
+            *command_message = format!("Focus set to {:?}", add_table_state.current_focus);
+        }
+        Some("move_down") => {
+            let mut new_focus = current_focus; // Start with current focus
+            match current_focus {
+                AddTableFocus::InputTableName => new_focus = AddTableFocus::InputColumnName,
+                AddTableFocus::InputColumnName => new_focus = AddTableFocus::InputColumnType,
+                AddTableFocus::InputColumnType => new_focus = AddTableFocus::AddColumnButton,
+                AddTableFocus::AddColumnButton => new_focus = AddTableFocus::ColumnsTable,
+                AddTableFocus::ColumnsTable => {
+                    if !navigate_table_down(&mut add_table_state.column_table_state, add_table_state.columns.len()) {
+                        new_focus = AddTableFocus::IndexesTable; // Move focus down if at table bottom
+                    }
+                    // Keep focus on table while navigating within it
+                }
+                AddTableFocus::IndexesTable => {
+                    if !navigate_table_down(&mut add_table_state.index_table_state, add_table_state.indexes.len()) {
+                        new_focus = AddTableFocus::LinksTable; // Move focus down
+                    }
+                }
+                AddTableFocus::LinksTable => {
+                    if !navigate_table_down(&mut add_table_state.link_table_state, add_table_state.links.len()) {
+                        new_focus = AddTableFocus::SaveButton; // Move focus down
+                    }
+                }
+                AddTableFocus::SaveButton => new_focus = AddTableFocus::CancelButton,
+                AddTableFocus::CancelButton => new_focus = AddTableFocus::InputTableName, // Wrap bottom
+            }
+            add_table_state.current_focus = new_focus;
+            *command_message = format!("Focus set to {:?}", add_table_state.current_focus);
+        }
+
+        // --- Horizontal Navigation (Left/Right) ---
+        Some("next_option") => { // 'l' or Right
+            add_table_state.current_focus = match current_focus {
+                AddTableFocus::SaveButton => AddTableFocus::CancelButton,
+                _ => current_focus, // No change for others yet
+            };
+            *command_message = format!("Focus set to {:?}", add_table_state.current_focus);
+        }
+        Some("previous_option") => { // 'h' or Left
+            add_table_state.current_focus = match current_focus {
+                AddTableFocus::CancelButton => AddTableFocus::SaveButton,
+                _ => current_focus, // No change for others yet
+            };
+            *command_message = format!("Focus set to {:?}", add_table_state.current_focus);
+        }
+
+        // --- Tab / Shift+Tab Navigation ---
+        Some("next_field") => { // Tab
+            add_table_state.current_focus = match current_focus {
+                AddTableFocus::InputTableName => AddTableFocus::InputColumnName,
+                AddTableFocus::InputColumnName => AddTableFocus::InputColumnType,
+                AddTableFocus::InputColumnType => AddTableFocus::AddColumnButton,
+                AddTableFocus::AddColumnButton => AddTableFocus::ColumnsTable,
+                AddTableFocus::ColumnsTable => AddTableFocus::IndexesTable,
+                AddTableFocus::IndexesTable => AddTableFocus::LinksTable,
+                AddTableFocus::LinksTable => AddTableFocus::SaveButton,
+                AddTableFocus::SaveButton => AddTableFocus::CancelButton,
+                AddTableFocus::CancelButton => AddTableFocus::InputTableName, // Wrap
+            };
+            *command_message = format!("Focus set to {:?}", add_table_state.current_focus);
+        }
+        Some("prev_field") => { // Shift+Tab
+            add_table_state.current_focus = match current_focus {
+                AddTableFocus::InputTableName => AddTableFocus::CancelButton, // Wrap
+                AddTableFocus::InputColumnName => AddTableFocus::InputTableName,
+                AddTableFocus::InputColumnType => AddTableFocus::InputColumnName,
+                AddTableFocus::AddColumnButton => AddTableFocus::InputColumnType,
+                AddTableFocus::ColumnsTable => AddTableFocus::AddColumnButton,
+                AddTableFocus::IndexesTable => AddTableFocus::ColumnsTable,
+                AddTableFocus::LinksTable => AddTableFocus::IndexesTable,
+                AddTableFocus::SaveButton => AddTableFocus::LinksTable,
+                AddTableFocus::CancelButton => AddTableFocus::SaveButton,
+            };
+            *command_message = format!("Focus set to {:?}", add_table_state.current_focus);
+        }
+
+        // --- Selection ---
+        Some("select") => {
+            match current_focus {
+                AddTableFocus::AddColumnButton => {
+                    *command_message = "Action: Add Column (Not Implemented)".to_string();
+                    // TODO: Implement logic to add column based on inputs
+                    // Clear input fields, add to columns list, mark unsaved changes
+                    // add_table_state.add_column(); // Example method call
+                }
+                AddTableFocus::SaveButton => {
+                    *command_message = "Action: Save Table (Not Implemented)".to_string();
+                    // TODO: Implement logic to save table (e.g., call API)
+                    // Mark changes as saved
+                    // add_table_state.save_table(); // Example method call
+                }
+                AddTableFocus::CancelButton => {
+                    *command_message = "Action: Cancel Add Table".to_string();
+                    // TODO: Implement logic to navigate back (e.g., update AppView history)
+                    // Maybe show a confirmation dialog if there are unsaved changes
+                    // buffer_state.go_back(); // Example call
+                }
+                // Selecting input fields usually means entering Edit mode (handled elsewhere)
+                // Selecting tables might mean focusing on them for editing/deletion (TODO)
+                AddTableFocus::ColumnsTable => {
+                     if let Some(index) = add_table_state.column_table_state.selected() {
+                         *command_message = format!("Selected column index {}", index);
+                         // TODO: Add logic for editing/deleting selected column
+                     } else {
+                         *command_message = "No column selected".to_string();
+                     }
+                }
+                 AddTableFocus::IndexesTable => {
+                     if let Some(index) = add_table_state.index_table_state.selected() {
+                         *command_message = format!("Selected index index {}", index);
+                         // TODO: Add logic for editing/deleting selected index
+                     } else {
+                          *command_message = "No index selected".to_string();
+                     }
+                 }
+                 AddTableFocus::LinksTable => {
+                     if let Some(index) = add_table_state.link_table_state.selected() {
+                         *command_message = format!("Selected link index {}", index);
+                         // TODO: Add logic for editing/deleting selected link
+                     } else {
+                          *command_message = "No link selected".to_string();
+                     }
+                 }
+                _ => {
+                    // For InputTableName, InputColumnName, InputColumnType,
+                    // the main event loop should handle 'select' by potentially
+                    // switching to Edit mode if not already in it.
+                    // We don't need specific logic here for that.
+                    *command_message = format!("Select on {:?}", current_focus);
+                    handled = false; // Let main loop handle edit mode toggle maybe
+                }
+            }
+        }
+
+        // --- Other General Keys (Ignore for add_table nav) ---
+        Some("toggle_sidebar") | Some("toggle_buffer_list") => {
+            handled = false; // Let global handler manage these
+        }
+
+        // --- No matching action ---
+        _ => handled = false, // Event not handled by add_table navigation
+    }
+
+    // If focus changed TO a table, select the first row if nothing is selected
+    if handled && current_focus != add_table_state.current_focus {
+        match add_table_state.current_focus {
+            AddTableFocus::ColumnsTable if add_table_state.column_table_state.selected().is_none() && !add_table_state.columns.is_empty() => {
+                add_table_state.column_table_state.select(Some(0));
+            }
+            AddTableFocus::IndexesTable if add_table_state.index_table_state.selected().is_none() && !add_table_state.indexes.is_empty() => {
+                add_table_state.index_table_state.select(Some(0));
+            }
+             AddTableFocus::LinksTable if add_table_state.link_table_state.selected().is_none() && !add_table_state.links.is_empty() => {
+                add_table_state.link_table_state.select(Some(0));
+            }
+            _ => {} // No action needed for other focus states
+        }
+    }
+
+    handled
+}
+
+
+// Helper function for navigating up within a table state
+// Returns true if navigation happened within the table, false if it reached the top
+fn navigate_table_up(table_state: &mut TableState, item_count: usize) -> bool {
+    if item_count == 0 { return false; } // Cannot navigate empty table
+    let current_selection = table_state.selected();
+    match current_selection {
+        Some(index) => {
+            if index > 0 {
+                table_state.select(Some(index - 1));
+                true // Moved up within table
+            } else {
+                false // Was at the top
+            }
+        }
+        None => {
+            // If nothing selected, moving up could select the last item
+            table_state.select(Some(item_count - 1));
+            true
+        }
+    }
+}
+
+// Helper function for navigating down within a table state
+// Returns true if navigation happened within the table, false if it reached the bottom
+fn navigate_table_down(table_state: &mut TableState, item_count: usize) -> bool {
+     if item_count == 0 { return false; } // Cannot navigate empty table
+    let current_selection = table_state.selected();
+    match current_selection {
+        Some(index) => {
+            if index < item_count - 1 {
+                table_state.select(Some(index + 1));
+                true // Moved down within table
+            } else {
+                false // Was at the bottom
+            }
+        }
+        None => {
+             // If nothing selected, moving down could select the first item
+             table_state.select(Some(0));
+             true
+        }
+    }
+}
+

client/src/functions/modes/navigation/admin_nav.rs

@@ -1 +1,183 @@
 // src/functions/modes/navigation/admin_nav.rs
+
+use crate::config::binds::config::Config;
+use crate::state::{
+    app::state::AppState,
+    pages::admin::{AdminFocus, AdminState},
+};
+use crossterm::event::{KeyCode, KeyEvent, KeyModifiers};
+use crate::state::app::buffer::AppView;
+use crate::state::app::buffer::BufferState;
+
+/// Handles navigation events specifically for the Admin Panel view.
+/// Returns true if the event was handled, false otherwise.
+pub fn handle_admin_navigation(
+    key: KeyEvent,
+    config: &Config,
+    app_state: &AppState,
+    admin_state: &mut AdminState,
+    buffer_state: &mut BufferState,
+    command_message: &mut String,
+) -> bool {
+    let action = config.get_general_action(key.code, key.modifiers);
+    let current_focus = admin_state.current_focus;
+    let profile_count = app_state.profile_tree.profiles.len();
+
+    match action {
+        // --- Vertical Navigation (Up/Down) ---
+        Some("move_up") => {
+            match current_focus {
+                AdminFocus::Profiles => {
+                    if profile_count > 0 {
+                        // Updates navigation state, resets table state
+                        admin_state.previous_profile(profile_count);
+                        *command_message = "Navigated profiles".to_string();
+                    }
+                }
+                AdminFocus::Tables => {
+                    // Updates table navigation state
+                    if let Some(nav_profile_idx) = admin_state.profile_list_state.selected() {
+                        if let Some(profile) = app_state.profile_tree.profiles.get(nav_profile_idx) {
+                            let table_count = profile.tables.len();
+                            if table_count > 0 {
+                                admin_state.previous_table(table_count);
+                                *command_message = "Navigated tables".to_string();
+                            }
+                        }
+                    }
+                }
+                AdminFocus::Button1 | AdminFocus::Button2 | AdminFocus::Button3 => {}
+            }
+            true // Event handled
+        }
+        Some("move_down") => {
+            match current_focus {
+                AdminFocus::Profiles => {
+                    if profile_count > 0 {
+                        // Updates navigation state, resets table state
+                        admin_state.next_profile(profile_count);
+                        *command_message = "Navigated profiles".to_string();
+                    }
+                }
+                AdminFocus::Tables => {
+                    if let Some(nav_profile_idx) = admin_state.profile_list_state.selected() {
+                        if let Some(profile) = app_state.profile_tree.profiles.get(nav_profile_idx) {
+                            let table_count = profile.tables.len();
+                            if table_count > 0 {
+                                admin_state.next_table(table_count);
+                                *command_message = "Navigated tables".to_string();
+                            }
+                        }
+                    }
+                }
+                AdminFocus::Button1 | AdminFocus::Button2 | AdminFocus::Button3 => {}
+            }
+            true // Event handled
+        }
+
+        // --- Horizontal Navigation (Focus Change) ---
+        Some("next_option") | Some("previous_option") => {
+            let old_focus = admin_state.current_focus;
+            let is_next = action == Some("next_option"); // Check if 'l' or 'h'
+
+            admin_state.current_focus = match old_focus {
+                AdminFocus::Profiles => if is_next { AdminFocus::Tables } else { AdminFocus::Button3 }, // P -> T (l) or P -> B3 (h)
+                AdminFocus::Tables => if is_next { AdminFocus::Button1 } else { AdminFocus::Profiles }, // T -> B1 (l) or T -> P (h)
+                AdminFocus::Button1 => if is_next { AdminFocus::Button2 } else { AdminFocus::Tables },   // B1 -> B2 (l) or B1 -> T (h)
+                AdminFocus::Button2 => if is_next { AdminFocus::Button3 } else { AdminFocus::Button1 },   // B2 -> B3 (l) or B2 -> B1 (h)
+                AdminFocus::Button3 => if is_next { AdminFocus::Profiles } else { AdminFocus::Button2 }, // B3 -> P (l) or B3 -> B2 (h)
+            };
+
+            let new_focus = admin_state.current_focus;
+            *command_message = format!("Focus set to {:?}", new_focus);
+            // Auto-select first item only when moving from Profiles to Tables via 'l'
+            if old_focus == AdminFocus::Profiles && new_focus == AdminFocus::Tables && is_next {
+                 if let Some(profile_idx) = admin_state.profile_list_state.selected() {
+                     if let Some(profile) = app_state.profile_tree.profiles.get(profile_idx) {
+                         if !profile.tables.is_empty() {
+                             admin_state.table_list_state.select(Some(0));
+                         } else {
+                             admin_state.table_list_state.select(None);
+                         }
+                     } else {
+                          admin_state.table_list_state.select(None);
+                     }
+                 } else {
+                      admin_state.table_list_state.select(None);
+                 }
+            }
+            // Clear table nav selection if moving away from Tables
+            if old_focus == AdminFocus::Tables && new_focus != AdminFocus::Tables {
+                 admin_state.table_list_state.select(None);
+            }
+            // Clear profile nav selection if moving away from Profiles
+            if old_focus == AdminFocus::Profiles && new_focus != AdminFocus::Profiles {
+                 // Maybe keep profile nav highlight? Let's try clearing it.
+                 // admin_state.profile_list_state.select(None); // Optional: clear profile nav highlight
+            }
+
+            true // Event handled
+        }
+
+        // --- Selection ---
+        Some("select") => {
+            match current_focus {
+                AdminFocus::Profiles => {
+                    // Set the persistent selection to the currently navigated item
+                    if let Some(nav_idx) = admin_state.profile_list_state.selected() {
+                        admin_state.selected_profile_index = Some(nav_idx); // Set persistent selection
+
+                        // Move focus to Tables (like pressing 'l')
+                        admin_state.current_focus = AdminFocus::Tables;
+
+                        // Select the first table for navigation highlight
+                        admin_state.table_list_state.select(None); // Clear table nav first
+                        admin_state.selected_table_index = None;   // Clear persistent table selection
+                        if let Some(profile) = app_state.profile_tree.profiles.get(nav_idx) {
+                                  if !profile.tables.is_empty() {
+                                      // Set table nav highlight
+                                      admin_state.table_list_state.select(Some(0));
+                                  }
+                              }
+
+                        *command_message = format!("Selected profile idx {}, focus on Tables", nav_idx);
+                    } else {
+                        *command_message = "No profile selected".to_string();
+                    }
+                }
+                AdminFocus::Tables => {
+                    // Set the persistent selection to the currently navigated item
+                    if let Some(nav_idx) = admin_state.table_list_state.selected() {
+                         admin_state.selected_table_index = Some(nav_idx); // Set persistent selection
+                         *command_message = format!("Selected table index {}", nav_idx);
+                     } else {
+                         *command_message = "No table highlighted".to_string();
+                     }
+                    // We don't change focus here for now.
+                }
+                AdminFocus::Button1 => {
+                    *command_message = "Action: Add Logic (Not Implemented)".to_string();
+                    // TODO: Trigger action for Button 1
+                }
+                AdminFocus::Button2 => {
+                   buffer_state.update_history(AppView::AddTable);
+                   *command_message = "Navigating to Add Table page...".to_string();
+                }
+                AdminFocus::Button3 => {
+                    *command_message = "Action: Change Table (Not Implemented)".to_string();
+                    // TODO: Trigger action for Button 3
+                }
+            }
+            true // Event handled
+        }
+
+        // --- Other General Keys (Ignore for admin nav) ---
+        Some("toggle_sidebar") | Some("toggle_buffer_list") | Some("next_field") | Some("prev_field") => {
+            // These are handled globally or not applicable here.
+            false
+        }
+
+        // --- No matching action ---
+        _ => false, // Event not handled by admin navigation
+    }
+}

client/src/modes/canvas/edit.rs

@@ -1,14 +1,19 @@
 // src/modes/canvas/edit.rs
-
 use crate::config::binds::config::Config;
 use crate::services::grpc_client::GrpcClient;
-use crate::state::pages::{auth::{LoginState, RegisterState}};
+use crate::state::pages::{auth::{LoginState, RegisterState}, canvas_state::CanvasState};
-use crate::state::pages::canvas_state::CanvasState;
 use crate::state::pages::form::FormState;
-use crate::functions::modes::edit::{auth_e, form_e};
 use crate::modes::handlers::event::EventOutcome;
+use crate::functions::modes::edit::{auth_e, form_e};
 use crate::state::app::state::AppState;
 use crossterm::event::{KeyCode, KeyEvent, KeyModifiers};
+// Removed duplicate/unused imports
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum EditEventOutcome {
+    Message(String), // Return a message, stay in Edit mode
+    ExitEditMode,    // Signal to exit Edit mode
+}
 
 pub async fn handle_edit_event(
     key: KeyEvent,
@@ -17,12 +22,12 @@ pub async fn handle_edit_event(
     login_state: &mut LoginState,
     register_state: &mut RegisterState,
     ideal_cursor_column: &mut usize,
-    command_message: &mut String,
+    // command_message: &mut String, // Removed as messages are returned
     current_position: &mut u64,
     total_count: u64,
     grpc_client: &mut GrpcClient,
     app_state: &AppState,
-) -> Result<String, Box<dyn std::error::Error>> {
+) -> Result<EditEventOutcome, Box<dyn std::error::Error>> {
 
     // Global command mode check
     if let Some("enter_command_mode") = config.get_action_for_key_in_mode(
@@ -30,8 +35,7 @@ pub async fn handle_edit_event(
         key.code,
         key.modifiers
     ) {
-        *command_message = "Switching to Command Mode...".to_string();
+        return Ok(EditEventOutcome::Message("Switching to Command Mode...".to_string()));
-        return Ok(command_message.clone());
     }
 
     // Common actions (save/revert)
@@ -41,14 +45,15 @@ pub async fn handle_edit_event(
         key.modifiers
     ) {
         if matches!(action, "save" | "revert") {
-            let message = if app_state.ui.show_login {
+            // Ensure all branches result in Result<String, Error> before the final Ok(...) wrap
+            let message_string: String = if app_state.ui.show_login {
                 auth_e::execute_common_action(
                     action,
                     login_state,
                     grpc_client,
                     current_position,
                     total_count
-                ).await
+                ).await? // Results in String on success
             } else if app_state.ui.show_register {
                 auth_e::execute_common_action(
                     action,
@@ -56,46 +61,66 @@ pub async fn handle_edit_event(
                     grpc_client,
                     current_position,
                     total_count
-                ).await
+                ).await? // Results in String on success
             } else {
-                form_e::execute_common_action(
+                let outcome = form_e::execute_common_action(
                     action,
-                    form_state,  // Concrete FormState
+                    form_state,
                     grpc_client,
                     current_position,
                     total_count
-                ).await
+                ).await?; // This returns EventOutcome on success
-                .map(|outcome| match outcome {
+
+                // Extract the message string from the EventOutcome
+                match outcome {
                     EventOutcome::Ok(msg) => msg,
-                    EventOutcome::Exit(msg) => format!("Exit requested: {}", msg),
+                    EventOutcome::DataSaved(_, msg) => msg,
-                    EventOutcome::DataSaved(save_outcome, msg) => format!("Data saved ({:?}): {}", save_outcome, msg),
+                    _ => format!("Unexpected outcome from common action: {:?}", outcome),
-                    EventOutcome::ButtonSelected { context, index } => {
+                }
-                        "Unexpected action in edit mode".to_string()
+            };
-                    }
+            // Wrap the resulting String message
-                })
+            return Ok(EditEventOutcome::Message(message_string));
-            }?;
-            return Ok(message);
         }
     }
 
     // Edit-specific actions
     if let Some(action) = config.get_edit_action_for_key(key.code, key.modifiers) {
-        // --- Special Handling for Tab/Shift+Tab in Role Field ---
+        if action == "exit" {
+            if app_state.ui.show_register && register_state.in_suggestion_mode {
+                // Call the action, get Result<String, Error>
+                let msg = auth_e::execute_edit_action(
+                    "exit_suggestion_mode",
+                    key,
+                    register_state,
+                    ideal_cursor_column,
+                    grpc_client,
+                    current_position,
+                    total_count,
+                ).await?; // Results in String on success
+                // Wrap the String message
+                return Ok(EditEventOutcome::Message(msg));
+            } else {
+                // Signal exit
+                return Ok(EditEventOutcome::ExitEditMode);
+            }
+        }
+
+        // Special handling for role field suggestions
         if app_state.ui.show_register && register_state.current_field() == 4 {
             if !register_state.in_suggestion_mode && key.code == KeyCode::Tab && key.modifiers == KeyModifiers::NONE {
                 register_state.update_role_suggestions();
                 if !register_state.role_suggestions.is_empty() {
                     register_state.in_suggestion_mode = true;
-                    register_state.selected_suggestion_index = Some(0); // Select first suggestion
+                    register_state.selected_suggestion_index = Some(0);
-                    return Ok("Suggestions shown".to_string());
+                    return Ok(EditEventOutcome::Message("Suggestions shown".to_string()));
-                } else {
+                } else { // Added else here for clarity
-                    return Ok("No suggestions available".to_string());
+                    return Ok(EditEventOutcome::Message("No suggestions available".to_string()));
                 }
             }
         }
-        // --- End Special Handling ---
 
-        return if app_state.ui.show_login {
+        // Execute other edit actions
+        let msg = if app_state.ui.show_login {
             auth_e::execute_edit_action(
                 action,
                 key,
@@ -104,7 +129,7 @@ pub async fn handle_edit_event(
                 grpc_client,
                 current_position,
                 total_count
-            ).await
+            ).await? // Results in String
         } else if app_state.ui.show_register {
             auth_e::execute_edit_action(
                 action,
@@ -114,7 +139,7 @@ pub async fn handle_edit_event(
                 grpc_client,
                 current_position,
                 total_count
-            ).await
+            ).await? // Results in String
         } else {
             form_e::execute_edit_action(
                 action,
@@ -124,22 +149,22 @@ pub async fn handle_edit_event(
                 grpc_client,
                 current_position,
                 total_count
-            ).await
+            ).await? // Results in String
         };
+        // Wrap the resulting String message
+        return Ok(EditEventOutcome::Message(msg));
     }
 
     // Character insertion
     if let KeyCode::Char(_) = key.code {
-        // If in suggestion mode, exit it before inserting char
         if app_state.ui.show_register && register_state.in_suggestion_mode {
             register_state.in_suggestion_mode = false;
             register_state.show_role_suggestions = false;
             register_state.selected_suggestion_index = None;
         }
-        let is_role_field = app_state.ui.show_register && register_state.current_field() == 4;
+
-        // --- End Autocomplete Trigger ---
+        // Execute insert_char action
-        
+        let msg = if app_state.ui.show_login {
-        return if app_state.ui.show_login {
             auth_e::execute_edit_action(
                 "insert_char",
                 key,
@@ -148,7 +173,7 @@ pub async fn handle_edit_event(
                 grpc_client,
                 current_position,
                 total_count
-            ).await
+            ).await? // Results in String
         } else if app_state.ui.show_register {
             auth_e::execute_edit_action(
                 "insert_char",
@@ -158,7 +183,7 @@ pub async fn handle_edit_event(
                 grpc_client,
                 current_position,
                 total_count
-            ).await
+            ).await? // Results in String
         } else {
             form_e::execute_edit_action(
                 "insert_char",
@@ -168,23 +193,23 @@ pub async fn handle_edit_event(
                 grpc_client,
                 current_position,
                 total_count
-            ).await
+            ).await? // Results in String
         };
+        // Wrap the resulting String message
+        return Ok(EditEventOutcome::Message(msg));
     }
 
-    // Handle Backspace/Delete for Autocomplete Trigger
+    // Handle Backspace/Delete
     if matches!(key.code, KeyCode::Backspace | KeyCode::Delete) {
-        // If in suggestion mode, exit it before deleting char
         if app_state.ui.show_register && register_state.in_suggestion_mode {
             register_state.in_suggestion_mode = false;
             register_state.show_role_suggestions = false;
             register_state.selected_suggestion_index = None;
         }
-        let is_role_field = app_state.ui.show_register && register_state.current_field() == 4;
-        let action_str = if key.code == KeyCode::Backspace { "backspace" } else { "delete_char" };
 
-        // Execute the action first
+        let action_str = if key.code == KeyCode::Backspace { "backspace" } else { "delete_char" };
-        let result = if app_state.ui.show_register {
+        // Ensure both branches result in a String *before* wrapping
+        let result_msg: String = if app_state.ui.show_register {
              auth_e::execute_edit_action(
                 action_str,
                 key,
@@ -193,14 +218,17 @@ pub async fn handle_edit_event(
                 grpc_client,
                 current_position,
                 total_count
-            ).await
+            ).await? // Results in String
         } else {
-            // Handle for login/form if needed, assuming auth_e covers RegisterState
+             // Return String directly, not Ok(String)
-             Ok("Action not applicable here".to_string()) // Placeholder
+             "Action not applicable here".to_string()
-        }?;
+        }; // Semicolon here ends the if/else expression
 
-        return Ok(result);
+        // Wrap the resulting String message
+        return Ok(EditEventOutcome::Message(result_msg));
     }
 
-    Ok(command_message.clone())
+    // Default return if no other handler matched
+    Ok(EditEventOutcome::Message("".to_string()))
 }
+

client/src/modes/handlers/event.rs

@@ -20,6 +20,7 @@ use crate::tui::{
 };
 use crate::state::{
     app::{
+        highlight::HighlightState,
         state::AppState,
         buffer::{AppView, BufferState},
     },
@@ -35,8 +36,10 @@ use crate::modes::{
     common::{command_mode, commands::CommandHandler},
     handlers::mode_manager::{ModeManager, AppMode},
     canvas::{edit, read_only, common_mode},
+    highlight::highlight,
     general::{navigation, dialog},
 };
+use crate::functions::modes::navigation::{admin_nav, add_table_nav};
 use crate::config::binds::key_sequences::KeySequenceTracker;
 
 #[derive(Debug, Clone, PartialEq, Eq)]
@@ -52,6 +55,7 @@ pub struct EventHandler {
     pub command_input: String,
     pub command_message: String,
     pub is_edit_mode: bool,
+    pub highlight_state: HighlightState,
     pub edit_mode_cooldown: bool,
     pub ideal_cursor_column: usize,
     pub key_sequence_tracker: KeySequenceTracker,
@@ -65,6 +69,7 @@ impl EventHandler {
             command_input: String::new(),
             command_message: String::new(),
             is_edit_mode: false,
+            highlight_state: HighlightState::Off,
             edit_mode_cooldown: false,
             ideal_cursor_column: 0,
             key_sequence_tracker: KeySequenceTracker::new(800),
@@ -93,13 +98,13 @@ impl EventHandler {
         let current_mode = ModeManager::derive_mode(app_state, self);
         app_state.update_mode(current_mode);
 
-        // Determine the current view, including dynamic names
         let current_view = {
             let ui = &app_state.ui;
             if ui.show_intro { AppView::Intro }
             else if ui.show_login { AppView::Login }
             else if ui.show_register { AppView::Register }
             else if ui.show_admin { AppView::Admin }
+            else if ui.show_add_table { AppView::AddTable }
             else if ui.show_form {
                 let form_name = app_state.selected_profile.clone().unwrap_or_else(|| "Data Form".to_string());
                 AppView::Form(form_name)
@@ -108,7 +113,6 @@ impl EventHandler {
         };
         buffer_state.update_history(current_view);
 
-        // --- DIALOG MODALITY ---
         if app_state.ui.dialog.dialog_show {
             if let Some(dialog_result) = dialog::handle_dialog_event(
                 &event, config, app_state, auth_state, login_state, register_state, buffer_state
@@ -117,7 +121,6 @@ impl EventHandler {
             }
             return Ok(EventOutcome::Ok(String::new()));
         }
-        // --- END DIALOG MODALITY CHECK ---
 
         if let Event::Key(key) = event {
             let key_code = key.code;
@@ -135,10 +138,10 @@ impl EventHandler {
                 );
                 return Ok(EventOutcome::Ok(message));
             }
-            // --- Buffer Switching (Check Global) ---
+
             if !matches!(current_mode, AppMode::Edit | AppMode::Command) {
                 if let Some(action) = config.get_action_for_key_in_mode(
-                    &config.keybindings.global, key_code, modifiers // Check global bindings
+                    &config.keybindings.global, key_code, modifiers
                 ) {
                     match action {
                         "next_buffer" => {
@@ -151,14 +154,43 @@ impl EventHandler {
                                 return Ok(EventOutcome::Ok("Switched to previous buffer".to_string()));
                             }
                         }
-                        _ => {} // Other global actions could be handled here if needed
+                        _ => {}
                     }
                 }
             }
-            // --- End Global UI Toggles ---
 
             match current_mode {
                 AppMode::General => {
+                    // Prioritize Admin Panel navigation if it's visible
+                    if app_state.ui.show_admin
+                        && auth_state.role.as_deref() == Some("admin") {
+                        if admin_nav::handle_admin_navigation(
+                            key,
+                            config,
+                            app_state,
+                            admin_state,
+                            buffer_state,
+                            &mut self.command_message,
+                        ) {
+                            return Ok(EventOutcome::Ok(self.command_message.clone()));
+                        }
+                    }
+                    // --- Add Table Page Navigation ---
+                    if app_state.ui.show_add_table {
+                        if let Some(action) = config.get_general_action(key.code, key.modifiers) {
+                            if add_table_nav::handle_add_table_navigation(
+                                key,
+                                config,
+                                app_state,
+                                &mut admin_state.add_table_state,
+                                &mut self.command_message,
+
+                            ) {
+                                return Ok(EventOutcome::Ok(self.command_message.clone()));
+                            }
+                        }
+                    }
+
                     let nav_outcome = navigation::handle_navigation_event(
                         key,
                         config,
@@ -174,15 +206,14 @@ impl EventHandler {
                     ).await;
                     match nav_outcome {
                         Ok(EventOutcome::ButtonSelected { context, index }) => {
-                            let mut message = String::from("Selected"); // Default message
+                            let mut message = String::from("Selected");
                             match context {
                                 UiContext::Intro => {
                                     intro::handle_intro_selection(app_state, buffer_state, index);
                                     if app_state.ui.show_admin {
-                                        let profile_names = app_state.profile_tree.profiles.iter()
+                                        if !app_state.profile_tree.profiles.is_empty() {
-                                            .map(|p| p.name.clone())
+                                            admin_state.profile_list_state.select(Some(0));
-                                            .collect();
+                                        }
-                                        admin_state.set_profiles(profile_names);
                                     }
                                     message = format!("Intro Option {} selected", index);
                                 }
@@ -202,31 +233,57 @@ impl EventHandler {
                                 }
                                 UiContext::Admin => {
                                     admin::handle_admin_selection(app_state, admin_state);
-
                                     message = format!("Admin Option {} selected", index);
                                 }
                                 UiContext::Dialog => {
                                     message = "Internal error: Unexpected dialog state".to_string();
                                 }
                             }
-                            return Ok(EventOutcome::Ok(message)); // Return Ok with message
+                            return Ok(EventOutcome::Ok(message));
                         }
-                        other => return other, // Pass through Ok, Err, DataSaved directly
+                        other => return other,
                     }
                 },
 
                 AppMode::ReadOnly => {
-                    if config.is_enter_edit_mode_before(key_code, modifiers) &&
+                    // Check for Linewise highlight first
-                       ModeManager::can_enter_edit_mode(current_mode) {
+                    if config.get_read_only_action_for_key(key_code, modifiers) == Some("enter_highlight_mode_linewise")
+                        && ModeManager::can_enter_highlight_mode(current_mode)
+                    {
+                        let current_field_index = if app_state.ui.show_login { login_state.current_field() }
+                                              else if app_state.ui.show_register { register_state.current_field() }
+                                              else { form_state.current_field() };
+                        self.highlight_state = HighlightState::Linewise { anchor_line: current_field_index };
+                        self.command_message = "-- LINE HIGHLIGHT --".to_string();
+                        return Ok(EventOutcome::Ok(self.command_message.clone()));
+                    }
+                    // Check for Character-wise highlight
+                    else if config.get_read_only_action_for_key(key_code, modifiers) == Some("enter_highlight_mode")
+                        && ModeManager::can_enter_highlight_mode(current_mode)
+                    {
+                        let current_field_index = if app_state.ui.show_login { login_state.current_field() }
+                                              else if app_state.ui.show_register { register_state.current_field() }
+                                              else { form_state.current_field() };
+                        let current_cursor_pos = if app_state.ui.show_login { login_state.current_cursor_pos() }
+                                             else if app_state.ui.show_register { register_state.current_cursor_pos() }
+                                             else { form_state.current_cursor_pos() };
+                        let anchor = (current_field_index, current_cursor_pos);
+                        self.highlight_state = HighlightState::Characterwise { anchor };
+                        self.command_message = "-- HIGHLIGHT --".to_string();
+                        return Ok(EventOutcome::Ok(self.command_message.clone()));
+                    }
+                    // Check for entering edit mode (before cursor)
+                    else if config.get_read_only_action_for_key(key_code, modifiers) == Some("enter_edit_mode_before")
+                        && ModeManager::can_enter_edit_mode(current_mode) {
                         self.is_edit_mode = true;
                         self.edit_mode_cooldown = true;
                         self.command_message = "Edit mode".to_string();
                         terminal.set_cursor_style(SetCursorStyle::BlinkingBar)?;
                         return Ok(EventOutcome::Ok(self.command_message.clone()));
                     }
-
+                    // Check for entering edit mode (after cursor)
-                    if config.is_enter_edit_mode_after(key_code, modifiers) &&
+                    else if config.get_read_only_action_for_key(key_code, modifiers) == Some("enter_edit_mode_after")
-                       ModeManager::can_enter_edit_mode(current_mode) {
+                        && ModeManager::can_enter_edit_mode(current_mode) {
                         let current_input = if app_state.ui.show_login || app_state.ui.show_register{
                             login_state.get_current_input()
                         } else {
@@ -253,21 +310,17 @@ impl EventHandler {
                         terminal.set_cursor_style(SetCursorStyle::BlinkingBar)?;
                         return Ok(EventOutcome::Ok(self.command_message.clone()));
                     }
-
+                    // Check for entering command mode
-                    if let Some(action) = config.get_read_only_action_for_key(key_code, modifiers) {
+                    else if config.get_read_only_action_for_key(key_code, modifiers) == Some("enter_command_mode")
-                        if action == "enter_command_mode" && ModeManager::can_enter_command_mode(current_mode) {
+                         && ModeManager::can_enter_command_mode(current_mode) {
                             self.command_mode = true;
                             self.command_input.clear();
                             self.command_message.clear();
                             return Ok(EventOutcome::Ok(String::new()));
-                        }
                     }
 
-                    if let Some(action) = config.get_action_for_key_in_mode(
+                    // Check for common actions (save, quit, etc.) only if no mode change happened
-                        &config.keybindings.common,
+                    if let Some(action) = config.get_common_action(key_code, modifiers) {
-                        key_code,
-                        modifiers
-                    ) {
                         match action {
                             "save" | "force_quit" | "save_and_quit" | "revert" => {
                                 return common_mode::handle_core_action(
@@ -288,6 +341,7 @@ impl EventHandler {
                         }
                     }
 
+                    // If no mode change or specific common action handled, delegate to read_only handler
                     let (_should_exit, message) = read_only::handle_read_only_event(
                         app_state,
                         key,
@@ -303,59 +357,50 @@ impl EventHandler {
                         &mut self.edit_mode_cooldown,
                         &mut self.ideal_cursor_column,
                     ).await?;
+                    // Note: handle_read_only_event should ignore mode entry keys internally now
                     return Ok(EventOutcome::Ok(message));
-                },
+                }, // End AppMode::ReadOnly
+
+                AppMode::Highlight => {
+                     // --- Handle Highlight Mode Specific Keys ---
+                     // 1. Check for Exit first
+                     if config.get_highlight_action_for_key(key_code, modifiers) == Some("exit_highlight_mode") {
+                         self.highlight_state = HighlightState::Off;
+                         self.command_message = "Exited highlight mode".to_string();
+                         terminal.set_cursor_style(SetCursorStyle::SteadyBlock)?;
+                         return Ok(EventOutcome::Ok(self.command_message.clone()));
+                     }
+                     // 2. Check for Switch to Linewise
+                     else if config.get_highlight_action_for_key(key_code, modifiers) == Some("enter_highlight_mode_linewise") {
+                         // Only switch if currently characterwise
+                         if let HighlightState::Characterwise { anchor } = self.highlight_state {
+                             self.highlight_state = HighlightState::Linewise { anchor_line: anchor.0 };
+                             self.command_message = "-- LINE HIGHLIGHT --".to_string();
+                             return Ok(EventOutcome::Ok(self.command_message.clone()));
+                         }
+                        return Ok(EventOutcome::Ok("".to_string()));
+                     }
+
+                    let (_should_exit, message) = read_only::handle_read_only_event(
+                        app_state, key, config, form_state, login_state,
+                        register_state, &mut self.key_sequence_tracker,
+                        current_position, total_count, grpc_client,
+                        &mut self.command_message, &mut self.edit_mode_cooldown,
+                        &mut self.ideal_cursor_column,
+                    )
+                    .await?;
+                    return Ok(EventOutcome::Ok(message));
+                }
 
                 AppMode::Edit => {
-                    if config.is_exit_edit_mode(key_code, modifiers) {
+                    // First, check for common actions (save, revert, etc.) that apply in Edit mode
-                        self.is_edit_mode = false;
+                    // These might take precedence or have different behavior than the edit handler
-                        self.edit_mode_cooldown = true;
+                    if let Some(action) = config.get_common_action(key_code, modifiers) {
-
+                        // Handle common actions like save, revert, force_quit, save_and_quit
-                        let has_changes = if app_state.ui.show_login || app_state.ui.show_register{
+                        // Ensure these actions return EventOutcome directly if they might exit the app
-                            login_state.has_unsaved_changes()
-                        } else {
-                            form_state.has_unsaved_changes()
-                        };
-
-                        self.command_message = if has_changes {
-                            "Exited edit mode (unsaved changes remain)".to_string()
-                        } else {
-                            "Read-only mode".to_string()
-                        };
-
-                        terminal.set_cursor_style(SetCursorStyle::SteadyBlock)?;
-
-                        let current_input = if app_state.ui.show_login || app_state.ui.show_register{
-                            login_state.get_current_input()
-                        } else {
-                            form_state.get_current_input()
-                        };
-                        let current_cursor_pos = if app_state.ui.show_login || app_state.ui.show_register{
-                            login_state.current_cursor_pos()
-                        } else {
-                            form_state.current_cursor_pos()
-                        };
-
-                        if !current_input.is_empty() && current_cursor_pos >= current_input.len() {
-                            let new_pos = current_input.len() - 1;
-                            if app_state.ui.show_login || app_state.ui.show_register{
-                                login_state.set_current_cursor_pos(new_pos);
-                                self.ideal_cursor_column = login_state.current_cursor_pos();
-                            } else {
-                                form_state.set_current_cursor_pos(new_pos);
-                                self.ideal_cursor_column = form_state.current_cursor_pos();
-                            }
-                        }
-                        return Ok(EventOutcome::Ok(self.command_message.clone()));
-                    }
-
-                    if let Some(action) = config.get_action_for_key_in_mode(
-                        &config.keybindings.common,
-                        key_code,
-                        modifiers
-                    ) {
                         match action {
                             "save" | "force_quit" | "save_and_quit" | "revert" => {
+                                // This call likely returns EventOutcome, handle it directly
                                 return common_mode::handle_core_action(
                                     action,
                                     form_state,
@@ -370,27 +415,72 @@ impl EventHandler {
                                     total_count,
                                 ).await;
                             },
+                            // Handle other common actions if necessary
                             _ => {}
                         }
+                        // If a common action was handled but didn't return/exit,
+                        // we might want to stop further processing for this key event.
+                        // Depending on the action, you might return Ok(EventOutcome::Ok(...)) here.
+                        // For now, assume common actions either exit or don't prevent further processing.
                     }
 
-                    let message = edit::handle_edit_event(
+                    // If no common action took precedence, delegate to the edit-specific handler
+                    let edit_result = edit::handle_edit_event(
                         key,
                         config,
                         form_state,
                         login_state,
                         register_state,
                         &mut self.ideal_cursor_column,
-                        &mut self.command_message,
                         current_position,
                         total_count,
                         grpc_client,
                         app_state,
-                    ).await?;
+                    ).await;
 
-                    self.key_sequence_tracker.reset();
+                    match edit_result {
-                    return Ok(EventOutcome::Ok(message));
+                        Ok(edit::EditEventOutcome::ExitEditMode) => {
-                },
+                            // The edit handler signaled to exit the mode
+                            self.is_edit_mode = false;
+                            self.edit_mode_cooldown = true;
+                            let has_changes = if app_state.ui.show_login { login_state.has_unsaved_changes() }
+                                              else if app_state.ui.show_register { register_state.has_unsaved_changes() }
+                                              else { form_state.has_unsaved_changes() };
+                            self.command_message = if has_changes {
+                                "Exited edit mode (unsaved changes remain)".to_string()
+                            } else {
+                                "Read-only mode".to_string()
+                            };
+                            terminal.set_cursor_style(SetCursorStyle::SteadyBlock)?;
+                            // Adjust cursor position if needed
+                            let current_input = if app_state.ui.show_login { login_state.get_current_input() }
+                                                else if app_state.ui.show_register { register_state.get_current_input() }
+                                                else { form_state.get_current_input() };
+                            let current_cursor_pos = if app_state.ui.show_login { login_state.current_cursor_pos() }
+                                                     else if app_state.ui.show_register { register_state.current_cursor_pos() }
+                                                     else { form_state.current_cursor_pos() };
+                            if !current_input.is_empty() && current_cursor_pos >= current_input.len() {
+                                let new_pos = current_input.len() - 1;
+                                let target_state: &mut dyn CanvasState = if app_state.ui.show_login { login_state } else if app_state.ui.show_register { register_state } else { form_state };
+                                target_state.set_current_cursor_pos(new_pos);
+                                self.ideal_cursor_column = new_pos;
+                            }
+                            return Ok(EventOutcome::Ok(self.command_message.clone()));
+                        }
+                        Ok(edit::EditEventOutcome::Message(msg)) => {
+                            // Stay in edit mode, update message if not empty
+                            if !msg.is_empty() {
+                                self.command_message = msg;
+                            }
+                            self.key_sequence_tracker.reset(); // Reset sequence tracker on successful edit action
+                            return Ok(EventOutcome::Ok(self.command_message.clone()));
+                        }
+                        Err(e) => {
+                            // Handle error from the edit handler
+                            return Err(e);
+                        }
+                    }
+                }, // End AppMode::Edit
 
                 AppMode::Command => {
                     let outcome = command_mode::handle_command_event(

client/src/modes/handlers/mode_manager.rs

@@ -1,12 +1,14 @@
 // src/modes/handlers/mode_manager.rs
 use crate::state::app::state::AppState;
 use crate::modes::handlers::event::EventHandler;
+use crate::state::app::highlight::HighlightState;
 
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum AppMode {
     General,   // For intro and admin screens
     ReadOnly,  // Canvas read-only mode
     Edit,      // Canvas edit mode
+    Highlight, // Cnavas highlight/visual mode
     Command,   // Command mode overlay
 }
 
@@ -19,7 +21,11 @@ impl ModeManager {
             return AppMode::Command;
         }
 
-        if app_state.ui.focus_outside_canvas {
+        if !matches!(event_handler.highlight_state, HighlightState::Off) {
+            return AppMode::Highlight;
+        }
+
+        if app_state.ui.focus_outside_canvas || app_state.ui.show_add_table{
             return AppMode::General;
         }
 
@@ -50,6 +56,10 @@ impl ModeManager {
     }
     
     pub fn can_enter_read_only_mode(current_mode: AppMode) -> bool {
-        matches!(current_mode, AppMode::Edit | AppMode::Command)
+        matches!(current_mode, AppMode::Edit | AppMode::Command | AppMode::Highlight)
+    }
+
+    pub fn can_enter_highlight_mode(current_mode: AppMode) -> bool {
+        matches!(current_mode, AppMode::ReadOnly)
     }
 }

client/src/modes/highlight.rs

@@ -0,0 +1,2 @@
+// src/client/modes/highlight.rs
+pub mod highlight;

client/src/modes/highlight/highlight.rs

@@ -0,0 +1,62 @@
+// src/modes/highlight/highlight.rs
+// (This file is intentionally simple for now, reusing ReadOnly logic)
+
+use crate::config::binds::config::Config;
+use crate::config::binds::key_sequences::KeySequenceTracker;
+use crate::services::grpc_client::GrpcClient;
+use crate::state::app::state::AppState;
+use crate::state::pages::auth::{LoginState, RegisterState};
+use crate::state::pages::form::FormState;
+use crate::modes::handlers::event::EventOutcome;
+use crate::modes::read_only; // Import the ReadOnly handler
+use crossterm::event::KeyEvent;
+
+/// Handles events when in Highlight mode.
+/// Currently, it mostly delegates to the read_only handler for movement.
+/// Exiting highlight mode is handled directly in the main event handler.
+pub async fn handle_highlight_event(
+    app_state: &mut AppState,
+    key: KeyEvent,
+    config: &Config,
+    form_state: &mut FormState,
+    login_state: &mut LoginState,
+    register_state: &mut RegisterState,
+    key_sequence_tracker: &mut KeySequenceTracker,
+    current_position: &mut u64,
+    total_count: u64,
+    grpc_client: &mut GrpcClient,
+    command_message: &mut String,
+    edit_mode_cooldown: &mut bool,
+    ideal_cursor_column: &mut usize,
+) -> Result<EventOutcome, Box<dyn std::error::Error>> {
+    // Delegate movement and other actions to the read_only handler
+    // The rendering logic will use the highlight_anchor to draw the selection
+    let (should_exit, message) = read_only::handle_read_only_event(
+        app_state,
+        key,
+        config,
+        form_state,
+        login_state,
+        register_state,
+        key_sequence_tracker,
+        current_position,
+        total_count,
+        grpc_client,
+        command_message, // Pass the message buffer
+        edit_mode_cooldown,
+        ideal_cursor_column,
+    )
+    .await?;
+
+    // ReadOnly handler doesn't return EventOutcome directly, adapt if needed
+    // For now, assume Ok outcome unless ReadOnly signals an exit (which we ignore here)
+    if should_exit {
+        // This exit is likely for the whole app, let the main loop handle it
+        // We just return the message from read_only
+        Ok(EventOutcome::Ok(message))
+    } else {
+        Ok(EventOutcome::Ok(message))
+    }
+}
+
+

client/src/modes/mod.rs

@@ -3,8 +3,10 @@ pub mod handlers;
 pub mod canvas;
 pub mod general;
 pub mod common;
+pub mod highlight;
 
 pub use handlers::*;
 pub use canvas::*;
 pub use general::*;
 pub use common::*;
+pub use highlight::*;

client/src/state/app.rs

@@ -2,3 +2,4 @@
 
 pub mod state;
 pub mod buffer;
+pub mod highlight;

client/src/state/app/buffer.rs

@@ -7,6 +7,7 @@ pub enum AppView {
     Login,
     Register,
     Admin,
+    AddTable,
     Form(String),
     Scratch,
 }
@@ -18,7 +19,8 @@ impl AppView {
             AppView::Intro => "Intro",
             AppView::Login => "Login",
             AppView::Register => "Register",
-            AppView::Admin => "Admin Panel",
+            AppView::Admin => "Admin_Panel",
+            AppView::AddTable => "Add_Table",
             AppView::Form(name) => name.as_str(),
             AppView::Scratch => "*scratch*",
         }

client/src/state/app/highlight.rs

@@ -0,0 +1,20 @@
+// src/state/app/highlight.rs
+
+/// Represents the different states of text highlighting.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum HighlightState {
+    /// Highlighting is inactive.
+    Off,
+    /// Highlighting character by character. Stores the anchor point (line index, char index).
+    Characterwise { anchor: (usize, usize) },
+    /// Highlighting line by line. Stores the anchor line index.
+    Linewise { anchor_line: usize },
+}
+
+impl Default for HighlightState {
+    /// The default state is no highlighting.
+    fn default() -> Self {
+        HighlightState::Off
+    }
+}
+

client/src/state/app/state.rs

@@ -19,6 +19,7 @@ pub struct UiState {
     pub show_buffer_list: bool,
     pub show_intro: bool,
     pub show_admin: bool,
+    pub show_add_table: bool,
     pub show_form: bool,
     pub show_login: bool,
     pub show_register: bool,
@@ -134,6 +135,7 @@ impl Default for UiState {
             show_sidebar: false,
             show_intro: true,
             show_admin: false,
+            show_add_table: false,
             show_form: false,
             show_login: false,
             show_register: false,

client/src/state/pages.rs

@@ -4,4 +4,5 @@ pub mod form;
 pub mod auth;
 pub mod admin;
 pub mod intro;
+pub mod add_table;
 pub mod canvas_state;

client/src/state/pages/add_table.rs

@@ -0,0 +1,172 @@
+// src/state/pages/add_table.rs
+use crate::state::pages::canvas_state::CanvasState;
+use ratatui::widgets::TableState;
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct ColumnDefinition {
+    pub name: String,
+    pub data_type: String,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct LinkDefinition {
+    pub linked_table_name: String,
+    pub is_required: bool,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub enum AddTableFocus {
+    #[default]
+    InputTableName, // Field 0 for CanvasState
+    InputColumnName, // Field 1 for CanvasState
+    InputColumnType, // Field 2 for CanvasState
+    AddColumnButton,
+    // Result Tables
+    ColumnsTable,
+    IndexesTable,
+    LinksTable,
+    // Buttons
+    SaveButton,
+    CancelButton,
+}
+
+#[derive(Debug, Clone)]
+pub struct AddTableState {
+    pub profile_name: String,
+    pub table_name: String,
+    pub column_name_input: String,
+    pub column_type_input: String,
+    pub columns: Vec<ColumnDefinition>,
+    pub indexes: Vec<String>,
+    pub links: Vec<LinkDefinition>,
+    pub current_focus: AddTableFocus,
+    pub column_table_state: TableState,
+    pub index_table_state: TableState,
+    pub link_table_state: TableState,
+    pub table_name_cursor_pos: usize,
+    pub column_name_cursor_pos: usize,
+    pub column_type_cursor_pos: usize,
+    pub has_unsaved_changes: bool,
+}
+
+impl Default for AddTableState {
+    fn default() -> Self {
+        // Initialize with some dummy data for demonstration
+        AddTableState {
+            profile_name: "default".to_string(), // Should be set dynamically
+            table_name: String::new(), // Start empty
+            column_name_input: String::new(),
+            column_type_input: String::new(),
+            columns: vec![
+                ColumnDefinition { name: "id".to_string(), data_type: "INTEGER".to_string() },
+                ColumnDefinition { name: "name".to_string(), data_type: "TEXT".to_string() },
+            ],
+            indexes: vec!["id".to_string()],
+            links: vec![
+                LinkDefinition { linked_table_name: "related_table".to_string(), is_required: true },
+                LinkDefinition { linked_table_name: "another_table".to_string(), is_required: false },
+            ],
+            current_focus: AddTableFocus::InputTableName,
+            column_table_state: TableState::default().with_selected(0),
+            index_table_state: TableState::default().with_selected(0),
+            link_table_state: TableState::default().with_selected(0),
+            table_name_cursor_pos: 0,
+            column_name_cursor_pos: 0,
+            column_type_cursor_pos: 0,
+            has_unsaved_changes: false,
+        }
+    }
+}
+
+impl AddTableState {
+    const INPUT_FIELD_COUNT: usize = 3;
+}
+
+// Implement CanvasState for the input fields
+impl CanvasState for AddTableState {
+    fn current_field(&self) -> usize {
+        match self.current_focus {
+            AddTableFocus::InputTableName => 0,
+            AddTableFocus::InputColumnName => 1,
+            AddTableFocus::InputColumnType => 2,
+            // If focus is elsewhere, default to the first field for canvas rendering logic
+            _ => 0,
+        }
+    }
+
+    fn current_cursor_pos(&self) -> usize {
+        match self.current_focus {
+            AddTableFocus::InputTableName => self.table_name_cursor_pos,
+            AddTableFocus::InputColumnName => self.column_name_cursor_pos,
+            AddTableFocus::InputColumnType => self.column_type_cursor_pos,
+            _ => 0, // Default if focus is not on an input field
+        }
+    }
+
+    fn has_unsaved_changes(&self) -> bool {
+        self.has_unsaved_changes
+    }
+
+    fn inputs(&self) -> Vec<&String> {
+        vec![&self.table_name, &self.column_name_input, &self.column_type_input]
+    }
+
+    fn get_current_input(&self) -> &str {
+        match self.current_focus {
+            AddTableFocus::InputTableName => &self.table_name,
+            AddTableFocus::InputColumnName => &self.column_name_input,
+            AddTableFocus::InputColumnType => &self.column_type_input,
+            _ => "", // Should not happen if called correctly
+        }
+    }
+
+    fn get_current_input_mut(&mut self) -> &mut String {
+        match self.current_focus {
+            AddTableFocus::InputTableName => &mut self.table_name,
+            AddTableFocus::InputColumnName => &mut self.column_name_input,
+            AddTableFocus::InputColumnType => &mut self.column_type_input,
+            // This case needs careful handling. If focus isn't on an input,
+            // which mutable string should we return? Returning the first one
+            // might be unexpected. Consider panicking or returning Option if this state is invalid.
+            // For now, returning the first field to avoid panics during rendering.
+            _ => &mut self.table_name,
+        }
+    }
+
+    fn fields(&self) -> Vec<&str> {
+        // These must match the order used in render_add_table
+        vec!["Table name", "Name", "Type"]
+    }
+
+    fn set_current_field(&mut self, index: usize) {
+        self.current_focus = match index {
+            0 => AddTableFocus::InputTableName,
+            1 => AddTableFocus::InputColumnName,
+            2 => AddTableFocus::InputColumnType,
+            _ => self.current_focus, // Stay on current focus if index is out of bounds
+        };
+    }
+
+    fn set_current_cursor_pos(&mut self, pos: usize) {
+        match self.current_focus {
+            AddTableFocus::InputTableName => self.table_name_cursor_pos = pos,
+            AddTableFocus::InputColumnName => self.column_name_cursor_pos = pos,
+            AddTableFocus::InputColumnType => self.column_type_cursor_pos = pos,
+            _ => {} // Do nothing if focus is not on an input field
+        }
+    }
+
+    fn set_has_unsaved_changes(&mut self, changed: bool) {
+        self.has_unsaved_changes = changed;
+    }
+
+    // --- Autocomplete Support (Not needed for this form yet) ---
+    fn get_suggestions(&self) -> Option<&[String]> {
+        None
+    }
+
+    fn get_selected_suggestion_index(&self) -> Option<usize> {
+        None
+    }
+}
+

client/src/state/pages/admin.rs

@@ -1,65 +1,178 @@
 // src/state/pages/admin.rs
 
 use ratatui::widgets::ListState;
+use crate::state::pages::add_table::AddTableState;
+
+// Define the focus states for the admin panel panes
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub enum AdminFocus {
+    #[default] // Default focus is on the profiles list
+    Profiles,
+    Tables,
+    Button1,
+    Button2,
+    Button3,
+}
 
 #[derive(Default, Clone, Debug)]
 pub struct AdminState {
-    pub profiles: Vec<String>,
+    pub profiles: Vec<String>, // Holds profile names (used by non-admin view)
-    pub list_state: ListState,
+    pub profile_list_state: ListState, // Tracks navigation highlight (>) in profiles
+    pub table_list_state: ListState,   // Tracks navigation highlight (>) in tables
+    pub selected_profile_index: Option<usize>, // Index with [*] in profiles (persistent)
+    pub selected_table_index: Option<usize>,   // Index with [*] in tables (persistent)
+    pub current_focus: AdminFocus,     // Tracks which pane is focused
+    pub add_table_state: AddTableState,
 }
 
 impl AdminState {
     /// Gets the index of the currently selected item.
     pub fn get_selected_index(&self) -> Option<usize> {
-        self.list_state.selected()
+        self.profile_list_state.selected()
     }
 
     /// Gets the name of the currently selected profile.
     pub fn get_selected_profile_name(&self) -> Option<&String> {
-        self.list_state.selected().and_then(|i| self.profiles.get(i))
+        self.profile_list_state.selected().and_then(|i| self.profiles.get(i))
     }
 
     /// Populates the profile list and updates/resets the selection.
     pub fn set_profiles(&mut self, new_profiles: Vec<String>) {
-        let current_selection_index = self.list_state.selected();
+        let current_selection_index = self.profile_list_state.selected();
         self.profiles = new_profiles;
 
         if self.profiles.is_empty() {
-            self.list_state.select(None);
+            self.profile_list_state.select(None);
         } else {
             let new_selection = match current_selection_index {
                 Some(index) => Some(index.min(self.profiles.len() - 1)),
                 None => Some(0),
             };
-            self.list_state.select(new_selection);
+            self.profile_list_state.select(new_selection);
         }
     }
 
     /// Selects the next profile in the list, wrapping around.
     pub fn next(&mut self) {
         if self.profiles.is_empty() {
-            self.list_state.select(None);
+            self.profile_list_state.select(None);
             return;
         }
-        let i = match self.list_state.selected() {
+        let i = match self.profile_list_state.selected() {
             Some(i) => if i >= self.profiles.len() - 1 { 0 } else { i + 1 },
             None => 0,
         };
-        self.list_state.select(Some(i));
+        self.profile_list_state.select(Some(i));
     }
 
     /// Selects the previous profile in the list, wrapping around.
     pub fn previous(&mut self) {
         if self.profiles.is_empty() {
-            self.list_state.select(None);
+            self.profile_list_state.select(None);
             return;
         }
-        let i = match self.list_state.selected() {
+        let i = match self.profile_list_state.selected() {
             Some(i) => if i == 0 { self.profiles.len() - 1 } else { i - 1 },
             None => self.profiles.len() - 1,
         };
-        self.list_state.select(Some(i));
+        self.profile_list_state.select(Some(i));
     }
 
+    /// Gets the index of the currently selected profile.
+    pub fn get_selected_profile_index(&self) -> Option<usize> {
+        self.profile_list_state.selected()
+    }
+
+    /// Gets the index of the currently selected table.
+    pub fn get_selected_table_index(&self) -> Option<usize> {
+        self.table_list_state.selected()
+    }
+
+    /// Selects a profile by index and resets table selection.
+    pub fn select_profile(&mut self, index: Option<usize>) {
+        self.profile_list_state.select(index);
+        self.table_list_state.select(None);
+    }
+
+    /// Selects a table by index.
+    pub fn select_table(&mut self, index: Option<usize>) {
+        self.table_list_state.select(index);
+    }
+
+    /// Selects the next profile, wrapping around.
+    /// `profile_count` should be the total number of profiles available.
+    pub fn next_profile(&mut self, profile_count: usize) {
+        if profile_count == 0 {
+            return;
+        }
+        let i = match self.get_selected_profile_index() {
+            Some(i) => {
+                if i >= profile_count - 1 {
+                    0
+                } else {
+                    i + 1
+                }
+            }
+            None => 0,
+        };
+        self.select_profile(Some(i)); // Use the helper method
+    }
+
+    /// Selects the previous profile, wrapping around.
+    /// `profile_count` should be the total number of profiles available.
+    pub fn previous_profile(&mut self, profile_count: usize) {
+        if profile_count == 0 {
+            return;
+        }
+        let i = match self.get_selected_profile_index() {
+            Some(i) => {
+                if i == 0 {
+                    profile_count - 1
+                } else {
+                    i - 1
+                }
+            }
+            None => 0, // Or profile_count - 1 if you prefer wrapping from None
+        };
+        self.select_profile(Some(i)); // Use the helper method
+    }
+
+    /// Selects the next table, wrapping around.
+    /// `table_count` should be the number of tables in the *currently selected* profile.
+    pub fn next_table(&mut self, table_count: usize) {
+        if table_count == 0 {
+            return;
+        }
+        let i = match self.get_selected_table_index() {
+            Some(i) => {
+                if i >= table_count - 1 {
+                    0
+                } else {
+                    i + 1
+                }
+            }
+            None => 0,
+        };
+        self.select_table(Some(i));
+    }
+
+    /// Selects the previous table, wrapping around.
+    /// `table_count` should be the number of tables in the *currently selected* profile.
+    pub fn previous_table(&mut self, table_count: usize) {
+        if table_count == 0 {
+            return;
+        }
+        let i = match self.get_selected_table_index() {
+            Some(i) => {
+                if i == 0 {
+                    table_count - 1
+                } else {
+                    i - 1
+                }
+            }
+            None => 0, // Or table_count - 1
+        };
+        self.select_table(Some(i));
+    }
 }
 

client/src/state/pages/form.rs

@@ -2,12 +2,13 @@
 use crate::config::colors::themes::Theme;
 use ratatui::layout::Rect;
 use ratatui::Frame;
+use crate::state::app::highlight::HighlightState;
 use crate::state::pages::canvas_state::CanvasState;
 
 pub struct FormState {
     pub id: i64,
-    pub fields: Vec<String>, // Use Vec<String> for dynamic field names
+    pub fields: Vec<String>,
-    pub values: Vec<String>, // Store field values dynamically
+    pub values: Vec<String>,
     pub current_field: usize,
     pub has_unsaved_changes: bool,
     pub current_cursor_pos: usize,
@@ -33,6 +34,7 @@ impl FormState {
         area: Rect,
         theme: &Theme,
         is_edit_mode: bool,
+        highlight_state: &HighlightState,
         total_count: u64,
         current_position: u64,
     ) {
@@ -48,6 +50,7 @@ impl FormState {
             &values,
             theme,
             is_edit_mode,
+            highlight_state,
             total_count,
             current_position,
         );

client/src/ui/handlers/render.rs

@@ -8,6 +8,7 @@ use crate::components::{
     intro::intro::render_intro,
     handlers::sidebar::{self, calculate_sidebar_layout},
     form::form::render_form,
+    admin::render_add_table,
     auth::{login::render_login, register::render_register},
 };
 use crate::config::colors::themes::Theme;
@@ -21,6 +22,7 @@ use crate::state::pages::intro::IntroState;
 use crate::state::app::buffer::BufferState;
 use crate::state::app::state::AppState;
 use crate::state::pages::admin::AdminState;
+use crate::state::app::highlight::HighlightState;
 
 pub fn render_ui(
     f: &mut Frame,
@@ -33,6 +35,7 @@ pub fn render_ui(
     buffer_state: &BufferState,
     theme: &Theme,
     is_edit_mode: bool,
+    highlight_state: &HighlightState,
     total_count: u64,
     current_position: u64,
     current_dir: &str,
@@ -91,7 +94,18 @@ pub fn render_ui(
             theme,
             register_state,
             app_state,
-            register_state.current_field < 4
+            register_state.current_field < 4,
+            highlight_state,
+        );
+    } else if app_state.ui.show_add_table {
+        render_add_table(
+            f,
+            main_content_area,
+            theme,
+            app_state,
+            &mut admin_state.add_table_state,
+            login_state.current_field < 3,
+            highlight_state,
         );
     } else if app_state.ui.show_login {
         render_login(
@@ -100,11 +114,13 @@ pub fn render_ui(
             theme,
             login_state,
             app_state,
-            login_state.current_field < 2
+            login_state.current_field < 2,
+            highlight_state,
         );
     } else if app_state.ui.show_admin {
         crate::components::admin::admin_panel::render_admin_panel(
             f,
+            app_state,
             auth_state,
             admin_state,
             main_content_area,
@@ -165,6 +181,7 @@ pub fn render_ui(
             &values,
             theme,
             is_edit_mode,
+            highlight_state,
             total_count,
             current_position,
         );

client/src/ui/handlers/ui.rs

@@ -67,12 +67,20 @@ pub async fn run_ui() -> Result<(), Box<dyn std::error::Error>> {
             app_state.ui.show_login = false;
             app_state.ui.show_register = false;
             app_state.ui.show_admin = false;
+            app_state.ui.show_add_table = false;
             app_state.ui.show_form = false;
             match active_view {
                 AppView::Intro => app_state.ui.show_intro = true,
                 AppView::Login => app_state.ui.show_login = true,
                 AppView::Register => app_state.ui.show_register = true,
-                AppView::Admin => app_state.ui.show_admin = true,
+                AppView::Admin => {
+                    app_state.ui.show_admin = true;
+                    let profile_names = app_state.profile_tree.profiles.iter()
+                        .map(|p| p.name.clone())
+                        .collect();
+                    admin_state.set_profiles(profile_names);
+                }
+                AppView::AddTable => app_state.ui.show_add_table = true,
                 AppView::Form(_) => app_state.ui.show_form = true,
                 AppView::Scratch => {} // Or show a scratchpad component
             }
@@ -91,6 +99,7 @@ pub async fn run_ui() -> Result<(), Box<dyn std::error::Error>> {
                 &buffer_state,
                 &theme,
                 is_edit_mode,
+                &event_handler.highlight_state,
                 app_state.total_count,
                 app_state.current_position,
                 &app_state.current_dir,
@@ -108,6 +117,10 @@ pub async fn run_ui() -> Result<(), Box<dyn std::error::Error>> {
             AppMode::Edit => {
                 terminal.show_cursor()?;
             }
+            AppMode::Highlight => {
+                terminal.set_cursor_style(SetCursorStyle::SteadyBlock)?;
+                terminal.show_cursor()?;
+            }
             AppMode::ReadOnly => {
                 if !app_state.ui.focus_outside_canvas {
                     terminal.set_cursor_style(SetCursorStyle::SteadyBlock)?;