first cut at popup implementation

Author: nedtwigg

browser-extension/src/entrypoints/background.ts

@@ -46,6 +46,24 @@ export function handleCommentEvent(message: CommentEvent, sender: any): void {
   }
 }
 
+export function handlePopupMessage(message: any, sender: any, sendResponse: (response: any) => void): void {
+  if (message.type === 'GET_OPEN_SPOTS') {
+    const spots: CommentState[] = []
+    for (const [, commentState] of openSpots) {
+      spots.push(commentState)
+    }
+    sendResponse({ spots })
+  }
+}
+
 export default defineBackground(() => {
-  browser.runtime.onMessage.addListener(handleCommentEvent)
+  browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
+    if (message.type === 'GET_OPEN_SPOTS') {
+      handlePopupMessage(message, sender, sendResponse)
+      return true
+    } else {
+      handleCommentEvent(message, sender)
+      return false
+    }
+  })
 })

browser-extension/src/entrypoints/popup/main.ts

@@ -1 +1,63 @@
 import './style.css'
+import type { CommentState } from '../background'
+import { EnhancerRegistry } from '../../lib/registries'
+
+const enhancers = new EnhancerRegistry()
+
+async function getOpenSpots(): Promise<CommentState[]> {
+  return new Promise((resolve) => {
+    browser.runtime.sendMessage({ type: 'GET_OPEN_SPOTS' }, (response) => {
+      resolve(response.spots || [])
+    })
+  })
+}
+
+async function switchToTab(tabId: number, windowId: number): Promise<void> {
+  await browser.windows.update(windowId, { focused: true })
+  await browser.tabs.update(tabId, { active: true })
+  window.close()
+}
+
+function createSpotElement(commentState: CommentState): HTMLElement {
+  const item = document.createElement('div')
+  item.className = 'spot-item'
+
+  const title = document.createElement('div')
+  title.className = 'spot-title'
+
+  const enhancer = enhancers.enhancerFor(commentState.spot)
+  title.textContent = enhancer.tableTitle(commentState.spot)
+
+  item.appendChild(title)
+
+  item.addEventListener('click', () => {
+    switchToTab(commentState.tab.tabId, commentState.tab.windowId)
+  })
+
+  return item
+}
+
+async function renderOpenSpots(): Promise<void> {
+  const app = document.getElementById('app')!
+  const spots = await getOpenSpots()
+
+  if (spots.length === 0) {
+    app.innerHTML = '<div class="no-spots">No open comment spots</div>'
+    return
+  }
+
+  const header = document.createElement('h2')
+  header.textContent = 'Open Comment Spots'
+  app.appendChild(header)
+
+  const list = document.createElement('div')
+  list.className = 'spots-list'
+
+  spots.forEach(spot => {
+    list.appendChild(createSpotElement(spot))
+  })
+
+  app.appendChild(list)
+}
+
+renderOpenSpots()

browser-extension/src/entrypoints/popup/style.css

@@ -6,3 +6,48 @@ body {
   line-height: 1.4;
   margin: 0;
 }
+
+h2 {
+  margin: 0 0 15px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.spots-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.spot-item {
+  padding: 10px;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: white;
+}
+
+.spot-item:hover {
+  background: #f5f5f5;
+  border-color: #d0d0d0;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.spot-title {
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.no-spots {
+  text-align: center;
+  color: #666;
+  padding: 40px 20px;
+  font-style: italic;
+}