gitlab-tracker 0.3.2

A fast terminal TUI dashboard for tracking GitLab Merge Requests across branches
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
pub mod inspector;
pub mod table;

use crate::app::{ActivePane, App, InputMode, InspectorView, LogTimeField, SortColumn, SortOrder};
use ratatui::{
    layout::{Constraint, Direction, Layout, Rect},
    style::{Color, Modifier, Style, Stylize},
    text::{Line, Span},
    widgets::{Block, Borders, Clear, List, ListItem, ListState, Paragraph, Wrap},
    Frame,
};

/// Returns the border style to apply to a pane based on whether it is active.
///
/// Active pane gets a highlighted (cyan) border so the user knows where focus is.
fn pane_border_style(is_active: bool) -> Style {
    if is_active {
        Style::default().fg(Color::Cyan)
    } else {
        Style::default()
    }
}

pub fn render_ui(f: &mut Frame, app: &mut App) {
    let chunks = Layout::default()
        .constraints([Constraint::Min(3), Constraint::Length(3)])
        .split(f.area());

    let main_chunks = Layout::default()
        .direction(Direction::Horizontal)
        .constraints([Constraint::Percentage(65), Constraint::Percentage(35)])
        .split(chunks[0]);

    // --- Left Pane: Main Table ---
    // The table block highlights its border when it is the active pane.
    let table = table::render_table(app, main_chunks[0]);
    f.render_stateful_widget(table, main_chunks[0], &mut app.table_state);

    // --- Right Pane: Context Inspector Panel ---
    let inspector_is_active = app.active_pane == ActivePane::Inspector;
    let inspector_title = match (inspector_is_active, app.inspector_view) {
        (true, InspectorView::MrInfo) => " MR Inspector [FOCUS] │ [P]: Pipelines ",
        (false, InspectorView::MrInfo) => " MR Inspector │ [P]: Pipelines ",
        (true, InspectorView::Pipelines) => " Pipelines [FOCUS] │ [P]: Time Log ",
        (false, InspectorView::Pipelines) => " Pipelines │ [P]: Time Log ",
        (true, InspectorView::TimeLog) => " Time Log [FOCUS] │ [P]: MR Info │ [L]: Log Time ",
        (false, InspectorView::TimeLog) => " Time Log │ [P]: MR Info │ [L]: Log Time ",
    };
    let inspector_block = Block::default()
        .borders(Borders::ALL)
        .border_style(pane_border_style(inspector_is_active))
        .title(inspector_title);

    if let Some(selected) = app.table_state.selected() {
        if let Some(mr) = app.mrs.get(selected) {
            // Dispatch to the correct inspector view based on the current toggle state.
            let rendered_text = match app.inspector_view {
                InspectorView::MrInfo => inspector::render_safe_inspector_text(mr, &app.config),
                InspectorView::Pipelines => inspector::render_pipelines_text(mr),
                InspectorView::TimeLog => inspector::render_time_log_text(mr, &app.time_entries),
            };

            // Update content/pane dimensions so scroll clamping in App is accurate.
            // Inner height removes the 2 border rows (top + bottom).
            app.inspector_content_lines = rendered_text.lines.len() as u16;
            app.inspector_pane_height = main_chunks[1].height.saturating_sub(2);

            let inspector_paragraph = Paragraph::new(rendered_text)
                .block(inspector_block)
                .wrap(Wrap { trim: false })
                .scroll((app.inspector_scroll, 0));
            f.render_widget(inspector_paragraph, main_chunks[1]);
        } else {
            let inspector_paragraph =
                Paragraph::new("Selected metadata unavailable.").block(inspector_block);
            f.render_widget(inspector_paragraph, main_chunks[1]);
        }
    } else {
        let inspector_paragraph = Paragraph::new(
            "Select an active Merge Request row to display side inspector panels context.",
        )
        .block(inspector_block)
        .dark_gray();
        f.render_widget(inspector_paragraph, main_chunks[1]);
    };

    let sort_status = match (app.sort_column, app.sort_order) {
        (SortColumn::UpdatedAt, SortOrder::Ascending) => "Sort: Updated ▲",
        (SortColumn::UpdatedAt, SortOrder::Descending) => "Sort: Updated ▼",
        (SortColumn::Id, SortOrder::Ascending) => "Sort: ID ▲",
        (SortColumn::Id, SortOrder::Descending) => "Sort: ID ▼",
        (SortColumn::Milestone, SortOrder::Ascending) => "Sort: Milestone ▲",
        (SortColumn::Milestone, SortOrder::Descending) => "Sort: Milestone ▼",
        (SortColumn::Title, SortOrder::Ascending) => "Sort: Title ▲",
        (SortColumn::Title, SortOrder::Descending) => "Sort: Title ▼",
    };

    // --- Bottom Input Bar ---
    let pane_hint = match app.active_pane {
        ActivePane::Dashboard => "Pane: Dashboard",
        ActivePane::Inspector => "Pane: Inspector",
    };
    // The input bar title and border change depending on whether the field has focus.
    let (input_title, input_border_style) = match app.input_mode {
        InputMode::Editing if !app.milestone_suggestions.is_empty() => (
            " MILESTONE │ [↑/↓ Tab]: Navigate │ [Enter]: Bulk-add MRs │ [Esc]: Close ".to_string(),
            Style::default().fg(Color::Yellow),
        ),
        InputMode::Editing => (
            " INSERT │ MR ID, branch name, or @milestone │ [Enter]: Confirm │ [Esc]: Cancel ".to_string(),
            Style::default().fg(Color::Yellow),
        ),
        InputMode::ColumnPicker => (
            " COLUMNS │ [↑/↓]: Navigate │ [Space]: Toggle │ [Esc]: Close & Save ".to_string(),
            Style::default().fg(Color::Cyan),
        ),
        InputMode::Normal => (
            format!(
                " [i] or [/]: Insert mode │ [Tab]: {} │ [S/s]: {} │ [F]: Filter │ [Space]: Flag │ [C]: Columns │ [▲/▼]: Scroll │ [O]: Open │ [R]: Refresh │ [Del]: Delete │ [Esc]: Quit ",
                pane_hint, sort_status
            ),
            Style::default(),
        ),
        // The Log Time popup handles its own rendering — the input bar is hidden behind it.
        // We still need to cover this arm to satisfy exhaustiveness.
        InputMode::LogTime => (
            " LOG TIME │ [Tab]: Next field │ [Enter]: Submit │ [Esc]: Cancel ".to_string(),
            Style::default().fg(Color::Magenta),
        ),
    };

    let input_box = Paragraph::new(app.input.as_str()).block(
        Block::default()
            .borders(Borders::ALL)
            .border_style(input_border_style)
            .title(input_title),
    );
    f.render_widget(input_box, chunks[1]);

    // Render the column-picker popup on top of the UI when active.
    if app.input_mode == InputMode::ColumnPicker {
        render_column_picker(f, app, f.area());
    }

    // Render the milestone autocomplete dropdown above the input bar when suggestions exist.
    if app.input_mode == InputMode::Editing && !app.milestone_suggestions.is_empty() {
        render_milestone_autocomplete(f, app, chunks[1]);
    }

    // Render the Log Time popup on top of everything when active.
    if app.input_mode == InputMode::LogTime {
        render_log_time_popup(f, app, f.area());
    }
}

/// Renders the Log Time popup centred over the terminal.
///
/// The popup is a modal overlay using [`Clear`] so it erases whatever is beneath.
/// Layout (top→bottom):
///   1. Duration text field
///   2. Activity selector list (scrollable)
///   3. Comment text field
///   4. Error line (when present) + shortcut hint
fn render_log_time_popup(f: &mut Frame, app: &App, area: Rect) {
    use ratatui::widgets::List;

    // Ticket context for the popup title.
    let ticket_label = app
        .table_state
        .selected()
        .and_then(|i| app.visible_mrs().nth(i))
        .and_then(|mr| mr.linked_ticket.as_ref())
        .map(|t| format!(" ⏱  Log Time — #{} ", t.id))
        .unwrap_or_else(|| " ⏱  Log Time ".to_string());

    // Fixed popup dimensions.
    let popup_width: u16 = 60;
    // Base height: title(1) + duration(3) + activity list (up to 6 visible) + comment(3) +
    // error/hint(2) + borders(2) = 17 rows max
    let activity_rows = (app.activities.len() as u16).clamp(2, 6);
    let popup_height: u16 = 3 + activity_rows + 3 + 2 + 2;

    let popup_x = area.x + area.width.saturating_sub(popup_width) / 2;
    let popup_y = area.y + area.height.saturating_sub(popup_height) / 2;
    let popup_area = Rect::new(popup_x, popup_y, popup_width, popup_height);

    f.render_widget(Clear, popup_area);

    // Outer border block.
    let outer_block = Block::default()
        .borders(Borders::ALL)
        .border_style(Style::default().fg(Color::Magenta))
        .title(Span::styled(
            ticket_label,
            Style::default()
                .fg(Color::Magenta)
                .add_modifier(Modifier::BOLD),
        ));
    f.render_widget(outer_block, popup_area);

    // Inner layout: split vertically into 4 zones inside the border.
    let inner = Rect::new(
        popup_area.x + 1,
        popup_area.y + 1,
        popup_area.width.saturating_sub(2),
        popup_area.height.saturating_sub(2),
    );

    let zones = Layout::default()
        .direction(Direction::Vertical)
        .constraints([
            Constraint::Length(3),             // Duration field
            Constraint::Length(activity_rows), // Activity selector
            Constraint::Length(3),             // Comment field
            Constraint::Min(1),                // Error / hint line
        ])
        .split(inner);

    // Helper: border colour based on whether the field is focused.
    let field_style = |focused: bool| -> Style {
        if focused {
            Style::default().fg(Color::Yellow)
        } else {
            Style::default().fg(Color::DarkGray)
        }
    };

    // ── Duration field ────────────────────────────────────────────────────────
    let duration_focused = app.log_time_form.focused_field == LogTimeField::Duration;
    let duration_block = Block::default()
        .borders(Borders::ALL)
        .border_style(field_style(duration_focused))
        .title(Span::styled(
            " Duration (e.g. 1h30, 90m, 1.5h) ",
            Style::default().fg(Color::White),
        ));
    let duration_widget = Paragraph::new(app.log_time_form.duration_input.as_str())
        .block(duration_block)
        .style(Style::default().fg(Color::White));
    f.render_widget(duration_widget, zones[0]);

    // ── Activity selector ─────────────────────────────────────────────────────
    let activity_focused = app.log_time_form.focused_field == LogTimeField::Activity;
    let activity_block = Block::default()
        .borders(Borders::ALL)
        .border_style(field_style(activity_focused))
        .title(Span::styled(
            " Activity [↑/↓] ",
            Style::default().fg(Color::White),
        ));

    if app.activities.is_empty() {
        let loading = Paragraph::new("Loading activities…")
            .block(activity_block)
            .style(Style::default().fg(Color::DarkGray));
        f.render_widget(loading, zones[1]);
    } else {
        let cursor = app.log_time_form.selected_activity_idx;
        let visible = activity_rows as usize;
        let scroll_offset = if cursor >= visible {
            cursor + 1 - visible
        } else {
            0
        };

        let items: Vec<ListItem> = app
            .activities
            .iter()
            .enumerate()
            .skip(scroll_offset)
            .take(visible)
            .map(|(i, act)| {
                let selected = i == cursor;
                let style = if selected {
                    Style::default()
                        .fg(Color::Black)
                        .bg(Color::Magenta)
                        .add_modifier(Modifier::BOLD)
                } else {
                    Style::default().fg(Color::White)
                };
                ListItem::new(Line::from(Span::styled(format!("  {} ", act.name), style)))
            })
            .collect();

        let list = List::new(items).block(activity_block);
        let mut list_state = ratatui::widgets::ListState::default();
        list_state.select(Some(cursor.saturating_sub(scroll_offset)));
        f.render_stateful_widget(list, zones[1], &mut list_state);
    }

    // ── Comment field ─────────────────────────────────────────────────────────
    let comment_focused = app.log_time_form.focused_field == LogTimeField::Comment;
    let comment_block = Block::default()
        .borders(Borders::ALL)
        .border_style(field_style(comment_focused))
        .title(Span::styled(
            " Comment (optional) ",
            Style::default().fg(Color::White),
        ));
    let comment_widget = Paragraph::new(app.log_time_form.comment_input.as_str())
        .block(comment_block)
        .style(Style::default().fg(Color::White));
    f.render_widget(comment_widget, zones[2]);

    // ── Error / hint line ─────────────────────────────────────────────────────
    let bottom_line = if let Some(err) = &app.log_time_form.error {
        Line::from(vec![
            Span::styled(
                "",
                Style::default().fg(Color::Red).add_modifier(Modifier::BOLD),
            ),
            Span::styled(err.clone(), Style::default().fg(Color::Red)),
        ])
    } else if app.log_time_form.submitting {
        Line::from(vec![Span::styled(
            " ⟳ Submitting…",
            Style::default().fg(Color::Yellow),
        )])
    } else {
        Line::from(vec![
            Span::styled(" [Tab] ", Style::default().fg(Color::DarkGray)),
            Span::styled("Next field  ", Style::default().fg(Color::DarkGray)),
            Span::styled("[Enter] ", Style::default().fg(Color::DarkGray)),
            Span::styled("Submit  ", Style::default().fg(Color::DarkGray)),
            Span::styled("[Esc] ", Style::default().fg(Color::DarkGray)),
            Span::styled("Cancel", Style::default().fg(Color::DarkGray)),
        ])
    };
    f.render_widget(Paragraph::new(bottom_line), zones[3]);
}

/// Renders the milestone autocomplete dropdown just above the input bar.
///
/// The popup lists all matching milestone suggestions and highlights the currently
/// selected one. It is anchored to the left edge of the input bar and grows upward
/// so it never overlaps the input field itself.
fn render_milestone_autocomplete(f: &mut Frame, app: &App, input_area: Rect) {
    let suggestions = &app.milestone_suggestions;
    if suggestions.is_empty() {
        return;
    }

    // Cap visible rows to avoid overflowing the screen.
    let max_visible: u16 = 8;
    let visible_count = (suggestions.len() as u16).min(max_visible);
    // +2 for top/bottom borders.
    let popup_height = visible_count + 2;
    let popup_width = (input_area.width / 2).max(40);

    // Anchor to the left of the input bar and grow upward.
    let popup_x = input_area.x;
    let popup_y = input_area.y.saturating_sub(popup_height);
    let popup_area = Rect::new(popup_x, popup_y, popup_width, popup_height);

    f.render_widget(Clear, popup_area);

    // Determine the scroll offset so the selected item is always visible.
    let cursor = app.milestone_suggestion_cursor;
    let scroll_offset = if cursor >= max_visible as usize {
        cursor + 1 - max_visible as usize
    } else {
        0
    };

    let items: Vec<ListItem> = suggestions
        .iter()
        .enumerate()
        .skip(scroll_offset)
        .take(max_visible as usize)
        .map(|(i, title)| {
            let is_selected = i == cursor;
            let style = if is_selected {
                Style::default()
                    .fg(Color::Black)
                    .bg(Color::Yellow)
                    .add_modifier(Modifier::BOLD)
            } else {
                Style::default().fg(Color::White)
            };
            ListItem::new(Line::from(Span::styled(format!("  {} ", title), style)))
        })
        .collect();

    let list = List::new(items).block(
        Block::default()
            .borders(Borders::ALL)
            .border_style(Style::default().fg(Color::Yellow))
            .title(" Milestones │ [↑/↓ Tab]: Navigate │ [Enter]: Select "),
    );

    let mut list_state = ListState::default();
    list_state.select(Some(cursor.saturating_sub(scroll_offset)));
    f.render_stateful_widget(list, popup_area, &mut list_state);
}

/// Renders the column-picker popup centred over the terminal area.
///
/// The popup is overlaid via [`Clear`] so it erases whatever is beneath it.
/// Arrow keys move the cursor; Space toggles the highlighted entry.
fn render_column_picker(f: &mut Frame, app: &App, area: Rect) {
    // The popup entries mirror the fields of `VisibleColumns` in declaration order.
    // The "Tracker" entry is appended only when a tracker provider is configured at runtime.
    let mut entries_vec: Vec<(&str, bool)> = vec![
        ("Activity", app.config.visible_columns.activity),
        ("Target branch", app.config.visible_columns.target_branch),
        ("Labels", app.config.visible_columns.labels),
        ("Milestone", app.config.visible_columns.milestone),
        ("Notes", app.config.visible_columns.notes),
    ];
    if app.tracker.is_some() {
        entries_vec.push(("Tracker", app.config.visible_columns.tracker_ticket));
    }
    let entries: &[(&str, bool)] = &entries_vec;

    // Fixed popup size: wide enough for the longest label + checkbox, tall enough for all rows.
    let popup_width: u16 = 36;
    let popup_height: u16 = entries.len() as u16 + 2; // +2 for top/bottom borders

    // Centre the popup within the terminal area.
    let popup_x = area.x + area.width.saturating_sub(popup_width) / 2;
    let popup_y = area.y + area.height.saturating_sub(popup_height) / 2;
    let popup_area = Rect::new(popup_x, popup_y, popup_width, popup_height);

    // Erase the background behind the popup.
    f.render_widget(Clear, popup_area);

    let items: Vec<ListItem> = entries
        .iter()
        .enumerate()
        .map(|(i, (label, enabled))| {
            let checkbox = if *enabled { "" } else { "" };
            let is_selected = i == app.column_picker_cursor;
            let style = if is_selected {
                Style::default()
                    .fg(Color::Black)
                    .bg(Color::Cyan)
                    .add_modifier(Modifier::BOLD)
            } else {
                Style::default().fg(Color::White)
            };
            ListItem::new(Line::from(vec![
                Span::styled(format!("  {} ", checkbox), style),
                Span::styled(label.to_string(), style),
            ]))
        })
        .collect();

    let list = List::new(items).block(
        Block::default()
            .borders(Borders::ALL)
            .border_style(Style::default().fg(Color::Cyan))
            .title(" Columns "),
    );

    let mut list_state = ListState::default();
    list_state.select(Some(app.column_picker_cursor));
    f.render_stateful_widget(list, popup_area, &mut list_state);
}