Refactor MultiSegment out into its own thing.

Author: nedtwigg

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='w-3 h-3' />}
+            {segment.text}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export default MultiSegment

browser-extension/tests/playground/claude.tsx

@@ -2,60 +2,13 @@ import { Eye, EyeOff, Search, Settings, Trash2 } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import Badge from '@/components/Badge'
-import { badgeCVA, typeIcons } from '@/components/design'
+import { badgeCVA } from '@/components/design'
+import MultiSegment from '@/components/MultiSegment'
 import type { CommentTableRow } from '@/entrypoints/background'
 import type { FilterState } from '@/entrypoints/popup/popup'
 import { EnhancerRegistry } from '@/lib/registries'
 import { generateMockDrafts } from './replicaData'
 
-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='w-3 h-3' />}
-            {segment.text}
-          </button>
-        )
-      })}
-    </div>
-  )
-}
-
 // Helper function for relative time
 function timeAgo(date: Date | number): string {
   const timestamp = typeof date === 'number' ? date : date.getTime()