tududi/frontend/components/Task/TimelinePanel.tsx

import React from 'react';
import { useTranslation } from 'react-i18next';
import TaskTimeline from './TaskTimeline';
import { ClockIcon, XMarkIcon } from '@heroicons/react/24/outline';

interface TimelinePanelProps {
  taskId: number | undefined;
  isExpanded: boolean;
  onToggle: () => void;
}

const TimelinePanel: React.FC<TimelinePanelProps> = ({
  taskId,
  isExpanded,
  onToggle
}) => {
  const { t } = useTranslation();

  return (
    <div className={`${
      isExpanded 
        ? 'w-full lg:w-80 opacity-100' 
        : 'w-0 lg:w-12 opacity-0 lg:opacity-100'
    } border-t lg:border-t-0 lg:border-l border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 flex flex-col transition-all duration-300 overflow-hidden`}>
      
      {/* Collapsed state - envelope icon */}
      {!isExpanded && (
        <div className="hidden lg:flex flex-col items-center justify-center h-full p-2">
          <span className="text-xs text-gray-500 dark:text-gray-400 mt-2 transform rotate-90 whitespace-nowrap">
            {t('timeline.activityTimeline')}
          </span>
        </div>
      )}
      
      {/* Expanded state - full timeline */}
      {isExpanded && (
        <>
          <div className="p-3 lg:p-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
            <div className="flex items-center justify-between">
              <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100 flex items-center">
                <ClockIcon className="h-4 w-4 mr-2 text-gray-500" />
                {t('timeline.activityTimeline')}
              </h3>
              <button
                onClick={() => onToggle()}
                className="lg:hidden p-1 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
                title={t('timeline.hideTimeline')}
              >
                <XMarkIcon className="h-4 w-4" />
              </button>
            </div>
          </div>
          <div className="p-3 lg:p-4 flex-1 overflow-hidden">
            <TaskTimeline taskId={taskId} />
          </div>
        </>
      )}
    </div>
  );
};

export default TimelinePanel;