boocode/apps/web/src/components/ChatTabBar.tsx

import { useState } from 'react';
import { Bot, History, MessageSquare, Plus, Terminal, X } from 'lucide-react';
import type { Chat, WorkspacePane } from '@/api/types';
import { StatusDot } from '@/components/StatusDot';
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from '@/components/ui/context-menu';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { useLongPress } from '@/hooks/useLongPress';
import { cn } from '@/lib/utils';

interface Props {
  pane: WorkspacePane;
  tabs: Chat[];
  onSwitchTab: (tabIdx: number) => void;
  onRemoveTab: (chatId: string) => void;
  onCloseOthers: (chatId: string) => void;
  onCloseToRight: (chatId: string) => void;
  onCloseAll: () => void;
  onAddPane: (kind: 'chat' | 'terminal' | 'agent') => void;
  onShowHistory: () => void;
  onRename: (chatId: string, name: string) => Promise<void>;
  onRemovePane?: () => void;
}

export function ChatTabBar({
  pane,
  tabs,
  onSwitchTab,
  onRemoveTab,
  onCloseOthers,
  onCloseToRight,
  onCloseAll,
  onAddPane,
  onShowHistory,
  onRename,
  onRemovePane,
}: Props) {
  const [renamingId, setRenamingId] = useState<string | null>(null);
  const [renameValue, setRenameValue] = useState('');

  // Long-press: dispatch a synthetic contextmenu event on the tab so the
  // existing Radix ContextMenuTrigger opens at the touch coordinates. Works
  // because asChild composition makes the tab div the trigger element.
  const longPress = useLongPress(({ clientX, clientY, target }) => {
    if (!target || !(target instanceof Element)) return;
    const tab = target.closest('[data-tab-id]') as HTMLElement | null;
    if (!tab) return;
    tab.dispatchEvent(
      new MouseEvent('contextmenu', { bubbles: true, cancelable: true, clientX, clientY }),
    );
  });

  function startRename(chatId: string, currentName: string | null) {
    setRenamingId(chatId);
    setRenameValue(currentName ?? '');
  }

  async function finishRename() {
    if (renamingId && renameValue.trim()) {
      await onRename(renamingId, renameValue.trim());
    }
    setRenamingId(null);
  }

  return (
    <div className="flex items-center border-b border-border bg-muted/20 h-8 shrink-0 overflow-x-auto max-md:hidden">
      {tabs.map((chat, tabIdx) => {
        const isActive = tabIdx === pane.activeChatIdx;
        const isLast = tabIdx === tabs.length - 1;
        const onlyTab = tabs.length === 1;
        const label = chat.name ?? 'New chat';
        return (
          <ContextMenu key={chat.id}>
            <ContextMenuTrigger asChild>
              <div
                data-tab-id={chat.id}
                onClick={() => onSwitchTab(tabIdx)}
                onTouchStart={longPress.onTouchStart}
                onTouchMove={longPress.onTouchMove}
                onTouchEnd={longPress.onTouchEnd}
                onTouchCancel={longPress.onTouchCancel}
                style={{ WebkitTouchCallout: 'none' }}
                className={cn(
                  'group flex items-center gap-1.5 px-3 py-1.5 text-xs border-r border-border cursor-default select-none shrink-0',
                  isActive
                    ? 'bg-background text-foreground'
                    : 'bg-muted/30 text-muted-foreground hover:bg-muted/60'
                )}
              >
                <MessageSquare size={12} className="shrink-0" />
                <StatusDot chatId={chat.id} />
                {renamingId === chat.id ? (
                  <input
                    autoFocus
                    value={renameValue}
                    onChange={(e) => setRenameValue(e.target.value)}
                    onBlur={() => void finishRename()}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter') void finishRename();
                      if (e.key === 'Escape') setRenamingId(null);
                    }}
                    onClick={(e) => e.stopPropagation()}
                    className="bg-transparent border-b border-border text-xs outline-none w-28"
                  />
                ) : (
                  <span className="truncate max-w-[140px]" title={label}>
                    {label}
                  </span>
                )}
                <button
                  type="button"
                  onClick={(e) => {
                    e.stopPropagation();
                    onRemoveTab(chat.id);
                  }}
                  className="inline-flex items-center justify-center p-0.5 hover:bg-muted rounded opacity-0 group-hover:opacity-60 hover:!opacity-100 shrink-0 max-md:min-h-[44px] max-md:min-w-[44px] max-md:opacity-100"
                  aria-label="Close tab"
                >
                  <X size={10} />
                </button>
              </div>
            </ContextMenuTrigger>
            <ContextMenuContent>
              <ContextMenuItem onSelect={() => onAddPane('chat')}>
                New chat
              </ContextMenuItem>
              <ContextMenuSeparator />
              <ContextMenuItem onSelect={() => startRename(chat.id, chat.name)}>
                Rename
              </ContextMenuItem>
              <ContextMenuSeparator />
              <ContextMenuItem onSelect={() => onRemoveTab(chat.id)}>
                Close
              </ContextMenuItem>
              <ContextMenuItem
                disabled={onlyTab}
                onSelect={() => onCloseOthers(chat.id)}
              >
                Close others
              </ContextMenuItem>
              <ContextMenuItem
                disabled={isLast}
                onSelect={() => onCloseToRight(chat.id)}
              >
                Close to right
              </ContextMenuItem>
              <ContextMenuItem onSelect={() => onCloseAll()}>
                Close all
              </ContextMenuItem>
            </ContextMenuContent>
          </ContextMenu>
        );
      })}

      {tabs.length === 0 && (
        <div className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-muted-foreground">
          <History size={12} className="shrink-0" />
          <span>Session</span>
        </div>
      )}

      <div className="flex items-center ml-auto gap-0.5 px-1 shrink-0">
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button
              type="button"
              className="inline-flex items-center justify-center p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]"
              aria-label="New pane"
              title="New pane"
            >
              <Plus size={12} />
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="min-w-40">
            <DropdownMenuItem onSelect={() => onAddPane('chat')}>
              <MessageSquare size={14} /> New chat
            </DropdownMenuItem>
            <DropdownMenuItem onSelect={() => onAddPane('terminal')}>
              <Terminal size={14} /> New terminal
            </DropdownMenuItem>
            <DropdownMenuItem onSelect={() => onAddPane('agent')}>
              <Bot size={14} /> New agent
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
        <button
          type="button"
          onClick={onShowHistory}
          className={cn(
            'inline-flex items-center justify-center p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]',
            pane.kind === 'empty' && 'text-foreground bg-muted/50'
          )}
          aria-label="Session history"
          title="Session history"
        >
          <History size={12} />
        </button>
        {onRemovePane && (
          <button
            type="button"
            onClick={onRemovePane}
            className="inline-flex items-center justify-center p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]"
            aria-label="Close pane"
            title="Close pane"
          >
            <X size={12} />
          </button>
        )}
      </div>
    </div>
  );
}