react+tailwind in popup (with testing and playground) (#36)

Author: nedtwigg

.gitignore

@@ -18,6 +18,8 @@ dist/
 Thumbs.db
 
 # playright
+.playwright-mcp/
+browser-extension/dist-playground/
 browser-extension/playwright-report/
 browser-extension/playwright/
-browser-extension/test-results/
+browser-extension/test-results/

browser-extension/README.md

@@ -33,15 +33,15 @@ This is a [WXT](https://wxt.dev/)-based browser extension that
 
 ### Entry points
 
-- `src/entrypoints/content.ts` - injected into every webpage
-- `src/entrypoints/background.ts` - service worker that manages state and handles messages
-- `src/entrypoints/popup` - html/css/ts which opens when the extension's button gets clicked
+- [`src/entrypoints/content.ts`](src/entrypoints/content.ts) - injected into every webpage
+- [`src/entrypoints/background.ts`](src/entrypoints/background.ts) - service worker that manages state and handles messages
+- [`src/entrypoints/popup/popup.tsx`](src/entrypoints/popup/popup.tsx) - popup (html/css/tsx) with shadcn/ui table components
 
 ```mermaid
 graph TD
     Content[Content Script<br/>content.ts] 
     Background[Background Script<br/>background.ts]
-    Popup[Popup Script<br/>popup/main.ts]
+    Popup[Popup Script<br/>popup/popup.tsx]
     
     Content -->|ENHANCED/DESTROYED<br/>CommentEvent| Background
     Popup -->|GET_OPEN_SPOTS<br/>SWITCH_TO_TAB| Background
@@ -60,22 +60,20 @@ graph TD
     class TextArea,UI ui
 ```
 
-### Architecture
+Every time a `textarea` shows up on a page, on initial load or later on, it gets passed to a list of `CommentEnhancer`s. Each one gets a turn to say "I can enhance this box!". They show that they can enhance it by returning something non-null in the method `tryToEnhance(textarea: HTMLTextAreaElement): Spot | null`. Later on, that same `Spot` data will be used by the `tableRow(spot: Spot): ReactNode` method to create React components for rich formatting in the popup table.
 
-Every time a `textarea` shows up on a page, on initial load or later on, it gets passed to a list of `CommentEnhancer`s. Each one gets a turn to say "I can enhance this box!". They show that they can enhance it by returning a [`CommentSpot`, `Overtype`].
+Those `Spot` values get bundled up with the `HTMLTextAreaElement` itself into an `EnhancedTextarea`, which gets added to the `TextareaRegistry`. At some interval, draft edits get saved by the browser extension.
 
-Those values get bundled up with the `HTMLTextAreaElement` itself into an `EnhancedTextarea`, which gets added to the `TextareaRegistry`. At some interval, draft edits will get saved by the browser extension (TODO).
-
-When the `textarea` gets removed from the page, the `TextareaRegistry` is notified so that the `CommentSpot` can be marked as abandoned or submitted as appropriate (TODO).
+When the `textarea` gets removed from the page, the `TextareaRegistry` is notified so that the `CommentSpot` can be marked as abandoned or submitted as appropriate.
 
 ## Testing
 
-In `tests/har` there are various `.har` files. These are complete recordings of a single page load.
-
-- `pnpm run har:view` and you can see the recordings, with or without our browser extension.
+- `npm run playground` gives you a test environment where you can tinker with the popup with various test data, supports hot reload
+- `npm run har:view` gives you recordings of various web pages which you can see with and without enhancement by the browser extension
 
 ### Recording new HAR files
 
+- the har recordings live in `tests/har`, they are complete recordings of the network requests of a single page load
 - you can add or change URLs in `tests/har-index.ts`
 - `npx playwright codegen https://github.com/login --save-storage=playwright/.auth/gh.json` will store new auth tokens
   - login manually, then close the browser

browser-extension/biome.json

@@ -47,6 +47,9 @@
         "noUnusedVariables": "error",
         "useValidTypeof": "error"
       },
+      "nursery": {
+        "useSortedClasses": "error"
+      },
       "recommended": true,
       "style": {
         "noDefaultExport": "off",
@@ -60,12 +63,14 @@
         "useTemplate": "error"
       },
       "suspicious": {
+        "noAssignInExpressions": "off",
         "noConsole": {
           "options": {
             "allow": ["assert", "error", "info", "warn"]
           }
         },
         "noExplicitAny": "off",
+        "noUnknownAtRules": "off",
         "noVar": "error"
       }
     }

browser-extension/package.json

@@ -1,25 +1,38 @@
 {
   "author": "DiffPlug",
   "dependencies": {
+    "@primer/octicons-react": "^19.18.0",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
     "@wxt-dev/webextension-polyfill": "^1.0.0",
     "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",
+    "tailwind-variants": "^3.1.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/vite": "^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",
     "express": "^4.19.2",
     "linkedom": "^0.18.12",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.13",
     "tsx": "^4.19.1",
     "typescript": "^5.8.3",
+    "vite": "^7.1.5",
     "vitest": "^3.2.4",
     "wxt": "^0.20.7"
   },
@@ -47,6 +60,8 @@
     "dev:firefox": "wxt -b firefox",
     "postinstall": "wxt prepare",
     "test": "vitest run",
+    "playground": "vite --config vite.playground.config.ts",
+    "playground:build": "vite build --config vite.playground.config.ts",
     "har:record": "tsx tests/har-record.ts",
     "har:view": "tsx tests/har-view.ts"
   },

browser-extension/src/components/Badge.tsx

@@ -0,0 +1,26 @@
+import { twMerge } from 'tailwind-merge'
+import type { VariantProps } from 'tailwind-variants'
+import { badgeCVA, typeIcons } from '@/components/design'
+
+export type BadgeProps = VariantProps<typeof badgeCVA> & {
+  type: keyof typeof typeIcons
+  text?: number | string
+}
+
+const Badge = ({ text, type }: BadgeProps) => {
+  const Icon = typeIcons[type]
+  return (
+    <span
+      className={twMerge(
+        badgeCVA({
+          type,
+        }),
+      )}
+    >
+      {type === 'blank' || <Icon className='h-3 w-3' />}
+      {text || type}
+    </span>
+  )
+}
+
+export default Badge

browser-extension/src/components/MultiSegment.tsx

@@ -0,0 +1,51 @@
+import { badgeCVA, typeIcons } from '@/components/design'
+
+interface Segment<T> {
+  text?: string
+  type: keyof typeof typeIcons
+  value: T
+}
+interface MultiSegmentProps<T> {
+  segments: Segment<T>[]
+  value: T
+  onValueChange: (value: T) => void
+}
+
+const MultiSegment = <T,>({ segments, value, onValueChange }: MultiSegmentProps<T>) => {
+  return (
+    <div className='inline-flex items-center gap-0'>
+      {segments.map((segment, index) => {
+        const Icon = typeIcons[segment.type]
+        const isFirst = index === 0
+        const isLast = index === segments.length - 1
+
+        const roundedClasses =
+          isFirst && isLast
+            ? ''
+            : isFirst
+              ? '!rounded-r-none'
+              : isLast
+                ? '!rounded-l-none'
+                : '!rounded-none'
+
+        return (
+          <button
+            key={String(segment.value)}
+            className={`${badgeCVA({
+              clickable: true,
+              selected: value === segment.value,
+              type: segment.type,
+            })} ${roundedClasses}`}
+            onClick={() => onValueChange(segment.value)}
+            type='button'
+          >
+            {segment.type === 'blank' || <Icon className='h-3 w-3' />}
+            {segment.text}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export default MultiSegment