Skip to content

Commit f1822fa

Browse files
nedtwiggnedtwigg
committed
Refactor the row out of the table.
1 parent 96bfc80 commit f1822fa

File tree

1 file changed

+119
-111
lines changed

1 file changed

+119
-111
lines changed

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

Lines changed: 119 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -435,120 +435,128 @@ export const ClaudePrototype = () => {
435435
</tr>
436436
</thead>
437437
<tbody className='divide-y divide-gray-200'>
438-
{filteredDrafts.map((draft) => (
439-
<tr key={draft.id} className='hover:bg-gray-50'>
440-
<td className='px-3 py-3'>
441-
<input
442-
type='checkbox'
443-
checked={selectedIds.has(draft.id)}
444-
onChange={() => toggleSelection(draft.id)}
445-
className='rounded'
446-
/>
447-
</td>
448-
<td className='px-3 py-3'>
449-
<div className='space-y-1'>
450-
{/* Context line */}
451-
<div className='flex items-center justify-between gap-1.5 text-xs text-gray-600'>
452-
<div className='flex items-center gap-1.5 min-w-0 flex-1'>
453-
<span className='w-4 h-4 flex items-center justify-center flex-shrink-0'>
454-
{draft.type === 'PR' && <GitPullRequestIcon size={16} />}
455-
{draft.type === 'ISSUE' && <IssueOpenedIcon size={16} />}
456-
{draft.type === 'REDDIT' && (
457-
<img
458-
src='https://styles.redditmedia.com/t5_2fwo/styles/communityIcon_1bqa1ibfp8q11.png?width=128&frame=1&auto=webp&s=400b33e7080aa4996c405a96b3872a12f0e3b68d'
459-
alt='Reddit'
460-
className='w-4 h-4 rounded-full'
461-
/>
462-
)}
463-
</span>
464-
{}
465-
{isGitHubDraft(draft) && (
466-
<>
467-
<a href={'TODO'} className='hover:underline'>
468-
#{draft.number}
469-
</a>{' '}
470-
<a href='TODO' className='hover:underline truncate'>
471-
{draft.repoSlug}
472-
</a>
473-
</>
474-
)}
475-
{isRedditDraft(draft) && (
476-
<a href={'TODO'} className='hover:underline truncate'>
477-
r/{draft.subreddit}
478-
</a>
479-
)}
480-
</div>
481-
<div className='flex items-center gap-1 flex-shrink-0'>
482-
{draft.linkCount > 0 && (
483-
<span className='inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-blue-50 text-blue-700'>
484-
<Link className='w-3 h-3' />
485-
{draft.linkCount}
486-
</span>
487-
)}
488-
{draft.imageCount > 0 && (
489-
<span className='inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-purple-50 text-purple-700'>
490-
<Image className='w-3 h-3' />
491-
{draft.imageCount}
492-
</span>
493-
)}
494-
{draft.codeCount > 0 && (
495-
<span className='inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-pink-50 text-pink-700'>
496-
<Code className='w-3 h-3' />
497-
{draft.codeCount}
498-
</span>
499-
)}
500-
<span className='inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-gray-50 text-gray-700'>
501-
<TextSelect className='w-3 h-3' />
502-
{draft.charCount}
503-
</span>
504-
</div>
505-
</div>
506-
507-
{/* Title */}
508-
<div className='text-sm truncate'>
509-
<span className='font-medium'>{draft.title}</span>
510-
</div>
511-
{/* Draft */}
512-
<div className='text-sm truncate'>
513-
<span className='text-gray-500'>{draft.content.substring(0, 60)}…</span>
514-
</div>
515-
</div>
516-
</td>
517-
<td className='px-3 py-3 text-sm text-gray-500'>
518-
<div className='flex flex-col items-center gap-1'>
519-
<span
520-
title={new Date(draft.lastEdit).toLocaleString()}
521-
className='whitespace-nowrap'
522-
>
523-
{timeAgo(new Date(draft.lastEdit))}
524-
</span>
525-
<div className='flex items-center gap-1'>
526-
<button
527-
type='button'
528-
onClick={() => handleOpen(draft.url)}
529-
className='p-1.5 hover:bg-gray-100 rounded'
530-
aria-label='Open in context'
531-
title='Open in context'
532-
>
533-
<ExternalLink className='w-4 h-4 text-gray-600' />
534-
</button>
535-
<button
536-
type='button'
537-
onClick={() => handleTrash(draft)}
538-
className='p-1.5 hover:bg-gray-100 rounded'
539-
aria-label='Discard'
540-
title='Discard'
541-
>
542-
<Trash2 className='w-4 h-4 text-gray-600' />
543-
</button>
544-
</div>
545-
</div>
546-
</td>
547-
</tr>
548-
))}
438+
{filteredDrafts.map((draft) =>
439+
commentRow(draft, selectedIds, toggleSelection, handleOpen, handleTrash),
440+
)}
549441
</tbody>
550442
</table>
551443
</div>
552444
</div>
553445
)
554446
}
447+
function commentRow(
448+
draft: Draft,
449+
selectedIds: Set<unknown>,
450+
toggleSelection: (id: string) => void,
451+
handleOpen: (url: string) => void,
452+
handleTrash: (draft: { charCount: number; id: string }) => void,
453+
) {
454+
return (
455+
<tr key={draft.id} className='hover:bg-gray-50'>
456+
<td className='px-3 py-3'>
457+
<input
458+
type='checkbox'
459+
checked={selectedIds.has(draft.id)}
460+
onChange={() => toggleSelection(draft.id)}
461+
className='rounded'
462+
/>
463+
</td>
464+
<td className='px-3 py-3'>
465+
<div className='space-y-1'>
466+
{/* Context line */}
467+
<div className='flex items-center justify-between gap-1.5 text-xs text-gray-600'>
468+
<div className='flex items-center gap-1.5 min-w-0 flex-1'>
469+
<span className='w-4 h-4 flex items-center justify-center flex-shrink-0'>
470+
{draft.type === 'PR' && <GitPullRequestIcon size={16} />}
471+
{draft.type === 'ISSUE' && <IssueOpenedIcon size={16} />}
472+
{draft.type === 'REDDIT' && (
473+
<img
474+
src='https://styles.redditmedia.com/t5_2fwo/styles/communityIcon_1bqa1ibfp8q11.png?width=128&frame=1&auto=webp&s=400b33e7080aa4996c405a96b3872a12f0e3b68d'
475+
alt='Reddit'
476+
className='w-4 h-4 rounded-full'
477+
/>
478+
)}
479+
</span>
480+
481+
{isGitHubDraft(draft) && (
482+
<>
483+
<a href={'TODO'} className='hover:underline'>
484+
#{draft.number}
485+
</a>{' '}
486+
<a href='TODO' className='hover:underline truncate'>
487+
{draft.repoSlug}
488+
</a>
489+
</>
490+
)}
491+
{isRedditDraft(draft) && (
492+
<a href={'TODO'} className='hover:underline truncate'>
493+
r/{draft.subreddit}
494+
</a>
495+
)}
496+
</div>
497+
<div className='flex items-center gap-1 flex-shrink-0'>
498+
{draft.linkCount > 0 && (
499+
<span className='inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-blue-50 text-blue-700'>
500+
<Link className='w-3 h-3' />
501+
{draft.linkCount}
502+
</span>
503+
)}
504+
{draft.imageCount > 0 && (
505+
<span className='inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-purple-50 text-purple-700'>
506+
<Image className='w-3 h-3' />
507+
{draft.imageCount}
508+
</span>
509+
)}
510+
{draft.codeCount > 0 && (
511+
<span className='inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-pink-50 text-pink-700'>
512+
<Code className='w-3 h-3' />
513+
{draft.codeCount}
514+
</span>
515+
)}
516+
<span className='inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-gray-50 text-gray-700'>
517+
<TextSelect className='w-3 h-3' />
518+
{draft.charCount}
519+
</span>
520+
</div>
521+
</div>
522+
523+
{/* Title */}
524+
<div className='text-sm truncate'>
525+
<span className='font-medium'>{draft.title}</span>
526+
</div>
527+
{/* Draft */}
528+
<div className='text-sm truncate'>
529+
<span className='text-gray-500'>{draft.content.substring(0, 60)}…</span>
530+
</div>
531+
</div>
532+
</td>
533+
<td className='px-3 py-3 text-sm text-gray-500'>
534+
<div className='flex flex-col items-center gap-1'>
535+
<span title={new Date(draft.lastEdit).toLocaleString()} className='whitespace-nowrap'>
536+
{timeAgo(new Date(draft.lastEdit))}
537+
</span>
538+
<div className='flex items-center gap-1'>
539+
<button
540+
type='button'
541+
onClick={() => handleOpen(draft.url)}
542+
className='p-1.5 hover:bg-gray-100 rounded'
543+
aria-label='Open in context'
544+
title='Open in context'
545+
>
546+
<ExternalLink className='w-4 h-4 text-gray-600' />
547+
</button>
548+
<button
549+
type='button'
550+
onClick={() => handleTrash(draft)}
551+
className='p-1.5 hover:bg-gray-100 rounded'
552+
aria-label='Discard'
553+
title='Discard'
554+
>
555+
<Trash2 className='w-4 h-4 text-gray-600' />
556+
</button>
557+
</div>
558+
</div>
559+
</td>
560+
</tr>
561+
)
562+
}

0 commit comments

Comments
 (0)