popup.tsx

import './style.css'
import { createRoot } from 'react-dom/client'
import { PopupRoot } from '@/components/PopupRoot'
import type { CommentTableRow } from '@/entrypoints/background'
import { logger } from '@/lib/logger'
import type { GetOpenSpotsMessage, GetTableRowsResponse, OpenOrFocusMessage } from '@/lib/messages'

export interface FilterState {
  sentFilter: 'both' | 'sent' | 'unsent'
  searchQuery: string
  showTrashed: boolean
}

async function getOpenSpots(): Promise<CommentTableRow[]> {
  logger.debug('Sending message to background script...')
  try {
    const message: GetOpenSpotsMessage = { type: 'GET_OPEN_SPOTS' }
    const response = (await browser.runtime.sendMessage(message)) as GetTableRowsResponse
    logger.debug('Received response:', response)
    return response.rows
  } catch (error) {
    logger.error('Error sending message to background:', error)
    return []
  }
}

export function openOrFocusComment(uniqueKey: string): void {
  const message: OpenOrFocusMessage = {
    type: 'OPEN_OR_FOCUS_COMMENT',
    uniqueKey,
  }
  browser.runtime.sendMessage(message)
  window.close()
}

const app = document.getElementById('app')
if (app) {
  const root = createRoot(app)

  // Load initial data and render
  getOpenSpots()
    .then((drafts) => {
      root.render(<PopupRoot drafts={drafts} />)
    })
    .catch((error) => {
      logger.error('Failed to load initial data:', error)
      root.render(<PopupRoot drafts={[]} />)
    })
} else {
  logger.error('App element not found')
}