spoon/apps/next/src/components/agent-workspace/file-tabs.tsx

'use client';

import { Circle, X } from 'lucide-react';

import { Button } from '@spoon/ui';

import { basename } from './languages';

export type OpenFileTab = {
  path: string;
  dirty: boolean;
};

export const FileTabs = ({
  tabs,
  activePath,
  onActivate,
  onClose,
}: {
  tabs: OpenFileTab[];
  activePath?: string;
  onActivate: (path: string) => void;
  onClose: (path: string) => void;
}) => {
  if (tabs.length === 0) return null;
  return (
    <div className='border-border bg-muted/30 flex h-10 flex-none items-stretch overflow-x-auto border-b'>
      {tabs.map((tab) => {
        const active = tab.path === activePath;
        return (
          <div
            key={tab.path}
            className={
              active
                ? 'border-primary bg-background flex max-w-56 min-w-0 items-center border-t-2 border-r'
                : 'border-border flex max-w-56 min-w-0 items-center border-r'
            }
            title={tab.path}
          >
            <button
              type='button'
              className='flex h-full min-w-0 flex-1 items-center gap-2 px-3 text-left text-xs'
              onClick={() => onActivate(tab.path)}
            >
              {tab.dirty ? (
                <Circle className='fill-primary text-primary size-2 flex-none' />
              ) : null}
              <span className='truncate font-mono'>{basename(tab.path)}</span>
            </button>
            <Button
              type='button'
              variant='ghost'
              size='icon'
              className='mr-1 size-6 flex-none'
              aria-label={`Close ${tab.path}`}
              onClick={() => onClose(tab.path)}
            >
              <X className='size-3' />
            </Button>
          </div>
        );
      })}
    </div>
  );
};