browser/web/TabList.tsx

import { useQuery } from '@tanstack/react-query';
import { Link } from 'react-router';
import { Globe, Loader2, X, Eye } from 'lucide-react';
import { toast } from 'sonner';
import { useClient } from 'hooks/useClient';
import { browserTabPath, useBrowserTargets, useSelectedTabId, type BrowserTarget } from './shared';

export const TabList = () => {
  const client = useClient();
  const selectedId = useSelectedTabId();

  const { data: status } = useQuery({
    queryKey: ['browser-status'],
    queryFn: () => client.get<{ extensionConnected: boolean; targetCount: number }>('/browser/status'),
    refetchInterval: 5000,
  });

  const { data: targets, isLoading } = useBrowserTargets(!!status?.extensionConnected);

  const targetList: BrowserTarget[] = targets ?? [];

  const handleClose = async (targetId: string) => {
    try {
      await client.post(`/browser/targets/${targetId}/close`);
    } catch {
      toast.error('Failed to close tab');
    }
  };

  const handleActivate = async (targetId: string) => {
    try {
      await client.post(`/browser/targets/${targetId}/activate`);
    } catch {
      toast.error('Failed to activate tab');
    }
  };

  const isConnected = status?.extensionConnected ?? false;

  return (
    <div className="flex h-full flex-col overflow-y-auto">
      <div className="flex items-center gap-2 border-b px-3 py-2">
        <Globe className="h-4 w-4 opacity-60" />
        <span className="text-sm font-medium">Browser</span>
        <div
          className={`ml-auto h-2 w-2 rounded-full ${isConnected ? 'bg-success' : 'bg-red-500'}`}
          title={isConnected ? 'Extension connected' : 'Extension not connected'}
        />
      </div>

      {!isConnected && (
        <div className="flex flex-col items-center justify-center gap-3 p-4 text-sm flex-1">
          <Globe className="h-8 w-8 opacity-30" />
          <p className="opacity-60 text-center">Extension not connected</p>
          {/* A <Link>, not an <a href>: a raw href to an in-app route reloads the whole SPA. */}
          <Link to="/settings/integrations" className="text-xs text-duck-teal underline">
            Set up in Integrations
          </Link>
        </div>
      )}

      {isConnected && isLoading && (
        <div className="flex h-32 items-center justify-center">
          <Loader2 className="h-5 w-5 animate-spin opacity-50" />
        </div>
      )}

      {isConnected && !isLoading && targetList.length === 0 && (
        <div className="flex h-32 flex-col items-center justify-center gap-2 text-sm opacity-50">
          <Globe className="h-6 w-6" />
          <span>No tabs attached</span>
          <span className="text-xs">Click the extension icon on a tab</span>
        </div>
      )}

      {isConnected && targetList.length > 0 && (
        <div className="flex flex-1 flex-col divide-y divide-white/10">
          {/* Focus and Close are siblings of the anchor, not children of it: an <a> may not contain a
              <button>, and the old row was a <button> containing two more — invalid either way, and it
              was only the stopPropagation calls holding it together. */}
          {targetList.map((target) => (
            <div
              key={target.id}
              className={`group relative flex transition-colors ${
                selectedId === target.id ? 'bg-accent' : 'hover:bg-accent/50'
              }`}
            >
              <Link
                to={browserTabPath(target.id)}
                className="flex min-w-0 flex-1 flex-col gap-0.5 px-3 py-2.5 text-left"
              >
                <span className="truncate pr-14 text-sm font-medium">{target.title || 'Untitled'}</span>
                <span className="truncate text-xs opacity-50">{target.url}</span>
              </Link>
              <div className="absolute right-3 top-2.5 flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
                <button
                  onClick={() => handleActivate(target.id)}
                  className="rounded p-0.5 hover:bg-black/10 cursor-pointer"
                  title="Focus tab"
                >
                  <Eye className="h-3.5 w-3.5" />
                </button>
                <button
                  onClick={() => handleClose(target.id)}
                  className="rounded p-0.5 hover:bg-black/10 cursor-pointer"
                  title="Close tab"
                >
                  <X className="h-3.5 w-3.5" />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};