861 lines
29 KiB
TypeScript
861 lines
29 KiB
TypeScript
|
import readline from 'readline';
|
||
|
|
import chalk from 'chalk';
|
||
|
|
import { AppState, Issue, Comment } from './types.js';
|
||
|
|
import { fetchIssues, fetchIssueComments, validateConnection, normalizeUrl } from './api.js';
|
||
|
|
|
||
|
|
// Setup readline for stdin keypress events
|
||
|
|
readline.emitKeypressEvents(process.stdin);
|
||
|
|
|
||
|
|
// Spinner chars for loading animations
|
||
|
|
const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
|
||
|
|
let spinnerIndex = 0;
|
||
|
|
let spinnerInterval: NodeJS.Timeout | null = null;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Word wraps text into lines of a maximum width.
|
||
|
|
*/
|
||
|
|
export function wordWrap(text: string, maxWidth: number): string[] {
|
||
|
|
if (!text) return [];
|
||
|
|
const lines: string[] = [];
|
||
|
|
const rawLines = text.split('\n');
|
||
|
|
|
||
|
|
for (const rawLine of rawLines) {
|
||
|
|
if (rawLine.trim() === '') {
|
||
|
|
lines.push('');
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
|
||
|
|
let currentLine = '';
|
||
|
|
const words = rawLine.split(/\s+/);
|
||
|
|
|
||
|
|
for (const word of words) {
|
||
|
|
if (!word) continue;
|
||
|
|
|
||
|
|
if (currentLine.length + word.length + 1 <= maxWidth) {
|
||
|
|
currentLine += (currentLine ? ' ' : '') + word;
|
||
|
|
} else {
|
||
|
|
if (currentLine) {
|
||
|
|
lines.push(currentLine);
|
||
|
|
}
|
||
|
|
// If a single word is longer than maxWidth, force break it
|
||
|
|
let tempWord = word;
|
||
|
|
while (tempWord.length > maxWidth) {
|
||
|
|
lines.push(tempWord.substring(0, maxWidth));
|
||
|
|
tempWord = tempWord.substring(maxWidth);
|
||
|
|
}
|
||
|
|
currentLine = tempWord;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (currentLine) {
|
||
|
|
lines.push(currentLine);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return lines;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Formats an ISO date string into YYYY-MM-DD HH:MM.
|
||
|
|
*/
|
||
|
|
export function formatDate(dateStr: string): string {
|
||
|
|
try {
|
||
|
|
const d = new Date(dateStr);
|
||
|
|
if (isNaN(d.getTime())) return 'n/a';
|
||
|
|
const yr = d.getFullYear();
|
||
|
|
const mo = String(d.getMonth() + 1).padStart(2, '0');
|
||
|
|
const day = String(d.getDate()).padStart(2, '0');
|
||
|
|
const hr = String(d.getHours()).padStart(2, '0');
|
||
|
|
const min = String(d.getMinutes()).padStart(2, '0');
|
||
|
|
return `${yr}-${mo}-${day} ${hr}:${min}`;
|
||
|
|
} catch {
|
||
|
|
return 'n/a';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Helper to truncate strings to a specific length.
|
||
|
|
*/
|
||
|
|
function truncate(str: string, length: number): string {
|
||
|
|
if (str.length <= length) return str;
|
||
|
|
return str.substring(0, length - 3) + '...';
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* TUI State Controller and Render Engine
|
||
|
|
*/
|
||
|
|
export class TuiEngine {
|
||
|
|
private state: AppState;
|
||
|
|
private onQuit: () => void = () => {};
|
||
|
|
private activeSearchInput: boolean = false;
|
||
|
|
private searchInputBuffer: string = '';
|
||
|
|
|
||
|
|
constructor(initialState: AppState) {
|
||
|
|
this.state = initialState;
|
||
|
|
|
||
|
|
// Set up resize handler
|
||
|
|
process.stdout.on('resize', () => {
|
||
|
|
this.render();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Starts the TUI engine and registers keypress listeners.
|
||
|
|
*/
|
||
|
|
public start(onQuit: () => void) {
|
||
|
|
this.onQuit = onQuit;
|
||
|
|
|
||
|
|
// Put terminal in raw mode
|
||
|
|
if (process.stdin.isTTY) {
|
||
|
|
process.stdin.setRawMode(true);
|
||
|
|
}
|
||
|
|
process.stdin.resume();
|
||
|
|
process.stdin.on('keypress', this.handleKeypress.bind(this));
|
||
|
|
|
||
|
|
// Hide standard cursor
|
||
|
|
process.stdout.write('\x1B[?25l');
|
||
|
|
|
||
|
|
// Bootstrap if config exists
|
||
|
|
if (this.state.config.url && this.state.config.owner && this.state.config.repo) {
|
||
|
|
this.state.screen = 'list';
|
||
|
|
this.loadIssues();
|
||
|
|
} else {
|
||
|
|
this.render();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Stops the TUI engine, restores terminal state.
|
||
|
|
*/
|
||
|
|
public stop() {
|
||
|
|
this.stopSpinner();
|
||
|
|
// Show standard cursor
|
||
|
|
process.stdout.write('\x1B[?25h');
|
||
|
|
if (process.stdin.isTTY) {
|
||
|
|
process.stdin.setRawMode(false);
|
||
|
|
}
|
||
|
|
process.stdin.pause();
|
||
|
|
this.onQuit();
|
||
|
|
}
|
||
|
|
|
||
|
|
private startSpinner() {
|
||
|
|
this.stopSpinner();
|
||
|
|
spinnerInterval = setInterval(() => {
|
||
|
|
spinnerIndex = (spinnerIndex + 1) % SPINNER_FRAMES.length;
|
||
|
|
this.render();
|
||
|
|
}, 80);
|
||
|
|
}
|
||
|
|
|
||
|
|
private stopSpinner() {
|
||
|
|
if (spinnerInterval) {
|
||
|
|
clearInterval(spinnerInterval);
|
||
|
|
spinnerInterval = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Fetches issues from the API client based on current state parameters.
|
||
|
|
*/
|
||
|
|
private async loadIssues() {
|
||
|
|
this.state.loading = true;
|
||
|
|
this.state.error = null;
|
||
|
|
this.startSpinner();
|
||
|
|
|
||
|
|
try {
|
||
|
|
const { issues, totalCount } = await fetchIssues(this.state.config, {
|
||
|
|
page: this.state.currentPage,
|
||
|
|
limit: this.state.issuesPerPage,
|
||
|
|
state: this.state.stateFilter,
|
||
|
|
type: this.state.typeFilter,
|
||
|
|
q: this.state.searchQuery,
|
||
|
|
sortField: this.state.sortField,
|
||
|
|
sortOrder: this.state.sortOrder,
|
||
|
|
});
|
||
|
|
|
||
|
|
this.state.issues = issues;
|
||
|
|
this.state.totalIssuesCount = totalCount;
|
||
|
|
|
||
|
|
// Keep cursor bounds-checked
|
||
|
|
if (this.state.selectedIssueIndex >= issues.length) {
|
||
|
|
this.state.selectedIssueIndex = Math.max(0, issues.length - 1);
|
||
|
|
}
|
||
|
|
} catch (err: any) {
|
||
|
|
this.state.error = err.message;
|
||
|
|
this.state.issues = [];
|
||
|
|
this.state.totalIssuesCount = 0;
|
||
|
|
} finally {
|
||
|
|
this.state.loading = false;
|
||
|
|
this.stopSpinner();
|
||
|
|
this.render();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Fetches comments for the selected issue.
|
||
|
|
*/
|
||
|
|
private async loadComments(issue: Issue) {
|
||
|
|
this.state.commentsLoading = true;
|
||
|
|
this.state.selectedIssueComments = [];
|
||
|
|
this.render();
|
||
|
|
|
||
|
|
try {
|
||
|
|
const comments = await fetchIssueComments(this.state.config, issue.number);
|
||
|
|
this.state.selectedIssueComments = comments;
|
||
|
|
} catch (err: any) {
|
||
|
|
// Gracefully show comment loading error
|
||
|
|
this.state.selectedIssueComments = [{
|
||
|
|
id: -1,
|
||
|
|
user: { id: 0, login: 'system', full_name: 'System Error' },
|
||
|
|
body: `Failed to load comments: ${err.message}`,
|
||
|
|
created_at: new Date().toISOString(),
|
||
|
|
updated_at: new Date().toISOString(),
|
||
|
|
}];
|
||
|
|
} finally {
|
||
|
|
this.state.commentsLoading = false;
|
||
|
|
this.render();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Keyboard input routers
|
||
|
|
*/
|
||
|
|
private async handleKeypress(str: string, key: any) {
|
||
|
|
// Standard Ctrl+C quit
|
||
|
|
if (key && key.ctrl && key.name === 'c') {
|
||
|
|
this.stop();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.state.screen === 'setup') {
|
||
|
|
this.handleSetupKeypress(str, key);
|
||
|
|
} else if (this.state.screen === 'list') {
|
||
|
|
if (this.activeSearchInput) {
|
||
|
|
this.handleSearchKeypress(str, key);
|
||
|
|
} else {
|
||
|
|
this.handleListKeypress(str, key);
|
||
|
|
}
|
||
|
|
} else if (this.state.screen === 'details') {
|
||
|
|
this.handleDetailsKeypress(str, key);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Key handling for Setup form
|
||
|
|
*/
|
||
|
|
private async handleSetupKeypress(str: string, key: any) {
|
||
|
|
const form = this.state.setupForm;
|
||
|
|
const fields: Array<'url' | 'repo' | 'token'> = ['url', 'repo', 'token'];
|
||
|
|
const currentIdx = fields.indexOf(form.activeField);
|
||
|
|
|
||
|
|
if (key && key.name === 'down') {
|
||
|
|
form.activeField = fields[(currentIdx + 1) % fields.length];
|
||
|
|
this.render();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (key && key.name === 'up') {
|
||
|
|
form.activeField = fields[(currentIdx - 1 + fields.length) % fields.length];
|
||
|
|
this.render();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (key && key.name === 'tab') {
|
||
|
|
form.activeField = fields[(currentIdx + 1) % fields.length];
|
||
|
|
this.render();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if ((key && key.name === 'return') || str === '\r' || str === '\n') {
|
||
|
|
// Submit form
|
||
|
|
if (!form.url.trim()) {
|
||
|
|
this.state.error = 'Instance URL is required.';
|
||
|
|
this.render();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (!form.repo.trim()) {
|
||
|
|
this.state.error = 'Repository path (owner/repo) is required.';
|
||
|
|
this.render();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const repoParts = form.repo.split('/');
|
||
|
|
if (repoParts.length !== 2 || !repoParts[0].trim() || !repoParts[1].trim()) {
|
||
|
|
this.state.error = 'Repository must be in "owner/repo" format.';
|
||
|
|
this.render();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.state.loading = true;
|
||
|
|
this.state.error = null;
|
||
|
|
this.render();
|
||
|
|
|
||
|
|
const normalizedUrl = normalizeUrl(form.url);
|
||
|
|
const testConfig = {
|
||
|
|
url: normalizedUrl,
|
||
|
|
token: form.token.trim() || null,
|
||
|
|
owner: repoParts[0].trim(),
|
||
|
|
repo: repoParts[1].trim(),
|
||
|
|
};
|
||
|
|
|
||
|
|
try {
|
||
|
|
await validateConnection(testConfig);
|
||
|
|
// Save config
|
||
|
|
this.state.config = testConfig;
|
||
|
|
this.state.screen = 'list';
|
||
|
|
this.state.currentPage = 1;
|
||
|
|
this.state.selectedIssueIndex = 0;
|
||
|
|
this.loadIssues();
|
||
|
|
} catch (err: any) {
|
||
|
|
this.state.error = err.message;
|
||
|
|
this.state.loading = false;
|
||
|
|
this.render();
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if ((key && key.name === 'escape') || str === '\u001b') {
|
||
|
|
this.stop();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (key && key.name === 'backspace') {
|
||
|
|
if (form.activeField === 'url') form.url = form.url.slice(0, -1);
|
||
|
|
if (form.activeField === 'repo') form.repo = form.repo.slice(0, -1);
|
||
|
|
if (form.activeField === 'token') form.token = form.token.slice(0, -1);
|
||
|
|
this.render();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Type character
|
||
|
|
if (str && !key.ctrl && !key.meta && str.length === 1 && str.charCodeAt(0) >= 32) {
|
||
|
|
if (form.activeField === 'url') form.url += str;
|
||
|
|
if (form.activeField === 'repo') form.repo += str;
|
||
|
|
if (form.activeField === 'token') form.token += str;
|
||
|
|
this.render();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Key handling for searching overlay
|
||
|
|
*/
|
||
|
|
private handleSearchKeypress(str: string, key: any) {
|
||
|
|
if ((key && key.name === 'escape') || str === '\u001b') {
|
||
|
|
this.activeSearchInput = false;
|
||
|
|
this.searchInputBuffer = '';
|
||
|
|
process.stdout.write('\x1B[?25l'); // Hide cursor
|
||
|
|
this.render();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if ((key && key.name === 'return') || str === '\r' || str === '\n') {
|
||
|
|
this.activeSearchInput = false;
|
||
|
|
this.state.searchQuery = this.searchInputBuffer;
|
||
|
|
this.state.currentPage = 1;
|
||
|
|
this.state.selectedIssueIndex = 0;
|
||
|
|
process.stdout.write('\x1B[?25l'); // Hide cursor
|
||
|
|
this.loadIssues();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (key && key.name === 'backspace') {
|
||
|
|
this.searchInputBuffer = this.searchInputBuffer.slice(0, -1);
|
||
|
|
this.render();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (str && !key.ctrl && !key.meta && str.length === 1 && str.charCodeAt(0) >= 32) {
|
||
|
|
this.searchInputBuffer += str;
|
||
|
|
this.render();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Key handling for Dashboard list
|
||
|
|
*/
|
||
|
|
private handleListKeypress(str: string, key: any) {
|
||
|
|
if (this.state.loading) return;
|
||
|
|
|
||
|
|
if ((key && key.name === 'escape') || str === '\u001b') {
|
||
|
|
// If we entered config via CLI, quit. If we came from setup form, go back to setup!
|
||
|
|
if (this.state.setupForm.repo) {
|
||
|
|
this.state.screen = 'setup';
|
||
|
|
this.state.error = null;
|
||
|
|
this.render();
|
||
|
|
} else {
|
||
|
|
this.stop();
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (key && key.name === 'up') {
|
||
|
|
if (this.state.selectedIssueIndex > 0) {
|
||
|
|
this.state.selectedIssueIndex--;
|
||
|
|
this.render();
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (key && key.name === 'down') {
|
||
|
|
if (this.state.selectedIssueIndex < this.state.issues.length - 1) {
|
||
|
|
this.state.selectedIssueIndex++;
|
||
|
|
this.render();
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Pagination: Right/PageDown -> Next, Left/PageUp -> Prev
|
||
|
|
if ((key && key.name === 'right') || (key && key.name === 'pagedown') || str === 'n') {
|
||
|
|
const maxPages = Math.ceil(this.state.totalIssuesCount / this.state.issuesPerPage);
|
||
|
|
if (this.state.currentPage < maxPages) {
|
||
|
|
this.state.currentPage++;
|
||
|
|
this.state.selectedIssueIndex = 0;
|
||
|
|
this.loadIssues();
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if ((key && key.name === 'left') || (key && key.name === 'pageup') || str === 'p') {
|
||
|
|
if (this.state.currentPage > 1) {
|
||
|
|
this.state.currentPage--;
|
||
|
|
this.state.selectedIssueIndex = 0;
|
||
|
|
this.loadIssues();
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if ((key && key.name === 'return') || str === '\r' || str === '\n') {
|
||
|
|
if (this.state.issues.length > 0) {
|
||
|
|
const issue = this.state.issues[this.state.selectedIssueIndex];
|
||
|
|
this.state.selectedIssue = issue;
|
||
|
|
this.state.detailScrollOffset = 0;
|
||
|
|
this.state.screen = 'details';
|
||
|
|
this.loadComments(issue);
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Toggle Filters & Sorting
|
||
|
|
if (str === '/') {
|
||
|
|
// Focus Search input
|
||
|
|
this.activeSearchInput = true;
|
||
|
|
this.searchInputBuffer = this.state.searchQuery;
|
||
|
|
this.render();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (str === 's' || str === 'S') {
|
||
|
|
// Cycle sorts: created -> updated -> comments
|
||
|
|
const fields: Array<'created' | 'updated' | 'comments'> = ['created', 'updated', 'comments'];
|
||
|
|
const currentSortIdx = fields.indexOf(this.state.sortField);
|
||
|
|
|
||
|
|
// If desc, switch to asc. If asc, switch to next field desc!
|
||
|
|
if (this.state.sortOrder === 'desc') {
|
||
|
|
this.state.sortOrder = 'asc';
|
||
|
|
} else {
|
||
|
|
this.state.sortOrder = 'desc';
|
||
|
|
this.state.sortField = fields[(currentSortIdx + 1) % fields.length];
|
||
|
|
}
|
||
|
|
this.state.currentPage = 1;
|
||
|
|
this.state.selectedIssueIndex = 0;
|
||
|
|
this.loadIssues();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (str === 'f' || str === 'F') {
|
||
|
|
// Cycle states: open -> closed -> all
|
||
|
|
const states: Array<'open' | 'closed' | 'all'> = ['open', 'closed', 'all'];
|
||
|
|
const currentIdx = states.indexOf(this.state.stateFilter);
|
||
|
|
this.state.stateFilter = states[(currentIdx + 1) % states.length];
|
||
|
|
this.state.currentPage = 1;
|
||
|
|
this.state.selectedIssueIndex = 0;
|
||
|
|
this.loadIssues();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (str === 't' || str === 'T') {
|
||
|
|
// Cycle type: issues -> pulls -> all
|
||
|
|
const types: Array<'issues' | 'pulls' | 'all'> = ['issues', 'pulls', 'all'];
|
||
|
|
const currentIdx = types.indexOf(this.state.typeFilter);
|
||
|
|
this.state.typeFilter = types[(currentIdx + 1) % types.length];
|
||
|
|
this.state.currentPage = 1;
|
||
|
|
this.state.selectedIssueIndex = 0;
|
||
|
|
this.loadIssues();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (str === 'r' || str === 'R') {
|
||
|
|
// Refresh
|
||
|
|
this.loadIssues();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (str === 'q' || str === 'Q') {
|
||
|
|
this.stop();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Key handling for detail screen scrolling
|
||
|
|
*/
|
||
|
|
private handleDetailsKeypress(str: string, key: any) {
|
||
|
|
if (key && key.name === 'up') {
|
||
|
|
if (this.state.detailScrollOffset > 0) {
|
||
|
|
this.state.detailScrollOffset--;
|
||
|
|
this.render();
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (key && key.name === 'down') {
|
||
|
|
// We will bounds check this dynamically based on content length during render
|
||
|
|
this.state.detailScrollOffset++;
|
||
|
|
this.render();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (key && key.name === 'pageup') {
|
||
|
|
this.state.detailScrollOffset = Math.max(0, this.state.detailScrollOffset - 10);
|
||
|
|
this.render();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (key && key.name === 'pagedown') {
|
||
|
|
this.state.detailScrollOffset += 10;
|
||
|
|
this.render();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if ((key && (key.name === 'escape' || key.name === 'backspace')) || str === '\u001b' || str === 'q' || str === 'Q') {
|
||
|
|
this.state.screen = 'list';
|
||
|
|
this.state.selectedIssue = null;
|
||
|
|
this.state.selectedIssueComments = [];
|
||
|
|
this.render();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Renders the current screen to stdout
|
||
|
|
*/
|
||
|
|
public render() {
|
||
|
|
const cols = process.stdout.columns || 80;
|
||
|
|
const rows = process.stdout.rows || 24;
|
||
|
|
|
||
|
|
// Clear terminal screen and reset cursor position
|
||
|
|
process.stdout.write('\x1B[2J\x1B[H');
|
||
|
|
|
||
|
|
if (this.state.screen === 'setup') {
|
||
|
|
this.renderSetupScreen(cols, rows);
|
||
|
|
} else if (this.state.screen === 'list') {
|
||
|
|
this.renderListScreen(cols, rows);
|
||
|
|
} else if (this.state.screen === 'details') {
|
||
|
|
this.renderDetailsScreen(cols, rows);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Draw Setup Form
|
||
|
|
*/
|
||
|
|
private renderSetupScreen(cols: number, rows: number) {
|
||
|
|
const form = this.state.setupForm;
|
||
|
|
const width = Math.min(68, cols - 4);
|
||
|
|
const border = '│';
|
||
|
|
|
||
|
|
const lines: string[] = [];
|
||
|
|
lines.push(chalk.bold.hex('#4A90E2')('┌' + '─'.repeat(width - 2) + '┐'));
|
||
|
|
|
||
|
|
const title = 'FORGEJO & GITEA TUI ISSUE EXPLORER';
|
||
|
|
const titlePadding = ' '.repeat(Math.max(0, Math.floor((width - 2 - title.length) / 2)));
|
||
|
|
const titleLine = border + titlePadding + chalk.bold.white(title) + ' '.repeat(width - 2 - titlePadding.length - title.length) + border;
|
||
|
|
lines.push(titleLine);
|
||
|
|
lines.push(chalk.bold.hex('#4A90E2')('├' + '─'.repeat(width - 2) + '┤'));
|
||
|
|
|
||
|
|
// Instructions
|
||
|
|
lines.push(border + ' '.repeat(width - 2) + border);
|
||
|
|
const desc = 'Please connect to a Forgejo/Gitea server to explore repository issues.';
|
||
|
|
lines.push(border + ' ' + chalk.gray(desc.padEnd(width - 4)) + ' ' + border);
|
||
|
|
lines.push(border + ' '.repeat(width - 2) + border);
|
||
|
|
|
||
|
|
// Form inputs
|
||
|
|
const renderField = (label: string, value: string, active: boolean, secret: boolean = false) => {
|
||
|
|
const fieldWidth = width - 8;
|
||
|
|
const displayVal = secret ? '*'.repeat(value.length) : value;
|
||
|
|
const cursorStr = active ? chalk.inverse(' ') : '';
|
||
|
|
|
||
|
|
const content = label.padEnd(16) + ': [ ' +
|
||
|
|
(active ? chalk.bold.cyan(displayVal) + cursorStr : chalk.white(displayVal)).padEnd(active ? displayVal.length + cursorStr.length + (fieldWidth - 19 - displayVal.length) : fieldWidth - 19) +
|
||
|
|
' ]';
|
||
|
|
|
||
|
|
const coloredContent = active ? chalk.bold.white(content) : chalk.gray(content);
|
||
|
|
const activeMarker = active ? chalk.cyan('▶ ') : ' ';
|
||
|
|
return border + ' ' + activeMarker + coloredContent.padEnd(width - 6) + ' ' + border;
|
||
|
|
};
|
||
|
|
|
||
|
|
lines.push(renderField('Gitea URL', form.url, form.activeField === 'url'));
|
||
|
|
lines.push(border + ' '.repeat(width - 2) + border);
|
||
|
|
lines.push(renderField('Repository', form.repo, form.activeField === 'repo'));
|
||
|
|
lines.push(border + ' ' + chalk.gray('Format: owner/repo (e.g. gitea/tea)').padEnd(width - 5) + border);
|
||
|
|
lines.push(border + ' '.repeat(width - 2) + border);
|
||
|
|
lines.push(renderField('Access Token', form.token, form.activeField === 'token', true));
|
||
|
|
lines.push(border + ' ' + chalk.gray('Optional. Required for private repos.').padEnd(width - 5) + border);
|
||
|
|
lines.push(border + ' '.repeat(width - 2) + border);
|
||
|
|
|
||
|
|
// Error message
|
||
|
|
if (this.state.error) {
|
||
|
|
lines.push(chalk.bold.red('├' + '─'.repeat(width - 2) + '┤'));
|
||
|
|
const errorWrapped = wordWrap(this.state.error, width - 4);
|
||
|
|
for (const errLine of errorWrapped) {
|
||
|
|
lines.push(border + ' ' + chalk.bold.red(errLine.padEnd(width - 4)) + ' ' + border);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
lines.push(chalk.bold.hex('#4A90E2')('└' + '─'.repeat(width - 2) + '┘'));
|
||
|
|
|
||
|
|
// Loading / Footer indicator
|
||
|
|
const spinner = this.state.loading ? chalk.cyan(SPINNER_FRAMES[spinnerIndex]) : ' ';
|
||
|
|
const prompt = this.state.loading ? ' Connecting to instance...' : ' [Tab/Arrows] Navigate [Enter] Connect [Esc] Quit';
|
||
|
|
|
||
|
|
// Draw centered on terminal
|
||
|
|
const vertPadding = Math.max(0, Math.floor((rows - lines.length - 2) / 2));
|
||
|
|
process.stdout.write('\n'.repeat(vertPadding));
|
||
|
|
for (const line of lines) {
|
||
|
|
console.log(' '.repeat(Math.max(0, Math.floor((cols - width) / 2))) + line);
|
||
|
|
}
|
||
|
|
|
||
|
|
const footerText = ' '.repeat(Math.max(0, Math.floor((cols - width) / 2))) + spinner + chalk.gray(prompt);
|
||
|
|
console.log('\n' + footerText);
|
||
|
|
|
||
|
|
// Cursor trick: if typing, place cursor at appropriate spot
|
||
|
|
if (!this.state.loading) {
|
||
|
|
// Find current active field offset row
|
||
|
|
let activeRowOffset = vertPadding + 6; // URL row
|
||
|
|
if (form.activeField === 'repo') activeRowOffset += 2;
|
||
|
|
if (form.activeField === 'token') activeRowOffset += 4;
|
||
|
|
|
||
|
|
const activeValue = form.activeField === 'token' ? '*'.repeat(form.token.length) : form[form.activeField];
|
||
|
|
const cursorCol = Math.max(0, Math.floor((cols - width) / 2)) + 23 + activeValue.length;
|
||
|
|
|
||
|
|
process.stdout.write(`\x1B[${activeRowOffset + 1};${cursorCol}H\x1B[?25h`); // Show cursor
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Draw Issues List
|
||
|
|
*/
|
||
|
|
private renderListScreen(cols: number, rows: number) {
|
||
|
|
// Header Bar
|
||
|
|
const spinnerStr = this.state.loading ? chalk.bold.cyan(SPINNER_FRAMES[spinnerIndex]) + ' ' : '';
|
||
|
|
const instanceName = normalizeUrl(this.state.config.url).replace(/^https?:\/\//, '');
|
||
|
|
|
||
|
|
let header = ` ${spinnerStr}${chalk.bold.hex('#4A90E2')('Forgejo Issue Explorer')} ─ ${chalk.bold.white(instanceName)} ─ repo: ${chalk.bold.cyan(`${this.state.config.owner}/${this.state.config.repo}`)}`;
|
||
|
|
if (this.state.totalIssuesCount > 0) {
|
||
|
|
const totalPages = Math.ceil(this.state.totalIssuesCount / this.state.issuesPerPage);
|
||
|
|
header += ` ─ Page ${chalk.bold.white(this.state.currentPage)} of ${chalk.bold.white(totalPages)} (${chalk.yellow(this.state.totalIssuesCount)} matching)`;
|
||
|
|
} else if (!this.state.loading) {
|
||
|
|
header += ' ─ (0 issues found)';
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log(header);
|
||
|
|
console.log(chalk.bold.hex('#4A90E2')('┌' + '─'.repeat(cols - 2) + '┐'));
|
||
|
|
|
||
|
|
// Column widths
|
||
|
|
const idWidth = 6;
|
||
|
|
const typeWidth = 5;
|
||
|
|
const stateWidth = 7;
|
||
|
|
const authorWidth = 14;
|
||
|
|
const createdWidth = 12;
|
||
|
|
const commentsWidth = 6;
|
||
|
|
// Title takes all remaining space
|
||
|
|
const titleWidth = Math.max(20, cols - idWidth - typeWidth - stateWidth - authorWidth - createdWidth - commentsWidth - 8);
|
||
|
|
|
||
|
|
// Render Table Header
|
||
|
|
const padHeader = (title: string, w: number) => chalk.bold.white(title.padEnd(w));
|
||
|
|
const borderCh = chalk.bold.hex('#4A90E2')('│');
|
||
|
|
|
||
|
|
console.log(
|
||
|
|
borderCh + ' ' +
|
||
|
|
padHeader('ID', idWidth) + borderCh + ' ' +
|
||
|
|
padHeader('Type', typeWidth) + borderCh + ' ' +
|
||
|
|
padHeader('State', stateWidth) + borderCh + ' ' +
|
||
|
|
padHeader('Title', titleWidth) + borderCh + ' ' +
|
||
|
|
padHeader('Author', authorWidth) + borderCh + ' ' +
|
||
|
|
padHeader('Created', createdWidth) + borderCh + ' ' +
|
||
|
|
padHeader('Coms', commentsWidth) + borderCh
|
||
|
|
);
|
||
|
|
console.log(chalk.bold.hex('#4A90E2')('├' + '─'.repeat(cols - 2) + '┤'));
|
||
|
|
|
||
|
|
// Table Content Height available
|
||
|
|
const tableHeight = rows - 7; // Header: 1, Box borders: 2, Table headers: 2, Bottom filter line: 1, Keyboard help: 1
|
||
|
|
|
||
|
|
if (this.state.issues.length === 0) {
|
||
|
|
const msg = this.state.loading ? 'Fetching issues from server...' : (this.state.error ? `Error: ${this.state.error}` : 'No issues found.');
|
||
|
|
const paddingRows = Math.floor((tableHeight - 1) / 2);
|
||
|
|
for (let i = 0; i < paddingRows; i++) console.log(borderCh + ' '.repeat(cols - 2) + borderCh);
|
||
|
|
|
||
|
|
const contentLine = (' '.repeat(Math.max(0, Math.floor((cols - 2 - msg.length) / 2))) + msg).padEnd(cols - 2);
|
||
|
|
console.log(borderCh + (this.state.error ? chalk.bold.red(contentLine) : chalk.gray(contentLine)) + borderCh);
|
||
|
|
|
||
|
|
for (let i = 0; i < tableHeight - paddingRows - 1; i++) console.log(borderCh + ' '.repeat(cols - 2) + borderCh);
|
||
|
|
} else {
|
||
|
|
// Loop through issues on current page
|
||
|
|
for (let i = 0; i < tableHeight; i++) {
|
||
|
|
if (i < this.state.issues.length) {
|
||
|
|
const issue = this.state.issues[i];
|
||
|
|
const isSelected = i === this.state.selectedIssueIndex;
|
||
|
|
|
||
|
|
const idStr = `#${issue.number}`.padEnd(idWidth);
|
||
|
|
const typeStr = (issue.pull_request ? 'PR' : 'Issue').padEnd(typeWidth);
|
||
|
|
|
||
|
|
let stateStr = issue.state.toUpperCase().padEnd(stateWidth);
|
||
|
|
if (issue.state === 'open') {
|
||
|
|
stateStr = issue.pull_request ? chalk.bold.magenta(stateStr) : chalk.bold.green(stateStr);
|
||
|
|
} else {
|
||
|
|
stateStr = chalk.bold.red(stateStr);
|
||
|
|
}
|
||
|
|
|
||
|
|
const titleStr = truncate(issue.title, titleWidth).padEnd(titleWidth);
|
||
|
|
const authorStr = truncate(issue.user.login, authorWidth).padEnd(authorWidth);
|
||
|
|
const createdStr = formatDate(issue.created_at).substring(0, 10).padEnd(createdWidth);
|
||
|
|
const commentsStr = String(issue.comments).padEnd(commentsWidth);
|
||
|
|
|
||
|
|
let rowText =
|
||
|
|
' ' + idStr + borderCh +
|
||
|
|
' ' + typeStr + borderCh +
|
||
|
|
' ' + stateStr + borderCh +
|
||
|
|
' ' + (issue.pull_request ? chalk.magenta(titleStr) : titleStr) + borderCh +
|
||
|
|
' ' + authorStr + borderCh +
|
||
|
|
' ' + createdStr + borderCh +
|
||
|
|
' ' + commentsStr + borderCh;
|
||
|
|
|
||
|
|
if (isSelected) {
|
||
|
|
rowText = chalk.bgHex('#2E4E7E').white.bold(rowText);
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log(borderCh + rowText);
|
||
|
|
} else {
|
||
|
|
// Fill empty space
|
||
|
|
console.log(borderCh + ' '.repeat(cols - 2) + borderCh);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log(chalk.bold.hex('#4A90E2')('├' + '─'.repeat(cols - 2) + '┤'));
|
||
|
|
|
||
|
|
// Render Filters line
|
||
|
|
let searchLabel = this.state.searchQuery ? chalk.yellow(`"${this.state.searchQuery}"`) : chalk.gray('none');
|
||
|
|
if (this.activeSearchInput) {
|
||
|
|
searchLabel = chalk.inverse(this.searchInputBuffer + ' ');
|
||
|
|
}
|
||
|
|
const stateFilterLabel = chalk.bold(this.state.stateFilter.toUpperCase());
|
||
|
|
const typeFilterLabel = chalk.bold(this.state.typeFilter.toUpperCase());
|
||
|
|
const sortLabel = chalk.bold(`${this.state.sortField} (${this.state.sortOrder.toUpperCase()})`);
|
||
|
|
|
||
|
|
const filtersText = ` Search: ${searchLabel} ─ State: ${stateFilterLabel} ─ Type: ${typeFilterLabel} ─ Sort: ${sortLabel}`;
|
||
|
|
console.log(borderCh + filtersText.padEnd(cols - 2) + borderCh);
|
||
|
|
console.log(chalk.bold.hex('#4A90E2')('└' + '─'.repeat(cols - 2) + '┘'));
|
||
|
|
|
||
|
|
// Keyboard controls help line
|
||
|
|
const helpLine = chalk.gray(' [↑/↓] Navigate [Enter] View [/] Search [S] Sort [F] State [T] Type [N/P] Page [R] Reload [Esc] Back');
|
||
|
|
process.stdout.write(helpLine);
|
||
|
|
|
||
|
|
// If search active, position terminal cursor in search box
|
||
|
|
if (this.activeSearchInput) {
|
||
|
|
const searchCursorCol = 11 + this.searchInputBuffer.length;
|
||
|
|
process.stdout.write(`\x1B[${rows - 1};${searchCursorCol}H\x1B[?25h`); // Show cursor
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Draw Issue Detail scrollable view
|
||
|
|
*/
|
||
|
|
private renderDetailsScreen(cols: number, rows: number) {
|
||
|
|
const issue = this.state.selectedIssue;
|
||
|
|
if (!issue) return;
|
||
|
|
|
||
|
|
// Header info line
|
||
|
|
const isPR = !!issue.pull_request;
|
||
|
|
const typeTag = isPR ? chalk.bold.magenta('[PR] ') : chalk.bold.green('[Issue] ');
|
||
|
|
console.log(` ${typeTag}#${issue.number} ─ ${chalk.bold.white(truncate(issue.title, cols - 16))}`);
|
||
|
|
console.log(chalk.bold.hex('#4A90E2')('┌' + '─'.repeat(cols - 2) + '┐'));
|
||
|
|
|
||
|
|
// Metadata lines
|
||
|
|
const borderCh = chalk.bold.hex('#4A90E2')('│');
|
||
|
|
|
||
|
|
let stateLabel = issue.state.toUpperCase();
|
||
|
|
if (issue.state === 'open') {
|
||
|
|
stateLabel = isPR ? chalk.bold.magenta(stateLabel) : chalk.bold.green(stateLabel);
|
||
|
|
} else {
|
||
|
|
stateLabel = chalk.bold.red(stateLabel);
|
||
|
|
}
|
||
|
|
|
||
|
|
const labels = issue.labels.map(l => chalk.bgHex('#' + l.color).black(` ${l.name} `)).join(' ');
|
||
|
|
|
||
|
|
console.log(borderCh + ` State: ${stateLabel} Author: ${chalk.cyan(issue.user.login)} Created: ${formatDate(issue.created_at)} Updated: ${formatDate(issue.updated_at)}`.padEnd(cols - 2) + borderCh);
|
||
|
|
if (labels) {
|
||
|
|
console.log(borderCh + ` Labels: ${labels}`.padEnd(cols - 2 + labels.length - issue.labels.map(l=>l.name.length + 10).reduce((a,b)=>a+b, 0)) + borderCh); // offset for raw ANSI chars
|
||
|
|
}
|
||
|
|
console.log(chalk.bold.hex('#4A90E2')('├' + '─'.repeat(cols - 2) + '┤'));
|
||
|
|
|
||
|
|
// Gather and format all detail text (Body + Comments)
|
||
|
|
const contentLines: string[] = [];
|
||
|
|
|
||
|
|
// 1. Render Body
|
||
|
|
contentLines.push(chalk.bold.yellow('--- DESCRIPTION ---'));
|
||
|
|
if (issue.body.trim()) {
|
||
|
|
const wrappedBody = wordWrap(issue.body, cols - 6);
|
||
|
|
contentLines.push(...wrappedBody);
|
||
|
|
} else {
|
||
|
|
contentLines.push(chalk.italic.gray('No description provided.'));
|
||
|
|
}
|
||
|
|
contentLines.push('');
|
||
|
|
|
||
|
|
// 2. Render Comments Section
|
||
|
|
contentLines.push(chalk.bold.yellow(`--- COMMENTS (${issue.comments}) ---`));
|
||
|
|
|
||
|
|
if (this.state.commentsLoading) {
|
||
|
|
contentLines.push(chalk.cyan(' Loading comments...'));
|
||
|
|
} else if (this.state.selectedIssueComments.length === 0) {
|
||
|
|
contentLines.push(chalk.italic.gray(' No comments.'));
|
||
|
|
} else {
|
||
|
|
for (const comment of this.state.selectedIssueComments) {
|
||
|
|
contentLines.push(chalk.bold.cyan(`▶ ${comment.user.login}`) + chalk.gray(` at ${formatDate(comment.created_at)}`));
|
||
|
|
const wrappedComment = wordWrap(comment.body, cols - 8);
|
||
|
|
for (const cLine of wrappedComment) {
|
||
|
|
contentLines.push(' ' + cLine);
|
||
|
|
}
|
||
|
|
contentLines.push(''); // blank line between comments
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Paginate/Scroll calculations
|
||
|
|
const displayHeight = rows - 6; // Header: 1, borders: 2, meta: 2, help: 1
|
||
|
|
const maxScroll = Math.max(0, contentLines.length - displayHeight);
|
||
|
|
|
||
|
|
// Bounds check scroll offset
|
||
|
|
if (this.state.detailScrollOffset > maxScroll) {
|
||
|
|
this.state.detailScrollOffset = maxScroll;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Print visible window of content
|
||
|
|
for (let r = 0; r < displayHeight; r++) {
|
||
|
|
const lineIndex = r + this.state.detailScrollOffset;
|
||
|
|
if (lineIndex < contentLines.length) {
|
||
|
|
const line = contentLines[lineIndex];
|
||
|
|
console.log(borderCh + ' ' + line.padEnd(cols - 4) + ' ' + borderCh);
|
||
|
|
} else {
|
||
|
|
console.log(borderCh + ' '.repeat(cols - 2) + borderCh);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log(chalk.bold.hex('#4A90E2')('└' + '─'.repeat(cols - 2) + '┘'));
|
||
|
|
|
||
|
|
// Footer Scroll percentage
|
||
|
|
let scrollHelp = ' Scroll: [↑/↓] / [PgUp/PgDn]';
|
||
|
|
if (maxScroll > 0) {
|
||
|
|
const pct = Math.round((this.state.detailScrollOffset / maxScroll) * 100);
|
||
|
|
scrollHelp += chalk.yellow(` (${pct}%)`);
|
||
|
|
}
|
||
|
|
|
||
|
|
const helpLine = chalk.gray(` [Esc/Backspace] Back to List ${scrollHelp}`);
|
||
|
|
process.stdout.write(helpLine);
|
||
|
|
}
|
||
|
|
}
|