keet-tui / lib / views / main.js

import { roomListView } from '../components/room-list.js'
import { chatView } from '../components/chat-view.js'
import { memberListView } from '../components/member-list.js'
import { statusBarView } from '../components/status-bar.js'
import * as style from '../style.js'

export function mainView (model, width, height) {
  // Layout: [rooms sidebar] | [chat] | [members sidebar]
  // Status bar at bottom
  const bodyHeight = height - 1 // 1 for status bar

  // Column widths
  const showMembers = width > 80
  const sidebarWidth = Math.min(24, Math.floor(width * 0.2))
  const memberWidth = showMembers ? Math.min(20, Math.floor(width * 0.15)) : 0
  const chatWidth = width - sidebarWidth - memberWidth - (showMembers ? 2 : 1) // separators

  // Render columns
  const roomLines = roomListView(model, sidebarWidth, bodyHeight)
  const chatLines = chatView(model, chatWidth, bodyHeight)
  const memberLines = showMembers ? memberListView(model, memberWidth, bodyHeight) : null

  const sep = style.vline('single')
  const focusSep = style.bold(style.cyan(style.vline('heavy')))

  // Compose rows
  const lines = []
  for (let i = 0; i < bodyHeight; i++) {
    const roomPart = style.padRight(roomLines[i] || '', sidebarWidth)
    const chatPart = style.padRight(chatLines[i] || '', chatWidth)

    let row = roomPart
    row += (model.focus === 'rooms' ? focusSep : sep)
    row += chatPart

    if (showMembers) {
      const memberPart = style.padRight(memberLines[i] || '', memberWidth)
      row += (model.focus === 'members' ? focusSep : sep)
      row += memberPart
    }

    lines.push(row)
  }

  // Status bar
  lines.push(statusBarView(model, width))

  return lines
}