Skip to content

Commit d889bc1

Browse files
nedtwiggnedtwigg
committed
Prepare to make a multiselect control.
1 parent f120ca9 commit d889bc1

File tree

1 file changed

+62
-48
lines changed

1 file changed

+62
-48
lines changed

‎browser-extension/tests/playground/claude.tsx‎

Lines changed: 62 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -20,25 +20,30 @@ import type { CommentSpot } from '@/lib/enhancer'
2020
import type { DraftStats } from '@/lib/enhancers/draftStats'
2121

2222
// CVA configuration for stat badges
23-
const statBadge = cva('inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs', {
24-
variants: {
25-
type: {
26-
archived: 'bg-gray-50 text-yellow-700',
27-
code: 'bg-pink-50 text-pink-700',
28-
image: 'bg-purple-50 text-purple-700',
29-
link: 'bg-blue-50 text-blue-700',
30-
open: 'bg-cyan-50 text-cyan-700',
31-
sent: 'bg-green-50 text-green-700',
32-
text: 'bg-gray-50 text-gray-700',
33-
time: 'bg-gray-50 text-gray-700',
34-
unsent: 'bg-amber-100 text-amber-700',
23+
const statBadge = cva(
24+
'inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-normal tracking-normal',
25+
{
26+
variants: {
27+
type: {
28+
archived: 'bg-gray-50 text-yellow-700',
29+
blank: 'bg-transparent text-gray-700',
30+
code: 'bg-pink-50 text-pink-700',
31+
image: 'bg-purple-50 text-purple-700',
32+
link: 'bg-blue-50 text-blue-700',
33+
open: 'bg-cyan-50 text-cyan-700',
34+
sent: 'bg-green-50 text-green-700',
35+
text: 'bg-gray-50 text-gray-700',
36+
time: 'bg-gray-50 text-gray-700',
37+
unsent: 'bg-amber-100 text-amber-700',
38+
},
3539
},
3640
},
37-
})
41+
)
3842

3943
// Map types to their icons
4044
const typeIcons = {
4145
archived: Archive,
46+
blank: Archive,
4247
code: Code,
4348
image: Image,
4449
link: Link,
@@ -59,7 +64,7 @@ const Badge = ({ text, type }: BadgeProps) => {
5964
const Icon = typeIcons[type]
6065
return (
6166
<span className={statBadge({ type })}>
62-
<Icon className='w-3 h-3' />
67+
{type === 'blank' || <Icon className='w-3 h-3' />}
6368
{text || type}
6469
</span>
6570
)
@@ -306,6 +311,7 @@ export const ClaudePrototype = () => {
306311
const [hasCodeFilter, setHasCodeFilter] = useState(false)
307312
const [hasImageFilter, setHasImageFilter] = useState(false)
308313
const [hasLinkFilter, setHasLinkFilter] = useState(false)
314+
const [sentFilter, setSentFilter] = useState<'all' | 'sent' | 'unsent'>('all')
309315
const [searchQuery, setSearchQuery] = useState('')
310316
const [sortBy, _setSortBy] = useState('edited-newest')
311317
const [showFilters, setShowFilters] = useState(false)
@@ -321,6 +327,9 @@ export const ClaudePrototype = () => {
321327
if (hasLinkFilter) {
322328
filtered = filtered.filter((d) => d.latestDraft.stats.links.length > 0)
323329
}
330+
if (sentFilter !== 'all') {
331+
filtered = filtered.filter((d) => (sentFilter === 'sent' ? d.isSent : !d.isSent))
332+
}
324333
if (searchQuery) {
325334
const query = searchQuery.toLowerCase()
326335
filtered = filtered.filter((d) =>
@@ -339,7 +348,7 @@ export const ClaudePrototype = () => {
339348
break
340349
}
341350
return filtered
342-
}, [drafts, hasCodeFilter, hasImageFilter, hasLinkFilter, searchQuery, sortBy])
351+
}, [drafts, hasCodeFilter, hasImageFilter, hasLinkFilter, sentFilter, searchQuery, sortBy])
343352

344353
const toggleSelection = (id: string) => {
345354
const newSelected = new Set(selectedIds)
@@ -399,7 +408,7 @@ export const ClaudePrototype = () => {
399408

400409
if (
401410
filteredDrafts.length === 0 &&
402-
(searchQuery || hasCodeFilter || hasImageFilter || hasLinkFilter)
411+
(searchQuery || hasCodeFilter || hasImageFilter || hasLinkFilter || sentFilter !== 'all')
403412
) {
404413
return (
405414
<div className='min-h-screen bg-white'>
@@ -428,6 +437,7 @@ export const ClaudePrototype = () => {
428437
setHasCodeFilter(false)
429438
setHasImageFilter(false)
430439
setHasLinkFilter(false)
440+
setSentFilter('all')
431441
setSearchQuery('')
432442
}}
433443
className='text-blue-600 hover:underline'
@@ -483,10 +493,7 @@ export const ClaudePrototype = () => {
483493
className='rounded'
484494
/>
485495
</th>
486-
<th
487-
scope='col'
488-
className='px-3 py-3 text-left text-xs font-medium text-gray-500 tracking-wider'
489-
>
496+
<th scope='col' className='px-3 py-3 text-left text-xs text-gray-500 tracking-wider'>
490497
<div className='relative'>
491498
<div className='flex items-center gap-1'>
492499
<div className='relative flex-1'>
@@ -510,34 +517,41 @@ export const ClaudePrototype = () => {
510517
</div>
511518
{showFilters && (
512519
<div className='absolute top-full right-0 mt-1 p-3 bg-white border border-gray-300 rounded-md shadow-lg z-10 min-w-48'>
513-
<div className='space-y-2'>
514-
<label className='flex items-center gap-2 cursor-pointer'>
515-
<input
516-
type='checkbox'
517-
checked={hasLinkFilter}
518-
onChange={(e) => setHasLinkFilter(e.target.checked)}
519-
className='rounded'
520-
/>
521-
<Badge type='link' />
522-
</label>
523-
<label className='flex items-center gap-2 cursor-pointer'>
524-
<input
525-
type='checkbox'
526-
checked={hasImageFilter}
527-
onChange={(e) => setHasImageFilter(e.target.checked)}
528-
className='rounded'
529-
/>
530-
<Badge type='image' />
531-
</label>
532-
<label className='flex items-center gap-2 cursor-pointer'>
533-
<input
534-
type='checkbox'
535-
checked={hasCodeFilter}
536-
onChange={(e) => setHasCodeFilter(e.target.checked)}
537-
className='rounded'
538-
/>
539-
<Badge type='code' />
540-
</label>
520+
<div className='space-y-3'>
521+
<div className='space-y-2'>
522+
<label className='flex items-center gap-2 cursor-pointer'>
523+
<input
524+
type='checkbox'
525+
checked={hasLinkFilter}
526+
onChange={(e) => setHasLinkFilter(e.target.checked)}
527+
className='rounded'
528+
/>
529+
<Badge type='link' />
530+
</label>
531+
<label className='flex items-center gap-2 cursor-pointer'>
532+
<input
533+
type='checkbox'
534+
checked={hasImageFilter}
535+
onChange={(e) => setHasImageFilter(e.target.checked)}
536+
className='rounded'
537+
/>
538+
<Badge type='image' />
539+
</label>
540+
<label className='flex items-center gap-2 cursor-pointer'>
541+
<input
542+
type='checkbox'
543+
checked={hasCodeFilter}
544+
onChange={(e) => setHasCodeFilter(e.target.checked)}
545+
className='rounded'
546+
/>
547+
<Badge type='code' />
548+
</label>
549+
</div>
550+
<div className='flex rounded-md overflow-hidden'>
551+
<Badge type='unsent' />
552+
<Badge type='blank' text='both' />
553+
<Badge type='sent' />
554+
</div>
541555
</div>
542556
</div>
543557
)}

0 commit comments

Comments
 (0)