Pipe the data to the "Open" badge.

Author: nedtwigg

src/components/Badge.tsx

@@ -17,14 +17,15 @@ const typePopups = {
   open: OpenTabPopup,
   text: TextPreview,
   time: TimePreview,
-} satisfies Partial<Record<keyof typeof typeIcons, () => JSX.Element>>
+} satisfies Partial<Record<keyof typeof typeIcons, (props?: any) => JSX.Element>>
 
 export type BadgeProps = VariantProps<typeof badgeCVA> & {
   type: keyof typeof typeIcons
   text?: number | string
+  data?: any
 }
 
-const Badge = ({ text, type }: BadgeProps) => {
+const Badge = ({ text, type, data }: BadgeProps) => {
   const Icon = typeIcons[type]
   const [showTooltip, setShowTooltip] = useState(false)
   const PopupComponent =
@@ -54,7 +55,7 @@ const Badge = ({ text, type }: BadgeProps) => {
             typeColors[type],
           )}
         >
-          <PopupComponent />
+          <PopupComponent {...data} />
         </div>
       )}
     </button>

src/components/BadgePopups/OpenTabPopup.tsx

@@ -1,8 +1,22 @@
-export function OpenTabPopup() {
+import { switchToTab } from '@/entrypoints/popup/popup'
+
+interface OpenTabPopupProps {
+  uniqueKey: string
+}
+
+export function OpenTabPopup({ uniqueKey }: OpenTabPopupProps) {
+  const handleClick = () => {
+    switchToTab(uniqueKey)
+  }
+
   return (
-    <>
+    <button
+      onClick={handleClick}
+      className='w-full cursor-pointer text-left hover:bg-opacity-80'
+      type='button'
+    >
       <p>Tab is already open.</p>
       <p>Click to activate.</p>
-    </>
+    </button>
   )
 }

src/components/CommentRow.tsx

@@ -44,7 +44,7 @@ export function CommentRow({ row, selectedIds, toggleSelection }: CommentRowProp
               )}
               <Badge type='text' text={row.latestDraft.stats.charCount} />
               <Badge type='time' text={timeAgo(row.latestDraft.time)} />
-              {row.isOpenTab && <Badge type='open' />}
+              {row.isOpenTab && <Badge type='open' data={{ uniqueKey: row.spot.unique_key }} />}
             </div>
           </div>
 

src/entrypoints/background.ts

@@ -108,14 +108,19 @@ export function handlePopupMessage(
     return KEEP_PORT_OPEN
   } else if (isSwitchToTabMessage(message)) {
     logger.debug('received switch tab message', message)
-    browser.windows
-      .update(message.windowId, { focused: true })
-      .then(() => {
-        return browser.tabs.update(message.tabId, { active: true })
-      })
-      .catch((error) => {
-        console.error('Error switching to tab:', error)
-      })
+    const storage = openSpots.get(message.uniqueKey)
+    if (storage) {
+      browser.windows
+        .update(storage.tab.windowId, { focused: true })
+        .then(() => {
+          return browser.tabs.update(storage.tab.tabId, { active: true })
+        })
+        .catch((error) => {
+          console.error('Error switching to tab:', error)
+        })
+    } else {
+      console.error('No tab found for unique key:', message.uniqueKey)
+    }
     return CLOSE_MESSAGE_PORT
   } else {
     logger.error('received unknown message', message)

src/entrypoints/popup/popup.tsx

@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client'
 import { PopupRoot } from '@/components/PopupRoot'
 import type { CommentTableRow } from '@/entrypoints/background'
 import { logger } from '@/lib/logger'
-import type { GetOpenSpotsMessage, GetTableRowsResponse } from '@/lib/messages'
+import type { GetOpenSpotsMessage, GetTableRowsResponse, SwitchToTabMessage } from '@/lib/messages'
 
 export interface FilterState {
   sentFilter: 'both' | 'sent' | 'unsent'
@@ -24,20 +24,14 @@ async function getOpenSpots(): Promise<CommentTableRow[]> {
   }
 }
 
-// function switchToTab(tabId: number, windowId: number): void {
-//   const message: SwitchToTabMessage = {
-//     tabId,
-//     type: 'SWITCH_TO_TAB',
-//     windowId,
-//   }
-//   browser.runtime.sendMessage(message)
-//   window.close()
-// }
-
-// const handleSpotClick = (spot: CommentTableRow) => {
-//   console.log('TODO: switchToTab')
-//   //switchToTab(spot.tab.tabId, spot.tab.windowId)
-// }
+export function switchToTab(uniqueKey: string): void {
+  const message: SwitchToTabMessage = {
+    type: 'SWITCH_TO_TAB',
+    uniqueKey,
+  }
+  browser.runtime.sendMessage(message)
+  window.close()
+}
 
 const app = document.getElementById('app')
 if (app) {

src/lib/messages.ts

@@ -15,8 +15,7 @@ export interface GetOpenSpotsMessage {
 
 export interface SwitchToTabMessage {
   type: 'SWITCH_TO_TAB'
-  tabId: number
-  windowId: number
+  uniqueKey: string
 }
 
 export type PopupToBackgroundMessage = GetOpenSpotsMessage | SwitchToTabMessage
@@ -64,12 +63,7 @@ export function isGetOpenSpotsMessage(message: any): message is GetOpenSpotsMess
 }
 
 export function isSwitchToTabMessage(message: any): message is SwitchToTabMessage {
-  return (
-    message &&
-    message.type === 'SWITCH_TO_TAB' &&
-    typeof message.tabId === 'number' &&
-    typeof message.windowId === 'number'
-  )
+  return message && message.type === 'SWITCH_TO_TAB' && typeof message.uniqueKey === 'string'
 }
 
 // Message handler types