Working straight from claude, refinement needed.

Author: nedtwigg

browser-extension/package.json

@@ -1,23 +1,36 @@
 {
   "author": "DiffPlug",
   "dependencies": {
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
     "@wxt-dev/webextension-polyfill": "^1.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "highlight.js": "^11.11.1",
+    "lucide-react": "^0.543.0",
     "overtype": "workspace:*",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "tailwind-merge": "^3.3.1",
     "webextension-polyfill": "^0.12.0"
   },
   "description": "Syntax highlighting and autosave for comments on GitHub (and other other markdown-friendly websites).",
   "devDependencies": {
     "@biomejs/biome": "^2.1.2",
     "@playwright/test": "^1.46.0",
+    "@tailwindcss/postcss": "^4.1.13",
     "@testing-library/jest-dom": "^6.6.4",
     "@types/express": "^4.17.21",
     "@types/har-format": "^1.2.16",
     "@types/node": "^22.16.5",
+    "@vitejs/plugin-react": "^5.0.2",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
+    "autoprefixer": "^10.4.21",
     "express": "^4.19.2",
     "linkedom": "^0.18.12",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.13",
     "tsx": "^4.19.1",
     "typescript": "^5.8.3",
     "vitest": "^3.2.4",

browser-extension/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+}

browser-extension/src/components/ui/table.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className='relative w-full overflow-auto'>
+      <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+    </div>
+  ),
+)
+Table.displayName = 'Table'
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+))
+TableHeader.displayName = 'TableHeader'
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+))
+TableBody.displayName = 'TableBody'
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
+    {...props}
+  />
+))
+TableFooter.displayName = 'TableFooter'
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+TableRow.displayName = 'TableRow'
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+      className,
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = 'TableHead'
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    {...props}
+  />
+))
+TableCell.displayName = 'TableCell'
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
+))
+TableCaption.displayName = 'TableCaption'
+
+export { Table, TableHeader, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableRow }

browser-extension/src/entrypoints/popup/index.html

@@ -8,6 +8,6 @@
 <body>
   <div id="app">
   </div>
-  <script type="module" src="main.ts"></script>
+  <script type="module" src="main.tsx"></script>
 </body>
 </html>

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

@@ -0,0 +1,143 @@
+import './style.css'
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { cn } from '@/lib/utils'
+import { logger } from '../../lib/logger'
+import type {
+  GetOpenSpotsMessage,
+  GetOpenSpotsResponse,
+  SwitchToTabMessage,
+} from '../../lib/messages'
+import { EnhancerRegistry } from '../../lib/registries'
+import type { CommentState } from '../background'
+
+const enhancers = new EnhancerRegistry()
+
+async function getOpenSpots(): Promise<CommentState[]> {
+  logger.debug('Sending message to background script...')
+  try {
+    const message: GetOpenSpotsMessage = { type: 'GET_OPEN_SPOTS' }
+    const response = (await browser.runtime.sendMessage(message)) as GetOpenSpotsResponse
+    logger.debug('Received response:', response)
+    return response.spots || []
+  } catch (error) {
+    logger.error('Error sending message to background:', error)
+    return []
+  }
+}
+
+function switchToTab(tabId: number, windowId: number): void {
+  const message: SwitchToTabMessage = {
+    tabId,
+    type: 'SWITCH_TO_TAB',
+    windowId,
+  }
+  browser.runtime.sendMessage(message)
+  window.close()
+}
+
+interface SpotRowProps {
+  commentState: CommentState
+  onClick: () => void
+}
+
+function SpotRow({ commentState, onClick }: SpotRowProps) {
+  const enhancer = enhancers.enhancerFor(commentState.spot)
+
+  if (!enhancer) {
+    logger.error('No enhancer found for:', commentState.spot)
+    logger.error('Only have enhancers for:', enhancers.byType)
+    return null
+  }
+
+  return (
+    <TableRow
+      className={cn(
+        'cursor-pointer transition-colors hover:bg-muted/50',
+        'border-b border-border/40',
+      )}
+      onClick={onClick}
+    >
+      <TableCell className='p-3'>
+        <div className='flex items-center gap-2'>
+          <span className='text-lg'>{enhancer.tableIcon(commentState.spot)}</span>
+          <div className='font-medium text-sm text-foreground overflow-hidden text-ellipsis whitespace-nowrap'>
+            {enhancer.tableTitle(commentState.spot)}
+          </div>
+        </div>
+      </TableCell>
+    </TableRow>
+  )
+}
+
+function PopupApp() {
+  const [spots, setSpots] = React.useState<CommentState[]>([])
+  const [isLoading, setIsLoading] = React.useState(true)
+
+  React.useEffect(() => {
+    const loadSpots = async () => {
+      try {
+        const openSpots = await getOpenSpots()
+        setSpots(openSpots)
+      } catch (error) {
+        logger.error('Error loading spots:', error)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    loadSpots()
+  }, [])
+
+  if (isLoading) {
+    return <div className='p-4 text-center text-muted-foreground'>Loading...</div>
+  }
+
+  if (spots.length === 0) {
+    return (
+      <div className='p-10 text-center text-muted-foreground italic'>No open comment spots</div>
+    )
+  }
+
+  return (
+    <div className='w-full'>
+      <h2 className='mb-4 text-lg font-semibold text-foreground'>Open Comment Spots</h2>
+
+      <div className='border rounded-md'>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className='p-3 font-medium text-muted-foreground'>Comment Spots</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {spots.map((spot) => (
+              <SpotRow
+                key={spot.spot.unique_key}
+                commentState={spot}
+                onClick={() => switchToTab(spot.tab.tabId, spot.tab.windowId)}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+}
+
+// Initialize React app
+const app = document.getElementById('app')
+if (app) {
+  const root = createRoot(app)
+  root.render(<PopupApp />)
+} else {
+  logger.error('App element not found')
+}