feat(style)!: Revamp the entire UI to have less borders and distractions

1. Removed a lot of unnecessary borders around elements.
2. Added line numbers for the input in issue conversation
3. Added a `BodyPreview` component that shows a preview of the issue
body in the TUI list widget.

test(ui): update tests

chore: fix lints

feat(style): migrate over issue_create

fix(style): remove old style borders for new ones in textarea previews

fix: fix bugs

Author: JayanAXHF

src/ui/components/issue_conversation.rs

@@ -12,18 +12,19 @@ use rat_cursor::HasScreenCursor;
 use rat_widget::{
     event::{HandleEvent, Outcome, TextOutcome, ct_event},
     focus::{FocusBuilder, FocusFlag, HasFocus, Navigation},
+    line_number::{LineNumberState, LineNumbers},
     list::{ListState, selection::RowSelection},
     paragraph::{Paragraph, ParagraphState},
     textarea::{TextArea, TextAreaState, TextWrap},
 };
 use ratatui::{
     buffer::Buffer,
-    layout::Rect,
-    style::{Color, Modifier, Style, Stylize},
+    layout::{Rect, Spacing},
+    style::{Color, Modifier, Style},
     text::{Line, Span, Text},
-    widgets::{self, Block, ListItem, StatefulWidget, Widget},
+    widgets::{self, Block, Borders, ListItem, Padding, StatefulWidget, Widget},
 };
-use ratatui_macros::{horizontal, line, span, vertical};
+use ratatui_macros::{horizontal, line, vertical};
 use std::{
     collections::{HashMap, HashSet},
     sync::{Arc, OnceLock, RwLock},
@@ -170,7 +171,7 @@ pub struct TimelineEventView {
 }
 
 impl TimelineEventView {
-    fn from_api(event: TimelineEvent, fallback_id: u64) -> Option<Self> {
+    pub(crate) fn from_api(event: TimelineEvent, fallback_id: u64) -> Option<Self> {
         if matches!(
             event.event,
             IssueEvent::Commented | IssueEvent::LineCommented | IssueEvent::CommentDeleted
@@ -210,6 +211,7 @@ impl TimelineEventView {
 
 pub struct IssueConversation {
     title: Option<Arc<str>>,
+    ln_state: LineNumberState,
     action_tx: Option<tokio::sync::mpsc::Sender<Action>>,
     current: Option<IssueConversationSeed>,
     cache_number: Option<u64>,
@@ -264,13 +266,13 @@ enum MessageKey {
 }
 
 #[derive(Debug, Clone, Default)]
-struct MarkdownRender {
-    lines: Vec<Line<'static>>,
-    links: Vec<RenderedLink>,
+pub(crate) struct MarkdownRender {
+    pub(crate) lines: Vec<Line<'static>>,
+    pub(crate) links: Vec<RenderedLink>,
 }
 
 #[derive(Debug, Clone)]
-struct RenderedLink {
+pub(crate) struct RenderedLink {
     line: usize,
     col: usize,
     label: String,
@@ -314,6 +316,7 @@ impl IssueConversation {
             action_tx: None,
             current: None,
             cache_number: None,
+            ln_state: LineNumberState::default(),
             cache_comments: Vec::new(),
             timeline_cache_number: None,
             cache_timeline: Vec::new(),
@@ -358,48 +361,40 @@ impl IssueConversation {
             return;
         }
         self.area = area.main_content;
-        let title = self.title.clone().unwrap_or_default();
-        let wrapped_title = wrap(&title, area.main_content.width.saturating_sub(2) as usize);
-        let title_para_height = wrapped_title.len() as u16 + 2;
-        let last_item = wrapped_title.last();
-        let last_line = last_item
-            .as_ref()
-            .map(|l| {
-                line![
-                    l.to_string(),
-                    span!(
-                        " #{}",
-                        self.current.as_ref().map(|s| s.number).unwrap_or_default()
-                    )
-                    .dim()
-                ]
-            })
-            .unwrap_or_else(|| Line::from(""));
-        let wrapped_title_len = wrapped_title.len() as u16;
-        let title_para = Text::from_iter(
-            wrapped_title
-                .into_iter()
-                .take(wrapped_title_len as usize - 1)
-                .map(Line::from)
-                .chain(std::iter::once(last_line)),
-        );
+        let mut title = self.title.clone().unwrap_or_default().to_string();
+        title.push_str(&format!(
+            " #{}",
+            self.current.as_ref().map(|s| s.number).unwrap_or_default()
+        ));
+        let title = title.trim();
+        let wrapped_title = wrap(title, area.main_content.width.saturating_sub(2) as usize);
+        let title_para_height = wrapped_title.len() as u16 + 1;
+        let title_para = Text::from_iter(wrapped_title);
 
         let areas = vertical![==title_para_height, *=1, ==5].split(area.main_content);
         let title_area = areas[0];
         let content_area = areas[1];
         let input_area = areas[2];
-        let content_split = horizontal![*=1, *=1].split(content_area);
+        let content_split = horizontal![*=1, *=1]
+            .spacing(Spacing::Overlap(1))
+            .split(content_area);
         let list_area = content_split[0];
         let body_area = content_split[1];
         let items = self.build_items(list_area, body_area);
 
         let title_widget = widgets::Paragraph::new(title_para)
-            .block(Block::bordered().border_type(ratatui::widgets::BorderType::Rounded))
+            .block(
+                Block::default()
+                    .padding(Padding::horizontal(1))
+                    .borders(Borders::BOTTOM)
+                    .merge_borders(ratatui::symbols::merge::MergeStrategy::Exact),
+            )
             .style(Style::default().add_modifier(Modifier::BOLD));
         title_widget.render(title_area, buf);
 
-        let mut list_block = Block::bordered()
-            .border_type(ratatui::widgets::BorderType::Rounded)
+        let mut list_block = Block::default()
+            .borders(Borders::RIGHT)
+            .merge_borders(ratatui::symbols::merge::MergeStrategy::Exact)
             .border_style(get_border_style(&self.list_state));
 
         if !self.is_loading_current() {
@@ -449,13 +444,26 @@ impl IssueConversation {
 
         match self.textbox_state {
             InputState::Input => {
+                let [line_numbers, input_area] = horizontal![==self.input_state.len_lines().checked_ilog10().unwrap_or(0) as u16 + 2, *=1].areas(input_area);
+                let ln_block = Block::default()
+                    .borders(Borders::TOP)
+                    .merge_borders(ratatui::symbols::merge::MergeStrategy::Exact)
+                    .border_style(get_border_style(&self.input_state));
+                let ln = LineNumbers::new()
+                    .with_textarea(&self.input_state)
+                    .block(ln_block)
+                    .style(Style::default().dim());
+                ln.render(line_numbers, buf, &mut self.ln_state);
+
                 let input_title = if let Some(err) = &self.post_error {
                     format!("Comment (Ctrl+Enter to send) | {err}")
                 } else {
                     "Comment (Ctrl+Enter to send)".to_string()
                 };
-                let mut input_block = Block::bordered()
-                    .border_type(ratatui::widgets::BorderType::Rounded)
+                let mut input_block = Block::default()
+                    .borders(Borders::TOP)
+                    .merge_borders(ratatui::symbols::merge::MergeStrategy::Exact)
+                    .padding(Padding::horizontal(1))
                     .border_style(get_border_style(&self.input_state));
                 if !self.posting {
                     input_block = input_block.title(input_title);
@@ -470,8 +478,10 @@ impl IssueConversation {
                     render_markdown_lines(&self.input_state.text(), self.markdown_width, 2);
                 let para = Paragraph::new(rendered)
                     .block(
-                        Block::bordered()
-                            .border_type(ratatui::widgets::BorderType::Rounded)
+                        Block::default()
+                            .borders(Borders::TOP)
+                            .merge_borders(ratatui::symbols::merge::MergeStrategy::Exact)
+                            .padding(Padding::horizontal(1))
                             .border_style(get_border_style(&self.paragraph_state))
                             .title("Preview"),
                     )
@@ -636,8 +646,9 @@ impl IssueConversation {
 
         let body = Paragraph::new(body_lines)
             .block(
-                Block::bordered()
-                    .border_type(ratatui::widgets::BorderType::Rounded)
+                Block::default()
+                    .borders(Borders::LEFT)
+                    .merge_borders(ratatui::symbols::merge::MergeStrategy::Exact)
                     .border_style(get_border_style(&self.body_paragraph_state))
                     .title(if self.screen == MainScreen::DetailsFullscreen {
                         "Message Body (PageUp/PageDown/Home/End | f/Esc: exit fullscreen)"
@@ -2441,7 +2452,7 @@ pub(crate) fn render_markdown_lines(text: &str, width: usize, indent: usize) ->
     render_markdown(text, width, indent).lines
 }
 
-fn render_markdown(text: &str, width: usize, indent: usize) -> MarkdownRender {
+pub(crate) fn render_markdown(text: &str, width: usize, indent: usize) -> MarkdownRender {
     let mut renderer = MarkdownRenderer::new(width, indent);
     let options = Options::ENABLE_GFM
         | Options::ENABLE_STRIKETHROUGH