Navigate design out into its own thing.

Author: nedtwigg

browser-extension/src/components/design.tsx

@@ -0,0 +1,64 @@
+import { cva } from 'class-variance-authority'
+import {
+  Clock,
+  Code,
+  EyeOff,
+  Image,
+  Link,
+  MailCheck,
+  MessageSquareDashed,
+  Monitor,
+  Settings,
+  TextSelect,
+  Trash2,
+} from 'lucide-react'
+
+// CVA configuration for stat badges
+export const statBadge = cva(
+  'inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-normal h-5',
+  {
+    defaultVariants: {
+      clickable: false,
+    },
+    variants: {
+      clickable: {
+        false: '',
+        true: 'cursor-pointer border border-transparent hover:border-current border-dashed',
+      },
+      selected: {
+        false: '',
+        true: '!border-solid !border-current',
+      },
+      type: {
+        blank: 'bg-transparent text-gray-700',
+        code: 'bg-pink-50 text-pink-700',
+        hideTrashed: 'bg-transparent text-gray-700',
+        image: 'bg-purple-50 text-purple-700',
+        link: 'bg-blue-50 text-blue-700',
+        open: 'bg-cyan-50 text-cyan-700',
+        sent: 'bg-green-50 text-green-700',
+        settings: 'bg-gray-50 text-gray-700',
+        text: 'bg-gray-50 text-gray-700',
+        time: 'bg-gray-50 text-gray-700',
+        trashed: 'bg-gray-50 text-yellow-700',
+        unsent: 'bg-amber-100 text-amber-700',
+      },
+    },
+  },
+)
+
+// Map types to their icons
+export const typeIcons = {
+  blank: Code,
+  code: Code,
+  hideTrashed: EyeOff,
+  image: Image,
+  link: Link,
+  open: Monitor,
+  sent: MailCheck,
+  settings: Settings,
+  text: TextSelect,
+  time: Clock,
+  trashed: Trash2,
+  unsent: MessageSquareDashed,
+} as const

browser-extension/src/entrypoints/popup/popup.tsx

@@ -32,6 +32,12 @@ function switchToTab(tabId: number, windowId: number): void {
 
 const enhancers = new EnhancerRegistry()
 
+export interface FilterState {
+  sentFilter: 'both' | 'sent' | 'unsent'
+  searchQuery: string
+  showTrashed: boolean
+}
+
 function PopupApp() {
   const [spots, setSpots] = React.useState<CommentState[]>([])
   const [isLoading, setIsLoading] = React.useState(true)

browser-extension/tests/playground/claude.tsx

@@ -1,83 +1,15 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-import {
-  Clock,
-  Code,
-  Eye,
-  EyeOff,
-  Image,
-  Link,
-  MailCheck,
-  MessageSquareDashed,
-  Monitor,
-  Search,
-  Settings,
-  TextSelect,
-  Trash2,
-} from 'lucide-react'
+import type { VariantProps } from 'class-variance-authority'
+import { Eye, EyeOff, Search, Settings, Trash2 } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
+import { statBadge, typeIcons } from '@/components/design'
 import type { CommentTableRow } from '@/entrypoints/background'
+import type { FilterState } from '@/entrypoints/popup/popup'
 import { EnhancerRegistry } from '@/lib/registries'
 import { generateMockDrafts } from './replicaData'
 
-interface FilterState {
-  sentFilter: 'both' | 'sent' | 'unsent'
-  searchQuery: string
-  showTrashed: boolean
-}
-
-// CVA configuration for stat badges
-const statBadge = cva(
-  'inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-normal h-5',
-  {
-    defaultVariants: {
-      clickable: false,
-    },
-    variants: {
-      clickable: {
-        false: '',
-        true: 'cursor-pointer border border-transparent hover:border-current border-dashed',
-      },
-      selected: {
-        false: '',
-        true: '!border-solid !border-current',
-      },
-      type: {
-        blank: 'bg-transparent text-gray-700',
-        code: 'bg-pink-50 text-pink-700',
-        hideTrashed: 'bg-transparent text-gray-700',
-        image: 'bg-purple-50 text-purple-700',
-        link: 'bg-blue-50 text-blue-700',
-        open: 'bg-cyan-50 text-cyan-700',
-        sent: 'bg-green-50 text-green-700',
-        settings: 'bg-gray-50 text-gray-700',
-        text: 'bg-gray-50 text-gray-700',
-        time: 'bg-gray-50 text-gray-700',
-        trashed: 'bg-gray-50 text-yellow-700',
-        unsent: 'bg-amber-100 text-amber-700',
-      },
-    },
-  },
-)
-
-// Map types to their icons
-const typeIcons = {
-  blank: Code,
-  code: Code,
-  hideTrashed: EyeOff,
-  image: Image,
-  link: Link,
-  open: Monitor,
-  sent: MailCheck,
-  settings: Settings,
-  text: TextSelect,
-  time: Clock,
-  trashed: Trash2,
-  unsent: MessageSquareDashed,
-} as const
-
 // StatBadge component
-type BadgeProps = VariantProps<typeof statBadge> & {
+export type BadgeProps = VariantProps<typeof statBadge> & {
   type: keyof typeof typeIcons
   text?: number | string
 }