Pipe data to all of our row badges.

Author: nedtwigg

src/components/Badge.tsx

@@ -2,6 +2,7 @@ import { type JSX, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import type { VariantProps } from 'tailwind-variants'
 import { badgeCVA, typeColors, typeIcons } from '@/components/design'
+import type { CommentTableRow } from '@/entrypoints/background'
 
 import { CodePreview } from './BadgePopups/CodePreview'
 import { ImagePreview } from './BadgePopups/ImagePreview'
@@ -17,12 +18,16 @@ const typePopups = {
   open: OpenTabPopup,
   text: TextPreview,
   time: TimePreview,
-} satisfies Partial<Record<keyof typeof typeIcons, (props?: any) => JSX.Element>>
+} satisfies Partial<Record<keyof typeof typeIcons, (props: BadgePopupProps) => JSX.Element>>
+
+export interface BadgePopupProps {
+  row: CommentTableRow
+}
 
 export type BadgeProps = VariantProps<typeof badgeCVA> & {
   type: keyof typeof typeIcons
   text?: number | string
-  data?: any
+  data?: CommentTableRow
 }
 
 const Badge = ({ text, type, data }: BadgeProps) => {
@@ -48,14 +53,14 @@ const Badge = ({ text, type, data }: BadgeProps) => {
         {type === 'blank' || <Icon className='h-3 w-3' />}
         {text || type}
       </span>
-      {PopupComponent && (
+      {PopupComponent && data && (
         <div
           className={twMerge(
             'absolute top-full z-10 w-30 rounded border px-2 py-1 text-left text-xs shadow-lg',
             typeColors[type],
           )}
         >
-          <PopupComponent {...data} />
+          <PopupComponent row={data} />
         </div>
       )}
     </button>

src/components/BadgePopups/CodePreview.tsx

@@ -1,4 +1,6 @@
-export function CodePreview() {
+import type { BadgePopupProps } from '@/components/Badge'
+
+export function CodePreview({ row: _row }: BadgePopupProps) {
   return (
     <>
       TODO{' '}

src/components/BadgePopups/ImagePreview.tsx

@@ -1,4 +1,6 @@
-export function ImagePreview() {
+import type { BadgePopupProps } from '@/components/Badge'
+
+export function ImagePreview({ row: _row }: BadgePopupProps) {
   return (
     <>
       TODO{' '}

src/components/BadgePopups/LinkPreview.tsx

@@ -1,4 +1,6 @@
-export function LinkPreview() {
+import type { BadgePopupProps } from '@/components/Badge'
+
+export function LinkPreview({ row: _row }: BadgePopupProps) {
   return (
     <>
       TODO{' '}

src/components/BadgePopups/OpenTabPopup.tsx

@@ -1,12 +1,9 @@
+import type { BadgePopupProps } from '@/components/Badge'
 import { openOrFocusComment } from '@/entrypoints/popup/popup'
 
-interface OpenTabPopupProps {
-  uniqueKey: string
-}
-
-export function OpenTabPopup({ uniqueKey }: OpenTabPopupProps) {
+export function OpenTabPopup({ row }: BadgePopupProps) {
   const handleClick = () => {
-    openOrFocusComment(uniqueKey)
+    openOrFocusComment(row.spot.unique_key)
   }
 
   return (

src/components/BadgePopups/TextPreview.tsx

@@ -1,4 +1,6 @@
-export function TextPreview() {
+import type { BadgePopupProps } from '@/components/Badge'
+
+export function TextPreview({ row: _row }: BadgePopupProps) {
   return (
     <>
       TODO{' '}

src/components/BadgePopups/TimePreview.tsx

@@ -1,4 +1,6 @@
-export function TimePreview() {
+import type { BadgePopupProps } from '@/components/Badge'
+
+export function TimePreview({ row: _row }: BadgePopupProps) {
   return (
     <>
       TODO{' '}

src/components/CommentRow.tsx

@@ -39,17 +39,17 @@ export function CommentRow({ row, selectedIds, toggleSelection }: CommentRowProp
             </div>
             <div className='flex flex-shrink-0 items-center gap-1'>
               {row.latestDraft.stats.links.length > 0 && (
-                <Badge type='link' text={row.latestDraft.stats.links.length} />
+                <Badge type='link' text={row.latestDraft.stats.links.length} data={row} />
               )}
               {row.latestDraft.stats.images.length > 0 && (
-                <Badge type='image' text={row.latestDraft.stats.images.length} />
+                <Badge type='image' text={row.latestDraft.stats.images.length} data={row} />
               )}
               {row.latestDraft.stats.codeBlocks.length > 0 && (
-                <Badge type='code' text={row.latestDraft.stats.codeBlocks.length} />
+                <Badge type='code' text={row.latestDraft.stats.codeBlocks.length} data={row} />
               )}
-              <Badge type='text' text={row.latestDraft.stats.charCount} />
-              <Badge type='time' text={timeAgo(row.latestDraft.time)} />
-              {row.isOpenTab && <Badge type='open' data={{ uniqueKey: row.spot.unique_key }} />}
+              <Badge type='text' text={row.latestDraft.stats.charCount} data={row} />
+              <Badge type='time' text={timeAgo(row.latestDraft.time)} data={row} />
+              {row.isOpenTab && <Badge type='open' data={row} />}
             </div>
           </div>